@myrialabs/clopen 0.2.10 → 0.2.11

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

@@ -16,7 +16,9 @@ export const streamPreviewHandler = createRouter()
 	.http(
 		'preview:browser-stream-start',
 		{
-			data: t.Object({}),
+			data: t.Object({
+				tabId: t.Optional(t.String())
+			}),
 			response: t.Object({
 				success: t.Boolean(),
 				message: t.Optional(t.String()),
@@ -34,9 +36,10 @@ export const streamPreviewHandler = createRouter()
 			// Get project-specific preview service
 			const previewService = browserPreviewServiceManager.getService(projectId);
 
-			const tab = previewService.getActiveTab();
+			// Use explicit tabId if provided, otherwise fall back to active tab
+			const tab = data.tabId ? previewService.getTab(data.tabId) : previewService.getActiveTab();
 			if (!tab) {
-				throw new Error('No active tab');
+				throw new Error(data.tabId ? `Tab not found: ${data.tabId}` : 'No active tab');
 			}
 
 			const sessionId = tab.id;
@@ -73,7 +76,9 @@ export const streamPreviewHandler = createRouter()
 	.http(
 		'preview:browser-stream-offer',
 		{
-			data: t.Object({}),
+			data: t.Object({
+				tabId: t.Optional(t.String())
+			}),
 			response: t.Object({
 				success: t.Boolean(),
 				offer: t.Optional(
@@ -90,9 +95,9 @@ export const streamPreviewHandler = createRouter()
 			// Get project-specific preview service
 			const previewService = browserPreviewServiceManager.getService(projectId);
 
-			const tab = previewService.getActiveTab();
+			const tab = data.tabId ? previewService.getTab(data.tabId) : previewService.getActiveTab();
 			if (!tab) {
-				throw new Error('No active tab');
+				throw new Error(data.tabId ? `Tab not found: ${data.tabId}` : 'No active tab');
 			}
 
 			const offer = await previewService.getWebCodecsOffer(tab.id);
@@ -117,7 +122,8 @@ export const streamPreviewHandler = createRouter()
 				answer: t.Object({
 					type: t.String(),
 					sdp: t.Optional(t.String())
-				})
+				}),
+				tabId: t.Optional(t.String())
 			}),
 			response: t.Object({
 				success: t.Boolean()
@@ -129,9 +135,9 @@ export const streamPreviewHandler = createRouter()
 			// Get project-specific preview service
 			const previewService = browserPreviewServiceManager.getService(projectId);
 
-			const tab = previewService.getActiveTab();
+			const tab = data.tabId ? previewService.getTab(data.tabId) : previewService.getActiveTab();
 			if (!tab) {
-				throw new Error('No active tab');
+				throw new Error(data.tabId ? `Tab not found: ${data.tabId}` : 'No active tab');
 			}
 
 			const { answer } = data;
@@ -150,7 +156,8 @@ export const streamPreviewHandler = createRouter()
 					candidate: t.Optional(t.String()),
 					sdpMid: t.Optional(t.Union([t.String(), t.Null()])),
 					sdpMLineIndex: t.Optional(t.Union([t.Number(), t.Null()]))
-				})
+				}),
+				tabId: t.Optional(t.String())
 			}),
 			response: t.Object({
 				success: t.Boolean()
@@ -162,9 +169,9 @@ export const streamPreviewHandler = createRouter()
 			// Get project-specific preview service
 			const previewService = browserPreviewServiceManager.getService(projectId);
 
-			const tab = previewService.getActiveTab();
+			const tab = data.tabId ? previewService.getTab(data.tabId) : previewService.getActiveTab();
 			if (!tab) {
-				throw new Error('No active tab');
+				throw new Error(data.tabId ? `Tab not found: ${data.tabId}` : 'No active tab');
 			}
 
 			const { candidate } = data;
@@ -178,7 +185,9 @@ export const streamPreviewHandler = createRouter()
 	.http(
 		'preview:browser-stream-stop',
 		{
-			data: t.Object({}),
+			data: t.Object({
+				tabId: t.Optional(t.String())
+			}),
 			response: t.Object({
 				success: t.Boolean()
 			})
@@ -189,9 +198,9 @@ export const streamPreviewHandler = createRouter()
 			// Get project-specific preview service
 			const previewService = browserPreviewServiceManager.getService(projectId);
 
-			const tab = previewService.getActiveTab();
+			const tab = data.tabId ? previewService.getTab(data.tabId) : previewService.getActiveTab();
 			if (!tab) {
-				throw new Error('No active tab');
+				throw new Error(data.tabId ? `Tab not found: ${data.tabId}` : 'No active tab');
 			}
 
 			await previewService.stopWebCodecsStreaming(tab.id);

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/components/Canvas.svelte

@@ -37,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;
 
@@ -100,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(() => {
@@ -425,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
@@ -464,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) {
@@ -480,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;
 				});
 
@@ -555,19 +590,39 @@
 			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.
-						// 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})`);
@@ -579,7 +634,6 @@
 					}
 					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') ||
@@ -764,6 +818,7 @@
 			return;
 		}
 
+		const myGeneration = streamingGeneration;
 		consecutiveFailures++;
 		debug.log('webcodecs', `Recovery attempt ${consecutiveFailures}/${MAX_CONSECUTIVE_FAILURES} for session ${sessionId}`);
 
@@ -776,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);
@@ -802,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
 		}
 	}
 
@@ -950,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();
 				};
@@ -963,7 +1041,7 @@
 				// Small delay to ensure backend session is ready
 				const timeout = setTimeout(() => {
 					doStartStreaming();
-				}, 50);
+				}, 30);
 
 				return () => clearTimeout(timeout);
 			}
@@ -993,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);
 				}

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

@@ -70,6 +70,19 @@
 	let showNavigationOverlay = $state(false);
 	let overlayHideTimeout: ReturnType<typeof setTimeout> | null = null;
 
+	// Immediately reset navigation overlay on tab switch to prevent stale overlay from old tab
+	let previousOverlaySessionId: string | null = null;
+	$effect(() => {
+		if (sessionId !== previousOverlaySessionId) {
+			previousOverlaySessionId = sessionId;
+			if (overlayHideTimeout) {
+				clearTimeout(overlayHideTimeout);
+				overlayHideTimeout = null;
+			}
+			showNavigationOverlay = false;
+		}
+	});
+
 	// 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
@@ -90,9 +103,11 @@
 		else if (!shouldShowOverlay && showNavigationOverlay && !overlayHideTimeout) {
 			overlayHideTimeout = setTimeout(() => {
 				overlayHideTimeout = null;
-				// Re-check if we should still hide
-				const stillShouldHide = !(isNavigating || isReconnecting) || !isStreamReady;
-				if (stillShouldHide) {
+				// Re-check: only isNavigating controls this overlay.
+				// isReconnecting is intentionally excluded — it serves a different purpose
+				// (preventing solid loading overlay) and can stay true for a long time
+				// (e.g. ICE recovery), which would keep the overlay stuck indefinitely.
+				if (!isNavigating) {
 					showNavigationOverlay = false;
 				}
 			}, 100); // 100ms debounce