@myrialabs/clopen 0.2.9 → 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';
 
@@ -156,11 +159,18 @@ startServer().catch((error) => {
 });
 
 // Graceful shutdown - properly close server and database
+let isShuttingDown = false;
+
 async function gracefulShutdown() {
+	if (isShuttingDown) return;
+	isShuttingDown = true;
+
 	console.log('\n🛑 Shutting down server...');
 	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
@@ -177,6 +187,13 @@ async function gracefulShutdown() {
 process.on('SIGINT', gracefulShutdown);
 process.on('SIGTERM', gracefulShutdown);
 
+// Ignore SIGHUP — sent when the controlling terminal closes or an SSH session
+// disconnects. Without a handler Bun exits immediately; we want the server to
+// keep running (e.g. started in a background tab or remote shell).
+process.on('SIGHUP', () => {
+	debug.log('server', 'Received SIGHUP — ignoring (server stays running)');
+});
+
 // Safety net: prevent server crash from unhandled errors.
 // These can occur when AI engine SDKs emit asynchronous errors that bypass
 // the normal try/catch flow (e.g., subprocess killed during initialization).

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

@@ -1,22 +1,99 @@
 import { EventEmitter } from 'events';
-import type { Page, HTTPRequest, Frame } from 'puppeteer';
+import type { Page, HTTPRequest, Frame, CDPSession } from 'puppeteer';
 import type { BrowserTab } from './types';
+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
+	 * full page reload or streaming restart.
+	 */
+	private isHashOnlyChange(oldUrl: string, newUrl: string): boolean {
+		try {
+			const oldParsed = new URL(oldUrl);
+			const newParsed = new URL(newUrl);
+			// Compare URLs without hash — if identical, it's a hash-only change
+			oldParsed.hash = '';
+			newParsed.hash = '';
+			return oldParsed.href === newParsed.href;
+		} catch {
+			return false;
+		}
+	}
+
+	/**
+	 * Check if two URLs share the same origin (protocol + host + port).
+	 * Same-origin navigations are likely SPA internal navigations and should
+	 * NOT show a progress bar — the streaming restart happens silently while
+	 * the last rendered frame stays visible.
+	 */
+	private isSameOrigin(oldUrl: string, newUrl: string): boolean {
+		try {
+			return new URL(oldUrl).origin === new URL(newUrl).origin;
+		} catch {
+			return false;
+		}
+	}
+
 	async setupNavigationTracking(sessionId: string, page: Page, session: BrowserTab) {
 
-		// Track navigation start (loading begins)
+		// Track navigation start (loading begins) — only for cross-origin document navigations
 		page.on('request', (request: HTTPRequest) => {
 			// Only track main frame document requests (not resources like images, CSS, etc.)
 			// Puppeteer uses resourceType() instead of isNavigationRequest()
 			if (request.resourceType() === 'document' && request.frame() === page.mainFrame()) {
 				const targetUrl = request.url();
 
-				// Emit navigation loading event to frontend
+				// Skip hash-only changes — they are same-document navigations
+				// that don't need loading states or streaming restart
+				if (this.isHashOnlyChange(session.url, targetUrl)) {
+					debug.log('preview', `⏭️ Skipping navigation-loading for hash-only change: ${session.url} → ${targetUrl}`);
+					return;
+				}
+
+				// Skip same-origin navigations — they are likely SPA internal navigations.
+				// No progress bar is shown; the last rendered frame stays visible while
+				// streaming restarts silently in the background. This makes SPA navigation
+				// feel instant, similar to how a real browser shows the old page until
+				// the new one is ready.
+				if (this.isSameOrigin(session.url, targetUrl)) {
+					debug.log('preview', `⏭️ Skipping navigation-loading for same-origin navigation: ${session.url} → ${targetUrl}`);
+					return;
+				}
+
+				// Emit navigation loading event to frontend (cross-origin navigations only)
 				this.emit('navigation-loading', {
 					sessionId,
 					type: 'navigation-loading',
@@ -26,17 +103,65 @@ export class BrowserNavigationTracker extends EventEmitter {
 			}
 		});
 
-		// Track all navigation events - including redirects, link clicks, and hash changes
-		page.on('framenavigated', (frame: Frame) => {
+		// Track full page navigations (actual page loads, not SPA)
+		page.on('framenavigated', async (frame: Frame) => {
 			// Only track main frame navigation (not iframes)
 			if (frame === page.mainFrame()) {
 				const newUrl = frame.url();
 
+				// Skip internal Chrome error/system pages — they indicate a failed navigation
+				// and should not be surfaced to the frontend as a real URL change.
+				if (newUrl.startsWith('chrome-error://') || newUrl.startsWith('chrome://')) return;
+
+				// Skip if URL hasn't changed (already handled by navigatedWithinDocument)
+				if (newUrl === session.url) return;
+
+				// Hash-only changes should be treated as SPA navigations
+				// (no streaming restart needed, page context is unchanged)
+				if (this.isHashOnlyChange(session.url, newUrl)) {
+					debug.log('preview', `🔄 Hash-only change detected, treating as SPA navigation: ${session.url} → ${newUrl}`);
+					session.url = newUrl;
+					this.emit('navigation-spa', {
+						sessionId,
+						type: 'navigation-spa',
+						url: newUrl,
+						timestamp: Date.now()
+					});
+					return;
+				}
+
+				// Same-origin navigation: check if the video encoder script survived.
+				// SPA frameworks (SvelteKit, Next.js, etc.) often trigger framenavigated
+				// for client-side routing even though the page context is NOT replaced.
+				// If __webCodecsPeer still exists, the scripts are alive → SPA navigation.
+				// If it's gone, the page was truly replaced → full navigation + stream restart.
+				if (this.isSameOrigin(session.url, newUrl)) {
+					try {
+						const scriptAlive = await page.evaluate(() => !!(window as any).__webCodecsPeer);
+						if (scriptAlive) {
+							debug.log('preview', `🔄 Same-origin navigation with script alive (SPA): ${session.url} → ${newUrl}`);
+							session.url = newUrl;
+							this.emit('navigation-spa', {
+								sessionId,
+								type: 'navigation-spa',
+								url: newUrl,
+								timestamp: Date.now()
+							});
+							return;
+						}
+						debug.log('preview', `📄 Same-origin navigation with script dead (full reload): ${session.url} → ${newUrl}`);
+					} catch {
+						// page.evaluate failed — page context was replaced, fall through to full navigation
+						debug.log('preview', `📄 Same-origin navigation evaluate failed (full reload): ${session.url} → ${newUrl}`);
+					}
+				}
+
 				// 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,
@@ -48,11 +173,45 @@ export class BrowserNavigationTracker extends EventEmitter {
 		// Also track URL changes via JavaScript (for single page applications)
 		page.on('load', async () => {
 			const currentUrl = page.url();
+			// Skip internal Chrome error/system pages
+			if (currentUrl.startsWith('chrome-error://') || currentUrl.startsWith('chrome://')) return;
 			if (currentUrl !== session.url) {
-				
+
+				// Hash-only changes on load — treat as SPA navigation
+				if (this.isHashOnlyChange(session.url, currentUrl)) {
+					session.url = currentUrl;
+					this.emit('navigation-spa', {
+						sessionId,
+						type: 'navigation-spa',
+						url: currentUrl,
+						timestamp: Date.now()
+					});
+					return;
+				}
+
+				// Same-origin: check if video encoder script survived
+				if (this.isSameOrigin(session.url, currentUrl)) {
+					try {
+						const scriptAlive = await page.evaluate(() => !!(window as any).__webCodecsPeer);
+						if (scriptAlive) {
+							session.url = currentUrl;
+							this.emit('navigation-spa', {
+								sessionId,
+								type: 'navigation-spa',
+								url: currentUrl,
+								timestamp: Date.now()
+							});
+							return;
+						}
+					} catch {
+						// Fall through to full navigation
+					}
+				}
+
 				session.url = currentUrl;
-				
-				this.emit('navigation', {
+
+				// Deduplicated: framenavigated already emitted for this URL
+				this.emitNavigationDeduped('navigation', sessionId, currentUrl, {
 					sessionId,
 					type: 'navigation',
 					url: currentUrl,
@@ -61,34 +220,60 @@ export class BrowserNavigationTracker extends EventEmitter {
 			}
 		});
 
-		// Track hash changes (fragment identifier changes like #contact-us)
-		// Temporarily disabled URL tracking injection to test CloudFlare evasion
-		/*
-		await page.evaluateOnNewDocument(() => {
-			let lastUrl = window.location.href;
+		// Track SPA navigations (pushState/replaceState) via CDP
+		// Uses Page.navigatedWithinDocument which fires for same-document navigations
+		// This is purely CDP-level — no script injection, safe from CloudFlare detection
+		try {
+			const cdp = await page.createCDPSession();
+			this.cdpSessions.set(sessionId, cdp);
 
-			// Monitor for hash changes and other URL changes
-			const checkUrlChange = () => {
-				const currentUrl = window.location.href;
-				if (currentUrl !== lastUrl) {
-					lastUrl = currentUrl;
+			await cdp.send('Page.enable');
 
-					// Store the new URL for the backend to detect
-					(window as any).__urlChanged = {
-						url: currentUrl,
-						timestamp: Date.now()
-					};
-				}
-			};
+			// Get main frame ID via CDP (reliable across Puppeteer versions)
+			const frameTree = await cdp.send('Page.getFrameTree');
+			const mainFrameId = frameTree.frameTree.frame.id;
 
-			// Listen to various events that might change URL
-			window.addEventListener('hashchange', checkUrlChange);
-			window.addEventListener('popstate', checkUrlChange);
+			cdp.on('Page.navigatedWithinDocument', (params: { frameId: string; url: string }) => {
+				// Only track main frame SPA navigations (ignore iframe pushState)
+				if (params.frameId !== mainFrameId) return;
 
-			// Periodically check for URL changes (for SPA navigation)
-			setInterval(checkUrlChange, 500);
-		});
-		*/
+				const newUrl = params.url;
+				if (newUrl === session.url) return;
+
+				debug.log('preview', `🔄 SPA navigation detected: ${session.url} → ${newUrl}`);
+
+				// Update session URL
+				session.url = newUrl;
+
+				// Emit SPA navigation event — no loading state, no stream restart
+				this.emit('navigation-spa', {
+					sessionId,
+					type: 'navigation-spa',
+					url: newUrl,
+					timestamp: Date.now()
+				});
+			});
+
+			debug.log('preview', `✅ CDP SPA navigation tracking setup for session: ${sessionId}`);
+		} catch (error) {
+			debug.warn('preview', `⚠️ Failed to setup CDP SPA tracking for ${sessionId}:`, error);
+		}
+	}
+
+	/**
+	 * Cleanup CDP session for a tab
+	 */
+	async cleanupSession(sessionId: string) {
+		const cdp = this.cdpSessions.get(sessionId);
+		if (cdp) {
+			try {
+				await cdp.detach();
+			} catch {
+				// Ignore detach errors
+			}
+			this.cdpSessions.delete(sessionId);
+		}
+		this.lastNavigationEmit.delete(sessionId);
 	}
 
 	async navigateSession(sessionId: string, session: BrowserTab, url: string): Promise<string> {

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

@@ -51,7 +51,7 @@ const CHROMIUM_ARGS = [
 	'--disable-blink-features=AutomationControlled',
 	'--window-size=1366,768',
 	'--autoplay-policy=no-user-gesture-required',
-	'--disable-features=AudioServiceOutOfProcess'
+	'--disable-features=AudioServiceOutOfProcess,WebRtcHideLocalIpsWithMdns'
 ];
 
 class BrowserPool {