diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index c670c13..9e94beb 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -13,6 +13,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@ai-assistant/ui": "workspace:*",
     "@tauri-apps/api": "^2.1.1",
     "@tauri-apps/plugin-dialog": "^2.2.0",
     "@tauri-apps/plugin-fs": "^2.2.0",
diff --git a/packages/desktop/src/App.tsx b/packages/desktop/src/App.tsx
index 6530e4c..28d659b 100644
--- a/packages/desktop/src/App.tsx
+++ b/packages/desktop/src/App.tsx
@@ -3,11 +3,15 @@
  */
 
 import { useState, useEffect } from 'react';
-import { Sidebar } from './components/Sidebar';
+import {
+  Sidebar,
+  FileBrowser,
+  ConfigPanel,
+  listSessions,
+  createSession,
+  type Session,
+} from '@ai-assistant/ui';
 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);
diff --git a/packages/desktop/src/components/ChatInput.tsx b/packages/desktop/src/components/ChatInput.tsx
deleted file mode 100644
index af2bf1e..0000000
--- a/packages/desktop/src/components/ChatInput.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * 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>
-  );
-}
diff --git a/packages/desktop/src/components/ChatMessage.tsx b/packages/desktop/src/components/ChatMessage.tsx
deleted file mode 100644
index 66c79b0..0000000
--- a/packages/desktop/src/components/ChatMessage.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * 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>
-  );
-}
diff --git a/packages/desktop/src/components/ConfigPanel.tsx b/packages/desktop/src/components/ConfigPanel.tsx
deleted file mode 100644
index b9c11f4..0000000
--- a/packages/desktop/src/components/ConfigPanel.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * 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>
-  );
-}
diff --git a/packages/desktop/src/components/FileBrowser.tsx b/packages/desktop/src/components/FileBrowser.tsx
deleted file mode 100644
index 922f573..0000000
--- a/packages/desktop/src/components/FileBrowser.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * 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>
-  );
-}
diff --git a/packages/desktop/src/components/Sidebar.tsx b/packages/desktop/src/components/Sidebar.tsx
deleted file mode 100644
index 2c4cda6..0000000
--- a/packages/desktop/src/components/Sidebar.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * 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>
-  );
-}
diff --git a/packages/desktop/src/main.tsx b/packages/desktop/src/main.tsx
index f8136ef..72a0e5f 100644
--- a/packages/desktop/src/main.tsx
+++ b/packages/desktop/src/main.tsx
@@ -1,7 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { configureApiClient } from '@ai-assistant/ui';
 import { App } from './App';
 import './styles/index.css';
+import '@ai-assistant/ui/styles';
+
+// 配置 API 客户端：Tauri 应用需要完整的后端 URL
+configureApiClient({
+  baseUrl: 'http://localhost:3000/api',
+  wsBaseUrl: 'ws://localhost:3000/api',
+  healthUrl: 'http://localhost:3000/health',
+});
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/packages/desktop/src/pages/Chat.tsx b/packages/desktop/src/pages/Chat.tsx
index 14c18e5..dc58ddf 100644
--- a/packages/desktop/src/pages/Chat.tsx
+++ b/packages/desktop/src/pages/Chat.tsx
@@ -4,9 +4,13 @@
 
 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';
+import {
+  useChat,
+  ChatMessage,
+  StreamingMessage,
+  TypingIndicator,
+  ChatInput,
+} from '@ai-assistant/ui';
 
 interface ChatPageProps {
   sessionId: string;
diff --git a/packages/desktop/tailwind.config.js b/packages/desktop/tailwind.config.js
index 2f662f8..fe6125d 100644
--- a/packages/desktop/tailwind.config.js
+++ b/packages/desktop/tailwind.config.js
@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    '../ui/src/**/*.{js,ts,jsx,tsx}',
+  ],
   darkMode: 'class',
   theme: {
     extend: {
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..5b5369e
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@ai-assistant/ui",
+  "version": "1.0.0",
+  "description": "AI Terminal Assistant Shared UI Components",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./src/styles/index.css"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.344.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/packages/desktop/src/api/client.ts b/packages/ui/src/api/client.ts
similarity index 51%
rename from packages/desktop/src/api/client.ts
rename to packages/ui/src/api/client.ts
index a4e1c83..45cf938 100644
--- a/packages/desktop/src/api/client.ts
+++ b/packages/ui/src/api/client.ts
@@ -1,45 +1,70 @@
 /**
- * API Client for Web
+ * Configurable API Client
  */
 
-export interface Session {
-  id: string;
-  name?: string;
-  createdAt: string;
-  updatedAt: string;
-  status: string;
-  messageCount: number;
+import type {
+  Session,
+  Message,
+  HealthStatus,
+  FileListResponse,
+  FileReadResponse,
+  FileTreeResponse,
+  ServerConfig,
+} from './types.js';
+
+// Re-export types
+export type {
+  Session,
+  Message,
+  HealthStatus,
+  FileInfo,
+  FileListResponse,
+  FileReadResponse,
+  FileTreeNode,
+  FileTreeResponse,
+  ServerConfig,
+} from './types.js';
+
+// API Configuration
+interface ApiConfig {
+  baseUrl: string;
+  wsBaseUrl: () => string;
+  healthUrl: () => string;
 }
 
-export interface Message {
-  id: string;
-  role: 'user' | 'assistant' | 'system';
-  content: string;
-  timestamp: string;
-}
+let apiConfig: ApiConfig = {
+  baseUrl: '/api',
+  wsBaseUrl: () => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return `${protocol}//${window.location.host}/api`;
+  },
+  healthUrl: () => '/health',
+};
 
-export interface HealthStatus {
-  status: string;
-  timestamp: string;
-  agent: {
-    coreAvailable: boolean;
-  };
-  auth: {
-    enabled: boolean;
-    tokenCount: number;
-  };
-  stats: {
-    sessions: number;
-    websocket: { connections: number };
-    sse: { connections: number };
+/**
+ * Configure API client for different environments
+ */
+export function configureApiClient(config: {
+  baseUrl: string;
+  wsBaseUrl: string | (() => string);
+  healthUrl?: string | (() => string);
+}) {
+  apiConfig = {
+    baseUrl: config.baseUrl,
+    wsBaseUrl:
+      typeof config.wsBaseUrl === 'function'
+        ? config.wsBaseUrl
+        : () => config.wsBaseUrl as string,
+    healthUrl: config.healthUrl
+      ? typeof config.healthUrl === 'function'
+        ? config.healthUrl
+        : () => config.healthUrl as string
+      : () => '/health',
   };
 }
 
-// Tauri 应用需要完整的后端 URL
-const API_BASE = 'http://localhost:3000/api';
-
 async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
-  const response = await fetch(`${API_BASE}${path}`, {
+  const response = await fetch(`${apiConfig.baseUrl}${path}`, {
     method,
     headers: {
       'Content-Type': 'application/json',
@@ -57,7 +82,8 @@ async function request<T>(method: string, path: string, body?: unknown): Promise
 
 // Health
 export async function getHealth(): Promise<HealthStatus> {
-  const response = await fetch('http://localhost:3000/health');
+  const healthUrl = apiConfig.healthUrl();
+  const response = await fetch(healthUrl);
   if (!response.ok) {
     throw new Error(`HTTP ${response.status}`);
   }
@@ -82,7 +108,9 @@ export async function deleteSession(id: string): Promise<{ success: boolean }> {
 }
 
 // Messages
-export async function getMessages(sessionId: string): Promise<{ success: boolean; data: Message[] }> {
+export async function getMessages(
+  sessionId: string
+): Promise<{ success: boolean; data: Message[] }> {
   return request('GET', `/sessions/${sessionId}/messages`);
 }
 
@@ -95,63 +123,22 @@ export async function sendMessage(
 
 // WebSocket
 export function createWebSocket(sessionId: string): WebSocket {
-  // Tauri 应用直接连接后端
-  return new WebSocket(`ws://localhost:3000/api/ws/${sessionId}`);
+  const wsBase = apiConfig.wsBaseUrl();
+  return new WebSocket(`${wsBase}/ws/${sessionId}`);
 }
 
 // Files
-export interface FileInfo {
-  name: string;
-  path: string;
-  type: 'file' | 'directory';
-  size: number;
-  modified: string;
-  extension?: string;
-}
-
-export interface FileListResponse {
+export async function getWorkingDirectory(): Promise<{
   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 } }> {
+  data: { workingDirectory: string; separator: string };
+}> {
   return request('GET', '/files');
 }
 
-export async function listFiles(path: string = '.', showHidden: boolean = false): Promise<FileListResponse> {
+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}`);
@@ -167,19 +154,12 @@ export async function getFileTree(path: string = '.', depth: number = 3): Promis
 }
 
 // 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 }> {
+export async function updateConfig(
+  config: Partial<ServerConfig>
+): Promise<{ success: boolean; data: ServerConfig }> {
   return request('PATCH', '/config', config);
 }
diff --git a/packages/ui/src/api/types.ts b/packages/ui/src/api/types.ts
new file mode 100644
index 0000000..18fb156
--- /dev/null
+++ b/packages/ui/src/api/types.ts
@@ -0,0 +1,92 @@
+/**
+ * Shared API Types
+ */
+
+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 };
+  };
+}
+
+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 interface ServerConfig {
+  model: string;
+  maxTokens: number;
+  temperature: number;
+  workdir: string;
+  allowedPaths: string[];
+  deniedPaths: string[];
+}
diff --git a/packages/web/src/components/ChatInput.tsx b/packages/ui/src/components/ChatInput.tsx
similarity index 61%
rename from packages/web/src/components/ChatInput.tsx
rename to packages/ui/src/components/ChatInput.tsx
index 1189974..7cd128e 100644
--- a/packages/web/src/components/ChatInput.tsx
+++ b/packages/ui/src/components/ChatInput.tsx
@@ -1,7 +1,7 @@
 /**
  * Chat Input Component
  *
- * 响应式输入框：适配移动端键盘和触摸操作
+ * 支持响应式：responsive=true 时适配移动端键盘和触摸操作
  */
 
 import { useState, useRef, useEffect } from 'react';
@@ -13,9 +13,17 @@ interface ChatInputProps {
   onCancel: () => void;
   isLoading: boolean;
   disabled?: boolean;
+  /** 是否启用响应式布局（移动端适配） */
+  responsive?: boolean;
 }
 
-export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputProps) {
+export function ChatInput({
+  onSend,
+  onCancel,
+  isLoading,
+  disabled,
+  responsive = false,
+}: ChatInputProps) {
   const [input, setInput] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -24,11 +32,11 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
     const textarea = textareaRef.current;
     if (textarea) {
       textarea.style.height = 'auto';
-      // 移动端最大高度稍小
-      const maxHeight = window.innerWidth < 768 ? 120 : 200;
+      // 响应式模式下移动端最大高度稍小
+      const maxHeight = responsive && window.innerWidth < 768 ? 120 : 200;
       textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
     }
-  }, [input]);
+  }, [input, responsive]);
 
   const handleSubmit = () => {
     const trimmed = input.trim();
@@ -44,7 +52,7 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    // 移动端 Enter 直接发送，桌面端 Shift+Enter 换行
+    // Enter 发送，Shift+Enter 换行
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
@@ -52,7 +60,12 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
   };
 
   return (
-    <div className="border-t border-gray-700 p-3 md:p-4 bg-gray-900 safe-area-pb">
+    <div
+      className={clsx(
+        'border-t border-gray-700 bg-gray-900',
+        responsive ? 'p-3 md:p-4 safe-area-pb' : 'p-4'
+      )}
+    >
       <div className="max-w-4xl mx-auto flex gap-2">
         <div className="flex-1 relative">
           <textarea
@@ -60,13 +73,17 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder="Type a message..."
+            placeholder={
+              responsive
+                ? 'Type a message...'
+                : '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-3 py-2.5 md:px-4 md:py-3',
-              'text-base md:text-sm', // 移动端使用 16px 防止缩放
+              responsive ? 'px-3 py-2.5 md:px-4 md:py-3' : 'px-4 py-3',
+              responsive ? 'text-base md:text-sm' : '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'
@@ -77,8 +94,10 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
           onClick={isLoading ? onCancel : handleSubmit}
           disabled={!isLoading && (!input.trim() || disabled)}
           className={clsx(
-            '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
+            'rounded-lg flex items-center justify-center transition-colors',
+            responsive
+              ? 'px-3 py-2.5 md:px-4 md:py-3 min-w-[44px] min-h-[44px]' // 最小触摸目标 44x44
+              : 'px-4 py-3',
             isLoading
               ? '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',
@@ -88,10 +107,12 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
           {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>
+      {/* 响应式模式下桌面端显示提示文字 */}
+      {responsive && (
+        <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>
   );
 }
diff --git a/packages/web/src/components/ChatMessage.tsx b/packages/ui/src/components/ChatMessage.tsx
similarity index 97%
rename from packages/web/src/components/ChatMessage.tsx
rename to packages/ui/src/components/ChatMessage.tsx
index 66c79b0..5949c55 100644
--- a/packages/web/src/components/ChatMessage.tsx
+++ b/packages/ui/src/components/ChatMessage.tsx
@@ -4,7 +4,7 @@
 
 import { User, Bot } from 'lucide-react';
 import clsx from 'clsx';
-import type { Message } from '../api/client';
+import type { Message } from '../api/client.js';
 
 interface ChatMessageProps {
   message: Message;
diff --git a/packages/web/src/components/ConfigPanel.tsx b/packages/ui/src/components/ConfigPanel.tsx
similarity index 57%
rename from packages/web/src/components/ConfigPanel.tsx
rename to packages/ui/src/components/ConfigPanel.tsx
index 8aea4ce..eb807ab 100644
--- a/packages/web/src/components/ConfigPanel.tsx
+++ b/packages/ui/src/components/ConfigPanel.tsx
@@ -1,14 +1,17 @@
 /**
  * ConfigPanel Component
  *
- * 配置面板：移动端全屏显示，桌面端居中弹窗
+ * 支持响应式：responsive=true 时移动端全屏显示，桌面端居中弹窗
  */
 
 import { useState, useEffect } from 'react';
-import { getConfig, updateConfig, type ServerConfig } from '../api/client';
+import clsx from 'clsx';
+import { getConfig, updateConfig, type ServerConfig } from '../api/client.js';
 
 interface ConfigPanelProps {
   onClose: () => void;
+  /** 是否启用响应式布局（移动端全屏面板） */
+  responsive?: boolean;
 }
 
 // 可用的模型列表
@@ -19,7 +22,7 @@ const AVAILABLE_MODELS = [
   { id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
 ];
 
-export function ConfigPanel({ onClose }: ConfigPanelProps) {
+export function ConfigPanel({ onClose, responsive = false }: ConfigPanelProps) {
   const [config, setConfig] = useState<ServerConfig | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -96,26 +99,58 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
   }
 
   return (
-    <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">
+    <div
+      className={clsx(
+        'fixed inset-0 bg-black/50 flex z-50',
+        responsive ? 'items-end md:items-center justify-center' : 'items-center justify-center'
+      )}
+    >
+      {/* 响应式模式：移动端从底部滑出的全屏面板；桌面端：居中弹窗 */}
+      {/* 非响应式：固定居中弹窗 */}
+      <div
+        className={clsx(
+          'bg-gray-800 max-h-[90vh] overflow-auto',
+          responsive
+            ? 'w-full md:w-full md:max-w-lg md:mx-4 rounded-t-2xl md:rounded-lg'
+            : 'rounded-lg w-full max-w-lg mx-4'
+        )}
+      >
         {/* Header */}
-        <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>
+        <div
+          className={clsx(
+            'sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gray-800 z-10',
+            responsive ? 'px-4 md:px-6 py-4' : 'px-6 py-4'
+          )}
+        >
+          {/* 响应式模式下移动端拖动指示器 */}
+          {responsive && (
+            <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={clsx('text-lg font-semibold', responsive && 'mt-2 md:mt-0')}>
+            Configuration
+          </h2>
           <button
             onClick={onClose}
-            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"
+            className={clsx(
+              'hover:bg-gray-700 rounded transition-colors',
+              responsive
+                ? 'p-2 active:bg-gray-600 rounded-lg min-w-[44px] min-h-[44px] flex items-center justify-center'
+                : 'p-1'
+            )}
           >
             <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" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
         </div>
 
         {/* Content */}
-        <div className="p-4 md:p-6 space-y-6">
+        <div className={clsx('space-y-6', responsive ? 'p-4 md:p-6' : 'p-6')}>
           {/* Error message */}
           {error && (
             <div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
@@ -132,13 +167,14 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
 
           {/* Model */}
           <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
-              Model
-            </label>
+            <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-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"
+              className={clsx(
+                'w-full bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500',
+                responsive ? 'px-3 py-3 md:py-2 text-base md:text-sm' : 'px-3 py-2'
+              )}
             >
               {AVAILABLE_MODELS.map((model) => (
                 <option key={model.id} value={model.id}>
@@ -163,7 +199,10 @@ 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 touch-pan-x"
+              className={clsx(
+                'w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer',
+                responsive && 'touch-pan-x'
+              )}
             />
             <div className="flex justify-between text-xs text-gray-500 mt-1">
               <span>1K</span>
@@ -188,49 +227,54 @@ 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 touch-pan-x"
+              className={clsx(
+                'w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer',
+                responsive && 'touch-pan-x'
+              )}
             />
             <div className="flex justify-between text-xs text-gray-500 mt-1">
-              <span>Precise</span>
-              <span>Balanced</span>
-              <span>Creative</span>
+              <span>{responsive ? 'Precise' : 'Precise (0)'}</span>
+              <span>{responsive ? 'Balanced' : 'Balanced (0.5)'}</span>
+              <span>{responsive ? 'Creative' : 'Creative (1)'}</span>
             </div>
-            <p className="mt-1 text-xs text-gray-500">
-              Controls randomness in responses
-            </p>
+            <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>
+            <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-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"
+              className={clsx(
+                'w-full bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500 font-mono',
+                responsive ? 'px-3 py-3 md:py-2 text-base md:text-sm' : 'px-3 py-2 text-sm'
+              )}
               placeholder="/path/to/project"
             />
-            <p className="mt-1 text-xs text-gray-500">
-              Root directory for file operations
-            </p>
+            <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-1 md:grid-cols-2 gap-3 text-sm">
-                <div className="flex justify-between md:block">
+              <div
+                className={clsx(
+                  'text-sm',
+                  responsive ? 'grid grid-cols-1 md:grid-cols-2 gap-3' : 'grid grid-cols-2 gap-4'
+                )}
+              >
+                <div className={responsive ? 'flex justify-between md:block' : ''}>
                   <span className="text-gray-500">Allowed Paths:</span>
-                  <span className="md:ml-2 text-gray-300">
+                  <span className={clsx('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
                     {config.allowedPaths.length || 'All'}
                   </span>
                 </div>
-                <div className="flex justify-between md:block">
+                <div className={responsive ? 'flex justify-between md:block' : ''}>
                   <span className="text-gray-500">Denied Paths:</span>
-                  <span className="md:ml-2 text-gray-300">
+                  <span className={clsx('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
                     {config.deniedPaths.length || 'None'}
                   </span>
                 </div>
@@ -239,24 +283,40 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
           )}
         </div>
 
-        {/* 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">
+        {/* Footer */}
+        <div
+          className={clsx(
+            'sticky bottom-0 border-t border-gray-700 bg-gray-800',
+            responsive
+              ? '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 safe-area-pb'
+              : 'flex items-center justify-end gap-3 px-6 py-4 bg-gray-800/50'
+          )}
+        >
           <button
             onClick={handleReset}
-            className="px-4 py-3 md:py-2 text-sm text-gray-300 hover:text-white active:bg-gray-700 rounded-lg transition-colors"
+            className={clsx(
+              'text-sm text-gray-300 hover:text-white transition-colors',
+              responsive ? 'px-4 py-3 md:py-2 active:bg-gray-700 rounded-lg' : 'px-4 py-2'
+            )}
           >
             Reset
           </button>
           <button
             onClick={onClose}
-            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"
+            className={clsx(
+              'text-sm bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors',
+              responsive ? 'px-4 py-3 md:py-2 active:bg-gray-500' : 'px-4 py-2'
+            )}
           >
             Cancel
           </button>
           <button
             onClick={handleSave}
             disabled={saving}
-            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"
+            className={clsx(
+              'text-sm bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
+              responsive ? 'px-4 py-3 md:py-2 active:bg-blue-700 font-medium' : 'px-4 py-2'
+            )}
           >
             {saving ? 'Saving...' : 'Save Changes'}
           </button>
diff --git a/packages/web/src/components/FileBrowser.tsx b/packages/ui/src/components/FileBrowser.tsx
similarity index 99%
rename from packages/web/src/components/FileBrowser.tsx
rename to packages/ui/src/components/FileBrowser.tsx
index 922f573..b73ad6c 100644
--- a/packages/web/src/components/FileBrowser.tsx
+++ b/packages/ui/src/components/FileBrowser.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useState, useEffect, useCallback } from 'react';
-import { listFiles, readFile, type FileInfo } from '../api/client';
+import { listFiles, readFile, type FileInfo } from '../api/client.js';
 
 interface FileBrowserProps {
   onFileSelect?: (path: string, content: string) => void;
diff --git a/packages/web/src/components/Sidebar.tsx b/packages/ui/src/components/Sidebar.tsx
similarity index 63%
rename from packages/web/src/components/Sidebar.tsx
rename to packages/ui/src/components/Sidebar.tsx
index ac6220a..0d828f0 100644
--- a/packages/web/src/components/Sidebar.tsx
+++ b/packages/ui/src/components/Sidebar.tsx
@@ -1,21 +1,28 @@
 /**
  * Sidebar Component
  *
- * 响应式侧边栏：桌面端固定显示，移动端抽屉式菜单
+ * 支持响应式：responsive=true 时桌面端固定显示，移动端抽屉式菜单
  */
 
 import { useState, useEffect } from 'react';
 import { Plus, MessageSquare, Trash2, RefreshCw, Menu, X } from 'lucide-react';
 import clsx from 'clsx';
-import { listSessions, createSession, deleteSession, type Session } from '../api/client';
+import { listSessions, createSession, deleteSession, type Session } from '../api/client.js';
 
 interface SidebarProps {
   currentSessionId: string | null;
   onSelectSession: (id: string) => void;
   onCreateSession: (session: Session) => void;
+  /** 是否启用响应式布局（移动端抽屉式菜单） */
+  responsive?: boolean;
 }
 
-export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }: SidebarProps) {
+export function Sidebar({
+  currentSessionId,
+  onSelectSession,
+  onCreateSession,
+  responsive = false,
+}: SidebarProps) {
   const [sessions, setSessions] = useState<Session[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -37,7 +44,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
       const { data } = await createSession();
       setSessions((prev) => [data, ...prev]);
       onCreateSession(data);
-      setIsOpen(false); // 创建后关闭侧边栏
+      if (responsive) setIsOpen(false); // 响应式模式下创建后关闭侧边栏
     } catch (error) {
       console.error('Failed to create session:', error);
     }
@@ -61,7 +68,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
 
   const handleSelectSession = (id: string) => {
     onSelectSession(id);
-    setIsOpen(false); // 选择后关闭侧边栏
+    if (responsive) setIsOpen(false); // 响应式模式下选择后关闭侧边栏
   };
 
   useEffect(() => {
@@ -73,6 +80,69 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
     setIsOpen(false);
   };
 
+  // 非响应式模式：简单的固定侧边栏
+  if (!responsive) {
+    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>
+    );
+  }
+
+  // 响应式模式：移动端抽屉 + 桌面端固定
   return (
     <>
       {/* 移动端菜单按钮 */}
@@ -130,9 +200,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
               <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-4 text-center text-gray-500">No conversations yet</div>
           ) : (
             <div className="p-2 space-y-1">
               {sessions.map((session) => (
@@ -151,9 +219,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
                     <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 className="text-xs text-gray-500">{session.messageCount} messages</div>
                   </div>
                   <button
                     onClick={(e) => handleDelete(session.id, e)}
diff --git a/packages/desktop/src/hooks/useChat.ts b/packages/ui/src/hooks/useChat.ts
similarity index 99%
rename from packages/desktop/src/hooks/useChat.ts
rename to packages/ui/src/hooks/useChat.ts
index 976fd48..865d45c 100644
--- a/packages/desktop/src/hooks/useChat.ts
+++ b/packages/ui/src/hooks/useChat.ts
@@ -5,7 +5,7 @@
  */
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { createWebSocket, getMessages, type Message } from '../api/client';
+import { createWebSocket, getMessages, type Message } from '../api/client.js';
 
 interface UseChatOptions {
   sessionId: string;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..e04271a
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,47 @@
+/**
+ * @ai-assistant/ui - Shared UI Components
+ *
+ * 共享 UI 组件库，供 web 和 desktop 包使用
+ */
+
+// API Client
+export {
+  configureApiClient,
+  getHealth,
+  listSessions,
+  createSession,
+  getSession,
+  deleteSession,
+  getMessages,
+  sendMessage,
+  createWebSocket,
+  getWorkingDirectory,
+  listFiles,
+  readFile,
+  getFileTree,
+  getConfig,
+  updateConfig,
+} from './api/client.js';
+
+// Types
+export type {
+  Session,
+  Message,
+  HealthStatus,
+  FileInfo,
+  FileListResponse,
+  FileReadResponse,
+  FileTreeNode,
+  FileTreeResponse,
+  ServerConfig,
+} from './api/client.js';
+
+// Components
+export { ChatMessage, StreamingMessage, TypingIndicator } from './components/ChatMessage.js';
+export { ChatInput } from './components/ChatInput.js';
+export { Sidebar } from './components/Sidebar.js';
+export { FileBrowser } from './components/FileBrowser.js';
+export { ConfigPanel } from './components/ConfigPanel.js';
+
+// Hooks
+export { useChat } from './hooks/useChat.js';
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
new file mode 100644
index 0000000..7734da5
--- /dev/null
+++ b/packages/ui/src/styles/index.css
@@ -0,0 +1,115 @@
+/**
+ * Shared UI Styles
+ *
+ * 共享样式，供 web 和 desktop 包使用
+ * 注意：使用此文件时，宿主项目需要配置 Tailwind CSS
+ */
+
+/* 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;
+  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 {
+  max-width: none;
+  color: #f3f4f6; /* text-gray-100 */
+}
+
+.message-content pre {
+  background: #1f2937; /* bg-gray-800 */
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.message-content code {
+  background: #1f2937; /* bg-gray-800 */
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.message-content pre code {
+  background: transparent;
+  padding: 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;
+  }
+}
+
+/* bg-gray-850 custom color */
+.bg-gray-850 {
+  background-color: #1a1f2a;
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..bba0f17
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/web/package.json b/packages/web/package.json
index 1cf6fff..15ae5fb 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -10,6 +10,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@ai-assistant/ui": "workspace:*",
     "clsx": "^2.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index d6284e3..1e17604 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -5,11 +5,15 @@
  */
 
 import { useState, useEffect, useCallback } from 'react';
-import { Sidebar } from './components/Sidebar';
+import {
+  Sidebar,
+  FileBrowser,
+  ConfigPanel,
+  listSessions,
+  createSession,
+  type Session,
+} from '@ai-assistant/ui';
 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);
@@ -76,6 +80,7 @@ export function App() {
         currentSessionId={currentSessionId}
         onSelectSession={handleSelectSession}
         onCreateSession={handleCreateSession}
+        responsive
       />
 
       {/* 工具栏按钮 - 移动端右移避开菜单按钮 */}
@@ -126,7 +131,12 @@ export function App() {
         {/* 聊天区域 */}
         <div className={`flex-1 min-w-0 ${showFileBrowser ? 'hidden md:block md:w-1/2' : 'w-full'}`}>
           {currentSessionId ? (
-            <ChatPage key={currentSessionId} sessionId={currentSessionId} onSessionNotFound={handleSessionNotFound} />
+            <ChatPage
+              key={currentSessionId}
+              sessionId={currentSessionId}
+              onSessionNotFound={handleSessionNotFound}
+              responsive
+            />
           ) : (
             <div className="flex-1 flex items-center justify-center h-full">
               <p className="text-gray-400">Select or create a session</p>
@@ -172,7 +182,7 @@ export function App() {
       </div>
 
       {/* 配置面板 */}
-      {showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
+      {showConfig && <ConfigPanel onClose={() => setShowConfig(false)} responsive />}
 
       {/* 移动端底部文件按钮 */}
       <button
diff --git a/packages/web/src/api/client.ts b/packages/web/src/api/client.ts
deleted file mode 100644
index 0a5278e..0000000
--- a/packages/web/src/api/client.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * 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);
-}
diff --git a/packages/web/src/hooks/useChat.ts b/packages/web/src/hooks/useChat.ts
deleted file mode 100644
index 976fd48..0000000
--- a/packages/web/src/hooks/useChat.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-/**
- * 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;
-  onSessionNotFound?: () => void;
-}
-
-interface ChatState {
-  messages: Message[];
-  isConnected: boolean;
-  isLoading: boolean;
-  streamingContent: string;
-}
-
-export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOptions) {
-  const [state, setState] = useState<ChatState>({
-    messages: [],
-    isConnected: false,
-    isLoading: false,
-    streamingContent: '',
-  });
-
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
-  const reconnectAttemptsRef = useRef(0);
-  const maxReconnectAttempts = 5;
-  // 标记是否正在主动关闭连接（切换 session 时）
-  const isClosingRef = useRef(false);
-
-  // 用 ref 存储回调，避免依赖变化导致无限循环
-  const onErrorRef = useRef(onError);
-  const onSessionNotFoundRef = useRef(onSessionNotFound);
-  onErrorRef.current = onError;
-  onSessionNotFoundRef.current = onSessionNotFound;
-
-  // 加载历史消息
-  const loadMessages = useCallback(async () => {
-    try {
-      const { data } = await getMessages(sessionId);
-      setState((prev) => ({ ...prev, messages: data }));
-    } catch (error) {
-      // 会话不存在（404 或 "Session not found"），通知上层重新创建
-      const msg = error instanceof Error ? error.message : '';
-      if (msg.includes('404') || msg.toLowerCase().includes('not found')) {
-        onSessionNotFoundRef.current?.();
-        return;
-      }
-      onErrorRef.current?.(error instanceof Error ? error : new Error('Failed to load messages'));
-    }
-  }, [sessionId]);
-
-  // 连接 WebSocket
-  const connect = useCallback(() => {
-    // 如果正在关闭，不要连接
-    if (isClosingRef.current) return;
-    // 如果已经连接，不要重复连接
-    if (wsRef.current?.readyState === WebSocket.OPEN) return;
-    // 如果正在连接中，不要重复连接
-    if (wsRef.current?.readyState === WebSocket.CONNECTING) return;
-
-    const ws = createWebSocket(sessionId);
-
-    ws.onopen = () => {
-      reconnectAttemptsRef.current = 0; // 连接成功，重置重连次数
-      setState((prev) => ({ ...prev, isConnected: true }));
-    };
-
-    ws.onclose = () => {
-      setState((prev) => ({ ...prev, isConnected: false }));
-      // 主动关闭时不重连
-      if (isClosingRef.current) {
-        isClosingRef.current = false;
-        return;
-      }
-      // 限制重连次数
-      if (reconnectAttemptsRef.current < maxReconnectAttempts) {
-        reconnectAttemptsRef.current++;
-        reconnectTimeoutRef.current = setTimeout(connect, 3000);
-      }
-    };
-
-    ws.onerror = () => {
-      // 主动关闭时不报错
-      if (isClosingRef.current) return;
-      onErrorRef.current?.(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':
-            onErrorRef.current?.(new Error(message.payload?.message || 'Unknown error'));
-            setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
-            break;
-        }
-      } catch {
-        // 忽略解析错误
-      }
-    };
-
-    wsRef.current = ws;
-  }, [sessionId]);
-
-  // 发送消息
-  const sendMessage = useCallback(
-    (content: string) => {
-      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
-        onErrorRef.current?.(new Error('WebSocket not connected'));
-        return;
-      }
-
-      setState((prev) => ({ ...prev, isLoading: true }));
-
-      wsRef.current.send(
-        JSON.stringify({
-          type: 'message',
-          sessionId,
-          payload: { content },
-        })
-      );
-    },
-    [sessionId]
-  );
-
-  // 取消处理
-  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(() => {
-    // 重置状态
-    isClosingRef.current = false;
-    setState({
-      messages: [],
-      isConnected: false,
-      isLoading: false,
-      streamingContent: '',
-    });
-    reconnectAttemptsRef.current = 0;
-
-    loadMessages();
-    connect();
-
-    return () => {
-      clearTimeout(reconnectTimeoutRef.current);
-      // 标记为主动关闭，避免触发错误回调和重连
-      isClosingRef.current = true;
-      // 只关闭已建立的连接
-      if (wsRef.current) {
-        const ws = wsRef.current;
-        // 清除引用，防止后续操作
-        wsRef.current = null;
-        // 只有在 OPEN 或 CONNECTING 状态才关闭
-        if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
-          ws.close();
-        }
-      }
-    };
-  }, [loadMessages, connect]);
-
-  return {
-    ...state,
-    sendMessage,
-    cancelProcessing,
-    reload: loadMessages,
-  };
-}
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index f8136ef..6ac466e 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App';
 import './styles/index.css';
+import '@ai-assistant/ui/styles';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/packages/web/src/pages/Chat.tsx b/packages/web/src/pages/Chat.tsx
index b13524c..b08bb33 100644
--- a/packages/web/src/pages/Chat.tsx
+++ b/packages/web/src/pages/Chat.tsx
@@ -4,16 +4,21 @@
 
 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';
+import {
+  useChat,
+  ChatMessage,
+  StreamingMessage,
+  TypingIndicator,
+  ChatInput,
+} from '@ai-assistant/ui';
 
 interface ChatPageProps {
   sessionId: string;
   onSessionNotFound?: () => void;
+  responsive?: boolean;
 }
 
-export function ChatPage({ sessionId, onSessionNotFound }: ChatPageProps) {
+export function ChatPage({ sessionId, onSessionNotFound, responsive = false }: ChatPageProps) {
   const {
     messages,
     isConnected,
@@ -86,6 +91,7 @@ export function ChatPage({ sessionId, onSessionNotFound }: ChatPageProps) {
         onCancel={cancelProcessing}
         isLoading={isLoading}
         disabled={!isConnected}
+        responsive={responsive}
       />
     </div>
   );
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 2f662f8..fe6125d 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    '../ui/src/**/*.{js,ts,jsx,tsx}',
+  ],
   darkMode: 'class',
   theme: {
     extend: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0ff7f35..30c9324 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -114,16 +114,19 @@ importers:
         version: 10.0.0
       '@vitest/coverage-v8':
         specifier: ^4.0.15
-        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2))
+        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))
       typescript:
         specifier: ^5.6.0
         version: 5.9.3
       vitest:
         specifier: ^4.0.15
-        version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
+        version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
 
   packages/desktop:
     dependencies:
+      '@ai-assistant/ui':
+        specifier: workspace:*
+        version: link:../ui
       '@tauri-apps/api':
         specifier: ^2.1.1
         version: 2.9.1
@@ -166,7 +169,7 @@ importers:
         version: 18.3.7(@types/react@18.3.27)
       '@vitejs/plugin-react':
         specifier: ^4.2.1
-        version: 4.7.0(vite@5.4.21(@types/node@22.19.2))
+        version: 4.7.0(vite@5.4.21(@types/node@22.19.2)(terser@5.44.1))
       autoprefixer:
         specifier: ^10.4.18
         version: 10.4.22(postcss@8.5.6)
@@ -212,10 +215,38 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^4.0.15
-        version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
+        version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
+
+  packages/ui:
+    dependencies:
+      clsx:
+        specifier: ^2.1.0
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.344.0
+        version: 0.344.0(react@18.3.1)
+      react:
+        specifier: ^18.0.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.0.0
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.0
+        version: 18.3.27
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.7(@types/react@18.3.27)
+      typescript:
+        specifier: ^5.3.3
+        version: 5.9.3
 
   packages/web:
     dependencies:
+      '@ai-assistant/ui':
+        specifier: workspace:*
+        version: link:../ui
       clsx:
         specifier: ^2.1.0
         version: 2.1.1
@@ -243,7 +274,7 @@ importers:
         version: 18.3.7(@types/react@18.3.27)
       '@vitejs/plugin-react':
         specifier: ^4.2.1
-        version: 4.7.0(vite@5.4.21(@types/node@22.19.2))
+        version: 4.7.0(vite@5.4.21(@types/node@22.19.2)(terser@5.44.1))
       autoprefixer:
         specifier: ^10.4.18
         version: 10.4.22(postcss@8.5.6)
@@ -4520,7 +4551,7 @@ snapshots:
 
   '@vercel/oidc@3.0.5': {}
 
-  '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@22.19.2))':
+  '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@22.19.2)(terser@5.44.1))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -4532,7 +4563,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2))':
+  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.15
@@ -4545,7 +4576,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
+      vitest: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -4558,13 +4589,13 @@ snapshots:
       chai: 6.2.1
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@4.0.15(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2))':
+  '@vitest/mocker@4.0.15(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 4.0.15
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
+      vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
 
   '@vitest/pretty-format@4.0.15':
     dependencies:
@@ -6254,7 +6285,7 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.44.1
 
-  vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2):
+  vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -6266,12 +6297,13 @@ snapshots:
       '@types/node': 22.19.2
       fsevents: 2.3.3
       jiti: 1.21.7
+      terser: 5.44.1
       yaml: 2.8.2
 
-  vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2):
+  vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
       '@vitest/expect': 4.0.15
-      '@vitest/mocker': 4.0.15(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2))
+      '@vitest/mocker': 4.0.15(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))
       '@vitest/pretty-format': 4.0.15
       '@vitest/runner': 4.0.15
       '@vitest/snapshot': 4.0.15
@@ -6288,7 +6320,7 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
+      vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.0