@myrialabs/clopen 0.2.10 → 0.2.11

package/README.md

@@ -1,26 +1,64 @@
-# Clopen
+<p align="center">
+  <img src="https://clopen.myrialabs.dev/favicon.svg" alt="Clopen" width="72" height="72" />
+</p>
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-[![Built with Bun](https://img.shields.io/badge/Built%20with-Bun-black)](https://bun.sh)
+<h1 align="center">Clopen</h1>
 
-**Clopen** provides a modern web interface for AI-assisted development, supporting both **Claude Code** and **OpenCode** as AI engines. It runs as a standalone web application — manage multiple Claude Code accounts, use built-in git source control, preview your app in a real browser, edit files, collaborate in real-time, and never lose progress with git-like checkpoints.
+<p align="center">
+  <strong>Build more. Switch less.</strong><br />
+  All-in-one workspace for Claude Code & OpenCode
+</p>
+
+<p align="center">
+  <a href="https://clopen.myrialabs.dev">Website</a> ·
+  <a href="https://github.com/myrialabs/clopen/issues">Issues</a> ·
+  <a href="https://www.npmjs.com/package/@myrialabs/clopen">npm</a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@myrialabs/clopen"><img src="https://img.shields.io/npm/v/@myrialabs/clopen" alt="npm version" /></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /></a>
+  <a href="https://github.com/myrialabs/clopen/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome" /></a>
+  <a href="https://bun.sh"><img src="https://img.shields.io/badge/Built%20with-Bun-black" alt="Built with Bun" /></a>
+</p>
+
+<p align="center">
+  <img src="https://clopen.myrialabs.dev/images/workspace-overview.webp" alt="Clopen workspace overview" />
+</p>
+
+All-in-one workspace for Claude Code & OpenCode. Chat, terminal, git, browser preview, and real-time collaboration, built for multi-project and multi-session workflows.
+
+---
+
+## Screenshots
+
+![AI chat interface](https://clopen.myrialabs.dev/images/ai-chat-interface.webp)
+
+![Multi-account manager](https://clopen.myrialabs.dev/images/multi-account-claude-code.webp)
+
+![Browser preview panel](https://clopen.myrialabs.dev/images/browser-preview-panel.webp)
+
+![Checkpoint restore](https://clopen.myrialabs.dev/images/checkpoint-restore.webp)
 
 ---
 
 ## Features
 
-- **Multi-Account Claude Code** - Manage multiple accounts (personal, work, team) and switch instantly per session, isolated under `~/.clopen/claude/user/` (or `~/.clopen-dev/` in development) without touching system-level Claude config
-- **Multi-Engine Support** - Switch between Claude Code and OpenCode
-- **AI Chat Interface** - Streaming responses with tool use visualization
-- **Background Processing** - Chat, terminal, and other processes continue running even when you close the browser — come back later and pick up where you left off
-- **Git-like Checkpoints** - Multi-branch undo/redo system with file and folder snapshots
-- **Real Browser Preview** - Puppeteer-based Chromium rendering with WebCodecs streaming (80-90% bandwidth reduction), full click/type/scroll/drag interaction
-- **Integrated Terminal** - Multi-tab terminal with full PTY control
-- **File Management** - Directory browsing, live editing, and real-time file watching
-- **Git Management** - Full source control: staging, commits, branches, push/pull, stash, log, conflict resolution
-- **Flexible Authentication** - No Login or With Login mode with admin/member roles, invite links, rate-limited login, CLI token recovery — configurable during setup and in Settings
-- **Real-time Collaboration** - Multiple users can work on the same project simultaneously
-- **Built-in Cloudflare Tunnel** - Expose local projects publicly for testing and sharing
+A complete development environment designed around AI-assisted workflows, built to disappear into the background and just work.
+
+- **Multi-Account Claude Code** — Manage multiple Claude Code accounts (personal, work, or team) and switch between them instantly per chat session
+- **Multi-Engine Support** — Switch between Claude Code and OpenCode as your AI engine, per session
+- **Integrated Terminal** — Full PTY emulation with xterm.js UI. Multi-tab terminal sessions with complete ANSI/VT sequence support and full keyboard control
+- **Full Git Management** — Stage, commit, branch, push, pull, stash, log, and resolve conflicts, all from a clean UI. Powered by native git CLI for accuracy
+- **Real Browser Preview** — A live browser preview streams directly into your workspace. Interact with your app manually, or let the AI drive: clicking, typing, and scrolling for autonomous visual testing
+- **Git-Like Checkpoints** — Multi-branch undo/redo with full file snapshots. Roll back to any point in your AI conversation without touching your actual git history
+- **Real-Time Collaboration** — WebSocket-based presence tracking per project. Multiple users can work on the same codebase simultaneously with live awareness
+- **Monaco File Editor** — VS Code's editor embedded in the browser. Full syntax highlighting, autocomplete, and live file watching, right beside your AI chat
+- **Cloudflare Tunnel** — One-click public HTTPS URL for your local dev server. Built-in QR code for instant mobile access. Share your work without deploying
+- **MCP Support** — Full Model Context Protocol integration. Connect AI tools, external APIs, and custom capabilities to your AI agents with zero friction
+- **Flexible Authentication** — No Login or With Login mode with admin/member roles, invite links, rate-limited login, and CLI token recovery
+- **Background Processing** — Chat, terminal, and other processes continue running even when you close the browser — come back later and pick up where you left off
+- **Database Management** — Browse tables, run queries, and inspect your database directly from the workspace *(coming soon)*
 
 ---
 
@@ -28,8 +66,8 @@
 
 ### Prerequisites
 
-- [Bun](https://bun.sh/) v1.2.12+
-- [Claude Code](https://github.com/anthropics/claude-code) and/or [OpenCode](https://github.com/anomalyco/opencode) — required for AI chat functionality
+- [Bun.js](https://bun.sh/) v1.2.12+
+- [Claude Code](https://github.com/anthropics/claude-code) or [OpenCode](https://opencode.ai) — required for AI functionality
 
 ### Installation
 
@@ -82,7 +120,9 @@ This regenerates and displays a new admin PAT.
 
 ---
 
-## Development
+## Contributing
+
+Clopen is open source and contributions are welcome! Whether it's a bug fix, new feature, or improvement to docs — feel free to open an issue or submit a pull request.
 
 ```bash
 git clone https://github.com/myrialabs/clopen.git
@@ -94,6 +134,8 @@ bun run check   # Type checking
 
 When running in development mode, Clopen uses `~/.clopen-dev` instead of `~/.clopen`, keeping dev data separate from any production instance.
 
+See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines and [DECISIONS.md](DECISIONS.md) for architectural decisions.
+
 ---
 
 ## Architecture
@@ -112,14 +154,6 @@ Clopen uses an engine-agnostic adapter pattern — both engines normalize output
 
 ---
 
-## Documentation
-
-- [Technical Decisions](DECISIONS.md) - Architectural and technical decision log
-- [Contributing](CONTRIBUTING.md) - How to contribute to this project
-- [Development Guidelines](CLAUDE.md) - Guidelines for working with Claude Code on this project
-
----
-
 ## Troubleshooting
 
 ### Port 9141 Already in Use

package/backend/chat/stream-manager.ts

@@ -1141,16 +1141,19 @@ class StreamManager extends EventEmitter {
 			}
 		}
 
-		// 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
-		// that crashes Bun).
+		// Cancel the per-project engine with a bounded timeout.
+		// engine.cancel() stops the SDK process (Claude Code: close() kills subprocess,
+		// OpenCode: aborts controller + HTTP abort to server). If cancel() hangs
+		// (e.g. unresponsive SDK), the timeout ensures we always proceed to emit
+		// events and update presence — preventing infinite loader on the frontend.
 		const projectId = streamState.projectId || 'default';
 		try {
 			const engine = getProjectEngine(projectId, streamState.engine);
 			if (engine.isActive) {
-				await engine.cancel();
+				await Promise.race([
+					engine.cancel(),
+					new Promise<void>(resolve => setTimeout(resolve, 5000))
+				]);
 			}
 		} catch (error) {
 			debug.error('chat', 'Error cancelling engine (non-fatal):', error);
@@ -1158,7 +1161,8 @@ class StreamManager extends EventEmitter {
 
 		// Abort the stream-manager's controller as a fallback.
 		// engine.cancel() already aborts the same controller, so this is
-		// typically a no-op but ensures cleanup if the engine wasn't active.
+		// typically a no-op but ensures cleanup if the engine timed out
+		// or wasn't active.
 		if (!streamState.abortController?.signal.aborted) {
 			streamState.abortController?.abort();
 		}

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

@@ -770,20 +770,15 @@ export class OpenCodeEngine implements AIEngine {
 	}
 
 	async cancel(): Promise<void> {
-		// Abort the OpenCode session on the server so it stops processing
-		const client = getClient();
-		if (client && this.activeSessionId) {
-			try {
-				await client.session.abort({
-					path: { id: this.activeSessionId },
-					...(this.activeProjectPath && { query: { directory: this.activeProjectPath } }),
-				});
-				debug.log('engine', 'Open Code session aborted:', this.activeSessionId);
-			} catch (error) {
-				debug.warn('engine', 'Failed to abort Open Code session:', error);
-			}
-		}
-
+		// Capture refs before clearing — needed for server-side abort below
+		const sessionId = this.activeSessionId;
+		const projectPath = this.activeProjectPath;
+
+		// 1. FIRST: Abort local stream processing immediately.
+		//    This breaks the SSE event stream and causes the for-await loop
+		//    in processStream() to throw AbortError, stopping all local processing.
+		//    Must happen BEFORE the HTTP call because client.session.abort() can
+		//    hang indefinitely if the OpenCode server is busy/unresponsive.
 		if (this.activeAbortController) {
 			this.activeAbortController.abort();
 			this.activeAbortController = null;
@@ -792,6 +787,26 @@ export class OpenCodeEngine implements AIEngine {
 		this.activeSessionId = null;
 		this.activeProjectPath = null;
 		this.pendingQuestions.clear();
+
+		// 2. THEN: Tell the OpenCode server to stop processing (with timeout).
+		//    This is a courtesy cleanup — local processing is already stopped.
+		//    The server-side session would otherwise keep running (consuming
+		//    LLM API calls and compute resources) until it naturally completes.
+		const client = getClient();
+		if (client && sessionId) {
+			try {
+				await Promise.race([
+					client.session.abort({
+						path: { id: sessionId },
+						...(projectPath && { query: { directory: projectPath } }),
+					}),
+					new Promise<void>(resolve => setTimeout(resolve, 5000))
+				]);
+				debug.log('engine', 'Open Code session aborted:', sessionId);
+			} catch (error) {
+				debug.warn('engine', 'Failed to abort Open Code session (non-fatal):', error);
+			}
+		}
 	}
 
 	/**
@@ -802,13 +817,16 @@ export class OpenCodeEngine implements AIEngine {
 		const client = getClient();
 		if (!client || !sessionId) return;
 		try {
-			await client.session.abort({
-				path: { id: sessionId },
-				...(projectPath && { query: { directory: projectPath } }),
-			});
+			await Promise.race([
+				client.session.abort({
+					path: { id: sessionId },
+					...(projectPath && { query: { directory: projectPath } }),
+				}),
+				new Promise<void>(resolve => setTimeout(resolve, 5000))
+			]);
 			debug.log('engine', 'Open Code session aborted (per-stream):', sessionId);
 		} catch (error) {
-			debug.warn('engine', 'Failed to abort Open Code session:', error);
+			debug.warn('engine', 'Failed to abort Open Code session (non-fatal):', error);
 		}
 	}
 

package/backend/index.ts

@@ -27,6 +27,9 @@ import { statSync } from 'node:fs';
 // Import WebSocket router
 import { wsRouter } from './ws';
 
+// Import browser preview manager for graceful shutdown
+import { browserPreviewServiceManager } from './preview';
+
 // MCP remote server for Open Code custom tools
 import { handleMcpRequest, closeMcpServer } from './mcp/remote-server';
 
@@ -166,6 +169,8 @@ async function gracefulShutdown() {
 	try {
 		// Close MCP remote server (before engines, as they may still reference it)
 		await closeMcpServer();
+		// Cleanup browser preview sessions
+		await browserPreviewServiceManager.cleanup();
 		// Dispose all AI engines
 		await disposeAllEngines();
 		// Stop accepting new connections

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

@@ -177,6 +177,8 @@ export async function switchTabHandler(args: { tabId: string; projectId?: string
 					isError: true
 				};
 			}
+			// Promote tab to end of session's set so getActiveTabSession() targets it next
+			browserMcpControl.promoteSessionTab(tab.id, chatSessionId);
 		}
 
 		return {

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

@@ -206,6 +206,22 @@ export class BrowserMcpControl extends EventEmitter {
 	// Control Acquisition
 	// ============================================================================
 
+	/**
+	 * Promote a tab to the end of the session's controlled set.
+	 * This ensures getSessionTabs()[last] returns the most recently activated tab,
+	 * which is used by getActiveTabSession to determine which tab MCP operates on.
+	 *
+	 * Must be called after switch_tab to reflect the new active tab.
+	 */
+	promoteSessionTab(browserTabId: string, chatSessionId: string): void {
+		const sessionSet = this.sessionTabs.get(chatSessionId);
+		if (sessionSet && sessionSet.has(browserTabId)) {
+			sessionSet.delete(browserTabId);
+			sessionSet.add(browserTabId);
+			debug.log('mcp', `🔀 Promoted tab ${browserTabId} to end of session ${chatSessionId.slice(0, 8)} set`);
+		}
+	}
+
 	/**
 	 * Acquire control of a browser tab for a chat session.
 	 *

package/backend/preview/browser/browser-navigation-tracker.ts

@@ -6,10 +6,35 @@ import { debug } from '$shared/utils/logger';
 export class BrowserNavigationTracker extends EventEmitter {
 	private cdpSessions = new Map<string, CDPSession>();
 
+	// Deduplication: track the last emitted navigation URL+timestamp per session.
+	// framenavigated and load often fire for the same navigation;
+	// this prevents emitting duplicate 'navigation' events that would cause
+	// parallel handleNavigation calls and double streaming restarts.
+	private lastNavigationEmit = new Map<string, { url: string; time: number }>();
+	private readonly DEDUP_WINDOW_MS = 500; // Ignore duplicate within 500ms
+
 	constructor() {
 		super();
 	}
 
+	/**
+	 * Emit a navigation event with deduplication.
+	 * Returns true if the event was emitted, false if it was a duplicate.
+	 */
+	private emitNavigationDeduped(event: string, sessionId: string, url: string, data: any): boolean {
+		const now = Date.now();
+		const last = this.lastNavigationEmit.get(sessionId);
+
+		if (last && last.url === url && (now - last.time) < this.DEDUP_WINDOW_MS) {
+			debug.log('preview', `⏭️ Deduped ${event} for ${url} (${now - last.time}ms since last emit)`);
+			return false;
+		}
+
+		this.lastNavigationEmit.set(sessionId, { url, time: now });
+		this.emit(event, data);
+		return true;
+	}
+
 	/**
 	 * Check if two URLs differ only by hash/fragment.
 	 * Hash-only changes are same-document navigations and should NOT trigger
@@ -134,8 +159,9 @@ export class BrowserNavigationTracker extends EventEmitter {
 				// Update session URL
 				session.url = newUrl;
 
-				// Emit navigation completed event to frontend
-				this.emit('navigation', {
+				// Emit navigation completed event (deduplicated to prevent double events
+				// from framenavigated + load firing for the same navigation)
+				this.emitNavigationDeduped('navigation', sessionId, newUrl, {
 					sessionId,
 					type: 'navigation',
 					url: newUrl,
@@ -184,7 +210,8 @@ export class BrowserNavigationTracker extends EventEmitter {
 
 				session.url = currentUrl;
 
-				this.emit('navigation', {
+				// Deduplicated: framenavigated already emitted for this URL
+				this.emitNavigationDeduped('navigation', sessionId, currentUrl, {
 					sessionId,
 					type: 'navigation',
 					url: currentUrl,
@@ -246,6 +273,7 @@ export class BrowserNavigationTracker extends EventEmitter {
 			}
 			this.cdpSessions.delete(sessionId);
 		}
+		this.lastNavigationEmit.delete(sessionId);
 	}
 
 	async navigateSession(sessionId: string, session: BrowserTab, url: string): Promise<string> {

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

@@ -869,37 +869,3 @@ class BrowserPreviewServiceManager {
 // Service manager instance (singleton)
 export const browserPreviewServiceManager = new BrowserPreviewServiceManager();
 
-// Graceful shutdown handlers
-const gracefulShutdown = async (signal: string) => {
-	try {
-		await browserPreviewServiceManager.cleanup();
-		process.exit(0);
-	} catch (error) {
-		process.exit(1);
-	}
-};
-
-// Handle various termination signals
-process.on('SIGINT', () => gracefulShutdown('SIGINT'));
-process.on('SIGTERM', () => gracefulShutdown('SIGTERM'));
-process.on('SIGHUP', () => gracefulShutdown('SIGHUP'));
-
-// Handle Windows-specific signals
-if (process.platform === 'win32') {
-	process.on('SIGBREAK', () => gracefulShutdown('SIGBREAK'));
-}
-
-// Handle uncaught exceptions and unhandled rejections
-process.on('uncaughtException', async (error) => {
-	await browserPreviewServiceManager.cleanup();
-	process.exit(1);
-});
-
-process.on('unhandledRejection', async (reason, promise) => {
-	await browserPreviewServiceManager.cleanup();
-	process.exit(1);
-});
-
-// Handle process exit
-process.on('exit', (code) => {
-});

package/backend/preview/browser/browser-video-capture.ts

@@ -42,6 +42,7 @@ interface VideoStreamSession {
 	pendingCandidates: RTCIceCandidateInit[];
 	scriptInjected: boolean; // Track if persistent script was injected
 	scriptsPreInjected: boolean; // Track if scripts were pre-injected during tab creation
+	audioOnNewDocumentInjected: boolean; // Track if evaluateOnNewDocument was registered for audio
 	stats: {
 		videoBytesSent: number;
 		audioBytesSent: number;
@@ -97,6 +98,7 @@ export class BrowserVideoCapture extends EventEmitter {
 				pendingCandidates: [],
 				scriptInjected: true,
 				scriptsPreInjected: false, // Set to true only after injection completes
+				audioOnNewDocumentInjected: false,
 				stats: {
 					videoBytesSent: 0,
 					audioBytesSent: 0,
@@ -162,7 +164,16 @@ export class BrowserVideoCapture extends EventEmitter {
 			});
 		}
 
-		// Inject video encoder + audio capture scripts
+		// Register audio capture as a startup script — runs before page scripts on every new document load.
+		// Critical for SPAs that create AudioContext during initialization (before page.evaluate runs).
+		// The idempotency guard in audioCaptureScript prevents double-injection.
+		const session = this.sessions.get(sessionId);
+		if (session && !session.audioOnNewDocumentInjected) {
+			await page.evaluateOnNewDocument(audioCaptureScript, config.audio);
+			session.audioOnNewDocumentInjected = true;
+		}
+
+		// Inject video encoder + audio capture scripts into the current page context
 		await page.evaluate(videoEncoderScript, videoConfig);
 		await page.evaluate(audioCaptureScript, config.audio);
 	}
@@ -220,6 +231,7 @@ export class BrowserVideoCapture extends EventEmitter {
 					pendingCandidates: [],
 					scriptInjected: false,
 					scriptsPreInjected: false,
+					audioOnNewDocumentInjected: false,
 					stats: {
 						videoBytesSent: 0,
 						audioBytesSent: 0,

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

@@ -16,6 +16,11 @@ import type { StreamingConfig } from '../types';
  * This script intercepts AudioContext and captures all audio
  */
 export function audioCaptureScript(config: StreamingConfig['audio']) {
+	// Idempotency guard — prevent double-injection when both evaluateOnNewDocument
+	// and page.evaluate inject this script into the same page context.
+	if ((window as any).__audioCaptureInstalled) return;
+	(window as any).__audioCaptureInstalled = true;
+
 	// Check AudioEncoder support
 	if (typeof AudioEncoder === 'undefined') {
 		(window as any).__audioEncoderSupported = false;

package/backend/preview/browser/types.ts

@@ -229,10 +229,11 @@ export interface StreamingConfig {
 /**
  * Default streaming configuration
  *
- * Optimized for visual quality with reasonable bandwidth:
+ * Optimized for visual quality with reduced resource usage:
  * - Software encoding (hardwareAcceleration: 'no-preference')
- * - JPEG quality 70 preserves thin borders/text, VP8 handles bandwidth
- * - VP8 at 1.2Mbps for crisp UI/text rendering
+ * - JPEG quality 65: slightly lower than before but still preserves thin borders/text
+ * - VP8 at 1.0Mbps: ~17% reduction from 1.2Mbps, sharp edges preserved by VP8 codec
+ * - keyframeInterval 5s: less frequent large keyframes, saves bandwidth on static pages
  * - Opus for audio (efficient and widely supported)
  */
 export const DEFAULT_STREAMING_CONFIG: StreamingConfig = {
@@ -241,9 +242,9 @@ export const DEFAULT_STREAMING_CONFIG: StreamingConfig = {
 		width: 0,
 		height: 0,
 		framerate: 24,
-		bitrate: 1_200_000,
-		keyframeInterval: 3,
-		screenshotQuality: 70,
+		bitrate: 1_000_000,
+		keyframeInterval: 5,
+		screenshotQuality: 65,
 		hardwareAcceleration: 'no-preference',
 		latencyMode: 'realtime'
 	},

package/backend/ws/preview/browser/interact.ts

@@ -12,6 +12,9 @@ import type { KeyInput } from 'puppeteer';
 import { debug } from '$shared/utils/logger';
 import { sleep } from '$shared/utils/async';
 
+// Throttle cursor detection evaluate calls per session (100ms = ~10/sec is plenty)
+const lastCursorEvalTime = new Map<string, number>();
+
 // Helper function to check if error is navigation-related
 function isNavigationError(error: Error): boolean {
 	const msg = error.message.toLowerCase();
@@ -108,8 +111,9 @@ export const interactPreviewHandler = createRouter()
 				switch (action.type) {
 					case 'mousedown':
 						try {
-							// Reset mouse state first to ensure clean state
-							try { await session.page.mouse.up(); } catch { }
+							// Fire-and-forget reset — CDP processes commands in FIFO order so
+							// this completes before move/down even though we skip the await.
+							session.page.mouse.up().catch(() => {});
 							// Move to position and press button
 							await session.page.mouse.move(action.x!, action.y!, { steps: 1 });
 							await session.page.mouse.down({ button: action.button === 'right' ? 'right' : 'left' });
@@ -140,14 +144,10 @@ export const interactPreviewHandler = createRouter()
 
 					case 'click':
 						try {
-							// Reset mouse state before click to prevent "already pressed" errors
-							// This ensures a clean state for each click operation
-							try {
-								await session.page.mouse.up();
-							} catch { /* Ignore - mouse might not be pressed */ }
-
-							// IMPORTANT: Check for select element BEFORE clicking
-							// If it's a select, we'll emit event to frontend instead of clicking
+							// Check for select element BEFORE clicking.
+							// Skip the mouse.up() reset: page.mouse.click() is atomic (down+up),
+							// and Canvas.svelte always sends mouseup before sending click, so the
+							// mouse state is already clean at this point.
 							const selectInfo = await previewService.checkForSelectElement(session.id, action.x!, action.y!);
 							if (selectInfo) {
 								// Select element detected - event emitted by checkForSelectElement
@@ -243,37 +243,40 @@ export const interactPreviewHandler = createRouter()
 							await session.page.mouse.move(action.x!, action.y!, {
 								steps: action.steps || 1 // Reduced from 5 to 1 for faster response
 							});
-							// Update cursor position and detect cursor type in browser context (fire-and-forget, don't await)
-							// This replaces the disabled cursor-tracking script (blocked by CloudFlare)
-							session.page.evaluate((data) => {
-								const { x, y } = data;
-								// Detect cursor type from element under mouse
-								let cursor = 'default';
-								try {
-									const el = document.elementFromPoint(x, y);
-									if (el) {
-										cursor = window.getComputedStyle(el).cursor || 'default';
+							// Cursor detection via page.evaluate — throttled to ~10/sec per session.
+							// Running it on every mousemove queues extra CDP commands that delay clicks/keypresses.
+							const nowMs = Date.now();
+							const lastEval = lastCursorEvalTime.get(session.id) ?? 0;
+							if (nowMs - lastEval >= 100) {
+								lastCursorEvalTime.set(session.id, nowMs);
+								session.page.evaluate((data) => {
+									const { x, y } = data;
+									let cursor = 'default';
+									try {
+										const el = document.elementFromPoint(x, y);
+										if (el) {
+											cursor = window.getComputedStyle(el).cursor || 'default';
+										}
+									} catch {}
+
+									const existing = (window as any).__cursorInfo;
+									if (existing) {
+										existing.cursor = cursor;
+										existing.x = x;
+										existing.y = y;
+										existing.timestamp = Date.now();
+										existing.hasRecentInteraction = true;
+									} else {
+										(window as any).__cursorInfo = {
+											cursor,
+											x,
+											y,
+											timestamp: Date.now(),
+											hasRecentInteraction: true
+										};
 									}
-								} catch {}
-
-								// Initialize or update __cursorInfo
-								const existing = (window as any).__cursorInfo;
-								if (existing) {
-									existing.cursor = cursor;
-									existing.x = x;
-									existing.y = y;
-									existing.timestamp = Date.now();
-									existing.hasRecentInteraction = true;
-								} else {
-									(window as any).__cursorInfo = {
-										cursor,
-										x,
-										y,
-										timestamp: Date.now(),
-										hasRecentInteraction: true
-									};
-								}
-							}, { x: action.x!, y: action.y! }).catch(() => { /* Ignore evaluation errors */ });
+								}, { x: action.x!, y: action.y! }).catch(() => { /* Ignore evaluation errors */ });
+							}
 						} catch (error) {
 							if (error instanceof Error && isNavigationError(error)) {
 								ws.emit.user(userId, 'preview:browser-interacted', { action: action.type, message: 'Action deferred (navigation)', deferred: true });
@@ -297,8 +300,6 @@ export const interactPreviewHandler = createRouter()
 
 					case 'doubleclick':
 						try {
-							// Reset mouse state first
-							try { await session.page.mouse.up(); } catch { }
 							await session.page.mouse.click(action.x!, action.y!, { clickCount: 2 });
 						} catch (error) {
 							if (error instanceof Error) {
@@ -314,8 +315,8 @@ export const interactPreviewHandler = createRouter()
 
 					case 'rightclick':
 						try {
-							// Reset mouse state first
-							try { await session.page.mouse.up(); } catch { }
+							// Fire-and-forget reset (see mousedown comment for rationale)
+							session.page.mouse.up().catch(() => {});
 
 							// IMPORTANT: Check for context menu
 							// We'll emit context menu event to frontend for custom overlay
@@ -385,12 +386,7 @@ export const interactPreviewHandler = createRouter()
 								await session.page.keyboard.press(action.key as KeyInput);
 							}
 
-							if (['ArrowDown', 'ArrowUp'].includes(action.key)) {
-								try {
-									await sleep(50);
-								} catch { }
-							}
-						}
+					}
 						break;
 
 					case 'checkselectoptions':