@myrialabs/clopen 0.2.8 → 0.2.10

package/frontend/components/workspace/PanelHeader.svelte

@@ -47,6 +47,9 @@
 	// Mobile detection
 	let isMobile = $state(false);
 
+	// Touchscreen detection
+	let isTouchDevice = $state(false);
+
 	// Chat session users (other users in the same chat session, excluding self)
 	const chatSessionUsers = $derived.by(() => {
 		if (panelId !== 'chat') return [];
@@ -142,6 +145,7 @@
 	onMount(() => {
 		handleResize();
 		if (browser) {
+			isTouchDevice = navigator.maxTouchPoints > 0 || 'ontouchstart' in window;
 			window.addEventListener('resize', handleResize);
 		}
 	});
@@ -383,12 +387,13 @@
 				{/if} -->
 
 				<!-- Device size dropdown -->
-				<div class="relative {isMobile ? '' : 'mr-1.5'}">
+				<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'} />
@@ -481,27 +486,30 @@
 					{/if}
 				</div>
 
-				<!-- Touch mode toggle (scroll ↔ trackpad cursor) -->
-				<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 cursor-pointer transition-all duration-150 hover:bg-violet-500/10
-						{previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'text-violet-600 dark:text-violet-400' : 'text-slate-500 hover:text-slate-900 dark:hover:text-slate-100'}"
-					onclick={() => {
-						const current = previewPanelRef?.panelActions?.getTouchMode() || 'scroll';
-						previewPanelRef?.panelActions?.setTouchMode(current === 'scroll' ? 'cursor' : 'scroll');
-					}}
-					title={previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'Trackpad mode: 1-finger moves cursor, tap=click, 2-finger scroll/right-click' : 'Scroll mode: touch scrolls the page (tap to click)'}
-				>
-					<Icon name={previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'lucide:mouse-pointer-2' : 'lucide:pointer'} class={isMobile ? 'w-4.5 h-4.5' : 'w-4 h-4'} />
-					<span class="text-xs font-medium">{previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'Cursor' : 'Touch'}</span>
-				</button>
+				<!-- Touch mode toggle (scroll ↔ trackpad cursor) — only shown on touchscreen devices -->
+				{#if isTouchDevice}
+					<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 cursor-pointer transition-all duration-150 hover:bg-violet-500/10
+							{previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'text-violet-600 dark:text-violet-400' : 'text-slate-500 hover:text-slate-900 dark:hover:text-slate-100'}"
+						onclick={() => {
+							const current = previewPanelRef?.panelActions?.getTouchMode() || 'scroll';
+							previewPanelRef?.panelActions?.setTouchMode(current === 'scroll' ? 'cursor' : 'scroll');
+						}}
+						title={previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'Trackpad mode: 1-finger moves cursor, tap=click, 2-finger scroll/right-click' : 'Scroll mode: touch scrolls the page (tap to click)'}
+					>
+						<Icon name={previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'lucide:mouse-pointer-2' : 'lucide:pointer'} class={isMobile ? 'w-4.5 h-4.5' : 'w-4 h-4'} />
+						<span class="text-xs font-medium">{previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'Cursor' : 'Touch'}</span>
+					</button>
+				{/if}
 
 				<!-- 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">
@@ -510,7 +518,7 @@
 				</button>
 
 				<!-- Scale info badge -->
-				<div class="flex items-center gap-1.5 {isMobile ? 'px-2.5 h-9 bg-transparent' : 'px-2 h-6 bg-slate-100/60 dark:bg-slate-800/40'} rounded-md text-xs font-medium text-slate-500">
+				<div class="flex items-center gap-1.5 {isMobile ? 'px-1 h-9 bg-transparent' : 'px-1 h-6 bg-slate-100/60 dark:bg-slate-800/40'} rounded-md text-xs font-medium text-slate-500">
 					<Icon name="lucide:move-diagonal" class={isMobile ? 'w-4 h-4' : 'w-3.5 h-3.5'} />
 					<span>{Math.round((previewPanelRef?.panelActions?.getScale() || 1) * 100)}%</span>
 				</div>

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/preview/browser/browser-webcodecs.service.ts

@@ -133,6 +133,9 @@ export class BrowserWebCodecsService {
 	private isNavigating = false;
 	private navigationCleanupFn: (() => void) | null = null;
 
+	// SPA navigation frame freeze — holds last frame briefly during SPA transitions
+	private spaFreezeUntil = 0;
+
 	// WebSocket cleanup
 	private wsCleanupFunctions: Array<() => void> = [];
 
@@ -237,16 +240,32 @@ export class BrowserWebCodecsService {
 					sdp: response.offer.sdp
 				});
 			} else {
-				debug.log('webcodecs', `[DIAG] No offer in stream-start response, fetching via stream-offer`);
-				const offerResponse = await ws.http('preview:browser-stream-offer', {}, 10000);
-				debug.log('webcodecs', `[DIAG] preview:browser-stream-offer response: hasOffer=${!!offerResponse.offer}`);
-				if (offerResponse.offer) {
+				// Offer not ready yet — peer may still be initializing. Retry with backoff.
+				debug.log('webcodecs', `[DIAG] No offer in stream-start response, retrying stream-offer with backoff`);
+
+				let offer: { type: string; sdp?: string } | undefined;
+				const offerMaxRetries = 5;
+				const offerRetryDelay = 200;
+
+				for (let attempt = 0; attempt < offerMaxRetries; attempt++) {
+					if (attempt > 0) {
+						await new Promise(resolve => setTimeout(resolve, offerRetryDelay * attempt));
+					}
+					debug.log('webcodecs', `[DIAG] stream-offer attempt ${attempt + 1}/${offerMaxRetries}`);
+					const offerResponse = await ws.http('preview:browser-stream-offer', {}, 10000);
+					if (offerResponse.offer) {
+						offer = offerResponse.offer;
+						break;
+					}
+				}
+
+				if (offer) {
 					await this.handleOffer({
-						type: offerResponse.offer.type as RTCSdpType,
-						sdp: offerResponse.offer.sdp
+						type: offer.type as RTCSdpType,
+						sdp: offer.sdp
 					});
 				} else {
-					throw new Error('No offer received from server');
+					throw new Error('No offer received from server after retries');
 				}
 			}
 
@@ -338,16 +357,22 @@ export class BrowserWebCodecsService {
 		// Handle ICE candidates
 		this.peerConnection.onicecandidate = (event) => {
 			if (event.candidate && this.sessionId) {
+				const candidateInit: RTCIceCandidateInit = {
+					candidate: event.candidate.candidate,
+					sdpMid: event.candidate.sdpMid,
+					sdpMLineIndex: event.candidate.sdpMLineIndex
+				};
+
 				// Backend uses active tab automatically
-				ws.http('preview:browser-stream-ice', {
-					candidate: {
-						candidate: event.candidate.candidate,
-						sdpMid: event.candidate.sdpMid,
-						sdpMLineIndex: event.candidate.sdpMLineIndex
-					}
-				}).catch((error) => {
+				ws.http('preview:browser-stream-ice', { candidate: candidateInit }).catch((error) => {
 					debug.warn('webcodecs', 'Failed to send ICE candidate:', error);
 				});
+
+				// Also send loopback version for VPN compatibility (same-machine peers)
+				const loopback = this.createLoopbackCandidate(candidateInit);
+				if (loopback) {
+					ws.http('preview:browser-stream-ice', { candidate: loopback }).catch(() => {});
+				}
 			}
 		};
 
@@ -624,6 +649,17 @@ export class BrowserWebCodecsService {
 			return;
 		}
 
+		// During SPA navigation freeze, skip rendering to hold the last frame
+		// This prevents brief white flashes during SPA page transitions
+		if (this.spaFreezeUntil > 0 && Date.now() < this.spaFreezeUntil) {
+			frame.close();
+			return;
+		}
+		// Auto-reset freeze after it expires
+		if (this.spaFreezeUntil > 0) {
+			this.spaFreezeUntil = 0;
+		}
+
 		try {
 			// Update stats
 			this.stats.videoFramesDecoded++;
@@ -849,9 +885,16 @@ export class BrowserWebCodecsService {
 
 		const cleanupNavComplete = ws.on('preview:browser-navigation', (data) => {
 			if (data.sessionId === this.sessionId) {
-				// Keep isNavigating true for a short period to allow reconnection
-				// Will be reset when new frames arrive or reconnection completes
 				debug.log('webcodecs', `Navigation completed (direct WS) for session ${data.sessionId}`);
+
+				// If isNavigating was NOT set by navigation-loading (SPA-like case where
+				// framenavigated fires without a document request), set it now so the
+				// subsequent DataChannel close triggers fast reconnect instead of full recovery
+				if (!this.isNavigating) {
+					this.isNavigating = true;
+					debug.log('webcodecs', '✅ Set isNavigating=true on navigation complete (no loading event preceded)');
+				}
+
 				// Signal reconnecting state IMMEDIATELY when navigation completes
 				// This eliminates the gap between isNavigating=false and DataChannel close
 				// ensuring the overlay stays visible continuously
@@ -862,11 +905,41 @@ export class BrowserWebCodecsService {
 			}
 		});
 
-		this.wsCleanupFunctions = [cleanupIce, cleanupState, cleanupCursor, cleanupNavLoading, cleanupNavComplete];
+		// Listen for SPA navigation events (pushState/replaceState/hash changes)
+		// Reset isNavigating if it was set by a preceding navigation-loading event
+		// that the SPA router intercepted (cancelled the full navigation)
+		const cleanupNavSpa = ws.on('preview:browser-navigation-spa', (data) => {
+			if (data.sessionId === this.sessionId && this.isNavigating) {
+				debug.log('webcodecs', '🔄 SPA navigation received - resetting isNavigating (no stream restart needed)');
+				this.isNavigating = false;
+			}
+		});
+
+		this.wsCleanupFunctions = [cleanupIce, cleanupState, cleanupCursor, cleanupNavLoading, cleanupNavComplete, cleanupNavSpa];
 	}
 
 	/**
-	 * Add ICE candidate
+	 * Create a loopback (127.0.0.1) copy of a host ICE candidate.
+	 * Ensures WebRTC connects via loopback when VPN (e.g. Cloudflare WARP)
+	 * interferes with host candidate connectivity between same-machine peers.
+	 */
+	private createLoopbackCandidate(candidate: RTCIceCandidateInit): RTCIceCandidateInit | null {
+		if (!candidate.candidate) return null;
+		if (!candidate.candidate.includes('typ host')) return null;
+
+		const parts = candidate.candidate.split(' ');
+		if (parts.length < 8) return null;
+
+		// Index 4 is the address field in ICE candidate format
+		const address = parts[4];
+		if (address === '127.0.0.1' || address === '::1') return null;
+
+		parts[4] = '127.0.0.1';
+		return { ...candidate, candidate: parts.join(' ') };
+	}
+
+	/**
+	 * Add ICE candidate (+ loopback variant for VPN compatibility)
 	 */
 	private async addIceCandidate(candidate: RTCIceCandidateInit): Promise<void> {
 		if (!this.peerConnection) return;
@@ -876,6 +949,16 @@ export class BrowserWebCodecsService {
 		} catch (error) {
 			debug.warn('webcodecs', 'Add ICE candidate error:', error);
 		}
+
+		// Also try loopback version for VPN compatibility (same-machine peers)
+		const loopback = this.createLoopbackCandidate(candidate);
+		if (loopback) {
+			try {
+				await this.peerConnection.addIceCandidate(new RTCIceCandidate(loopback));
+			} catch {
+				// Expected to fail if loopback is not applicable
+			}
+		}
 	}
 
 	/**
@@ -1382,6 +1465,15 @@ export class BrowserWebCodecsService {
 		this.onFirstFrame = handler;
 	}
 
+	/**
+	 * Freeze frame rendering briefly during SPA navigation.
+	 * Holds the current canvas content to prevent white flash during
+	 * SPA page transitions (pushState/replaceState).
+	 */
+	freezeForSpaNavigation(durationMs = 150): void {
+		this.spaFreezeUntil = Date.now() + durationMs;
+	}
+
 	setErrorHandler(handler: (error: Error) => void): void {
 		this.onError = handler;
 	}

package/frontend/services/project/status.service.ts

@@ -7,7 +7,7 @@
  */
 
 import { getOrCreateAnonymousUser, type AnonymousUser } from '$shared/utils/anonymous-user';
-import ws from '$frontend/utils/ws';
+import ws, { onWsReconnect } from '$frontend/utils/ws';
 import { debug } from '$shared/utils/logger';
 
 export interface ProjectStatus {
@@ -44,6 +44,16 @@ class ProjectStatusService {
     this.currentUser = await getOrCreateAnonymousUser();
     debug.log('project', 'Initialized with user:', this.currentUser?.name);
 
+    // Re-join project presence after WebSocket reconnection.
+    // Without this, the new connection loses presence tracking and
+    // panels (Git, Terminal, Preview, etc.) miss status updates.
+    onWsReconnect(() => {
+      if (this.currentProjectId && this.currentUser) {
+        ws.emit('projects:join', { userName: this.currentUser.name });
+        debug.log('project', 'Re-joined project presence after reconnection');
+      }
+    });
+
     this.unsubscribe = ws.on('projects:presence-updated', (data) => {
       try {
         if (data.type === 'presence-updated' && data.data) {

package/frontend/stores/core/sessions.svelte.ts

@@ -10,7 +10,7 @@
 import type { ChatSession, SDKMessageFormatter } from '$shared/types/database/schema';
 import type { SDKMessage } from '$shared/types/messaging';
 import { buildMetadataFromTransport } from '$shared/utils/message-formatter';
-import ws from '$frontend/utils/ws';
+import ws, { onWsReconnect } from '$frontend/utils/ws';
 import { projectState } from './projects.svelte';
 import { setupEditModeListener, restoreEditMode } from '$frontend/stores/ui/edit-mode.svelte';
 import { markSessionUnread, markSessionRead, appState } from '$frontend/stores/core/app.svelte';
@@ -376,6 +376,16 @@ export async function reloadSessionsForProject(): Promise<string | null> {
  * automatically switch to the new shared session.
  */
 function setupCollaborativeListeners() {
+	// Re-join chat session room after WebSocket reconnection.
+	// Without this, the new connection is not in the session room and
+	// misses all chat events (stream, partial, complete, input sync, etc.).
+	onWsReconnect(() => {
+		if (sessionState.currentSession?.id) {
+			ws.emit('chat:join-session', { chatSessionId: sessionState.currentSession.id });
+			debug.log('session', 'Re-joined chat session room after reconnection:', sessionState.currentSession.id);
+		}
+	});
+
 	// Listen for new session available notifications from other users.
 	// Does NOT auto-switch — adds session to list and shows notification.
 	ws.on('sessions:session-available', async (data: { session: ChatSession }) => {

package/frontend/stores/features/terminal.svelte.ts

@@ -17,6 +17,7 @@ interface TerminalState {
 	executingSessionIds: Set<string>; // Track multiple executing sessions
 	sessionExecutionStates: Map<string, boolean>; // Track execution state per session
 	lineBuffers: Map<string, string>; // Line buffering for chunked PTY output
+	flushTimers: Map<string, ReturnType<typeof setTimeout>>; // Auto-flush timers for buffered output
 }
 
 // Terminal store state
@@ -28,7 +29,8 @@ const terminalState = $state<TerminalState>({
 	lastCommandWasCancelled: false,
 	executingSessionIds: new Set(),
 	sessionExecutionStates: new Map(),
-	lineBuffers: new Map()
+	lineBuffers: new Map(),
+	flushTimers: new Map()
 });
 
 // Computed properties
@@ -214,8 +216,13 @@ export const terminalStore = {
 			debug.error('terminal', `🔴 [closeSession] Failed to remove from project context:`, error);
 		}
 
-		// Clear any buffered content for this session
+		// Clear any buffered content and flush timers for this session
 		terminalState.lineBuffers.delete(sessionId);
+		const closeFlushTimer = terminalState.flushTimers.get(sessionId);
+		if (closeFlushTimer) {
+			clearTimeout(closeFlushTimer);
+			terminalState.flushTimers.delete(sessionId);
+		}
 
 		// Remove execution states for this session
 		terminalState.sessionExecutionStates.delete(sessionId);
@@ -285,6 +292,13 @@ export const terminalStore = {
 
 		// Flush any buffered content before cancel (if was executing)
 		if (wasExecuting) {
+			// Clear flush timer first
+			const cancelFlushTimer = terminalState.flushTimers.get(activeSession.id);
+			if (cancelFlushTimer) {
+				clearTimeout(cancelFlushTimer);
+				terminalState.flushTimers.delete(activeSession.id);
+			}
+
 			const remainingBuffer = terminalState.lineBuffers.get(activeSession.id);
 			if (remainingBuffer && remainingBuffer.length > 0) {
 				this.addLineToSession(activeSession.id, {
@@ -353,31 +367,41 @@ export const terminalStore = {
 
 	// Process buffered output to handle chunked PTY data properly
 	processBufferedOutput(sessionId: string, content: string, type: 'output' | 'error'): void {
-		// Buffer incomplete lines to avoid splitting words like "Reply" into "R" and "eply"
+		// Clear any pending flush timer for this session
+		const existingTimer = terminalState.flushTimers.get(sessionId);
+		if (existingTimer) {
+			clearTimeout(existingTimer);
+			terminalState.flushTimers.delete(sessionId);
+		}
+
 		let buffer = terminalState.lineBuffers.get(sessionId) || '';
 		buffer += content;
-		
-		// Only send complete chunks to avoid word splitting
-		// If buffer ends with a partial ANSI sequence or in middle of a word, wait for more
-		if (buffer.length < 2) {
-			// Very short buffer, likely incomplete - wait for more
-			terminalState.lineBuffers.set(sessionId, buffer);
-			return;
-		}
-		
+
 		// Check if we're in the middle of an ANSI escape sequence
 		const lastEscIndex = buffer.lastIndexOf('\x1b');
 		if (lastEscIndex >= 0 && lastEscIndex > buffer.length - 10) {
-			// Might be in middle of escape sequence, check if it's complete
 			const remaining = buffer.substring(lastEscIndex);
 			if (!/^(\x1b\[[0-9;]*[a-zA-Z]|\x1b\[\?[0-9]+[lh])/.test(remaining)) {
-				// Incomplete escape sequence, wait for more
+				// Incomplete escape sequence - hold briefly, auto-flush after 8ms
 				terminalState.lineBuffers.set(sessionId, buffer);
+				const flushTimer = setTimeout(() => {
+					terminalState.flushTimers.delete(sessionId);
+					const pending = terminalState.lineBuffers.get(sessionId);
+					if (pending && pending.length > 0) {
+						this.addLineToSession(sessionId, {
+							content: pending,
+							type: type,
+							timestamp: new Date()
+						});
+						terminalState.lineBuffers.set(sessionId, '');
+					}
+				}, 8);
+				terminalState.flushTimers.set(sessionId, flushTimer);
 				return;
 			}
 		}
-		
-		// Send the buffer and clear it
+
+		// Flush immediately - no artificial delay for complete data
 		if (buffer.length > 0) {
 			this.addLineToSession(sessionId, {
 				content: buffer,
@@ -390,15 +414,11 @@ export const terminalStore = {
 
 	// Session Content Management
 	addLineToSession(sessionId: string, line: TerminalLine): void {
-		terminalState.sessions = terminalState.sessions.map(session => 
-			session.id === sessionId 
-				? { 
-					...session, 
-					lines: [...session.lines, line],
-					lastUsedAt: new Date()
-				}
-				: session
-		);
+		const session = terminalState.sessions.find(s => s.id === sessionId);
+		if (session) {
+			session.lines.push(line);
+			session.lastUsedAt = new Date();
+		}
 	},
 
 	updateSessionHistory(sessionId: string, history: string[]): void {
@@ -411,8 +431,13 @@ export const terminalStore = {
 
 
 	clearSession(sessionId: string): void {
-		// Clear any buffered content for this session
+		// Clear any buffered content and flush timers for this session
 		terminalState.lineBuffers.delete(sessionId);
+		const clearFlushTimer = terminalState.flushTimers.get(sessionId);
+		if (clearFlushTimer) {
+			clearTimeout(clearFlushTimer);
+			terminalState.flushTimers.delete(sessionId);
+		}
 		
 		// CRITICAL FIX: Actually clear the session lines history
 		// This ensures when switching tabs, the cleared terminal stays clear
@@ -600,6 +625,11 @@ export const terminalStore = {
 	 */
 	removeSessionFromStore(sessionId: string): void {
 		terminalState.lineBuffers.delete(sessionId);
+		const removeFlushTimer = terminalState.flushTimers.get(sessionId);
+		if (removeFlushTimer) {
+			clearTimeout(removeFlushTimer);
+			terminalState.flushTimers.delete(sessionId);
+		}
 		terminalState.sessionExecutionStates.delete(sessionId);
 		terminalState.executingSessionIds.delete(sessionId);
 		terminalState.sessions = terminalState.sessions.filter(s => s.id !== sessionId);

package/frontend/stores/ui/theme.svelte.ts

@@ -96,7 +96,7 @@ function updateThemeColor(mode: 'light' | 'dark') {
 	}
 	
 	// Set appropriate theme color
-	const themeColor = mode === 'dark' ? '#0a0a0a' : '#ffffff';
+	const themeColor = mode === 'dark' ? '#0e172b' : '#ffffff';
 	metaThemeColor.setAttribute('content', themeColor);
 }
 

package/frontend/utils/ws.ts

@@ -7,6 +7,7 @@
 import { WSClient } from '$shared/utils/ws-client';
 import type { WSAPI } from '$backend/ws';
 import { setConnectionStatus } from '$frontend/stores/ui/connection.svelte';
+import { debug } from '$shared/utils/logger';
 
 /**
  * Get WebSocket URL based on environment
@@ -18,6 +19,28 @@ function getWebSocketUrl(): string {
 	return `${protocol}//${host}/ws`;
 }
 
+// ============================================================================
+// Reconnect Handler Registry
+// ============================================================================
+
+/** Handlers to run after WebSocket reconnection (re-join rooms, restore subscriptions) */
+const reconnectHandlers = new Set<() => void>();
+
+/**
+ * Register a handler to run after WebSocket reconnection.
+ * Use this to re-join rooms (chat:join-session, projects:join) and
+ * restore subscriptions that are lost when the connection drops.
+ * Returns an unsubscribe function.
+ */
+export function onWsReconnect(handler: () => void): () => void {
+	reconnectHandlers.add(handler);
+	return () => { reconnectHandlers.delete(handler); };
+}
+
+// ============================================================================
+// WebSocket Client
+// ============================================================================
+
 const ws = new WSClient<WSAPI>(getWebSocketUrl(), {
 	autoReconnect: true,
 	maxReconnectAttempts: 0, // Infinite reconnect
@@ -25,6 +48,16 @@ const ws = new WSClient<WSAPI>(getWebSocketUrl(), {
 	maxReconnectDelay: 30000,
 	onStatusChange: (status, reconnectAttempts) => {
 		setConnectionStatus(status, reconnectAttempts);
+	},
+	onReconnect: () => {
+		debug.log('websocket', `Running ${reconnectHandlers.size} reconnect handler(s)`);
+		for (const handler of reconnectHandlers) {
+			try {
+				handler();
+			} catch (err) {
+				debug.error('websocket', 'Reconnect handler error:', err);
+			}
+		}
 	}
 });
 
@@ -45,4 +78,13 @@ window.addEventListener('beforeunload', () => {
 	ws.disconnect();
 });
 
+// Force reload when page is restored from bfcache (back-forward cache).
+// After beforeunload, all WS listeners are cleared and the connection is dead.
+// A full reload ensures all state (handlers, room subscriptions) is re-initialized.
+window.addEventListener('pageshow', (event) => {
+	if (event.persisted) {
+		window.location.reload();
+	}
+});
+
 export default ws;

package/index.html

@@ -9,7 +9,7 @@
 			name="description"
 			content="Clopen - Modern web UI for Claude Code & OpenCode with real browser preview, git management, multi-account support, file management, checkpoints, collaboration, and integrated terminal. Built with Bun and Svelte 5."
 		/>
-		<meta name="theme-color" content="#0a0a0a" />
+		<meta name="theme-color" content="#0e172b" />
 		<title>Clopen</title>
 
 		<!-- DM Sans - Local self-hosted font -->
@@ -47,7 +47,7 @@
 					// Update meta theme-color for mobile browsers
 					const metaThemeColor = document.querySelector('meta[name="theme-color"]');
 					if (metaThemeColor) {
-						metaThemeColor.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
+						metaThemeColor.setAttribute('content', isDark ? '#0e172b' : '#ffffff');
 					}
 				} catch (e) {
 					// Fallback to system preference if anything fails

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "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",