@myrialabs/clopen 0.2.9 → 0.2.10

package/backend/index.ts

@@ -156,7 +156,12 @@ startServer().catch((error) => {
 });
 
 // Graceful shutdown - properly close server and database
+let isShuttingDown = false;
+
 async function gracefulShutdown() {
+	if (isShuttingDown) return;
+	isShuttingDown = true;
+
 	console.log('\n🛑 Shutting down server...');
 	try {
 		// Close MCP remote server (before engines, as they may still reference it)
@@ -177,6 +182,13 @@ async function gracefulShutdown() {
 process.on('SIGINT', gracefulShutdown);
 process.on('SIGTERM', gracefulShutdown);
 
+// Ignore SIGHUP — sent when the controlling terminal closes or an SSH session
+// disconnects. Without a handler Bun exits immediately; we want the server to
+// keep running (e.g. started in a background tab or remote shell).
+process.on('SIGHUP', () => {
+	debug.log('server', 'Received SIGHUP — ignoring (server stays running)');
+});
+
 // Safety net: prevent server crash from unhandled errors.
 // These can occur when AI engine SDKs emit asynchronous errors that bypass
 // the normal try/catch flow (e.g., subprocess killed during initialization).

package/backend/preview/browser/browser-navigation-tracker.ts

@@ -1,22 +1,74 @@
 import { EventEmitter } from 'events';
-import type { Page, HTTPRequest, Frame } from 'puppeteer';
+import type { Page, HTTPRequest, Frame, CDPSession } from 'puppeteer';
 import type { BrowserTab } from './types';
+import { debug } from '$shared/utils/logger';
 
 export class BrowserNavigationTracker extends EventEmitter {
+	private cdpSessions = new Map<string, CDPSession>();
+
 	constructor() {
 		super();
 	}
 
+	/**
+	 * Check if two URLs differ only by hash/fragment.
+	 * Hash-only changes are same-document navigations and should NOT trigger
+	 * full page reload or streaming restart.
+	 */
+	private isHashOnlyChange(oldUrl: string, newUrl: string): boolean {
+		try {
+			const oldParsed = new URL(oldUrl);
+			const newParsed = new URL(newUrl);
+			// Compare URLs without hash — if identical, it's a hash-only change
+			oldParsed.hash = '';
+			newParsed.hash = '';
+			return oldParsed.href === newParsed.href;
+		} catch {
+			return false;
+		}
+	}
+
+	/**
+	 * Check if two URLs share the same origin (protocol + host + port).
+	 * Same-origin navigations are likely SPA internal navigations and should
+	 * NOT show a progress bar — the streaming restart happens silently while
+	 * the last rendered frame stays visible.
+	 */
+	private isSameOrigin(oldUrl: string, newUrl: string): boolean {
+		try {
+			return new URL(oldUrl).origin === new URL(newUrl).origin;
+		} catch {
+			return false;
+		}
+	}
+
 	async setupNavigationTracking(sessionId: string, page: Page, session: BrowserTab) {
 
-		// Track navigation start (loading begins)
+		// Track navigation start (loading begins) — only for cross-origin document navigations
 		page.on('request', (request: HTTPRequest) => {
 			// Only track main frame document requests (not resources like images, CSS, etc.)
 			// Puppeteer uses resourceType() instead of isNavigationRequest()
 			if (request.resourceType() === 'document' && request.frame() === page.mainFrame()) {
 				const targetUrl = request.url();
 
-				// Emit navigation loading event to frontend
+				// Skip hash-only changes — they are same-document navigations
+				// that don't need loading states or streaming restart
+				if (this.isHashOnlyChange(session.url, targetUrl)) {
+					debug.log('preview', `⏭️ Skipping navigation-loading for hash-only change: ${session.url} → ${targetUrl}`);
+					return;
+				}
+
+				// Skip same-origin navigations — they are likely SPA internal navigations.
+				// No progress bar is shown; the last rendered frame stays visible while
+				// streaming restarts silently in the background. This makes SPA navigation
+				// feel instant, similar to how a real browser shows the old page until
+				// the new one is ready.
+				if (this.isSameOrigin(session.url, targetUrl)) {
+					debug.log('preview', `⏭️ Skipping navigation-loading for same-origin navigation: ${session.url} → ${targetUrl}`);
+					return;
+				}
+
+				// Emit navigation loading event to frontend (cross-origin navigations only)
 				this.emit('navigation-loading', {
 					sessionId,
 					type: 'navigation-loading',
@@ -26,12 +78,59 @@ export class BrowserNavigationTracker extends EventEmitter {
 			}
 		});
 
-		// Track all navigation events - including redirects, link clicks, and hash changes
-		page.on('framenavigated', (frame: Frame) => {
+		// Track full page navigations (actual page loads, not SPA)
+		page.on('framenavigated', async (frame: Frame) => {
 			// Only track main frame navigation (not iframes)
 			if (frame === page.mainFrame()) {
 				const newUrl = frame.url();
 
+				// Skip internal Chrome error/system pages — they indicate a failed navigation
+				// and should not be surfaced to the frontend as a real URL change.
+				if (newUrl.startsWith('chrome-error://') || newUrl.startsWith('chrome://')) return;
+
+				// Skip if URL hasn't changed (already handled by navigatedWithinDocument)
+				if (newUrl === session.url) return;
+
+				// Hash-only changes should be treated as SPA navigations
+				// (no streaming restart needed, page context is unchanged)
+				if (this.isHashOnlyChange(session.url, newUrl)) {
+					debug.log('preview', `🔄 Hash-only change detected, treating as SPA navigation: ${session.url} → ${newUrl}`);
+					session.url = newUrl;
+					this.emit('navigation-spa', {
+						sessionId,
+						type: 'navigation-spa',
+						url: newUrl,
+						timestamp: Date.now()
+					});
+					return;
+				}
+
+				// Same-origin navigation: check if the video encoder script survived.
+				// SPA frameworks (SvelteKit, Next.js, etc.) often trigger framenavigated
+				// for client-side routing even though the page context is NOT replaced.
+				// If __webCodecsPeer still exists, the scripts are alive → SPA navigation.
+				// If it's gone, the page was truly replaced → full navigation + stream restart.
+				if (this.isSameOrigin(session.url, newUrl)) {
+					try {
+						const scriptAlive = await page.evaluate(() => !!(window as any).__webCodecsPeer);
+						if (scriptAlive) {
+							debug.log('preview', `🔄 Same-origin navigation with script alive (SPA): ${session.url} → ${newUrl}`);
+							session.url = newUrl;
+							this.emit('navigation-spa', {
+								sessionId,
+								type: 'navigation-spa',
+								url: newUrl,
+								timestamp: Date.now()
+							});
+							return;
+						}
+						debug.log('preview', `📄 Same-origin navigation with script dead (full reload): ${session.url} → ${newUrl}`);
+					} catch {
+						// page.evaluate failed — page context was replaced, fall through to full navigation
+						debug.log('preview', `📄 Same-origin navigation evaluate failed (full reload): ${session.url} → ${newUrl}`);
+					}
+				}
+
 				// Update session URL
 				session.url = newUrl;
 
@@ -48,10 +147,43 @@ export class BrowserNavigationTracker extends EventEmitter {
 		// Also track URL changes via JavaScript (for single page applications)
 		page.on('load', async () => {
 			const currentUrl = page.url();
+			// Skip internal Chrome error/system pages
+			if (currentUrl.startsWith('chrome-error://') || currentUrl.startsWith('chrome://')) return;
 			if (currentUrl !== session.url) {
-				
+
+				// Hash-only changes on load — treat as SPA navigation
+				if (this.isHashOnlyChange(session.url, currentUrl)) {
+					session.url = currentUrl;
+					this.emit('navigation-spa', {
+						sessionId,
+						type: 'navigation-spa',
+						url: currentUrl,
+						timestamp: Date.now()
+					});
+					return;
+				}
+
+				// Same-origin: check if video encoder script survived
+				if (this.isSameOrigin(session.url, currentUrl)) {
+					try {
+						const scriptAlive = await page.evaluate(() => !!(window as any).__webCodecsPeer);
+						if (scriptAlive) {
+							session.url = currentUrl;
+							this.emit('navigation-spa', {
+								sessionId,
+								type: 'navigation-spa',
+								url: currentUrl,
+								timestamp: Date.now()
+							});
+							return;
+						}
+					} catch {
+						// Fall through to full navigation
+					}
+				}
+
 				session.url = currentUrl;
-				
+
 				this.emit('navigation', {
 					sessionId,
 					type: 'navigation',
@@ -61,34 +193,59 @@ export class BrowserNavigationTracker extends EventEmitter {
 			}
 		});
 
-		// Track hash changes (fragment identifier changes like #contact-us)
-		// Temporarily disabled URL tracking injection to test CloudFlare evasion
-		/*
-		await page.evaluateOnNewDocument(() => {
-			let lastUrl = window.location.href;
+		// Track SPA navigations (pushState/replaceState) via CDP
+		// Uses Page.navigatedWithinDocument which fires for same-document navigations
+		// This is purely CDP-level — no script injection, safe from CloudFlare detection
+		try {
+			const cdp = await page.createCDPSession();
+			this.cdpSessions.set(sessionId, cdp);
 
-			// Monitor for hash changes and other URL changes
-			const checkUrlChange = () => {
-				const currentUrl = window.location.href;
-				if (currentUrl !== lastUrl) {
-					lastUrl = currentUrl;
+			await cdp.send('Page.enable');
 
-					// Store the new URL for the backend to detect
-					(window as any).__urlChanged = {
-						url: currentUrl,
-						timestamp: Date.now()
-					};
-				}
-			};
+			// Get main frame ID via CDP (reliable across Puppeteer versions)
+			const frameTree = await cdp.send('Page.getFrameTree');
+			const mainFrameId = frameTree.frameTree.frame.id;
 
-			// Listen to various events that might change URL
-			window.addEventListener('hashchange', checkUrlChange);
-			window.addEventListener('popstate', checkUrlChange);
+			cdp.on('Page.navigatedWithinDocument', (params: { frameId: string; url: string }) => {
+				// Only track main frame SPA navigations (ignore iframe pushState)
+				if (params.frameId !== mainFrameId) return;
 
-			// Periodically check for URL changes (for SPA navigation)
-			setInterval(checkUrlChange, 500);
-		});
-		*/
+				const newUrl = params.url;
+				if (newUrl === session.url) return;
+
+				debug.log('preview', `🔄 SPA navigation detected: ${session.url} → ${newUrl}`);
+
+				// Update session URL
+				session.url = newUrl;
+
+				// Emit SPA navigation event — no loading state, no stream restart
+				this.emit('navigation-spa', {
+					sessionId,
+					type: 'navigation-spa',
+					url: newUrl,
+					timestamp: Date.now()
+				});
+			});
+
+			debug.log('preview', `✅ CDP SPA navigation tracking setup for session: ${sessionId}`);
+		} catch (error) {
+			debug.warn('preview', `⚠️ Failed to setup CDP SPA tracking for ${sessionId}:`, error);
+		}
+	}
+
+	/**
+	 * Cleanup CDP session for a tab
+	 */
+	async cleanupSession(sessionId: string) {
+		const cdp = this.cdpSessions.get(sessionId);
+		if (cdp) {
+			try {
+				await cdp.detach();
+			} catch {
+				// Ignore detach errors
+			}
+			this.cdpSessions.delete(sessionId);
+		}
 	}
 
 	async navigateSession(sessionId: string, session: BrowserTab, url: string): Promise<string> {

package/backend/preview/browser/browser-pool.ts

@@ -51,7 +51,7 @@ const CHROMIUM_ARGS = [
 	'--disable-blink-features=AutomationControlled',
 	'--window-size=1366,768',
 	'--autoplay-policy=no-user-gesture-required',
-	'--disable-features=AudioServiceOutOfProcess'
+	'--disable-features=AudioServiceOutOfProcess,WebRtcHideLocalIpsWithMdns'
 ];
 
 class BrowserPool {

package/backend/preview/browser/browser-preview-service.ts

@@ -94,6 +94,7 @@ export class BrowserPreviewService extends EventEmitter {
 		});
 
 		// Forward navigation events and handle video streaming restart
+		// Only full navigations (framenavigated) need streaming restart
 		this.navigationTracker.on('navigation', async (data) => {
 			this.emit('preview:browser-navigation', data);
 
@@ -121,6 +122,12 @@ export class BrowserPreviewService extends EventEmitter {
 			this.emit('preview:browser-navigation-loading', data);
 		});
 
+		// Forward SPA navigation events (pushState/replaceState)
+		// No streaming restart needed — page context is unchanged
+		this.navigationTracker.on('navigation-spa', (data) => {
+			this.emit('preview:browser-navigation-spa', data);
+		});
+
 		// Forward new window events
 		this.tabManager.on('new-window', (data) => {
 			this.emit('preview:browser-new-window', data);
@@ -140,6 +147,10 @@ export class BrowserPreviewService extends EventEmitter {
 			this.emit('preview:browser-tab-navigated', data);
 		});
 
+		this.tabManager.on('preview:browser-viewport-changed', (data) => {
+			this.emit('preview:browser-viewport-changed', data);
+		});
+
 		// Forward video capture events
 		this.videoCapture.on('ice-candidate', (data) => {
 			this.emit('preview:browser-webcodecs-ice-candidate', data);
@@ -249,6 +260,9 @@ export class BrowserPreviewService extends EventEmitter {
 		// Stop WebCodecs streaming first
 		await this.stopWebCodecsStreaming(tabId);
 
+		// Cleanup navigation tracker CDP session
+		await this.navigationTracker.cleanupSession(tabId);
+
 		// Clear cursor tracking for this tab
 		this.interactionHandler.clearSessionCursor(tabId);
 
@@ -650,6 +664,11 @@ class BrowserPreviewServiceManager {
 			ws.emit.project(projectId, 'preview:browser-navigation', data);
 		});
 
+		// Forward SPA navigation events (pushState/replaceState — URL-only update)
+		service.on('preview:browser-navigation-spa', (data) => {
+			ws.emit.project(projectId, 'preview:browser-navigation-spa', data);
+		});
+
 		// Forward tab events
 		service.on('preview:browser-tab-opened', (data) => {
 			debug.log('preview', `🚀 Forwarding preview:browser-tab-opened to project ${projectId}:`, data);
@@ -668,6 +687,10 @@ class BrowserPreviewServiceManager {
 			ws.emit.project(projectId, 'preview:browser-tab-navigated', data);
 		});
 
+		service.on('preview:browser-viewport-changed', (data) => {
+			ws.emit.project(projectId, 'preview:browser-viewport-changed', data);
+		});
+
 		// Forward console events
 		service.on('preview:browser-console-message', (data) => {
 			ws.emit.project(projectId, 'preview:browser-console-message', data);

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

@@ -730,6 +730,21 @@ export class BrowserTabManager extends EventEmitter {
 		// await page.evaluateOnNewDocument(cursorTrackingScript);
 	}
 
+	/**
+	 * Returns true for errors where retrying is pointless because the page/session is gone.
+	 */
+	private isNonRetryableError(error: unknown): boolean {
+		if (error instanceof Error) {
+			const msg = error.message;
+			return (
+				msg.includes('Session closed') ||
+				msg.includes('detached Frame') ||
+				error.constructor.name === 'TargetCloseError'
+			);
+		}
+		return false;
+	}
+
 	/**
 	 * Navigate with retry, including Cloudflare auto-pass detection and CAPTCHA popup dismissal.
 	 */
@@ -750,7 +765,7 @@ export class BrowserTabManager extends EventEmitter {
 			} catch (error) {
 				retries--;
 				debug.warn('preview', `⚠️ Navigation failed, ${retries} retries left:`, error);
-				if (retries === 0) throw error;
+				if (retries === 0 || this.isNonRetryableError(error)) throw error;
 
 				// Wait before retry
 				await new Promise(resolve => setTimeout(resolve, 2000));

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

@@ -383,8 +383,8 @@ export class BrowserVideoCapture extends EventEmitter {
 			return null;
 		}
 
-		const maxRetries = 3;
-		const retryDelay = 50;
+		const maxRetries = 6;
+		const retryDelay = 150;
 
 		for (let attempt = 0; attempt < maxRetries; attempt++) {
 			try {

package/backend/preview/browser/scripts/video-stream.ts

@@ -38,6 +38,23 @@ export function videoEncoderScript(config: StreamingConfig['video']) {
 	// STUN servers are unnecessary for localhost and add 100-500ms ICE gathering latency
 	const iceServers: { urls: string }[] = [];
 
+	// Create a loopback (127.0.0.1) copy of a host ICE candidate.
+	// Ensures WebRTC connects via loopback when VPN (e.g. Cloudflare WARP)
+	// interferes with host candidate connectivity between same-machine peers.
+	function createLoopbackCandidate(candidate: { candidate?: string; sdpMid?: string | null; sdpMLineIndex?: number | null }) {
+		if (!candidate.candidate) return null;
+		if (!candidate.candidate.includes('typ host')) return null;
+
+		const parts = candidate.candidate.split(' ');
+		if (parts.length < 8) return null;
+
+		const address = parts[4];
+		if (address === '127.0.0.1' || address === '::1') return null;
+
+		parts[4] = '127.0.0.1';
+		return { ...candidate, candidate: parts.join(' ') };
+	}
+
 	// Check cursor style from page
 	function checkCursor() {
 		try {
@@ -103,11 +120,18 @@ export function videoEncoderScript(config: StreamingConfig['video']) {
 		// Handle ICE candidates
 		peerConnection.onicecandidate = (event) => {
 			if (event.candidate && (window as any).__sendIceCandidate) {
-				(window as any).__sendIceCandidate({
+				const candidateInit = {
 					candidate: event.candidate.candidate,
 					sdpMid: event.candidate.sdpMid,
 					sdpMLineIndex: event.candidate.sdpMLineIndex
-				});
+				};
+				(window as any).__sendIceCandidate(candidateInit);
+
+				// Also send loopback version for VPN compatibility (same-machine peers)
+				const loopback = createLoopbackCandidate(candidateInit);
+				if (loopback) {
+					(window as any).__sendIceCandidate(loopback);
+				}
 			}
 		};
 
@@ -337,16 +361,27 @@ export function videoEncoderScript(config: StreamingConfig['video']) {
 		}
 	}
 
-	// Add ICE candidate
+	// Add ICE candidate (+ loopback variant for VPN compatibility)
 	async function addIceCandidate(candidate: RTCIceCandidateInit) {
 		if (!peerConnection) return false;
 
 		try {
 			await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
-			return true;
 		} catch (error) {
 			return false;
 		}
+
+		// Also try loopback version for VPN compatibility (same-machine peers)
+		const loopback = createLoopbackCandidate(candidate);
+		if (loopback) {
+			try {
+				await peerConnection.addIceCandidate(new RTCIceCandidate(loopback as RTCIceCandidateInit));
+			} catch {
+				// Expected to fail if loopback is not applicable
+			}
+		}
+
+		return true;
 	}
 
 	// Reconfigure video encoder with new dimensions (hot-swap)

package/backend/ws/preview/browser/webcodecs.ts

@@ -252,6 +252,17 @@ export const streamPreviewHandler = createRouter()
 			url: t.String(),
 			timestamp: t.Number()
 		})
+	)
+
+	// Server → Client: SPA navigation (pushState/replaceState — URL-only update, no page reload)
+	.emit(
+		'preview:browser-navigation-spa',
+		t.Object({
+			sessionId: t.String(),
+			type: t.String(),
+			url: t.String(),
+			timestamp: t.Number()
+		})
 	);
 
 // Setup event forwarding from preview service to WebSocket

package/backend/ws/preview/index.ts

@@ -143,4 +143,12 @@ export const previewRouter = createRouter()
 		sessionId: t.String(),
 		timestamp: t.Number(),
 		source: t.Literal('mcp')
+	}))
+	.emit('preview:browser-viewport-changed', t.Object({
+		tabId: t.String(),
+		deviceSize: t.String(),
+		rotation: t.String(),
+		width: t.Number(),
+		height: t.Number(),
+		timestamp: t.Number()
 	}));

package/frontend/components/chat/input/ChatInput.svelte

@@ -416,12 +416,12 @@
 			ondrop={fileHandling.handleDrop}
 		>
 			<div class="flex-1">
-				<!-- Engine/Model Picker -->
-				<EngineModelPicker />
-
 				<!-- Edit Mode Indicator -->
 				<EditModeIndicator onCancel={handleCancelEdit} />
 
+				<!-- Engine/Model Picker -->
+				<EngineModelPicker />
+
 				<div class="flex items-end">
 					<textarea
 						bind:this={textareaElement}

package/frontend/components/preview/browser/BrowserPreview.svelte

@@ -223,6 +223,12 @@
 	let previousUrl = '';
 	$effect(() => {
 		if (!url || url === previousUrl) return;
+		// Ignore browser-internal error pages (e.g. DNS failure) — they are not real URLs
+		// and should never trigger a new navigation attempt.
+		if (url.startsWith('chrome-error://') || url.startsWith('chrome://')) {
+			previousUrl = url;
+			return;
+		}
 		if (mcpLaunchInProgress) {
 			previousUrl = url;
 			urlInput = url;
@@ -306,7 +312,7 @@
 
 	// Initialize URL input
 	$effect(() => {
-		if (url && !url.startsWith('http://') && !url.startsWith('https://')) {
+		if (url && !url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('file://')) {
 			url = 'http://' + url;
 		}
 		if (url && !urlInput) {
@@ -319,7 +325,7 @@
 		if (!urlInput.trim()) return;
 
 		let processedUrl = urlInput.trim();
-		if (!processedUrl.startsWith('http://') && !processedUrl.startsWith('https://')) {
+		if (!processedUrl.startsWith('http://') && !processedUrl.startsWith('https://') && !processedUrl.startsWith('file://')) {
 			processedUrl = 'http://' + processedUrl;
 		}
 
@@ -447,7 +453,8 @@
 		},
 		getSessionInfo: () => sessionInfo,
 		getIsStreamReady: () => isStreamReady,
-		getErrorMessage: () => errorMessage
+		getErrorMessage: () => errorMessage,
+		getIsMcpControlled: () => isCurrentTabMcpControlled()
 	};
 </script>
 

package/frontend/components/preview/browser/components/Canvas.svelte

@@ -26,6 +26,7 @@
 		onStatsUpdate = $bindable<(stats: BrowserWebCodecsStreamStats | null) => void>(() => {}),
 		onRequestScreencastRefresh = $bindable<() => void>(() => {}), // Called when stream is stuck
 		touchMode = $bindable<'scroll' | 'cursor'>('scroll'),
+		touchTarget = undefined as HTMLElement | undefined, // Container element for touch events
 		onTouchCursorUpdate = $bindable<(pos: { x: number; y: number; visible: boolean; clicking?: boolean }) => void>(() => {})
 	} = $props();
 
@@ -566,12 +567,16 @@
 						debug.log('webcodecs', 'Streaming started successfully');
 					} else {
 						// Service handles errors internally and returns false.
-						// Never retry here — retrying immediately creates a stop/start loop.
-						debug.warn('webcodecs', 'Streaming start returned false, stopping retries');
+						// Retry after a delay — the peer/offer may need more time to initialize.
+						retries++;
+						if (retries < maxRetries) {
+							debug.warn('webcodecs', `Streaming start returned false, retrying in ${retryDelay * retries}ms (${retries}/${maxRetries})`);
+							await new Promise(resolve => setTimeout(resolve, retryDelay * retries));
+							continue;
+						}
+						debug.error('webcodecs', 'Streaming start failed after all retries');
+						break;
 					}
-					// Always break after the service returns (success or failure).
-					// The service catches all exceptions internally, so the catch block
-					// below never runs, making retries/retryDelay dead code anyway.
 					break;
 				} catch (error: any) {
 					// This block only runs if the service unexpectedly throws.
@@ -1002,20 +1007,6 @@
 				canvas.focus();
 			});
 
-			const touchStartHandler = (e: TouchEvent) => handleTouchStart(e, canvas);
-			let lastTouchMoveTime = 0;
-			const touchMoveHandler = (e: TouchEvent) => {
-				const now = Date.now();
-				if (now - lastTouchMoveTime >= 16) {
-					lastTouchMoveTime = now;
-					handleTouchMove(e, canvas);
-				}
-			};
-			const touchEndHandler = (e: TouchEvent) => handleTouchEnd(e, canvas);
-
-			canvas.addEventListener('touchstart', touchStartHandler, { passive: false });
-			canvas.addEventListener('touchmove', touchMoveHandler, { passive: false });
-			canvas.addEventListener('touchend', touchEndHandler, { passive: false });
 
 			const handleMouseLeave = () => {
 				if (isMouseDown) {
@@ -1045,13 +1036,38 @@
 				canvas.removeEventListener('mousedown', (e) => handleCanvasMouseDown(e, canvas));
 				canvas.removeEventListener('mouseup', (e) => handleCanvasMouseUp(e, canvas));
 				canvas.removeEventListener('mousemove', handleMouseMove);
-				canvas.removeEventListener('touchstart', touchStartHandler);
-				canvas.removeEventListener('touchmove', touchMoveHandler);
-				canvas.removeEventListener('touchend', touchEndHandler);
 			};
 		}
 	});
 
+	// Attach touch events to touchTarget (Container's previewContainer) instead of canvas
+	$effect(() => {
+		if (!touchTarget || !canvasElement) return;
+
+		const canvas = canvasElement;
+		let lastTouchMoveTime = 0;
+
+		const touchStartHandler = (e: TouchEvent) => handleTouchStart(e, canvas);
+		const touchMoveHandler = (e: TouchEvent) => {
+			const now = Date.now();
+			if (now - lastTouchMoveTime >= 16) {
+				lastTouchMoveTime = now;
+				handleTouchMove(e, canvas);
+			}
+		};
+		const touchEndHandler = (e: TouchEvent) => handleTouchEnd(e, canvas);
+
+		touchTarget.addEventListener('touchstart', touchStartHandler, { passive: false });
+		touchTarget.addEventListener('touchmove', touchMoveHandler, { passive: false });
+		touchTarget.addEventListener('touchend', touchEndHandler, { passive: false });
+
+		return () => {
+			touchTarget.removeEventListener('touchstart', touchStartHandler);
+			touchTarget.removeEventListener('touchmove', touchMoveHandler);
+			touchTarget.removeEventListener('touchend', touchEndHandler);
+		};
+	});
+
 	// Convert canvas coordinates to viewport (screen) coordinates for VirtualCursor display
 	function canvasToScreen(cx: number, cy: number): { x: number; y: number } {
 		if (!canvasElement) return { x: 0, y: 0 };
@@ -1391,7 +1407,8 @@
 			getStats: () => webCodecsService?.getStats() ?? null,
 			getLatency: () => latencyMs,
 			// Navigation handling
-			notifyNavigationComplete
+			notifyNavigationComplete,
+			freezeForSpaNavigation: () => webCodecsService?.freezeForSpaNavigation()
 		};
 	});
 

package/frontend/components/preview/browser/components/Container.svelte

@@ -70,10 +70,11 @@
 	let showNavigationOverlay = $state(false);
 	let overlayHideTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	// Debounced navigation overlay - similar to progress bar logic
-	// Shows immediately when navigating/reconnecting, hides with delay to prevent flicker
+	// Debounced navigation overlay - only for user-initiated toolbar navigations
+	// In-browser navigations (link clicks) only show progress bar, not this overlay
+	// This makes the preview behave like a real browser
 	$effect(() => {
-		const shouldShowOverlay = (isNavigating || isReconnecting) && isStreamReady;
+		const shouldShowOverlay = isNavigating && isStreamReady;
 
 		// Cancel any pending hide when overlay should show
 		if (shouldShowOverlay && overlayHideTimeout) {
@@ -385,6 +386,7 @@
 						bind:isNavigating
 						bind:isReconnecting
 						bind:touchMode
+						touchTarget={previewContainer}
 						onInteraction={handleCanvasInteraction}
 						onCursorUpdate={handleCursorUpdate}
 						onFrameUpdate={handleFrameUpdate}
@@ -408,7 +410,8 @@
 				</div>
 			{/if}
 
-			<!-- Navigation Overlay: Semi-transparent overlay during navigation/reconnect (shows last frame behind) -->
+			<!-- Navigation Overlay: Only for user-initiated toolbar navigations (Go button/Enter) -->
+			<!-- In-browser link clicks only show the progress bar, not this overlay -->
 			{#if showNavigationOverlay}
 				<div
 					class="absolute inset-0 bg-white/60 dark:bg-slate-800/60 backdrop-blur-[2px] flex items-center justify-center z-10"
@@ -416,7 +419,7 @@
 					<div class="flex flex-col items-center gap-2">
 						<Icon name="lucide:loader-circle" class="w-8 h-8 animate-spin text-violet-600" />
 						<div class="text-slate-600 dark:text-slate-300 text-center">
-							<div class="text-sm font-medium">Loading preview...</div>
+							<div class="text-sm font-medium">Navigating...</div>
 						</div>
 					</div>
 				</div>

package/frontend/components/preview/browser/components/Toolbar.svelte

@@ -163,6 +163,21 @@
 		progressPercent = 0;
 	}
 
+	// Reset progress bar immediately when active tab changes
+	// This prevents stale progress from a previous tab leaking into the new tab
+	let previousActiveTabId = $state<string | null>(null);
+	$effect(() => {
+		if (activeTabId !== previousActiveTabId) {
+			previousActiveTabId = activeTabId;
+			// Immediately stop any running progress animation and clear pending timeouts
+			stopProgress();
+			if (progressCompleteTimeout) {
+				clearTimeout(progressCompleteTimeout);
+				progressCompleteTimeout = null;
+			}
+		}
+	});
+
 	// Watch loading states to control progress bar
 	// Progress bar should be active during:
 	// 1. isLaunchingBrowser: API call to launch browser

package/frontend/components/preview/browser/core/coordinator.svelte.ts

@@ -771,6 +771,19 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 					debug.warn('preview', `Tab not found for sessionId: ${data.sessionId}`);
 				}
 			});
+
+			// Listen for SPA navigation events (pushState/replaceState)
+			ws.on('preview:browser-navigation-spa', (data: { sessionId: string; type: string; url: string; timestamp: number }) => {
+				debug.log('preview', `🔄 SPA navigation event received: ${data.sessionId} → ${data.url}`);
+
+				const tab = tabManager.tabs.find(t => t.sessionId === data.sessionId);
+				if (tab) {
+					streamHandler.handleStreamMessage({
+						type: 'navigation-spa',
+						data: { url: data.url }
+					}, tab.id);
+				}
+			});
 		});
 	}
 

package/frontend/components/preview/browser/core/stream-handler.svelte.ts

@@ -73,6 +73,10 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 				handleNavigation(targetTabId, message.data, tab);
 				break;
 
+			case 'navigation-spa':
+				handleNavigationSpa(targetTabId, message.data, tab);
+				break;
+
 			case 'new-window':
 				handleNewWindow(message.data);
 				break;
@@ -172,13 +176,14 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 	function handleNavigationLoading(tabId: string, data: any) {
 		if (data && data.url) {
 			const tab = tabManager.getTab(tabId);
-			// isNavigating: true if session already exists (navigating within same session)
-			// isNavigating: false if no session yet (initial load)
-			const isNavigating = tab?.sessionId ? true : false;
 
+			// Only set isLoading (progress bar) for in-browser navigations.
+			// Do NOT set isNavigating here — that flag is reserved for user-initiated
+			// toolbar navigations (Go button/Enter), which is set in navigateBrowserForTab().
+			// This prevents the "Loading preview..." overlay from showing on link clicks
+			// within the browser, making it behave like a real browser.
 			tabManager.updateTab(tabId, {
 				isLoading: true,
-				isNavigating,
 				url: data.url,
 				title: getTabTitle(data.url)
 			});
@@ -216,6 +221,34 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 		}
 	}
 
+	function handleNavigationSpa(tabId: string, data: any, tab: PreviewTab) {
+		if (data && data.url && data.url !== tab.url) {
+			debug.log('preview', `🔄 SPA navigation for tab ${tabId}: ${tab.url} → ${data.url}`);
+
+			// Freeze canvas briefly to avoid showing white flash during SPA transition
+			// The last rendered frame is held while the DOM settles
+			tab.canvasAPI?.freezeForSpaNavigation?.();
+
+			// SPA navigation: update URL/title and reset any loading states.
+			// A preceding navigation-loading event may have set isLoading=true
+			// (e.g., if the browser started a document request before the SPA
+			// router intercepted it). Reset those states here since the SPA
+			// handled the navigation without a full page reload.
+			// Video streaming continues uninterrupted since page context is unchanged.
+			tabManager.updateTab(tabId, {
+				url: data.url,
+				title: getTabTitle(data.url),
+				isLoading: false,
+				isNavigating: false
+			});
+
+			// Update parent if this is the active tab
+			if (tabId === tabManager.activeTabId && onNavigationUpdate) {
+				onNavigationUpdate(tabId, data.url);
+			}
+		}
+	}
+
 	function handleNewWindow(data: any) {
 		if (data && data.url) {
 			tabManager.createTab(data.url);

package/frontend/components/workspace/PanelHeader.svelte

@@ -390,9 +390,10 @@
 				<div class="relative">
 					<button
 						type="button"
-						class="flex items-center justify-center gap-1.5 {isMobile ? 'px-2 h-9' : 'px-1 h-6'} bg-transparent border-none rounded-md text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
-						onclick={toggleDeviceDropdown}
-						title="Select device size"
+						class="flex items-center justify-center gap-1.5 {isMobile ? 'px-2 h-9' : 'px-1 h-6'} bg-transparent border-none rounded-md transition-all duration-150 {previewPanelRef?.panelActions?.getIsMcpControlled() ? 'text-slate-400 dark:text-slate-600 cursor-not-allowed opacity-50' : 'text-slate-500 cursor-pointer hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100'}"
+						onclick={previewPanelRef?.panelActions?.getIsMcpControlled() ? undefined : toggleDeviceDropdown}
+						disabled={previewPanelRef?.panelActions?.getIsMcpControlled()}
+						title={previewPanelRef?.panelActions?.getIsMcpControlled() ? 'Controlled by MCP agent' : 'Select device size'}
 					>
 						{#if previewPanelRef?.panelActions?.getDeviceSize() === 'desktop'}
 							<Icon name="lucide:monitor" class={isMobile ? 'w-4.5 h-4.5' : 'w-4 h-4'} />
@@ -505,9 +506,10 @@
 				<!-- Rotation toggle -->
 				<button
 					type="button"
-					class="flex items-center justify-center gap-1.5 {isMobile ? 'px-2 h-9' : 'px-1 h-6'} bg-transparent border-none rounded-md text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
-					onclick={() => previewPanelRef?.panelActions?.toggleRotation()}
-					title="Toggle orientation"
+					class="flex items-center justify-center gap-1.5 {isMobile ? 'px-2 h-9' : 'px-1 h-6'} bg-transparent border-none rounded-md transition-all duration-150 {previewPanelRef?.panelActions?.getIsMcpControlled() ? 'text-slate-400 dark:text-slate-600 cursor-not-allowed opacity-50' : 'text-slate-500 cursor-pointer hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100'}"
+					onclick={previewPanelRef?.panelActions?.getIsMcpControlled() ? undefined : () => previewPanelRef?.panelActions?.toggleRotation()}
+					disabled={previewPanelRef?.panelActions?.getIsMcpControlled()}
+					title={previewPanelRef?.panelActions?.getIsMcpControlled() ? 'Controlled by MCP agent' : 'Toggle orientation'}
 				>
 					<Icon name="lucide:rotate-cw" class={isMobile ? 'w-4.5 h-4.5' : 'w-4 h-4'} />
 					<span class="text-xs font-medium">

package/frontend/components/workspace/panels/PreviewPanel.svelte

@@ -113,6 +113,7 @@
 		getSessionInfo: () => browserPreviewRef?.browserActions?.getSessionInfo() || null,
 		getIsStreamReady: () => browserPreviewRef?.browserActions?.getIsStreamReady() || false,
 		getErrorMessage: () => browserPreviewRef?.browserActions?.getErrorMessage() || null,
+		getIsMcpControlled: () => browserPreviewRef?.browserActions?.getIsMcpControlled() || false,
 		setDeviceSize: (size: DeviceSize) => {
 			if (browserPreviewRef?.browserActions) {
 				browserPreviewRef.browserActions.changeDeviceSize(size);

package/frontend/services/preview/browser/browser-webcodecs.service.ts

@@ -133,6 +133,9 @@ export class BrowserWebCodecsService {
 	private isNavigating = false;
 	private navigationCleanupFn: (() => void) | null = null;
 
+	// SPA navigation frame freeze — holds last frame briefly during SPA transitions
+	private spaFreezeUntil = 0;
+
 	// WebSocket cleanup
 	private wsCleanupFunctions: Array<() => void> = [];
 
@@ -237,16 +240,32 @@ export class BrowserWebCodecsService {
 					sdp: response.offer.sdp
 				});
 			} else {
-				debug.log('webcodecs', `[DIAG] No offer in stream-start response, fetching via stream-offer`);
-				const offerResponse = await ws.http('preview:browser-stream-offer', {}, 10000);
-				debug.log('webcodecs', `[DIAG] preview:browser-stream-offer response: hasOffer=${!!offerResponse.offer}`);
-				if (offerResponse.offer) {
+				// Offer not ready yet — peer may still be initializing. Retry with backoff.
+				debug.log('webcodecs', `[DIAG] No offer in stream-start response, retrying stream-offer with backoff`);
+
+				let offer: { type: string; sdp?: string } | undefined;
+				const offerMaxRetries = 5;
+				const offerRetryDelay = 200;
+
+				for (let attempt = 0; attempt < offerMaxRetries; attempt++) {
+					if (attempt > 0) {
+						await new Promise(resolve => setTimeout(resolve, offerRetryDelay * attempt));
+					}
+					debug.log('webcodecs', `[DIAG] stream-offer attempt ${attempt + 1}/${offerMaxRetries}`);
+					const offerResponse = await ws.http('preview:browser-stream-offer', {}, 10000);
+					if (offerResponse.offer) {
+						offer = offerResponse.offer;
+						break;
+					}
+				}
+
+				if (offer) {
 					await this.handleOffer({
-						type: offerResponse.offer.type as RTCSdpType,
-						sdp: offerResponse.offer.sdp
+						type: offer.type as RTCSdpType,
+						sdp: offer.sdp
 					});
 				} else {
-					throw new Error('No offer received from server');
+					throw new Error('No offer received from server after retries');
 				}
 			}
 
@@ -338,16 +357,22 @@ export class BrowserWebCodecsService {
 		// Handle ICE candidates
 		this.peerConnection.onicecandidate = (event) => {
 			if (event.candidate && this.sessionId) {
+				const candidateInit: RTCIceCandidateInit = {
+					candidate: event.candidate.candidate,
+					sdpMid: event.candidate.sdpMid,
+					sdpMLineIndex: event.candidate.sdpMLineIndex
+				};
+
 				// Backend uses active tab automatically
-				ws.http('preview:browser-stream-ice', {
-					candidate: {
-						candidate: event.candidate.candidate,
-						sdpMid: event.candidate.sdpMid,
-						sdpMLineIndex: event.candidate.sdpMLineIndex
-					}
-				}).catch((error) => {
+				ws.http('preview:browser-stream-ice', { candidate: candidateInit }).catch((error) => {
 					debug.warn('webcodecs', 'Failed to send ICE candidate:', error);
 				});
+
+				// Also send loopback version for VPN compatibility (same-machine peers)
+				const loopback = this.createLoopbackCandidate(candidateInit);
+				if (loopback) {
+					ws.http('preview:browser-stream-ice', { candidate: loopback }).catch(() => {});
+				}
 			}
 		};
 
@@ -624,6 +649,17 @@ export class BrowserWebCodecsService {
 			return;
 		}
 
+		// During SPA navigation freeze, skip rendering to hold the last frame
+		// This prevents brief white flashes during SPA page transitions
+		if (this.spaFreezeUntil > 0 && Date.now() < this.spaFreezeUntil) {
+			frame.close();
+			return;
+		}
+		// Auto-reset freeze after it expires
+		if (this.spaFreezeUntil > 0) {
+			this.spaFreezeUntil = 0;
+		}
+
 		try {
 			// Update stats
 			this.stats.videoFramesDecoded++;
@@ -849,9 +885,16 @@ export class BrowserWebCodecsService {
 
 		const cleanupNavComplete = ws.on('preview:browser-navigation', (data) => {
 			if (data.sessionId === this.sessionId) {
-				// Keep isNavigating true for a short period to allow reconnection
-				// Will be reset when new frames arrive or reconnection completes
 				debug.log('webcodecs', `Navigation completed (direct WS) for session ${data.sessionId}`);
+
+				// If isNavigating was NOT set by navigation-loading (SPA-like case where
+				// framenavigated fires without a document request), set it now so the
+				// subsequent DataChannel close triggers fast reconnect instead of full recovery
+				if (!this.isNavigating) {
+					this.isNavigating = true;
+					debug.log('webcodecs', '✅ Set isNavigating=true on navigation complete (no loading event preceded)');
+				}
+
 				// Signal reconnecting state IMMEDIATELY when navigation completes
 				// This eliminates the gap between isNavigating=false and DataChannel close
 				// ensuring the overlay stays visible continuously
@@ -862,11 +905,41 @@ export class BrowserWebCodecsService {
 			}
 		});
 
-		this.wsCleanupFunctions = [cleanupIce, cleanupState, cleanupCursor, cleanupNavLoading, cleanupNavComplete];
+		// Listen for SPA navigation events (pushState/replaceState/hash changes)
+		// Reset isNavigating if it was set by a preceding navigation-loading event
+		// that the SPA router intercepted (cancelled the full navigation)
+		const cleanupNavSpa = ws.on('preview:browser-navigation-spa', (data) => {
+			if (data.sessionId === this.sessionId && this.isNavigating) {
+				debug.log('webcodecs', '🔄 SPA navigation received - resetting isNavigating (no stream restart needed)');
+				this.isNavigating = false;
+			}
+		});
+
+		this.wsCleanupFunctions = [cleanupIce, cleanupState, cleanupCursor, cleanupNavLoading, cleanupNavComplete, cleanupNavSpa];
 	}
 
 	/**
-	 * Add ICE candidate
+	 * Create a loopback (127.0.0.1) copy of a host ICE candidate.
+	 * Ensures WebRTC connects via loopback when VPN (e.g. Cloudflare WARP)
+	 * interferes with host candidate connectivity between same-machine peers.
+	 */
+	private createLoopbackCandidate(candidate: RTCIceCandidateInit): RTCIceCandidateInit | null {
+		if (!candidate.candidate) return null;
+		if (!candidate.candidate.includes('typ host')) return null;
+
+		const parts = candidate.candidate.split(' ');
+		if (parts.length < 8) return null;
+
+		// Index 4 is the address field in ICE candidate format
+		const address = parts[4];
+		if (address === '127.0.0.1' || address === '::1') return null;
+
+		parts[4] = '127.0.0.1';
+		return { ...candidate, candidate: parts.join(' ') };
+	}
+
+	/**
+	 * Add ICE candidate (+ loopback variant for VPN compatibility)
 	 */
 	private async addIceCandidate(candidate: RTCIceCandidateInit): Promise<void> {
 		if (!this.peerConnection) return;
@@ -876,6 +949,16 @@ export class BrowserWebCodecsService {
 		} catch (error) {
 			debug.warn('webcodecs', 'Add ICE candidate error:', error);
 		}
+
+		// Also try loopback version for VPN compatibility (same-machine peers)
+		const loopback = this.createLoopbackCandidate(candidate);
+		if (loopback) {
+			try {
+				await this.peerConnection.addIceCandidate(new RTCIceCandidate(loopback));
+			} catch {
+				// Expected to fail if loopback is not applicable
+			}
+		}
 	}
 
 	/**
@@ -1382,6 +1465,15 @@ export class BrowserWebCodecsService {
 		this.onFirstFrame = handler;
 	}
 
+	/**
+	 * Freeze frame rendering briefly during SPA navigation.
+	 * Holds the current canvas content to prevent white flash during
+	 * SPA page transitions (pushState/replaceState).
+	 */
+	freezeForSpaNavigation(durationMs = 150): void {
+		this.spaFreezeUntil = Date.now() + durationMs;
+	}
+
 	setErrorHandler(handler: (error: Error) => void): void {
 		this.onError = handler;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
   "author": "Myria Labs",
   "license": "MIT",