@myrialabs/clopen 0.2.5 → 0.2.7

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;
@@ -165,7 +164,7 @@ export class BrowserWebCodecsService {
 	 * Start WebCodecs streaming for a preview session
 	 */
 	async startStreaming(sessionId: string, canvas: HTMLCanvasElement): Promise<boolean> {
-		debug.log('webcodecs', `Starting streaming for session: ${sessionId}`);
+		debug.log('webcodecs', `[DIAG] startStreaming called: sessionId=${sessionId}, isConnected=${this.isConnected}, existingSessionId=${this.sessionId}`);
 
 		if (!BrowserWebCodecsService.isSupported()) {
 			debug.error('webcodecs', 'Not supported in this browser');
@@ -183,7 +182,11 @@ export class BrowserWebCodecsService {
 			this.audioContext = new AudioContext({ sampleRate: 48000 });
 		}
 		if (this.audioContext.state === 'suspended') {
-			await this.audioContext.resume().catch(() => {});
+			// Fire-and-forget: don't await — after page refresh (no user gesture),
+			// resume() returns a promise that NEVER resolves until user interacts.
+			// Awaiting it would block streaming indefinitely. Audio will resume
+			// automatically on first user interaction via the safety net in playAudioFrame.
+			this.audioContext.resume().catch(() => {});
 		}
 
 		// Clean up any existing connection
@@ -215,7 +218,9 @@ export class BrowserWebCodecsService {
 			this.setupEventListeners();
 
 			// Request server to start streaming and get offer
+			debug.log('webcodecs', `[DIAG] Sending preview:browser-stream-start for session: ${sessionId}`);
 			const response = await ws.http('preview:browser-stream-start', {}, 30000);
+			debug.log('webcodecs', `[DIAG] preview:browser-stream-start response: success=${response.success}, hasOffer=${!!response.offer}, message=${response.message}`);
 
 			if (!response.success) {
 				throw new Error(response.message || 'Failed to start streaming');
@@ -226,12 +231,15 @@ export class BrowserWebCodecsService {
 
 			// Set remote description (offer)
 			if (response.offer) {
+				debug.log('webcodecs', `[DIAG] Using offer from stream-start response`);
 				await this.handleOffer({
 					type: response.offer.type as RTCSdpType,
 					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) {
 					await this.handleOffer({
 						type: offerResponse.offer.type as RTCSdpType,
@@ -242,7 +250,7 @@ export class BrowserWebCodecsService {
 				}
 			}
 
-			debug.log('webcodecs', 'Streaming setup complete');
+			debug.log('webcodecs', '[DIAG] Streaming setup complete, waiting for ICE/DataChannel');
 			return true;
 		} catch (error) {
 			debug.error('webcodecs', 'Failed to start streaming:', error);
@@ -596,9 +604,9 @@ export class BrowserWebCodecsService {
 				this.audioContext = new AudioContext({ sampleRate: 48000 });
 			}
 
-			// Resume if suspended (may happen without user gesture)
+			// Resume if suspended — fire-and-forget, same reason as in startStreaming
 			if (this.audioContext.state === 'suspended') {
-				await this.audioContext.resume();
+				this.audioContext.resume().catch(() => {});
 			}
 
 			debug.log('webcodecs', `AudioContext initialized (state: ${this.audioContext.state})`);
@@ -641,6 +649,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');
@@ -744,33 +757,28 @@ export class BrowserWebCodecsService {
 	}
 
 	/**
-	 * Play audio frame with proper AV synchronization
-	 *
-	 * The key insight: Audio and video timestamps from the server use the same
-	 * performance.now() origin. However, audio may start LATER than video if the
-	 * page has no audio initially (silence is skipped).
+	 * Play audio frame using simple back-to-back scheduling.
 	 *
-	 * Solution: Use lastVideoTimestamp (currently rendered video) as the reference
-	 * point, not the first video frame timestamp. This ensures we synchronize
-	 * audio to the CURRENT video position, not the initial position.
+	 * Frames are scheduled immediately one after another. When a gap occurs
+	 * (e.g. silence was skipped server-side and audio resumes), the schedule
+	 * is reset with a 50ms lookahead so playback starts cleanly without
+	 * audible pops or stutters from scheduling in the past.
 	 */
 	private playAudioFrame(audioData: AudioData): void {
 		if (!this.audioContext) return;
 
-		// Safety net: resume AudioContext if it somehow got suspended
+		// Safety net: resume AudioContext if suspended
 		if (this.audioContext.state === 'suspended') {
 			this.audioContext.resume().catch(() => {});
 		}
 
 		try {
-			// Create AudioBuffer
 			const buffer = this.audioContext.createBuffer(
 				audioData.numberOfChannels,
 				audioData.numberOfFrames,
 				audioData.sampleRate
 			);
 
-			// Copy audio data to buffer
 			for (let channel = 0; channel < audioData.numberOfChannels; channel++) {
 				const options = {
 					planeIndex: channel,
@@ -778,134 +786,27 @@ export class BrowserWebCodecsService {
 					frameCount: audioData.numberOfFrames,
 					format: 'f32-planar' as AudioSampleFormat
 				};
-
-				const requiredSize = audioData.allocationSize(options);
-				const tempBuffer = new ArrayBuffer(requiredSize);
-				const tempFloat32 = new Float32Array(tempBuffer);
+				// allocationSize() returns bytes — wrap in ArrayBuffer so Float32Array length is correct
+				const tempFloat32 = new Float32Array(new ArrayBuffer(audioData.allocationSize(options)));
 				audioData.copyTo(tempFloat32, options);
-
-				const channelData = buffer.getChannelData(channel);
-				channelData.set(tempFloat32);
+				buffer.getChannelData(channel).set(tempFloat32);
 			}
 
 			const currentTime = this.audioContext.currentTime;
-			const audioTimestamp = audioData.timestamp; // microseconds
-			const bufferDuration = buffer.duration;
-			const now = performance.now();
-
-			// Wait for video to establish sync before playing audio
-			if (!this.syncEstablished || this.lastVideoTimestamp === 0) {
-				// No video yet - skip this audio frame to prevent desync
-				return;
-			}
-
-			// Phase 1: Calibration - collect samples to determine stable offset
-			if (this.audioCalibrationSamples < this.CALIBRATION_SAMPLES) {
-				// Calculate the offset between audio timestamp and video timeline
-				// audioVideoOffset > 0 means audio is AHEAD of video in stream time
-				// audioVideoOffset < 0 means audio is BEHIND video in stream time
-				const audioVideoOffset = (audioTimestamp - this.lastVideoTimestamp) / 1000000; // seconds
-
-				// Also account for the time elapsed since video was rendered
-				const timeSinceVideoRender = (now - this.lastVideoRealTime) / 1000; // seconds
-
-				// Expected audio position relative to current video position
-				// If audio and video are in sync, audio should play at:
-				// currentTime + audioVideoOffset - timeSinceVideoRender
-				const expectedOffset = audioVideoOffset - timeSinceVideoRender;
-
-				this.audioOffsetAccumulator += expectedOffset;
-				this.audioCalibrationSamples++;
-
-				if (this.audioCalibrationSamples === this.CALIBRATION_SAMPLES) {
-					// Calibration complete - calculate average offset
-					this.calibratedAudioOffset = this.audioOffsetAccumulator / this.CALIBRATION_SAMPLES;
-
-					// Clamp the offset to reasonable bounds (-500ms to +500ms)
-					// Beyond this, something is wrong and we should just play immediately
-					if (this.calibratedAudioOffset < -0.5) {
-						debug.warn('webcodecs', `Audio calibration: offset ${(this.calibratedAudioOffset * 1000).toFixed(0)}ms too negative, clamping to -500ms`);
-						this.calibratedAudioOffset = -0.5;
-					} else if (this.calibratedAudioOffset > 0.5) {
-						debug.warn('webcodecs', `Audio calibration: offset ${(this.calibratedAudioOffset * 1000).toFixed(0)}ms too positive, clamping to +500ms`);
-						this.calibratedAudioOffset = 0.5;
-					}
-
-					// Initialize nextAudioPlayTime based on calibrated offset
-					// Add small buffer (30ms) for smooth playback
-					this.nextAudioPlayTime = currentTime + Math.max(0.03, this.calibratedAudioOffset + 0.03);
-					this.audioSyncInitialized = true;
-
-					debug.log('webcodecs', `Audio calibration complete: offset=${(this.calibratedAudioOffset * 1000).toFixed(1)}ms, startTime=${(this.nextAudioPlayTime - currentTime).toFixed(3)}s from now`);
-				} else {
-					// Still calibrating - skip this audio frame
-					return;
-				}
-			}
 
-			// Phase 2: Synchronized playback with drift correction
-			let targetPlayTime = this.nextAudioPlayTime;
-
-			// If we've fallen too far behind (buffer underrun), reset
-			if (targetPlayTime < currentTime - 0.01) {
-				// We're behind by more than 10ms, need to catch up
-				targetPlayTime = currentTime + 0.02; // Small buffer to recover
-				debug.warn('webcodecs', 'Audio buffer underrun, resetting playback');
-			}
-
-			// Periodic drift check (every ~500ms worth of audio, ~25 frames)
-			if (this.stats.audioFramesDecoded % 25 === 0) {
-				// Recalculate where audio SHOULD be based on current video position
-				const audioVideoOffset = (audioTimestamp - this.lastVideoTimestamp) / 1000000;
-				const timeSinceVideoRender = (now - this.lastVideoRealTime) / 1000;
-				const expectedOffset = audioVideoOffset - timeSinceVideoRender;
-
-				// Where audio should play relative to currentTime
-				const idealTime = currentTime + expectedOffset + 0.03; // +30ms buffer
-
-				const drift = targetPlayTime - idealTime;
-
-				// Apply correction based on drift magnitude
-				if (Math.abs(drift) > 0.2) {
-					// Large drift (>200ms) - aggressive correction (80%)
-					targetPlayTime -= drift * 0.8;
-					debug.warn('webcodecs', `Large audio drift: ${(drift * 1000).toFixed(0)}ms, aggressive correction`);
-				} else if (Math.abs(drift) > 0.05) {
-					// Medium drift (50-200ms) - moderate correction (40%)
-					targetPlayTime -= drift * 0.4;
-				}
-				// Small drift (<50ms) - no correction, continuous playback handles it
+			// When the scheduler has fallen behind (gap due to silence or decode delay),
+			// reset with a 50ms lookahead so the next chunk starts cleanly.
+			if (this.nextAudioPlayTime < currentTime) {
+				this.nextAudioPlayTime = currentTime + 0.05;
 			}
 
-			// Ensure we don't schedule in the past
-			if (targetPlayTime < currentTime + 0.005) {
-				targetPlayTime = currentTime + 0.005;
-			}
-
-			// Schedule this buffer
 			const source = this.audioContext.createBufferSource();
 			source.buffer = buffer;
 			source.connect(this.audioContext.destination);
-			source.start(targetPlayTime);
-
-			// Track scheduled buffer
-			this.audioBufferQueue.push({ buffer, scheduledTime: targetPlayTime });
+			source.start(this.nextAudioPlayTime);
 
-			// Update next play time for continuous scheduling (back-to-back)
-			this.nextAudioPlayTime = targetPlayTime + bufferDuration;
-
-			// Limit queue size to prevent memory buildup
-			if (this.audioBufferQueue.length > this.maxAudioQueueSize) {
-				this.audioBufferQueue.shift();
-			}
-
-			// Cleanup old scheduled buffers
-			source.onended = () => {
-				const index = this.audioBufferQueue.findIndex(item => item.buffer === buffer);
-				if (index !== -1) {
-					this.audioBufferQueue.splice(index, 1);
-				}
-			};
+			// Back-to-back: next chunk plays immediately after this one ends
+			this.nextAudioPlayTime += buffer.duration;
 		} catch (error) {
 			debug.warn('webcodecs', 'Audio playback error:', error);
 		}
@@ -1477,6 +1378,10 @@ export class BrowserWebCodecsService {
 		this.onReconnectingStart = handler;
 	}
 
+	setFirstFrameHandler(handler: () => void): void {
+		this.onFirstFrame = handler;
+	}
+
 	setErrorHandler(handler: (error: Error) => void): void {
 		this.onError = handler;
 	}

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

@@ -214,10 +214,11 @@ export function isSessionUnread(sessionId: string): boolean {
 
 /**
  * Check if a project has any unread sessions.
+ * Optionally exclude a specific session (e.g. the currently viewed one).
  */
-export function hasUnreadSessionsForProject(projectId: string): boolean {
-	for (const pId of appState.unreadSessions.values()) {
-		if (pId === projectId) return true;
+export function hasUnreadSessionsForProject(projectId: string, excludeSessionId?: string): boolean {
+	for (const [sId, pId] of appState.unreadSessions.entries()) {
+		if (pId === projectId && sId !== excludeSessionId) return true;
 	}
 	return false;
 }

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

@@ -119,8 +119,9 @@ export function getProjectStatusColor(projectId: string): string {
 		return 'bg-amber-500';
 	}
 
-	// Check for unread sessions in this project
-	if (hasUnreadSessionsForProject(projectId)) return 'bg-blue-500';
+	// Check for unread sessions in this project, excluding the currently viewed session
+	const currentSessionId = sessionState.currentSession?.id;
+	if (hasUnreadSessionsForProject(projectId, currentSessionId)) return 'bg-blue-500';
 
 	return 'bg-slate-500/30';
 }

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

@@ -295,6 +295,8 @@ export async function loadSessions() {
 						// wiping out any stream_event injected by catchup.
 						await loadMessagesForSession(targetSession.id);
 						sessionState.currentSession = targetSession;
+						// Clear unread status — user is actively viewing this session
+						markSessionRead(targetSession.id);
 						// Join chat session room so we receive session-scoped events
 						// (stream, input sync, edit mode, model sync).
 						// Critical after refresh — without it, connection misses all events.

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

@@ -6,6 +6,9 @@ export const notificationStore = $state({
 	maxNotifications: 5
 });
 
+// Monotonic counter for unique notification IDs
+let _notificationCounter = 0;
+
 // Derived values as functions (cannot export derived state from modules)
 export function hasNotifications() {
 	return notificationStore.notifications.length > 0;
@@ -18,7 +21,7 @@ export function notificationCount() {
 // Notification management functions
 export function addNotification(notification: Omit<ToastNotification, 'id'>) {
 	const newNotification: ToastNotification = {
-		id: Date.now().toString(),
+		id: `${Date.now()}-${++_notificationCounter}`,
 		...notification,
 		duration: notification.duration || 5000 // Default 5 seconds
 	};

package/package.json

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