Function makeBrowserSurface

e2e/src/surfaces/browser.ts:163–329

(dir: string, target: Target)

// acquireUseRelease so a vitest timeout (fiber interruption) still closes the
// browser and flushes video + trace — a bare promise would leak Chromium.
export const makeBrowserSurface = (dir: string, target: Target): BrowserSurface => ({
  session: (identity, drive) =>
    Effect.acquireUseRelease(
      Effect.promise(async () => {
        const videoTmp = join(dir, ".video-tmp");
        mkdirSync(videoTmp, { recursive: true });

        // Watchable mode (E2E_FILM / E2E_DESK): slow each Playwright action so
        // the recording is readable instead of flickering through states at
        // machine speed. Off by default — normal CI runs stay fast.
        const watchable = process.env.E2E_FILM === "1" || process.env.E2E_DESK === "1";
        const slowMo = watchable ? 400 : undefined;
        // On the desk (E2E_DESK), the browser is a real headed window on the
        // virtual display — the desk's single screen recording films it next
        // to the chat terminal, exactly like a developer tabbing over.
        const browser = await chromium.launch(
          process.env.E2E_DESK === "1"
            ? {
                headless: false,
                args: ["--window-position=300,40", "--window-size=1100,830"],
                slowMo,
              }
            : slowMo
              ? { slowMo }
              : {},
        );
        const context = await browser.newContext({
          colorScheme: "dark",
          viewport: { width: 1280, height: 800 },
          recordVideo: { dir: videoTmp, size: { width: 1280, height: 800 } },
          baseURL: target.baseUrl,
        });
        await context.tracing.start({
          screenshots: true,
          snapshots: true,
          sources: true,
        });
        // Bake a synthetic URL bar into the recording so a shared session.mp4
        // (and the step screenshots) shows which page each moment was on.
        await installRecordingUrlBar(context);
        if (identity.cookies?.length) {
          await context.addCookies(
            identity.cookies.map((cookie) => ({
              ...cookie,
              url: target.baseUrl,
            })),
          );
        }
        const page = await context.newPage();
        // The session video's clock starts with the page; anchor it for the
        // run's focus timeline (scripts/film.ts cuts on these).
        markRecordingStart(dir, "browser");
        // Main-frame navigations feed the viewer's synthetic URL bar — the
        // recording itself is chromeless, so this is the only place the
        // address the developer "typed" survives.
        page.on("framenavigated", (frame) => {
          if (frame === page.mainFrame()) markNavigation(dir, frame.url());
        });