@myrialabs/clopen 0.2.9 → 0.2.11

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

@@ -132,6 +132,10 @@ export class BrowserWebCodecsService {
 	// Navigation state - when true, DataChannel close is expected and recovery is suppressed
 	private isNavigating = false;
 	private navigationCleanupFn: (() => void) | null = null;
+	private navigationSafetyTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	// SPA navigation frame freeze — holds last frame briefly during SPA transitions
+	private spaFreezeUntil = 0;
 
 	// WebSocket cleanup
 	private wsCleanupFunctions: Array<() => void> = [];
@@ -142,11 +146,32 @@ export class BrowserWebCodecsService {
 	// Bandwidth logging interval
 	private bandwidthLogIntervalId: ReturnType<typeof setInterval> | null = null;
 
+	// User gesture listener for AudioContext resume (needed after page refresh)
+	private userGestureHandler: (() => void) | null = null;
+
 	constructor(projectId: string) {
 		if (!projectId) {
 			throw new Error('projectId is required for BrowserWebCodecsService');
 		}
 		this.projectId = projectId;
+
+		// Register a one-time user gesture listener to resume suspended AudioContext.
+		// After page refresh, AudioContext cannot resume without a user gesture.
+		// This listener fires on the first click/keydown and resumes it.
+		this.userGestureHandler = () => {
+			if (this.audioContext && this.audioContext.state === 'suspended') {
+				this.audioContext.resume().catch(() => {});
+				debug.log('webcodecs', 'AudioContext resumed via user gesture');
+			}
+			// Remove listeners after first successful gesture
+			if (this.userGestureHandler) {
+				document.removeEventListener('click', this.userGestureHandler);
+				document.removeEventListener('keydown', this.userGestureHandler);
+				this.userGestureHandler = null;
+			}
+		};
+		document.addEventListener('click', this.userGestureHandler, { once: false });
+		document.addEventListener('keydown', this.userGestureHandler, { once: false });
 	}
 
 	/**
@@ -218,8 +243,10 @@ export class BrowserWebCodecsService {
 			this.setupEventListeners();
 
 			// Request server to start streaming and get offer
+			// Send explicit tabId to ensure backend targets the correct tab
+			// even if user switches tabs during the async negotiation
 			debug.log('webcodecs', `[DIAG] Sending preview:browser-stream-start for session: ${sessionId}`);
-			const response = await ws.http('preview:browser-stream-start', {}, 30000);
+			const response = await ws.http('preview:browser-stream-start', { tabId: sessionId }, 30000);
 			debug.log('webcodecs', `[DIAG] preview:browser-stream-start response: success=${response.success}, hasOffer=${!!response.offer}, message=${response.message}`);
 
 			if (!response.success) {
@@ -237,16 +264,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', { tabId: sessionId }, 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');
 				}
 			}
 
@@ -289,6 +332,11 @@ export class BrowserWebCodecsService {
 
 			this.dataChannel.onclose = () => {
 				debug.log('webcodecs', 'DataChannel closed');
+				// Clear navigation safety timeout — DataChannel closed normally
+				if (this.navigationSafetyTimeout) {
+					clearTimeout(this.navigationSafetyTimeout);
+					this.navigationSafetyTimeout = null;
+				}
 				// Trigger recovery if channel closed while we were connected
 				// BUT skip recovery if we're navigating (expected behavior during page navigation)
 				if (this.isConnected && !this.isCleaningUp && !this.isNavigating && this.onConnectionFailed) {
@@ -300,8 +348,8 @@ export class BrowserWebCodecsService {
 					if (this.onReconnectingStart) {
 						this.onReconnectingStart();
 					}
-					// Backend needs ~500ms to restart streaming with new peer
-					// Wait for backend to be ready, then trigger FAST reconnection (no delay)
+					// Backend is already ready (navigation-complete fires after backend setup).
+					// Short delay to let state settle, then trigger fast reconnection.
 					setTimeout(() => {
 						if (this.isCleaningUp) return;
 						debug.log('webcodecs', '🔄 Triggering fast reconnection after navigation');
@@ -313,16 +361,22 @@ export class BrowserWebCodecsService {
 							// Fallback to regular recovery if no navigation handler
 							this.onConnectionFailed();
 						}
-					}, 700); // Wait 700ms for backend to restart (usually takes ~500ms)
+					}, 100);
 				}
 			};
 
 			this.dataChannel.onerror = (error) => {
+				// Suppress error log during intentional cleanup (User-Initiated Abort is expected)
+				if (this.isCleaningUp) {
+					debug.log('webcodecs', 'DataChannel error during cleanup (expected, suppressed)');
+					return;
+				}
+
 				debug.error('webcodecs', 'DataChannel error:', error);
-				debug.log('webcodecs', `DataChannel error state: isConnected=${this.isConnected}, isCleaningUp=${this.isCleaningUp}, isNavigating=${this.isNavigating}`);
+				debug.log('webcodecs', `DataChannel error state: isConnected=${this.isConnected}, isNavigating=${this.isNavigating}`);
 				// Trigger recovery on DataChannel error
 				// BUT skip recovery if we're navigating (expected behavior during page navigation)
-				if (this.isConnected && !this.isCleaningUp && !this.isNavigating && this.onConnectionFailed) {
+				if (this.isConnected && !this.isNavigating && this.onConnectionFailed) {
 					debug.warn('webcodecs', 'DataChannel error - triggering recovery');
 					this.onConnectionFailed();
 				} else if (this.isNavigating) {
@@ -338,16 +392,21 @@ export class BrowserWebCodecsService {
 		// Handle ICE candidates
 		this.peerConnection.onicecandidate = (event) => {
 			if (event.candidate && this.sessionId) {
-				// 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) => {
+				const candidateInit: RTCIceCandidateInit = {
+					candidate: event.candidate.candidate,
+					sdpMid: event.candidate.sdpMid,
+					sdpMLineIndex: event.candidate.sdpMLineIndex
+				};
+
+				ws.http('preview:browser-stream-ice', { candidate: candidateInit, tabId: this.sessionId }).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, tabId: this.sessionId }).catch(() => {});
+				}
 			}
 		};
 
@@ -420,12 +479,12 @@ export class BrowserWebCodecsService {
 		debug.log('webcodecs', 'Local description set');
 
 		if (this.sessionId) {
-			// Backend uses active tab automatically
 			await ws.http('preview:browser-stream-answer', {
 				answer: {
 					type: answer.type,
 					sdp: answer.sdp
-				}
+				},
+				tabId: this.sessionId
 			});
 		}
 	}
@@ -548,6 +607,11 @@ export class BrowserWebCodecsService {
 				output: (frame) => this.handleDecodedVideoFrame(frame),
 				error: (e) => {
 					debug.error('webcodecs', 'VideoDecoder error:', e);
+					// Null out so next keyframe triggers reinitialization.
+					// Without this, the decoder stays in 'closed' state but non-null,
+					// causing handleVideoChunk's `!this.videoDecoder` check to never fire
+					// → all subsequent frames permanently dropped (stuck frames bug).
+					this.videoDecoder = null;
 				}
 			});
 
@@ -579,6 +643,8 @@ export class BrowserWebCodecsService {
 				output: (frame) => this.handleDecodedAudioFrame(frame),
 				error: (e) => {
 					debug.error('webcodecs', 'AudioDecoder error:', e);
+					// Null out so next chunk triggers reinitialization.
+					this.audioDecoder = null;
 				}
 			});
 
@@ -624,6 +690,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++;
@@ -658,6 +735,10 @@ export class BrowserWebCodecsService {
 				if (this.isNavigating) {
 					debug.log('webcodecs', 'Navigation complete - frames received, resetting navigation state');
 					this.isNavigating = false;
+					if (this.navigationSafetyTimeout) {
+						clearTimeout(this.navigationSafetyTimeout);
+						this.navigationSafetyTimeout = null;
+					}
 				}
 			}
 
@@ -701,6 +782,10 @@ export class BrowserWebCodecsService {
 		this.isRenderingFrame = false;
 
 		if (!this.pendingFrame || this.isCleaningUp || !this.canvas || !this.ctx) {
+			if (this.pendingFrame) {
+				this.pendingFrame.close();
+				this.pendingFrame = null;
+			}
 			return;
 		}
 
@@ -710,15 +795,15 @@ export class BrowserWebCodecsService {
 			const frameTimestamp = (this.pendingFrame.timestamp - this.firstFrameTimestamp) / 1000; // convert to ms
 			const elapsedTime = timestamp - this.startTime;
 
-			// Check if we're ahead of schedule (frame came too early)
-			// If so, we might want to delay rendering, but for low-latency
-			// we render immediately to minimize lag
 			const timeDrift = elapsedTime - frameTimestamp;
 
-			// Only log significant drift (for debugging)
-			if (Math.abs(timeDrift) > 100) {
-				// Drift more than 100ms is significant
-				debug.warn('webcodecs', `Frame timing drift: ${timeDrift.toFixed(0)}ms`);
+			// Auto-reset timing when drift exceeds 2 seconds.
+			// This handles stale timing state after reconnects or rapid tab switches
+			// where startTime/firstFrameTimestamp were not properly reset.
+			if (Math.abs(timeDrift) > 2000 && this.startTime > 0) {
+				debug.warn('webcodecs', `Frame timing drift reset (was ${timeDrift.toFixed(0)}ms)`);
+				this.startTime = timestamp;
+				this.firstFrameTimestamp = this.pendingFrame.timestamp;
 			}
 
 			// Render to canvas with optimal settings
@@ -849,9 +934,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
@@ -859,14 +951,62 @@ export class BrowserWebCodecsService {
 					debug.log('webcodecs', '🔄 Pre-emptive reconnecting state on navigation complete');
 					this.onReconnectingStart();
 				}
+
+				// Fast safety timeout: if DataChannel doesn't close within 100ms,
+				// force a full recovery (stop + start fresh stream). Sometimes
+				// the old WebRTC connection lingers for 10-16s before ICE timeout.
+				// Using onConnectionFailed triggers attemptRecovery (full stop+start),
+				// which is the same path as tab switching and takes ~100ms to first frame.
+				if (this.navigationSafetyTimeout) {
+					clearTimeout(this.navigationSafetyTimeout);
+				}
+				this.navigationSafetyTimeout = setTimeout(() => {
+					this.navigationSafetyTimeout = null;
+					if (this.isCleaningUp || !this.isNavigating) return;
+					debug.warn('webcodecs', '⏰ Navigation safety timeout - forcing full recovery');
+					this.isNavigating = false;
+					if (this.onConnectionFailed) {
+						this.onConnectionFailed();
+					}
+				}, 100);
+			}
+		});
+
+		// 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];
+		this.wsCleanupFunctions = [cleanupIce, cleanupState, cleanupCursor, cleanupNavLoading, cleanupNavComplete, cleanupNavSpa];
+	}
+
+	/**
+	 * 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
+	 * Add ICE candidate (+ loopback variant for VPN compatibility)
 	 */
 	private async addIceCandidate(candidate: RTCIceCandidateInit): Promise<void> {
 		if (!this.peerConnection) return;
@@ -876,6 +1016,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
+			}
+		}
 	}
 
 	/**
@@ -1014,7 +1164,7 @@ export class BrowserWebCodecsService {
 			await this.createPeerConnection();
 
 			// Get offer from backend's existing peer (don't start new streaming)
-			const offerResponse = await ws.http('preview:browser-stream-offer', {}, 10000);
+			const offerResponse = await ws.http('preview:browser-stream-offer', { tabId: sessionId }, 10000);
 			if (offerResponse.offer) {
 				await this.handleOffer({
 					type: offerResponse.offer.type as RTCSdpType,
@@ -1057,13 +1207,19 @@ export class BrowserWebCodecsService {
 		}
 
 		// Cleanup WebSocket listeners
-		this.wsCleanupFunctions.forEach((cleanup) => cleanup());
+		try {
+			this.wsCleanupFunctions.forEach((cleanup) => cleanup());
+		} catch (e) {
+			debug.warn('webcodecs', 'Error in ws cleanup:', e);
+		}
 		this.wsCleanupFunctions = [];
 
-		// Close decoders
+		// Close decoders immediately (reset + close, no flush).
+		// Flushing processes all queued frames which is slow and can fire
+		// stale callbacks during rapid tab switching.
 		if (this.videoDecoder) {
 			try {
-				await this.videoDecoder.flush();
+				this.videoDecoder.reset();
 				this.videoDecoder.close();
 			} catch (e) {}
 			this.videoDecoder = null;
@@ -1071,7 +1227,7 @@ export class BrowserWebCodecsService {
 
 		if (this.audioDecoder) {
 			try {
-				await this.audioDecoder.flush();
+				this.audioDecoder.reset();
 				this.audioDecoder.close();
 			} catch (e) {}
 			this.audioDecoder = null;
@@ -1144,22 +1300,22 @@ export class BrowserWebCodecsService {
 		}
 
 		// Cleanup WebSocket listeners
-		this.wsCleanupFunctions.forEach((cleanup) => cleanup());
+		try {
+			this.wsCleanupFunctions.forEach((cleanup) => cleanup());
+		} catch (e) {
+			debug.warn('webcodecs', 'Error in ws cleanup:', e);
+		}
 		this.wsCleanupFunctions = [];
 
-		// Notify server
+		// Notify server with explicit tabId (fire-and-forget for speed during rapid switching)
 		if (this.sessionId) {
-			try {
-				await ws.http('preview:browser-stream-stop', {});
-			} catch (error) {
-				debug.warn('webcodecs', 'Failed to notify server:', error);
-			}
+			ws.http('preview:browser-stream-stop', { tabId: this.sessionId }).catch(() => {});
 		}
 
-		// Close decoders
+		// Close decoders immediately (reset + close, no flush for speed)
 		if (this.videoDecoder) {
 			try {
-				await this.videoDecoder.flush();
+				this.videoDecoder.reset();
 				this.videoDecoder.close();
 			} catch (e) {}
 			this.videoDecoder = null;
@@ -1167,17 +1323,16 @@ export class BrowserWebCodecsService {
 
 		if (this.audioDecoder) {
 			try {
-				await this.audioDecoder.flush();
+				this.audioDecoder.reset();
 				this.audioDecoder.close();
 			} catch (e) {}
 			this.audioDecoder = null;
 		}
 
-		// Close audio context
-		if (this.audioContext && this.audioContext.state !== 'closed') {
-			await this.audioContext.close().catch(() => {});
-			this.audioContext = null;
-		}
+		// Keep AudioContext alive across stop/start cycles — it was created during
+		// a user gesture in startStreaming() and closing it means we can't resume
+		// without another user gesture. Only destroy() should close it.
+		// Just reset audio playback scheduling state below.
 
 		// Close data channel
 		if (this.dataChannel) {
@@ -1247,6 +1402,10 @@ export class BrowserWebCodecsService {
 
 		// Reset navigation state
 		this.isNavigating = false;
+		if (this.navigationSafetyTimeout) {
+			clearTimeout(this.navigationSafetyTimeout);
+			this.navigationSafetyTimeout = null;
+		}
 
 		if (this.onConnectionChange) {
 			this.onConnectionChange(false);
@@ -1276,12 +1435,16 @@ export class BrowserWebCodecsService {
 			this.pendingFrame = null;
 		}
 
-		this.wsCleanupFunctions.forEach((cleanup) => cleanup());
+		try {
+			this.wsCleanupFunctions.forEach((cleanup) => cleanup());
+		} catch (e) {
+			debug.warn('webcodecs', 'Error in ws cleanup:', e);
+		}
 		this.wsCleanupFunctions = [];
 
 		if (this.videoDecoder) {
 			try {
-				await this.videoDecoder.flush();
+				this.videoDecoder.reset();
 				this.videoDecoder.close();
 			} catch (e) {}
 			this.videoDecoder = null;
@@ -1289,16 +1452,13 @@ export class BrowserWebCodecsService {
 
 		if (this.audioDecoder) {
 			try {
-				await this.audioDecoder.flush();
+				this.audioDecoder.reset();
 				this.audioDecoder.close();
 			} catch (e) {}
 			this.audioDecoder = null;
 		}
 
-		if (this.audioContext && this.audioContext.state !== 'closed') {
-			await this.audioContext.close().catch(() => {});
-			this.audioContext = null;
-		}
+		// Keep AudioContext alive — same rationale as cleanup()
 
 		if (this.dataChannel) {
 			this.dataChannel.close();
@@ -1313,6 +1473,10 @@ export class BrowserWebCodecsService {
 		this.isConnected = false;
 		this.sessionId = null;
 
+		// Reset stats (prevent stale firstFrameRendered from skipping timing reset)
+		this.stats.firstFrameRendered = false;
+		this.stats.isConnected = false;
+
 		// Reset audio playback state
 		this.nextAudioPlayTime = 0;
 		this.audioBufferQueue = [];
@@ -1334,6 +1498,12 @@ export class BrowserWebCodecsService {
 		this.lastVideoTimestamp = 0;
 		this.lastVideoRealTime = 0;
 
+		// Clear navigation safety timeout
+		if (this.navigationSafetyTimeout) {
+			clearTimeout(this.navigationSafetyTimeout);
+			this.navigationSafetyTimeout = null;
+		}
+
 		this.isCleaningUp = false;
 	}
 
@@ -1361,6 +1531,24 @@ export class BrowserWebCodecsService {
 		return this.isConnected;
 	}
 
+	/**
+	 * Immediately block frame rendering without closing the WebRTC connection.
+	 * Call this as soon as a tab switch is detected to prevent the old session's
+	 * frames from painting onto the canvas after it has been cleared/snapshot-restored.
+	 * The cleanup + new connection will complete asynchronously via stopStreaming/startStreaming.
+	 */
+	pauseRendering(): void {
+		this.isCleaningUp = true;
+		if (this.renderFrameId !== null) {
+			cancelAnimationFrame(this.renderFrameId);
+			this.renderFrameId = null;
+		}
+		if (this.pendingFrame) {
+			this.pendingFrame.close();
+			this.pendingFrame = null;
+		}
+	}
+
 	// Event handlers
 	setConnectionChangeHandler(handler: (connected: boolean) => void): void {
 		this.onConnectionChange = handler;
@@ -1382,6 +1570,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;
 	}
@@ -1401,6 +1598,11 @@ export class BrowserWebCodecsService {
 	 */
 	setNavigating(navigating: boolean): void {
 		this.isNavigating = navigating;
+		// Clear safety timeout when navigation state is externally reset
+		if (!navigating && this.navigationSafetyTimeout) {
+			clearTimeout(this.navigationSafetyTimeout);
+			this.navigationSafetyTimeout = null;
+		}
 		debug.log('webcodecs', `Navigation state set: ${navigating}`);
 	}
 
@@ -1416,6 +1618,13 @@ export class BrowserWebCodecsService {
 	 */
 	destroy(): void {
 		this.cleanup();
+
+		// Close AudioContext only on full destroy (not reused after this)
+		if (this.audioContext && this.audioContext.state !== 'closed') {
+			this.audioContext.close().catch(() => {});
+			this.audioContext = null;
+		}
+
 		this.onConnectionChange = null;
 		this.onConnectionFailed = null;
 		this.onNavigationReconnect = null;
@@ -1423,5 +1632,12 @@ export class BrowserWebCodecsService {
 		this.onError = null;
 		this.onStats = null;
 		this.onCursorChange = null;
+
+		// Remove user gesture listener
+		if (this.userGestureHandler) {
+			document.removeEventListener('click', this.userGestureHandler);
+			document.removeEventListener('keydown', this.userGestureHandler);
+			this.userGestureHandler = null;
+		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "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",
@@ -13,7 +13,7 @@
     "type": "git",
     "url": "https://github.com/myrialabs/clopen.git"
   },
-  "homepage": "https://github.com/myrialabs/clopen#readme",
+  "homepage": "https://clopen.myrialabs.dev",
   "bugs": {
     "url": "https://github.com/myrialabs/clopen/issues"
   },