@myrialabs/clopen 0.2.10 → 0.2.12

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

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

@@ -163,57 +163,58 @@
 		progressPercent = 0;
 	}
 
-	// Reset progress bar immediately when active tab changes
-	// This prevents stale progress from a previous tab leaking into the new tab
+	// Reset progress bar immediately when active tab changes.
+	// A brief suppression window prevents the loading $effect from
+	// restarting progress before global state has synced to the new tab.
 	let previousActiveTabId = $state<string | null>(null);
+	let tabSwitchSuppressUntil = 0;
 	$effect(() => {
 		if (activeTabId !== previousActiveTabId) {
 			previousActiveTabId = activeTabId;
-			// Immediately stop any running progress animation and clear pending timeouts
 			stopProgress();
 			if (progressCompleteTimeout) {
 				clearTimeout(progressCompleteTimeout);
 				progressCompleteTimeout = null;
 			}
+			// Suppress loading $effect for a short window to allow state sync
+			tabSwitchSuppressUntil = Date.now() + 150;
 		}
 	});
 
 	// Watch loading states to control progress bar
-	// Progress bar should be active during:
-	// 1. isLaunchingBrowser: API call to launch browser
-	// 2. sessionInfo exists but isStreamReady false: waiting for first frame (initial load)
-	// 3. isNavigating: navigating within same session (link click)
-	// 4. isReconnecting: fast reconnect after navigation (keeps progress bar visible)
-	// 5. isLoading: generic loading state
 	$effect(() => {
 		const waitingForInitialFrame = sessionInfo && !isStreamReady && !isNavigating && !isReconnecting;
 		const shouldShowProgress = isLoading || isLaunchingBrowser || isNavigating || isReconnecting || waitingForInitialFrame;
 
+		// Skip during tab switch suppression window — state may be stale from old tab
+		if (Date.now() < tabSwitchSuppressUntil) {
+			return;
+		}
+
 		// Cancel any pending completion when a loading state becomes active
 		if (shouldShowProgress && progressCompleteTimeout) {
 			clearTimeout(progressCompleteTimeout);
 			progressCompleteTimeout = null;
 		}
 
-		// Only start if not already showing progress (prevent restart)
 		if (shouldShowProgress && !showProgress) {
 			startProgressAnimation();
 		}
-		// Only complete if currently showing progress - with debounce to handle state transitions
-		// This prevents the progress bar from briefly completing during isNavigating → isReconnecting transition
 		else if (!shouldShowProgress && showProgress && !progressCompleteTimeout) {
 			progressCompleteTimeout = setTimeout(() => {
 				progressCompleteTimeout = null;
-				// Re-check if we should still complete (state might have changed)
 				const stillShouldComplete = !isLoading && !isLaunchingBrowser && !isNavigating && !isReconnecting;
 				const stillWaitingForFrame = sessionInfo && !isStreamReady && !isNavigating && !isReconnecting;
 				if (stillShouldComplete && !stillWaitingForFrame) {
 					completeProgress();
 				}
-			}, 100); // 100ms debounce to handle state transitions
+			}, 100);
 		}
 	});
 
+	// Whether the currently active tab is under MCP control
+	const isMcpControlled = $derived(activeTabId != null && mcpControlledTabIds.has(activeTabId));
+
 	// Cleanup animation frame on component destroy
 	onDestroy(() => {
 		if (progressAnimationId) {
@@ -304,8 +305,9 @@
 						oninput={handleUrlInput}
 						onfocus={() => isUserTyping = true}
 						onblur={() => isUserTyping = false}
-						placeholder="Enter URL to preview..."
-						class="flex-1 pl-3 py-2 text-sm bg-transparent border-0 focus:outline-none min-w-0 text-ellipsis"
+						placeholder={isMcpControlled ? 'MCP controlled — navigation disabled' : 'Enter URL to preview...'}
+						disabled={isMcpControlled}
+						class="flex-1 pl-3 py-2 text-sm bg-transparent border-0 focus:outline-none min-w-0 text-ellipsis disabled:opacity-50 disabled:cursor-not-allowed"
 					/>
 					<div class="flex items-center gap-1 px-1.5">
 						{#if url}
@@ -318,8 +320,8 @@
 							</button>
 							<button
 								onclick={handleRefresh}
-								disabled={isLoading}
-								class="flex p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 disabled:opacity-50"
+								disabled={isLoading || isMcpControlled}
+								class="flex p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
 								title="Refresh current page"
 							>
 								<Icon name={isLoading ? 'lucide:loader-circle' : 'lucide:refresh-cw'} class="w-4 h-4 transition-transform duration-200 {isLoading ? 'animate-spin' : 'hover:rotate-180'}" />
@@ -327,9 +329,9 @@
 						{/if}
 						<button
 							onclick={handleGoClick}
-							disabled={!urlInput.trim() || isLoading}
-							class="ml-0.5 px-3.5 py-1 text-xs font-medium rounded-md bg-violet-500 hover:bg-violet-600 disabled:bg-slate-300 disabled:dark:bg-slate-600 text-white transition-all duration-200 disabled:opacity-50"
-							title="Navigate to URL"
+							disabled={!urlInput.trim() || isLoading || isMcpControlled}
+							class="ml-0.5 px-3.5 py-1 text-xs font-medium rounded-md bg-violet-500 hover:bg-violet-600 disabled:bg-slate-300 disabled:dark:bg-slate-600 text-white transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+							title={isMcpControlled ? 'Navigation disabled — MCP controlled' : 'Navigate to URL'}
 						>
 							Go
 						</button>

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

@@ -175,6 +175,17 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 					if (onErrorChange) onErrorChange(null);
 				}
 
+				// Backend created this tab with setActive=true, which may override a tab switch
+				// that happened while the 60-second launch call was awaiting. Re-assert the
+				// correct active tab on the backend if the user switched away during launch.
+				if (tabId !== tabManager.activeTabId && tabManager.activeTabId) {
+					const currentActiveTab = tabManager.getTab(tabManager.activeTabId);
+					if (currentActiveTab?.sessionId) {
+						debug.log('preview', `🔄 Tab switched during launch — re-asserting active backend tab: ${tabManager.activeTabId}`);
+						void switchToBackendTab(currentActiveTab.sessionId, getProjectId());
+					}
+				}
+
 				} else {
 				const errorMsg = result.error || 'Unknown error';
 				debug.error('preview', `❌ Browser launch failed:`, errorMsg);
@@ -210,7 +221,8 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 
 			// Get current projectId
 			const projectId = getProjectId();
-			const result = await navigateBrowserOp(newUrl, projectId);
+			// Send explicit tabId (backend sessionId) to prevent cross-contamination during rapid switching
+			const result = await navigateBrowserOp(newUrl, projectId, tab.sessionId);
 
 			if (result.success) {
 				const finalUrl = result.finalUrl || newUrl;

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

@@ -173,6 +173,9 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 		tabManager.updateTab(tabId, { consoleLogs: [] });
 	}
 
+	// Safety timeout handles to clear stale isLoading if navigation-complete never arrives
+	const loadingTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
 	function handleNavigationLoading(tabId: string, data: any) {
 		if (data && data.url) {
 			const tab = tabManager.getTab(tabId);
@@ -180,17 +183,26 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 			// 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,
 				url: data.url,
 				title: getTabTitle(data.url)
 			});
 
-			// Only update parent if this is the active tab AND not already navigating via HTTP
-			// When navigating via HTTP (Go button), the HTTP response will handle URL updates
-			// to avoid race conditions with stream events overwriting the final redirected URL
+			// Safety timeout: if no navigation-complete event arrives within 15s,
+			// clear isLoading to prevent it from being stuck indefinitely.
+			// This handles aborted navigations (user clicks another link before load).
+			const existing = loadingTimeouts.get(tabId);
+			if (existing) clearTimeout(existing);
+			loadingTimeouts.set(tabId, setTimeout(() => {
+				loadingTimeouts.delete(tabId);
+				const currentTab = tabManager.getTab(tabId);
+				if (currentTab?.isLoading) {
+					debug.warn('preview', `⏰ Safety timeout: clearing stale isLoading for tab ${tabId}`);
+					tabManager.updateTab(tabId, { isLoading: false });
+				}
+			}, 15000));
+
 			if (tabId === tabManager.activeTabId && onNavigationUpdate && !tab?.isNavigating) {
 				onNavigationUpdate(tabId, data.url);
 			}
@@ -198,6 +210,13 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 	}
 
 	function handleNavigation(tabId: string, data: any, tab: PreviewTab) {
+		// Clear safety timeout — navigation completed normally
+		const timeout = loadingTimeouts.get(tabId);
+		if (timeout) {
+			clearTimeout(timeout);
+			loadingTimeouts.delete(tabId);
+		}
+
 		if (data && data.url && data.url !== tab.url) {
 			debug.log('preview', `🧭 Navigation completed for tab ${tabId}: ${tab.url} → ${data.url}`);
 			tabManager.updateTab(tabId, {
@@ -207,12 +226,10 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 				title: getTabTitle(data.url)
 			});
 
-			// Only update parent if this is the active tab
 			if (tabId === tabManager.activeTabId && onNavigationUpdate) {
 				onNavigationUpdate(tabId, data.url);
 			}
 		} else if (data && data.url === tab.url) {
-			// Same URL but navigation completed (e.g., page refresh)
 			debug.log('preview', `🔄 Same URL navigation completed for tab ${tabId}: ${data.url}`);
 			tabManager.updateTab(tabId, {
 				isLoading: false,
@@ -222,6 +239,13 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 	}
 
 	function handleNavigationSpa(tabId: string, data: any, tab: PreviewTab) {
+		// Clear safety timeout — SPA navigation also resolves the loading state
+		const timeout = loadingTimeouts.get(tabId);
+		if (timeout) {
+			clearTimeout(timeout);
+			loadingTimeouts.delete(tabId);
+		}
+
 		if (data && data.url && data.url !== tab.url) {
 			debug.log('preview', `🔄 SPA navigation for tab ${tabId}: ${tab.url} → ${data.url}`);
 

package/frontend/components/preview/browser/core/tab-operations.svelte.ts

@@ -122,9 +122,10 @@ export async function launchBrowser(
 }
 
 /**
- * Navigate active tab to new URL
+ * Navigate a specific tab to new URL.
+ * Requires explicit tabId to prevent cross-contamination during rapid tab switching.
  */
-export async function navigateBrowser(newUrl: string, projectId: string): Promise<NavigateResult> {
+export async function navigateBrowser(newUrl: string, projectId: string, tabId?: string): Promise<NavigateResult> {
 	if (!newUrl) {
 		return { success: false, error: 'No URL provided' };
 	}
@@ -134,8 +135,8 @@ export async function navigateBrowser(newUrl: string, projectId: string): Promis
 	}
 
 	try {
-		// Backend uses active tab automatically
-		const data = await ws.http('preview:browser-tab-navigate', { url: newUrl }, 30000);
+		// Always send explicit tabId to prevent race conditions during rapid tab switching
+		const data = await ws.http('preview:browser-tab-navigate', { url: newUrl, tabId }, 30000);
 
 		return { success: true, finalUrl: data.finalUrl };
 	} catch (error) {

package/frontend/components/settings/engines/AIEnginesSettings.svelte

@@ -73,7 +73,7 @@
 	let openCodeCommandCopiedTimer: ReturnType<typeof setTimeout> | null = null;
 
 	// Debug PTY (xterm.js)
-	const showDebug = $state(false);
+	const showDebug = $state(true);
 	let debugTermContainer = $state<HTMLDivElement>();
 	let debugTerminal: Terminal | null = null;
 	let debugFitAddon: FitAddon | null = null;

package/frontend/components/settings/general/DataManagementSettings.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { addNotification } from '$frontend/stores/ui/notification.svelte';
-	import { resetToDefaults } from '$frontend/stores/features/settings.svelte';
 	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
 	import Icon from '../../common/display/Icon.svelte';
 	import { debug } from '$shared/utils/logger';
@@ -41,68 +40,16 @@
 		}
 	}
 
-	async function resetSettings() {
-		const confirmed = await showConfirm({
-			title: 'Reset Settings',
-			message:
-				'Are you sure you want to reset all settings to defaults? This will not delete your projects or conversations.',
-			type: 'warning',
-			confirmText: 'Reset Settings',
-			cancelText: 'Cancel'
-		});
 
-		if (confirmed) {
-			resetToDefaults();
-			addNotification({
-				type: 'success',
-				title: 'Settings Reset',
-				message: 'All settings have been restored to defaults'
-			});
-		}
-	}
 </script>
 
 <div class="py-1">
 	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Data Management</h3>
 	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">
-		Export, import, or clear your application data
+		Manage your application data
 	</p>
 
 	<div class="flex flex-col gap-4">
-		<!-- Storage Info -->
-		<div
-			class="flex items-center gap-3.5 p-4 bg-slate-100/50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-lg"
-		>
-			<Icon name="lucide:hard-drive" class="w-5 h-5 text-slate-500 dark:text-slate-400" />
-			<div class="flex-1">
-				<div class="text-sm font-medium text-slate-900 dark:text-slate-100">Local Storage</div>
-				<div class="text-xs text-slate-600 dark:text-slate-400">Data is stored locally in your browser</div>
-			</div>
-		</div>
-
-		<!-- Action Cards -->
-		<div class="flex flex-col gap-3">
-			<!-- Reset Settings -->
-			<div
-				class="flex items-center justify-between gap-4 py-3 px-4 bg-slate-100/50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-lg"
-			>
-				<div class="flex items-center gap-3">
-					<Icon name="lucide:refresh-cw" class="w-4.5 h-4.5 text-slate-600 dark:text-slate-400" />
-					<div class="text-left">
-						<div class="text-sm font-medium text-slate-900 dark:text-slate-100">Reset Settings</div>
-						<div class="text-xs text-slate-600 dark:text-slate-400">Restore default settings</div>
-					</div>
-				</div>
-				<button
-					type="button"
-					class="px-4 py-2 bg-slate-200 dark:bg-slate-700 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium cursor-pointer transition-all duration-150 hover:bg-slate-300 dark:hover:bg-slate-600 hover:border-slate-400 dark:hover:border-slate-500 disabled:opacity-60 disabled:cursor-not-allowed whitespace-nowrap"
-					onclick={resetSettings}
-				>
-					Reset
-				</button>
-			</div>
-		</div>
-
 		<!-- Danger Zone -->
 		<div class="mt-2">
 			<div class="flex items-center gap-2 mb-3 text-xs font-medium text-red-600 dark:text-red-400">