feat: 添加 Tauri 桌面应用

- 创建 packages/desktop 模块 - 实现 Tauri 2.0 + React 桌面应用 - 复用 Web 前端代码 - 添加系统托盘功能 - 实现本地文件访问命令 - 配置 Vite + Tauri 集成 - 更新 .gitignore 添加 Rust/Tauri 相关规则
2025-12-12 13:19:00 +08:00
parent b5d3b7df57
commit 6ef9d95172
86 changed files with 14495 additions and 1 deletions
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="64" fill="#0ea5e9"/>
+  <text x="256" y="320" font-family="Arial, sans-serif" font-size="280" font-weight="bold" fill="white" text-anchor="middle">AI</text>
+</svg>
@@ -0,0 +1,13 @@
+<!doctype html>
+<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" />
+    <title>AI Assistant</title>
+  </head>
+  <body class="bg-gray-900 text-gray-100">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,38 @@
+{
+  "name": "@ai-assistant/desktop",
+  "version": "1.0.0",
+  "description": "AI Assistant Desktop Application",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tauri dev",
+    "dev:vite": "vite",
+    "build": "tauri build",
+    "build:vite": "tsc && vite build",
+    "build:debug": "tauri build --debug",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^2.1.1",
+    "@tauri-apps/plugin-dialog": "^2.2.0",
+    "@tauri-apps/plugin-fs": "^2.2.0",
+    "@tauri-apps/plugin-shell": "^2.2.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"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2.1.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.0"
+  }
+}
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,30 @@
+[package]
+name = "ai-assistant-desktop"
+version = "1.0.0"
+description = "AI Terminal Assistant Desktop Application"
+authors = ["AI Assistant Team"]
+edition = "2021"
+rust-version = "1.70"
+
+[lib]
+name = "ai_assistant_desktop_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = ["tray-icon"] }
+tauri-plugin-shell = "2"
+tauri-plugin-fs = "2"
+tauri-plugin-dialog = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+tokio = { version = "1", features = ["full"] }
+
+[profile.release]
+panic = "abort"
+codegen-units = 1
+lto = true
+opt-level = "s"
+strip = true
@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}
@@ -0,0 +1 @@
+{}
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>
@@ -0,0 +1,118 @@
+use serde::Serialize;
+use std::fs;
+use std::path::PathBuf;
+use std::sync::mpsc;
+use tauri_plugin_dialog::DialogExt;
+
+#[derive(Serialize)]
+pub struct AppInfo {
+    pub name: String,
+    pub version: String,
+    pub tauri_version: String,
+}
+
+#[tauri::command]
+pub fn get_app_info() -> AppInfo {
+    AppInfo {
+        name: "AI Assistant".to_string(),
+        version: env!("CARGO_PKG_VERSION").to_string(),
+        tauri_version: tauri::VERSION.to_string(),
+    }
+}
+
+#[tauri::command]
+pub async fn open_directory_dialog(app: tauri::AppHandle) -> Result<Option<String>, String> {
+    let (tx, rx) = mpsc::channel();
+
+    app.dialog()
+        .file()
+        .set_title("Select Working Directory")
+        .pick_folder(move |path| {
+            let _ = tx.send(path);
+        });
+
+    match rx.recv() {
+        Ok(Some(path)) => Ok(Some(path.to_string())),
+        Ok(None) => Ok(None),
+        Err(e) => Err(e.to_string()),
+    }
+}
+
+#[derive(Serialize)]
+pub struct FileContent {
+    pub path: String,
+    pub content: String,
+    pub size: u64,
+}
+
+#[tauri::command]
+pub async fn read_local_file(path: String) -> Result<FileContent, String> {
+    let path_buf = PathBuf::from(&path);
+
+    if !path_buf.exists() {
+        return Err(format!("File not found: {}", path));
+    }
+
+    let metadata = fs::metadata(&path_buf).map_err(|e| e.to_string())?;
+
+    if metadata.len() > 10 * 1024 * 1024 {
+        return Err("File too large (max 10MB)".to_string());
+    }
+
+    let content = fs::read_to_string(&path_buf).map_err(|e| e.to_string())?;
+
+    Ok(FileContent {
+        path,
+        content,
+        size: metadata.len(),
+    })
+}
+
+#[derive(Serialize)]
+pub struct DirectoryEntry {
+    pub name: String,
+    pub path: String,
+    pub is_dir: bool,
+    pub size: u64,
+}
+
+#[tauri::command]
+pub async fn list_directory(path: String) -> Result<Vec<DirectoryEntry>, String> {
+    let path_buf = PathBuf::from(&path);
+
+    if !path_buf.exists() {
+        return Err(format!("Directory not found: {}", path));
+    }
+
+    if !path_buf.is_dir() {
+        return Err(format!("Not a directory: {}", path));
+    }
+
+    let mut entries = Vec::new();
+
+    let read_dir = fs::read_dir(&path_buf).map_err(|e| e.to_string())?;
+
+    for entry in read_dir {
+        let entry = entry.map_err(|e| e.to_string())?;
+        let metadata = entry.metadata().map_err(|e| e.to_string())?;
+
+        entries.push(DirectoryEntry {
+            name: entry.file_name().to_string_lossy().to_string(),
+            path: entry.path().to_string_lossy().to_string(),
+            is_dir: metadata.is_dir(),
+            size: metadata.len(),
+        });
+    }
+
+    entries.sort_by(|a, b| {
+        if a.is_dir == b.is_dir {
+            a.name.to_lowercase().cmp(&b.name.to_lowercase())
+        } else if a.is_dir {
+            std::cmp::Ordering::Less
+        } else {
+            std::cmp::Ordering::Greater
+        }
+    });
+
+    Ok(entries)
+}
@@ -0,0 +1,66 @@
+use tauri::{
+    menu::{Menu, MenuItem},
+    tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
+    Manager, Runtime,
+};
+
+mod commands;
+
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_dialog::init())
+        .setup(|app| {
+            setup_tray(app)?;
+            Ok(())
+        })
+        .invoke_handler(tauri::generate_handler![
+            commands::get_app_info,
+            commands::open_directory_dialog,
+            commands::read_local_file,
+            commands::list_directory,
+        ])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+
+fn setup_tray<R: Runtime>(app: &tauri::App<R>) -> Result<(), Box<dyn std::error::Error>> {
+    let show_item = MenuItem::with_id(app, "show", "Show Window", true, None::<&str>)?;
+    let quit_item = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
+
+    let menu = Menu::with_items(app, &[&show_item, &quit_item])?;
+
+    let _tray = TrayIconBuilder::new()
+        .menu(&menu)
+        .show_menu_on_left_click(false)
+        .on_menu_event(|app, event| match event.id.as_ref() {
+            "show" => {
+                if let Some(window) = app.get_webview_window("main") {
+                    let _ = window.show();
+                    let _ = window.set_focus();
+                }
+            }
+            "quit" => {
+                app.exit(0);
+            }
+            _ => {}
+        })
+        .on_tray_icon_event(|tray, event| {
+            if let TrayIconEvent::Click {
+                button: MouseButton::Left,
+                button_state: MouseButtonState::Up,
+                ..
+            } = event
+            {
+                let app = tray.app_handle();
+                if let Some(window) = app.get_webview_window("main") {
+                    let _ = window.show();
+                    let _ = window.set_focus();
+                }
+            }
+        })
+        .build(app)?;
+
+    Ok(())
+}
@@ -0,0 +1,5 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    ai_assistant_desktop_lib::run()
+}
@@ -0,0 +1,55 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "AI Assistant",
+  "version": "1.0.0",
+  "identifier": "com.ai-assistant.desktop",
+  "build": {
+    "beforeDevCommand": "pnpm dev:vite",
+    "devUrl": "http://localhost:5199",
+    "beforeBuildCommand": "pnpm build:vite",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "withGlobalTauri": true,
+    "windows": [
+      {
+        "title": "AI Assistant",
+        "width": 1200,
+        "height": 800,
+        "minWidth": 800,
+        "minHeight": 600,
+        "resizable": true,
+        "fullscreen": false,
+        "center": true
+      }
+    ],
+    "security": {
+      "csp": null
+    },
+    "trayIcon": {
+      "iconPath": "icons/icon.png",
+      "iconAsTemplate": true
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ],
+    "macOS": {
+      "minimumSystemVersion": "10.15"
+    },
+    "windows": {
+      "wix": null,
+      "nsis": {
+        "installMode": "currentUser"
+      }
+    }
+  },
+  "plugins": {}
+}
@@ -0,0 +1,140 @@
+/**
+ * App Component
+ */
+
+import { useState, useEffect } from 'react';
+import { Sidebar } from './components/Sidebar';
+import { ChatPage } from './pages/Chat';
+import { FileBrowser } from './components/FileBrowser';
+import { ConfigPanel } from './components/ConfigPanel';
+import { listSessions, createSession, type Session } from './api/client';
+
+export function App() {
+  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
+  const [isInitializing, setIsInitializing] = useState(true);
+  const [showFileBrowser, setShowFileBrowser] = useState(false);
+  const [showConfig, setShowConfig] = useState(false);
+
+  // 初始化：加载或创建会话
+  useEffect(() => {
+    async function init() {
+      try {
+        const { data: sessions } = await listSessions();
+
+        if (sessions.length > 0) {
+          // 选择最近的会话
+          setCurrentSessionId(sessions[0].id);
+        } else {
+          // 创建新会话
+          const { data: newSession } = await createSession();
+          setCurrentSessionId(newSession.id);
+        }
+      } catch (error) {
+        console.error('Failed to initialize:', error);
+      } finally {
+        setIsInitializing(false);
+      }
+    }
+
+    init();
+  }, []);
+
+  const handleSelectSession = (id: string) => {
+    setCurrentSessionId(id);
+  };
+
+  const handleCreateSession = (session: Session) => {
+    setCurrentSessionId(session.id);
+  };
+
+  if (isInitializing) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-gray-900">
+        <div className="text-center">
+          <div className="w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+          <p className="text-gray-400">Initializing...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen flex bg-gray-900">
+      <Sidebar
+        currentSessionId={currentSessionId}
+        onSelectSession={handleSelectSession}
+        onCreateSession={handleCreateSession}
+      />
+
+      {/* 工具栏按钮 */}
+      <div className="absolute top-3 right-4 z-10 flex gap-2">
+        {/* 配置按钮 */}
+        <button
+          onClick={() => setShowConfig(true)}
+          className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors"
+          title="Settings"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+            />
+          </svg>
+        </button>
+
+        {/* 文件浏览器切换按钮 */}
+        <button
+          onClick={() => setShowFileBrowser(!showFileBrowser)}
+          className={`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'}
+        >
+          <svg className="w-5 h-5" 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>
+
+      <div className="flex-1 flex">
+        {/* 聊天区域 */}
+        <div className={`flex-1 ${showFileBrowser ? 'w-1/2' : 'w-full'}`}>
+          {currentSessionId ? (
+            <ChatPage key={currentSessionId} sessionId={currentSessionId} />
+          ) : (
+            <div className="flex-1 flex items-center justify-center h-full">
+              <p className="text-gray-400">Select or create a session</p>
+            </div>
+          )}
+        </div>
+
+        {/* 文件浏览器 */}
+        {showFileBrowser && (
+          <div className="w-1/2 border-l border-gray-700">
+            <FileBrowser
+              onFileSelect={(path, _content) => {
+                console.log('Selected file:', path);
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* 配置面板 */}
+      {showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
+    </div>
+  );
+}
@@ -0,0 +1,181 @@
+/**
+ * API Client for Web
+ */
+
+export interface Session {
+  id: string;
+  name?: string;
+  createdAt: string;
+  updatedAt: string;
+  status: string;
+  messageCount: number;
+}
+
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: string;
+}
+
+export interface HealthStatus {
+  status: string;
+  timestamp: string;
+  agent: {
+    coreAvailable: boolean;
+  };
+  auth: {
+    enabled: boolean;
+    tokenCount: number;
+  };
+  stats: {
+    sessions: number;
+    websocket: { connections: number };
+    sse: { connections: number };
+  };
+}
+
+const API_BASE = '/api';
+
+async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
+  const response = await fetch(`${API_BASE}${path}`, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+// Health
+export async function getHealth(): Promise<HealthStatus> {
+  return request('GET', '/../health');
+}
+
+// Sessions
+export async function listSessions(): Promise<{ success: boolean; data: Session[] }> {
+  return request('GET', '/sessions');
+}
+
+export async function createSession(name?: string): Promise<{ success: boolean; data: Session }> {
+  return request('POST', '/sessions', { name });
+}
+
+export async function getSession(id: string): Promise<{ success: boolean; data: Session }> {
+  return request('GET', `/sessions/${id}`);
+}
+
+export async function deleteSession(id: string): Promise<{ success: boolean }> {
+  return request('DELETE', `/sessions/${id}`);
+}
+
+// Messages
+export async function getMessages(sessionId: string): Promise<{ success: boolean; data: Message[] }> {
+  return request('GET', `/sessions/${sessionId}/messages`);
+}
+
+export async function sendMessage(
+  sessionId: string,
+  content: string
+): Promise<{ success: boolean; data: Message }> {
+  return request('POST', `/sessions/${sessionId}/messages`, { content });
+}
+
+// WebSocket
+export function createWebSocket(sessionId: string): WebSocket {
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const host = window.location.host;
+  return new WebSocket(`${protocol}//${host}/api/ws/${sessionId}`);
+}
+
+// Files
+export interface FileInfo {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  size: number;
+  modified: string;
+  extension?: string;
+}
+
+export interface FileListResponse {
+  success: boolean;
+  data: {
+    path: string;
+    absolutePath: string;
+    parent: string | null;
+    files: FileInfo[];
+  };
+}
+
+export interface FileReadResponse {
+  success: boolean;
+  data: {
+    path: string;
+    name: string;
+    type: string;
+    size: number;
+    modified: string;
+    content: string;
+    encoding: 'utf-8' | 'base64';
+  };
+}
+
+export interface FileTreeNode {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  children?: FileTreeNode[];
+}
+
+export interface FileTreeResponse {
+  success: boolean;
+  data: {
+    path: string;
+    tree: FileTreeNode[];
+  };
+}
+
+export async function getWorkingDirectory(): Promise<{ success: boolean; data: { workingDirectory: string; separator: string } }> {
+  return request('GET', '/files');
+}
+
+export async function listFiles(path: string = '.', showHidden: boolean = false): Promise<FileListResponse> {
+  const params = new URLSearchParams({ path });
+  if (showHidden) params.set('hidden', 'true');
+  return request('GET', `/files/list?${params}`);
+}
+
+export async function readFile(path: string): Promise<FileReadResponse> {
+  return request('GET', `/files/read?path=${encodeURIComponent(path)}`);
+}
+
+export async function getFileTree(path: string = '.', depth: number = 3): Promise<FileTreeResponse> {
+  const params = new URLSearchParams({ path, depth: String(depth) });
+  return request('GET', `/files/tree?${params}`);
+}
+
+// Config
+export interface ServerConfig {
+  model: string;
+  maxTokens: number;
+  temperature: number;
+  workdir: string;
+  allowedPaths: string[];
+  deniedPaths: string[];
+}
+
+export async function getConfig(): Promise<{ success: boolean; data: ServerConfig }> {
+  return request('GET', '/config');
+}
+
+export async function updateConfig(config: Partial<ServerConfig>): Promise<{ success: boolean; data: ServerConfig }> {
+  return request('PATCH', '/config', config);
+}
@@ -0,0 +1,85 @@
+/**
+ * Chat Input Component
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import { Send, Square } from 'lucide-react';
+import clsx from 'clsx';
+
+interface ChatInputProps {
+  onSend: (content: string) => void;
+  onCancel: () => void;
+  isLoading: boolean;
+  disabled?: boolean;
+}
+
+export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputProps) {
+  const [input, setInput] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // 自动调整高度
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+    }
+  }, [input]);
+
+  const handleSubmit = () => {
+    const trimmed = input.trim();
+    if (!trimmed || isLoading || disabled) return;
+
+    onSend(trimmed);
+    setInput('');
+
+    // 重置高度
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="border-t border-gray-700 p-4 bg-gray-900">
+      <div className="max-w-4xl mx-auto flex gap-2">
+        <div className="flex-1 relative">
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type a message... (Shift+Enter for new line)"
+            disabled={disabled}
+            rows={1}
+            className={clsx(
+              'w-full resize-none rounded-lg border border-gray-600 bg-gray-800 px-4 py-3',
+              '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'
+            )}
+          />
+        </div>
+        <button
+          onClick={isLoading ? onCancel : handleSubmit}
+          disabled={!isLoading && (!input.trim() || disabled)}
+          className={clsx(
+            'px-4 py-3 rounded-lg flex items-center justify-center transition-colors',
+            isLoading
+              ? 'bg-red-600 hover:bg-red-700 text-white'
+              : 'bg-primary-600 hover:bg-primary-700 text-white',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+          )}
+        >
+          {isLoading ? <Square size={20} /> : <Send size={20} />}
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,80 @@
+/**
+ * Chat Message Component
+ */
+
+import { User, Bot } from 'lucide-react';
+import clsx from 'clsx';
+import type { Message } from '../api/client';
+
+interface ChatMessageProps {
+  message: Message;
+}
+
+export function ChatMessage({ message }: ChatMessageProps) {
+  const isUser = message.role === 'user';
+
+  return (
+    <div
+      className={clsx(
+        'flex gap-4 p-4 rounded-lg',
+        isUser ? 'bg-gray-800' : 'bg-gray-850'
+      )}
+    >
+      <div
+        className={clsx(
+          'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
+          isUser ? 'bg-primary-600' : 'bg-green-600'
+        )}
+      >
+        {isUser ? <User size={18} /> : <Bot size={18} />}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm text-gray-400 mb-1">
+          {isUser ? 'You' : 'AI Assistant'}
+        </div>
+        <div className="message-content whitespace-pre-wrap break-words">
+          {message.content}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface StreamingMessageProps {
+  content: string;
+}
+
+export function StreamingMessage({ content }: StreamingMessageProps) {
+  return (
+    <div className="flex gap-4 p-4 rounded-lg bg-gray-850">
+      <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-green-600">
+        <Bot size={18} />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm text-gray-400 mb-1">AI Assistant</div>
+        <div className="message-content whitespace-pre-wrap break-words">
+          {content}
+          <span className="inline-block w-2 h-4 bg-gray-400 animate-pulse ml-1" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TypingIndicator() {
+  return (
+    <div className="flex gap-4 p-4 rounded-lg bg-gray-850">
+      <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-green-600">
+        <Bot size={18} />
+      </div>
+      <div className="flex-1">
+        <div className="text-sm text-gray-400 mb-1">AI Assistant</div>
+        <div className="typing-indicator">
+          <span />
+          <span />
+          <span />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,264 @@
+/**
+ * ConfigPanel Component
+ *
+ * 配置面板组件
+ */
+
+import { useState, useEffect } from 'react';
+import { getConfig, updateConfig, type ServerConfig } from '../api/client';
+
+interface ConfigPanelProps {
+  onClose: () => void;
+}
+
+// 可用的模型列表
+const AVAILABLE_MODELS = [
+  { id: 'claude-sonnet-4-20250514', name: 'Claude Sonnet 4' },
+  { id: 'claude-3-5-sonnet-20241022', name: 'Claude 3.5 Sonnet' },
+  { id: 'claude-3-opus-20240229', name: 'Claude 3 Opus' },
+  { id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
+];
+
+export function ConfigPanel({ onClose }: ConfigPanelProps) {
+  const [config, setConfig] = useState<ServerConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  // 表单状态
+  const [formData, setFormData] = useState({
+    model: '',
+    maxTokens: 8192,
+    temperature: 0.7,
+    workdir: '',
+  });
+
+  // 加载配置
+  useEffect(() => {
+    async function loadConfig() {
+      try {
+        const response = await getConfig();
+        setConfig(response.data);
+        setFormData({
+          model: response.data.model,
+          maxTokens: response.data.maxTokens,
+          temperature: response.data.temperature,
+          workdir: response.data.workdir,
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load config');
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadConfig();
+  }, []);
+
+  // 保存配置
+  const handleSave = async () => {
+    setSaving(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      const response = await updateConfig(formData);
+      setConfig(response.data);
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 2000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save config');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 重置为默认值
+  const handleReset = () => {
+    if (config) {
+      setFormData({
+        model: config.model,
+        maxTokens: config.maxTokens,
+        temperature: config.temperature,
+        workdir: config.workdir,
+      });
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        <div className="bg-gray-800 rounded-lg p-6">
+          <div className="text-gray-400">Loading configuration...</div>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+        {/* 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>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-gray-700 rounded transition-colors"
+          >
+            <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>
+
+        {/* Content */}
+        <div className="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">
+              {error}
+            </div>
+          )}
+
+          {/* Success message */}
+          {success && (
+            <div className="p-3 bg-green-900/50 border border-green-700 rounded-lg text-green-300 text-sm">
+              Configuration saved successfully!
+            </div>
+          )}
+
+          {/* Model */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              Model
+            </label>
+            <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"
+            >
+              {AVAILABLE_MODELS.map((model) => (
+                <option key={model.id} value={model.id}>
+                  {model.name}
+                </option>
+              ))}
+            </select>
+            <p className="mt-1 text-xs text-gray-500">
+              Select the AI model to use for conversations
+            </p>
+          </div>
+
+          {/* Max Tokens */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              Max Tokens: {formData.maxTokens}
+            </label>
+            <input
+              type="range"
+              min="1024"
+              max="32768"
+              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"
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1">
+              <span>1K</span>
+              <span>8K</span>
+              <span>16K</span>
+              <span>32K</span>
+            </div>
+            <p className="mt-1 text-xs text-gray-500">
+              Maximum number of tokens in the response
+            </p>
+          </div>
+
+          {/* Temperature */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              Temperature: {formData.temperature.toFixed(2)}
+            </label>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              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"
+            />
+            <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>
+            </div>
+            <p className="mt-1 text-xs text-gray-500">
+              Controls randomness in responses
+            </p>
+          </div>
+
+          {/* Working Directory */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              Working Directory
+            </label>
+            <input
+              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"
+              placeholder="/path/to/project"
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              Root directory for file operations
+            </p>
+          </div>
+
+          {/* Server Info (Read-only) */}
+          {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>
+                  <span className="text-gray-500">Allowed Paths:</span>
+                  <span className="ml-2 text-gray-300">
+                    {config.allowedPaths.length || 'All'}
+                  </span>
+                </div>
+                <div>
+                  <span className="text-gray-500">Denied Paths:</span>
+                  <span className="ml-2 text-gray-300">
+                    {config.deniedPaths.length || 'None'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50">
+          <button
+            onClick={handleReset}
+            className="px-4 py-2 text-sm text-gray-300 hover:text-white 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"
+          >
+            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"
+          >
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,236 @@
+/**
+ * FileBrowser Component
+ *
+ * 文件浏览器组件
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { listFiles, readFile, type FileInfo } from '../api/client';
+
+interface FileBrowserProps {
+  onFileSelect?: (path: string, content: string) => void;
+  className?: string;
+}
+
+// 文件图标
+const FileIcon = ({ type, extension }: { type: 'file' | 'directory'; extension?: string }) => {
+  if (type === 'directory') {
+    return (
+      <svg className="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
+      </svg>
+    );
+  }
+
+  // 根据扩展名显示不同颜色
+  const colors: Record<string, string> = {
+    ts: 'text-blue-400',
+    tsx: 'text-blue-400',
+    js: 'text-yellow-300',
+    jsx: 'text-yellow-300',
+    json: 'text-yellow-500',
+    md: 'text-gray-400',
+    css: 'text-pink-400',
+    html: 'text-orange-400',
+    py: 'text-green-400',
+    go: 'text-cyan-400',
+    rs: 'text-orange-500',
+  };
+
+  const color = colors[extension || ''] || 'text-gray-400';
+
+  return (
+    <svg className={`w-4 h-4 ${color}`} fill="currentColor" viewBox="0 0 20 20">
+      <path
+        fillRule="evenodd"
+        d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+// 格式化文件大小
+const formatSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+};
+
+export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps) {
+  const [currentPath, setCurrentPath] = useState('.');
+  const [files, setFiles] = useState<FileInfo[]>([]);
+  const [parentPath, setParentPath] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState<string | null>(null);
+  const [showHidden, setShowHidden] = useState(false);
+
+  // 加载目录内容
+  const loadDirectory = useCallback(async (path: string) => {
+    setLoading(true);
+    setError(null);
+    setSelectedFile(null);
+    setFileContent(null);
+
+    try {
+      const response = await listFiles(path, showHidden);
+      setFiles(response.data.files);
+      setCurrentPath(response.data.path);
+      setParentPath(response.data.parent);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load directory');
+    } finally {
+      setLoading(false);
+    }
+  }, [showHidden]);
+
+  // 初始加载
+  useEffect(() => {
+    loadDirectory('.');
+  }, [loadDirectory]);
+
+  // 处理文件/目录点击
+  const handleItemClick = async (item: FileInfo) => {
+    if (item.type === 'directory') {
+      loadDirectory(item.path);
+    } else {
+      setSelectedFile(item.path);
+      try {
+        const response = await readFile(item.path);
+        if (response.data.encoding === 'utf-8') {
+          setFileContent(response.data.content);
+          onFileSelect?.(item.path, response.data.content);
+        } else {
+          setFileContent('[Binary file]');
+        }
+      } catch (err) {
+        setFileContent(`Error: ${err instanceof Error ? err.message : 'Failed to read file'}`);
+      }
+    }
+  };
+
+  // 返回上级目录
+  const handleGoUp = () => {
+    if (parentPath !== null) {
+      loadDirectory(parentPath);
+    }
+  };
+
+  // 刷新
+  const handleRefresh = () => {
+    loadDirectory(currentPath);
+  };
+
+  return (
+    <div className={`flex flex-col h-full bg-gray-900 ${className}`}>
+      {/* 工具栏 */}
+      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+        <button
+          onClick={handleGoUp}
+          disabled={parentPath === null}
+          className="p-1.5 rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          title="Go up"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+          </svg>
+        </button>
+
+        <button
+          onClick={handleRefresh}
+          className="p-1.5 rounded hover:bg-gray-700"
+          title="Refresh"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
+          </svg>
+        </button>
+
+        <div className="flex-1 px-2 py-1 text-sm text-gray-400 bg-gray-900 rounded truncate">
+          {currentPath}
+        </div>
+
+        <label className="flex items-center gap-1 text-xs text-gray-400 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={showHidden}
+            onChange={(e) => {
+              setShowHidden(e.target.checked);
+              loadDirectory(currentPath);
+            }}
+            className="w-3 h-3"
+          />
+          Hidden
+        </label>
+      </div>
+
+      {/* 文件列表 */}
+      <div className="flex-1 overflow-auto">
+        {loading ? (
+          <div className="flex items-center justify-center h-32 text-gray-400">
+            Loading...
+          </div>
+        ) : error ? (
+          <div className="flex items-center justify-center h-32 text-red-400">
+            {error}
+          </div>
+        ) : files.length === 0 ? (
+          <div className="flex items-center justify-center h-32 text-gray-500">
+            Empty directory
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-800">
+            {files.map((file) => (
+              <div
+                key={file.path}
+                onClick={() => handleItemClick(file)}
+                className={`flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-800 ${
+                  selectedFile === file.path ? 'bg-gray-800 border-l-2 border-blue-500' : ''
+                }`}
+              >
+                <FileIcon type={file.type} extension={file.extension} />
+                <span className="flex-1 truncate text-sm">{file.name}</span>
+                {file.type === 'file' && (
+                  <span className="text-xs text-gray-500">{formatSize(file.size)}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 文件预览 */}
+      {selectedFile && fileContent && (
+        <div className="border-t border-gray-700 max-h-48 overflow-auto">
+          <div className="sticky top-0 flex items-center justify-between px-3 py-1 bg-gray-800 border-b border-gray-700">
+            <span className="text-xs text-gray-400 truncate">{selectedFile}</span>
+            <button
+              onClick={() => {
+                setSelectedFile(null);
+                setFileContent(null);
+              }}
+              className="p-1 hover:bg-gray-700 rounded"
+            >
+              <svg className="w-3 h-3" 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>
+          <pre className="p-3 text-xs text-gray-300 whitespace-pre-wrap font-mono">
+            {fileContent.slice(0, 5000)}
+            {fileContent.length > 5000 && '\n... (truncated)'}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,124 @@
+/**
+ * Sidebar Component
+ */
+
+import { useState, useEffect } from 'react';
+import { Plus, MessageSquare, Trash2, RefreshCw } from 'lucide-react';
+import clsx from 'clsx';
+import { listSessions, createSession, deleteSession, type Session } from '../api/client';
+
+interface SidebarProps {
+  currentSessionId: string | null;
+  onSelectSession: (id: string) => void;
+  onCreateSession: (session: Session) => void;
+}
+
+export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }: SidebarProps) {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadSessions = async () => {
+    setIsLoading(true);
+    try {
+      const { data } = await listSessions();
+      setSessions(data);
+    } catch (error) {
+      console.error('Failed to load sessions:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCreate = async () => {
+    try {
+      const { data } = await createSession();
+      setSessions((prev) => [data, ...prev]);
+      onCreateSession(data);
+    } catch (error) {
+      console.error('Failed to create session:', error);
+    }
+  };
+
+  const handleDelete = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await deleteSession(id);
+      setSessions((prev) => prev.filter((s) => s.id !== id));
+      if (currentSessionId === id) {
+        const remaining = sessions.filter((s) => s.id !== id);
+        if (remaining.length > 0) {
+          onSelectSession(remaining[0].id);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to delete session:', error);
+    }
+  };
+
+  useEffect(() => {
+    loadSessions();
+  }, []);
+
+  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>
+
+      {/* 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>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
+        AI Assistant v1.0
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,165 @@
+/**
+ * Chat Hook
+ *
+ * 管理 WebSocket 连接和消息状态
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createWebSocket, getMessages, type Message } from '../api/client';
+
+interface UseChatOptions {
+  sessionId: string;
+  onError?: (error: Error) => void;
+}
+
+interface ChatState {
+  messages: Message[];
+  isConnected: boolean;
+  isLoading: boolean;
+  streamingContent: string;
+}
+
+export function useChat({ sessionId, onError }: UseChatOptions) {
+  const [state, setState] = useState<ChatState>({
+    messages: [],
+    isConnected: false,
+    isLoading: false,
+    streamingContent: '',
+  });
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
+
+  // 加载历史消息
+  const loadMessages = useCallback(async () => {
+    try {
+      const { data } = await getMessages(sessionId);
+      setState((prev) => ({ ...prev, messages: data }));
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error('Failed to load messages'));
+    }
+  }, [sessionId, onError]);
+
+  // 连接 WebSocket
+  const connect = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) return;
+
+    const ws = createWebSocket(sessionId);
+
+    ws.onopen = () => {
+      setState((prev) => ({ ...prev, isConnected: true }));
+    };
+
+    ws.onclose = () => {
+      setState((prev) => ({ ...prev, isConnected: false }));
+      // 自动重连
+      reconnectTimeoutRef.current = setTimeout(connect, 3000);
+    };
+
+    ws.onerror = () => {
+      onError?.(new Error('WebSocket connection error'));
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+
+        switch (message.type) {
+          case 'chunk':
+            setState((prev) => ({
+              ...prev,
+              streamingContent: prev.streamingContent + (message.payload?.content || ''),
+            }));
+            break;
+
+          case 'done':
+            setState((prev) => {
+              const newMessage: Message = message.payload || {
+                id: Date.now().toString(),
+                role: 'assistant',
+                content: prev.streamingContent,
+                timestamp: new Date().toISOString(),
+              };
+              return {
+                ...prev,
+                messages: [...prev.messages, newMessage],
+                streamingContent: '',
+                isLoading: false,
+              };
+            });
+            break;
+
+          case 'message_received':
+            // 用户消息已确认
+            setState((prev) => ({
+              ...prev,
+              messages: [...prev.messages, message.payload],
+            }));
+            break;
+
+          case 'error':
+            onError?.(new Error(message.payload?.message || 'Unknown error'));
+            setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
+            break;
+        }
+      } catch {
+        // 忽略解析错误
+      }
+    };
+
+    wsRef.current = ws;
+  }, [sessionId, onError]);
+
+  // 发送消息
+  const sendMessage = useCallback(
+    (content: string) => {
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        onError?.(new Error('WebSocket not connected'));
+        return;
+      }
+
+      setState((prev) => ({ ...prev, isLoading: true }));
+
+      wsRef.current.send(
+        JSON.stringify({
+          type: 'message',
+          sessionId,
+          payload: { content },
+        })
+      );
+    },
+    [sessionId, onError]
+  );
+
+  // 取消处理
+  const cancelProcessing = useCallback(() => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+
+    wsRef.current.send(
+      JSON.stringify({
+        type: 'cancel',
+        sessionId,
+      })
+    );
+
+    setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
+  }, [sessionId]);
+
+  // 初始化
+  useEffect(() => {
+    loadMessages();
+    connect();
+
+    return () => {
+      clearTimeout(reconnectTimeoutRef.current);
+      wsRef.current?.close();
+    };
+  }, [loadMessages, connect]);
+
+  return {
+    ...state,
+    sendMessage,
+    cancelProcessing,
+    reload: loadMessages,
+  };
+}
@@ -0,0 +1,40 @@
+import { invoke } from '@tauri-apps/api/core';
+
+export interface AppInfo {
+  name: string;
+  version: string;
+  tauri_version: string;
+}
+
+export interface FileContent {
+  path: string;
+  content: string;
+  size: number;
+}
+
+export interface DirectoryEntry {
+  name: string;
+  path: string;
+  is_dir: boolean;
+  size: number;
+}
+
+export async function getAppInfo(): Promise<AppInfo> {
+  return invoke('get_app_info');
+}
+
+export async function openDirectoryDialog(): Promise<string | null> {
+  return invoke('open_directory_dialog');
+}
+
+export async function readLocalFile(path: string): Promise<FileContent> {
+  return invoke('read_local_file', { path });
+}
+
+export async function listDirectory(path: string): Promise<DirectoryEntry[]> {
+  return invoke('list_directory', { path });
+}
+
+export function isTauri(): boolean {
+  return typeof window !== 'undefined' && '__TAURI__' in window;
+}
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
@@ -0,0 +1,90 @@
+/**
+ * Chat Page
+ */
+
+import { useEffect, useRef } from 'react';
+import { Wifi, WifiOff } from 'lucide-react';
+import { useChat } from '../hooks/useChat';
+import { ChatMessage, StreamingMessage, TypingIndicator } from '../components/ChatMessage';
+import { ChatInput } from '../components/ChatInput';
+
+interface ChatPageProps {
+  sessionId: string;
+}
+
+export function ChatPage({ sessionId }: ChatPageProps) {
+  const {
+    messages,
+    isConnected,
+    isLoading,
+    streamingContent,
+    sendMessage,
+    cancelProcessing,
+  } = useChat({
+    sessionId,
+    onError: (error) => {
+      console.error('Chat error:', error);
+    },
+  });
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // 自动滚动到底部
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, streamingContent]);
+
+  return (
+    <div className="flex-1 flex flex-col h-screen">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-3 border-b border-gray-700 bg-gray-800">
+        <h1 className="text-lg font-medium">Chat</h1>
+        <div className="flex items-center gap-2 text-sm">
+          {isConnected ? (
+            <>
+              <Wifi size={16} className="text-green-500" />
+              <span className="text-green-500">Connected</span>
+            </>
+          ) : (
+            <>
+              <WifiOff size={16} className="text-red-500" />
+              <span className="text-red-500">Disconnected</span>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-4xl mx-auto space-y-4">
+          {messages.length === 0 && !isLoading && (
+            <div className="text-center py-20">
+              <h2 className="text-2xl font-semibold mb-2">Start a conversation</h2>
+              <p className="text-gray-400">
+                Type a message below to begin chatting with your AI assistant.
+              </p>
+            </div>
+          )}
+
+          {messages.map((message) => (
+            <ChatMessage key={message.id} message={message} />
+          ))}
+
+          {streamingContent && <StreamingMessage content={streamingContent} />}
+
+          {isLoading && !streamingContent && <TypingIndicator />}
+
+          <div ref={messagesEndRef} />
+        </div>
+      </div>
+
+      {/* Input */}
+      <ChatInput
+        onSend={sendMessage}
+        onCancel={cancelProcessing}
+        isLoading={isLoading}
+        disabled={!isConnected}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+/* Message content */
+.message-content {
+  @apply max-w-none text-gray-100;
+}
+
+.message-content pre {
+  @apply bg-gray-800 rounded-lg p-4 overflow-x-auto;
+}
+
+.message-content code {
+  @apply bg-gray-800 px-1.5 py-0.5 rounded text-sm;
+}
+
+.message-content pre code {
+  @apply bg-transparent p-0;
+}
+
+/* Typing indicator */
+.typing-indicator {
+  display: flex;
+  gap: 4px;
+}
+
+.typing-indicator span {
+  width: 8px;
+  height: 8px;
+  background: #6b7280;
+  border-radius: 50%;
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%,
+  80%,
+  100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+          950: '#082f49',
+        },
+      },
+    },
+  },
+  plugins: [],
+};
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+const host = process.env.TAURI_DEV_HOST;
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  clearScreen: false,
+  server: {
+    port: 5199,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: 'ws',
+          host,
+          port: 5200,
+        }
+      : undefined,
+    watch: {
+      ignored: ['**/src-tauri/**'],
+    },
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+      '/health': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+    },
+  },
+  envPrefix: ['VITE_', 'TAURI_'],
+  build: {
+    target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
+    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
+    sourcemap: !!process.env.TAURI_DEBUG,
+    outDir: 'dist',
+  },
+});