@myrialabs/clopen 0.2.7 → 0.2.8

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

@@ -473,7 +473,7 @@
 			bind:isConsoleOpen
 			{tabs}
 			{activeTabId}
-			mcpControlledTabId={mcpHandler.mcpControlState.controlledTabId}
+			mcpControlledTabIds={mcpHandler.getControlledTabIds()}
 			onGoClick={handleGoClick}
 			onRefresh={refreshPreview}
 			onOpenInExternalBrowser={() => {}}

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

@@ -406,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);
 			}

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/mcp-handlers.svelte.ts

@@ -1,6 +1,9 @@
 /**
  * Browser MCP Event Handlers
  * Handles MCP (Model Context Protocol) control events for BrowserPreview
+ *
+ * Supports multi-tab control: each chat session can control multiple tabs.
+ * Tracks controlled tabs via a Set of backend tab IDs (session IDs).
  */
 
 import { debug } from '$shared/utils/logger';
@@ -8,14 +11,6 @@ import { showInfo, showWarning } from '$frontend/stores/ui/notification.svelte';
 import ws from '$frontend/utils/ws';
 import type { TabManager } from './tab-manager.svelte';
 
-// MCP Control State interface
-export interface McpControlState {
-	isControlled: boolean;
-	controlledTabId: string | null;
-	browserSessionId: string | null;
-	startedAt: number | null;
-}
-
 export interface McpHandlerConfig {
 	tabManager: TabManager;
 	transformBrowserToDisplayCoordinates?: (x: number, y: number) => { x: number, y: number } | null;
@@ -30,13 +25,8 @@ export interface McpHandlerConfig {
 export function createMcpHandler(config: McpHandlerConfig) {
 	const { tabManager, transformBrowserToDisplayCoordinates, onCursorUpdate, onCursorHide, onLaunchRequest } = config;
 
-	// MCP control state
-	let mcpControlState = $state<McpControlState>({
-		isControlled: false,
-		controlledTabId: null,
-		browserSessionId: null,
-		startedAt: null
-	});
+	// Set of backend tab IDs (session IDs) currently controlled by MCP
+	let controlledSessionIds = $state(new Set<string>());
 
 	/**
 	 * Setup WebSocket event listeners for MCP control events
@@ -44,7 +34,7 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	function setupEventListeners() {
 		debug.log('preview', '🎧 Setting up MCP event listeners...');
 
-		// Listen for MCP control start/end events
+		// Listen for MCP control start/end events (per-tab)
 		ws.on('preview:browser-mcp-control-start', (data) => {
 			debug.log('preview', `📥 Received mcp-control-start:`, data);
 			handleControlStart(data);
@@ -93,60 +83,72 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	}
 
 	/**
-	 * Check if current tab is MCP controlled
+	 * Check if current active tab is MCP controlled
 	 */
 	function isCurrentTabMcpControlled(): boolean {
-		return mcpControlState.isControlled && mcpControlState.controlledTabId === tabManager.activeTabId;
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (!activeTab?.sessionId) return false;
+		return controlledSessionIds.has(activeTab.sessionId);
 	}
 
 	/**
-	 * Get MCP control state
+	 * Check if a specific frontend tab is MCP controlled (by sessionId)
 	 */
-	function getControlState(): McpControlState {
-		return mcpControlState;
+	function isSessionControlled(sessionId: string): boolean {
+		return controlledSessionIds.has(sessionId);
 	}
 
-	// Private handlers
+	/**
+	 * Get set of frontend tab IDs that are MCP controlled
+	 */
+	function getControlledTabIds(): Set<string> {
+		const result = new Set<string>();
+		for (const tab of tabManager.tabs) {
+			if (tab.sessionId && controlledSessionIds.has(tab.sessionId)) {
+				result.add(tab.id);
+			}
+		}
+		return result;
+	}
 
-	function handleControlStart(data: { browserSessionId: string; mcpSessionId?: string; timestamp: number }) {
-		debug.log('preview', `🎮 MCP control started for session: ${data.browserSessionId}`);
+	// Private handlers
 
-		// Find which tab has this session
-		const tab = tabManager.tabs.find(t => t.sessionId === data.browserSessionId);
+	function handleControlStart(data: { browserTabId: string; chatSessionId?: string; timestamp: number }) {
+		debug.log('preview', `🎮 MCP control started for tab: ${data.browserTabId}`);
 
-		mcpControlState = {
-			isControlled: true,
-			controlledTabId: tab?.id || null,
-			browserSessionId: data.browserSessionId,
-			startedAt: data.timestamp
-		};
+		// Add to controlled set (reassign for Svelte reactivity)
+		controlledSessionIds = new Set([...controlledSessionIds, data.browserTabId]);
 
-		// Show toast notification
-		showWarning('MCP Control Started', 'An MCP agent is now controlling the browser. User input is blocked.', 5000);
+		// Show toast only for the first controlled tab
+		if (controlledSessionIds.size === 1) {
+			showWarning('MCP Control Started', 'An MCP agent is now controlling the browser. User input is blocked.', 5000);
+		}
 	}
 
-	function handleControlEnd(data: { browserSessionId: string; timestamp: number }) {
-		debug.log('preview', `🎮 MCP control ended for session: ${data.browserSessionId}`);
+	function handleControlEnd(data: { browserTabId: string; timestamp: number }) {
+		debug.log('preview', `🎮 MCP control ended for tab: ${data.browserTabId}`);
 
-		mcpControlState = {
-			isControlled: false,
-			controlledTabId: null,
-			browserSessionId: null,
-			startedAt: null
-		};
+		// Remove from controlled set (reassign for Svelte reactivity)
+		const newSet = new Set(controlledSessionIds);
+		newSet.delete(data.browserTabId);
+		controlledSessionIds = newSet;
 
-		// Hide cursor
-		if (onCursorHide) {
+		// Hide cursor if the released tab was the active one
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.browserTabId && onCursorHide) {
 			onCursorHide();
 		}
 
-		// Show toast notification
-		showInfo('MCP Control Ended', 'MCP agent released control. You can now interact with the browser.', 4000);
+		// Show toast when all tabs released
+		if (controlledSessionIds.size === 0) {
+			showInfo('MCP Control Ended', 'MCP agent released control. You can now interact with the browser.', 4000);
+		}
 	}
 
 	function handleCursorPosition(data: { sessionId: string; x: number; y: number; timestamp: number; source: 'mcp' }) {
-		// Only show cursor if MCP is controlling AND user is currently viewing that tab
-		if (mcpControlState.isControlled && mcpControlState.browserSessionId === data.sessionId && isCurrentTabMcpControlled() && transformBrowserToDisplayCoordinates) {
+		// Only show cursor if this tab is controlled AND user is viewing it
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.sessionId && controlledSessionIds.has(data.sessionId) && transformBrowserToDisplayCoordinates) {
 			const transformedPosition = transformBrowserToDisplayCoordinates(data.x, data.y);
 			if (transformedPosition && onCursorUpdate) {
 				onCursorUpdate(transformedPosition.x, transformedPosition.y, false);
@@ -155,8 +157,9 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	}
 
 	function handleCursorClick(data: { sessionId: string; x: number; y: number; timestamp: number; source: 'mcp' }) {
-		// Only show cursor click if MCP is controlling AND user is currently viewing that tab
-		if (mcpControlState.isControlled && mcpControlState.browserSessionId === data.sessionId && isCurrentTabMcpControlled() && transformBrowserToDisplayCoordinates) {
+		// Only show cursor click if this tab is controlled AND user is viewing it
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.sessionId && controlledSessionIds.has(data.sessionId) && transformBrowserToDisplayCoordinates) {
 			const transformedPosition = transformBrowserToDisplayCoordinates(data.x, data.y);
 			if (transformedPosition && onCursorUpdate) {
 				onCursorUpdate(transformedPosition.x, transformedPosition.y, true);
@@ -170,12 +173,7 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	 */
 	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()
-		};
+		controlledSessionIds = new Set([...controlledSessionIds, browserSessionId]);
 	}
 
 	/**
@@ -183,12 +181,7 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	 */
 	function resetControlState(): void {
 		debug.log('preview', `🔄 Resetting MCP control state`);
-		mcpControlState = {
-			isControlled: false,
-			controlledTabId: null,
-			browserSessionId: null,
-			startedAt: null
-		};
+		controlledSessionIds = new Set();
 		if (onCursorHide) {
 			onCursorHide();
 		}
@@ -327,10 +320,11 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	return {
 		setupEventListeners,
 		isCurrentTabMcpControlled,
-		getControlState,
+		isSessionControlled,
+		getControlledTabIds,
 		restoreControlState,
 		resetControlState,
-		get mcpControlState() { return mcpControlState; }
+		get controlledSessionIds() { return controlledSessionIds; }
 	};
 }
 

package/frontend/components/workspace/panels/GitPanel.svelte

@@ -1426,12 +1426,7 @@
 				<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">
-							<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>
+							<Icon name="lucide:tag" class="w-4 h-4 text-slate-400 shrink-0" />
 							<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">

package/frontend/services/preview/browser/browser-webcodecs.service.ts

@@ -208,7 +208,7 @@ export class BrowserWebCodecsService {
 
 		if (this.ctx) {
 			this.ctx.imageSmoothingEnabled = true;
-			this.ctx.imageSmoothingQuality = 'low';
+			this.ctx.imageSmoothingQuality = 'medium';
 		}
 
 		this.clearCanvas();
@@ -1003,7 +1003,7 @@ export class BrowserWebCodecsService {
 
 		if (this.ctx) {
 			this.ctx.imageSmoothingEnabled = true;
-			this.ctx.imageSmoothingQuality = 'low';
+			this.ctx.imageSmoothingQuality = 'medium';
 		}
 
 		try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
   "author": "Myria Labs",
   "license": "MIT",