@myrialabs/clopen 0.2.6 → 0.2.8

package/frontend/components/preview/browser/components/Canvas.svelte

@@ -24,7 +24,9 @@
 		onCursorUpdate = $bindable<(cursor: string) => void>(() => {}),
 		onFrameUpdate = $bindable<(data: any) => void>(() => {}),
 		onStatsUpdate = $bindable<(stats: BrowserWebCodecsStreamStats | null) => void>(() => {}),
-		onRequestScreencastRefresh = $bindable<() => void>(() => {}) // Called when stream is stuck
+		onRequestScreencastRefresh = $bindable<() => void>(() => {}), // Called when stream is stuck
+		touchMode = $bindable<'scroll' | 'cursor'>('scroll'),
+		onTouchCursorUpdate = $bindable<(pos: { x: number; y: number; visible: boolean; clicking?: boolean }) => void>(() => {})
 	} = $props();
 
 	// WebCodecs service instance
@@ -83,6 +85,7 @@
 			// Clear canvas snapshots - they belong to old project's sessions
 			canvasSnapshots.clear();
 			hasRestoredSnapshot = false;
+			lastStartRequestId = null; // Clear so new project sessions aren't blocked by old tab IDs
 
 			// Destroy old service
 			if (webCodecsService) {
@@ -296,6 +299,24 @@
 	let mouseDownTime = $state(0);
 	let dragStarted = $state(false); // Track if we've sent mousedown for drag
 
+	// Touch-specific tracking (non-reactive for performance)
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+	let touchLongPressed = false;
+	let lastTouchCoords: { x: number; y: number } | null = null;
+
+	// Trackpad cursor state (cursor/trackpad mode - persists between touch gestures)
+	let trackpadCursorX = 0;
+	let trackpadCursorY = 0;
+	let trackpadLastClientX = 0;
+	let trackpadLastClientY = 0;
+	let trackpadTouchStartClientX = 0;
+	let trackpadTouchStartClientY = 0;
+	let trackpadTwoFingerActive = false;
+	let trackpadTwoFingerStartTime = 0;
+	let trackpadTwoFingerLastCenterX = 0;
+	let trackpadTwoFingerLastCenterY = 0;
+	let trackpadTwoFingerTotalDist = 0;
+
 	function handleCanvasMouseDown(event: MouseEvent, canvas: HTMLCanvasElement) {
 		if (!sessionId) return;
 
@@ -385,7 +406,7 @@
 			// This matches the loading overlay background roughly
 			if (ctx) {
 				ctx.imageSmoothingEnabled = true;
-				ctx.imageSmoothingQuality = 'low'; // Faster rendering
+				ctx.imageSmoothingQuality = 'medium';
 				ctx.fillStyle = '#f1f5f9'; // slate-100 - neutral light color
 				ctx.fillRect(0, 0, canvasElement.width, canvasElement.height);
 			}
@@ -403,24 +424,29 @@
 
 	// Start WebCodecs streaming
 	async function startStreaming() {
-		if (!sessionId || !canvasElement) return;
+		debug.log('webcodecs', `[DIAG] startStreaming() called: sessionId=${sessionId}, canvasElement=${!!canvasElement}, isStartingStream=${isStartingStream}, isWebCodecsActive=${isWebCodecsActive}, activeStreamingSessionId=${activeStreamingSessionId}, lastStartRequestId=${lastStartRequestId}`);
+
+		if (!sessionId || !canvasElement) {
+			debug.log('webcodecs', `[DIAG] startStreaming() early exit: missing sessionId=${!sessionId} or canvasElement=${!canvasElement}`);
+			return;
+		}
 
 		// Prevent concurrent start attempts
 		if (isStartingStream) {
-			debug.log('webcodecs', 'Already starting stream, skipping duplicate call');
+			debug.log('webcodecs', '[DIAG] startStreaming() skipped: already starting stream');
 			return;
 		}
 
 		// If already streaming same session, skip
 		if (isWebCodecsActive && activeStreamingSessionId === sessionId) {
-			debug.log('webcodecs', 'Already streaming same session, skipping');
+			debug.log('webcodecs', '[DIAG] startStreaming() skipped: already streaming same session');
 			return;
 		}
 
 		// Prevent duplicate requests for same session
 		const requestId = `${sessionId}-${Date.now()}`;
 		if (lastStartRequestId && lastStartRequestId.startsWith(sessionId)) {
-			debug.log('webcodecs', `Duplicate start request for ${sessionId}, skipping`);
+			debug.log('webcodecs', `[DIAG] startStreaming() skipped: duplicate request for ${sessionId}, lastStartRequestId=${lastStartRequestId}`);
 			return;
 		}
 		lastStartRequestId = requestId;
@@ -538,10 +564,17 @@
 						startHealthCheck(hasRestoredSnapshot); // Skip first frame reset if snapshot
 						hasRestoredSnapshot = false; // Reset after using
 						debug.log('webcodecs', 'Streaming started successfully');
-						break;
+					} else {
+						// Service handles errors internally and returns false.
+						// Never retry here — retrying immediately creates a stop/start loop.
+						debug.warn('webcodecs', 'Streaming start returned false, stopping retries');
 					}
+					// Always break after the service returns (success or failure).
+					// The service catches all exceptions internally, so the catch block
+					// below never runs, making retries/retryDelay dead code anyway.
+					break;
 				} catch (error: any) {
-					// Check if it's a retriable error - might just need more time
+					// This block only runs if the service unexpectedly throws.
 					const isRetriable = error?.message?.includes('not found') ||
 						error?.message?.includes('invalid') ||
 						error?.message?.includes('Failed to start') ||
@@ -554,11 +587,9 @@
 							await new Promise(resolve => setTimeout(resolve, retryDelay));
 						} else {
 							debug.error('webcodecs', 'Max retries reached, streaming still not ready');
-							// Don't throw - just fail silently and let user retry manually
 							break;
 						}
 					} else {
-						// Other errors - don't retry, just log
 						debug.error('webcodecs', 'Streaming error:', error);
 						break;
 					}
@@ -850,6 +881,8 @@
 	// Start/restart streaming when session is ready
 	// This handles both initial start and session changes (viewport switch, etc.)
 	$effect(() => {
+		debug.log('webcodecs', `[DIAG] streaming $effect triggered: sessionId=${sessionId}, canvasElement=${!!canvasElement}, sessionInfo=${!!sessionInfo}, isReconnecting=${isReconnecting}, isWebCodecsActive=${isWebCodecsActive}, activeStreamingSessionId=${activeStreamingSessionId}`);
+
 		if (sessionId && canvasElement && sessionInfo) {
 			// Skip during fast reconnect - fastReconnect() handles this case
 			if (isReconnecting) {
@@ -859,6 +892,7 @@
 
 			// Check if we need to start or restart streaming
 			const needsStreaming = !isWebCodecsActive || activeStreamingSessionId !== sessionId;
+			debug.log('webcodecs', `[DIAG] streaming $effect: needsStreaming=${needsStreaming}`);
 
 			if (needsStreaming) {
 				if (activeStreamingSessionId !== sessionId) {
@@ -968,9 +1002,20 @@
 				canvas.focus();
 			});
 
-			canvas.addEventListener('touchstart', (e) => handleTouchStart(e, canvas), { passive: false });
-			canvas.addEventListener('touchmove', (e) => handleTouchMove(e, canvas), { passive: false });
-			canvas.addEventListener('touchend', (e) => handleTouchEnd(e, canvas), { passive: false });
+			const touchStartHandler = (e: TouchEvent) => handleTouchStart(e, canvas);
+			let lastTouchMoveTime = 0;
+			const touchMoveHandler = (e: TouchEvent) => {
+				const now = Date.now();
+				if (now - lastTouchMoveTime >= 16) {
+					lastTouchMoveTime = now;
+					handleTouchMove(e, canvas);
+				}
+			};
+			const touchEndHandler = (e: TouchEvent) => handleTouchEnd(e, canvas);
+
+			canvas.addEventListener('touchstart', touchStartHandler, { passive: false });
+			canvas.addEventListener('touchmove', touchMoveHandler, { passive: false });
+			canvas.addEventListener('touchend', touchEndHandler, { passive: false });
 
 			const handleMouseLeave = () => {
 				if (isMouseDown) {
@@ -1000,76 +1045,299 @@
 				canvas.removeEventListener('mousedown', (e) => handleCanvasMouseDown(e, canvas));
 				canvas.removeEventListener('mouseup', (e) => handleCanvasMouseUp(e, canvas));
 				canvas.removeEventListener('mousemove', handleMouseMove);
-				canvas.removeEventListener('touchstart', (e) => handleTouchStart(e, canvas));
-				canvas.removeEventListener('touchmove', (e) => handleTouchMove(e, canvas));
-				canvas.removeEventListener('touchend', (e) => handleTouchEnd(e, canvas));
+				canvas.removeEventListener('touchstart', touchStartHandler);
+				canvas.removeEventListener('touchmove', touchMoveHandler);
+				canvas.removeEventListener('touchend', touchEndHandler);
 			};
 		}
 	});
 
+	// Convert canvas coordinates to viewport (screen) coordinates for VirtualCursor display
+	function canvasToScreen(cx: number, cy: number): { x: number; y: number } {
+		if (!canvasElement) return { x: 0, y: 0 };
+		const rect = canvasElement.getBoundingClientRect();
+		return {
+			x: rect.left + cx * (rect.width / canvasElement.width),
+			y: rect.top + cy * (rect.height / canvasElement.height)
+		};
+	}
+
+	// Show / hide cursor when touchMode changes
+	$effect(() => {
+		if (touchMode === 'cursor') {
+			// Init cursor at canvas center on first activation
+			if (canvasElement && trackpadCursorX === 0 && trackpadCursorY === 0) {
+				trackpadCursorX = canvasElement.width / 2;
+				trackpadCursorY = canvasElement.height / 2;
+			}
+			if (canvasElement) {
+				const pos = canvasToScreen(trackpadCursorX, trackpadCursorY);
+				onTouchCursorUpdate({ x: pos.x, y: pos.y, visible: true });
+			}
+		} else {
+			onTouchCursorUpdate({ x: 0, y: 0, visible: false });
+		}
+	});
+
+	// ── Trackpad (cursor) mode handlers ───────────────────────────────────────
+
+	function handleTrackpadTouchStart(event: TouchEvent) {
+		if (event.touches.length >= 2) {
+			// Second finger joined → switch to two-finger mode
+			if (!trackpadTwoFingerActive) {
+				// Cancel any pending single-finger actions
+				if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
+				if (touchLongPressed && dragStarted) {
+					sendInteraction({ type: 'mouseup', x: Math.round(trackpadCursorX), y: Math.round(trackpadCursorY), button: 'left' });
+				}
+				isMouseDown = false;
+				dragStarted = false;
+				touchLongPressed = false;
+			}
+			trackpadTwoFingerActive = true;
+			trackpadTwoFingerStartTime = Date.now();
+			trackpadTwoFingerTotalDist = 0;
+			const t1 = event.touches[0];
+			const t2 = event.touches[1];
+			trackpadTwoFingerLastCenterX = (t1.clientX + t2.clientX) / 2;
+			trackpadTwoFingerLastCenterY = (t1.clientY + t2.clientY) / 2;
+			return;
+		}
+
+		if (trackpadTwoFingerActive) return; // Ignore until two-finger gesture fully ends
+
+		// Single finger
+		const touch = event.touches[0];
+		trackpadTouchStartClientX = touch.clientX;
+		trackpadTouchStartClientY = touch.clientY;
+		trackpadLastClientX = touch.clientX;
+		trackpadLastClientY = touch.clientY;
+		isMouseDown = true;
+		mouseDownTime = Date.now();
+		dragStarted = false;
+		touchLongPressed = false;
+
+		// Long-press (600ms without movement) → drag mode
+		longPressTimer = setTimeout(() => {
+			if (!isMouseDown) return;
+			const dist = Math.sqrt(
+				Math.pow(trackpadLastClientX - trackpadTouchStartClientX, 2) +
+				Math.pow(trackpadLastClientY - trackpadTouchStartClientY, 2)
+			);
+			if (dist < 8) {
+				touchLongPressed = true;
+				dragStarted = true;
+				sendInteraction({ type: 'mousedown', x: Math.round(trackpadCursorX), y: Math.round(trackpadCursorY), button: 'left' });
+			}
+		}, 600);
+	}
+
+	function handleTrackpadTouchMove(event: TouchEvent) {
+		if (!canvasElement) return;
+
+		if (event.touches.length >= 2 && trackpadTwoFingerActive) {
+			// Two-finger scroll
+			const t1 = event.touches[0];
+			const t2 = event.touches[1];
+			const centerX = (t1.clientX + t2.clientX) / 2;
+			const centerY = (t1.clientY + t2.clientY) / 2;
+			const deltaX = trackpadTwoFingerLastCenterX - centerX;
+			const deltaY = trackpadTwoFingerLastCenterY - centerY;
+			trackpadTwoFingerLastCenterX = centerX;
+			trackpadTwoFingerLastCenterY = centerY;
+			trackpadTwoFingerTotalDist += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+			if (Math.abs(deltaX) > 0.3 || Math.abs(deltaY) > 0.3) {
+				const rect = canvasElement.getBoundingClientRect();
+				const scale = canvasElement.width / rect.width;
+				sendInteraction({ type: 'scroll', deltaX: deltaX * scale * 2, deltaY: deltaY * scale * 2 });
+			}
+			return;
+		}
+
+		if (event.touches.length !== 1 || !isMouseDown || trackpadTwoFingerActive) return;
+
+		const touch = event.touches[0];
+		const deltaClientX = touch.clientX - trackpadLastClientX;
+		const deltaClientY = touch.clientY - trackpadLastClientY;
+		trackpadLastClientX = touch.clientX;
+		trackpadLastClientY = touch.clientY;
+
+		// Cancel long-press if finger moved significantly
+		const totalDist = Math.sqrt(
+			Math.pow(touch.clientX - trackpadTouchStartClientX, 2) +
+			Math.pow(touch.clientY - trackpadTouchStartClientY, 2)
+		);
+		if (totalDist > 8 && longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+
+		// Convert screen delta → canvas delta and move cursor
+		const rect = canvasElement.getBoundingClientRect();
+		const scale = canvasElement.width / rect.width;
+		trackpadCursorX = Math.max(0, Math.min(canvasElement.width, trackpadCursorX + deltaClientX * scale));
+		trackpadCursorY = Math.max(0, Math.min(canvasElement.height, trackpadCursorY + deltaClientY * scale));
+
+		// Send mousemove so the browser sees hover state changes
+		sendInteraction({ type: 'mousemove', x: Math.round(trackpadCursorX), y: Math.round(trackpadCursorY) });
+
+		// Update virtual cursor display
+		const pos = canvasToScreen(trackpadCursorX, trackpadCursorY);
+		onTouchCursorUpdate({ x: pos.x, y: pos.y, visible: true });
+	}
+
+	function handleTrackpadTouchEnd(event: TouchEvent) {
+		if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
+
+		const remainingTouches = event.touches.length;
+
+		if (trackpadTwoFingerActive) {
+			if (remainingTouches === 0) {
+				// All fingers lifted: check for two-finger tap → right click
+				const duration = Date.now() - trackpadTwoFingerStartTime;
+				if (duration < 300 && trackpadTwoFingerTotalDist < 20) {
+					sendInteraction({ type: 'rightclick', x: Math.round(trackpadCursorX), y: Math.round(trackpadCursorY) });
+				}
+				trackpadTwoFingerActive = false;
+			} else if (remainingTouches === 1) {
+				// One finger remains: transition back to single-finger tracking
+				const touch = event.touches[0];
+				trackpadLastClientX = touch.clientX;
+				trackpadLastClientY = touch.clientY;
+				trackpadTouchStartClientX = touch.clientX;
+				trackpadTouchStartClientY = touch.clientY;
+				isMouseDown = true;
+				mouseDownTime = Date.now();
+				trackpadTwoFingerActive = false;
+			}
+			return;
+		}
+
+		if (!isMouseDown) return;
+
+		if (touchLongPressed && dragStarted) {
+			sendInteraction({ type: 'mouseup', x: Math.round(trackpadCursorX), y: Math.round(trackpadCursorY), button: 'left' });
+		} else {
+			// Tap: short + minimal movement → left click at cursor position
+			const duration = Date.now() - mouseDownTime;
+			const moveDist = Math.sqrt(
+				Math.pow(trackpadLastClientX - trackpadTouchStartClientX, 2) +
+				Math.pow(trackpadLastClientY - trackpadTouchStartClientY, 2)
+			);
+			if (duration < 250 && moveDist < 10) {
+				sendInteraction({ type: 'click', x: Math.round(trackpadCursorX), y: Math.round(trackpadCursorY) });
+			}
+		}
+
+		isMouseDown = false;
+		dragStarted = false;
+		touchLongPressed = false;
+	}
+
+	// ── Touch event handlers (dispatch to scroll or trackpad mode) ────────────
+
 	// Touch event handlers
 	function handleTouchStart(event: TouchEvent, canvas: HTMLCanvasElement) {
 		if (!sessionId || event.touches.length === 0) return;
 		event.preventDefault();
 
+		if (touchMode === 'cursor') {
+			handleTrackpadTouchStart(event);
+			return;
+		}
+
+		// ── Scroll mode ──────────────────────────────────────────────────────────
+		if (event.touches.length > 1) return;
+
 		const coords = getCanvasCoordinates(event, canvas);
 		isMouseDown = true;
 		mouseDownTime = Date.now();
 		dragStartPos = { x: coords.x, y: coords.y };
 		dragCurrentPos = { x: coords.x, y: coords.y };
-		dragStarted = false; // Reset drag started flag
+		dragStarted = false;
+		touchLongPressed = false;
+		lastTouchCoords = { x: coords.x, y: coords.y };
+
+		// Long-press detection: after 500ms without significant movement → drag mode
+		longPressTimer = setTimeout(() => {
+			if (!isMouseDown || !dragStartPos) return;
+			const dist = dragCurrentPos
+				? Math.sqrt(
+						Math.pow(dragCurrentPos.x - dragStartPos.x, 2) +
+						Math.pow(dragCurrentPos.y - dragStartPos.y, 2)
+					)
+				: 0;
+			if (dist < 10) {
+				touchLongPressed = true;
+				dragStarted = true;
+				sendInteraction({ type: 'mousedown', x: dragStartPos.x, y: dragStartPos.y, button: 'left' });
+			}
+		}, 500);
 	}
 
 	function handleTouchMove(event: TouchEvent, canvas: HTMLCanvasElement) {
-		if (!sessionId || event.touches.length === 0 || !isMouseDown || !dragStartPos) return;
+		if (!sessionId || event.touches.length === 0) return;
 		event.preventDefault();
 
+		if (touchMode === 'cursor') {
+			handleTrackpadTouchMove(event);
+			return;
+		}
+
+		// ── Scroll mode ──────────────────────────────────────────────────────────
+		if (!isMouseDown || !dragStartPos) return;
+
 		const coords = getCanvasCoordinates(event, canvas);
 		dragCurrentPos = { x: coords.x, y: coords.y };
 
-		const dragDistance = Math.sqrt(
+		const dist = Math.sqrt(
 			Math.pow(coords.x - dragStartPos.x, 2) + Math.pow(coords.y - dragStartPos.y, 2)
 		);
 
-		if (dragDistance > 15) {
-			// Send mousedown on first drag detection
-			if (!dragStarted) {
-				sendInteraction({
-					type: 'mousedown',
-					x: dragStartPos.x,
-					y: dragStartPos.y,
-					button: 'left'
-				});
-				dragStarted = true;
-			}
+		if (dist > 10 && longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
 
+		if (touchLongPressed) {
 			isDragging = true;
-			// Send mousemove to continue dragging (mouse is already down)
-			sendInteraction({
-				type: 'mousemove',
-				x: coords.x,
-				y: coords.y
-			});
+			sendInteraction({ type: 'mousemove', x: coords.x, y: coords.y });
+		} else {
+			if (lastTouchCoords) {
+				const deltaX = lastTouchCoords.x - coords.x;
+				const deltaY = lastTouchCoords.y - coords.y;
+				sendInteraction({ type: 'scroll', deltaX, deltaY });
+			}
+			lastTouchCoords = { x: coords.x, y: coords.y };
 		}
 	}
 
 	function handleTouchEnd(event: TouchEvent, canvas: HTMLCanvasElement) {
-		if (!sessionId || !isMouseDown) return;
+		if (!sessionId) return;
 		event.preventDefault();
 
-		if (dragStartPos) {
-			const endPos = dragCurrentPos || dragStartPos;
+		if (touchMode === 'cursor') {
+			handleTrackpadTouchEnd(event);
+			return;
+		}
 
-			// If drag was started (mousedown was sent), send mouseup
-			if (dragStarted) {
-				sendInteraction({
-					type: 'mouseup',
-					x: endPos.x,
-					y: endPos.y,
-					button: 'left'
-				});
-			} else {
-				// No drag occurred, this is a tap/click
+		// ── Scroll mode ──────────────────────────────────────────────────────────
+		if (!isMouseDown) return;
+
+		if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
+
+		if (touchLongPressed && dragStarted) {
+			const endPos = dragCurrentPos || dragStartPos;
+			if (endPos) sendInteraction({ type: 'mouseup', x: endPos.x, y: endPos.y, button: 'left' });
+		} else if (!isDragging && dragStartPos) {
+			const touchDuration = Date.now() - mouseDownTime;
+			const dist = dragCurrentPos
+				? Math.sqrt(
+						Math.pow(dragCurrentPos.x - dragStartPos.x, 2) +
+						Math.pow(dragCurrentPos.y - dragStartPos.y, 2)
+					)
+				: 0;
+			if (touchDuration < 300 && dist < 15) {
 				sendInteraction({ type: 'click', x: dragStartPos.x, y: dragStartPos.y });
 			}
 		}
@@ -1079,6 +1347,8 @@
 		dragStartPos = null;
 		dragCurrentPos = null;
 		dragStarted = false;
+		touchLongPressed = false;
+		lastTouchCoords = null;
 	}
 
 	function getCanvasElement() {
@@ -1128,6 +1398,10 @@
 	onDestroy(() => {
 		stopHealthCheck(); // Stop health monitoring
 		canvasSnapshots.clear(); // Free snapshot memory
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
 		if (webCodecsService) {
 			webCodecsService.destroy();
 			webCodecsService = null;

package/frontend/components/preview/browser/components/Container.svelte

@@ -44,12 +44,16 @@
 		// Preview dimensions (bindable to parent)
 		previewDimensions = $bindable<any>({ scale: 1 }),
 
+		// Touch interaction mode
+		touchMode = $bindable<'scroll' | 'cursor'>('scroll'),
+
 		// Callbacks
 		onInteraction = $bindable<(action: any) => void>(() => {}),
 		onRetry = $bindable<() => void>(() => {})
 	} = $props();
 
 	let previewContainer = $state<HTMLDivElement | undefined>();
+	let touchCursorPos = $state<{ x: number; y: number; visible: boolean; clicking?: boolean }>({ x: 0, y: 0, visible: false });
 
 	// Solid loading overlay: shown during initial load states
 	// Skip when lastFrameData exists (tab was previously loaded - snapshot handles display)
@@ -57,6 +61,11 @@
 		isLaunchingBrowser || !sessionInfo || (!isStreamReady && !isNavigating && !isReconnecting && !lastFrameData)
 	);
 
+	// Diagnostic: log whenever showSolidOverlay changes
+	$effect(() => {
+		debug.log('preview', `[DIAG] showSolidOverlay=${showSolidOverlay} (isLaunchingBrowser=${isLaunchingBrowser}, sessionInfo=${!!sessionInfo}, isStreamReady=${isStreamReady}, isNavigating=${isNavigating}, isReconnecting=${isReconnecting}, lastFrameData=${!!lastFrameData})`);
+	});
+
 	// Navigation overlay state with debounce to prevent flickering during state transitions
 	let showNavigationOverlay = $state(false);
 	let overlayHideTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -89,6 +98,10 @@
 		}
 	});
 
+	function handleTouchCursorUpdate(pos: { x: number; y: number; visible: boolean; clicking?: boolean }) {
+		touchCursorPos = { x: pos.x, y: pos.y, visible: pos.visible, clicking: pos.clicking };
+	}
+
 	onDestroy(() => {
 		if (overlayHideTimeout) {
 			clearTimeout(overlayHideTimeout);
@@ -371,10 +384,12 @@
 						bind:isStreamReady
 						bind:isNavigating
 						bind:isReconnecting
+						bind:touchMode
 						onInteraction={handleCanvasInteraction}
 						onCursorUpdate={handleCursorUpdate}
 						onFrameUpdate={handleFrameUpdate}
 						onRequestScreencastRefresh={handleScreencastRefresh}
+						onTouchCursorUpdate={handleTouchCursorUpdate}
 					/>
 				</div>
 			{/if}
@@ -427,6 +442,7 @@
 				</div>
 			{/if}
 
+
 		</div>
 	{:else}
 		<div
@@ -445,6 +461,11 @@
 		<VirtualCursor cursor={virtualCursor} />
 	{/if}
 
+	<!-- Touch Cursor - shown in cursor simulation mode -->
+	{#if touchMode === 'cursor' && touchCursorPos.visible}
+		<VirtualCursor cursor={touchCursorPos} />
+	{/if}
+
 	<!-- MCP Virtual Cursor -->
 	{#if mcpVirtualCursor.visible}
 		<VirtualCursor cursor={mcpVirtualCursor} />

package/frontend/components/preview/browser/components/Toolbar.svelte

@@ -25,7 +25,7 @@
 		// Tab state
 		tabs = $bindable<any[]>([]),
 		activeTabId = $bindable<string | null>(null),
-		mcpControlledTabId = $bindable<string | null>(null),
+		mcpControlledTabIds = $bindable<Set<string>>(new Set()),
 
 		// Callbacks
 		onGoClick = $bindable<() => void>(() => {}),
@@ -233,11 +233,11 @@
 					<span class="truncate max-w-28" title={tab.url}>
 						{tab.title || 'New Tab'}
 					</span>
-					{#if tab.id === mcpControlledTabId}
+					{#if mcpControlledTabIds.has(tab.id)}
 						<span title="MCP Controlled" class="flex"><Icon name="lucide:lock" class="w-3 h-3 flex-shrink-0 text-amber-500" /></span>
 					{/if}
 					<!-- Close button -->
-					{#if tab.id !== mcpControlledTabId}
+					{#if !mcpControlledTabIds.has(tab.id)}
 						<span
 							role="button"
 							tabindex="0"

package/frontend/components/preview/browser/core/coordinator.svelte.ts

@@ -510,6 +510,13 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 				if (backendTab.isActive && frontendId) {
 					activeTabFrontendId = frontendId;
 				}
+
+				// Restore MCP control state if this tab was being controlled
+				if (backendTab.isMcpControlled && frontendId) {
+					debug.log('preview', `🎮 Restoring MCP control state for recovered tab: ${frontendId} (session: ${backendTab.tabId})`);
+					mcpHandler.restoreControlState(frontendId, backendTab.tabId);
+				}
+
 				totalRestored++;
 			}
 
@@ -536,6 +543,11 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 
 			debug.log('preview', `✅ Session recovery complete - restored ${totalRestored} tabs`);
 
+			// Diagnostic: dump state of all restored tabs
+			for (const tab of tabManager.getAllTabs()) {
+				debug.log('preview', `[DIAG] Restored tab: id=${tab.id}, sessionId=${tab.sessionId}, url=${tab.url}, isConnected=${tab.isConnected}, isStreamReady=${tab.isStreamReady}, isLaunchingBrowser=${tab.isLaunchingBrowser}, sessionInfo=${!!tab.sessionInfo}`);
+			}
+
 			// Notify parent that sessions were recovered
 			if (onSessionsRecovered) {
 				onSessionsRecovered(totalRestored);
@@ -797,6 +809,9 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 			// Clear frontend tracking
 			browserCleanup.clearAll();
 
+			// Reset MCP control state to avoid stale tab IDs after tab recreation
+			mcpHandler.resetControlState();
+
 			// Recover sessions from new project
 			await recoverExistingSessions();
 		} catch (error) {