illusion-code 0.2.3__tar.gz → 0.2.4__tar.gz

{illusion_code-0.2.3 → illusion_code-0.2.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: illusion-code
-Version: 0.2.3
+Version: 0.2.4
 Summary: Open-source Python port of Claude Code - an AI-powered CLI coding assistant
 Project-URL: Homepage, https://github.com/YunTaiHua/illusion-code
 Project-URL: Repository, https://github.com/YunTaiHua/illusion-code

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/terminal/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@illusion/terminal",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@illusion/terminal",
-      "version": "0.2.3",
+      "version": "0.2.4",
       "dependencies": {
         "chalk": "^5.6.2",
         "ink": "^5.1.0",

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/terminal/package.json

@@ -24,5 +24,5 @@
     "tsx": "^4.19.2",
     "typescript": "^5.7.3"
   },
-  "version": "0.2.3"
+  "version": "0.2.4"
 }

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/terminal/src/version.ts

@@ -6,4 +6,4 @@
  */
 
 /** 当前版本号 */
-export const VERSION = '0.2.3';
+export const VERSION = '0.2.4';

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@illusion/web",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@illusion/web",
-      "version": "0.2.3",
+      "version": "0.2.4",
       "dependencies": {
         "highlight.js": "^11.11.0",
         "react": "^18.3.1",

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@illusion/web",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "type": "module",
   "scripts": {

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/web/src/App.tsx

@@ -28,6 +28,9 @@ const WS_URL = `ws://${window.location.host}/ws`;
 /** Toast 通知显示时长（毫秒） */
 const TOAST_DURATION = 5000;
 
+/** B 通道允许的指令集合（前端识别并走 web_query） */
+const B_COMMANDS = ['rewind', 'compact', 'context', 'export', 'init', 'fast', 'passes', 'turns', 'output-style', 'language'];
+
 /**
  * 应用主组件
  *
@@ -86,6 +89,24 @@ export default function App() {
     return () => { session.setOnSelectRequest(null); session.setOnCommandResult(null); };
   }, [session.setOnSelectRequest, session.setOnCommandResult, showToast]);
 
+  // 事件驱动删除：新建会话完成后（restoringSessionId 从非 null 变为 null），
+  // 如果有待删除的会话 ID，立即发送删除请求
+  const prevRestoringRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (prevRestoringRef.current !== null && session.restoringSessionId === null) {
+      if (pendingDeleteIdsRef.current) {
+        const ids = pendingDeleteIdsRef.current;
+        pendingDeleteIdsRef.current = null;
+        if (ids.length === 1 && ids[0] === '__all__') {
+          session.sendRequest({ type: 'web_delete_sessions', delete_all: true });
+        } else {
+          session.sendRequest({ type: 'web_delete_sessions', session_ids: ids });
+        }
+      }
+    }
+    prevRestoringRef.current = session.restoringSessionId;
+  }, [session.restoringSessionId, session.sendRequest]);
+
   /**
    * 处理面板大小调整开始
    *
@@ -114,13 +135,16 @@ export default function App() {
   }, [sidebarWidth, rightPanelWidth]);
 
   /**
-   * 处理用户提交的命令
+   * 处理用户提交的命令（三通道有序判定）
+   *
+   * 通道隔离原则：
+   * - B 通道（web_query）：输入框识别的精细化指令（rewind/compact/context/export/init/
+   *   fast/passes/turns/output-style/language），走 web_query 结构化处理。
+   * - 文本通道（submit_line）：普通文本，或未被识别的斜杠指令（A 类如 /resume /model
+   *   以及已删除指令），全部当普通文本发给 LLM。
    *
-   * 根据命令类型进行不同处理：
-   * - /language: 前端本地构建语言选择选项
-   * - /resume: 发送 list_sessions 请求
-   * - /context, /rewind, /model, /delete: 通过 select_command 获取内联选项
-   * - 其他命令: 直接提交到后端
+   * A 类指令（new/resume/delete/model/effort/permissions/plan）已完全交由 UI 控件承载，
+   * 输入框不识别，落入文本通道。
    *
    * @param line - 用户输入的命令
    */
@@ -128,38 +152,54 @@ export default function App() {
     if (!line.trim()) return;
     const trimmed = line.trim();
 
-    // /language → 前端本地构建选项
-    if (trimmed === '/language' || trimmed === '/language show') {
-      const current = normalizeLanguage(session.status?.ui_language);
-      setInlineOptions({
-        command: 'language',
-        title: t(lang, 'language'),
-        options: [
-          { value: 'set zh-CN', label: '简体中文', description: '中文界面', active: current === 'zh-CN' },
-          { value: 'set en', label: 'English', description: 'English UI', active: current === 'en' },
-        ],
-      });
-      return;
-    }
-
-    // /resume → 发送 list_sessions（和 terminal 端一致）
-    if (trimmed === '/resume') {
-      session.sendRequest({ type: 'list_sessions' });
-      return;
-    }
+    // 通道 1：B 类斜杠指令 → web_query（精细化处理，不经过命令注册表）
+    if (trimmed.startsWith('/')) {
+      const cmdName = trimmed.slice(1).split(/\s+/)[0] ?? '';
+      const args = trimmed.slice(1 + cmdName.length).trim();
+
+      // /language（无参数）→ 弹出语言选择框，不走 web_query
+      if (cmdName === 'language' && !args) {
+        const current = String(session.status?.ui_language ?? 'zh-CN');
+        setInlineOptions({
+          command: 'language',
+          title: t(lang, 'language'),
+          options: [
+            { value: 'set zh-CN', label: '简体中文', description: '中文界面', active: current === 'zh-CN' },
+            { value: 'set en', label: 'English', description: 'English UI', active: current === 'en' },
+          ],
+        });
+        return;
+      }
+      // /fast（无参数）→ 弹出开关选择框，不走 web_query
+      if (cmdName === 'fast' && !args) {
+        const currentFast = Boolean(session.status?.fast_mode);
+        setInlineOptions({
+          command: 'fast',
+          title: t(lang, 'fast'),
+          options: [
+            { value: 'on', label: t(lang, 'fast_on'), description: t(lang, 'fast_on_desc'), active: currentFast },
+            { value: 'off', label: t(lang, 'fast_off'), description: t(lang, 'fast_off_desc'), active: !currentFast },
+          ],
+        });
+        return;
+      }
 
-    // 通过 select_command 获取内联选项的命令
-    const selectCommands = ['context', 'rewind', 'model', 'delete', 'rules', 'skills'];
-    const cmdName = trimmed.startsWith('/') ? (trimmed.slice(1).split(/\s+/)[0] ?? '') : '';
-    if (cmdName && selectCommands.includes(cmdName)) {
-      session.setBusyTrue();
-      session.requestSelectCommand(cmdName);
-      return;
+      if (B_COMMANDS.includes(cmdName)) {
+        session.setBusyTrue();
+        session.sendRequest({
+          type: 'web_query',
+          command: cmdName,
+          args,
+          request_id: `q-${Date.now()}`,
+        });
+        return;
+      }
     }
 
-    // 其他所有命令（含 /effort）→ 直接提交，结果走 toast
+    // 通道 2：所有其他输入（含 /resume、/model 等非 B 类指令）→ 当 user 消息发给 LLM
+    // treat_as_text=true 告诉后端跳过命令注册表，直接当文本提交给 LLM
     session.setBusyTrue();
-    session.sendRequest({ type: 'submit_line', line: trimmed });
+    session.sendRequest({ type: 'submit_line', line: trimmed, treat_as_text: true });
   };
 
   /**
@@ -172,7 +212,18 @@ export default function App() {
    */
   const handleInlineSelect = useCallback((command: string, value: string) => {
     setInlineOptions(null);
-    session.sendRequest({ type: 'apply_select_command', command, value });
+    // language 和 fast 走 web_query 通道（前端弹出选择框后提交）
+    if (command === 'language' || command === 'fast') {
+      session.sendRequest({
+        type: 'web_query',
+        command,
+        args: value,
+        request_id: `q-${Date.now()}`,
+      });
+    } else {
+      // rewind/context 等多步指令仍走 apply_select_command
+      session.sendRequest({ type: 'apply_select_command', command, value });
+    }
   }, [session.sendRequest]);
 
   /**
@@ -182,54 +233,64 @@ export default function App() {
    */
   const handleInlineClose = useCallback(() => setInlineOptions(null), []);
 
-  // 删除会话弹窗状态
+  // 删除会话弹窗状态（本地控制，数据源来自 session.sessions 主列表）
   const [deleteSelected, setDeleteSelected] = useState<Set<string>>(new Set());
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  // 待删除的会话 ID（事件驱动：先新建会话，等 web_restore_completed 后再删除）
+  const pendingDeleteIdsRef = useRef<string[] | null>(null);
 
   /** 处理停止当前任务 */
   const handleStop = () => { session.sendRequest({ type: 'stop' }); };
 
   /** 处理新建会话 */
   const handleNewSession = () => {
-    session.sendRequest({ type: 'submit_line', line: '/new' });
+    session.sendRequest({ type: 'web_new_session' });
   };
 
   /**
-   * 处理选择会话
+   * 处理选择会话（A 通道，零 suppress）
+   *
+   * 点击会话项 → 发送 web_restore_session，前端立即进入 restoring 态显示加载动画，
+   * 收到 web_restore_completed 后清除动画并替换转录。不再有 /resume 弹框副作用。
    *
    * @param id - 会话 ID
    */
   const handleSelectSession = useCallback((id: string) => {
-    session.suppressInlineOptions();
-    session.suppressCommandResult(1); // 抑制 apply_select_command 的命令结果
-    session.suppressTranscript(); // 抑制转录事件，直到收到 replace_transcript
-    session.sendRequest({ type: 'apply_select_command', command: 'resume', value: id });
-  }, [session.suppressInlineOptions, session.suppressCommandResult, session.suppressTranscript, session.sendRequest]);
+    session.setRestoringSessionId(id);
+    session.sendRequest({ type: 'web_restore_session', session_id: id });
+  }, [session.setRestoringSessionId, session.sendRequest]);
 
-  /** 处理列出会话 */
+  /** 处理列出会话（A 通道，后端推送 web_sessions） */
   const handleListSessions = useCallback(() => {
-    session.suppressInlineOptions();
-    session.suppressCommandResult();
-    session.sendRequest({ type: 'list_sessions' });
-  }, [session.suppressInlineOptions, session.suppressCommandResult, session.sendRequest]);
+    session.sendRequest({ type: 'web_request_sessions' });
+  }, [session.sendRequest]);
 
-  /** 处理删除会话 */
+  /** 处理删除会话：打开删除弹窗（数据源来自 session.sessions 主列表） */
   const handleDeleteSessions = useCallback(() => {
-    session.suppressInlineOptions();
-    session.suppressCommandResult();
-    session.requestSelectCommand('delete');
-  }, [session.suppressInlineOptions, session.suppressCommandResult, session.requestSelectCommand]);
+    setDeleteSelected(new Set());
+    setDeleteModalOpen(true);
+  }, []);
   /**
    * 处理确认删除
    *
    * 删除所有选中的会话。
    */
   const handleConfirmDelete = useCallback(() => {
-    session.suppressCommandResult();
-    for (const id of deleteSelected) session.sendRequest({ type: 'apply_select_command', command: 'delete', value: id });
-    session.clearDeleteSessions();
+    const ids = Array.from(deleteSelected);
+    if (ids.length > 0) {
+      const currentSessionId = String(session.status?.session_id ?? '');
+      const deletingCurrent = ids.includes(currentSessionId);
+      if (deletingCurrent) {
+        // 事件驱动：先新建会话，等 web_restore_completed 到达后再删除
+        pendingDeleteIdsRef.current = ids;
+        session.sendRequest({ type: 'web_new_session' });
+      } else {
+        session.sendRequest({ type: 'web_delete_sessions', session_ids: ids });
+      }
+    }
+    setDeleteModalOpen(false);
     setDeleteSelected(new Set());
-    setTimeout(() => { session.suppressInlineOptions(); session.suppressCommandResult(); session.sendRequest({ type: 'list_sessions' }); }, 500);
-  }, [deleteSelected, session.sendRequest, session.clearDeleteSessions, session.suppressInlineOptions, session.suppressCommandResult]);
+  }, [deleteSelected, session.sendRequest, session.status]);
 
   /**
    * 处理关闭删除模态框
@@ -237,9 +298,9 @@ export default function App() {
    * 关闭删除会话弹窗并清除选中状态。
    */
   const handleCloseDeleteModal = useCallback(() => {
-    session.clearDeleteSessions();
+    setDeleteModalOpen(false);
     setDeleteSelected(new Set());
-  }, [session.clearDeleteSessions]);
+  }, []);
 
   /**
    * 切换删除项选中状态
@@ -250,12 +311,12 @@ export default function App() {
     setDeleteSelected((prev) => { const n = new Set(prev); n.has(v) ? n.delete(v) : n.add(v); return n; });
   }, []);
 
-  /** 是否显示删除模态框 */
-  const showDeleteModal = session.deleteSessions.length > 0;
-  /** 普通会话列表（排除 __all__ 选项） */
-  const regularSessions = session.deleteSessions.filter((s) => s.value !== '__all__');
-  /** 是否有全部删除选项 */
-  const hasAllOption = session.deleteSessions.some((s) => s.value === '__all__');
+  /** 是否显示删除模态框（本地控制，不再依赖 select_request:delete 填充） */
+  const showDeleteModal = deleteModalOpen;
+  /** 待删除的普通会话列表（来自主会话列表 session.sessions） */
+  const regularSessions = session.sessions;
+  /** 总是提供"删除全部"入口 */
+  const hasAllOption = session.sessions.length > 0;
 
   /**
    * 处理权限响应
@@ -288,7 +349,7 @@ export default function App() {
         onListSessions={handleListSessions}
         onDeleteSessions={handleDeleteSessions}
         collapsed={sidebarCollapsed} onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
-        width={sidebarWidth} />
+        width={sidebarWidth} restoringSessionId={session.restoringSessionId} />
       {!sidebarCollapsed && (
         <div className="w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors shrink-0"
           onMouseDown={(e) => handleResizeStart('left', e)} />
@@ -301,16 +362,18 @@ export default function App() {
           streamingReasoning={session.streamingReasoning} pendingToolCalls={session.pendingToolCalls}
           busy={session.busy} connected={session.connected}
           modal={session.modal} onPermissionResponse={handlePermissionResponse}
-          onQuestionResponse={handleQuestionResponse} />
+          onQuestionResponse={handleQuestionResponse} restoringSessionId={session.restoringSessionId} />
         <PromptInput lang={lang} busy={session.busy} connected={session.connected}
           commands={session.commands} onSubmit={handleSubmit} onStop={handleStop}
           inlineOptions={inlineOptions} onInlineSelect={handleInlineSelect} onInlineClose={handleInlineClose} />
         <Toolbar lang={lang} status={session.status}
-          effortOptions={session.effortOptions} modelOptions={session.modelOptions}
-          onModeChange={(v) => session.sendRequest({ type: 'submit_line', line: `/permissions set ${v}` })}
-          onModelChange={session.setModelValue}
-          onEffortChange={session.setEffortValue}
-          onRequestModelList={() => session.requestSelectCommand('model')} />
+          modelOptions={session.modelOptions}
+          onSetSetting={(key, value) => {
+            if (key === 'model') session.setModelSwitching(true);
+            session.sendRequest({ type: 'web_set_setting', setting_key: key, setting_value: value });
+          }}
+          onRequestModels={() => session.sendRequest({ type: 'web_request_models' })}
+          modelSwitching={session.modelSwitching} />
       </div>
       {!rightPanelCollapsed && (
         <div className="w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors shrink-0"
@@ -344,9 +407,10 @@ export default function App() {
             <div className="px-6 py-4 border-t border-border-light flex items-center justify-between">
               <div>{hasAllOption && (
                 <button onClick={() => {
-                  session.sendRequest({ type: 'apply_select_command', command: 'delete', value: '__all__' });
-                  session.clearDeleteSessions(); setDeleteSelected(new Set());
-                  setTimeout(() => { session.suppressInlineOptions(); session.sendRequest({ type: 'list_sessions' }); }, 500);
+                  // 事件驱动：先新建会话，等 web_restore_completed 到达后再删除全部
+                  pendingDeleteIdsRef.current = ['__all__'];
+                  session.sendRequest({ type: 'web_new_session' });
+                  setDeleteModalOpen(false); setDeleteSelected(new Set());
                 }} className="px-4 py-2 text-sm text-danger hover:bg-red-50 rounded-lg transition-colors cursor-pointer">{t(lang, 'delete_all')}</button>
               )}</div>
               <div className="flex gap-2">

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/web/src/components/ChatArea.tsx

@@ -58,6 +58,8 @@ interface ChatAreaProps {
   onPermissionResponse: (requestId: string, allowed: boolean, alwaysAllow: boolean, toolName: string) => void;
   /** 问答响应回调 */
   onQuestionResponse: (requestId: string, answer: string) => void;
+  /** 正在恢复的会话 ID（可选，非空时显示居中加载卡片覆盖转录区） */
+  restoringSessionId?: string | null;
 }
 
 /**
@@ -70,7 +72,7 @@ interface ChatAreaProps {
  */
 export default function ChatArea({
   lang, staticItems, assistantBuffer, streamingReasoning, pendingToolCalls, busy, connected,
-  modal, onPermissionResponse, onQuestionResponse,
+  modal, onPermissionResponse, onQuestionResponse, restoringSessionId,
 }: ChatAreaProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
 
@@ -78,9 +80,8 @@ export default function ChatArea({
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [staticItems, assistantBuffer, streamingReasoning, pendingToolCalls, modal]);
 
-  const hasContent = staticItems.length > 0 || assistantBuffer || streamingReasoning || pendingToolCalls.length > 0 || !!modal;
-
   // 按用户消息分组为轮次(turn)，每轮以用户消息开头
+  // 注意：hooks 必须在任何条件返回之前调用（React Rules of Hooks）
   const turns = useMemo(() => {
     const result: TranscriptItem[][] = [];
     for (const item of staticItems) {
@@ -96,6 +97,24 @@ export default function ChatArea({
   // tool_use_id → tool_input 映射，用于 tool_result 摘要显示
   const toolInputMap = useMemo(() => buildToolInputMap(staticItems), [staticItems]);
 
+  const hasContent = staticItems.length > 0 || assistantBuffer || streamingReasoning || pendingToolCalls.length > 0 || !!modal;
+
+  // 会话恢复中：显示居中加载卡片，覆盖正常转录区
+  // 此条件返回在所有 hooks 之后，不违反 React Rules of Hooks
+  if (restoringSessionId) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-surface-main">
+        <div className="flex flex-col items-center gap-3">
+          <svg className="animate-spin w-8 h-8 text-primary" viewBox="0 0 24 24" fill="none">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          <span className="text-sm text-content-secondary">{t(lang, 'restoring_session')}</span>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex-1 overflow-y-auto bg-surface-main">
       {!connected && !hasContent && (
@@ -153,7 +172,7 @@ function ThinkingIndicator({ lang }: { lang: UiLanguage }) {
         <span className="w-1.5 h-1.5 rounded-full bg-primary animate-bounce" style={{ animationDelay: '300ms' }} />
       </span>
       <span className="text-xs text-content-secondary animate-pulse">
-        {lang === 'zh-CN' ? '正在思考...' : 'Thinking...'}
+        {t(lang, 'thinking')}
       </span>
     </div>
   );

illusion_code-0.2.4/frontend/web/src/components/ErrorBoundary.tsx

@@ -0,0 +1,103 @@
+/**
+ * @fileoverview React 错误边界组件
+ *
+ * 捕获子组件树中的渲染错误，防止整个应用白屏崩溃。
+ * 显示友好的错误提示和重新加载按钮。
+ * 使用 navigator.language 做最佳努力的语言检测（class 组件无法用 hooks）。
+ *
+ * @module ErrorBoundary
+ */
+
+import { Component, type ReactNode } from 'react';
+import { normalizeLanguage } from '../i18n';
+
+/** ErrorBoundary 专用的轻量 i18n（class 组件无法用 hooks，基于浏览器语言检测） */
+const EB_TEXT: Record<string, { title: string; detail: string; retry: string; reload: string }> = {
+  'zh-CN': { title: '页面渲染出错', detail: '发生了未知错误', retry: '重试', reload: '重新加载页面' },
+  'en': { title: 'Rendering Error', detail: 'An unknown error occurred', retry: 'Retry', reload: 'Reload Page' },
+};
+
+function ebText(): { title: string; detail: string; retry: string; reload: string } {
+  const lang = normalizeLanguage(navigator.language);
+  return EB_TEXT[lang] ?? EB_TEXT['en']!;
+}
+
+/**
+ * ErrorBoundary 组件属性接口
+ */
+interface ErrorBoundaryProps {
+  /** 子组件 */
+  children: ReactNode;
+}
+
+/**
+ * ErrorBoundary 组件状态接口
+ */
+interface ErrorBoundaryState {
+  /** 是否有错误 */
+  hasError: boolean;
+  /** 错误信息 */
+  error: Error | null;
+}
+
+/**
+ * 错误边界组件
+ *
+ * 捕获子组件树中的渲染错误，显示友好的错误提示，
+ * 防止整个应用白屏崩溃。
+ */
+export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error('[ErrorBoundary]', error, errorInfo);
+  }
+
+  handleReload = (): void => {
+    window.location.reload();
+  };
+
+  handleReset = (): void => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      const t = ebText();
+      return (
+        <div className="flex items-center justify-center h-screen bg-surface-main">
+          <div className="text-center max-w-md px-6">
+            <div className="text-4xl mb-4">⚠️</div>
+            <h2 className="text-lg font-semibold text-content-primary mb-2">{t.title}</h2>
+            <p className="text-sm text-content-secondary mb-4">
+              {this.state.error?.message || t.detail}
+            </p>
+            <div className="flex gap-3 justify-center">
+              <button
+                onClick={this.handleReset}
+                className="px-4 py-2 text-sm text-content-secondary hover:bg-surface-hover rounded-lg transition-colors cursor-pointer border border-border-light"
+              >
+                {t.retry}
+              </button>
+              <button
+                onClick={this.handleReload}
+                className="px-4 py-2 text-sm text-white bg-primary hover:bg-primary-hover rounded-lg transition-colors cursor-pointer"
+              >
+                {t.reload}
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/web/src/components/PromptInput.tsx

@@ -11,9 +11,20 @@
  * @module PromptInput
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { t, type UiLanguage } from '../i18n';
 
+/**
+ * Web 端允许的 B 类指令集合（自动补全只显示这些）
+ *
+ * A 类指令（new/resume/delete/model/effort/permissions/plan）已完全交由 UI 控件承载，
+ * 输入框不识别；其余指令当作普通文本发给 LLM。因此自动补全只列出 B 类 10 个指令。
+ */
+const WEB_COMMANDS = [
+  '/rewind', '/compact', '/context', '/export', '/init',
+  '/fast', '/passes', '/turns', '/output-style', '/language',
+];
+
 /**
  * 内联选项接口
  */
@@ -78,7 +89,14 @@ export default function PromptInput({ lang, busy, connected, commands, onSubmit,
   const [selectedIndex, setSelectedIndex] = useState(0);
   const listRef = useRef<HTMLDivElement>(null);
 
-  const filteredCommands = commands.filter((cmd) => {
+  // 自动补全仅显示 B 类指令（与后端 ready 推送的完整命令列表取交集，无交集则用静态集合）
+  const webCommands = useMemo(() => {
+    return commands.length > 0
+      ? WEB_COMMANDS.filter((c) => commands.some((cmd) => cmd === c || cmd === c.slice(1)))
+      : WEB_COMMANDS;
+  }, [commands]);
+
+  const filteredCommands = webCommands.filter((cmd) => {
     const query = value.toLowerCase();
     return cmd.toLowerCase().startsWith(query) || cmd.toLowerCase().includes(query.slice(1));
   });
@@ -182,6 +200,7 @@ export default function PromptInput({ lang, busy, connected, commands, onSubmit,
         const line = value.trim();
         if (!line) return;
         onSubmit(line);
+        // 始终清空输入框（包括 B 指令触发 inline popup 的情况）
         setValue('');
         setShowCommands(false);
       }

{illusion_code-0.2.3 → illusion_code-0.2.4}/frontend/web/src/components/Sidebar.tsx

@@ -38,6 +38,8 @@ interface SidebarProps {
   onToggle: () => void;
   /** 侧边栏宽度（可选，默认 280） */
   width?: number;
+  /** 正在恢复的会话 ID（可选，用于在对应会话项显示加载 spinner） */
+  restoringSessionId?: string | null;
 }
 
 /**
@@ -49,7 +51,7 @@ interface SidebarProps {
  * @returns 返回侧边栏的 JSX 元素
  */
 export default function Sidebar({
-  lang, connected, sessions, onNewSession, onSelectSession, onListSessions, onDeleteSessions, collapsed, onToggle, width = 280,
+  lang, connected, sessions, onNewSession, onSelectSession, onListSessions, onDeleteSessions, collapsed, onToggle, width = 280, restoringSessionId,
 }: SidebarProps) {
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -59,7 +61,7 @@ export default function Sidebar({
         <button
           onClick={onToggle}
           className="w-9 h-9 flex items-center justify-center rounded-lg text-content-secondary hover:bg-surface-hover hover:text-content-primary transition-colors cursor-pointer"
-          title="展开侧边栏"
+          title={t(lang, 'expand_panel')}
         >
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
             <path d="M6 3l5 5-5 5" />
@@ -75,7 +77,7 @@ export default function Sidebar({
         <button
           onClick={onToggle}
           className="w-8 h-8 flex items-center justify-center rounded-lg text-content-secondary hover:text-content-primary hover:bg-surface-hover transition-colors cursor-pointer"
-          title="收起侧边栏"
+          title={t(lang, 'collapse_panel')}
         >
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
             <path d="M10 3l-5 5 5 5" />
@@ -128,10 +130,16 @@ export default function Sidebar({
               <button
                 key={s.value}
                 onClick={() => onSelectSession(s.value)}
-                className="w-full text-left px-3 py-2 rounded-lg text-sm text-content-secondary hover:bg-surface-card-alt hover:text-content-primary transition-colors cursor-pointer"
+                className="w-full text-left px-3 py-2 rounded-lg text-sm text-content-secondary hover:bg-surface-card-alt hover:text-content-primary transition-colors cursor-pointer flex items-center gap-2"
                 title={s.label}
               >
-                <span className="line-clamp-2 leading-relaxed">{s.label}</span>
+                {restoringSessionId === s.value && (
+                  <svg className="animate-spin w-3.5 h-3.5 text-primary shrink-0" viewBox="0 0 24 24" fill="none">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                )}
+                <span className="line-clamp-2 leading-relaxed flex-1">{s.label}</span>
               </button>
             ))}
           </div>