@myrialabs/clopen 0.2.9 → 0.2.11

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

@@ -70,10 +70,24 @@
 	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
+	// Immediately reset navigation overlay on tab switch to prevent stale overlay from old tab
+	let previousOverlaySessionId: string | null = null;
 	$effect(() => {
-		const shouldShowOverlay = (isNavigating || isReconnecting) && isStreamReady;
+		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
+	$effect(() => {
+		const shouldShowOverlay = isNavigating && isStreamReady;
 
 		// Cancel any pending hide when overlay should show
 		if (shouldShowOverlay && overlayHideTimeout) {
@@ -89,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
@@ -385,6 +401,7 @@
 						bind:isNavigating
 						bind:isReconnecting
 						bind:touchMode
+						touchTarget={previewContainer}
 						onInteraction={handleCanvasInteraction}
 						onCursorUpdate={handleCursorUpdate}
 						onFrameUpdate={handleFrameUpdate}
@@ -408,7 +425,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 +434,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,42 +163,58 @@
 		progressPercent = 0;
 	}
 
+	// 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;
+			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) {
@@ -289,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}
@@ -303,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'}" />
@@ -312,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;
@@ -771,6 +783,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;
@@ -169,23 +173,36 @@ 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);
-			// 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().
 			tabManager.updateTab(tabId, {
 				isLoading: true,
-				isNavigating,
 				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);
 			}
@@ -193,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, {
@@ -202,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,
@@ -216,6 +238,41 @@ 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}`);
+
+			// 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/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/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/chat/chat.service.ts

@@ -39,6 +39,7 @@ class ChatService {
   private lastEventSeq = new Map<string, number>(); // Sequence-based deduplication
   private cancelledProcessIds = new Set<string>(); // Track ALL cancelled streams to ignore late events
   private reconnected: boolean = false; // Whether we've reconnected to an active stream
+  private cancelSafetyTimer: ReturnType<typeof setTimeout> | null = null;
 
   static loadingTexts: string[] = [
     'thinking', 'processing', 'analyzing', 'calculating', 'computing',
@@ -170,6 +171,7 @@ class ChatService {
 
       this.streamCompleted = true;
       this.reconnected = false;
+      this.clearCancelSafetyTimer();
       this.setProcessState({ isLoading: false, isWaitingInput: false, isCancelling: false });
 
       // Mark any tool_use blocks that never got a tool_result
@@ -196,6 +198,7 @@ class ChatService {
       this.streamCompleted = true;
       this.reconnected = false;
       this.activeProcessId = null;
+      this.clearCancelSafetyTimer();
       // Don't clear isCancelling here — it causes a race with presence.
       // The chat:cancelled WS event arrives before broadcastPresence() updates,
       // so clearing isCancelling lets the presence $effect re-enable isLoading
@@ -485,9 +488,28 @@ class ChatService {
     // before a stale non-reasoning stream_event instead of at the end).
     this.cleanupStreamEvents();
 
-    // No safety timeout needed — cancel completion is confirmed via WS events:
-    // chat:cancelled clears isLoading, then presence update clears isCancelling.
-    // If WS disconnects, reconnection logic re-fetches presence and clears state.
+    // Safety timeout: if backend events (chat:cancelled + presence update) don't
+    // arrive within 10 seconds, force-clear isCancelling to prevent infinite loader.
+    // This catches edge cases: WS disconnect during cancel, engine.cancel() timeout,
+    // or race conditions between presence update and chat:cancelled event ordering.
+    this.clearCancelSafetyTimer();
+    this.cancelSafetyTimer = setTimeout(() => {
+      this.cancelSafetyTimer = null;
+      if (appState.isCancelling) {
+        debug.warn('chat', 'Cancel safety timeout: force-clearing isCancelling after 10s');
+        this.setProcessState({ isCancelling: false, isLoading: false }, chatSessionId);
+      }
+    }, 10000);
+  }
+
+  /**
+   * Clear the cancel safety timer (called when cancel completes normally)
+   */
+  private clearCancelSafetyTimer(): void {
+    if (this.cancelSafetyTimer) {
+      clearTimeout(this.cancelSafetyTimer);
+      this.cancelSafetyTimer = null;
+    }
   }
 
   /**

package/frontend/services/notification/push.service.ts

@@ -54,8 +54,8 @@ async function sendNotification(
 	
 	try {
 		const notification = new Notification(title, {
-			icon: '/favicon.ico',
-			badge: '/favicon.ico',
+			icon: '/favicon.svg',
+			badge: '/favicon.svg',
 			...options
 		});