@myrialabs/clopen 0.2.6 → 0.2.8

package/frontend/components/preview/browser/core/mcp-handlers.svelte.ts

@@ -1,6 +1,9 @@
 /**
  * Browser MCP Event Handlers
  * Handles MCP (Model Context Protocol) control events for BrowserPreview
+ *
+ * Supports multi-tab control: each chat session can control multiple tabs.
+ * Tracks controlled tabs via a Set of backend tab IDs (session IDs).
  */
 
 import { debug } from '$shared/utils/logger';
@@ -8,14 +11,6 @@ import { showInfo, showWarning } from '$frontend/stores/ui/notification.svelte';
 import ws from '$frontend/utils/ws';
 import type { TabManager } from './tab-manager.svelte';
 
-// MCP Control State interface
-export interface McpControlState {
-	isControlled: boolean;
-	controlledTabId: string | null;
-	browserSessionId: string | null;
-	startedAt: number | null;
-}
-
 export interface McpHandlerConfig {
 	tabManager: TabManager;
 	transformBrowserToDisplayCoordinates?: (x: number, y: number) => { x: number, y: number } | null;
@@ -30,13 +25,8 @@ export interface McpHandlerConfig {
 export function createMcpHandler(config: McpHandlerConfig) {
 	const { tabManager, transformBrowserToDisplayCoordinates, onCursorUpdate, onCursorHide, onLaunchRequest } = config;
 
-	// MCP control state
-	let mcpControlState = $state<McpControlState>({
-		isControlled: false,
-		controlledTabId: null,
-		browserSessionId: null,
-		startedAt: null
-	});
+	// Set of backend tab IDs (session IDs) currently controlled by MCP
+	let controlledSessionIds = $state(new Set<string>());
 
 	/**
 	 * Setup WebSocket event listeners for MCP control events
@@ -44,7 +34,7 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	function setupEventListeners() {
 		debug.log('preview', '🎧 Setting up MCP event listeners...');
 
-		// Listen for MCP control start/end events
+		// Listen for MCP control start/end events (per-tab)
 		ws.on('preview:browser-mcp-control-start', (data) => {
 			debug.log('preview', `📥 Received mcp-control-start:`, data);
 			handleControlStart(data);
@@ -93,60 +83,72 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	}
 
 	/**
-	 * Check if current tab is MCP controlled
+	 * Check if current active tab is MCP controlled
 	 */
 	function isCurrentTabMcpControlled(): boolean {
-		return mcpControlState.isControlled && mcpControlState.controlledTabId === tabManager.activeTabId;
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (!activeTab?.sessionId) return false;
+		return controlledSessionIds.has(activeTab.sessionId);
 	}
 
 	/**
-	 * Get MCP control state
+	 * Check if a specific frontend tab is MCP controlled (by sessionId)
 	 */
-	function getControlState(): McpControlState {
-		return mcpControlState;
+	function isSessionControlled(sessionId: string): boolean {
+		return controlledSessionIds.has(sessionId);
 	}
 
-	// Private handlers
+	/**
+	 * Get set of frontend tab IDs that are MCP controlled
+	 */
+	function getControlledTabIds(): Set<string> {
+		const result = new Set<string>();
+		for (const tab of tabManager.tabs) {
+			if (tab.sessionId && controlledSessionIds.has(tab.sessionId)) {
+				result.add(tab.id);
+			}
+		}
+		return result;
+	}
 
-	function handleControlStart(data: { browserSessionId: string; mcpSessionId?: string; timestamp: number }) {
-		debug.log('preview', `🎮 MCP control started for session: ${data.browserSessionId}`);
+	// Private handlers
 
-		// Find which tab has this session
-		const tab = tabManager.tabs.find(t => t.sessionId === data.browserSessionId);
+	function handleControlStart(data: { browserTabId: string; chatSessionId?: string; timestamp: number }) {
+		debug.log('preview', `🎮 MCP control started for tab: ${data.browserTabId}`);
 
-		mcpControlState = {
-			isControlled: true,
-			controlledTabId: tab?.id || null,
-			browserSessionId: data.browserSessionId,
-			startedAt: data.timestamp
-		};
+		// Add to controlled set (reassign for Svelte reactivity)
+		controlledSessionIds = new Set([...controlledSessionIds, data.browserTabId]);
 
-		// Show toast notification
-		showWarning('MCP Control Started', 'An MCP agent is now controlling the browser. User input is blocked.', 5000);
+		// Show toast only for the first controlled tab
+		if (controlledSessionIds.size === 1) {
+			showWarning('MCP Control Started', 'An MCP agent is now controlling the browser. User input is blocked.', 5000);
+		}
 	}
 
-	function handleControlEnd(data: { browserSessionId: string; timestamp: number }) {
-		debug.log('preview', `🎮 MCP control ended for session: ${data.browserSessionId}`);
+	function handleControlEnd(data: { browserTabId: string; timestamp: number }) {
+		debug.log('preview', `🎮 MCP control ended for tab: ${data.browserTabId}`);
 
-		mcpControlState = {
-			isControlled: false,
-			controlledTabId: null,
-			browserSessionId: null,
-			startedAt: null
-		};
+		// Remove from controlled set (reassign for Svelte reactivity)
+		const newSet = new Set(controlledSessionIds);
+		newSet.delete(data.browserTabId);
+		controlledSessionIds = newSet;
 
-		// Hide cursor
-		if (onCursorHide) {
+		// Hide cursor if the released tab was the active one
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.browserTabId && onCursorHide) {
 			onCursorHide();
 		}
 
-		// Show toast notification
-		showInfo('MCP Control Ended', 'MCP agent released control. You can now interact with the browser.', 4000);
+		// Show toast when all tabs released
+		if (controlledSessionIds.size === 0) {
+			showInfo('MCP Control Ended', 'MCP agent released control. You can now interact with the browser.', 4000);
+		}
 	}
 
 	function handleCursorPosition(data: { sessionId: string; x: number; y: number; timestamp: number; source: 'mcp' }) {
-		// Only update cursor if this is for the active session and MCP is controlling
-		if (mcpControlState.isControlled && mcpControlState.browserSessionId === data.sessionId && transformBrowserToDisplayCoordinates) {
+		// Only show cursor if this tab is controlled AND user is viewing it
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.sessionId && controlledSessionIds.has(data.sessionId) && transformBrowserToDisplayCoordinates) {
 			const transformedPosition = transformBrowserToDisplayCoordinates(data.x, data.y);
 			if (transformedPosition && onCursorUpdate) {
 				onCursorUpdate(transformedPosition.x, transformedPosition.y, false);
@@ -155,7 +157,9 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	}
 
 	function handleCursorClick(data: { sessionId: string; x: number; y: number; timestamp: number; source: 'mcp' }) {
-		if (mcpControlState.isControlled && mcpControlState.browserSessionId === data.sessionId && transformBrowserToDisplayCoordinates) {
+		// Only show cursor click if this tab is controlled AND user is viewing it
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.sessionId && controlledSessionIds.has(data.sessionId) && transformBrowserToDisplayCoordinates) {
 			const transformedPosition = transformBrowserToDisplayCoordinates(data.x, data.y);
 			if (transformedPosition && onCursorUpdate) {
 				onCursorUpdate(transformedPosition.x, transformedPosition.y, true);
@@ -163,6 +167,26 @@ export function createMcpHandler(config: McpHandlerConfig) {
 		}
 	}
 
+	/**
+	 * Restore MCP control state after session recovery (browser refresh or project switch)
+	 * Called when recovered backend tab was previously MCP-controlled
+	 */
+	function restoreControlState(frontendTabId: string, browserSessionId: string): void {
+		debug.log('preview', `🔄 Restoring MCP control state for tab: ${frontendTabId} (session: ${browserSessionId})`);
+		controlledSessionIds = new Set([...controlledSessionIds, browserSessionId]);
+	}
+
+	/**
+	 * Reset MCP control state (called before project switch recovery)
+	 */
+	function resetControlState(): void {
+		debug.log('preview', `🔄 Resetting MCP control state`);
+		controlledSessionIds = new Set();
+		if (onCursorHide) {
+			onCursorHide();
+		}
+	}
+
 	function handleTestCompleted(_data: { sessionId: string; timestamp: number; source: 'mcp' }) {
 		// Cursor is hidden via chat:complete / chat:cancelled listeners instead,
 		// because test-completed fires per-tool-call, not at end of full request.
@@ -296,8 +320,11 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	return {
 		setupEventListeners,
 		isCurrentTabMcpControlled,
-		getControlState,
-		get mcpControlState() { return mcpControlState; }
+		isSessionControlled,
+		getControlledTabIds,
+		restoreControlState,
+		resetControlState,
+		get controlledSessionIds() { return controlledSessionIds; }
 	};
 }
 

package/frontend/components/preview/browser/core/tab-operations.svelte.ts

@@ -44,6 +44,7 @@ export interface ExistingTabInfo {
 	deviceSize: string;
 	rotation: string;
 	isActive: boolean;
+	isMcpControlled?: boolean;
 }
 
 export interface ExistingTabsResult {

package/frontend/components/workspace/PanelHeader.svelte

@@ -481,6 +481,21 @@
 					{/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>
+
 				<!-- Rotation toggle -->
 				<button
 					type="button"

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

@@ -942,6 +942,16 @@
 		}
 	}
 
+	async function copyTagHash(hash: string, e: MouseEvent) {
+		e.stopPropagation();
+		try {
+			await navigator.clipboard.writeText(hash);
+			showInfo('Copied', `Hash ${hash.substring(0, 7)} copied to clipboard`);
+		} catch {
+			showError('Copy Failed', 'Could not copy to clipboard');
+		}
+	}
+
 	// ============================
 	// Lifecycle
 	// ============================
@@ -1323,8 +1333,8 @@
 						<div class="group flex items-center gap-2 px-2.5 py-2 rounded-md hover:bg-slate-100 dark:hover:bg-slate-800/60 transition-colors">
 							<Icon name="lucide:archive" class="w-4 h-4 text-slate-400 shrink-0" />
 							<div class="flex-1 min-w-0">
-								<p class="text-xs font-medium text-slate-900 dark:text-slate-100 truncate">{entry.message}</p>
-								<p class="text-3xs text-slate-400 dark:text-slate-500">stash@&#123;{entry.index}&#125;</p>
+								<p class="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">{entry.message}</p>
+								<p class="text-xs text-slate-400 dark:text-slate-500">stash@&#123;{entry.index}&#125;</p>
 							</div>
 							<div class="flex items-center gap-0.5 shrink-0">
 								<button
@@ -1416,21 +1426,20 @@
 				<div class="space-y-1 px-1">
 					{#each tags as tag (tag.name)}
 						<div class="group flex items-center gap-2 px-2.5 py-2 rounded-md hover:bg-slate-100 dark:hover:bg-slate-800/60 transition-colors">
-							<Icon
-								name={tag.isAnnotated ? 'lucide:bookmark' : 'lucide:tag'}
-								class="w-4 h-4 shrink-0 {tag.isAnnotated ? 'text-amber-500' : 'text-slate-400'}"
-							/>
+							<Icon name="lucide:tag" class="w-4 h-4 text-slate-400 shrink-0" />
 							<div class="flex-1 min-w-0">
+								<p class="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">{tag.name}</p>
 								<div class="flex items-center gap-1.5">
-									<p class="text-xs font-medium text-slate-900 dark:text-slate-100 truncate">{tag.name}</p>
-									{#if tag.isAnnotated}
-										<span class="text-3xs px-1 py-0.5 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 shrink-0">annotated</span>
+									<button
+										type="button"
+										class="text-xs font-mono text-slate-400 dark:text-slate-500 hover:text-violet-600 dark:hover:text-violet-400 bg-transparent border-none cursor-pointer p-0 shrink-0 transition-colors"
+										onclick={(e) => copyTagHash(tag.hash, e)}
+										title="Copy tag hash"
+									>{tag.hash.slice(0, 7)}</button>
+									{#if tag.message}
+										<span class="text-xs text-slate-400 dark:text-slate-500 truncate">{tag.message}</span>
 									{/if}
 								</div>
-								{#if tag.message}
-									<p class="text-3xs text-slate-500 dark:text-slate-400 truncate">{tag.message}</p>
-								{/if}
-								<p class="text-3xs text-slate-400 dark:text-slate-500 font-mono">{tag.hash}</p>
 							</div>
 							<div class="flex items-center gap-0.5 shrink-0">
 								<button

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

@@ -104,6 +104,8 @@
 
 	// Export actions for DesktopPanel header
 	export const panelActions = {
+		getTouchMode: () => browserPreviewRef?.browserActions?.getTouchMode() || 'scroll',
+		setTouchMode: (mode: 'scroll' | 'cursor') => { browserPreviewRef?.browserActions?.setTouchMode(mode); },
 		getDeviceSize: () => deviceSize,
 		getRotation: () => rotation,
 		getScale: () => previewDimensions?.scale || 1,

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

@@ -485,13 +485,9 @@ class ChatService {
     // before a stale non-reasoning stream_event instead of at the end).
     this.cleanupStreamEvents();
 
-    // Safety timeout: clear isCancelling after 10s if WS confirmation never arrives
-    // (e.g., network issues, dropped connection)
-    setTimeout(() => {
-      if (appState.isCancelling) {
-        appState.isCancelling = false;
-      }
-    }, 10000);
+    // 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.
   }
 
   /**

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

@@ -164,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');
@@ -182,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
@@ -204,7 +208,7 @@ export class BrowserWebCodecsService {
 
 		if (this.ctx) {
 			this.ctx.imageSmoothingEnabled = true;
-			this.ctx.imageSmoothingQuality = 'low';
+			this.ctx.imageSmoothingQuality = 'medium';
 		}
 
 		this.clearCanvas();
@@ -214,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');
@@ -225,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,
@@ -241,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);
@@ -595,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})`);
@@ -748,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,
@@ -782,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
-			}
-
-			// Ensure we don't schedule in the past
-			if (targetPlayTime < currentTime + 0.005) {
-				targetPlayTime = currentTime + 0.005;
+			// 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;
 			}
 
-			// Schedule this buffer
 			const source = this.audioContext.createBufferSource();
 			source.buffer = buffer;
 			source.connect(this.audioContext.destination);
-			source.start(targetPlayTime);
+			source.start(this.nextAudioPlayTime);
 
-			// Track scheduled buffer
-			this.audioBufferQueue.push({ buffer, scheduledTime: targetPlayTime });
-
-			// 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);
 		}
@@ -1106,7 +1003,7 @@ export class BrowserWebCodecsService {
 
 		if (this.ctx) {
 			this.ctx.imageSmoothingEnabled = true;
-			this.ctx.imageSmoothingQuality = 'low';
+			this.ctx.imageSmoothingQuality = 'medium';
 		}
 
 		try {

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