Preserve chat scroll-away after delayed history

packages/app/e2e/helpers/agent-bottom-anchor.ts

@@ -1,6 +1,7 @@
 import { expect, type Page } from "@playwright/test";
 
 const NEAR_BOTTOM_THRESHOLD_PX = 72;
+const DEFAULT_SCROLL_TOLERANCE_PX = 24;
 
 export interface ScrollMetrics {
   offsetY: number;
@@ -66,3 +67,65 @@ export async function waitForContentGrowth(
     .toBeGreaterThan(previousContentHeight);
   return readScrollMetrics(page);
 }
+
+export async function waitForScrollableChat(
+  page: Page,
+  input: { minScrollableDistance: number; timeout?: number },
+): Promise<void> {
+  await expect
+    .poll(
+      async () => {
+        const metrics = await readScrollMetrics(page);
+        return metrics.contentHeight - metrics.viewportHeight;
+      },
+      { timeout: input.timeout },
+    )
+    .toBeGreaterThan(input.minScrollableDistance);
+}
+
+export async function scrollChatAwayFromBottom(
+  page: Page,
+  input: { deltaY: number; minDistanceFromBottom: number },
+): Promise<ScrollMetrics> {
+  const scroll = getVisibleChatScroll(page);
+  const box = await scroll.boundingBox();
+  if (!box) {
+    throw new Error("Agent chat scroll container is not visible");
+  }
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.wheel(0, input.deltaY);
+
+  await expect
+    .poll(async () => {
+      const metrics = await readScrollMetrics(page);
+      return metrics.distanceFromBottom;
+    })
+    .toBeGreaterThan(input.minDistanceFromBottom);
+
+  return readScrollMetrics(page);
+}
+
+export async function expectScrollStaysFixed(
+  page: Page,
+  baseline: ScrollMetrics,
+  input?: { durationMs?: number; sampleIntervalMs?: number; tolerancePx?: number },
+): Promise<void> {
+  const durationMs = input?.durationMs ?? 2_000;
+  const sampleIntervalMs = input?.sampleIntervalMs ?? 250;
+  const tolerancePx = input?.tolerancePx ?? DEFAULT_SCROLL_TOLERANCE_PX;
+  const samples: Array<{ elapsedMs: number; offsetY: number; contentHeight: number }> = [];
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < durationMs) {
+    await page.waitForTimeout(sampleIntervalMs);
+    const metrics = await readScrollMetrics(page);
+    samples.push({
+      elapsedMs: Date.now() - startedAt,
+      offsetY: metrics.offsetY,
+      contentHeight: metrics.contentHeight,
+    });
+    expect(
+      metrics.offsetY,
+      JSON.stringify({ baseline, samples: samples.slice(-12) }),
+    ).toBeLessThanOrEqual(baseline.offsetY + tolerancePx);
+  }
+}

packages/app/e2e/helpers/agent-timeline-gate.ts

@@ -0,0 +1,120 @@
+import type { Page } from "@playwright/test";
+import { daemonWsRoutePattern } from "./daemon-port";
+
+type WebSocketMessage = string | Buffer;
+
+interface CreatedAgentTimelineGate {
+  release(): void;
+  waitForCreatedAgent(): Promise<string>;
+  waitForDelayedResponse(): Promise<void>;
+  waitForForwardedResponse(): Promise<void>;
+}
+
+function parseWebSocketJson(message: WebSocketMessage): unknown {
+  const rawMessage = typeof message === "string" ? message : message.toString("utf8");
+  try {
+    return JSON.parse(rawMessage);
+  } catch {
+    return null;
+  }
+}
+
+function getSessionMessage(message: WebSocketMessage): Record<string, unknown> | null {
+  const envelope = parseWebSocketJson(message);
+  if (!envelope || typeof envelope !== "object") {
+    return null;
+  }
+  const maybeEnvelope = envelope as { type?: unknown; message?: unknown };
+  if (maybeEnvelope.type !== "session" || !maybeEnvelope.message) {
+    return null;
+  }
+  if (typeof maybeEnvelope.message !== "object") {
+    return null;
+  }
+  return maybeEnvelope.message as Record<string, unknown>;
+}
+
+function getPayload(message: Record<string, unknown>): Record<string, unknown> | null {
+  return message.payload && typeof message.payload === "object"
+    ? (message.payload as Record<string, unknown>)
+    : null;
+}
+
+export async function delayCreatedAgentInitialTailResponse(
+  page: Page,
+): Promise<CreatedAgentTimelineGate> {
+  let createdAgentId: string | null = null;
+  let releaseRequested = false;
+  let delayedResponseSeen = false;
+  const delayedForwards: Array<() => void> = [];
+  let resolveCreatedAgent: ((agentId: string) => void) | null = null;
+  let resolveDelayedResponse: (() => void) | null = null;
+  let resolveForwardedResponse: (() => void) | null = null;
+  const createdAgentSeen = new Promise<string>((resolve) => {
+    resolveCreatedAgent = resolve;
+  });
+  const delayedResponse = new Promise<void>((resolve) => {
+    resolveDelayedResponse = resolve;
+  });
+  const forwardedResponse = new Promise<void>((resolve) => {
+    resolveForwardedResponse = resolve;
+  });
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+    const forwardToClient = (message: WebSocketMessage) => {
+      ws.send(message);
+      resolveForwardedResponse?.();
+    };
+
+    ws.onMessage((message) => {
+      server.send(message);
+    });
+
+    server.onMessage((message) => {
+      const sessionMessage = getSessionMessage(message);
+      const payload = sessionMessage ? getPayload(sessionMessage) : null;
+      if (sessionMessage?.type === "status" && payload?.status === "agent_created") {
+        const agentId = payload.agentId;
+        if (typeof agentId === "string") {
+          createdAgentId = agentId;
+          resolveCreatedAgent?.(agentId);
+        }
+      }
+
+      if (sessionMessage?.type === "fetch_agent_timeline_response") {
+        const agentId = payload?.agentId;
+        const direction = payload?.direction;
+        if (
+          !delayedResponseSeen &&
+          typeof agentId === "string" &&
+          agentId === createdAgentId &&
+          direction === "tail"
+        ) {
+          delayedResponseSeen = true;
+          resolveDelayedResponse?.();
+          if (releaseRequested) {
+            forwardToClient(message);
+            return;
+          }
+          delayedForwards.push(() => forwardToClient(message));
+          return;
+        }
+      }
+
+      ws.send(message);
+    });
+  });
+
+  return {
+    release() {
+      releaseRequested = true;
+      for (const forward of delayedForwards.splice(0)) {
+        forward();
+      }
+    },
+    waitForCreatedAgent: () => createdAgentSeen,
+    waitForDelayedResponse: () => delayedResponse,
+    waitForForwardedResponse: () => forwardedResponse,
+  };
+}

packages/app/e2e/helpers/app.ts

@@ -342,9 +342,17 @@ export const selectModel = async (page: Page, model: string) => {
   if (await modelTrigger.isVisible().catch(() => false)) {
     await modelTrigger.click();
   } else {
-    const modelLabel = page.getByText("MODEL", { exact: true }).first();
-    await expect(modelLabel).toBeVisible();
-    await modelLabel.click();
+    const modelButton = page
+      .getByRole("button", { name: /Select model/i })
+      .filter({ visible: true })
+      .first();
+    if (await modelButton.isVisible().catch(() => false)) {
+      await modelButton.click();
+    } else {
+      const modelLabel = page.getByText("MODEL", { exact: true }).first();
+      await expect(modelLabel).toBeVisible();
+      await modelLabel.click();
+    }
   }
 
   // Wait for the model dropdown to open