Fix older timeline loading after catch-up

2026-06-03 22:32:12 +07:00
parent b510244518
commit 6d29092fe6
4 changed files with 200 additions and 1 deletions
@@ -0,0 +1,28 @@
+import { test } from "./fixtures";
+import {
+  expectTimelinePromptNotMounted,
+  expectTimelinePromptVisible,
+  openAgentTimeline,
+  scrollTimelineUntilOlderHistoryIsReachable,
+  seedLongMockAgentTimeline,
+} from "./helpers/timeline-pagination";
+
+test.describe("Agent timeline pagination", () => {
+  test("loads older history when the user scrolls to the top of a long agent timeline", async ({
+    page,
+  }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
+    try {
+      await openAgentTimeline(page, agent);
+      await expectTimelinePromptVisible(page, agent.newestPrompt);
+      await expectTimelinePromptNotMounted(page, agent.oldestPrompt);
+
+      await scrollTimelineUntilOlderHistoryIsReachable(page);
+
+      await expectTimelinePromptVisible(page, agent.oldestPrompt);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+});
@@ -0,0 +1,102 @@
+import { expect, type Page } from "@playwright/test";
+import { buildAgentRoute, seedMockAgentWorkspace, type MockAgentWorkspace } from "./mock-agent";
+
+interface LongTimelineAgentOptions {
+  turns: number;
+}
+
+interface LongTimelineAgent extends MockAgentWorkspace {
+  oldestPrompt: string;
+  newestPrompt: string;
+}
+
+const PROMPT_PREFIX = "timeline-pagination-turn";
+
+function promptForTurn(index: number): string {
+  return `${PROMPT_PREFIX}-${index}: emit 1 coalesced agent stream updates`;
+}
+
+export async function seedLongMockAgentTimeline(
+  options: LongTimelineAgentOptions,
+): Promise<LongTimelineAgent> {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "timeline-pagination-",
+    title: "Timeline pagination regression",
+    model: "ten-second-stream",
+  });
+
+  for (let index = 0; index < options.turns; index += 1) {
+    await agent.client.sendAgentMessage(agent.agentId, promptForTurn(index));
+    await agent.client.waitForFinish(agent.agentId, 15_000);
+  }
+
+  return {
+    ...agent,
+    oldestPrompt: promptForTurn(0),
+    newestPrompt: promptForTurn(options.turns - 1),
+  };
+}
+
+export async function openAgentTimeline(page: Page, agent: LongTimelineAgent): Promise<void> {
+  await page.goto(buildAgentRoute(agent.cwd, agent.agentId));
+  await page.waitForURL(
+    (url) => url.pathname.includes("/workspace/") && !url.searchParams.has("open"),
+    { timeout: 60_000 },
+  );
+}
+
+export async function expectTimelinePromptVisible(page: Page, prompt: string): Promise<void> {
+  await expect(page.getByText(prompt, { exact: true })).toBeVisible({ timeout: 30_000 });
+}
+
+export async function expectTimelinePromptNotMounted(page: Page, prompt: string): Promise<void> {
+  await expect(page.getByText(prompt, { exact: true })).toHaveCount(0);
+}
+
+export async function scrollTimelineToOldestLoadedEdge(page: Page): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await scroll.hover();
+  await page.mouse.wheel(0, -20_000);
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      }),
+  );
+  await scroll.evaluate((element) => {
+    if (!(element instanceof HTMLElement)) {
+      throw new Error("Agent chat scroll element is not an HTMLElement");
+    }
+    element.scrollTop = 0;
+    element.dispatchEvent(new Event("scroll", { bubbles: true }));
+  });
+}
+
+export async function scrollTimelineUntilOlderHistoryIsReachable(page: Page): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  const previousHeight = await scroll.evaluate((element) => {
+    if (!(element instanceof HTMLElement)) {
+      throw new Error("Agent chat scroll element is not an HTMLElement");
+    }
+    return element.scrollHeight;
+  });
+
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      }),
+  );
+  await scrollTimelineToOldestLoadedEdge(page);
+  await expect
+    .poll(async () =>
+      scroll.evaluate((element) => {
+        if (!(element instanceof HTMLElement)) {
+          throw new Error("Agent chat scroll element is not an HTMLElement");
+        }
+        return element.scrollHeight;
+      }),
+    )
+    .toBeGreaterThan(previousHeight);
+  await scrollTimelineToOldestLoadedEdge(page);
+}