@myrialabs/clopen 0.1.10 → 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/utils/ws.ts

@@ -67,6 +67,12 @@ interface ConnectionState {
 	chatSessionIds: Set<string>;
 	/** Cleanup functions called automatically on unregister (connection close) */
 	cleanups: Set<() => void>;
+	/** Whether this connection has been authenticated */
+	authenticated: boolean;
+	/** User role (admin or member) — set by auth handler */
+	role: 'admin' | 'member' | null;
+	/** Hash of the session token used for this connection */
+	sessionTokenHash: string | null;
 }
 
 /**
@@ -140,7 +146,7 @@ class WSServer {
 		const id = crypto.randomUUID();
 		this.rawToId.set(raw, id);
 		this.connections.set(id, conn);
-		this.connectionState.set(id, { userId: null, projectId: null, chatSessionIds: new Set(), cleanups: new Set() });
+		this.connectionState.set(id, { userId: null, projectId: null, chatSessionIds: new Set(), cleanups: new Set(), authenticated: false, role: null, sessionTokenHash: null });
 
 		this.metrics.totalConnections = this.connections.size;
 		debug.log('websocket', `Connection registered: ${id} (total: ${this.connections.size})`);
@@ -516,6 +522,64 @@ class WSServer {
 		return this.connectionState.get(id);
 	}
 
+	/**
+	 * Set authentication state for a connection.
+	 * Called by auth handlers after successful login/setup/invite.
+	 */
+	setAuth(conn: WSConnection, userId: string, role: 'admin' | 'member', sessionTokenHash: string): void {
+		const wsId = this.ensureRegistered(conn);
+		const state = this.connectionState.get(wsId);
+		if (state) {
+			state.authenticated = true;
+			state.role = role;
+			state.sessionTokenHash = sessionTokenHash;
+		}
+		// Also set userId via existing method (handles room management)
+		this.setUser(conn, userId);
+		debug.log('websocket', `Connection ${wsId} authenticated: userId=${userId}, role=${role}`);
+	}
+
+	/**
+	 * Get the role for a connection.
+	 */
+	getRole(conn: WSConnection): 'admin' | 'member' | null {
+		const id = this.resolveId(conn);
+		if (!id) return null;
+		return this.connectionState.get(id)?.role ?? null;
+	}
+
+	/**
+	 * Check if a connection is authenticated.
+	 */
+	isAuthenticated(conn: WSConnection): boolean {
+		const id = this.resolveId(conn);
+		if (!id) return false;
+		return this.connectionState.get(id)?.authenticated ?? false;
+	}
+
+	/**
+	 * Get remote IP address of a connection.
+	 */
+	getRemoteAddress(conn: WSConnection): string {
+		const raw = (conn as any).raw;
+		return raw?.remoteAddress ?? 'unknown';
+	}
+
+	/**
+	 * Clear authentication state for a connection (logout).
+	 */
+	clearAuth(conn: WSConnection): void {
+		const id = this.resolveId(conn);
+		if (!id) return;
+		const state = this.connectionState.get(id);
+		if (state) {
+			state.authenticated = false;
+			state.role = null;
+			state.sessionTokenHash = null;
+		}
+		debug.log('websocket', `Connection ${id} auth cleared`);
+	}
+
 	/**
 	 * Check if connection can receive data (backpressure check)
 	 */

package/backend/ws/auth/index.ts

@@ -0,0 +1,17 @@
+import { createRouter } from '$shared/utils/ws-server';
+import { t } from 'elysia';
+import { statusHandler } from './status';
+import { loginHandler } from './login';
+import { inviteHandler } from './invites';
+import { usersHandler } from './users';
+
+export const authRouter = createRouter()
+	.merge(statusHandler)
+	.merge(loginHandler)
+	.merge(inviteHandler)
+	.merge(usersHandler)
+	// Declare auth:error event (emitted by auth gate in WSRouter)
+	.emit('auth:error', t.Object({
+		error: t.String(),
+		blockedAction: t.String()
+	}));

package/backend/ws/auth/invites.ts

@@ -0,0 +1,84 @@
+import { t } from 'elysia';
+import { createRouter } from '$shared/utils/ws-server';
+import { createInvite, listInvites, revokeInvite } from '$backend/lib/auth/auth-service';
+import { ws } from '$backend/lib/utils/ws';
+
+export const inviteHandler = createRouter()
+	// Create invite token (admin only — enforced by auth gate)
+	.http('auth:create-invite', {
+		data: t.Object({
+			label: t.Optional(t.String()),
+			maxUses: t.Optional(t.Number({ minimum: 0 })),
+			expiresInMinutes: t.Optional(t.Number({ minimum: 1 }))
+		}),
+		response: t.Object({
+			inviteToken: t.String(),
+			invite: t.Object({
+				id: t.String(),
+				role: t.String(),
+				label: t.Union([t.String(), t.Null()]),
+				max_uses: t.Number(),
+				use_count: t.Number(),
+				expires_at: t.Union([t.String(), t.Null()]),
+				created_at: t.String()
+			})
+		})
+	}, async ({ data, conn }) => {
+		const userId = ws.getUserId(conn);
+		const result = createInvite(userId, {
+			label: data.label,
+			maxUses: data.maxUses,
+			expiresInMinutes: data.expiresInMinutes
+		});
+
+		return {
+			inviteToken: result.inviteToken,
+			invite: {
+				id: result.invite!.id,
+				role: result.invite!.role,
+				label: result.invite!.label,
+				max_uses: result.invite!.max_uses,
+				use_count: result.invite!.use_count,
+				expires_at: result.invite!.expires_at,
+				created_at: result.invite!.created_at
+			}
+		};
+	})
+
+	// List all invites (admin only)
+	.http('auth:list-invites', {
+		data: t.Object({}),
+		response: t.Array(t.Object({
+			id: t.String(),
+			role: t.String(),
+			label: t.Union([t.String(), t.Null()]),
+			max_uses: t.Number(),
+			use_count: t.Number(),
+			expires_at: t.Union([t.String(), t.Null()]),
+			created_at: t.String()
+		}))
+	}, async () => {
+		const invites = listInvites();
+		return invites.map(inv => ({
+			id: inv.id,
+			role: inv.role,
+			label: inv.label,
+			max_uses: inv.max_uses,
+			use_count: inv.use_count,
+			expires_at: inv.expires_at,
+			created_at: inv.created_at
+		}));
+	})
+
+	// Revoke invite (admin only)
+	.http('auth:revoke-invite', {
+		data: t.Object({
+			id: t.String({ minLength: 1 })
+		}),
+		response: t.Object({
+			success: t.Boolean()
+		})
+	}, async ({ data }) => {
+		revokeInvite(data.id);
+		return { success: true };
+	});