test(server): isolate timeline fetch responsiveness from runner work (#8197)

* test(server): isolate timeline fetch responsiveness from runner work

Measure the existing cold tail workload in a separate process after fixture collection. Keep the 50ms gate and row assertions, and reproduce unrelated callback CPU contaminating the old measurement.

* test(server): keep timeline probe private and exercise overlapping CPU

---------

Co-authored-by: paseo-bot[bot] <266920839+paseo-bot[bot]@users.noreply.github.com>

docs/unistyles.md

@@ -358,6 +358,14 @@ export to `src`, but browser and Electron Metro resolve its `browser` export to
 `lib/module`; CommonJS consumers use `lib/commonjs`. A source-only patch leaves
 Electron running the old code.
 
+The adaptive-theme patch keeps `colorScheme` reads off the media-query lists
+owned by Unistyles' change listeners. Chromium defers their events while a window
+is hidden; reading `matches` on those same lists can consume the pending change.
+CSS variables then follow the OS theme while `withUnistyles` props retain the old
+colors. Keep this patch until upstream reads the scheme through separate lists.
+The desktop browser E2E checks both transition directions in an isolated Electron
+process, because Playwright's focus emulation prevents real hidden-page behavior.
+
 Register every dependency patch in `scripts/postinstall-patches.mjs`. A file in
 `patches/` is inert unless that script knows which installed package activates
 it.

packages/desktop/e2e/appearance-theme.electron.mjs

@@ -0,0 +1,158 @@
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+import electronPath from "electron";
+import { build } from "esbuild";
+
+export async function runAdaptiveThemeRegression(artifactDir) {
+  const { outputFiles } = await build({
+    stdin: {
+      resolveDir: fileURLToPath(new URL("../../app", import.meta.url)),
+      contents: `
+        import { createElement } from "react";
+        import { createRoot } from "react-dom/client";
+        import { StyleSheet, UnistylesRuntime, withUnistyles } from "react-native-unistyles";
+        StyleSheet.configure({
+          themes: {
+            dark: { foreground: "#fafafa", background: "#181b1a" },
+            light: { foreground: "#1a1a1e", background: "#ffffff" },
+          },
+          settings: { adaptiveThemes: true },
+        });
+        const Message = withUnistyles(({ color }) =>
+          createElement("p", { style: { color } }, "Theme-reactive message"));
+        createRoot(document.getElementById("root")).render(createElement(Message, {
+          style: { margin: 0 },
+          uniProps: theme => ({ color: theme.foreground }),
+        }));
+        window.readThemeForTest = () => UnistylesRuntime.themeName;
+      `,
+    },
+    bundle: true,
+    write: false,
+    format: "iife",
+    platform: "browser",
+    alias: { "react-native": "react-native-web" },
+    define: { __DEV__: "false" },
+    resolveExtensions: [".web.js", ".js", ".json"],
+  });
+  const directory = await fs.mkdtemp(path.join(os.tmpdir(), "paseo-adaptive-theme-"));
+  try {
+    await fs.writeFile(path.join(directory, "renderer.js"), outputFiles[0].text);
+    await fs.writeFile(path.join(directory, "main.cjs"), `(${electronRegression.toString()})()`);
+    // A separate process avoids Playwright's focus emulation, which keeps hidden pages visible.
+    const env = { ...process.env };
+    delete env.ELECTRON_RUN_AS_NODE;
+    const args = [
+      ...(process.platform === "linux" ? ["--no-sandbox"] : []),
+      path.join(directory, "main.cjs"),
+      artifactDir,
+    ];
+    const command = process.platform === "linux" ? "xvfb-run" : electronPath;
+    const commandArgs =
+      process.platform === "linux"
+        ? ["-a", "--server-args=-screen 0 1280x800x24", electronPath, ...args]
+        : args;
+    await promisify(execFile)(command, commandArgs, {
+      env,
+      timeout: 30_000,
+    });
+    return JSON.parse(await fs.readFile(path.join(artifactDir, "adaptive-theme.json"), "utf8"));
+  } finally {
+    await fs.rm(directory, { recursive: true, force: true });
+  }
+}
+
+async function electronRegression() {
+  const { app, BrowserWindow, nativeTheme } = require("electron");
+  const assert = require("node:assert/strict");
+  const files = require("node:fs");
+  const paths = require("node:path");
+  const { setTimeout: delay } = require("node:timers/promises");
+  app.setPath("userData", paths.join(__dirname, "profile"));
+  app.on("window-all-closed", () => {});
+  // Electron keeps Linux's --no-sandbox in argv; the artifact directory is always last.
+  const artifactDir = process.argv.at(-1);
+  let window;
+  const observations = [];
+  const colors = {
+    dark: { foreground: "rgb(250, 250, 250)", background: "rgb(24, 27, 26)" },
+    light: { foreground: "rgb(26, 26, 30)", background: "rgb(255, 255, 255)" },
+  };
+  async function read(expression) {
+    return window.webContents.executeJavaScript(expression);
+  }
+  async function expectValue(expression, expected) {
+    let actual;
+    for (let attempt = 0; attempt < 50; attempt++) {
+      actual = await read(expression);
+      if (actual === expected) return;
+      await delay(50);
+    }
+    assert.equal(actual, expected, expression);
+  }
+  try {
+    await app.whenReady();
+    if (process.platform === "darwin") {
+      app.setActivationPolicy("accessory");
+      app.dock.hide();
+    }
+    for (const [from, to] of [
+      ["dark", "light"],
+      ["light", "dark"],
+    ]) {
+      nativeTheme.themeSource = from;
+      window = new BrowserWindow({ width: 600, height: 200, show: false, skipTaskbar: true });
+      await window.loadURL(
+        "data:text/html," +
+          encodeURIComponent(`<!doctype html>
+        <style>body { background: var(--background); } p { font: 20px system-ui; }</style>
+        <div id="root"></div>`),
+      );
+      await read(files.readFileSync(paths.join(__dirname, "renderer.js"), "utf8"));
+      window.showInactive();
+      const foreground =
+        "document.querySelector('p') && getComputedStyle(document.querySelector('p')).color";
+      const background = "getComputedStyle(document.body).backgroundColor";
+      await expectValue(foreground, colors[from].foreground);
+      await expectValue(background, colors[from].background);
+      window.hide();
+      await expectValue("document.visibilityState", "hidden");
+      nativeTheme.themeSource = to;
+      await expectValue(`matchMedia('(prefers-color-scheme: ${to})').matches`, true);
+      // Reading the public runtime while hidden must not consume the pending theme notification.
+      assert.equal(await read("window.readThemeForTest()"), to);
+      window.showInactive();
+      await expectValue("document.visibilityState", "visible");
+      await expectValue(background, colors[to].background);
+      try {
+        await expectValue(foreground, colors[to].foreground);
+      } finally {
+        files.writeFileSync(
+          paths.join(artifactDir, `theme-${from}-to-${to}.png`),
+          (await window.webContents.capturePage()).toPNG(),
+        );
+      }
+      observations.push({
+        from,
+        to,
+        foreground: await read(foreground),
+        background: await read(background),
+      });
+      window.destroy();
+      window = undefined;
+    }
+    files.writeFileSync(
+      paths.join(artifactDir, "adaptive-theme.json"),
+      JSON.stringify(observations, null, 2),
+    );
+    app.exit(0);
+  } catch (error) {
+    console.error(error);
+    window?.destroy();
+    app.exit(1);
+  }
+}

packages/desktop/e2e/browser-tabs.e2e.mjs

@@ -14,6 +14,7 @@ import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/
 import { chromium } from "playwright";
 import { hideDeveloperToasts } from "../../app/e2e/support/developer-ui.mjs";
 import { runAppearanceFontSizeRegression } from "./appearance-font-size.electron.mjs";
+import { runAdaptiveThemeRegression } from "./appearance-theme.electron.mjs";
 import { runSettingsScrollRegression } from "./settings-scroll.electron.mjs";
 import { runSettingsMemoryRegression } from "./settings-memory.electron.mjs";
 
@@ -1241,6 +1242,7 @@ async function main() {
       return;
     }
 
+    const adaptiveTheme = await runAdaptiveThemeRegression(artifactDir);
     await runAppearanceFontSizeRegression(page);
 
     const callerAgentId = await createCallerAgent(daemonPort);
@@ -1265,7 +1267,12 @@ async function main() {
       artifactDir,
     });
     const pluginLinks = await checkPluginLinks();
-    writeJson(path.join(artifactDir, "result.json"), { ...report, settingsMemory, pluginLinks });
+    writeJson(path.join(artifactDir, "result.json"), {
+      ...report,
+      settingsMemory,
+      pluginLinks,
+      adaptiveTheme,
+    });
     console.log(
       `Browser desktop browser E2E passed: WebContents ${report.originalWebContentsId} remained ${report.finalWebContentsId}; viewport, inactive capture, focus continuity, list, snapshot, click, local-page selectors passed.`,
     );

packages/server/src/server/agent/agent-timeline-store.test.ts

@@ -1,4 +1,6 @@
-import { measureMainThreadWork } from "../../test-utils/main-thread-work.js";
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vitest";
 import { selectReferenceProjectedTimelinePage } from "./test-utils/timeline-page-reference.js";
 import type { AgentTimelineItem } from "./agent-sdk-types.js";
@@ -251,23 +253,52 @@ it("includes transitive tool updates in a contiguous projected tail", () => {
   expect(tail).toMatchObject({ startSeq: 1, endSeq: 6, hasOlder: false });
 });
 
+async function measureTimelineTail(wholeTurns: boolean) {
+  const fixture = fileURLToPath(
+    new URL("./test-utils/timeline-responsiveness.ts", import.meta.url),
+  );
+  const { stdout, stderr } = await promisify(execFile)(
+    process.execPath,
+    ["--expose-gc", "--import", "tsx", fixture, String(wholeTurns)],
+    { timeout: 15_000 },
+  );
+  process.stderr.write(stderr);
+  return JSON.parse(stdout) as {
+    result: ReturnType<InMemoryAgentTimelineStore["fetch"]>;
+    blockingMs: number;
+  };
+}
+
+it("excludes unrelated test-runner CPU from the timeline fetch budget", async () => {
+  let unrelatedWork: ReturnType<typeof setImmediate>;
+  const burnCpu = () => {
+    const threadCpuUsage: (previous?: NodeJS.CpuUsage) => NodeJS.CpuUsage = Reflect.get(
+      process,
+      "threadCpuUsage",
+    );
+    const start = threadCpuUsage();
+    let elapsed: NodeJS.CpuUsage;
+    do {
+      elapsed = threadCpuUsage(start);
+    } while (elapsed.user + elapsed.system < 80_000);
+    unrelatedWork = setImmediate(burnCpu);
+  };
+  unrelatedWork = setImmediate(burnCpu);
+  try {
+    const { result: tail, blockingMs } = await measureTimelineTail(false);
+    expect(tail.rows).toHaveLength(200);
+    expect(tail.startSeq).toBe(99_801);
+    expect(tail.endSeq).toBe(100_000);
+    expect(blockingMs).toBeLessThan(50);
+  } finally {
+    clearImmediate(unrelatedWork);
+  }
+});
+
 it.each([false, true])(
   "serves tail 200 from 100,000 retained rows without stalling the loop (wholeTurns=%s)",
   async (wholeTurns) => {
-    const store = new InMemoryAgentTimelineStore();
-    store.initialize("large");
-    for (let index = 0; index < 100_000; index++) {
-      store.append("large", { type: "user_message", text: String(index) });
-    }
-    const { result: tail, blockingMs } = await measureMainThreadWork(
-      `timeline tail main-thread work (wholeTurns=${wholeTurns})`,
-      () => {
-        let page = store.fetch("large", { limit: 200, wholeTurns });
-        for (let repeat = 1; repeat < 8; repeat++)
-          page = store.fetch("large", { limit: 200, wholeTurns });
-        return page;
-      },
-    );
+    const { result: tail, blockingMs } = await measureTimelineTail(wholeTurns);
     expect(tail.rows).toHaveLength(200);
     expect(tail.startSeq).toBe(99_801);
     expect(tail.endSeq).toBe(100_000);

packages/server/src/server/agent/test-utils/timeline-responsiveness.ts

@@ -0,0 +1,25 @@
+import { setImmediate as nextTurn } from "node:timers/promises";
+import { measureMainThreadWork } from "../../../test-utils/main-thread-work.js";
+import { InMemoryAgentTimelineStore } from "../agent-timeline-store.js";
+
+// Measure a cold fetch on its own thread, without Vitest reporting or callbacks.
+const wholeTurns = process.argv[2] === "true";
+const store = new InMemoryAgentTimelineStore();
+store.initialize("large");
+for (let index = 0; index < 100_000; index++) {
+  store.append("large", { type: "user_message", text: String(index) });
+}
+// Finish fixture allocation and collect its temporary garbage before measuring.
+globalThis.gc!();
+await nextTurn();
+const measured = await measureMainThreadWork(
+  `timeline tail main-thread work (wholeTurns=${wholeTurns})`,
+  () => {
+    let page = store.fetch("large", { limit: 200, wholeTurns });
+    for (let repeat = 1; repeat < 8; repeat++)
+      page = store.fetch("large", { limit: 200, wholeTurns });
+    return page;
+  },
+);
+
+process.stdout.write(JSON.stringify(measured));

patches/react-native-unistyles+3.2.4.patch

@@ -486,3 +486,74 @@ diff --git a/node_modules/react-native-unistyles/lib/commonjs/core/withUnistyles
        ...(narrowedProps.style ? {
          style: styleSecrets.styles
        } : {}),
+diff --git a/node_modules/react-native-unistyles/lib/commonjs/web/runtime.js b/node_modules/react-native-unistyles/lib/commonjs/web/runtime.js
+index 305fa49..5957aa5 100644
+--- a/node_modules/react-native-unistyles/lib/commonjs/web/runtime.js
++++ b/node_modules/react-native-unistyles/lib/commonjs/web/runtime.js
+@@ -35,10 +35,17 @@ class UnistylesRuntime {
+     return this.darkMedia;
+   }
+   get colorScheme() {
++    // Read the scheme through fresh lists, never through lightMedia/darkMedia. Chromium defers
++    // MediaQueryList change events while the document is hidden and drops the pending event
++    // of any list whose `matches` was read before the document became visible again, which
++    // would silence the adaptive-theme listeners registered on those two lists.
++    if ((0, _utils.isServer)()) {
++      return _types.ColorScheme.Unspecified;
++    }
+     switch (true) {
+-      case this.getLightMedia()?.matches:
++      case window.matchMedia('(prefers-color-scheme: light)').matches:
+         return _types.ColorScheme.Light;
+-      case this.getDarkMedia()?.matches:
++      case window.matchMedia('(prefers-color-scheme: dark)').matches:
+         return _types.ColorScheme.Dark;
+       default:
+         return _types.ColorScheme.Unspecified;
+diff --git a/node_modules/react-native-unistyles/lib/module/web/runtime.js b/node_modules/react-native-unistyles/lib/module/web/runtime.js
+index 7f13a06..c487bee 100644
+--- a/node_modules/react-native-unistyles/lib/module/web/runtime.js
++++ b/node_modules/react-native-unistyles/lib/module/web/runtime.js
+@@ -31,10 +31,17 @@ export class UnistylesRuntime {
+     return this.darkMedia;
+   }
+   get colorScheme() {
++    // Read the scheme through fresh lists, never through lightMedia/darkMedia. Chromium defers
++    // MediaQueryList change events while the document is hidden and drops the pending event
++    // of any list whose `matches` was read before the document became visible again, which
++    // would silence the adaptive-theme listeners registered on those two lists.
++    if (isServer()) {
++      return ColorScheme.Unspecified;
++    }
+     switch (true) {
+-      case this.getLightMedia()?.matches:
++      case window.matchMedia('(prefers-color-scheme: light)').matches:
+         return ColorScheme.Light;
+-      case this.getDarkMedia()?.matches:
++      case window.matchMedia('(prefers-color-scheme: dark)').matches:
+         return ColorScheme.Dark;
+       default:
+         return ColorScheme.Unspecified;
+diff --git a/node_modules/react-native-unistyles/src/web/runtime.ts b/node_modules/react-native-unistyles/src/web/runtime.ts
+index a16dac0..6519858 100644
+--- a/node_modules/react-native-unistyles/src/web/runtime.ts
++++ b/node_modules/react-native-unistyles/src/web/runtime.ts
+@@ -41,8 +41,16 @@ export class UnistylesRuntime {
+     get colorScheme() {
++        // Read the scheme through fresh lists, never through lightMedia/darkMedia. Chromium defers
++        // MediaQueryList change events while the document is hidden and drops the pending event
++        // of any list whose `matches` was read before the document became visible again, which
++        // would silence the adaptive-theme listeners registered on those two lists.
++        if (isServer()) {
++            return ColorScheme.Unspecified
++        }
++
+         switch (true) {
+-            case this.getLightMedia()?.matches:
++            case window.matchMedia('(prefers-color-scheme: light)').matches:
+                 return ColorScheme.Light
+-            case this.getDarkMedia()?.matches:
++            case window.matchMedia('(prefers-color-scheme: dark)').matches:
+                 return ColorScheme.Dark
+             default:
+                 return ColorScheme.Unspecified

scripts/postinstall-patches.mjs

@@ -24,6 +24,7 @@ const patchedPackages = [
   },
   // Registry cleanup: remove after react-native-unistyles ships
   // https://github.com/jpudysz/react-native-unistyles/pull/1203.
+  // Adaptive themes: keep until colorScheme reads no longer consume listener-owned media changes.
   // withUnistyles: also keep the uniProps filter until upstream consumes its control prop.
   {
     nodeModulesPath: "node_modules/react-native-unistyles",