feat(command): 添加待处理命令队列功能

huzijie.sea · huzijie.sea · commit ffc6008a922e · 2025-12-18T14:05:59.000+08:00
实现命令队列机制，允许在命令处理期间排队后续命令
- 添加 pendingCommands 状态和队列操作方法
- 修改 useCommandHandler 处理队列逻辑
- 在 MessageArea 显示待处理命令
- 移除不必要的输入禁用状态
- 扩展文件补全支持目录类型
diff --git a/src/slash-commands/init.ts b/src/slash-commands/init.ts
@@ -4,9 +4,12 @@
  */
 
 import { promises as fs } from 'fs';
+import type { ChatCompletionMessageToolCall } from 'openai/resources/chat';
 import * as path from 'path';
 import { Agent } from '../agent/Agent.js';
 import { getState, sessionActions } from '../store/vanilla.js';
+import type { ToolResult } from '../tools/types/index.js';
+import { formatToolCallSummary } from '../ui/utils/toolFormatters.js';
 import type { SlashCommand, SlashCommandContext, SlashCommandResult } from './types.js';
 
 const initCommand: SlashCommand = {
@@ -20,6 +23,7 @@ const initCommand: SlashCommand = {
     try {
       const { cwd } = context;
       const addMessage = sessionActions().addAssistantMessage;
+      const addToolMessage = sessionActions().addToolMessage;
 
       // 从 store 获取 sessionId
       const sessionId = getState().session.sessionId;
@@ -79,12 +83,42 @@ const initCommand: SlashCommand = {
 **Final output**: Return your analysis and suggestions as plain text. Do NOT use Write tool.`;
 
         // 使用 chat 方法让 Agent 可以调用工具
-        const result = await agent.chat(analysisPrompt, {
-          messages: [],
-          userId: 'cli-user',
-          sessionId: sessionId || 'init-session',
-          workspaceRoot: cwd,
-        });
+        const result = await agent.chat(
+          analysisPrompt,
+          {
+            messages: [],
+            userId: 'cli-user',
+            sessionId: sessionId || 'init-session',
+            workspaceRoot: cwd,
+          },
+          {
+            onToolStart: (toolCall: ChatCompletionMessageToolCall) => {
+              if (toolCall.type !== 'function') return;
+              try {
+                const params = JSON.parse(toolCall.function.arguments);
+                const summary = formatToolCallSummary(toolCall.function.name, params);
+                addToolMessage(summary, {
+                  toolName: toolCall.function.name,
+                  phase: 'start',
+                  summary,
+                  params,
+                });
+              } catch {
+                // 静默处理解析错误
+              }
+            },
+            onToolResult: async (toolCall: ChatCompletionMessageToolCall, result: ToolResult) => {
+              if (toolCall.type !== 'function') return;
+              if (result?.metadata?.summary) {
+                addToolMessage(result.metadata.summary, {
+                  toolName: toolCall.function.name,
+                  phase: 'complete',
+                  summary: result.metadata.summary,
+                });
+              }
+            },
+          }
+        );
 
         addMessage(result);
 
@@ -138,12 +172,42 @@ const initCommand: SlashCommand = {
 **Final output**: Return ONLY the complete BLADE.md content (markdown format), ready to be written to the file.`;
 
       // 使用 chat 方法让 Agent 可以调用工具
-      const generatedContent = await agent.chat(analysisPrompt, {
-        messages: [],
-        userId: 'cli-user',
-        sessionId: sessionId || 'init-session',
-        workspaceRoot: cwd,
-      });
+      const generatedContent = await agent.chat(
+        analysisPrompt,
+        {
+          messages: [],
+          userId: 'cli-user',
+          sessionId: sessionId || 'init-session',
+          workspaceRoot: cwd,
+        },
+        {
+          onToolStart: (toolCall: ChatCompletionMessageToolCall) => {
+            if (toolCall.type !== 'function') return;
+            try {
+              const params = JSON.parse(toolCall.function.arguments);
+              const summary = formatToolCallSummary(toolCall.function.name, params);
+              addToolMessage(summary, {
+                toolName: toolCall.function.name,
+                phase: 'start',
+                summary,
+                params,
+              });
+            } catch {
+              // 静默处理解析错误
+            }
+          },
+          onToolResult: async (toolCall: ChatCompletionMessageToolCall, result: ToolResult) => {
+            if (toolCall.type !== 'function') return;
+            if (result?.metadata?.summary) {
+              addToolMessage(result.metadata.summary, {
+                toolName: toolCall.function.name,
+                phase: 'complete',
+                summary: result.metadata.summary,
+              });
+            }
+          },
+        }
+      );
 
       // 验证生成内容的有效性（至少应该有基本的标题和内容）
       if (!generatedContent || generatedContent.trim().length === 0) {
diff --git a/src/store/selectors/index.ts b/src/store/selectors/index.ts
@@ -292,6 +292,12 @@ export const useAbortController = () =>
  */
 export const useCommandActions = () => useBladeStore((state) => state.command.actions);
 
+/**
+ * 获取待处理命令队列
+ */
+export const usePendingCommands = () =>
+  useBladeStore((state) => state.command.pendingCommands);
+
 /**
  * 派生选择器：是否可以中止
  */
diff --git a/src/store/slices/commandSlice.ts b/src/store/slices/commandSlice.ts
@@ -18,6 +18,7 @@ import type { BladeStore, CommandSlice, CommandState } from '../types.js';
 const initialCommandState: CommandState = {
   isProcessing: false,
   abortController: null,
+  pendingCommands: [],
 };
 
 /**
@@ -66,6 +67,7 @@ export const createCommandSlice: StateCreator<
      * - 发送 abort signal
      * - 重置 isProcessing
      * - 重置 isThinking (跨 slice)
+     * - 清空待处理队列
      */
     abort: () => {
       const { abortController } = get().command;
@@ -78,12 +80,57 @@ export const createCommandSlice: StateCreator<
       // 重置 session 的 isThinking 状态
       get().session.actions.setThinking(false);
 
-      // 重置 command 状态
+      // 重置 command 状态并清空队列
       set((state) => ({
         command: {
           ...state.command,
           isProcessing: false,
           abortController: null,
+          pendingCommands: [],
+        },
+      }));
+    },
+
+    /**
+     * 将命令加入待处理队列
+     */
+    enqueueCommand: (command: string) => {
+      set((state) => ({
+        command: {
+          ...state.command,
+          pendingCommands: [...state.command.pendingCommands, command],
+        },
+      }));
+    },
+
+    /**
+     * 从队列取出下一个命令
+     */
+    dequeueCommand: () => {
+      const { pendingCommands } = get().command;
+      if (pendingCommands.length === 0) {
+        return undefined;
+      }
+
+      const [nextCommand, ...rest] = pendingCommands;
+      set((state) => ({
+        command: {
+          ...state.command,
+          pendingCommands: rest,
+        },
+      }));
+
+      return nextCommand;
+    },
+
+    /**
+     * 清空待处理队列
+     */
+    clearQueue: () => {
+      set((state) => ({
+        command: {
+          ...state.command,
+          pendingCommands: [],
         },
       }));
     },
diff --git a/src/store/types.ts b/src/store/types.ts
@@ -227,6 +227,7 @@ export interface FocusSlice extends FocusState {
 export interface CommandState {
   isProcessing: boolean; // 临时状态 - 不持久化
   abortController: AbortController | null; // 不持久化
+  pendingCommands: string[]; // 待处理命令队列 - 不持久化
 }
 
 /**
@@ -237,6 +238,9 @@ export interface CommandActions {
   createAbortController: () => AbortController;
   clearAbortController: () => void;
   abort: () => void;
+  enqueueCommand: (command: string) => void;
+  dequeueCommand: () => string | undefined;
+  clearQueue: () => void;
 }
 
 /**
diff --git a/src/ui/components/BladeInterface.tsx b/src/ui/components/BladeInterface.tsx
@@ -503,8 +503,6 @@ export const BladeInterface: React.FC<BladeInterfaceProps> = ({
       />
     ) : null;
 
-  const isInputDisabled = isThinking || !readyForChat || inlineModelUiVisible;
-
   return (
     <Box flexDirection="column" width="100%" height="100%">
       {blockingModal ?? (
@@ -520,7 +518,6 @@ export const BladeInterface: React.FC<BladeInterfaceProps> = ({
             cursorPosition={inputBuffer.cursorPosition}
             onChange={inputBuffer.setValue}
             onChangeCursorPosition={inputBuffer.setCursorPosition}
-            isProcessing={isInputDisabled}
           />
 
           {inlineModelSelectorVisible && (
diff --git a/src/ui/components/InputArea.tsx b/src/ui/components/InputArea.tsx
@@ -9,7 +9,6 @@ import { CustomTextInput } from './CustomTextInput.js';
 interface InputAreaProps {
   input: string;
   cursorPosition: number;
-  isProcessing: boolean;
   onChange: (value: string) => void;
   onChangeCursorPosition: (position: number) => void;
 }
@@ -20,14 +19,11 @@ interface InputAreaProps {
  * 注意：加载动画已移至 LoadingIndicator 组件，显示在输入框上方
  */
 export const InputArea: React.FC<InputAreaProps> = React.memo(
-  ({ input, cursorPosition, isProcessing, onChange, onChangeCursorPosition }) => {
+  ({ input, cursorPosition, onChange, onChangeCursorPosition }) => {
     // 使用 Zustand store 管理焦点
     const currentFocus = useCurrentFocus();
     const isFocused = currentFocus === FocusId.MAIN_INPUT;
 
-    // 处理中时，禁用输入框（移除焦点和光标）
-    const isEnabled = !isProcessing && isFocused;
-
     // 文本粘贴回调 - 处理大段文本粘贴
     const handlePaste = useMemoizedFn((text: string): { prompt?: string } => {
       const lineCount = text.split('\n').length;
@@ -122,7 +118,7 @@ export const InputArea: React.FC<InputAreaProps> = React.memo(
           onPaste={handlePaste}
           onImagePaste={handleImagePaste}
           placeholder=" 输入命令..."
-          focus={isEnabled}
+          focus={isFocused}
           disabledKeys={['upArrow', 'downArrow', 'tab', 'return', 'escape']}
         />
       </Box>
diff --git a/src/ui/components/MessageArea.tsx b/src/ui/components/MessageArea.tsx
@@ -3,6 +3,7 @@ import React, { ReactNode, useMemo } from 'react';
 import {
   useIsThinking,
   useMessages,
+  usePendingCommands,
   useShowTodoPanel,
   useTodos,
 } from '../../store/selectors/index.js';
@@ -35,6 +36,7 @@ export const MessageArea: React.FC = React.memo(() => {
   const isThinking = useIsThinking();
   const todos = useTodos();
   const showTodoPanel = useShowTodoPanel();
+  const pendingCommands = usePendingCommands();
 
   // 使用 useTerminalWidth hook 获取终端宽度
   const terminalWidth = useTerminalWidth();
@@ -107,6 +109,17 @@ export const MessageArea: React.FC = React.memo(() => {
             <TodoPanel todos={todos} visible={true} compact={false} />
           </Box>
         )}
+
+        {/* 待处理命令队列（显示在最底部，作为下一轮对话的开始） */}
+        {pendingCommands.map((cmd, index) => (
+          <Box key={`pending-${index}`} flexDirection="column">
+            <MessageRenderer
+              content={cmd}
+              role="user"
+              terminalWidth={terminalWidth}
+            />
+          </Box>
+        ))}
       </Box>
     </Box>
   );
diff --git a/src/ui/hooks/useAtCompletion.ts b/src/ui/hooks/useAtCompletion.ts
@@ -203,7 +203,8 @@ export function useAtCompletion(
           cwd,
           dot: false,
           followSymbolicLinks: false,
-          onlyFiles: true,
+          onlyFiles: false,
+          markDirectories: true,
           unique: true,
           ignore: ignorePatterns,
         })) as string[];
diff --git a/src/ui/hooks/useCommandHandler.ts b/src/ui/hooks/useCommandHandler.ts
@@ -1,4 +1,5 @@
 import { useMemoizedFn } from 'ahooks';
+import type { ChatCompletionMessageToolCall } from 'openai/resources/chat';
 import { useEffect, useRef } from 'react';
 import { createLogger, LogCategory } from '../../logging/Logger.js';
 import type { SessionMetadata } from '../../services/SessionService.js';
@@ -18,6 +19,7 @@ import {
 } from '../../store/selectors/index.js';
 import { ensureStoreInitialized } from '../../store/vanilla.js';
 import type { ConfirmationHandler } from '../../tools/types/ExecutionTypes.js';
+import type { ToolResult } from '../../tools/types/index.js';
 import {
   formatToolCallSummary,
   shouldShowToolDetail,
@@ -60,6 +62,9 @@ function handleSlashMessage(
       appActions.showSessionSelector(sessions);
       return true;
     }
+    case 'exit_application':
+      process.exit(0);
+      return true;
     default:
       return false;
   }
@@ -218,7 +223,8 @@ export const useCommandHandler = (
             }
           },
           // 工具调用开始
-          onToolStart: (toolCall: any) => {
+          onToolStart: (toolCall: ChatCompletionMessageToolCall) => {
+            if (toolCall.type !== 'function') return;
             // 跳过 TodoWrite 的显示（任务列表由侧边栏显示）
             if (toolCall.function.name === 'TodoWrite') {
               return;
@@ -238,7 +244,11 @@ export const useCommandHandler = (
             }
           },
           // 工具执行完成（显示摘要 + 可选的详细内容）
-          onToolResult: async (toolCall: any, result: any) => {
+          onToolResult: async (
+            toolCall: ChatCompletionMessageToolCall,
+            result: ToolResult
+          ) => {
+            if (toolCall.type !== 'function') return;
             if (!result?.metadata?.summary) {
               return;
             }
@@ -295,12 +305,14 @@ export const useCommandHandler = (
       return;
     }
 
+    const trimmedCommand = command.trim();
+
+    // 如果正在处理，静默加入队列（执行时再显示用户消息）
     if (isProcessing) {
+      commandActions.enqueueCommand(trimmedCommand);
       return;
     }
 
-    const trimmedCommand = command.trim();
-
     // 清空上一轮对话的 todos
     appActions.setTodos([]);
 
@@ -333,6 +345,13 @@ export const useCommandHandler = (
       commandActions.setProcessing(false);
       sessionActions.setThinking(false);
       commandActions.clearAbortController();
+
+      // 处理队列中的下一个命令
+      const nextCommand = commandActions.dequeueCommand();
+      if (nextCommand) {
+        // 稍微延迟以让 UI 更新
+        setTimeout(() => executeCommand(nextCommand), 100);
+      }
     }
   });
 
diff --git a/src/ui/hooks/useMainInput.ts b/src/ui/hooks/useMainInput.ts
