fix(ui): prevent false busy state in Control UI webchat

bladin · bladin · commit 9ac52a86f974 · 2026-06-09T12:18:59.000+08:00
- Added showLocalAbortableUi to gate busy UI on actual stream activity - Only show in-progress badge and Stop button when there is active stream or sending - Added e2e test for stale session state not forcing busy UI - Added unit tests for idle composer with stale session state and active stream Fixes #87387
diff --git a/ui/src/ui/e2e/chat-flow.e2e.test.ts b/ui/src/ui/e2e/chat-flow.e2e.test.ts
@@ -32,6 +32,17 @@ function requireString(value: unknown, label: string): string {
   return value;
 }
 
+async function waitForUiFrame(page: Page): Promise<void> {
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => resolve());
+        });
+      }),
+  );
+}
+
 async function waitForRequests(
   gateway: Awaited<ReturnType<typeof installMockGateway>>,
   method: string,
@@ -880,4 +891,65 @@ describeControlUiE2e("Control UI mocked Gateway E2E", () => {
       await context.close();
     }
   });
+
+  it("returns to idle when stale active session state arrives after completion", async () => {
+    const context = await browser.newContext({
+      locale: "en-US",
+      serviceWorkers: "block",
+      viewport: { height: 900, width: 1280 },
+    });
+    const page = await context.newPage();
+    const gateway = await installMockGateway(page, {
+      historyMessages: [
+        {
+          content: [{ text: "Ready for stale-state proof.", type: "text" }],
+          role: "assistant",
+          timestamp: Date.now(),
+        },
+      ],
+    });
+
+    try {
+      await page.goto(`${server.baseUrl}chat`);
+      await page.getByText("Ready for stale-state proof.").waitFor({ timeout: 10_000 });
+      await page.getByRole("button", { name: "Send message" }).waitFor({ timeout: 10_000 });
+
+      const prompt = "complete and stay idle";
+      await page.locator(".agent-chat__composer-combobox textarea").fill(prompt);
+      await page.getByRole("button", { name: "Send message" }).click();
+
+      const sendRequest = await gateway.waitForRequest("chat.send");
+      const params = requireRecord(sendRequest.params);
+      const runId = requireString(params.idempotencyKey, "chat send idempotency key");
+      await gateway.emitChatFinal({ runId, text: "Completed without a stuck composer." });
+
+      await page.getByText("Completed without a stuck composer.").waitFor({ timeout: 10_000 });
+      await page.locator(".agent-chat__run-status--done").waitFor({ timeout: 10_000 });
+      await page
+        .locator(".agent-chat__run-status--done")
+        .waitFor({ state: "hidden", timeout: 7_000 });
+
+      await gateway.emitGatewayEvent("sessions.changed", {
+        hasActiveRun: true,
+        key: "main",
+        kind: "direct",
+        sessionKey: "main",
+        status: "running",
+        updatedAt: Date.now(),
+      });
+      await waitForUiFrame(page);
+
+      await page
+        .locator(".agent-chat__run-status--in-progress")
+        .waitFor({ state: "hidden", timeout: 2_000 });
+      await page.getByRole("button", { name: "Stop generating" }).waitFor({
+        state: "hidden",
+        timeout: 2_000,
+      });
+      await page.getByRole("button", { name: "Send message" }).waitFor({ timeout: 2_000 });
+      expect(await page.getByRole("button", { name: "Queue message" }).count()).toBe(0);
+    } finally {
+      await context.close();
+    }
+  });
 });
diff --git a/ui/src/ui/views/chat.test.ts b/ui/src/ui/views/chat.test.ts
@@ -1228,6 +1228,62 @@ describe("chat loading skeleton", () => {
       nowSpy.mockRestore();
     }
   });
+
+  it("keeps stale abortable session rows from forcing idle composer busy UI", () => {
+    const container = renderChatView({
+      canAbort: true,
+      messages: [
+        {
+          role: "assistant",
+          content: "Finished answer",
+          timestamp: 1,
+        },
+      ],
+      queue: [{ id: "queued-1", text: "follow up", createdAt: 2 }],
+      sessions: {
+        ts: 0,
+        path: "",
+        count: 1,
+        defaults: { modelProvider: null, model: null, contextTokens: 200_000 },
+        sessions: [
+          {
+            key: "main",
+            kind: "direct",
+            updatedAt: null,
+            hasActiveRun: true,
+            status: "running",
+            totalTokens: 190_000,
+            contextTokens: 200_000,
+          },
+        ],
+      },
+      onCompact: () => undefined,
+      onQueueSteer: () => undefined,
+    });
+
+    expect(container.querySelector(".agent-chat__run-status--in-progress")).toBeNull();
+    expect(container.querySelector(".chat-reading-indicator")).toBeNull();
+    expect(container.querySelector(".chat-send-btn--stop")).toBeNull();
+    expect(container.querySelector(".chat-queue__steer")).toBeNull();
+    const sendButton = container.querySelector<HTMLButtonElement>(".chat-send-btn");
+    expect(sendButton?.getAttribute("aria-label")).toBe("Send message");
+    expect(sendButton?.textContent?.trim()).toBe("Send");
+  });
+
+  it("keeps abort controls visible while a local stream is active", () => {
+    const container = renderChatView({
+      canAbort: true,
+      stream: "",
+      queue: [{ id: "queued-1", text: "follow up", createdAt: 2 }],
+      onQueueSteer: () => undefined,
+    });
+
+    expect(container.querySelector(".agent-chat__run-status--in-progress")?.textContent).toContain(
+      "In progress",
+    );
+    expect(container.querySelector(".chat-send-btn--stop")?.textContent?.trim()).toBe("Stop");
+    expect(container.querySelector(".chat-queue__steer")?.textContent?.trim()).toBe("Steer");
+  });
 });
 
 describe("chat voice controls", () => {
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
@@ -1570,7 +1570,10 @@ export function renderChat(props: ChatProps) {
   const isBusy = props.sending || props.stream !== null;
   const canAbort = Boolean(props.canAbort && props.onAbort);
   const showAbortableUi = canAbort && !hasTerminalRunStatus(props.runStatus);
-  const composerRunStatus = showAbortableUi ? { phase: "in-progress" as const } : props.runStatus;
+  const showLocalAbortableUi = showAbortableUi && isBusy;
+  const composerRunStatus = showLocalAbortableUi
+    ? { phase: "in-progress" as const }
+    : props.runStatus;
   const compactBusy =
     props.compactionStatus?.phase === "active" || props.compactionStatus?.phase === "retrying";
   const activeSession = props.sessions?.sessions?.find((row) => row.key === props.sessionKey);
@@ -2081,7 +2084,7 @@ export function renderChat(props: ChatProps) {
 
       ${renderChatQueue({
         queue: props.queue,
-        canAbort: showAbortableUi,
+        canAbort: showLocalAbortableUi,
         onQueueRetry: props.onQueueRetry,
         onQueueSteer: props.onQueueSteer,
         onQueueRemove: props.onQueueRemove,
@@ -2232,7 +2235,7 @@ export function renderChat(props: ChatProps) {
             ? html`<div class="agent-chat__composer-controls">${composerControls}</div>`
             : nothing}
           ${renderChatRunControls({
-            canAbort: showAbortableUi,
+            canAbort: showLocalAbortableUi,
             connected: props.connected,
             draft: visibleDraft,
             hasMessages: props.messages.length > 0,
