fix(ui): send approvals past busy chat queue (#101532)

steipete · vincentkoc · web-flow · commit 395fbb8eb631 · 2026-07-07T10:59:16.000+01:00
Co-authored-by: Vincent Koc &lt;vincentkoc@ieee.org&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@ Docs: https://docs.openclaw.ai
 
 ### Fixes
 
+- **Control UI typed approvals:** send `/approve` commands immediately through the authorized Gateway command path while an agent run is blocked instead of queueing the command behind that run. (#77672) Thanks @vincentkoc.
 - **Microsoft Teams Graph response bounds:** cap successful file-upload and chat JSON reads so oversized Microsoft Graph responses cannot be buffered without limit. (#97784) Thanks @Alix-007.
 - **Packaged speech runtime:** stop treating package-backed `speech-core` as a bundled plugin sidecar, restoring TTS startup in npm installs while release checks keep true activation-bypassing facades package-complete. (#89899, #89425) Thanks @zhangguiping-xydt.
 - **Codex app-server protocol:** require app-server 0.142 or newer, remove pre-0.142 wire-shape compatibility, and teach Codex to retrieve deferred native `spawn_agent` through `tool_search` so native subagent task mirroring works on search-capable models. (#101221)
diff --git a/ui/src/e2e/approval-flow.e2e.test.ts b/ui/src/e2e/approval-flow.e2e.test.ts
@@ -27,6 +27,13 @@ function approval(id: string, command: string, createdAtMs: number) {
   };
 }
 
+function requireRecord(value: unknown): Record<string, unknown> {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    throw new Error("Expected object value");
+  }
+  return value as Record<string, unknown>;
+}
+
 describeControlUiE2e("Control UI approval flow", () => {
   beforeAll(async () => {
     server = await startControlUiE2eServer();
@@ -78,4 +85,37 @@ describeControlUiE2e("Control UI approval flow", () => {
       .poll(() => currentPage.getByRole("button", { name: "Deny" }).isEnabled())
       .toBe(true);
   });
+
+  it("sends a typed approval command immediately while the active run waits", async () => {
+    browser = await chromium.launch({ executablePath: chromiumExecutablePath });
+    const context = await browser.newContext({ viewport: { height: 800, width: 1200 } });
+    const currentPage = await context.newPage();
+    page = currentPage;
+    const gateway = await installMockGateway(currentPage);
+
+    await currentPage.goto(`${server?.baseUrl ?? ""}chat`);
+    await gateway.waitForRequest("sessions.list");
+
+    const composer = currentPage.locator(".agent-chat__composer-combobox textarea");
+    await composer.fill("run a command that needs approval");
+    await currentPage.getByRole("button", { name: "Send message" }).click();
+    const firstSend = requireRecord((await gateway.waitForRequest("chat.send")).params);
+    expect(firstSend.message).toBe("run a command that needs approval");
+    await currentPage.getByRole("button", { name: "Stop generating" }).waitFor();
+
+    await composer.fill("/approve approval-123 allow-once");
+    await currentPage.getByRole("button", { name: "Queue message" }).click();
+
+    await expect
+      .poll(async () => (await gateway.getRequests("chat.send")).length, { timeout: 10_000 })
+      .toBe(2);
+    const sends = await gateway.getRequests("chat.send");
+    const approvalSend = requireRecord(sends[1]?.params);
+    expect(approvalSend.message).toBe("/approve approval-123 allow-once");
+    expect(approvalSend.deliver).toBe(false);
+    expect(typeof approvalSend.idempotencyKey).toBe("string");
+    expect(await currentPage.locator(".chat-queue").count()).toBe(0);
+    expect(await composer.inputValue()).toBe("");
+    expect(await currentPage.getByRole("button", { name: "Stop generating" }).count()).toBe(1);
+  });
 });
diff --git a/ui/src/pages/chat/chat-send.test.ts b/ui/src/pages/chat/chat-send.test.ts
@@ -2199,6 +2199,40 @@ describe("handleSendChat", () => {
     expect(host.chatMessage).toBe("/btw what changed?");
   });
 
+  it("sends /approve immediately while a main run is waiting without queueing it", async () => {
+    const request = vi.fn(async (method: string) => {
+      if (method === "chat.send") {
+        return { status: "started" };
+      }
+      throw new Error(`Unexpected request: ${method}`);
+    });
+    const host = makeHost({
+      client: { request } as unknown as ChatHost["client"],
+      chatRunId: "run-main",
+      chatStream: "Waiting for approval...",
+      chatMessage: "/approve approval-123 allow-once",
+    });
+
+    await handleSendChat(host);
+
+    const payload = findRequestPayload(
+      request as unknown as MockCallSource,
+      "chat.send",
+      "approval command payload",
+    );
+    expect(payload.sessionKey).toBe("agent:main");
+    expect(payload.message).toBe("/approve approval-123 allow-once");
+    expect(payload.deliver).toBe(false);
+    expect(payload.idempotencyKey).toEqual(expect.stringMatching(uuidPattern));
+    expect(host.chatQueue).toStrictEqual([]);
+    expect(host.chatRunId).toBe("run-main");
+    expect(host.chatStream).toBe("Waiting for approval...");
+    expect(host.chatMessages).toStrictEqual([]);
+    expect(host.chatMessage).toBe("");
+    expect(navigateChatInputHistory(host, "up")).toBe(true);
+    expect(host.chatMessage).toBe("/approve approval-123 allow-once");
+  });
+
   it("sends /side through the detached BTW path", async () => {
     const request = vi.fn(async (method: string) => {
       if (method === "chat.send") {
diff --git a/ui/src/pages/chat/chat-send.ts b/ui/src/pages/chat/chat-send.ts
@@ -856,7 +856,7 @@ function attachmentSubmitSignature(attachment: ChatAttachment): string {
 
 function chatSubmitKey(
   host: ChatHost,
-  kind: "btw" | "message",
+  kind: "detached" | "message",
   message: string,
   attachments: ChatAttachment[],
   skillWorkshopRevision?: ChatQueueSkillWorkshopRevision,
@@ -948,7 +948,7 @@ function snapshotChatAttachments(attachments: readonly ChatAttachment[]): ChatAt
   });
 }
 
-async function sendDetachedBtwMessage(
+async function sendDetachedCommandMessage(
   host: ChatHost,
   message: string,
   opts?: {
@@ -1153,8 +1153,13 @@ export async function handleSendChat(
       return;
     }
 
-    if (isBtwCommand(message)) {
-      const submitKey = chatSubmitKey(host, "btw", message, attachmentsToSend);
+    const parsed = parseSlashCommand(message);
+    // The backend resolves /approve before active-run admission. Send it now so
+    // the approval command cannot queue behind the run that is waiting for it.
+    const shouldSendDetachedCommand =
+      isBtwCommand(message) || (parsed?.command.key === "approve" && isChatBusy(host));
+    if (shouldSendDetachedCommand) {
+      const submitKey = chatSubmitKey(host, "detached", message, attachmentsToSend);
       await withChatSubmitGuard(host, submitKey, async () => {
         const modelSwitchReady = waitForPendingChatModelSwitch(host, submittedSessionKey);
         if (modelSwitchReady !== true && !(await modelSwitchReady)) {
@@ -1170,7 +1175,7 @@ export async function handleSendChat(
         if (messageOverride == null) {
           recordNonTranscriptInputHistory(host, message);
         }
-        await sendDetachedBtwMessage(host, message, {
+        await sendDetachedCommandMessage(host, message, {
           previousDraft: cleared.previousDraft,
           attachments: hasAttachments ? attachmentsToSend : undefined,
           previousAttachments: cleared.previousAttachments,
@@ -1180,7 +1185,6 @@ export async function handleSendChat(
     }
 
     // Intercept local slash commands (/status, /model, /compact, etc.)
-    const parsed = parseSlashCommand(message);
     if (parsed?.command.executeLocal) {
       if (isChatBusy(host) && shouldQueueLocalSlashCommand(parsed.command.key)) {
         if (messageOverride == null) {
