feat: add task abort functionality and improve UI feedback

- Add ESC key support to abort running tasks
- Implement loop state display showing progress and current tool
- Enhance keyboard input handling with proper signal management
- Update hooks to use useMemoizedFn for performance
- Add abort signal support in Agent for cancellable operations
- Improve command handler with abort functionality
- Add proper cleanup for agent event listeners

Author: echoVic

.claude/settings.local.json

@@ -24,7 +24,9 @@
       "WebFetch(domain:gist.github.com)",
       "Bash(pnpm update:*)",
       "WebFetch(domain:jannesklaas.github.io)",
-      "Bash(npm view:*)"
+      "Bash(npm view:*)",
+      "Bash(for file in src/ui/hooks/useKeyboardInput.ts src/ui/components/ReplInterface.tsx src/ui/ink/Input.tsx src/ui/ink/InputManager.tsx)",
+      "Bash(do echo \"=== $file ===\" grep -n \"useInput\\|key\\.\" \"$file\")"
     ],
     "deny": [],
     "ask": [],

src/agent/Agent.ts

@@ -203,8 +203,16 @@ export class Agent extends EventEmitter {
 
     // 如果提供了 context，使用增强的工具调用流程
     if (context) {
-      const result = await this.runLoop(message, context);
+      const result = await this.runLoop(message, context, {
+        signal: context.signal,
+      });
       if (!result.success) {
+        // 如果是用户中止，触发事件并返回空字符串（不抛出异常）
+        if (result.error?.type === 'aborted') {
+          this.emit('taskAborted', result.metadata);
+          return ''; // 返回空字符串，让调用方自行处理
+        }
+        // 其他错误则抛出异常
         throw new Error(result.error?.message || '执行失败');
       }
       return result.finalMessage || '';
@@ -271,8 +279,8 @@ export class Agent extends EventEmitter {
           return {
             success: false,
             error: {
-              type: 'canceled',
-              message: '用户中断',
+              type: 'aborted',
+              message: '任务已被用户中止',
             },
             metadata: {
               turnsCount,
@@ -317,6 +325,22 @@ export class Agent extends EventEmitter {
         for (const toolCall of turnResult.toolCalls) {
           if (toolCall.type !== 'function') continue;
 
+          // 在每个工具执行前检查中断信号
+          if (options?.signal?.aborted) {
+            return {
+              success: false,
+              error: {
+                type: 'aborted',
+                message: '任务已被用户中止',
+              },
+              metadata: {
+                turnsCount,
+                toolCallsCount: allToolResults.length,
+                duration: Date.now() - startTime,
+              },
+            };
+          }
+
           try {
             // 触发工具执行开始事件
             this.emit('toolExecutionStart', {
@@ -331,7 +355,8 @@ export class Agent extends EventEmitter {
 
             const params = JSON.parse(toolCall.function.arguments);
             const toolInvocation = tool.build(params);
-            const result = await toolInvocation.execute(new AbortController().signal);
+            const signalToUse = options?.signal || new AbortController().signal;
+            const result = await toolInvocation.execute(signalToUse);
             allToolResults.push(result);
 
             // 触发工具执行完成事件
@@ -378,6 +403,22 @@ export class Agent extends EventEmitter {
           }
         }
 
+        // 检查工具执行后的中断信号
+        if (options?.signal?.aborted) {
+          return {
+            success: false,
+            error: {
+              type: 'aborted',
+              message: '任务已被用户中止',
+            },
+            metadata: {
+              turnsCount,
+              toolCallsCount: allToolResults.length,
+              duration: Date.now() - startTime,
+            },
+          };
+        }
+
         // 7. 循环检测 - 检测是否陷入死循环
         const loopDetected = await this.loopDetector.detect(
           turnResult.toolCalls.filter(

src/agent/types.ts

@@ -13,6 +13,7 @@ export interface ChatContext {
   userId: string;
   sessionId: string;
   workspaceRoot: string;
+  signal?: AbortSignal;
 }
 
 /**
@@ -135,7 +136,7 @@ export interface LoopResult {
   success: boolean;
   finalMessage?: string;
   error?: {
-    type: 'canceled' | 'max_turns_exceeded' | 'api_error' | 'loop_detected';
+    type: 'canceled' | 'max_turns_exceeded' | 'api_error' | 'loop_detected' | 'aborted';
     message: string;
     details?: any;
   };

src/ui/components/BladeInterface.tsx

@@ -91,14 +91,18 @@ export const BladeInterface: React.FC<BladeInterfaceProps> = ({
   }, [stdout]);
 
   // 使用 hooks
-  const { isProcessing, executeCommand } = useCommandHandler(otherProps.appendSystemPrompt);
+  const { isProcessing, executeCommand, loopState, handleAbort } = useCommandHandler(
+    otherProps.appendSystemPrompt
+  );
   const { getPreviousCommand, getNextCommand, addToHistory } = useCommandHistory();
 
   const { input, showSuggestions, suggestions, selectedSuggestionIndex } = useKeyboardInput(
     (command: string) => executeCommand(command, addUserMessage, addAssistantMessage),
     getPreviousCommand,
     getNextCommand,
-    addToHistory
+    addToHistory,
+    handleAbort,
+    isProcessing
   );
 
   // 主界面 - 统一显示，不再区分初始化状态
@@ -111,6 +115,7 @@ export const BladeInterface: React.FC<BladeInterfaceProps> = ({
         terminalWidth={terminalWidth}
         isProcessing={isProcessing}
         isInitialized={hasApiKey}
+        loopState={loopState}
       />
 
       <InputArea

src/ui/components/MessageArea.tsx

@@ -2,12 +2,14 @@ import { Box, Text } from 'ink';
 import React from 'react';
 import { MessageRenderer } from './MessageRenderer.js';
 import { getCopyright } from '../../utils/package-info.js';
+import type { LoopState } from '../hooks/useCommandHandler.js';
 
 interface MessageAreaProps {
   sessionState: any;
   terminalWidth: number;
   isProcessing: boolean;
   isInitialized: boolean;
+  loopState: LoopState;
 }
 
 /**
@@ -19,6 +21,7 @@ export const MessageArea: React.FC<MessageAreaProps> = ({
   terminalWidth,
   isProcessing,
   isInitialized,
+  loopState,
 }) => {
   // 判断是否显示欢迎界面（只有assistant消息，没有用户消息）
   const hasUserMessages = sessionState.messages.some((msg: any) => msg.role === 'user');
@@ -122,10 +125,25 @@ export const MessageArea: React.FC<MessageAreaProps> = ({
               />
             ))}
             {isProcessing && (
-              <Box paddingX={2}>
-                <Text color="yellow" dimColor>
-                  正在思考中...
-                </Text>
+              <Box paddingX={2} flexDirection="column">
+                {loopState.active ? (
+                  <>
+                    <Text color="cyan" bold>
+                      🔄 回合 {loopState.turn}/{loopState.maxTurns} (
+                      {Math.round((loopState.turn / loopState.maxTurns) * 100)}%)
+                    </Text>
+                    {loopState.currentTool && (
+                      <Text color="green" bold>🔧 正在执行: {loopState.currentTool}</Text>
+                    )}
+                    <Text color="yellow">
+                      按 ESC 停止任务
+                    </Text>
+                  </>
+                ) : (
+                  <Text color="yellow" bold>
+                    正在思考中...
+                  </Text>
+                )}
               </Box>
             )}
           </Box>

src/ui/components/ReplInterface.tsx

@@ -31,13 +31,13 @@ export const ReplInterface: React.FC<ReplInterfaceProps> = ({ onCommandSubmit })
     if (key.return) {
       // 回车键提交命令
       handleSubmit();
-    } else if (key.ctrl && key.name === 'c') {
+    } else if (key.ctrl && inputKey === 'c') {
       // Ctrl+C 退出
       exit();
     } else if (key.backspace || key.delete) {
       // 退格键删除字符
       setInput((prev) => prev.slice(0, -1));
-    } else if (inputKey && key.name !== 'escape') {
+    } else if (inputKey && !key.escape) {
       // 普通字符输入
       setInput((prev) => prev + inputKey);
     }

src/ui/hooks/useAppNavigation.ts

@@ -1,4 +1,5 @@
-import { useCallback, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { useState } from 'react';
 import type { RouteConfig } from '../../config/route-config.js';
 
 export type AppView =
@@ -50,7 +51,7 @@ export const useAppNavigation = (): UseAppNavigationReturn => {
   const [navigationState, setNavigationState] =
     useState<NavigationState>(defaultNavigationState);
 
-  const navigate = useCallback((view: AppView, options: NavigationOptions = {}) => {
+  const navigate = useMemoizedFn((view: AppView, options: NavigationOptions = {}) => {
     const { replace = false, preserveHistory = false } = options;
 
     setNavigationState((prevState) => {
@@ -80,9 +81,9 @@ export const useAppNavigation = (): UseAppNavigationReturn => {
     if (routeConfig?.onNavigate) {
       routeConfig.onNavigate(view, options);
     }
-  }, []);
+  });
 
-  const goBack = useCallback(() => {
+  const goBack = useMemoizedFn(() => {
     setNavigationState((prevState) => {
       if (prevState.history.length <= 1) {
         return prevState; // 无法返回
@@ -98,26 +99,26 @@ export const useAppNavigation = (): UseAppNavigationReturn => {
         canGoForward: true,
       };
     });
-  }, []);
+  });
 
-  const goForward = useCallback(() => {
+  const goForward = useMemoizedFn(() => {
     setNavigationState((prevState) => {
       // 这里简化处理，实际应该维护一个前进历史栈
       return prevState; // 暂时无法前进
     });
-  }, []);
+  });
 
-  const goToHome = useCallback(() => {
+  const goToHome = useMemoizedFn(() => {
     navigate('main', { replace: true });
-  }, [navigate]);
+  });
 
-  const registerRoute = useCallback((route: RouteConfig) => {
+  const registerRoute = useMemoizedFn((route: RouteConfig) => {
     routeRegistry.set(route.path as AppView, route);
-  }, []);
+  });
 
-  const getRouteConfig = useCallback((view: AppView): RouteConfig | undefined => {
+  const getRouteConfig = useMemoizedFn((view: AppView): RouteConfig | undefined => {
     return routeRegistry.get(view);
-  }, []);
+  });
 
   return {
     currentView: navigationState.currentView,
@@ -152,31 +153,28 @@ export const useNavigationHistory = () => {
 export const useDeepLink = () => {
   const navigate = useAppNavigation().navigate;
 
-  const handleDeepLink = useCallback(
-    (url: string) => {
-      try {
-        const parsedUrl = new URL(url);
-        const path = parsedUrl.pathname.slice(1); // 去掉开头的'/'
-        const params = Object.fromEntries(parsedUrl.searchParams);
-
-        // 解析路径并导航
-        if (['settings', 'help', 'logs', 'tools', 'chat', 'config'].includes(path)) {
-          navigate(path as AppView, { state: params });
-        } else {
-          // 处理特殊的深度链接格式
-          const [view, ...rest] = path.split('/');
-          if (['settings', 'help', 'logs', 'tools', 'chat', 'config'].includes(view)) {
-            navigate(view as AppView, {
-              state: { section: rest.join('/'), ...params },
-            });
-          }
+  const handleDeepLink = useMemoizedFn((url: string) => {
+    try {
+      const parsedUrl = new URL(url);
+      const path = parsedUrl.pathname.slice(1); // 去掉开头的'/'
+      const params = Object.fromEntries(parsedUrl.searchParams);
+
+      // 解析路径并导航
+      if (['settings', 'help', 'logs', 'tools', 'chat', 'config'].includes(path)) {
+        navigate(path as AppView, { state: params });
+      } else {
+        // 处理特殊的深度链接格式
+        const [view, ...rest] = path.split('/');
+        if (['settings', 'help', 'logs', 'tools', 'chat', 'config'].includes(view)) {
+          navigate(view as AppView, {
+            state: { section: rest.join('/'), ...params },
+          });
         }
-      } catch (error) {
-        console.error('解析深度链接失败:', error);
       }
-    },
-    [navigate]
-  );
+    } catch (error) {
+      console.error('解析深度链接失败:', error);
+    }
+  });
 
   return { handleDeepLink };
 };
@@ -185,7 +183,7 @@ export const useDeepLink = () => {
 export const useRouteGuard = () => {
   const navigate = useAppNavigation().navigate;
 
-  const requireAuth = useCallback((targetView: AppView) => {
+  const requireAuth = useMemoizedFn((targetView: AppView) => {
     const isAuthenticated = false; // 这里应该从认证状态获取
 
     if (!isAuthenticated) {
@@ -195,9 +193,9 @@ export const useRouteGuard = () => {
     }
 
     return true;
-  }, []);
+  });
 
-  const requirePermission = useCallback((permission: string, targetView: AppView) => {
+  const requirePermission = useMemoizedFn((permission: string, targetView: AppView) => {
     const hasPermission = true; // 这里应该从权限系统获取
 
     if (!hasPermission) {
@@ -206,9 +204,9 @@ export const useRouteGuard = () => {
     }
 
     return true;
-  }, []);
+  });
 
-  const navigateWithGuard = useCallback(
+  const navigateWithGuard = useMemoizedFn(
     (view: AppView, options?: NavigationOptions) => {
       const routeConfig = routeRegistry.get(view);
 
@@ -223,8 +221,7 @@ export const useRouteGuard = () => {
       }
 
       navigate(view, options);
-    },
-    [navigate]
+    }
   );
 
   return {