Preserve chat scroll position across workspace switches (#2838)

* fix(app): preserve chat scroll across workspace switches Hidden retained panels can emit geometry-driven scroll events while collapsed, which previously looked like user intent and disabled output following. Keep the retained DOM mounted, suspend its inactive scroll work, and only detach from the bottom after explicit input. * fix(app): classify chat scroll intent at input A held pointer is not evidence that a geometry-driven scroll was user initiated. Detach output following directly from upward wheel, key, touch, or mouse-drag input, and keep ordinary scroll events responsible only for metrics and bottom reattachment. * fix(app): keep editing keys out of scroll intent Question inputs render inside the chat viewport, so their caret-navigation keys bubble through the same keyboard boundary. Treat keys from editable descendants as editing intent while preserving viewport-level keyboard scrolling. * fix(app): exclude zoom gestures from scroll intent Ctrl-wheel and trackpad pinch events can carry a negative wheel delta without scrolling chat content. Keep those browser zoom gestures from disabling output following. * fix(app): require pointer-driven chat movement Mouse movement alone is not viewport scroll intent. Correlate actual upward scroll with short-lived content-drag evidence or a scrollbar-gutter gesture, while excluding embedded editors and retaining geometry-only following. * fix(app): recognize overlay chat scrollbars * fix(app): scope scroll intent to chat viewport * fix(app): rearm chat history at scroll start * fix(app): track chat autoscroll intent * fix(app): separate pointer scroll gestures
2026-08-03 23:08:11 +02:00
parent 777fe968f5
commit f25e68b8cc
6 changed files with 968 additions and 55 deletions
@@ -0,0 +1,236 @@
+import { expect, type Page } from "@playwright/test";
+import { test } from "../support/fixtures";
+import {
+  readScrollMetrics,
+  scrollChatAwayFromBottom,
+} from "../support/helpers/agent-bottom-anchor";
+import { getServerId } from "../support/helpers/server-id";
+import { seedMockAgentWorkspace, type MockAgentWorkspace } from "../support/helpers/mock-agent";
+import {
+  continueToNextQuestion,
+  fillQuestionAnswer,
+  submitQuestionAnswers,
+  waitForQuestionPrompt,
+} from "../support/helpers/questions";
+import { openMobileAgentSidebar } from "../support/helpers/sidebar";
+import {
+  expectTimelinePromptVisible,
+  openAgentTimeline,
+  seedLongMockAgentTimeline,
+} from "../support/helpers/timeline-pagination";
+import { switchWorkspaceViaSidebar } from "../support/helpers/workspace-ui";
+
+async function expectChatAtBottom(page: Page): Promise<void> {
+  await expect
+    .poll(async () => (await readScrollMetrics(page)).distanceFromBottom, {
+      timeout: 10_000,
+    })
+    .toBeLessThanOrEqual(72);
+}
+
+async function openCompactWorkspace(
+  page: Page,
+  workspace: Pick<MockAgentWorkspace, "workspaceId">,
+): Promise<void> {
+  await openMobileAgentSidebar(page);
+  await switchWorkspaceViaSidebar({
+    page,
+    serverId: getServerId(),
+    workspaceId: workspace.workspaceId,
+  });
+}
+
+function armDelayedScrollForHiddenChat(page: Page): Promise<void> {
+  return page
+    .locator('[data-testid="agent-chat-scroll"]:visible')
+    .first()
+    .evaluate((root) => {
+      const scroll = root as HTMLElement;
+      return new Promise<void>((resolve) => {
+        const observer = new ResizeObserver(() => {
+          if (scroll.getClientRects().length > 0) return;
+          observer.disconnect();
+          scroll.dispatchEvent(new Event("scroll"));
+          resolve();
+        });
+        observer.observe(scroll);
+      });
+    });
+}
+
+test("pointer jitter cannot turn geometry changes into scroll intent", async ({ page }) => {
+  test.setTimeout(240_000);
+  const longChat = await seedLongMockAgentTimeline({ turns: 30 });
+  const backgroundPrompt = "Continue after a pointer is released outside the chat";
+
+  try {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openAgentTimeline(page, longChat);
+    await expectTimelinePromptVisible(page, longChat.newestPrompt);
+    await expectChatAtBottom(page);
+
+    const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+    const bounds = await scroll.boundingBox();
+    expect(bounds, "Expected visible chat scroll bounds").not.toBeNull();
+    await page.mouse.move(bounds!.x + bounds!.width / 2, bounds!.y + bounds!.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(bounds!.x + bounds!.width / 2, bounds!.y + bounds!.height / 2 - 3);
+    await page.setViewportSize({ width: 390, height: 1124 });
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.mouse.move(410, bounds!.y + bounds!.height / 2 - 3);
+    await page.mouse.up();
+
+    await longChat.client.sendAgentMessage(longChat.agentId, backgroundPrompt);
+    await longChat.client.waitForFinish(longChat.agentId, 20_000);
+    await expectTimelinePromptVisible(page, backgroundPrompt);
+    await expectChatAtBottom(page);
+  } finally {
+    await longChat.cleanup();
+  }
+});
+
+test("a retained chat ignores delayed scroll delivery while hidden", async ({ page }) => {
+  test.setTimeout(240_000);
+  const longChat = await seedLongMockAgentTimeline({ turns: 30 });
+  const otherWorkspace = await seedMockAgentWorkspace({
+    repoPrefix: "scroll-return-hidden-other-",
+    title: "Other workspace",
+    initialPrompt: "Open the other workspace",
+  });
+  const backgroundPrompt = "emit 500 coalesced agent stream updates";
+
+  try {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openAgentTimeline(page, longChat);
+    await expectTimelinePromptVisible(page, longChat.newestPrompt);
+    await expectChatAtBottom(page);
+
+    const delayedScrollDelivered = armDelayedScrollForHiddenChat(page);
+    await openCompactWorkspace(page, otherWorkspace);
+    await delayedScrollDelivered;
+    await longChat.client.sendAgentMessage(longChat.agentId, backgroundPrompt);
+    await longChat.client.waitForFinish(longChat.agentId, 20_000);
+
+    await openCompactWorkspace(page, longChat);
+    await expectTimelinePromptVisible(page, backgroundPrompt);
+    await expectChatAtBottom(page);
+  } finally {
+    await Promise.allSettled([longChat.cleanup(), otherWorkspace.cleanup()]);
+  }
+});
+
+test("a retained streaming chat returns to the bottom and continues following", async ({
+  page,
+}) => {
+  test.setTimeout(240_000);
+  const longChat = await seedLongMockAgentTimeline({ turns: 30 });
+  const otherWorkspace = await seedMockAgentWorkspace({
+    repoPrefix: "scroll-return-streaming-other-",
+    title: "Other workspace",
+    initialPrompt: "Open the other workspace",
+  });
+  const streamingPrompt = "Continue streaming while this workspace is hidden";
+
+  try {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openAgentTimeline(page, longChat);
+    await expectTimelinePromptVisible(page, longChat.newestPrompt);
+    await expectChatAtBottom(page);
+
+    await longChat.client.sendAgentMessage(longChat.agentId, streamingPrompt);
+    await longChat.client.waitForAgentUpsert(
+      longChat.agentId,
+      (snapshot) => snapshot.status === "running",
+      15_000,
+    );
+    await openCompactWorkspace(page, otherWorkspace);
+    await openCompactWorkspace(page, longChat);
+
+    await expectTimelinePromptVisible(page, streamingPrompt);
+    await expectChatAtBottom(page);
+    await longChat.client.waitForFinish(longChat.agentId, 20_000);
+    await expectChatAtBottom(page);
+  } finally {
+    await Promise.allSettled([longChat.cleanup(), otherWorkspace.cleanup()]);
+  }
+});
+
+test("a retained chat preserves an intentional reading position", async ({ page }) => {
+  test.setTimeout(240_000);
+  const longChat = await seedLongMockAgentTimeline({ turns: 30 });
+  const otherWorkspace = await seedMockAgentWorkspace({
+    repoPrefix: "scroll-return-reading-position-other-",
+    title: "Other workspace",
+    initialPrompt: "Open the other workspace",
+  });
+
+  try {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openAgentTimeline(page, longChat);
+    await expectTimelinePromptVisible(page, longChat.newestPrompt);
+    const readingPosition = await scrollChatAwayFromBottom(page, {
+      deltaY: -900,
+      minDistanceFromBottom: 300,
+    });
+
+    await openCompactWorkspace(page, otherWorkspace);
+    await openCompactWorkspace(page, longChat);
+
+    await expect
+      .poll(async () => Math.abs((await readScrollMetrics(page)).offsetY - readingPosition.offsetY))
+      .toBeLessThanOrEqual(24);
+  } finally {
+    await Promise.allSettled([longChat.cleanup(), otherWorkspace.cleanup()]);
+  }
+});
+
+test("editing keys in an embedded question keep output following", async ({ page }) => {
+  test.setTimeout(240_000);
+  const longChat = await seedLongMockAgentTimeline({ turns: 30 });
+  const questionPrompt = "Emit synthetic questions: two free-write questions.";
+  const firstQuestion = "What is the GitHub private repo URL to push to?";
+  const secondQuestion = "What should the first commit message be?";
+
+  try {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openAgentTimeline(page, longChat);
+    await expectTimelinePromptVisible(page, longChat.newestPrompt);
+    await expectChatAtBottom(page);
+
+    await longChat.client.sendAgentMessage(longChat.agentId, questionPrompt);
+    await waitForQuestionPrompt(page, 30_000);
+    await fillQuestionAnswer(page, {
+      question: firstQuestion,
+      answer: "git@github.com:user/private-repo.git",
+    });
+    const firstInput = page
+      .getByTestId("question-form-card")
+      .first()
+      .getByRole("textbox", { name: firstQuestion });
+    const inputBounds = await firstInput.boundingBox();
+    expect(inputBounds, "Expected embedded question input bounds").not.toBeNull();
+    await page.mouse.move(
+      inputBounds!.x + inputBounds!.width / 2,
+      inputBounds!.y + inputBounds!.height / 2,
+    );
+    await page.mouse.down();
+    await page.mouse.move(
+      inputBounds!.x + inputBounds!.width / 2 + 20,
+      inputBounds!.y + inputBounds!.height / 2 - 3,
+    );
+    await page.mouse.up();
+    await firstInput.press("Home");
+    await firstInput.press("ArrowUp");
+    await continueToNextQuestion(page);
+    await fillQuestionAnswer(page, {
+      question: secondQuestion,
+      answer: "Initialize private repo",
+    });
+    await submitQuestionAnswers(page);
+    await longChat.client.waitForFinish(longChat.agentId, 20_000);
+
+    await expectChatAtBottom(page);
+  } finally {
+    await longChat.cleanup();
+  }
+});