@myrialabs/clopen 0.2.5 → 0.2.6

package/frontend/components/chat/tools/components/TerminalCommand.svelte

@@ -33,14 +33,14 @@
 			<span class="text-xs font-medium text-slate-700 dark:text-slate-300">Command:</span>
 		</div>
 		{#if timeout}
-			<div class="inline-block ml-auto text-xs bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">
+			<div class="inline-block ml-auto text-3xs bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">
 				Timeout: {timeout}ms
 			</div>
 		{/if}
 	</div>
 
 	<!-- Terminal-style command display -->
-	<div class="bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60 rounded-md p-2.5 font-mono text-sm">
+	<div class="max-h-64 overflow-y-auto bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60 rounded-md p-2.5 font-mono text-sm">
 		<div class="flex items-start gap-2">
 			<span class="text-green-600 dark:text-green-400 select-none">$</span>
 			<div class="flex-1 text-slate-900 dark:text-slate-200 break-all">

package/frontend/components/files/FileViewer.svelte

@@ -40,6 +40,7 @@
 		externallyChanged?: boolean;
 		onForceReload?: () => void;
 		isBinary?: boolean;
+		projectPath?: string;
 	}
 
 	const {
@@ -56,9 +57,19 @@
 		onToggleWordWrap,
 		externallyChanged = false,
 		onForceReload,
-		isBinary = false
+		isBinary = false,
+		projectPath = ''
 	}: Props = $props();
 
+	// Relative path for display
+	const displayPath = $derived.by(() => {
+		if (!file) return '';
+		if (projectPath && file.path.startsWith(projectPath)) {
+			return file.path.slice(projectPath.length).replace(/^[/\\]/, '');
+		}
+		return file.path;
+	});
+
 	// Theme state
 	const isDark = $derived(themeStore.isDark);
 	const monacoTheme = $derived(isDark ? 'vs-dark' : 'vs-light');
@@ -273,7 +284,7 @@
 						{file.name}
 					</h3>
 					<p class="text-xs text-slate-600 dark:text-slate-400 truncate mt-0.5">
-						<span class="hidden sm:inline">{file.path} • </span> {formatFileSize(file.size || 0)}
+						<span class="hidden sm:inline">{displayPath} • </span> {formatFileSize(file.size || 0)}
 					</p>
 				</div>
 			</div>

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

@@ -160,6 +160,7 @@
 		if (currentProjectId && currentProjectId !== previousProjectId && previousProjectId !== '') {
 			debug.log('preview', `🔄 Project changed: ${previousProjectId} → ${currentProjectId}`);
 			previousProjectId = currentProjectId;
+			sessionsRecovered = false; // Reset for new project (enables empty tab creation if needed)
 			coordinator.switchProject();
 		}
 	});

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

@@ -47,17 +47,24 @@
 	let isRecovering = $state(false); // Track recovery attempts
 	let connectionFailed = $state(false); // Track if connection actually failed (not just slow)
 	let hasRequestedScreencastRefresh = false; // Track if we've already requested refresh for this stream
+	let screencastRefreshCount = 0; // Track retry count for stuck detection
 	let navigationJustCompleted = false; // Track if navigation just completed (for fast refresh)
 
+	// Canvas snapshot storage for instant tab switching
+	// Stores a clone of the canvas per sessionId so switching back shows content immediately
+	const canvasSnapshots = new Map<string, HTMLCanvasElement>();
+	const MAX_SNAPSHOTS = 10;
+	let hasRestoredSnapshot = false; // Prevents canvas clear/reset during streaming start
+
 	// Recovery is only triggered by ACTUAL failures, not timeouts
 	// - ICE connection failed
 	// - WebCodecs connection closed unexpectedly
 	// - Explicit errors
 	const MAX_CONSECUTIVE_FAILURES = 2;
 	const HEALTH_CHECK_INTERVAL = 2000; // Check every 2 seconds for connection health
-	const FRAME_CHECK_INTERVAL = 500; // Check for first frame every 500ms (just for UI update, not recovery)
-	const STUCK_STREAM_TIMEOUT = 5000; // Fallback: Request screencast refresh after 5 seconds of connected but no frame
-	const NAVIGATION_FAST_REFRESH_DELAY = 500; // Fast refresh after navigation: 500ms
+	const FRAME_CHECK_INTERVAL = 100; // Fallback poll for first frame (primary path is onFirstFrame callback)
+	const STUCK_STREAM_TIMEOUT = 3000; // Fallback: Request screencast refresh after 3 seconds of connected but no frame
+	const NAVIGATION_FAST_REFRESH_DELAY = 300; // Fast refresh after navigation: 300ms
 
 	// Sync isStreamReady with hasReceivedFirstFrame for parent component
 	$effect(() => {
@@ -73,6 +80,10 @@
 		if (lastProjectId && currentProjectId && lastProjectId !== currentProjectId) {
 			debug.log('webcodecs', `🔄 Project changed (${lastProjectId} → ${currentProjectId}), destroying old WebCodecs service`);
 
+			// Clear canvas snapshots - they belong to old project's sessions
+			canvasSnapshots.clear();
+			hasRestoredSnapshot = false;
+
 			// Destroy old service
 			if (webCodecsService) {
 				webCodecsService.destroy();
@@ -416,7 +427,10 @@
 
 		isStartingStream = true;
 		isStreamStarting = true; // Show loading overlay
-		hasReceivedFirstFrame = false; // Reset first frame state
+		// Don't reset if we restored a snapshot - keep showing it
+		if (!hasRestoredSnapshot) {
+			hasReceivedFirstFrame = false; // Reset first frame state
+		}
 
 		try {
 			// If streaming a different session, stop first
@@ -480,6 +494,25 @@
 					onStatsUpdate(stats);
 				});
 
+				// Setup first frame handler - fires immediately when first frame decoded
+				// This eliminates the 500ms polling delay for hiding the loading overlay
+				webCodecsService.setFirstFrameHandler(() => {
+					if (!hasReceivedFirstFrame) {
+						debug.log('webcodecs', 'First frame callback - immediately updating UI');
+						hasReceivedFirstFrame = true;
+						consecutiveFailures = 0;
+						connectionFailed = false;
+					}
+
+					// Always reset reconnecting state on first real frame
+					// (outside !hasReceivedFirstFrame to handle snapshot + reconnect case)
+					if (isReconnecting) {
+						setTimeout(() => {
+							isReconnecting = false;
+						}, 300);
+					}
+				});
+
 				// Setup cursor change handler
 				webCodecsService.setOnCursorChange((cursor: string) => {
 					updateCanvasCursor(cursor);
@@ -491,8 +524,8 @@
 
 			let success = false;
 			let retries = 0;
-			const maxRetries = 5; // Increased for rapid tab switching
-			const retryDelay = 500; // Increased delay for backend cleanup
+			const maxRetries = 5;
+			const retryDelay = 300;
 
 			while (!success && retries < maxRetries) {
 				try {
@@ -502,7 +535,8 @@
 						isConnected = true;
 						activeStreamingSessionId = sessionId;
 						consecutiveFailures = 0; // Reset failure counter on success
-						startHealthCheck(); // Start monitoring for stuck streams
+						startHealthCheck(hasRestoredSnapshot); // Skip first frame reset if snapshot
+						hasRestoredSnapshot = false; // Reset after using
 						debug.log('webcodecs', 'Streaming started successfully');
 						break;
 					}
@@ -533,6 +567,7 @@
 		} finally {
 			isStartingStream = false;
 			isStreamStarting = false; // Hide "Launching browser..." (but may still show "Connecting..." until first frame)
+			hasRestoredSnapshot = false; // Always reset in finally
 		}
 	}
 
@@ -561,6 +596,7 @@
 		}
 		connectionFailed = false;
 		hasRequestedScreencastRefresh = false; // Reset for new stream
+		screencastRefreshCount = 0; // Reset retry counter
 
 		const startTime = Date.now();
 
@@ -587,6 +623,7 @@
 				consecutiveFailures = 0;
 				connectionFailed = false;
 				hasRequestedScreencastRefresh = false; // Reset on success
+				screencastRefreshCount = 0; // Reset retry counter on success
 
 				// Reset reconnecting state after successful frame reception
 				// This completes the fast reconnect cycle
@@ -621,10 +658,21 @@
 			// STUCK STREAM DETECTION (FALLBACK): If connected but no first frame for too long,
 			// request screencast refresh (hot-swap) to restart CDP screencast.
 			// This handles cases where WebRTC is connected but CDP frames aren't flowing.
-			if (stats?.isConnected && !stats?.firstFrameRendered && elapsed >= STUCK_STREAM_TIMEOUT && !hasRequestedScreencastRefresh) {
-				debug.warn('webcodecs', `Stream appears stuck (connected but no frame for ${elapsed}ms), requesting screencast refresh`);
-				hasRequestedScreencastRefresh = true;
-				onRequestScreencastRefresh();
+			// Retries: 1st at 3s (screencast refresh), 2nd at 6s (another refresh), 3rd at 10s (full recovery)
+			if (stats?.isConnected && !stats?.firstFrameRendered && !hasRequestedScreencastRefresh) {
+				const MAX_SCREENCAST_RETRIES = 2;
+				const retryThreshold = STUCK_STREAM_TIMEOUT + (screencastRefreshCount * 3000); // 3s, 6s
+
+				if (elapsed >= retryThreshold && screencastRefreshCount < MAX_SCREENCAST_RETRIES) {
+					screencastRefreshCount++;
+					debug.warn('webcodecs', `Stream stuck (connected, no frame for ${elapsed}ms), screencast refresh attempt ${screencastRefreshCount}/${MAX_SCREENCAST_RETRIES}`);
+					onRequestScreencastRefresh();
+				} else if (elapsed >= 10000 && screencastRefreshCount >= MAX_SCREENCAST_RETRIES) {
+					// Screencast refreshes didn't help - attempt full recovery
+					debug.warn('webcodecs', `Stream still stuck after ${screencastRefreshCount} screencast refreshes (${elapsed}ms), attempting full recovery`);
+					hasRequestedScreencastRefresh = true; // Prevent further retries
+					attemptRecovery();
+				}
 			}
 
 		}, FRAME_CHECK_INTERVAL);
@@ -770,11 +818,11 @@
 			lastStartRequestId = null; // Clear to allow new requests
 			// Note: Don't reset hasReceivedFirstFrame here - let startStreaming do it
 			// This prevents flashing when switching tabs
-			// Clear canvas to prevent stale frames, BUT keep last frame during navigation
-			if (!isNavigating) {
+			// Clear canvas to prevent stale frames, BUT keep last frame during navigation or snapshot restore
+			if (!isNavigating && !hasRestoredSnapshot) {
 				clearCanvas();
 			} else {
-				debug.log('webcodecs', 'Skipping canvas clear during navigation - keeping last frame');
+				debug.log('webcodecs', `Skipping canvas clear - navigation: ${isNavigating}, snapshot: ${hasRestoredSnapshot}`);
 			}
 		}
 	}
@@ -813,10 +861,52 @@
 			const needsStreaming = !isWebCodecsActive || activeStreamingSessionId !== sessionId;
 
 			if (needsStreaming) {
-				// Clear canvas immediately when session changes to prevent stale frames
 				if (activeStreamingSessionId !== sessionId) {
-					clearCanvas();
-					hasReceivedFirstFrame = false; // Reset to show loading overlay
+					// SNAPSHOT: Save current canvas before switching to new session
+					if (activeStreamingSessionId && hasReceivedFirstFrame && canvasElement.width > 0) {
+						try {
+							const clone = document.createElement('canvas');
+							clone.width = canvasElement.width;
+							clone.height = canvasElement.height;
+							const cloneCtx = clone.getContext('2d');
+							if (cloneCtx) {
+								cloneCtx.drawImage(canvasElement, 0, 0);
+								// Limit snapshot count
+								if (canvasSnapshots.size >= MAX_SNAPSHOTS) {
+									const firstKey = canvasSnapshots.keys().next().value;
+									if (firstKey) canvasSnapshots.delete(firstKey);
+								}
+								canvasSnapshots.set(activeStreamingSessionId, clone);
+								debug.log('webcodecs', `📸 Saved canvas snapshot for session ${activeStreamingSessionId}`);
+							}
+						} catch (e) {
+							debug.warn('webcodecs', 'Failed to capture canvas snapshot:', e);
+						}
+					}
+
+					// SNAPSHOT: Restore for new session if available
+					const existingSnapshot = canvasSnapshots.get(sessionId);
+					if (existingSnapshot) {
+						setupCanvasInternal(); // Ensure canvas dimensions are correct
+						try {
+							const ctx = canvasElement.getContext('2d');
+							if (ctx) {
+								ctx.drawImage(existingSnapshot, 0, 0, canvasElement.width, canvasElement.height);
+								hasRestoredSnapshot = true;
+								// Don't reset hasReceivedFirstFrame - snapshot is visible
+								debug.log('webcodecs', `📸 Restored canvas snapshot for session ${sessionId}`);
+							}
+						} catch (e) {
+							debug.warn('webcodecs', 'Failed to restore canvas snapshot:', e);
+							hasRestoredSnapshot = false;
+							clearCanvas();
+							hasReceivedFirstFrame = false;
+						}
+					} else {
+						hasRestoredSnapshot = false;
+						clearCanvas();
+						hasReceivedFirstFrame = false; // Reset to show loading overlay
+					}
 				}
 
 				// Stop existing streaming first if session changed
@@ -831,12 +921,10 @@
 					await startStreaming();
 				};
 
-				// Longer delay to ensure backend session is fully ready
-				// This is especially important during viewport/device change
-				// when session is being recreated
+				// Small delay to ensure backend session is ready
 				const timeout = setTimeout(() => {
 					doStartStreaming();
-				}, 200);
+				}, 50);
 
 				return () => clearTimeout(timeout);
 			}
@@ -1039,6 +1127,7 @@
 
 	onDestroy(() => {
 		stopHealthCheck(); // Stop health monitoring
+		canvasSnapshots.clear(); // Free snapshot memory
 		if (webCodecsService) {
 			webCodecsService.destroy();
 			webCodecsService = null;

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

@@ -52,8 +52,9 @@
 	let previewContainer = $state<HTMLDivElement | undefined>();
 
 	// Solid loading overlay: shown during initial load states
+	// Skip when lastFrameData exists (tab was previously loaded - snapshot handles display)
 	const showSolidOverlay = $derived(
-		isLaunchingBrowser || !sessionInfo || (!isStreamReady && !isNavigating && !isReconnecting)
+		isLaunchingBrowser || !sessionInfo || (!isStreamReady && !isNavigating && !isReconnecting && !lastFrameData)
 	);
 
 	// Navigation overlay state with debounce to prevent flickering during state transitions

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

@@ -222,7 +222,7 @@
 				{@const isActive = tab.id === activeTabId}
 				<button
 					type="button"
-					class="group relative flex items-center justify-center gap-1 px-2 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
+					class="group relative flex items-center justify-center gap-1 pr-2 pl-3 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
 						{isActive
 							? 'text-violet-600 dark:text-violet-400'
 							: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
@@ -230,13 +230,6 @@
 					role="tab"
 					tabindex="0"
 				>
-					{#if tab.id === mcpControlledTabId}
-						<Icon name="lucide:bot" class="w-3 h-3 flex-shrink-0 text-amber-500" />
-					{:else if tab.isLoading}
-						<Icon name="lucide:loader-circle" class="w-3 h-3 animate-spin flex-shrink-0" />
-					{:else}
-						<Icon name="lucide:globe" class="w-3 h-3 flex-shrink-0" />
-					{/if}
 					<span class="truncate max-w-28" title={tab.url}>
 						{tab.title || 'New Tab'}
 					</span>

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

@@ -486,7 +486,10 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 
 			if (!existingTabs || existingTabs.count === 0) {
 				debug.log('preview', '📭 No existing sessions to recover');
-				isRestoring = false;
+				// Notify parent about 0-tab recovery (enables empty tab creation)
+				if (onSessionsRecovered) {
+					onSessionsRecovered(0);
+				}
 				return;
 			}
 
@@ -781,7 +784,7 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 		const newProjectId = getProjectId();
 		debug.log('preview', `🔄 Switching to project: ${newProjectId}`);
 
-		// Set restore lock during project switch
+		// Set restore lock during entire project switch (prevents race conditions)
 		isRestoring = true;
 
 		try {
@@ -795,13 +798,18 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 			browserCleanup.clearAll();
 
 			// Recover sessions from new project
-			// Note: recoverExistingSessions will handle its own lock
-			isRestoring = false;
 			await recoverExistingSessions();
 		} catch (error) {
 			debug.error('preview', '❌ Error switching project:', error);
+		} finally {
 			isRestoring = false;
 		}
+
+		// After recovery and lock release, create empty tab if no tabs exist
+		if (tabManager.getAllTabs().length === 0) {
+			debug.log('preview', '📭 No tabs after project switch, creating empty tab');
+			createNewTab('');
+		}
 	}
 
 	return {

package/frontend/components/terminal/TerminalTabs.svelte

@@ -37,7 +37,7 @@
 		{@const isActive = session.isActive}
 		<button
 			type="button"
-			class="group relative flex items-center justify-center gap-1 px-2 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
+			class="group relative flex items-center justify-center gap-1 pr-2 pl-3 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
 				{isActive
 					? 'text-violet-600 dark:text-violet-400'
 					: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
@@ -45,7 +45,6 @@
 			role="tab"
 			tabindex="0"
 		>
-			<Icon name="lucide:terminal" class="w-3 h-3 flex-shrink-0" />
 			<span class="truncate max-w-28">{session.name}</span>
 			<!-- Close button -->
 			<span

package/frontend/components/workspace/panels/FilesPanel.svelte

@@ -1344,6 +1344,7 @@
 							externallyChanged={displayExternallyChanged}
 							onForceReload={forceReloadTab}
 							isBinary={displayIsBinary}
+						projectPath={projectPath}
 						/>
 					</div>
 				</div>

package/frontend/services/chat/chat.service.ts

@@ -196,7 +196,12 @@ class ChatService {
       this.streamCompleted = true;
       this.reconnected = false;
       this.activeProcessId = null;
-      this.setProcessState({ isLoading: false, isWaitingInput: false, isCancelling: false });
+      // 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
+      // (because hasActiveForSession is still true). The presence $effect will
+      // clear isCancelling once the stream is actually gone from presence.
+      this.setProcessState({ isLoading: false, isWaitingInput: false });
 
       // Mark any tool_use blocks that never got a tool_result
       this.markInterruptedTools();

package/frontend/services/preview/browser/browser-webcodecs.service.ts

@@ -115,17 +115,16 @@ export class BrowserWebCodecsService {
 	private lastAudioBytesReceived = 0;
 	private lastStatsTime = 0;
 
-	// ICE servers
-	private readonly iceServers: RTCIceServer[] = [
-		{ urls: 'stun:stun.l.google.com:19302' },
-		{ urls: 'stun:stun1.l.google.com:19302' }
-	];
+	// ICE servers - empty for local connections (both peers on same machine)
+	// STUN servers are unnecessary for localhost and add 100-500ms ICE gathering latency
+	private readonly iceServers: RTCIceServer[] = [];
 
 	// Callbacks
 	private onConnectionChange: ((connected: boolean) => void) | null = null;
 	private onConnectionFailed: (() => void) | null = null;
 	private onNavigationReconnect: (() => void) | null = null; // Fast reconnection after navigation
 	private onReconnectingStart: (() => void) | null = null; // Signals reconnecting state started (for UI)
+	private onFirstFrame: (() => void) | null = null; // Fires immediately when first frame is decoded
 	private onError: ((error: Error) => void) | null = null;
 	private onStats: ((stats: BrowserWebCodecsStreamStats) => void) | null = null;
 	private onCursorChange: ((cursor: string) => void) | null = null;
@@ -641,6 +640,11 @@ export class BrowserWebCodecsService {
 				this.firstFrameTimestamp = frame.timestamp;
 				debug.log('webcodecs', 'First video frame rendered');
 
+				// Notify immediately so UI can hide loading overlay without polling delay
+				if (this.onFirstFrame) {
+					this.onFirstFrame();
+				}
+
 				// Reset navigation state - frames are flowing, navigation is complete
 				if (this.isNavigating) {
 					debug.log('webcodecs', 'Navigation complete - frames received, resetting navigation state');
@@ -1477,6 +1481,10 @@ export class BrowserWebCodecsService {
 		this.onReconnectingStart = handler;
 	}
 
+	setFirstFrameHandler(handler: () => void): void {
+		this.onFirstFrame = handler;
+	}
+
 	setErrorHandler(handler: (error: Error) => void): void {
 		this.onError = handler;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
   "author": "Myria Labs",
   "license": "MIT",