Files
paseo/packages/desktop/e2e/daemon-lifecycle-renderer.electron.mjs
T
Mohamed Boudra 6215e08efe Smooth streaming replies with a continuous left-to-right fade (#4859)
* feat(app): reveal streaming text as one continuous fade front

Streaming assistant text is released by word and every character fades in
over the same 150 ms envelope from a start time owned by the message. Start
times never decrease in reading order, so a line paints as a single front
moving left to right, however the text is chunked. Per-word envelopes with an
internal stagger let the next word's first letter overtake the previous word's
last letter, which read as holes and flashing words at the real frame rate;
100 ms frame strips hid it.

Native renderers receive the fade ranges as a prop on a host view wrapping the
root Text, so ranges and text land in the same Fabric mount transaction. The
earlier binding sent ranges through a separate async module call keyed by view
tag and had to reconcile them against the view's text; on a fast phone the UI
thread lags JS by several commits, mounts and calls interleave, and every
reconciliation heuristic guessed wrong. Native code no longer infers newness
or creates start times.

The mock load-test provider now separates cycles with a blank line so a cycle
heading is not appended to the previous paragraph.

* fix(ci): refresh streaming dependencies and isolate E2E setup

* test(app): distinguish fade cleanup from Markdown replacement

* test(app): detect restarted fades during Markdown updates

* docs(app): keep streaming guidance focused on constraints and QA

* test(app): control animation time in Android fade assertions

Fixed wall-clock sleeps let emulator scheduling select the sampled animation frame. Inject the animator time source and drive paint at exact timestamps within one UI-thread operation; production keeps the system clock. Verify the mid-fade sample and the exact cleanup boundary without sleeps, polling, or retries.

* fix(test): compile the desktop renderer before lifecycle checks

The lifecycle fixture treated Metro /status as app readiness. Its first
Settings click therefore spent its 90-second UI budget compiling the cold
bundle. An isolated cold-cache run restricted to one CPU reproduced the
click timeout before the app runtime had loaded.

Reuse the browser suite's existing bundle warmup before launching Electron,
and preserve Metro output in the lifecycle artifacts. The UI timeout,
build-request timeout, lifecycle assertions and product behavior are unchanged.

CI did not preserve Metro output, so its precise startup timing is not
recoverable from the failed run. The retained log makes subsequent startup
failures diagnosable without relying only on an empty renderer text dump.

Validation: three complete lifecycle E2E runs under private Xvfb displays;
existing Metro readiness tests; app typecheck; targeted lint; root format.

* test(file-observer): await burst delivery through native recovery

The deletion phase required every event within 10 seconds, but native
coalescing recovery uses a 30-second safety audit followed by the existing
reconciliation debounce. An idle diagnostic excludes that delayed audit
and therefore cannot act as a completion barrier.

Await the required delivered events instead, preserving every deletion
assertion and the existing overall test watchdog. A real-filesystem test
with controlled native notifications reproduces 95 outstanding paths at
the old deadline and verifies completion when the safety audit delivers
them. No production observer behavior changes.

* test(file-observer): verify burst recovery through public events

The controlled-clock regression constructed a private native backend,
bypassing the interface used by consumers. Consolidate recovery coverage
into the public observer integration test instead: drive real writes,
deletes and directory renames, then await every required public event,
including the 450 surviving files at their renamed paths.

No public capability was added: subscribe callbacks already express
completion. No production behavior or test timeout changes.

* test(app): drive Android fade tests through the native host

The instrumentation suite constructed TailFadeInAnimator directly, advanced
its private clock, and counted FadeInSpan instances. It now mounts the
WordFadeHost that React mounts, feeds it the ranges prop the bridge sends,
and asserts rendered pixels: hidden before a start time, a monotone front
inside and across words, settled frames equal to the baseline, and no frame
callbacks left after settling. Span counts and internal timing state are no
longer asserted.

Choreographer cannot be advanced deterministically from a test and the fade
epoch is the message's wall-clock start time, so the host takes a
WordFadeFrameClock (time plus frame callbacks) as its smallest public seam;
production keeps the Choreographer-backed default.

Fixture text is sized in pixels so every sample stays on one line at any
density; at 420 dpi the 32sp fixture wrapped and the column helper summed
glyphs from the first line.
2026-09-15 03:15:24 +02:00

171 lines
6.3 KiB
JavaScript

import { openSync, closeSync } from "node:fs";
import { warmMetro } from "../../app/e2e/support/metro-warmup.mjs";
import { spawn, execFileSync } from "node:child_process";
import { once } from "node:events";
import { writeFile } from "node:fs/promises";
import path from "node:path";
import net from "node:net";
import { _electron as electron, expect } from "playwright/test";
import { readDaemonInstance } from "@getpaseo/server";
// Run under the test's private Xvfb display; native dialog input never targets
// a user's desktop. All daemon operations still cross the real preload/IPC.
export async function verifyAttachedDaemonControls({ repo, root, env, home, port, instance }) {
if (!process.env.DISPLAY)
throw new Error("Renderer lifecycle QA requires a private Xvfb display");
const listener = net.createServer();
await new Promise((resolve) => listener.listen(0, "127.0.0.1", resolve));
const metroPort = listener.address().port;
await new Promise((resolve) => listener.close(resolve));
const metroLog = openSync(path.join(root, "metro.log"), "w");
const metro = spawn(
process.execPath,
[
path.join(repo, "node_modules/expo/bin/cli"),
"start",
"--web",
"--port",
String(metroPort),
"--offline",
],
{
cwd: path.join(repo, "packages/app"),
detached: true,
stdio: ["ignore", metroLog, metroLog],
env: {
...env,
EXPO_NO_DOTENV: "1",
CI: "1",
PASEO_WEB_PLATFORM: "electron",
EXPO_PUBLIC_LOCAL_DAEMON: `127.0.0.1:${port}`,
},
},
);
closeSync(metroLog);
let desktop;
let page;
try {
await expect
.poll(
async () => {
try {
return (await fetch(`http://127.0.0.1:${metroPort}/status`)).ok;
} catch {
return false;
}
},
{ timeout: 60_000 },
)
.toBe(true);
// /status means Metro is listening; the app bundle may still need a cold compile.
await warmMetro(metroPort);
desktop = await electron.launch({
args: [path.join(repo, "packages/desktop/dist/main.js"), "--no-sandbox"],
env: {
...env,
EXPO_DEV_URL: `http://127.0.0.1:${metroPort}`,
PASEO_DISABLE_SINGLE_INSTANCE_LOCK: "1",
PASEO_ELECTRON_USER_DATA_DIR: path.join(root, "renderer-user-data"),
},
});
page = await desktop.firstWindow();
page.on("pageerror", (error) => console.log("Renderer error:", error.message));
await page.route(/:(6767|6768)\b/, (route) => route.abort());
await page.getByRole("button", { name: "Settings", exact: true }).click({ timeout: 90_000 });
await page.getByRole("button", { name: "Enable built-in daemon", exact: true }).click();
await expect(page.getByText("Attached to an existing daemon", { exact: true })).toBeVisible();
await expect(
page.getByText("Removes localhost from this device and stops the built-in daemon", {
exact: true,
}),
).toBeHidden();
await page
.getByText("Attached to an existing daemon", { exact: true })
.scrollIntoViewIfNeeded();
await page.screenshot({ path: path.join(root, "attached-daemon.png") });
async function respondToNativeDialog(title, artifact, key) {
let windowId;
await expect
.poll(
() => {
try {
windowId = execFileSync("xdotool", ["search", "--onlyvisible", "--name", title], {
encoding: "utf8",
})
.trim()
.split("\n")
.at(-1);
return Boolean(windowId);
} catch {
return false;
}
},
{ timeout: 10_000 },
)
.toBe(true);
const screenshot = await desktop.evaluate(async ({ desktopCapturer }) => {
const sources = await desktopCapturer.getSources({
types: ["screen"],
thumbnailSize: { width: 1280, height: 800 },
});
return sources[0].thumbnail.toPNG().toString("base64");
});
await writeFile(path.join(root, artifact), Buffer.from(screenshot, "base64"));
// Escape destroys the dialog on key-down. Send through the private display
// focus so key-up does not target an already-destroyed X11 window.
execFileSync("xdotool", ["windowfocus", "--sync", windowId, "key", key]);
}
const management = page.getByRole("switch", { name: "Manage built-in daemon" });
await management.click();
await respondToNativeDialog(
"Pause built-in daemon",
"pause-attached-confirmation.png",
"Return",
);
await expect(management).not.toBeChecked();
expect((await readDaemonInstance(home)).pid).toBe(instance.pid);
await page.getByRole("button", { name: "Stop daemon", exact: true }).click();
await respondToNativeDialog("Stop local daemon", "stop-attached-cancelled.png", "Escape");
await expect(page.getByRole("button", { name: "Stop daemon", exact: true })).toBeEnabled();
expect(await readDaemonInstance(home)).toMatchObject({
pid: instance.pid,
startedAt: instance.startedAt,
});
await page.getByRole("button", { name: "Stop daemon", exact: true }).click();
await respondToNativeDialog("Stop local daemon", "stop-attached-confirmation.png", "Return");
await expect.poll(() => readDaemonInstance(home), { timeout: 20_000 }).toBeNull();
await expect(page.getByRole("button", { name: "Stop daemon", exact: true })).toBeHidden();
await page.screenshot({ path: path.join(root, "attached-daemon-stopped.png") });
console.log(
"PASS: real Desktop renderer pauses management without stopping an attached daemon, then confirms and stops that instance.",
);
} catch (error) {
if (page) {
console.log(
"Renderer state:",
await page
.locator("body")
.innerText()
.catch(() => "closed"),
);
await page.screenshot({ path: path.join(root, "renderer-failure.png") }).catch(() => {});
}
throw error;
} finally {
if (desktop) {
const exited = once(desktop.process(), "exit");
await desktop.evaluate(({ app }) => app.exit(0)).catch(() => {});
await exited;
}
if (metro.exitCode === null) {
const exited = once(metro, "exit");
process.kill(-metro.pid, "SIGTERM");
await exited;
}
}
}