feat(ui): 创建共享 UI 组件包

将 web 和 desktop 的重复代码抽取到 @ai-assistant/ui 包:

- 添加可配置的 API 客户端 (configureApiClient)
- 迁移共享组件: ChatMessage, ChatInput, Sidebar, FileBrowser, ConfigPanel
- 迁移共享 hook: useChat
- 添加 responsive prop 支持响应式布局
- 更新 web/desktop 依赖并删除重复代码

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"
+  }
+}

packages/ui/src/api/client.ts

@@ -0,0 +1,165 @@
+/**
+ * Configurable API Client
+ */
+
+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;
+}
+
+let apiConfig: ApiConfig = {
+  baseUrl: '/api',
+  wsBaseUrl: () => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return `${protocol}//${window.location.host}/api`;
+  },
+  healthUrl: () => '/health',
+};
+
+/**
+ * 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',
+  };
+}
+
+async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
+  const response = await fetch(`${apiConfig.baseUrl}${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> {
+  const healthUrl = apiConfig.healthUrl();
+  const response = await fetch(healthUrl);
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`);
+  }
+  return response.json();
+}
+
+// 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 wsBase = apiConfig.wsBaseUrl();
+  return new WebSocket(`${wsBase}/ws/${sessionId}`);
+}
+
+// Files
+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 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);
+}

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[];
+}

packages/ui/src/components/ChatInput.tsx

@@ -0,0 +1,118 @@
+/**
+ * Chat Input Component
+ *
+ * 支持响应式：responsive=true 时适配移动端键盘和触摸操作
+ */
+
+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;
+  /** 是否启用响应式布局（移动端适配） */
+  responsive?: boolean;
+}
+
+export function ChatInput({
+  onSend,
+  onCancel,
+  isLoading,
+  disabled,
+  responsive = false,
+}: ChatInputProps) {
+  const [input, setInput] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // 自动调整高度
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      // 响应式模式下移动端最大高度稍小
+      const maxHeight = responsive && window.innerWidth < 768 ? 120 : 200;
+      textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+    }
+  }, [input, responsive]);
+
+  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) => {
+    // Enter 发送，Shift+Enter 换行
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <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
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            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',
+              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'
+            )}
+          />
+        </div>
+        <button
+          onClick={isLoading ? onCancel : handleSubmit}
+          disabled={!isLoading && (!input.trim() || disabled)}
+          className={clsx(
+            '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',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+          )}
+        >
+          {isLoading ? <Square size={20} /> : <Send size={20} />}
+        </button>
+      </div>
+      {/* 响应式模式下桌面端显示提示文字 */}
+      {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>
+  );
+}

packages/ui/src/components/ChatMessage.tsx

@@ -0,0 +1,80 @@
+/**
+ * Chat Message Component
+ */
+
+import { User, Bot } from 'lucide-react';
+import clsx from 'clsx';
+import type { Message } from '../api/client.js';
+
+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>
+  );
+}

packages/ui/src/components/ConfigPanel.tsx

@@ -0,0 +1,327 @@
+/**
+ * ConfigPanel Component
+ *
+ * 支持响应式：responsive=true 时移动端全屏显示，桌面端居中弹窗
+ */
+
+import { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { getConfig, updateConfig, type ServerConfig } from '../api/client.js';
+
+interface ConfigPanelProps {
+  onClose: () => void;
+  /** 是否启用响应式布局（移动端全屏面板） */
+  responsive?: boolean;
+}
+
+// 可用的模型列表
+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, responsive = false }: 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={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={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={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"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <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">
+              {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={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}>
+                  {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.toLocaleString()}
+            </label>
+            <input
+              type="range"
+              min="1024"
+              max="32768"
+              step="1024"
+              value={formData.maxTokens}
+              onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })}
+              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>
+              <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={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>{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>
+          </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={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>
+          </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={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={clsx('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
+                    {config.allowedPaths.length || 'All'}
+                  </span>
+                </div>
+                <div className={responsive ? 'flex justify-between md:block' : ''}>
+                  <span className="text-gray-500">Denied Paths:</span>
+                  <span className={clsx('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
+                    {config.deniedPaths.length || 'None'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 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={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={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={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>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/FileBrowser.tsx

@@ -0,0 +1,236 @@
+/**
+ * FileBrowser Component
+ *
+ * 文件浏览器组件
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { listFiles, readFile, type FileInfo } from '../api/client.js';
+
+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>
+  );
+}

packages/ui/src/components/Sidebar.tsx

@@ -0,0 +1,244 @@
+/**
+ * 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.js';
+
+interface SidebarProps {
+  currentSessionId: string | null;
+  onSelectSession: (id: string) => void;
+  onCreateSession: (session: Session) => void;
+  /** 是否启用响应式布局（移动端抽屉式菜单） */
+  responsive?: boolean;
+}
+
+export function Sidebar({
+  currentSessionId,
+  onSelectSession,
+  onCreateSession,
+  responsive = false,
+}: SidebarProps) {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = 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);
+      if (responsive) setIsOpen(false); // 响应式模式下创建后关闭侧边栏
+    } 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);
+    }
+  };
+
+  const handleSelectSession = (id: string) => {
+    onSelectSession(id);
+    if (responsive) setIsOpen(false); // 响应式模式下选择后关闭侧边栏
+  };
+
+  useEffect(() => {
+    loadSessions();
+  }, []);
+
+  // 点击遮罩层关闭
+  const handleOverlayClick = () => {
+    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 (
+    <>
+      {/* 移动端菜单按钮 */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className="fixed top-3 left-3 z-40 p-2 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 transition-colors md:hidden"
+        aria-label="Open menu"
+      >
+        <Menu size={20} />
+      </button>
+
+      {/* 遮罩层 - 仅移动端 */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={handleOverlayClick}
+        />
+      )}
+
+      {/* 侧边栏 */}
+      <div
+        className={clsx(
+          'fixed md:static inset-y-0 left-0 z-50',
+          'w-64 bg-gray-800 border-r border-gray-700 flex flex-col',
+          'transform transition-transform duration-300 ease-in-out',
+          'md:transform-none',
+          isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
+        )}
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-gray-700">
+          <div className="flex items-center justify-between mb-3 md:hidden">
+            <span className="text-lg font-semibold">Sessions</span>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="p-1 hover:bg-gray-700 rounded transition-colors"
+              aria-label="Close menu"
+            >
+              <X size={20} />
+            </button>
+          </div>
+          <button
+            onClick={handleCreate}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors"
+          >
+            <Plus size={18} />
+            <span>New Chat</span>
+          </button>
+        </div>
+
+        {/* Session List */}
+        <div className="flex-1 overflow-y-auto">
+          {isLoading ? (
+            <div className="p-4 text-center text-gray-500">
+              <RefreshCw className="animate-spin inline-block" size={20} />
+            </div>
+          ) : sessions.length === 0 ? (
+            <div className="p-4 text-center text-gray-500">No conversations yet</div>
+          ) : (
+            <div className="p-2 space-y-1">
+              {sessions.map((session) => (
+                <div
+                  key={session.id}
+                  onClick={() => handleSelectSession(session.id)}
+                  className={clsx(
+                    'flex items-center gap-2 p-3 rounded-lg cursor-pointer group',
+                    'hover:bg-gray-700 transition-colors',
+                    'active:bg-gray-600', // 触摸反馈
+                    currentSessionId === session.id && 'bg-gray-700'
+                  )}
+                >
+                  <MessageSquare size={18} className="text-gray-400 flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm truncate">
+                      {session.name || `Chat ${session.id.slice(0, 8)}`}
+                    </div>
+                    <div className="text-xs text-gray-500">{session.messageCount} messages</div>
+                  </div>
+                  <button
+                    onClick={(e) => handleDelete(session.id, e)}
+                    className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-all md:opacity-0"
+                    aria-label="Delete session"
+                  >
+                    <Trash2 size={14} className="text-gray-400" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
+          AI Assistant v1.0
+        </div>
+      </div>
+    </>
+  );
+}

packages/ui/src/hooks/useChat.ts

@@ -0,0 +1,219 @@
+/**
+ * Chat Hook
+ *
+ * 管理 WebSocket 连接和消息状态
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createWebSocket, getMessages, type Message } from '../api/client.js';
+
+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,
+  };
+}

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';

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;
+}

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"]
+}