perf(desktop): bound rendering within oversized turns

apps/desktop/e2e/fixtures.ts

@@ -483,7 +483,9 @@ async function withE2eWindow(
     });
     let page: Page;
     try {
-      page = await app.firstWindow();
+      // Parallel CI workers and cold Windows hosts can finish process launch
+      // before the first BrowserWindow crosses Playwright's 30s default.
+      page = await app.firstWindow({ timeout: 60_000 });
     } catch (error) {
       const detail = error instanceof Error ? error.message : String(error);
       const logs = mainLogs.length > 0 ? `\nElectron main console:\n${mainLogs.join('\n')}` : '';
@@ -514,7 +516,12 @@ async function withE2eWindow(
     try {
       if (app) await closeElectronApplication(app, 5_000);
     } finally {
-      await rm(userDataDir, { recursive: true, force: true });
+      await rm(userDataDir, {
+        recursive: true,
+        force: true,
+        maxRetries: 5,
+        retryDelay: 100,
+      });
     }
   }
 }
@@ -572,6 +579,8 @@ type E2eTestFixtures = {
   railRenderWindow: Page;
   promptRailWindow: Page;
   partialHistoryWindow: Page;
+  oversizedTurnWindow: Page;
+  promptRailMotionWindow: Page;
   requestHeaderRowWindow: Page;
   newTaskTargetWindow: Page;
   directoryReferenceWindow: { page: Page; folder: string };
@@ -763,6 +772,39 @@ export const test = base.extend<E2eTestFixtures, E2eWorkerFixtures>({
       showWindow: true,
     }, use);
   },
+  // One Turn larger than the transcript byte budget. Shown because the test
+  // reads Chromium's actual content-visibility state while crossing it.
+  oversizedTurnWindow: async ({}, use) => {
+    await withE2eWindow({
+      seed: false,
+      readinessSelector: '[data-turn-id="turn-oversized-fixture"]',
+      e2eFixtureScenario: 'chat-oversized-turn',
+      locale: 'zh',
+      showWindow: true,
+    }, use);
+  },
+  // The same transcript, scrolling the way the shipped app scrolls. Separate
+  // from `promptRailWindow` because it is only the jump that needs a scroll
+  // still in flight, and paying for one everywhere costs several seconds per
+  // window and settles less predictably.
+  promptRailMotionWindow: async ({}, use) => {
+    await withE2eWindow({
+      seed: false,
+      // The transcript and the fixture attributes arrive on two unordered
+      // async paths: `runDeferredStartupRefreshes` fires `refreshSessions()`
+      // and `applyE2eFixture()` side by side, and only the second one — after
+      // its `e2eFixture.getState()` IPC resolves — writes
+      // `data-maka-scroll-motion`. A turn can therefore paint while the
+      // document still says nothing about scroll motion. Requiring both in one
+      // selector is what makes "this window scrolls smoothly" true by the time
+      // a test body reads it.
+      readinessSelector: 'html[data-maka-scroll-motion="smooth"] [data-turn-id]',
+      e2eFixtureScenario: 'chat-prompt-rail',
+      locale: 'zh',
+      showWindow: true,
+      scrollMotion: 'smooth',
+    }, use);
+  },
   // Settings → 模型, where `no-models` is the seeded openai-compatible relay —
   // the connection type whose detail page owns the custom request headers
   // editor. Shown, because what this window is for is a rendered box

apps/desktop/e2e/native-transcript-perf.spec.ts

@@ -24,8 +24,13 @@ import { ensureSidebarExpanded, expect, test } from './fixtures';
 
 const PERF_ENABLED = process.env.MAKA_TRANSCRIPT_PERF === '1';
 const STRESS_ENABLED = process.env.MAKA_TRANSCRIPT_STRESS === '1';
+// Long-animation-frame delivery includes the native compositor. Xvfb's
+// software/virtual display is useful for functional E2E, but is not comparable
+// to the macOS arm64 environment in which this release threshold was measured.
+const NATIVE_MACOS_ARM64_PERF_GATE = process.platform === 'darwin' && process.arch === 'arm64';
 const performanceTest = PERF_ENABLED ? test : test.skip;
 const stressTest = STRESS_ENABLED ? test : test.skip;
+const nativePerformanceTest = PERF_ENABLED && NATIVE_MACOS_ARM64_PERF_GATE ? test : test.skip;
 const SCROLLER = '[data-chat-scroll-container="true"]';
 
 interface BrowserCounters {
@@ -323,6 +328,53 @@ performanceTest('warm native transcript scroll metrics', async ({ promptRailWind
   console.log(`TRANSCRIPT_PERF ${JSON.stringify(result)}`);
 });
 
+nativePerformanceTest('oversized single Turn upward scroll metrics', async ({
+  oversizedTurnWindow: page,
+}) => {
+  test.setTimeout(90_000);
+  await page.setViewportSize({ width: 1_000, height: 700 });
+  await expect(page.locator('[data-turn-id="turn-oversized-fixture"]')).toHaveCount(1);
+  const cdp = await page.context().newCDPSession(page);
+  await cdp.send('Performance.enable');
+  await prepareFrameRecorder(page);
+  await moveToTail(page);
+  const distance = await page.evaluate((selector) => {
+    const root = document.querySelector<HTMLElement>(selector);
+    if (!root) throw new Error('the chat scroll container is missing');
+    return root.scrollHeight - root.clientHeight;
+  }, SCROLLER);
+  const before = await performanceMetrics(cdp);
+  const frames = await scrollGesture(page, -distance, 480);
+  const after = await performanceMetrics(cdp);
+  const skippedSegments = await page.locator('[data-maka-transcript-boundary]').evaluateAll((elements) =>
+    (elements as HTMLElement[]).filter((element) =>
+      !element.checkVisibility({ contentVisibilityAuto: true })).length,
+  );
+  const result = {
+    distance,
+    taskMs: metricDelta(before, after, 'TaskDuration') * 1_000,
+    layoutMs: metricDelta(before, after, 'LayoutDuration') * 1_000,
+    recalcStyleMs: metricDelta(before, after, 'RecalcStyleDuration') * 1_000,
+    frameP95Ms: percentile(frames.intervals, 0.95),
+    frameP99Ms: percentile(frames.intervals, 0.99),
+    frameMaxMs: Math.max(...frames.intervals),
+    loafOver50Ms: frames.loafDurations.filter((duration) => duration > 50).length,
+    loafMaxMs: Math.max(0, ...frames.loafDurations),
+    loafSupported: frames.loafSupported,
+    skippedSegments,
+  };
+  console.log(`OVERSIZED_TURN_PERF ${JSON.stringify(result)}`);
+  expect(
+    frames.loafSupported,
+    'Chromium does not support the long-animation-frame release metric',
+  ).toBe(true);
+  expect(
+    result.loafOver50Ms,
+    `oversized-Turn upward scroll exceeded the 50 ms Long Animation Frame gate: ${JSON.stringify(result)}`,
+  ).toBe(0);
+  expect(result.skippedSegments).toBeGreaterThan(0);
+});
+
 stressTest('600+ Turn repeated paging keeps the active range on a memory plateau', async ({
   promptRailWindow: page,
 }) => {

apps/desktop/e2e/oversized-turn-render.spec.ts

@@ -0,0 +1,247 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { expect, test } from './fixtures';
+
+const SEGMENT = '[data-maka-transcript-boundary]';
+const SCROLLER = '[data-chat-scroll-container="true"]';
+
+async function waitForPaintedFrames(page: import('@playwright/test').Page, frames = 4) {
+  await page.evaluate(async (count) => {
+    for (let frame = 0; frame < count; frame += 1) {
+      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    }
+  }, frames);
+}
+
+async function waitForStableScrollGeometry(page: import('@playwright/test').Page) {
+  await page.evaluate(async (selector) => {
+    const root = document.querySelector<HTMLElement>(selector);
+    if (!root) throw new Error('the chat scroll container is missing');
+    let previous = '';
+    let stableFrames = 0;
+    for (let frame = 0; frame < 60; frame += 1) {
+      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+      const current = [root.scrollTop, root.scrollHeight, root.clientHeight].join(':');
+      if (current === previous) stableFrames += 1;
+      else stableFrames = 0;
+      if (stableFrames >= 4) return;
+      previous = current;
+    }
+    throw new Error('transcript scroll geometry did not settle');
+  }, SCROLLER);
+}
+
+test('an oversized single Turn skips offscreen timeline blocks', async ({
+  oversizedTurnWindow: page,
+}) => {
+  await page.setViewportSize({ width: 900, height: 700 });
+  const segments = page.locator(SEGMENT);
+  await expect(segments).not.toHaveCount(0);
+  expect(await segments.count()).toBeGreaterThan(80);
+
+  const state = await segments.evaluateAll((elements) => {
+    const rows = elements as HTMLElement[];
+    return {
+      automatic: rows.filter((element) =>
+        getComputedStyle(element).contentVisibility === 'auto').length,
+      skipped: rows.filter((element) =>
+        !element.checkVisibility({ contentVisibilityAuto: true })).length,
+    };
+  });
+  expect(state.automatic).toBe(await segments.count());
+  expect(state.skipped).toBeGreaterThan(0);
+
+  const first = segments.first();
+  await first.evaluate((element) => element.scrollIntoView({ block: 'center' }));
+  await page.evaluate(() => new Promise<void>((resolve) =>
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+  ));
+  expect(await first.evaluate((element) =>
+    element.checkVisibility({ contentVisibilityAuto: true }),
+  )).toBe(true);
+});
+
+test('upward scrolling releases the live tail while skipped geometry materializes', async ({
+  oversizedTurnWindow: page,
+}) => {
+  await page.setViewportSize({ width: 900, height: 700 });
+  const root = page.locator(SCROLLER);
+  await root.evaluate((element) => {
+    element.scrollTop = element.scrollHeight;
+  });
+  await waitForPaintedFrames(page);
+
+  const atTail = await root.evaluate((element) =>
+    element.scrollHeight - element.scrollTop - element.clientHeight,
+  );
+  expect(atTail).toBeLessThanOrEqual(4);
+
+  // Force the ordering from the field report: the wheel begins materializing
+  // an intrinsic-size block before Chromium delivers the resulting scroll.
+  // Appending below the reader is deterministic synthetic growth; approaching
+  // the skipped timeline blocks above adds the real content-visibility change.
+  await root.evaluate((element) => {
+    const list = element.querySelector('.maka-chat-message-list');
+    if (!list) throw new Error('the transcript content box is missing');
+    element.addEventListener('wheel', () => {
+      const growth = document.createElement('div');
+      growth.dataset.oversizedTurnGrowth = 'true';
+      growth.style.height = '600px';
+      list.append(growth);
+    }, { capture: true, once: true });
+  });
+
+  await root.hover();
+  await page.mouse.wheel(0, -500);
+  await waitForPaintedFrames(page, 6);
+  await waitForStableScrollGeometry(page);
+
+  const released = await root.evaluate((element) => {
+    const rootRect = element.getBoundingClientRect();
+    const center = (rootRect.top + rootRect.bottom) / 2;
+    const anchor = [...element.querySelectorAll<HTMLElement>('[data-maka-transcript-boundary]')]
+      .filter((candidate) => {
+        const rect = candidate.getBoundingClientRect();
+        return rect.bottom > rootRect.top && rect.top < rootRect.bottom;
+      })
+      .sort((left, right) => {
+        const leftRect = left.getBoundingClientRect();
+        const rightRect = right.getBoundingClientRect();
+        return Math.abs((leftRect.top + leftRect.bottom) / 2 - center)
+          - Math.abs((rightRect.top + rightRect.bottom) / 2 - center);
+      })[0];
+    if (!anchor) throw new Error('the reader scroll has no visible reading anchor');
+    anchor.dataset.readingAnchor = 'true';
+    return {
+      distance: element.scrollHeight - element.scrollTop - element.clientHeight,
+    };
+  });
+  expect(released.distance).toBeGreaterThan(100);
+
+  // A later delivery must preserve the released position too. Without the
+  // release, the scroll authority writes the latest tail on this resize.
+  await root.evaluate((element) => {
+    const growth = element.querySelector<HTMLElement>('[data-oversized-turn-growth]');
+    if (!growth) throw new Error('the synthetic growth box is missing');
+    growth.style.height = '900px';
+  });
+  await waitForPaintedFrames(page);
+  await waitForStableScrollGeometry(page);
+
+  const afterGrowth = await root.evaluate((element) => {
+    const rootRect = element.getBoundingClientRect();
+    const anchor = element.querySelector<HTMLElement>('[data-reading-anchor]');
+    const anchorRect = anchor?.getBoundingClientRect();
+    return {
+      distance: element.scrollHeight - element.scrollTop - element.clientHeight,
+      anchorVisible: anchorRect != null
+        && anchorRect.bottom > rootRect.top
+        && anchorRect.top < rootRect.bottom,
+    };
+  });
+  expect(afterGrowth.distance).toBeGreaterThan(released.distance);
+  expect(afterGrowth.anchorVisible).toBe(true);
+});
+
+test('PageUp releases the live tail while skipped geometry materializes', async ({
+  oversizedTurnWindow: page,
+}) => {
+  await page.setViewportSize({ width: 900, height: 700 });
+  const root = page.locator(SCROLLER);
+  await root.evaluate((element) => {
+    element.scrollTop = element.scrollHeight;
+  });
+  await waitForPaintedFrames(page);
+
+  await root.evaluate((element) => {
+    const list = element.querySelector('.maka-chat-message-list');
+    if (!list) throw new Error('the transcript content box is missing');
+    // The production scroller carries no tabindex, so `event.target === root`
+    // is unreachable there. A real PageUp is dispatched from a focused control
+    // inside the list and reaches the handler through
+    // `event.target.closest('.maka-chat-message-list')`. Focus a visible card
+    // header to exercise that path instead of focusing the scroller itself.
+    const rootRect = element.getBoundingClientRect();
+    const header = [...element.querySelectorAll<HTMLElement>(
+      '.maka-tool-activity-card [role="button"][tabindex="0"]',
+    )].find((candidate) => {
+      const boundary = candidate.closest<HTMLElement>('[data-maka-transcript-boundary]');
+      const rect = candidate.getBoundingClientRect();
+      return boundary?.checkVisibility({ contentVisibilityAuto: true })
+        && rect.top >= rootRect.top
+        && rect.bottom <= rootRect.bottom;
+    });
+    if (!header) throw new Error('the visible tool-card header is missing');
+    header.focus({ preventScroll: true });
+    element.addEventListener('keydown', (event) => {
+      if (event.key !== 'PageUp') return;
+      const growth = document.createElement('div');
+      growth.dataset.keyboardGrowth = 'true';
+      growth.style.height = '600px';
+      list.append(growth);
+    }, { capture: true, once: true });
+  });
+
+  await page.keyboard.press('PageUp');
+  await waitForPaintedFrames(page, 6);
+  await waitForStableScrollGeometry(page);
+  const released = await root.evaluate((element) => {
+    const rootRect = element.getBoundingClientRect();
+    const center = (rootRect.top + rootRect.bottom) / 2;
+    const anchor = [...element.querySelectorAll<HTMLElement>('[data-maka-transcript-boundary]')]
+      .filter((candidate) => {
+        const rect = candidate.getBoundingClientRect();
+        return rect.bottom > rootRect.top && rect.top < rootRect.bottom;
+      })
+      .sort((left, right) => {
+        const leftRect = left.getBoundingClientRect();
+        const rightRect = right.getBoundingClientRect();
+        return Math.abs((leftRect.top + leftRect.bottom) / 2 - center)
+          - Math.abs((rightRect.top + rightRect.bottom) / 2 - center);
+      })[0];
+    if (!anchor) throw new Error('the keyboard scroll has no visible reading anchor');
+    anchor.dataset.readingAnchor = 'true';
+    return {
+      distance: element.scrollHeight - element.scrollTop - element.clientHeight,
+    };
+  });
+  expect(released.distance).toBeGreaterThan(100);
+
+  await root.evaluate((element) => {
+    const growth = element.querySelector<HTMLElement>('[data-keyboard-growth]');
+    if (!growth) throw new Error('the keyboard growth box is missing');
+    growth.style.height = '900px';
+  });
+  await waitForPaintedFrames(page);
+  await waitForStableScrollGeometry(page);
+  const afterGrowth = await root.evaluate((element) => {
+    const rootRect = element.getBoundingClientRect();
+    const anchor = element.querySelector<HTMLElement>('[data-reading-anchor]');
+    const anchorRect = anchor?.getBoundingClientRect();
+    return {
+      distance: element.scrollHeight - element.scrollTop - element.clientHeight,
+      anchorVisible: anchorRect != null
+        && anchorRect.bottom > rootRect.top
+        && anchorRect.top < rootRect.bottom,
+    };
+  });
+  expect(afterGrowth.distance).toBeGreaterThan(released.distance);
+  expect(afterGrowth.anchorVisible).toBe(true);
+});