fix(ui): keep control ui refresh responsive

BunsDev · web-flow · commit 5ae385b2f0f1 · 2026-05-07T22:02:35.000-05:00
Summary: - Keep Control UI chat refresh usable while history and secondary metadata refreshes are slow, with an explicit history-await path for manual refresh. - Let config and channel tabs render cheap/stale snapshots before slow schema or probe work finishes, then request updates when background refreshes settle. - Bound large chat render pressure to the last 100 history messages and preserve slow-render/long-frame instrumentation for follow-up tuning. - Add regression coverage for non-blocking refreshes, manual refresh completion, background update callbacks, and the 100-message render cap. Verification: - pnpm test ui/src/ui/app-chat.test.ts ui/src/ui/app-render.helpers.node.test.ts ui/src/ui/app-settings.refresh-active-tab.node.test.ts ui/src/ui/control-ui-performance.test.ts ui/src/ui/controllers/chat.test.ts ui/src/ui/chat/build-chat-items.test.ts - pnpm exec oxfmt --check --threads=1 CHANGELOG.md ui/src/ui/app-chat.ts ui/src/ui/app-chat.test.ts ui/src/ui/app-render.helpers.ts ui/src/ui/app-render.helpers.node.test.ts ui/src/ui/app-render.ts ui/src/ui/app-settings.ts ui/src/ui/app-settings.refresh-active-tab.node.test.ts ui/src/ui/chat/build-chat-items.ts ui/src/ui/chat/build-chat-items.test.ts ui/src/ui/chat/history-limits.ts - git diff --check origin/main..HEAD && git diff --check - GitHub CI on exact head 53295ae: all required checks passed
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -133,6 +133,7 @@ Docs: https://docs.openclaw.ai
 - Plugins/runtime state: add `registerIfAbsent` for atomic keyed-store dedupe claims that return whether a plugin successfully claimed a key without overwriting an existing live value. Thanks @amknight.
 - Exec approvals: add a tree-sitter-backed shell command explainer for future approval and command-review surfaces. (#75004) Thanks @jesse-merhi.
 - Control UI/performance: record browser long animation frame or long task entries in the debug event log when supported, making slow dashboard renders easier to attribute from the UI.
+- Control UI/performance: keep chat, config, and channel refreshes responsive by decoupling slow history/schema/status work, reducing the client history window, and logging over-budget chat/config renders. Refs #77060, #45698, #47979, #44107. Thanks @BunsDev.
 - Gateway/diagnostics: add startup phase spans, active work labels, stale terminal bridge markers, and opt-in sync-I/O tracing in `pnpm gateway:watch` so slow Gateway turns are easier to attribute from logs and stability diagnostics.
 - QA/Codex harness: add targeted live Docker/Testbox diagnostics, auth preflight checks, cache mount fixes, and app-server protocol checkout discovery so maintainer harness failures are easier to reproduce. Thanks @vincentkoc.
 - QA/Mantis: add `pnpm openclaw qa mantis slack-desktop-smoke` to run Slack live QA inside a Crabbox VNC desktop, open Slack Web, and capture desktop screenshots beside the Slack QA artifacts.
diff --git a/ui/src/ui/app-chat.test.ts b/ui/src/ui/app-chat.test.ts
@@ -142,6 +142,77 @@ function createDeferred<T>() {
   return { promise, resolve, reject };
 }
 
+describe("refreshChat", () => {
+  beforeAll(async () => {
+    await loadChatHelpers();
+  });
+
+  it("dispatches chat refresh work without waiting for slow history or secondary RPCs", async () => {
+    const request = vi.fn(() => new Promise<unknown>(() => undefined));
+    const requestUpdate = vi.fn();
+    const host = makeHost({
+      client: { request } as unknown as ChatHost["client"],
+      sessionKey: "main",
+      requestUpdate,
+    });
+
+    const refresh = refreshChat(host);
+    const outcome = await Promise.race([
+      refresh.then(() => "resolved" as const),
+      new Promise<"pending">((resolve) => setTimeout(() => resolve("pending"), 0)),
+    ]);
+
+    expect(outcome).toBe("resolved");
+    expect(host.chatLoading).toBe(true);
+    expect(request).toHaveBeenCalledWith("chat.history", {
+      sessionKey: "main",
+      limit: 100,
+      maxChars: 4000,
+    });
+    expect(request).toHaveBeenCalledWith("models.list", { view: "configured" });
+    expect(request).toHaveBeenCalledWith("commands.list", {
+      agentId: "main",
+      includeArgs: true,
+      scope: "text",
+    });
+    expect(requestUpdate).not.toHaveBeenCalled();
+  });
+
+  it("can wait for history without waiting for secondary metadata refreshes", async () => {
+    const history = createDeferred<unknown>();
+    const requestUpdate = vi.fn();
+    const request = vi.fn((method: string) => {
+      if (method === "chat.history") {
+        return history.promise;
+      }
+      return new Promise<unknown>(() => undefined);
+    });
+    const host = makeHost({
+      client: { request } as unknown as ChatHost["client"],
+      sessionKey: "main",
+      requestUpdate,
+    });
+
+    const refresh = refreshChat(host, { awaitHistory: true, scheduleScroll: false });
+    const pendingOutcome = await Promise.race([
+      refresh.then(() => "resolved" as const),
+      new Promise<"pending">((resolve) => setTimeout(() => resolve("pending"), 0)),
+    ]);
+
+    expect(pendingOutcome).toBe("pending");
+    history.resolve({
+      messages: [{ role: "assistant", content: [{ type: "text", text: "ready" }] }],
+    });
+
+    await expect(refresh).resolves.toBeUndefined();
+    expect(host.chatMessages).toEqual([
+      { role: "assistant", content: [{ type: "text", text: "ready" }] },
+    ]);
+    expect(request).toHaveBeenCalledWith("models.list", { view: "configured" });
+    expect(requestUpdate).toHaveBeenCalled();
+  });
+});
+
 describe("refreshChatAvatar", () => {
   beforeAll(async () => {
     await loadChatHelpers();
diff --git a/ui/src/ui/app-chat.ts b/ui/src/ui/app-chat.ts
@@ -66,6 +66,7 @@ export type ChatHost = ChatInputHistoryState & {
   chatModelCatalog: ModelCatalogEntry[];
   sessionsResult?: SessionsListResult | null;
   updateComplete?: Promise<unknown>;
+  requestUpdate?: () => void;
   refreshSessionsAfterChat: Set<string>;
   pendingAbort?: { runId?: string | null; sessionKey: string } | null;
   chatSubmitGuards?: Map<string, Promise<void>>;
@@ -745,8 +746,18 @@ function injectCommandResult(host: ChatHost, content: string) {
   ];
 }
 
-export async function refreshChat(host: ChatHost, opts?: { scheduleScroll?: boolean }) {
-  void Promise.allSettled([
+export async function refreshChat(
+  host: ChatHost,
+  opts?: { scheduleScroll?: boolean; awaitHistory?: boolean },
+) {
+  const requestUpdate = () => host.requestUpdate?.();
+  const historyRefresh = loadChatHistory(host as unknown as ChatState).finally(() => {
+    if (opts?.scheduleScroll !== false) {
+      scheduleChatScroll(host as unknown as Parameters<typeof scheduleChatScroll>[0]);
+    }
+    requestUpdate();
+  });
+  const secondaryRefresh = Promise.allSettled([
     loadSessions(host as unknown as SessionsState, {
       activeMinutes: 0,
       limit: 0,
@@ -756,11 +767,14 @@ export async function refreshChat(host: ChatHost, opts?: { scheduleScroll?: bool
     refreshChatAvatar(host),
     refreshChatModels(host),
     refreshChatCommands(host),
-  ]);
-  await loadChatHistory(host as unknown as ChatState);
-  if (opts?.scheduleScroll !== false) {
-    scheduleChatScroll(host as unknown as Parameters<typeof scheduleChatScroll>[0]);
+  ]).finally(requestUpdate);
+  void historyRefresh;
+  void secondaryRefresh;
+  if (opts?.awaitHistory === true) {
+    await historyRefresh;
+    return;
   }
+  await Promise.resolve();
 }
 
 async function refreshChatModels(host: ChatHost) {
diff --git a/ui/src/ui/app-render.helpers.node.test.ts b/ui/src/ui/app-render.helpers.node.test.ts
@@ -37,6 +37,7 @@ vi.mock("./controllers/sessions.ts", () => ({
 import {
   createChatSession,
   dismissChatError,
+  handleChatManualRefresh,
   isCronSessionKey,
   parseSessionKey,
   resolveAssistantAttachmentAuthToken,
@@ -647,6 +648,64 @@ describe("resolveSessionOptionGroups", () => {
   });
 });
 
+describe("handleChatManualRefresh", () => {
+  it("waits for chat history before scrolling and clearing refresh state", async () => {
+    const animationFrame = { callback: undefined as FrameRequestCallback | undefined };
+    const previousRequestAnimationFrame = globalThis.requestAnimationFrame;
+    Object.defineProperty(globalThis, "requestAnimationFrame", {
+      configurable: true,
+      value: vi.fn((callback: FrameRequestCallback) => {
+        animationFrame.callback = callback;
+        return 1;
+      }),
+    });
+    try {
+      let resolveRefresh!: () => void;
+      refreshChatMock.mockReturnValueOnce(
+        new Promise<void>((resolve) => {
+          resolveRefresh = resolve;
+        }),
+      );
+      const state = {
+        chatManualRefreshInFlight: false,
+        chatNewMessagesBelow: true,
+        updateComplete: Promise.resolve(),
+        resetToolStream: vi.fn(),
+        scrollToBottom: vi.fn(),
+      } as unknown as Parameters<typeof handleChatManualRefresh>[0];
+
+      const run = handleChatManualRefresh(state);
+      await Promise.resolve();
+
+      expect(state.scrollToBottom).not.toHaveBeenCalled();
+      resolveRefresh();
+      await run;
+
+      expect(refreshChatMock).toHaveBeenCalledWith(state, {
+        awaitHistory: true,
+        scheduleScroll: false,
+      });
+      expect(state.scrollToBottom).toHaveBeenCalledWith({ smooth: true });
+      expect(state.chatManualRefreshInFlight).toBe(true);
+      expect(animationFrame.callback).toBeTypeOf("function");
+
+      const callback = animationFrame.callback;
+      if (!callback) {
+        throw new Error("expected manual refresh to schedule a frame callback");
+      }
+      callback(0);
+
+      expect(state.chatManualRefreshInFlight).toBe(false);
+      expect(state.chatNewMessagesBelow).toBe(false);
+    } finally {
+      Object.defineProperty(globalThis, "requestAnimationFrame", {
+        configurable: true,
+        value: previousRequestAnimationFrame,
+      });
+    }
+  });
+});
+
 describe("createChatSession", () => {
   it("creates a dashboard session, switches to it, and preserves the current composer", async () => {
     const state = createChatSessionState();
diff --git a/ui/src/ui/app-render.helpers.ts b/ui/src/ui/app-render.helpers.ts
@@ -49,6 +49,25 @@ type ChatRefreshHost = AppViewState & {
   updateComplete?: Promise<unknown>;
 };
 
+export async function handleChatManualRefresh(state: ChatRefreshHost): Promise<void> {
+  state.chatManualRefreshInFlight = true;
+  state.chatNewMessagesBelow = false;
+  await state.updateComplete;
+  state.resetToolStream();
+  try {
+    await refreshChat(state as unknown as Parameters<typeof refreshChat>[0], {
+      awaitHistory: true,
+      scheduleScroll: false,
+    });
+    state.scrollToBottom({ smooth: true });
+  } finally {
+    requestAnimationFrame(() => {
+      state.chatManualRefreshInFlight = false;
+      state.chatNewMessagesBelow = false;
+    });
+  }
+}
+
 export function resolveAssistantAttachmentAuthToken(
   state: Pick<AppViewState, "hello" | "settings" | "password">,
 ) {
@@ -315,24 +334,7 @@ export function renderChatControls(state: AppViewState) {
       <button
         class="btn btn--sm btn--icon"
         ?disabled=${refreshDisabled}
-        @click=${async () => {
-          const app = state as unknown as ChatRefreshHost;
-          app.chatManualRefreshInFlight = true;
-          app.chatNewMessagesBelow = false;
-          await app.updateComplete;
-          app.resetToolStream();
-          try {
-            await refreshChat(state as unknown as Parameters<typeof refreshChat>[0], {
-              scheduleScroll: false,
-            });
-            app.scrollToBottom({ smooth: true });
-          } finally {
-            requestAnimationFrame(() => {
-              app.chatManualRefreshInFlight = false;
-              app.chatNewMessagesBelow = false;
-            });
-          }
-        }}
+        @click=${() => handleChatManualRefresh(state as unknown as ChatRefreshHost)}
         title=${refreshLabel}
         aria-label=${refreshLabel}
         data-tooltip=${refreshLabel}
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
@@ -981,7 +981,9 @@ export function renderApp(state: AppViewState) {
       "config",
       {
         tab: state.tab,
+        formMode: overrides.formMode,
         activeSection: overrides.activeSection,
+        activeSubsection: overrides.activeSubsection,
         schemaSectionCount: countTopLevelSchemaProperties(commonConfigProps.schema),
         hasSearch: Boolean(overrides.searchQuery?.trim()),
       },
@@ -2456,7 +2458,7 @@ export function renderApp(state: AppViewState) {
                   onRefresh: () => {
                     state.chatSideResult = null;
                     state.resetToolStream();
-                    return refreshChat(state, { scheduleScroll: false });
+                    return refreshChat(state, { awaitHistory: true, scheduleScroll: false });
                   },
                   onToggleFocusMode: () => {
                     if (state.onboarding) {
diff --git a/ui/src/ui/app-settings.refresh-active-tab.node.test.ts b/ui/src/ui/app-settings.refresh-active-tab.node.test.ts
@@ -12,7 +12,7 @@ const mocks = vi.hoisted(() => ({
   loadAgentIdentityMock: vi.fn(async () => {}),
   loadAgentSkillsMock: vi.fn(async () => {}),
   loadAgentsMock: vi.fn(async () => {}),
-  loadChannelsMock: vi.fn(async () => {}),
+  loadChannelsMock: vi.fn<(_host: unknown, _probe: boolean) => Promise<void>>(async () => {}),
   loadConfigMock: vi.fn(async () => {}),
   loadConfigSchemaMock: vi.fn(async () => {}),
   loadCronStatusMock: vi.fn(async () => {}),
@@ -241,6 +241,71 @@ describe("refreshActiveTab", () => {
     expect(mocks.loadUsageMock).toHaveBeenCalled();
   });
 
+  it("does not wait for config schema before resolving config tab refresh", async () => {
+    const host = createHost();
+    host.tab = "config";
+    let resolveSchema!: () => void;
+    mocks.loadConfigSchemaMock.mockReturnValueOnce(
+      new Promise<void>((resolve) => {
+        resolveSchema = resolve;
+      }),
+    );
+
+    const refresh = refreshActiveTab(host as never);
+    const outcome = await Promise.race([
+      refresh.then(() => "resolved" as const),
+      new Promise<"pending">((resolve) => setTimeout(() => resolve("pending"), 0)),
+    ]);
+
+    expect(outcome).toBe("resolved");
+    expect(mocks.loadConfigSchemaMock).toHaveBeenCalledOnce();
+    expect(mocks.loadConfigMock).toHaveBeenCalledOnce();
+    expect(host.requestUpdate).not.toHaveBeenCalled();
+
+    resolveSchema();
+
+    await vi.waitFor(() => {
+      expect(host.requestUpdate).toHaveBeenCalledOnce();
+    });
+  });
+
+  it("renders channels from the cheap snapshot before starting slow probes", async () => {
+    const host = createHost();
+    host.tab = "channels";
+    let resolveSchema!: () => void;
+    let resolveProbe!: () => void;
+    mocks.loadConfigSchemaMock.mockReturnValueOnce(
+      new Promise<void>((resolve) => {
+        resolveSchema = resolve;
+      }),
+    );
+    mocks.loadChannelsMock.mockImplementation(async (_host, probe) => {
+      if (probe) {
+        await new Promise<void>((resolve) => {
+          resolveProbe = resolve;
+        });
+      }
+    });
+
+    const refresh = refreshActiveTab(host as never);
+    const outcome = await Promise.race([
+      refresh.then(() => "resolved" as const),
+      new Promise<"pending">((resolve) => setTimeout(() => resolve("pending"), 0)),
+    ]);
+
+    expect(outcome).toBe("resolved");
+    expect(mocks.loadChannelsMock.mock.calls.map(([, probe]) => probe)).toEqual([false, true]);
+    expect(mocks.loadConfigMock).toHaveBeenCalledOnce();
+    expect(host.requestUpdate).not.toHaveBeenCalled();
+
+    resolveSchema();
+    resolveProbe();
+
+    await vi.waitFor(() => {
+      expect(host.requestUpdate).toHaveBeenCalledTimes(2);
+    });
+  });
+
   it("records overview secondary refresh duration and aggregate status", async () => {
     const host = createHost();
     host.tab = "overview";
diff --git a/ui/src/ui/app-settings.ts b/ui/src/ui/app-settings.ts
@@ -357,7 +357,7 @@ export async function refreshActiveTab(host: SettingsHost) {
       case "automation":
       case "infrastructure":
       case "aiAgents":
-        await loadConfigSchema(app);
+        void loadConfigSchema(app).finally(() => host.requestUpdate?.());
         await loadConfig(app);
         break;
       case "overview":
@@ -837,11 +837,9 @@ function buildAttentionItems(host: SettingsAppHost) {
 
 export async function loadChannelsTab(host: SettingsHost) {
   const app = host as unknown as SettingsAppHost;
-  await Promise.all([
-    loadChannels(app, true, { softTimeoutMs: 750 }),
-    loadConfigSchema(app),
-    loadConfig(app),
-  ]);
+  void loadConfigSchema(app).finally(() => host.requestUpdate?.());
+  await Promise.all([loadChannels(app, false), loadConfig(app)]);
+  void loadChannels(app, true).finally(() => host.requestUpdate?.());
 }
 
 export async function loadCron(host: SettingsHost) {
diff --git a/ui/src/ui/chat/build-chat-items.test.ts b/ui/src/ui/chat/build-chat-items.test.ts
diff --git a/ui/src/ui/chat/build-chat-items.ts b/ui/src/ui/chat/build-chat-items.ts
diff --git a/ui/src/ui/chat/history-limits.ts b/ui/src/ui/chat/history-limits.ts
