@myrialabs/clopen 0.2.10 → 0.2.11

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/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
 		});