@myrialabs/clopen 0.2.6 → 0.2.7

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,25 @@
 				<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'}"
-							/>
+							<span title={tag.isAnnotated ? 'Annotated tag' : 'Lightweight tag'} class="shrink-0">
+								<Icon
+									name={tag.isAnnotated ? 'lucide:bookmark' : 'lucide:tag'}
+									class="w-4 h-4 {tag.isAnnotated ? 'text-amber-500' : 'text-slate-400'}"
+								/>
+							</span>
 							<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
@@ -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);
 		}

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.6",
+  "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",