@myrialabs/clopen 0.2.9 → 0.2.11

package/frontend/components/common/feedback/NotificationToast.svelte

@@ -48,15 +48,30 @@
 	function getColorClasses(type: string) {
 		switch (type) {
 			case 'success':
-				return 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900 dark:border-green-800 dark:text-green-200';
+				return 'bg-green-50 border-green-300 text-green-900 dark:bg-green-950 dark:border-green-700 dark:text-green-100';
 			case 'error':
-				return 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200';
+				return 'bg-red-50 border-red-300 text-red-900 dark:bg-red-950 dark:border-red-700 dark:text-red-100';
 			case 'warning':
-				return 'bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-900 dark:border-amber-800 dark:text-amber-200';
+				return 'bg-amber-50 border-amber-300 text-amber-900 dark:bg-amber-950 dark:border-amber-700 dark:text-amber-100';
 			case 'info':
-				return 'bg-slate-50 border-slate-200 text-slate-800 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-200';
+				return 'bg-blue-50 border-blue-300 text-blue-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100';
 			default:
-				return 'bg-slate-50 border-slate-200 text-slate-800 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-200';
+				return 'bg-slate-50 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100';
+		}
+	}
+
+	function getIconColorClass(type: string) {
+		switch (type) {
+			case 'success':
+				return 'text-green-600 dark:text-green-400';
+			case 'error':
+				return 'text-red-600 dark:text-red-400';
+			case 'warning':
+				return 'text-amber-600 dark:text-amber-400';
+			case 'info':
+				return 'text-blue-600 dark:text-blue-400';
+			default:
+				return 'text-slate-600 dark:text-slate-400';
 		}
 	}
 </script>
@@ -68,27 +83,27 @@
 	role="alert"
 	aria-live="polite"
 >
-	<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-4 {getColorClasses(notification.type)}">
+	<div class="border rounded-lg p-4 shadow-lg {getColorClasses(notification.type)}">
 		<div class="flex items-start space-x-3">
-			<div class="flex-shrink-0">
+			<div class="flex-shrink-0 {getIconColorClass(notification.type)}">
 				<Icon name={getIcon(notification.type)} class="w-5 h-5" />
 			</div>
 
 			<div class="flex-1 min-w-0">
 				<div class="flex items-center justify-between">
-					<h4 class="font-medium text-sm">
+					<h4 class="font-semibold text-sm">
 						{notification.title}
 					</h4>
 					<button
 						onclick={handleDismiss}
-						class="flex-shrink-0 ml-2 p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded transition-colors"
+						class="flex flex-shrink-0 ml-2 p-1 rounded opacity-60 hover:opacity-100 transition-opacity"
 						aria-label="Dismiss notification"
 					>
 						<Icon name="lucide:x" class="w-4 h-4" />
 					</button>
 				</div>
 
-				<p class="text-sm opacity-90 mt-1">
+				<p class="text-sm opacity-80 mt-1">
 					{notification.message}
 				</p>
 
@@ -100,7 +115,7 @@
 									action.action();
 									handleDismiss();
 								}}
-								class="text-xs font-medium px-3 py-1 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-md transition-colors"
+								class="text-xs font-medium px-3 py-1 bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20 rounded-md transition-colors"
 							>
 								{action.label}
 							</button>

package/frontend/components/files/FileNode.svelte

@@ -62,50 +62,29 @@
 
 	let nodeElement: HTMLDivElement;
 	let menuButtonElement: HTMLButtonElement;
-	let showAbove = $state(false);
-
-	// Context menu positioning
-	let menuOpenedViaContextMenu = $state(false);
-	let contextMenuX = $state(0);
-	let contextMenuY = $state(0);
-
-	function checkMenuPosition() {
-		if (!menuButtonElement) return;
-
-		const rect = menuButtonElement.getBoundingClientRect();
-		const dockContainer = nodeElement?.closest('.overflow-auto');
-
-		if (!dockContainer) {
-			// Fallback ke viewport jika tidak ada container
-			const viewportHeight = window.innerHeight;
-			const menuHeight = 100;
-			showAbove = rect.bottom + menuHeight > viewportHeight && rect.top > menuHeight;
-			return;
-		}
-
-		const dockRect = dockContainer.getBoundingClientRect();
-		const menuHeight = 100; // Estimasi tinggi menu dropdown
-
-		// Hitung ruang yang tersedia di bawah dan di atas dalam dock container
-		const spaceBelow = dockRect.bottom - rect.bottom;
-		const spaceAbove = rect.top - dockRect.top;
-
-		// Jika tidak cukup ruang di bawah untuk menu dan ada cukup ruang di atas, tampilkan di atas
-		showAbove = spaceBelow < menuHeight && spaceAbove > menuHeight;
+	let menuStyle = $state('');
+
+	function computeMenuStyle(x: number, y: number, alignRight: boolean): string {
+		const menuHeight = 200;
+		const isAbove = y + menuHeight > window.innerHeight && y > menuHeight;
+		const verticalStyle = isAbove
+			? `bottom: ${window.innerHeight - y}px;`
+			: `top: ${y}px;`;
+		const horizontalStyle = alignRight ? `right: ${x}px;` : `left: ${x}px;`;
+		return `${horizontalStyle} ${verticalStyle}`;
 	}
 
 	function toggleMenu(event: Event) {
 		event.stopPropagation();
 		if (!isMenuOpen) {
-			checkMenuPosition();
-			menuOpenedViaContextMenu = false; // Opened via button click
+			const rect = menuButtonElement.getBoundingClientRect();
+			menuStyle = computeMenuStyle(window.innerWidth - rect.right, rect.bottom, true);
 		}
 		onMenuToggle?.(file.path);
 	}
 
 	function closeMenu() {
-		onMenuToggle?.(file.path); // Toggle to close
-		menuOpenedViaContextMenu = false;
+		onMenuToggle?.(file.path);
 	}
 
 	function getDisplayIcon(fileName: string, isDirectory: boolean): IconName {
@@ -127,32 +106,11 @@
 	function handleContextMenu(event: MouseEvent) {
 		event.preventDefault();
 		if (!isMenuOpen) {
-			// Save mouse position for context menu positioning
-			contextMenuX = event.clientX;
-			contextMenuY = event.clientY;
-			menuOpenedViaContextMenu = true;
-			// Check position based on mouse Y relative to dock container
-			checkContextMenuPosition(event.clientY);
+			menuStyle = computeMenuStyle(event.clientX, event.clientY, false);
 		}
 		onMenuToggle?.(file.path);
 	}
 
-	function checkContextMenuPosition(mouseY: number) {
-		const dockContainer = nodeElement?.closest('.overflow-auto');
-		const menuHeight = 100;
-
-		if (!dockContainer) {
-			const viewportHeight = window.innerHeight;
-			showAbove = mouseY + menuHeight > viewportHeight && mouseY > menuHeight;
-			return;
-		}
-
-		const dockRect = dockContainer.getBoundingClientRect();
-		const spaceBelow = dockRect.bottom - mouseY;
-		const spaceAbove = mouseY - dockRect.top;
-		showAbove = spaceBelow < menuHeight && spaceAbove > menuHeight;
-	}
-
 	function handleAction(action: string, event: Event) {
 		event.stopPropagation();
 		onAction?.(action, file);
@@ -250,8 +208,8 @@
 			<div
 				role="menu"
 				tabindex="-1"
-				class="{menuOpenedViaContextMenu ? 'fixed' : 'absolute right-0'} {showAbove && !menuOpenedViaContextMenu ? 'bottom-full -mb-5' : !menuOpenedViaContextMenu ? 'top-full -mt-5' : ''} bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg py-1 w-44 max-h-80 overflow-y-auto z-50 shadow-lg"
-				style={menuOpenedViaContextMenu ? `left: ${contextMenuX}px; ${showAbove ? `bottom: ${window.innerHeight - contextMenuY}px;` : `top: ${contextMenuY}px;`}` : ''}
+				class="fixed bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg py-1 w-44 max-h-80 overflow-y-auto z-50 shadow-lg"
+				style={menuStyle}
 				onclick={(e) => e.stopPropagation()}
 			>
 				<!-- New File & New Folder (hanya untuk directory) -->

package/frontend/components/git/CommitForm.svelte

@@ -77,7 +77,7 @@
 
 <div class="px-2 py-2">
 	<div class="flex flex-col gap-1.5">
-		<div class="relative">
+		<div class="flex relative">
 			<textarea
 				bind:this={textareaEl}
 				bind:value={commitMessage}

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();
 
@@ -36,6 +37,12 @@
 	let isStartingStream = false; // Prevent concurrent start attempts
 	let lastStartRequestId: string | null = null; // Track the last start request to prevent duplicates
 
+	// Generation counter: increments on every session change (tab switch).
+	// Async operations (startStreaming, recovery) capture the current generation
+	// and bail out if it has changed, preventing stale operations from corrupting
+	// the new tab's state.
+	let streamingGeneration = 0;
+
 	let canvasElement = $state<HTMLCanvasElement | undefined>();
 	let setupCanvasTimeout: ReturnType<typeof setTimeout> | undefined;
 
@@ -99,6 +106,31 @@
 		lastProjectId = currentProjectId;
 	});
 
+	// Track session changes to reset stale state and increment generation counter.
+	// This runs BEFORE the streaming $effect, ensuring isReconnecting from the old
+	// tab doesn't leak into the new tab and that stale async operations bail out.
+	let lastTrackedSessionId: string | null = null;
+	$effect(() => {
+		const currentSessionId = sessionId;
+		if (currentSessionId !== lastTrackedSessionId) {
+			if (lastTrackedSessionId !== null) {
+				// Session actually changed (tab switch) — not initial mount
+				streamingGeneration++;
+				debug.log('webcodecs', `Session changed ${lastTrackedSessionId} → ${currentSessionId}, generation=${streamingGeneration}`);
+
+				// Reset states that belong to the old tab
+				if (isReconnecting) {
+					isReconnecting = false;
+				}
+				if (isNavigating) {
+					isNavigating = false;
+				}
+				lastStartRequestId = null; // Allow new start request for new session
+			}
+			lastTrackedSessionId = currentSessionId;
+		}
+	});
+
 	// Sync navigation state with webCodecsService
 	// This prevents recovery when DataChannel closes during navigation
 	$effect(() => {
@@ -424,32 +456,27 @@
 
 	// Start WebCodecs streaming
 	async function startStreaming() {
-		debug.log('webcodecs', `[DIAG] startStreaming() called: sessionId=${sessionId}, canvasElement=${!!canvasElement}, isStartingStream=${isStartingStream}, isWebCodecsActive=${isWebCodecsActive}, activeStreamingSessionId=${activeStreamingSessionId}, lastStartRequestId=${lastStartRequestId}`);
+		debug.log('webcodecs', `startStreaming() called: sessionId=${sessionId}, generation=${streamingGeneration}`);
 
 		if (!sessionId || !canvasElement) {
-			debug.log('webcodecs', `[DIAG] startStreaming() early exit: missing sessionId=${!sessionId} or canvasElement=${!canvasElement}`);
 			return;
 		}
 
 		// Prevent concurrent start attempts
 		if (isStartingStream) {
-			debug.log('webcodecs', '[DIAG] startStreaming() skipped: already starting stream');
+			debug.log('webcodecs', 'startStreaming() skipped: already starting stream');
 			return;
 		}
 
 		// If already streaming same session, skip
 		if (isWebCodecsActive && activeStreamingSessionId === sessionId) {
-			debug.log('webcodecs', '[DIAG] startStreaming() skipped: already streaming same session');
+			debug.log('webcodecs', 'startStreaming() skipped: already streaming same session');
 			return;
 		}
 
-		// Prevent duplicate requests for same session
-		const requestId = `${sessionId}-${Date.now()}`;
-		if (lastStartRequestId && lastStartRequestId.startsWith(sessionId)) {
-			debug.log('webcodecs', `[DIAG] startStreaming() skipped: duplicate request for ${sessionId}, lastStartRequestId=${lastStartRequestId}`);
-			return;
-		}
-		lastStartRequestId = requestId;
+		// Capture current generation — if it changes during async operations,
+		// it means the user switched tabs and this operation is stale
+		const myGeneration = streamingGeneration;
 
 		isStartingStream = true;
 		isStreamStarting = true; // Show loading overlay
@@ -463,10 +490,15 @@
 			if (isWebCodecsActive && activeStreamingSessionId !== sessionId) {
 				debug.log('webcodecs', `Session mismatch (active: ${activeStreamingSessionId}, requested: ${sessionId}), stopping old stream first`);
 				await stopStreaming();
-				// Small delay to ensure cleanup is complete
 				await new Promise(resolve => setTimeout(resolve, 100));
 			}
 
+			// Bail out if tab switched during cleanup
+			if (myGeneration !== streamingGeneration) {
+				debug.log('webcodecs', `Stale startStreaming (gen ${myGeneration} != ${streamingGeneration}), aborting`);
+				return;
+			}
+
 			// Create WebCodecs service if not exists
 			if (!webCodecsService) {
 				if (!projectId) {
@@ -479,7 +511,11 @@
 				// Setup error handler
 				webCodecsService.setErrorHandler((error: Error) => {
 					debug.error('webcodecs', 'Error:', error);
-					isStartingStream = false;
+					// NOTE: do NOT reset isStartingStream here.
+					// This handler fires from inside webCodecsService.startStreaming (before it returns false).
+					// Canvas.svelte's startStreaming retry loop is still running with isStartingStream=true.
+					// Resetting it here releases the concurrency guard prematurely, causing multiple
+					// concurrent streaming sessions to start (each triggering the streaming $effect).
 					connectionFailed = true;
 				});
 
@@ -554,27 +590,50 @@
 			const retryDelay = 300;
 
 			while (!success && retries < maxRetries) {
+				// Check generation before each attempt
+				if (myGeneration !== streamingGeneration) {
+					debug.log('webcodecs', `Stale startStreaming retry (gen ${myGeneration} != ${streamingGeneration}), aborting`);
+					break;
+				}
+
 				try {
+					// Guard: webCodecsService can be destroyed by a concurrent tab/project switch
+					if (!webCodecsService) {
+						debug.warn('webcodecs', 'webCodecsService became null during startStreaming, aborting');
+						break;
+					}
+
 					success = await webCodecsService.startStreaming(sessionId, canvasElement);
+
+					// Check generation after async operation
+					if (myGeneration !== streamingGeneration) {
+						debug.log('webcodecs', `Tab switched during startStreaming (gen ${myGeneration} != ${streamingGeneration}), discarding result`);
+						if (success && webCodecsService) {
+							await webCodecsService.stopStreaming();
+						}
+						break;
+					}
+
 					if (success) {
 						isWebCodecsActive = true;
 						isConnected = true;
 						activeStreamingSessionId = sessionId;
-						consecutiveFailures = 0; // Reset failure counter on success
-						startHealthCheck(hasRestoredSnapshot); // Skip first frame reset if snapshot
-						hasRestoredSnapshot = false; // Reset after using
+						consecutiveFailures = 0;
+						startHealthCheck(hasRestoredSnapshot);
+						hasRestoredSnapshot = false;
 						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');
+						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.
 					const isRetriable = error?.message?.includes('not found') ||
 						error?.message?.includes('invalid') ||
 						error?.message?.includes('Failed to start') ||
@@ -759,6 +818,7 @@
 			return;
 		}
 
+		const myGeneration = streamingGeneration;
 		consecutiveFailures++;
 		debug.log('webcodecs', `Recovery attempt ${consecutiveFailures}/${MAX_CONSECUTIVE_FAILURES} for session ${sessionId}`);
 
@@ -771,11 +831,18 @@
 
 		// Stop and restart streaming
 		try {
-			isRecovering = true; // Show "Reconnecting..." overlay
-			hasReceivedFirstFrame = false; // Reset for recovery
+			isRecovering = true;
+			hasReceivedFirstFrame = false;
 			await stopStreaming();
-			lastStartRequestId = null; // Clear to allow new start request
-			await new Promise(resolve => setTimeout(resolve, 500)); // Wait for cleanup
+			lastStartRequestId = null;
+			await new Promise(resolve => setTimeout(resolve, 500));
+
+			// Bail out if tab switched during cleanup
+			if (myGeneration !== streamingGeneration) {
+				debug.log('webcodecs', 'Recovery aborted - tab switched during cleanup');
+				return;
+			}
+
 			await startStreaming();
 		} catch (error) {
 			debug.error('webcodecs', 'Recovery failed:', error);
@@ -797,42 +864,43 @@
 			return;
 		}
 
-		debug.log('webcodecs', `🚀 Fast reconnect for session ${sessionId} (reconnect only, no backend stop)`);
+		const myGeneration = streamingGeneration;
+		debug.log('webcodecs', `🚀 Fast reconnect for session ${sessionId} (gen=${myGeneration})`);
 
 		try {
 			isRecovering = true;
 			isStartingStream = true;
-
-			// Set isReconnecting to prevent loading overlay during reconnect
-			// This ensures the last frame stays visible instead of "Loading preview..."
 			isReconnecting = true;
 
-			// Don't reset hasReceivedFirstFrame - keep showing last frame during reconnect
-
-			// Use reconnectToExistingStream which does NOT stop backend streaming
 			const success = await webCodecsService.reconnectToExistingStream(sessionId, canvasElement);
 
+			// Bail out if tab switched during reconnect
+			if (myGeneration !== streamingGeneration) {
+				debug.log('webcodecs', 'Fast reconnect aborted - tab switched');
+				return;
+			}
+
 			if (success) {
 				isWebCodecsActive = true;
 				isConnected = true;
 				activeStreamingSessionId = sessionId;
 				consecutiveFailures = 0;
-				startHealthCheck(true); // Skip resetting hasReceivedFirstFrame to keep overlay stable
+				startHealthCheck(true);
 				debug.log('webcodecs', '✅ Fast reconnect successful');
 			} else {
 				throw new Error('Reconnect returned false');
 			}
 		} catch (error) {
 			debug.error('webcodecs', 'Fast reconnect failed:', error);
-			// Fall back to regular recovery on failure
 			consecutiveFailures++;
 			isStartingStream = false;
-			isReconnecting = false; // Reset on failure
-			attemptRecovery();
+			isReconnecting = false;
+			if (myGeneration === streamingGeneration) {
+				attemptRecovery();
+			}
 		} finally {
 			isRecovering = false;
 			isStartingStream = false;
-			// Note: isReconnecting will be reset when first frame is received
 		}
 	}
 
@@ -945,12 +1013,27 @@
 
 				// Stop existing streaming first if session changed
 				// This ensures clean state before starting new stream
+				const capturedGeneration = streamingGeneration;
+
+				// IMMEDIATELY block the old session's frames from painting onto the canvas.
+				// Without this, A's DataChannel continues delivering frames for up to 30ms
+				// after we clear/snapshot-restore the canvas, overwriting B's content.
+				if (activeStreamingSessionId && activeStreamingSessionId !== sessionId) {
+					webCodecsService?.pauseRendering();
+				}
+
 				const doStartStreaming = async () => {
+					// Bail immediately if tab already changed
+					if (capturedGeneration !== streamingGeneration) return;
+
 					if (activeStreamingSessionId && activeStreamingSessionId !== sessionId) {
 						debug.log('webcodecs', `Session changed from ${activeStreamingSessionId} to ${sessionId}, stopping old stream first`);
 						await stopStreaming();
-						// Wait a bit for cleanup
-						await new Promise(resolve => setTimeout(resolve, 100));
+						// Bail if tab changed during cleanup
+						if (capturedGeneration !== streamingGeneration) return;
+						// Short wait for backend cleanup
+						await new Promise(resolve => setTimeout(resolve, 50));
+						if (capturedGeneration !== streamingGeneration) return;
 					}
 					await startStreaming();
 				};
@@ -958,7 +1041,7 @@
 				// Small delay to ensure backend session is ready
 				const timeout = setTimeout(() => {
 					doStartStreaming();
-				}, 50);
+				}, 30);
 
 				return () => clearTimeout(timeout);
 			}
@@ -988,10 +1071,9 @@
 			let lastMoveTime = 0;
 			const handleMouseMove = (e: MouseEvent) => {
 				const now = Date.now();
-				// Low-end optimized throttle: reduced CPU usage
-				// 32ms hover = ~30fps, 16ms drag = ~60fps
-				const throttleMs = isDragging ? 16 : 32;
-				if (now - lastMoveTime >= throttleMs) {
+				// 32ms = ~30fps — enough for smooth hover/drag while keeping CDP pipeline clear
+				// for clicks and keypresses (halving the rate halves CDP queue pressure)
+				if (now - lastMoveTime >= 32) {
 					lastMoveTime = now;
 					handleCanvasMouseMove(e, canvas);
 				}
@@ -1002,20 +1084,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 +1113,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 +1484,8 @@
 			getStats: () => webCodecsService?.getStats() ?? null,
 			getLatency: () => latencyMs,
 			// Navigation handling
-			notifyNavigationComplete
+			notifyNavigationComplete,
+			freezeForSpaNavigation: () => webCodecsService?.freezeForSpaNavigation()
 		};
 	});