@myrialabs/clopen 0.1.9 → 0.2.0

package/backend/lib/preview/browser/browser-tab-manager.ts

@@ -623,41 +623,115 @@ export class BrowserTabManager extends EventEmitter {
 		page.setDefaultNavigationTimeout(30000);
 
 		// Configure page for stability
-		await page.setExtraHTTPHeaders({
-			'Accept-Language': 'en-US,en;q=0.9',
-			'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
-		});
-
-		// Optimize font loading to prevent screenshot timeouts
-		await page.evaluateOnNewDocument(() => {
-			// Disable font loading wait
-			Object.defineProperty(document, 'fonts', {
-				value: {
-					ready: Promise.resolve(),
-					load: () => Promise.resolve([]),
-					check: () => true,
-					addEventListener: () => {},
-					removeEventListener: () => {}
-				}
-			});
-		});
+		// Note: Do NOT set HTTP headers manually here (like Accept-Language).
+		// Setting extra headers alters the HTTP/2 pseudo-header order and capitalization
+		// which immediately gets flagged by Cloudflare's TLS/Fingerprint matching algorithms.
 
-		// Inject audio capture script BEFORE page loads to intercept AudioContext
-		await this.audioCapture.setupAudioCapture(page, DEFAULT_STREAMING_CONFIG.audio);
+		// Audio capture is injected post-navigation in BrowserVideoCapture.startStreaming()
+		// to avoid Cloudflare fingerprint detection of AudioContext constructor patching.
 
 		// Simplified cursor tracking for visual feedback only
 		await this.injectCursorTracking(page);
+
+		// Suppress Cloudflare Turnstile error callbacks to prevent sites from showing
+		// "CAPTCHA verification failed" popups in headless Chrome (error 600010).
+		//
+		// Strategy: Let the real Turnstile script load and define window.turnstile normally
+		// (needed for CF Managed Challenge auto-pass via StealthPlugin fingerprinting).
+		// Intercept window.turnstile assignment via getter/setter and patch render()/execute()
+		// to replace error-callback/expired-callback with no-ops before they are registered.
+		// Also strip data-error-callback attributes from DOM elements via MutationObserver
+		// to cover implicit render (data-sitekey) usage.
+		//
+		// This does NOT block challenges.cloudflare.com — CF Managed Challenge needs that
+		// URL to run its JS verification. Only the error reporting path is suppressed.
+		await page.evaluateOnNewDocument(function () {
+			(function () {
+				 
+				let _turnstile: any;
+
+				function patchOptions(options: Record<string, unknown>) {
+					return Object.assign({}, options, {
+						'error-callback': function () {},
+						'expired-callback': function () {}
+					});
+				}
+
+				 
+				function patchApi(api: any) {
+					if (!api || typeof api !== 'object') return api;
+					['render', 'execute'].forEach(function (method: string) {
+						if (typeof api[method] === 'function') {
+							const orig = api[method].bind(api);
+							api[method] = function (container: unknown, opts: Record<string, unknown>) {
+								return orig(container, patchOptions(opts || {}));
+							};
+						}
+					});
+					return api;
+				}
+
+				try {
+					Object.defineProperty(window, 'turnstile', {
+						configurable: true,
+						enumerable: true,
+						 
+						get() { return _turnstile; },
+						 
+						set(val: any) { _turnstile = patchApi(val); }
+					});
+				} catch {
+					// Property already defined or can't be intercepted
+				}
+
+				// Strip data-error-callback / data-expired-callback from Turnstile elements
+				// before implicit render reads them, so no error handler is registered.
+				function stripErrorAttrs(el: Element) {
+					el.removeAttribute('data-error-callback');
+					el.removeAttribute('data-expired-callback');
+				}
+
+				const mo = new MutationObserver(function (mutations) {
+					mutations.forEach(function (m) {
+						m.addedNodes.forEach(function (node) {
+							if (!(node instanceof Element)) return;
+							if (node.hasAttribute('data-error-callback') || node.hasAttribute('data-expired-callback')) {
+								stripErrorAttrs(node);
+							}
+							node.querySelectorAll('[data-error-callback],[data-expired-callback]').forEach(stripErrorAttrs);
+						});
+					});
+				});
+				if (document.documentElement) {
+					mo.observe(document.documentElement, { childList: true, subtree: true });
+				}
+			})();
+		});
+
+		// Auto-dismiss native browser dialogs to prevent page hang in headless mode.
+		// alert() → accept (one-way informational, safe to dismiss)
+		// confirm()/prompt() → dismiss/cancel (avoid unintended side effects)
+		// CAPTCHA-related alerts are silently dismissed.
+		page.on('dialog', async (dialog) => {
+			const type = dialog.type();
+			if (type === 'alert') {
+				await dialog.accept().catch(() => {});
+			} else {
+				await dialog.dismiss().catch(() => {});
+			}
+		});
 	}
 
 	/**
 	 * Inject cursor tracking script
 	 */
 	private async injectCursorTracking(page: Page) {
-		await page.evaluateOnNewDocument(cursorTrackingScript);
+		// Temporarily disabled mapping logic as CloudFlare frequently flags evaluateOnNewDocument injected tracking events
+		// await page.evaluateOnNewDocument(cursorTrackingScript);
 	}
 
 	/**
-	 * Navigate with retry
+	 * Navigate with retry, including Cloudflare auto-pass detection and CAPTCHA popup dismissal.
 	 */
 	private async navigateWithRetry(page: Page, url: string): Promise<string> {
 		let retries = 3;
@@ -669,7 +743,9 @@ export class BrowserTabManager extends EventEmitter {
 					waitUntil: 'domcontentloaded',
 					timeout: 30000
 				});
-				actualUrl = page.url();
+				actualUrl = await this.waitForCloudflareIfPresent(page);
+				// Dismiss any CAPTCHA failure popups from embedded Turnstile widgets
+				await this.dismissCaptchaPopupsIfPresent(page);
 				break;
 			} catch (error) {
 				retries--;
@@ -684,6 +760,168 @@ export class BrowserTabManager extends EventEmitter {
 		return actualUrl;
 	}
 
+	/**
+	 * Detect Cloudflare challenge page and wait for auto-pass redirect.
+	 * Loops up to MAX_CF_RETRIES times to handle infinite verify loops where
+	 * Cloudflare keeps redirecting back to a new challenge after each pass.
+	 */
+	private async waitForCloudflareIfPresent(page: Page): Promise<string> {
+		const MAX_CF_RETRIES = 5;
+
+		for (let attempt = 0; attempt < MAX_CF_RETRIES; attempt++) {
+			let isChallenge = false;
+
+			try {
+				isChallenge = await page.evaluate(() => {
+					const title = document.title;
+					const bodyText = (document.body?.innerText || '').slice(0, 500).toLowerCase();
+					return (
+						// Old automated CF challenge
+						title === 'Just a moment...' ||
+						// Newer interactive CF challenge ("Performing security verification")
+						title.toLowerCase().includes('security verification') ||
+						bodyText.includes('verify you are human') ||
+						bodyText.includes('performing security verification') ||
+						// CF challenge DOM elements (reliable, present on challenge pages only)
+						document.getElementById('challenge-running') !== null ||
+						document.getElementById('cf-challenge-running') !== null ||
+						document.getElementById('challenge-form') !== null ||
+						document.querySelector('#challenge-stage') !== null
+					);
+				});
+			} catch {
+				// Page not evaluable (navigating, closed) — not a CF challenge
+				break;
+			}
+
+			if (!isChallenge) {
+				break;
+			}
+
+			debug.log('preview', `🛡️ Cloudflare challenge detected (attempt ${attempt + 1}/${MAX_CF_RETRIES}), waiting for auto-pass...`);
+
+			try {
+				await page.waitForNavigation({
+					waitUntil: 'domcontentloaded',
+					timeout: 20000
+				});
+				debug.log('preview', `✅ Cloudflare navigation → ${page.url()}`);
+			} catch {
+				debug.warn('preview', `⚠️ Cloudflare auto-pass timed out on attempt ${attempt + 1}, proceeding`);
+				break;
+			}
+		}
+
+		return page.url();
+	}
+
+	/**
+	 * Inject a persistent non-blocking watcher into the page that auto-dismisses
+	 * CAPTCHA failure popups whenever they appear (Cloudflare Turnstile error 600010,
+	 * reCAPTCHA failures, etc.).
+	 *
+	 * Uses MutationObserver + setInterval so it catches popups regardless of when they
+	 * appear after page load. Returns immediately — the watcher runs inside the page.
+	 */
+	private async dismissCaptchaPopupsIfPresent(page: Page): Promise<void> {
+		try {
+			await page.evaluate(() => {
+				const CAPTCHA_WORDS = ['captcha', 'turnstile', 'human verification', 'robot', 'bot detected'];
+				const FAIL_WORDS = ['failed', 'error', 'invalid', 'verification failed', 'try again', 'unable to verify'];
+				const DISMISS_LABELS = ['ok', 'close', 'dismiss', 'cancel', 'retry', 'try again', 'continue', 'got it'];
+
+				const isCaptchaText = (text: string): boolean => {
+					const t = text.toLowerCase();
+					return (
+						CAPTCHA_WORDS.some(w => t.includes(w)) &&
+						FAIL_WORDS.some(w => t.includes(w))
+					);
+				};
+
+				const tryDismiss = (): boolean => {
+					// Strategy 1: click a dismiss button whose ancestor contains CAPTCHA failure text
+					const buttons = Array.from(document.querySelectorAll<HTMLElement>(
+						'button, input[type="button"], input[type="submit"], a[role="button"]'
+					));
+					for (const btn of buttons) {
+						const label = (
+							btn instanceof HTMLInputElement ? btn.value : btn.innerText || btn.textContent || ''
+						).trim().toLowerCase();
+						if (!DISMISS_LABELS.includes(label)) continue;
+
+						let el: Element | null = btn.parentElement;
+						while (el && el !== document.body) {
+							if (isCaptchaText((el as HTMLElement).innerText || '')) {
+								(btn as HTMLElement).click();
+								return true;
+							}
+							el = el.parentElement;
+						}
+					}
+
+					// Strategy 2: hide any visible modal/overlay containing CAPTCHA failure text
+					const overlaySelectors = [
+						'[class*="modal"]', '[class*="popup"]', '[class*="dialog"]',
+						'[class*="overlay"]', '[class*="alert"]', '[class*="notification"]',
+						'[role="dialog"]', '[role="alertdialog"]', '[role="alert"]'
+					];
+					const overlays = document.querySelectorAll<HTMLElement>(overlaySelectors.join(','));
+					for (const overlay of overlays) {
+						if (!isCaptchaText(overlay.innerText || '')) continue;
+						const style = overlay.style;
+						if (style.display === 'none' || style.visibility === 'hidden') continue;
+
+						// Try clicking a close button first
+						const closeBtn = overlay.querySelector<HTMLElement>(
+							'button, [class*="close"], [aria-label*="lose"], [aria-label*="ismiss"]'
+						);
+						if (closeBtn) {
+							closeBtn.click();
+						} else {
+							style.display = 'none';
+						}
+						return true;
+					}
+
+					return false;
+				};
+
+				// Run immediately in case popup is already present
+				if (tryDismiss()) return;
+
+				// Set up persistent watcher — fires on any DOM mutation
+				const observer = new MutationObserver(() => {
+					if (tryDismiss()) {
+						observer.disconnect();
+						clearInterval(ticker);
+					}
+				});
+
+				// Also poll via interval as safety net (MutationObserver may miss text changes)
+				const ticker = setInterval(() => {
+					if (tryDismiss()) {
+						clearInterval(ticker);
+						observer.disconnect();
+					}
+				}, 400);
+
+				if (document.body) {
+					observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+				}
+
+				// Self-cleanup after 30 seconds to avoid memory leaks
+				setTimeout(() => {
+					observer.disconnect();
+					clearInterval(ticker);
+				}, 30000);
+			});
+
+			debug.log('preview', '🔔 CAPTCHA auto-dismiss watcher injected into page');
+		} catch {
+			// Page closed or navigated away — ignore
+		}
+	}
+
 	/**
 	 * Setup browser event handlers
 	 */

package/backend/lib/preview/browser/browser-video-capture.ts

@@ -31,6 +31,7 @@ import type { Page } from 'puppeteer';
 import type { BrowserTab, StreamingConfig } from './types';
 import { DEFAULT_STREAMING_CONFIG } from './types';
 import { videoEncoderScript } from './scripts/video-stream';
+import { audioCaptureScript } from './scripts/audio-stream';
 import { debug } from '$shared/utils/logger';
 
 interface VideoStreamSession {
@@ -157,7 +158,8 @@ export class BrowserVideoCapture extends EventEmitter {
 			// Inject persistent video encoder script (survives navigation)
 			// Only inject once per page instance
 			if (!videoSession.scriptInjected) {
-				await page.evaluateOnNewDocument(videoEncoderScript, videoConfig);
+				// Temporarily disable evaluateOnNewDocument for evasion test
+				// await page.evaluateOnNewDocument(videoEncoderScript, videoConfig);
 				videoSession.scriptInjected = true;
 				debug.log('webcodecs', `Persistent video encoder script injected for ${sessionId}`);
 			}
@@ -166,6 +168,12 @@ export class BrowserVideoCapture extends EventEmitter {
 			// (evaluateOnNewDocument only runs on NEXT navigation)
 			await page.evaluate(videoEncoderScript, videoConfig);
 
+			// Inject audio capture script post-navigation to avoid CF detection.
+			// Using page.evaluate() instead of evaluateOnNewDocument() ensures
+			// AudioContext patching happens AFTER Cloudflare challenges pass,
+			// preventing fingerprint detection of constructor interception.
+			await page.evaluate(audioCaptureScript, config.audio);
+
 			// Verify peer was created
 			const peerExists = await page.evaluate(() => {
 				return typeof (window as any).__webCodecsPeer?.startStreaming === 'function';
@@ -570,6 +578,9 @@ export class BrowserVideoCapture extends EventEmitter {
 
 			await page.evaluate(videoEncoderScript, videoConfig);
 
+			// Re-inject audio capture script for new page context (post-navigation)
+			await page.evaluate(audioCaptureScript, config.audio);
+
 			// Verify peer was re-created
 			const peerExists = await page.evaluate(() => {
 				return typeof (window as any).__webCodecsPeer?.startStreaming === 'function';
@@ -590,6 +601,25 @@ export class BrowserVideoCapture extends EventEmitter {
 				return false;
 			}
 
+			// Re-initialize and start audio capture after navigation
+			try {
+				const audioReady = await page.evaluate(async () => {
+					const encoder = (window as any).__audioEncoder;
+					if (!encoder) return false;
+					const initiated = await encoder.init();
+					if (initiated) return encoder.start();
+					return false;
+				});
+
+				if (audioReady) {
+					debug.log('webcodecs', 'Audio re-initialized after navigation');
+				} else {
+					debug.warn('webcodecs', 'Audio not available after navigation, continuing with video only');
+				}
+			} catch {
+				debug.warn('webcodecs', 'Audio re-init failed after navigation, continuing with video only');
+			}
+
 			// Restart CDP screencast
 			const cdp = (session as any).__webCodecsCdp;
 			if (cdp) {
@@ -631,6 +661,11 @@ export class BrowserVideoCapture extends EventEmitter {
 
 		if (session?.page && !session.page.isClosed()) {
 			try {
+				// Stop audio encoder
+				await session.page.evaluate(() => {
+					(window as any).__audioEncoder?.stop();
+				}).catch(() => {});
+
 				// Stop peer
 				await session.page.evaluate(() => {
 					(window as any).__webCodecsPeer?.stopStreaming();

package/backend/lib/snapshot/helpers.ts

@@ -7,6 +7,9 @@ import type { DatabaseMessage } from '$shared/types/database/schema';
  * Snapshot domain helper functions
  */
 
+/** Sentinel ID for the "initial state" node (before any chat messages) */
+export const INITIAL_NODE_ID = '__initial__';
+
 export interface CheckpointNode {
 	id: string;
 	messageId: string;
@@ -18,6 +21,7 @@ export interface CheckpointNode {
 	isOrphaned: boolean; // descendant of current active checkpoint
 	isCurrent: boolean; // this is the current active checkpoint
 	hasSnapshot: boolean;
+	isInitial?: boolean; // true for the "initial state" node
 	senderName?: string | null;
 	// File change statistics (git-like)
 	filesChanged?: number;
@@ -335,62 +339,31 @@ export function isDescendant(
 }
 
 /**
- * Get file change stats for a checkpoint by looking at snapshots
- * between this checkpoint and the next.
+ * Get file change stats for a checkpoint.
+ * The snapshot associated with the checkpoint message itself contains the stats
+ * (file changes the assistant made in response to this user message).
  */
 export function getCheckpointFileStats(
-	checkpointMsg: DatabaseMessage,
-	allMessages: DatabaseMessage[],
-	nextCheckpointTimestamp?: string
+	checkpointMsg: DatabaseMessage
 ): { filesChanged: number; insertions: number; deletions: number } {
-	let filesChanged = 0;
-	let insertions = 0;
-	let deletions = 0;
-
-	const checkpointTimestamp = checkpointMsg.timestamp;
-
-	const laterMessages = allMessages
-		.filter(m => {
-			if (m.timestamp <= checkpointTimestamp) return false;
-			if (nextCheckpointTimestamp && m.timestamp >= nextCheckpointTimestamp) return false;
-			return true;
-		})
-		.sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+	const snapshot = snapshotQueries.getByMessageId(checkpointMsg.id);
+	if (!snapshot) {
+		return { filesChanged: 0, insertions: 0, deletions: 0 };
+	}
 
-	const allChangedFiles = new Set<string>();
-	const statsInRange: Array<{ files: number; ins: number; del: number }> = [];
+	let filesChanged = snapshot.files_changed || 0;
+	const insertions = snapshot.insertions || 0;
+	const deletions = snapshot.deletions || 0;
 
-	for (const msg of laterMessages) {
+	// Try to get a more accurate file count from session_changes
+	if (snapshot.session_changes) {
 		try {
-			const sdkMsg = JSON.parse(msg.sdk_message) as SDKMessage;
-			if (sdkMsg.type !== 'user') continue;
-
-			const userSnapshot = snapshotQueries.getByMessageId(msg.id);
-			if (!userSnapshot) continue;
-
-			const fc = userSnapshot.files_changed || 0;
-			const ins = userSnapshot.insertions || 0;
-			const del = userSnapshot.deletions || 0;
-
-			if (fc > 0 || ins > 0 || del > 0) {
-				statsInRange.push({ files: fc, ins, del });
-			}
-
-			if (userSnapshot.delta_changes) {
-				try {
-					const delta = JSON.parse(userSnapshot.delta_changes);
-					if (delta.added) Object.keys(delta.added).forEach(f => allChangedFiles.add(f));
-					if (delta.modified) Object.keys(delta.modified).forEach(f => allChangedFiles.add(f));
-					if (delta.deleted && Array.isArray(delta.deleted)) delta.deleted.forEach((f: string) => allChangedFiles.add(f));
-				} catch { /* skip */ }
+			const changes = JSON.parse(snapshot.session_changes as string);
+			const changeCount = Object.keys(changes).length;
+			if (changeCount > 0) {
+				filesChanged = changeCount;
 			}
-		} catch { /* skip */ }
-	}
-
-	if (statsInRange.length > 0) {
-		filesChanged = allChangedFiles.size > 0 ? allChangedFiles.size : Math.max(...statsInRange.map(s => s.files));
-		insertions = statsInRange.reduce((sum, s) => sum + s.ins, 0);
-		deletions = statsInRange.reduce((sum, s) => sum + s.del, 0);
+		} catch { /* use files_changed from DB */ }
 	}
 
 	return { filesChanged, insertions, deletions };