@myrialabs/clopen 0.2.6 → 0.2.7

package/backend/chat/stream-manager.ts

@@ -1132,7 +1132,7 @@ class StreamManager extends EventEmitter {
 			}
 		}
 
-		// Cancel the per-project engine FIRST — this sends an interrupt to the
+		// Cancel the per-project engine — this sends an interrupt to the
 		// still-alive SDK subprocess, then aborts the controller. If we abort
 		// the controller first, the subprocess dies and the SDK's subsequent
 		// interrupt write fails with "Operation aborted" (unhandled rejection

package/backend/engine/adapters/claude/stream.ts

@@ -180,38 +180,29 @@ export class ClaudeCodeEngine implements AIEngine {
    * Cancel active query
    */
   async cancel(): Promise<void> {
-    // Resolve all pending AskUserQuestion promises BEFORE aborting.
-    // This lets the SDK process the denial responses while the subprocess
-    // is still alive, preventing "Operation aborted" write errors.
+    // Resolve all pending AskUserQuestion promises before terminating.
     for (const [, pending] of this.pendingUserAnswers) {
       pending.resolve({ behavior: 'deny', message: 'Cancelled' });
     }
     this.pendingUserAnswers.clear();
 
-    // Only interrupt if the controller hasn't been aborted yet.
-    // Interrupting after abort causes the SDK to write to a dead subprocess,
-    // resulting in "Operation aborted" unhandled rejections that crash Bun.
-    if (this.activeQuery && typeof this.activeQuery.interrupt === 'function'
-        && this.activeController && !this.activeController.signal.aborted) {
+    // Use close() to forcefully terminate the query process and clean up
+    // all resources (docs: "Forcefully ends the query and cleans up all
+    // resources"). Unlike interrupt() which can hang indefinitely when the
+    // subprocess is unresponsive, close() is synchronous and guaranteed to
+    // complete — making cancel deterministic.
+    if (this.activeQuery && typeof this.activeQuery.close === 'function') {
       try {
-        await this.activeQuery.interrupt();
+        this.activeQuery.close();
       } catch {
-        // Ignore interrupt errors
+        // Ignore close errors — process may already be dead
       }
     }
 
-    // Brief delay between interrupt and abort to let the SDK flush pending
-    // write operations (e.g., handleControlRequest responses). Without this,
-    // aborting immediately after interrupt kills the subprocess while the SDK
-    // still has in-flight writes, causing "Operation aborted" rejections.
     if (this.activeController && !this.activeController.signal.aborted) {
-      await new Promise(resolve => setTimeout(resolve, 100));
-    }
-
-    if (this.activeController) {
       this.activeController.abort();
-      this.activeController = null;
     }
+    this.activeController = null;
     this.activeQuery = null;
   }
 

package/backend/mcp/servers/browser-automation/browser.ts

@@ -89,10 +89,26 @@ interface CloseTabResponse {
  * Internal helper: Get active tab
  * Throws error if no active tab found
  * Automatically acquires MCP control for the active tab to ensure UI sync
+ *
+ * If MCP is already controlling a specific tab, that tab is returned regardless
+ * of which tab the user has currently active in the frontend. This prevents MCP
+ * from "following" the user when they switch tabs mid-session.
  */
 export async function getActiveTabSession(projectId?: string) {
-	// Get active tab directly from backend tab manager
 	const previewService = getPreviewService(projectId);
+
+	// If MCP is already controlling a specific tab, stick to that tab.
+	// This prevents user tab-switching from hijacking the MCP session.
+	const controlState = browserMcpControl.getControlState();
+	if (controlState.isControlling && controlState.browserTabId) {
+		const controlledTab = previewService.getTab(controlState.browserTabId);
+		if (controlledTab) {
+			debug.log('mcp', `🎮 Using MCP-controlled tab: ${controlledTab.id} (ignoring active tab)`);
+			return { tab: controlledTab, session: controlledTab };
+		}
+	}
+
+	// No controlled tab — use the active tab and acquire control
 	const tab = previewService.getActiveTab();
 
 	if (!tab) {
@@ -101,8 +117,9 @@ export async function getActiveTabSession(projectId?: string) {
 
 	// Acquire control for active tab (ensures UI sync after idle timeout)
 	// This is idempotent - if already controlling this tab, just updates timestamp
-	if (!browserMcpControl.isTabControlled(tab.id)) {
-		const acquired = browserMcpControl.acquireControl(tab.id);
+	const resolvedProjectId = previewService.getProjectId();
+	if (!browserMcpControl.isTabControlled(tab.id, resolvedProjectId)) {
+		const acquired = browserMcpControl.acquireControl(tab.id, undefined, resolvedProjectId);
 		if (acquired) {
 			debug.log('mcp', `🔄 Auto-acquired control for tab ${tab.id} (resumed after idle)`);
 		}
@@ -189,7 +206,7 @@ export async function switchTabHandler(args: { tabId: string; projectId?: string
 		// Update MCP control to the new tab
 		if (tab) {
 			browserMcpControl.releaseControl();
-			browserMcpControl.acquireControl(tab.id);
+			browserMcpControl.acquireControl(tab.id, undefined, previewService.getProjectId());
 		}
 
 		// Update last action to keep control alive
@@ -244,7 +261,7 @@ export async function openNewTabHandler(args: { url?: string; deviceSize?: 'desk
 
 		// Auto-acquire control of the new tab
 		browserMcpControl.releaseControl();
-		browserMcpControl.acquireControl(tab.id);
+		browserMcpControl.acquireControl(tab.id, undefined, previewService.getProjectId());
 
 		// Update last action to keep control alive
 		browserMcpControl.updateLastAction();
@@ -296,7 +313,7 @@ export async function closeTabHandler(args: { tabId: string; projectId?: string
 		if (result.newActiveTabId) {
 			const newActiveTab = previewService.getTab(result.newActiveTabId);
 			if (newActiveTab) {
-				browserMcpControl.acquireControl(newActiveTab.id);
+				browserMcpControl.acquireControl(newActiveTab.id, undefined, previewService.getProjectId());
 			}
 		}
 

package/backend/preview/browser/browser-mcp-control.ts

@@ -28,6 +28,7 @@ export interface McpControlState {
 	isControlling: boolean;
 	mcpSessionId: string | null;
 	browserTabId: string | null;
+	projectId: string | null;
 	startedAt: number | null;
 	lastActionAt: number | null;
 }
@@ -60,6 +61,7 @@ export class BrowserMcpControl extends EventEmitter {
 		isControlling: false,
 		mcpSessionId: null,
 		browserTabId: null,
+		projectId: null,
 		startedAt: null,
 		lastActionAt: null
 	};
@@ -96,13 +98,16 @@ export class BrowserMcpControl extends EventEmitter {
 
 	/**
 	 * Handle tab destroyed event
-	 * Auto-release control if the destroyed tab was being controlled
+	 * Auto-release control if the destroyed tab was being controlled.
+	 * Uses the service's projectId to avoid cross-project false-positives.
 	 */
 	private handleTabDestroyed(tabId: string): void {
-		if (this.controlState.isControlling && this.controlState.browserTabId === tabId) {
-			debug.warn('mcp', `⚠️ Controlled tab ${tabId} was destroyed - auto-releasing control`);
-			this.releaseControl();
-		}
+		if (!this.controlState.isControlling || this.controlState.browserTabId !== tabId) return;
+		// Validate project to prevent cross-project collisions (tab IDs are not globally unique)
+		const serviceProjectId = this.previewService?.getProjectId();
+		if (serviceProjectId && this.controlState.projectId && this.controlState.projectId !== serviceProjectId) return;
+		debug.warn('mcp', `⚠️ Controlled tab ${tabId} was destroyed - auto-releasing control`);
+		this.releaseControl();
 	}
 
 	/**
@@ -167,18 +172,25 @@ export class BrowserMcpControl extends EventEmitter {
 	}
 
 	/**
-	 * Check if a specific browser tab is being controlled
+	 * Check if a specific browser tab is being controlled.
+	 * When projectId is provided, also validates the project to prevent cross-project
+	 * false-positives (tab IDs are only unique per project, not globally).
 	 */
-	isTabControlled(browserTabId: string): boolean {
-		return this.controlState.isControlling &&
-			   this.controlState.browserTabId === browserTabId;
+	isTabControlled(browserTabId: string, projectId?: string): boolean {
+		if (!this.controlState.isControlling || this.controlState.browserTabId !== browserTabId) {
+			return false;
+		}
+		if (projectId && this.controlState.projectId && this.controlState.projectId !== projectId) {
+			return false;
+		}
+		return true;
 	}
 
 	/**
 	 * Acquire control of a browser tab
 	 * Returns true if control was acquired, false if already controlled by another MCP
 	 */
-	acquireControl(browserTabId: string, mcpSessionId?: string): boolean {
+	acquireControl(browserTabId: string, mcpSessionId?: string, projectId?: string): boolean {
 		// Validate tab exists before acquiring control
 		if (this.previewService && !this.previewService.getTab(browserTabId)) {
 			debug.warn('mcp', `❌ Cannot acquire control: tab ${browserTabId} does not exist`);
@@ -204,6 +216,7 @@ export class BrowserMcpControl extends EventEmitter {
 			isControlling: true,
 			mcpSessionId: mcpSessionId || null,
 			browserTabId,
+			projectId: projectId || null,
 			startedAt: now,
 			lastActionAt: now
 		};
@@ -238,6 +251,7 @@ export class BrowserMcpControl extends EventEmitter {
 			isControlling: false,
 			mcpSessionId: null,
 			browserTabId: null,
+			projectId: null,
 			startedAt: null,
 			lastActionAt: null
 		};
@@ -380,13 +394,14 @@ export class BrowserMcpControl extends EventEmitter {
 	}
 
 	/**
-	 * Auto-release control for a specific browser tab (called when tab closes)
+	 * Auto-release control for a specific browser tab (called when tab closes).
+	 * projectId is used to prevent accidental release across projects with same tab IDs.
 	 */
-	autoReleaseForTab(browserTabId: string): void {
-		if (this.controlState.isControlling && this.controlState.browserTabId === browserTabId) {
-			debug.log('mcp', `🗑️ Auto-releasing MCP control for closed tab: ${browserTabId}`);
-			this.releaseControl(browserTabId);
-		}
+	autoReleaseForTab(browserTabId: string, projectId?: string): void {
+		if (!this.controlState.isControlling || this.controlState.browserTabId !== browserTabId) return;
+		if (projectId && this.controlState.projectId && this.controlState.projectId !== projectId) return;
+		debug.log('mcp', `🗑️ Auto-releasing MCP control for closed tab: ${browserTabId}`);
+		this.releaseControl(browserTabId);
 	}
 
 	/**
@@ -403,6 +418,7 @@ export class BrowserMcpControl extends EventEmitter {
 			isControlling: false,
 			mcpSessionId: null,
 			browserTabId: null,
+			projectId: null,
 			startedAt: null,
 			lastActionAt: null
 		};

package/backend/preview/browser/browser-pool.ts

@@ -49,7 +49,9 @@ const DEFAULT_CONFIG: PoolConfig = {
 const CHROMIUM_ARGS = [
 	'--no-sandbox',
 	'--disable-blink-features=AutomationControlled',
-	'--window-size=1366,768'
+	'--window-size=1366,768',
+	'--autoplay-policy=no-user-gesture-required',
+	'--disable-features=AudioServiceOutOfProcess'
 ];
 
 class BrowserPool {

package/backend/preview/browser/browser-tab-manager.ts

@@ -273,7 +273,7 @@ export class BrowserTabManager extends EventEmitter {
 		const wasActive = tab.isActive;
 
 		// Auto-release MCP control if this tab is being controlled
-		browserMcpControl.autoReleaseForTab(tabId);
+		browserMcpControl.autoReleaseForTab(tabId, this.projectId);
 
 		// IMMEDIATELY set destroyed flag and stop streaming
 		tab.isDestroyed = true;

package/backend/preview/browser/scripts/audio-stream.ts

@@ -148,6 +148,12 @@ export function audioCaptureScript(config: StreamingConfig['audio']) {
 		if (interceptedContexts.has(ctx)) return;
 		interceptedContexts.add(ctx);
 
+		// Resume AudioContext immediately — in headless Chrome without a user gesture,
+		// AudioContext starts in 'suspended' state and onaudioprocess never fires.
+		if (ctx.state === 'suspended') {
+			ctx.resume().catch(() => {});
+		}
+
 		// Store original destination
 		const originalDestination = ctx.destination;
 
@@ -213,6 +219,11 @@ export function audioCaptureScript(config: StreamingConfig['audio']) {
 			const OriginalAudioContext = (window as any).__OriginalAudioContext || window.AudioContext;
 			const ctx = new OriginalAudioContext();
 
+			// Resume context immediately — headless Chrome requires explicit resume
+			if (ctx.state === 'suspended') {
+				ctx.resume().catch(() => {});
+			}
+
 			// Create media element source
 			const source = ctx.createMediaElementSource(element);
 

package/backend/ws/chat/stream.ts

@@ -470,7 +470,7 @@ export const streamHandler = createRouter()
 				return;
 			}
 
-			const cancelled = await streamManager.cancelStream(streamState.streamId);
+			await streamManager.cancelStream(streamState.streamId);
 			// Always send cancelled to chat session room to clear UI
 			ws.emit.chatSession(chatSessionId, 'chat:cancelled', {
 				status: 'cancelled',

package/backend/ws/preview/browser/tab-info.ts

@@ -7,6 +7,7 @@
 import { t } from 'elysia';
 import { createRouter } from '$shared/utils/ws-server';
 import { browserPreviewServiceManager } from '../../../preview/index';
+import { browserMcpControl } from '../../../preview/browser/browser-mcp-control';
 import { ws } from '$backend/utils/ws';
 import { debug } from '$shared/utils/logger';
 
@@ -62,7 +63,8 @@ export const tabInfoPreviewHandler = createRouter()
 				isStreaming: t.Boolean(),
 				deviceSize: t.String(),
 				rotation: t.String(),
-				isActive: t.Boolean()
+				isActive: t.Boolean(),
+				isMcpControlled: t.Boolean()
 			})),
 			activeTabId: t.Union([t.String(), t.Null()]),
 			count: t.Number()
@@ -87,7 +89,8 @@ export const tabInfoPreviewHandler = createRouter()
 				isStreaming: tab.isStreaming,
 				deviceSize: tab.deviceSize,
 				rotation: tab.rotation,
-				isActive: tab.isActive
+				isActive: tab.isActive,
+				isMcpControlled: browserMcpControl.isTabControlled(tab.id, projectId)
 			})),
 			activeTabId: activeTab?.id || null,
 			count: allTabsInfo.length

package/frontend/components/chat/input/ChatInput.svelte

@@ -66,9 +66,6 @@
 
 	// Chat actions params
 	const chatActionsParams = {
-		get messageText() {
-			return messageText;
-		},
 		get attachedFiles() {
 			return fileHandling.attachedFiles;
 		},

package/frontend/components/chat/input/composables/use-chat-actions.svelte.ts

@@ -10,7 +10,6 @@ import { debug } from '$shared/utils/logger';
 import type { FileAttachment } from './use-file-handling.svelte';
 
 interface ChatActionsParams {
-	messageText: string;
 	attachedFiles: FileAttachment[];
 	clearAllAttachments: () => void;
 	adjustTextareaHeight: () => void;
@@ -27,7 +26,6 @@ export function useChatActions(params: ChatActionsParams) {
 	function handleCancelEdit() {
 		cancelEdit();
 		clearInput();
-		params.messageText = ''; // This won't work directly, need to pass setter
 		params.clearAllAttachments();
 		params.adjustTextareaHeight();
 	}
@@ -52,6 +50,12 @@ export function useChatActions(params: ChatActionsParams) {
 					await snapshotService.restore(restoreTargetId, sessionState.currentSession.id);
 				}
 
+				// Set skip and clear draft BEFORE reloading messages — editing the first message
+				// causes messages to become empty (welcome state), which remounts ChatInput.
+				// Without this, the new instance restores stale server state into the input.
+				setSkipNextRestore(true);
+				params.clearDraft();
+
 				// Reload messages from database to update UI
 				if (sessionState.currentSession?.id) {
 					await loadMessagesForSession(sessionState.currentSession.id);

package/frontend/components/history/HistoryModal.svelte

@@ -428,7 +428,7 @@
 									<span
 										class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 {isSessionWaitingInput(session.id, projectState.currentProject?.id) ? 'bg-amber-500' : 'bg-emerald-500'}"
 									></span>
-								{:else if isSessionUnread(session.id)}
+								{:else if isSessionUnread(session.id) && session.id !== sessionState.currentSession?.id}
 									<span
 										class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 bg-blue-500"
 									></span>

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

@@ -61,6 +61,9 @@
 	// Flag to prevent URL watcher from double-launching during MCP session creation
 	const mcpLaunchInProgress = $state(false);
 
+	// Touch interaction mode for canvas
+	let touchMode = $state<'scroll' | 'cursor'>('scroll');
+
 	// Flag to track if sessions were recovered (prevents creating empty tab on mount)
 	let sessionsRecovered = $state(false);
 
@@ -417,6 +420,14 @@
 		return mcpHandler.isCurrentTabMcpControlled();
 	}
 
+	// Hide MCP virtual cursor when switching to a non-MCP-controlled tab
+	$effect(() => {
+		void activeTabId; // track activeTabId changes
+		if (!isCurrentTabMcpControlled()) {
+			mcpVirtualCursor = { x: 0, y: 0, visible: false, clicking: false };
+		}
+	});
+
 	// Stream message handling
 	$effect(() => {
 		if (activeTabId && sessionId) {
@@ -426,6 +437,8 @@
 
 	// Expose methods for parent (PreviewPanel)
 	export const browserActions = {
+		getTouchMode: () => touchMode,
+		setTouchMode: (mode: 'scroll' | 'cursor') => { touchMode = mode; },
 		changeDeviceSize: (size: DeviceSize) => {
 			coordinator.changeDeviceSize(size, previewDimensions?.scale);
 		},
@@ -494,6 +507,7 @@
 				bind:canvasAPI
 				bind:previewDimensions
 				bind:lastFrameData={currentTabLastFrameData}
+				bind:touchMode
 				isMcpControlled={isCurrentTabMcpControlled()}
 				onInteraction={handleCanvasInteraction}
 				onRetry={handleGoClick}