fix(session): two-phase tab lifecycle + worktree test fixes (#136)

* feat(cf): add fresh_owned/fresh_cross_tab span attributes to TabDetector

The TabDetector structural filter removes cross-tab OOPIFs but the
ownership breakdown was only visible in replay markers, not trace spans.
Add cf.detect.fresh_owned and cf.detect.fresh_cross_tab annotations
inside the TabDetector.detect implementation so Tempo traces show
unambiguous cross-tab filtering status.

* fix(session): two-phase tab lifecycle to eliminate ghost about:blank resource waste

Ghost about:blank keepalive tabs were running CF detection loops for 60+ minutes,
generating 300+ trace spans, 3600+ screencast frames, and holding WebSocket
connections per session. Every session has one ghost tab.

Split handleAttachedToTargetEffect into Phase 1 (lightweight attach) and Phase 2
(activate on first real navigation). Keepalive tabs never navigate away from
about:blank so they never activate — zero heavy resource allocation.

Also fixes worktree test failures: track src/generated/ in git, use Node-native
module resolution (createRequire + dirname) instead of hardcoded node_modules
paths, and add worktree-aware BROWSERLESS_DIR fallback in vitest setup.

Author: DivMode

.gitignore

@@ -4,8 +4,7 @@ build/
 metrics.json
 extensions/ublocklite
 
-# Generated rrweb bundles (created by scripts/bundle-rrweb*.js)
-src/generated/
+# Generated rrweb extension (rebuilt by extensions/replay/build.js)
 extensions/replay/rrweb-recorder.js
 
 # npm pack

extensions/replay/build.js

@@ -18,6 +18,11 @@ import { build, transform } from 'esbuild';
 import fs from 'fs/promises';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { createRequire } from 'node:module';
+
+// Node-native resolution — walks up directories to find node_modules.
+// Works in git worktrees (finds main repo's node_modules automatically).
+const require = createRequire(import.meta.url);
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const rootDir = join(__dirname, '..', '..');
@@ -44,7 +49,7 @@ async function compileContentScript(filename) {
 
   // 1. Bundle @divmode/rrweb as IIFE
   await build({
-    entryPoints: [join(rootDir, 'node_modules/@divmode/rrweb/dist/rrweb.js')],
+    entryPoints: [join(dirname(require.resolve('@divmode/rrweb')), 'rrweb.js')],
     bundle: true,
     format: 'iife',
     globalName: 'rrweb',
@@ -56,7 +61,7 @@ async function compileContentScript(filename) {
 
   // 2. Bundle @divmode/rrweb-plugin-console-record as IIFE
   await build({
-    entryPoints: [join(rootDir, 'node_modules/@divmode/rrweb-plugin-console-record/dist/rrweb-plugin-console-record.js')],
+    entryPoints: [join(dirname(require.resolve('@divmode/rrweb-plugin-console-record')), 'rrweb-plugin-console-record.js')],
     bundle: true,
     format: 'iife',
     globalName: 'rrwebConsolePlugin',

scripts/bundle-rrweb-player.js

@@ -7,6 +7,11 @@ import { build } from 'esbuild';
 import fs from 'fs/promises';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { createRequire } from 'node:module';
+
+// Node-native resolution — walks up directories to find node_modules.
+// Works in git worktrees (finds main repo's node_modules automatically).
+const require = createRequire(import.meta.url);
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const rootDir = join(__dirname, '..');
@@ -21,7 +26,7 @@ const generatedFile = join(generatedDir, 'rrweb-player.ts');
 
   // Bundle @posthog/rrweb-player as IIFE for browser
   await build({
-    entryPoints: [join(rootDir, 'node_modules/@posthog/rrweb-player/dist/rrweb-player.js')],
+    entryPoints: [join(dirname(require.resolve('@posthog/rrweb-player')), 'rrweb-player.js')],
     bundle: true,
     format: 'iife',
     globalName: 'rrwebPlayer',
@@ -34,7 +39,7 @@ const generatedFile = join(generatedDir, 'rrweb-player.ts');
   const playerJS = await fs.readFile(outfile, 'utf-8');
 
   // Read the CSS file
-  const cssPath = join(rootDir, 'node_modules/@posthog/rrweb-player/dist/style.css');
+  const cssPath = join(dirname(require.resolve('@posthog/rrweb-player')), 'style.css');
   const playerCSS = await fs.readFile(cssPath, 'utf-8');
 
   // Generate TypeScript file with the bundled code

src/generated/antibot-detect.ts

@@ -967,12 +967,26 @@ export class CloudflareDetector {
       // Resolve page's root frameId once — used by TabDetector for parent frame filtering.
       // Page.getFrameTree is a read-only CDP command — no V8 evaluation, safe for all page types.
       const cdp = yield* CdpSender;
-      const pageFrameId: string | null = yield* cdp.send(
+      const frameTreeResult: { id: string | null; url: string | null } = yield* cdp.send(
         'Page.getFrameTree', {}, cdpSessionId,
       ).pipe(
-        Effect.map((r: any) => (r?.frameTree?.frame?.id as string) ?? null),
-        Effect.orElseSucceed(() => null as string | null),
+        Effect.map((r: any) => ({
+          id: (r?.frameTree?.frame?.id as string) ?? null,
+          url: (r?.frameTree?.frame?.url as string) ?? null,
+        })),
+        Effect.orElseSucceed(() => ({ id: null as string | null, url: null as string | null })),
       );
+      const pageFrameId = frameTreeResult.id;
+
+      // Defense-in-depth: skip detection on about:blank tabs (keepalive tabs).
+      // Primary guard is the two-phase lifecycle in cdp-session.ts (Phase 2 never activates
+      // for about:blank tabs). This catches the enable() path which iterates knownPages
+      // and could start detection on unactivated tabs.
+      if (!frameTreeResult.url || frameTreeResult.url.startsWith('about:')) {
+        yield* Effect.annotateCurrentSpan({ 'cf.detect.skipped': 'about_blank' });
+        return;
+      }
+
       // Set on tab runtime so TabDetector's baked-in filter uses the correct pageFrameId
       tabCtx.setPageFrameId(pageFrameId);
       yield* Effect.annotateCurrentSpan({

src/generated/cf-bridge.ts

@@ -90,7 +90,25 @@ const REPLAY_HTTP = process.env.REPLAY_INGEST_URL;
 if (!REPLAY_HTTP) {
   throw new Error('REPLAY_INGEST_URL env var required — set in .env.dev or .env.prod');
 }
-const BROWSERLESS_DIR = path.resolve(import.meta.dirname);
+// Worktree-aware: if real npm dependencies don't exist here (git worktree),
+// resolve to the main repo root. Check for a real package (effect) instead of
+// just node_modules/ — vitest creates node_modules/.vite cache in the CWD,
+// which would fool a bare existsSync('node_modules') check.
+function resolveBrowserlessDir(): string {
+  const dir = path.resolve(import.meta.dirname);
+  if (existsSync(path.join(dir, 'node_modules', 'effect'))) return dir;
+  try {
+    const output = execFileSync('git', ['worktree', 'list', '--porcelain'],
+      { cwd: dir, encoding: 'utf8' });
+    const match = output.match(/^worktree (.+)$/m);
+    if (match && existsSync(path.join(match[1], 'node_modules', 'effect'))) {
+      console.log(`[globalSetup] Worktree detected — using main repo: ${match[1]}`);
+      return match[1];
+    }
+  } catch { /* not a git repo */ }
+  return dir;
+}
+const BROWSERLESS_DIR = resolveBrowserlessDir();
 const MAX_WAIT_MS = 30_000;
 const POLL_INTERVAL_MS = 500;
 const RESULTS_FILE = path.join(tmpdir(), 'cf-integration-results.jsonl');