@myrialabs/clopen 0.2.5 → 0.2.7

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

@@ -44,18 +44,28 @@
 		// 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)
 	const showSolidOverlay = $derived(
-		isLaunchingBrowser || !sessionInfo || (!isStreamReady && !isNavigating && !isReconnecting)
+		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;
@@ -88,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);
@@ -370,10 +384,12 @@
 						bind:isStreamReady
 						bind:isNavigating
 						bind:isReconnecting
+						bind:touchMode
 						onInteraction={handleCanvasInteraction}
 						onCursorUpdate={handleCursorUpdate}
 						onFrameUpdate={handleFrameUpdate}
 						onRequestScreencastRefresh={handleScreencastRefresh}
+						onTouchCursorUpdate={handleTouchCursorUpdate}
 					/>
 				</div>
 			{/if}
@@ -426,6 +442,7 @@
 				</div>
 			{/if}
 
+
 		</div>
 	{:else}
 		<div
@@ -444,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

@@ -222,7 +222,7 @@
 				{@const isActive = tab.id === activeTabId}
 				<button
 					type="button"
-					class="group relative flex items-center justify-center gap-1 px-2 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
+					class="group relative flex items-center justify-center gap-1 pr-2 pl-3 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
 						{isActive
 							? 'text-violet-600 dark:text-violet-400'
 							: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
@@ -230,13 +230,6 @@
 					role="tab"
 					tabindex="0"
 				>
-					{#if tab.id === mcpControlledTabId}
-						<Icon name="lucide:bot" class="w-3 h-3 flex-shrink-0 text-amber-500" />
-					{:else if tab.isLoading}
-						<Icon name="lucide:loader-circle" class="w-3 h-3 animate-spin flex-shrink-0" />
-					{:else}
-						<Icon name="lucide:globe" class="w-3 h-3 flex-shrink-0" />
-					{/if}
 					<span class="truncate max-w-28" title={tab.url}>
 						{tab.title || 'New Tab'}
 					</span>

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

@@ -486,7 +486,10 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 
 			if (!existingTabs || existingTabs.count === 0) {
 				debug.log('preview', '📭 No existing sessions to recover');
-				isRestoring = false;
+				// Notify parent about 0-tab recovery (enables empty tab creation)
+				if (onSessionsRecovered) {
+					onSessionsRecovered(0);
+				}
 				return;
 			}
 
@@ -507,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++;
 			}
 
@@ -533,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);
@@ -781,7 +796,7 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 		const newProjectId = getProjectId();
 		debug.log('preview', `🔄 Switching to project: ${newProjectId}`);
 
-		// Set restore lock during project switch
+		// Set restore lock during entire project switch (prevents race conditions)
 		isRestoring = true;
 
 		try {
@@ -794,14 +809,22 @@ 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
-			// Note: recoverExistingSessions will handle its own lock
-			isRestoring = false;
 			await recoverExistingSessions();
 		} catch (error) {
 			debug.error('preview', '❌ Error switching project:', error);
+		} finally {
 			isRestoring = false;
 		}
+
+		// After recovery and lock release, create empty tab if no tabs exist
+		if (tabManager.getAllTabs().length === 0) {
+			debug.log('preview', '📭 No tabs after project switch, creating empty tab');
+			createNewTab('');
+		}
 	}
 
 	return {

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

@@ -145,8 +145,8 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	}
 
 	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 MCP is controlling AND user is currently viewing that tab
+		if (mcpControlState.isControlled && mcpControlState.browserSessionId === data.sessionId && isCurrentTabMcpControlled() && transformBrowserToDisplayCoordinates) {
 			const transformedPosition = transformBrowserToDisplayCoordinates(data.x, data.y);
 			if (transformedPosition && onCursorUpdate) {
 				onCursorUpdate(transformedPosition.x, transformedPosition.y, false);
@@ -155,7 +155,8 @@ 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 MCP is controlling AND user is currently viewing that tab
+		if (mcpControlState.isControlled && mcpControlState.browserSessionId === data.sessionId && isCurrentTabMcpControlled() && transformBrowserToDisplayCoordinates) {
 			const transformedPosition = transformBrowserToDisplayCoordinates(data.x, data.y);
 			if (transformedPosition && onCursorUpdate) {
 				onCursorUpdate(transformedPosition.x, transformedPosition.y, true);
@@ -163,6 +164,36 @@ 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})`);
+		mcpControlState = {
+			isControlled: true,
+			controlledTabId: frontendTabId,
+			browserSessionId: browserSessionId,
+			startedAt: Date.now()
+		};
+	}
+
+	/**
+	 * Reset MCP control state (called before project switch recovery)
+	 */
+	function resetControlState(): void {
+		debug.log('preview', `🔄 Resetting MCP control state`);
+		mcpControlState = {
+			isControlled: false,
+			controlledTabId: null,
+			browserSessionId: null,
+			startedAt: null
+		};
+		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.
@@ -297,6 +328,8 @@ export function createMcpHandler(config: McpHandlerConfig) {
 		setupEventListeners,
 		isCurrentTabMcpControlled,
 		getControlState,
+		restoreControlState,
+		resetControlState,
 		get mcpControlState() { return mcpControlState; }
 	};
 }

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/terminal/TerminalTabs.svelte

@@ -37,7 +37,7 @@
 		{@const isActive = session.isActive}
 		<button
 			type="button"
-			class="group relative flex items-center justify-center gap-1 px-2 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
+			class="group relative flex items-center justify-center gap-1 pr-2 pl-3 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
 				{isActive
 					? 'text-violet-600 dark:text-violet-400'
 					: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
@@ -45,7 +45,6 @@
 			role="tab"
 			tabindex="0"
 		>
-			<Icon name="lucide:terminal" class="w-3 h-3 flex-shrink-0" />
 			<span class="truncate max-w-28">{session.name}</span>
 			<!-- Close button -->
 			<span

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/FilesPanel.svelte

@@ -1344,6 +1344,7 @@
 							externallyChanged={displayExternallyChanged}
 							onForceReload={forceReloadTab}
 							isBinary={displayIsBinary}
+						projectPath={projectPath}
 						/>
 					</div>
 				</div>

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

@@ -196,7 +196,12 @@ class ChatService {
       this.streamCompleted = true;
       this.reconnected = false;
       this.activeProcessId = null;
-      this.setProcessState({ isLoading: false, isWaitingInput: false, isCancelling: false });
+      // Don't clear isCancelling here — it causes a race with presence.
+      // The chat:cancelled WS event arrives before broadcastPresence() updates,
+      // so clearing isCancelling lets the presence $effect re-enable isLoading
+      // (because hasActiveForSession is still true). The presence $effect will
+      // clear isCancelling once the stream is actually gone from presence.
+      this.setProcessState({ isLoading: false, isWaitingInput: false });
 
       // Mark any tool_use blocks that never got a tool_result
       this.markInterruptedTools();
@@ -480,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.
   }
 
   /**