feat: enhance tool approval process with error handling and input blocking

Author: NoOne7135

agent/middleware/apiBasedTools.ts

@@ -1,4 +1,5 @@
 import { ToolMessage } from "@langchain/core/messages";
+import { isGraphInterrupt } from "@langchain/langgraph";
 import { createMiddleware } from "langchain";
 import { logger, type AdminUser, type IAdminForth } from "adminforth";
 import {
@@ -13,6 +14,7 @@ import { ALWAYS_AVAILABLE_API_TOOL_NAMES } from "../tools/index.js";
 import { createApiTool } from "../tools/apiTool.js";
 import type { AgentEventEmitter } from "../../agentEvents.js";
 import type { SequenceDebugCollector } from "./sequenceDebug.js";
+import { isAbortError } from "../../errors.js";
 
 function getEnabledApiToolNames(messages: unknown[]) {
   const enabledToolNames = new Set<string>();
@@ -82,9 +84,14 @@ export function createApiBasedToolsMiddleware(
     async wrapToolCall(request, handler) {
       const startedAt = Date.now();
       const toolInput = JSON.stringify(request.toolCall.args ?? {});
-      const toolCallId = request.toolCall.id as string;
-      const { adminUser, emit, sequenceDebugSink, userTimeZone } = request.runtime.context as {
+      if (!request.toolCall.id) {
+        throw new Error(`Tool call "${request.toolCall.name}" has no id.`);
+      }
+
+      const toolCallId = request.toolCall.id;
+      const { adminUser, abortSignal, emit, sequenceDebugSink, userTimeZone } = request.runtime.context as {
         adminUser: AdminUser;
+        abortSignal?: AbortSignal;
         emit?: AgentEventEmitter;
         sequenceDebugSink: SequenceDebugCollector;
         userTimeZone: string;
@@ -137,17 +144,25 @@ export function createApiBasedToolsMiddleware(
         toolCallTracker.finishSuccess(result);
         return result;
       } catch (error) {
+        if (
+          isGraphInterrupt(error)
+          || abortSignal?.aborted
+          || isAbortError(error)
+        ) {
+          throw error;
+        }
+
+        const message = error instanceof Error ? error.message : String(error);
+
         logger.error(
           `Error calling tool "${request.toolCall.name}": ${error instanceof Error ? error.stack ?? error.message : String(error)}`,
         );
-        toolCallTracker.finishError(`Error: ${error instanceof Error ? error.message : String(error)}`);
+        toolCallTracker.finishError(`Error: ${message}`);
         return new ToolMessage({
           name: request.toolCall.name,
           tool_call_id: toolCallId,
           status: "error",
-          content: `Error: ${
-            error instanceof Error ? error.message : String(error)
-          }`,
+          content: `Error: ${message}`,
         })
       } finally {
         logger.info(

agent/runtime/AgentRuntime.ts

@@ -51,9 +51,9 @@ export class AgentRuntime {
     });
     const middleware = [
       apiBasedToolsMiddleware,
+      hitlMiddleware,
       ...(input.models.modelMiddleware ?? []),
       sequenceDebugMiddleware,
-      hitlMiddleware,
       summarizationMiddleware({
         model: input.models.summaryModel,
         trigger: { tokens: 1024 * 64 },

agentTurnService.ts

@@ -129,6 +129,9 @@ export class AgentTurnService {
     const approvalDecision = getApprovalDecision(input);
     const shouldResume = Boolean(approvalDecision);
     const pendingInterrupts = this.pendingInterrupts.get(input.sessionId);
+    if (shouldResume && (!pendingInterrupts || pendingInterrupts.length === 0)) {
+      throw new Error(`No pending approval interrupt found for session "${input.sessionId}".`);
+    }
     const lifecycleTurn = shouldResume
       ? await this.lifecycle.resume(input)
       : await this.lifecycle.start(input);

custom/ChatFooter.vue

@@ -20,7 +20,8 @@
           'min-h-12 px-4 pt-4 rounded-xl w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
           { '!text-base': coreStore.isIos }
         ]"
-        :placeholder="agentStore.userMessagePlaceholder"
+        :placeholder="agentStore.hasPendingToolApproval ? 'Approve or reject the pending action to continue' : agentStore.userMessagePlaceholder"
+        :disabled="agentStore.isMessageInputBlocked"
         @keydown.enter.exact.prevent="sendMessage"
       />
       <div
@@ -70,7 +71,7 @@
           v-if="!agentStore.isResponseInProgress"
           class="absolute right-4 bottom-2 !p-0 h-9 w-9 transition-opacity duration-200"                    
           @click="sendMessage" 
-          :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
+          :disabled="!agentStore.trimmedUserMessage || agentStore.isMessageInputBlocked"
         >
           <IconArrowUpOutline 
             class="w-8 h-8 p-1

custom/composables/agentStore/useAgentChat.ts

@@ -89,7 +89,18 @@ export function createAgentChatManager({
     replaceLastMessage(assistantMessage);
   }
 
-  function handleAgentStreamPart(dataPart: any) {
+  function handleRealtimeChatData(dataPart: any) {
+    if (dataPart?.type === 'data-open-page' && typeof dataPart.data?.targetPath === 'string') {
+      onOpenPage(dataPart.data.targetPath);
+      return;
+    }
+
+    if (dataPart?.type === 'data-interrupt' && typeof dataPart.data?.sessionId === 'string') {
+      onToolApprovalRequest(dataPart.data.sessionId, dataPart.data.interrupt);
+    }
+  }
+
+  function handleManualApprovalStreamPart(dataPart: any) {
     if (dataPart?.type === 'text-delta' && typeof dataPart.delta === 'string') {
       appendTextDelta(dataPart.delta);
       return;
@@ -152,7 +163,7 @@ export function createAgentChatManager({
           continue;
         }
 
-        handleAgentStreamPart(JSON.parse(data));
+        handleManualApprovalStreamPart(JSON.parse(data));
       }
     }
   }
@@ -187,14 +198,7 @@ export function createAgentChatManager({
         onError(error: unknown) {
           console.error('Chat error:', error);
         },
-        onData(dataPart: any) {
-          if (dataPart?.type === 'data-open-page' && typeof dataPart.data?.targetPath === 'string') {
-            onOpenPage(dataPart.data.targetPath);
-          }
-          if (dataPart?.type === 'data-interrupt' && typeof dataPart.data?.sessionId === 'string') {
-            onToolApprovalRequest(dataPart.data.sessionId, dataPart.data.interrupt);
-          }
-        },
+        onData: handleRealtimeChatData,
       });
       chats.set(sessionId, newChat);
       currentChat.value = newChat;

custom/composables/agentStore/useAgentSessions.ts

@@ -17,6 +17,7 @@ type CreateAgentSessionManagerOptions = {
   currentChat: ShallowRef<Chat<any> | null | undefined>;
   trimmedUserMessage: ComputedRef<string>;
   isResponseInProgress: ComputedRef<boolean>;
+  isMessageInputBlocked: ComputedRef<boolean>;
   userMessageInput: Ref<any>;
   lastMessage: Ref<string>;
   blockCloseOfChat: Ref<boolean>;
@@ -32,6 +33,7 @@ export function createAgentSessionManager({
   currentChat,
   trimmedUserMessage,
   isResponseInProgress,
+  isMessageInputBlocked,
   userMessageInput,
   lastMessage,
   blockCloseOfChat,
@@ -130,7 +132,7 @@ export function createAgentSessionManager({
 
   async function sendMessage() {
     const message = trimmedUserMessage.value;
-    if (!message || isResponseInProgress.value) {
+    if (!message || isMessageInputBlocked.value) {
       return;
     }
     if (!currentSession.value || currentSession.value.sessionId === PRE_SESSION_ID) {

custom/composables/useAgentStore.ts

@@ -152,10 +152,17 @@ export const useAgentStore = defineStore('agent', () => {
       approvalPart.data.status = 'processing';
     }
 
-    await submitToolApprovalResponse(sessionId, decision);
+    try {
+      await submitToolApprovalResponse(sessionId, decision);
 
-    if (approvalPart?.data) {
-      approvalPart.data.status = decision === 'approve' ? 'approved' : 'rejected';
+      if (approvalPart?.data) {
+        approvalPart.data.status = decision === 'approve' ? 'approved' : 'rejected';
+      }
+    } catch (error) {
+      if (approvalPart?.data) {
+        approvalPart.data.status = 'pending';
+      }
+      console.error('Error submitting tool approval', error);
     }
   }
 
@@ -171,6 +178,18 @@ export const useAgentStore = defineStore('agent', () => {
   const isResponseInProgress = computed( () => {
     return currentChat.value?.status === 'streaming';
   });
+  const hasPendingToolApproval = computed(() => (
+    currentChat.value?.messages.some((message: any) => (
+      message.role === 'assistant'
+      && message.parts.some((part: any) => (
+        part.type === 'data-tool-approval'
+        && (part.data?.status === 'pending' || part.data?.status === 'processing')
+      ))
+    )) ?? false
+  ));
+  const isMessageInputBlocked = computed(() => (
+    isResponseInProgress.value || hasPendingToolApproval.value
+  ));
   const blockCloseOfChat = ref(false);
   const {
     sendMessage,
@@ -193,6 +212,7 @@ export const useAgentStore = defineStore('agent', () => {
     currentChat,
     trimmedUserMessage,
     isResponseInProgress,
+    isMessageInputBlocked,
     userMessageInput,
     lastMessage,
     blockCloseOfChat,
@@ -455,6 +475,8 @@ export const useAgentStore = defineStore('agent', () => {
     chatMessages: computed(() => currentChat.value?.messages || []),
     trimmedUserMessage,
     isResponseInProgress,
+    hasPendingToolApproval,
+    isMessageInputBlocked,
     isTeleportedToBody,
     setIsTeleportedToBody,
     chatWidth,

endpoints/core.ts

@@ -90,7 +90,6 @@ export function setupCoreEndpoints(ctx: CoreEndpointsContext, server: IHttpServe
       await ctx.handleTurn({
         prompt: "",
         sessionId: data.sessionId,
-        userTimeZone: 'UTC',
         approvalDecision: data.decision,
         abortSignal,
         adminUser: adminUser!,