@myrialabs/clopen 0.2.4 → 0.2.6

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

@@ -47,17 +47,24 @@
 	let isRecovering = $state(false); // Track recovery attempts
 	let connectionFailed = $state(false); // Track if connection actually failed (not just slow)
 	let hasRequestedScreencastRefresh = false; // Track if we've already requested refresh for this stream
+	let screencastRefreshCount = 0; // Track retry count for stuck detection
 	let navigationJustCompleted = false; // Track if navigation just completed (for fast refresh)
 
+	// Canvas snapshot storage for instant tab switching
+	// Stores a clone of the canvas per sessionId so switching back shows content immediately
+	const canvasSnapshots = new Map<string, HTMLCanvasElement>();
+	const MAX_SNAPSHOTS = 10;
+	let hasRestoredSnapshot = false; // Prevents canvas clear/reset during streaming start
+
 	// Recovery is only triggered by ACTUAL failures, not timeouts
 	// - ICE connection failed
 	// - WebCodecs connection closed unexpectedly
 	// - Explicit errors
 	const MAX_CONSECUTIVE_FAILURES = 2;
 	const HEALTH_CHECK_INTERVAL = 2000; // Check every 2 seconds for connection health
-	const FRAME_CHECK_INTERVAL = 500; // Check for first frame every 500ms (just for UI update, not recovery)
-	const STUCK_STREAM_TIMEOUT = 5000; // Fallback: Request screencast refresh after 5 seconds of connected but no frame
-	const NAVIGATION_FAST_REFRESH_DELAY = 500; // Fast refresh after navigation: 500ms
+	const FRAME_CHECK_INTERVAL = 100; // Fallback poll for first frame (primary path is onFirstFrame callback)
+	const STUCK_STREAM_TIMEOUT = 3000; // Fallback: Request screencast refresh after 3 seconds of connected but no frame
+	const NAVIGATION_FAST_REFRESH_DELAY = 300; // Fast refresh after navigation: 300ms
 
 	// Sync isStreamReady with hasReceivedFirstFrame for parent component
 	$effect(() => {
@@ -73,6 +80,10 @@
 		if (lastProjectId && currentProjectId && lastProjectId !== currentProjectId) {
 			debug.log('webcodecs', `🔄 Project changed (${lastProjectId} → ${currentProjectId}), destroying old WebCodecs service`);
 
+			// Clear canvas snapshots - they belong to old project's sessions
+			canvasSnapshots.clear();
+			hasRestoredSnapshot = false;
+
 			// Destroy old service
 			if (webCodecsService) {
 				webCodecsService.destroy();
@@ -416,7 +427,10 @@
 
 		isStartingStream = true;
 		isStreamStarting = true; // Show loading overlay
-		hasReceivedFirstFrame = false; // Reset first frame state
+		// Don't reset if we restored a snapshot - keep showing it
+		if (!hasRestoredSnapshot) {
+			hasReceivedFirstFrame = false; // Reset first frame state
+		}
 
 		try {
 			// If streaming a different session, stop first
@@ -480,6 +494,25 @@
 					onStatsUpdate(stats);
 				});
 
+				// Setup first frame handler - fires immediately when first frame decoded
+				// This eliminates the 500ms polling delay for hiding the loading overlay
+				webCodecsService.setFirstFrameHandler(() => {
+					if (!hasReceivedFirstFrame) {
+						debug.log('webcodecs', 'First frame callback - immediately updating UI');
+						hasReceivedFirstFrame = true;
+						consecutiveFailures = 0;
+						connectionFailed = false;
+					}
+
+					// Always reset reconnecting state on first real frame
+					// (outside !hasReceivedFirstFrame to handle snapshot + reconnect case)
+					if (isReconnecting) {
+						setTimeout(() => {
+							isReconnecting = false;
+						}, 300);
+					}
+				});
+
 				// Setup cursor change handler
 				webCodecsService.setOnCursorChange((cursor: string) => {
 					updateCanvasCursor(cursor);
@@ -491,8 +524,8 @@
 
 			let success = false;
 			let retries = 0;
-			const maxRetries = 5; // Increased for rapid tab switching
-			const retryDelay = 500; // Increased delay for backend cleanup
+			const maxRetries = 5;
+			const retryDelay = 300;
 
 			while (!success && retries < maxRetries) {
 				try {
@@ -502,7 +535,8 @@
 						isConnected = true;
 						activeStreamingSessionId = sessionId;
 						consecutiveFailures = 0; // Reset failure counter on success
-						startHealthCheck(); // Start monitoring for stuck streams
+						startHealthCheck(hasRestoredSnapshot); // Skip first frame reset if snapshot
+						hasRestoredSnapshot = false; // Reset after using
 						debug.log('webcodecs', 'Streaming started successfully');
 						break;
 					}
@@ -533,6 +567,7 @@
 		} finally {
 			isStartingStream = false;
 			isStreamStarting = false; // Hide "Launching browser..." (but may still show "Connecting..." until first frame)
+			hasRestoredSnapshot = false; // Always reset in finally
 		}
 	}
 
@@ -561,6 +596,7 @@
 		}
 		connectionFailed = false;
 		hasRequestedScreencastRefresh = false; // Reset for new stream
+		screencastRefreshCount = 0; // Reset retry counter
 
 		const startTime = Date.now();
 
@@ -587,6 +623,7 @@
 				consecutiveFailures = 0;
 				connectionFailed = false;
 				hasRequestedScreencastRefresh = false; // Reset on success
+				screencastRefreshCount = 0; // Reset retry counter on success
 
 				// Reset reconnecting state after successful frame reception
 				// This completes the fast reconnect cycle
@@ -621,10 +658,21 @@
 			// STUCK STREAM DETECTION (FALLBACK): If connected but no first frame for too long,
 			// request screencast refresh (hot-swap) to restart CDP screencast.
 			// This handles cases where WebRTC is connected but CDP frames aren't flowing.
-			if (stats?.isConnected && !stats?.firstFrameRendered && elapsed >= STUCK_STREAM_TIMEOUT && !hasRequestedScreencastRefresh) {
-				debug.warn('webcodecs', `Stream appears stuck (connected but no frame for ${elapsed}ms), requesting screencast refresh`);
-				hasRequestedScreencastRefresh = true;
-				onRequestScreencastRefresh();
+			// Retries: 1st at 3s (screencast refresh), 2nd at 6s (another refresh), 3rd at 10s (full recovery)
+			if (stats?.isConnected && !stats?.firstFrameRendered && !hasRequestedScreencastRefresh) {
+				const MAX_SCREENCAST_RETRIES = 2;
+				const retryThreshold = STUCK_STREAM_TIMEOUT + (screencastRefreshCount * 3000); // 3s, 6s
+
+				if (elapsed >= retryThreshold && screencastRefreshCount < MAX_SCREENCAST_RETRIES) {
+					screencastRefreshCount++;
+					debug.warn('webcodecs', `Stream stuck (connected, no frame for ${elapsed}ms), screencast refresh attempt ${screencastRefreshCount}/${MAX_SCREENCAST_RETRIES}`);
+					onRequestScreencastRefresh();
+				} else if (elapsed >= 10000 && screencastRefreshCount >= MAX_SCREENCAST_RETRIES) {
+					// Screencast refreshes didn't help - attempt full recovery
+					debug.warn('webcodecs', `Stream still stuck after ${screencastRefreshCount} screencast refreshes (${elapsed}ms), attempting full recovery`);
+					hasRequestedScreencastRefresh = true; // Prevent further retries
+					attemptRecovery();
+				}
 			}
 
 		}, FRAME_CHECK_INTERVAL);
@@ -770,11 +818,11 @@
 			lastStartRequestId = null; // Clear to allow new requests
 			// Note: Don't reset hasReceivedFirstFrame here - let startStreaming do it
 			// This prevents flashing when switching tabs
-			// Clear canvas to prevent stale frames, BUT keep last frame during navigation
-			if (!isNavigating) {
+			// Clear canvas to prevent stale frames, BUT keep last frame during navigation or snapshot restore
+			if (!isNavigating && !hasRestoredSnapshot) {
 				clearCanvas();
 			} else {
-				debug.log('webcodecs', 'Skipping canvas clear during navigation - keeping last frame');
+				debug.log('webcodecs', `Skipping canvas clear - navigation: ${isNavigating}, snapshot: ${hasRestoredSnapshot}`);
 			}
 		}
 	}
@@ -813,10 +861,52 @@
 			const needsStreaming = !isWebCodecsActive || activeStreamingSessionId !== sessionId;
 
 			if (needsStreaming) {
-				// Clear canvas immediately when session changes to prevent stale frames
 				if (activeStreamingSessionId !== sessionId) {
-					clearCanvas();
-					hasReceivedFirstFrame = false; // Reset to show loading overlay
+					// SNAPSHOT: Save current canvas before switching to new session
+					if (activeStreamingSessionId && hasReceivedFirstFrame && canvasElement.width > 0) {
+						try {
+							const clone = document.createElement('canvas');
+							clone.width = canvasElement.width;
+							clone.height = canvasElement.height;
+							const cloneCtx = clone.getContext('2d');
+							if (cloneCtx) {
+								cloneCtx.drawImage(canvasElement, 0, 0);
+								// Limit snapshot count
+								if (canvasSnapshots.size >= MAX_SNAPSHOTS) {
+									const firstKey = canvasSnapshots.keys().next().value;
+									if (firstKey) canvasSnapshots.delete(firstKey);
+								}
+								canvasSnapshots.set(activeStreamingSessionId, clone);
+								debug.log('webcodecs', `📸 Saved canvas snapshot for session ${activeStreamingSessionId}`);
+							}
+						} catch (e) {
+							debug.warn('webcodecs', 'Failed to capture canvas snapshot:', e);
+						}
+					}
+
+					// SNAPSHOT: Restore for new session if available
+					const existingSnapshot = canvasSnapshots.get(sessionId);
+					if (existingSnapshot) {
+						setupCanvasInternal(); // Ensure canvas dimensions are correct
+						try {
+							const ctx = canvasElement.getContext('2d');
+							if (ctx) {
+								ctx.drawImage(existingSnapshot, 0, 0, canvasElement.width, canvasElement.height);
+								hasRestoredSnapshot = true;
+								// Don't reset hasReceivedFirstFrame - snapshot is visible
+								debug.log('webcodecs', `📸 Restored canvas snapshot for session ${sessionId}`);
+							}
+						} catch (e) {
+							debug.warn('webcodecs', 'Failed to restore canvas snapshot:', e);
+							hasRestoredSnapshot = false;
+							clearCanvas();
+							hasReceivedFirstFrame = false;
+						}
+					} else {
+						hasRestoredSnapshot = false;
+						clearCanvas();
+						hasReceivedFirstFrame = false; // Reset to show loading overlay
+					}
 				}
 
 				// Stop existing streaming first if session changed
@@ -831,12 +921,10 @@
 					await startStreaming();
 				};
 
-				// Longer delay to ensure backend session is fully ready
-				// This is especially important during viewport/device change
-				// when session is being recreated
+				// Small delay to ensure backend session is ready
 				const timeout = setTimeout(() => {
 					doStartStreaming();
-				}, 200);
+				}, 50);
 
 				return () => clearTimeout(timeout);
 			}
@@ -1039,6 +1127,7 @@
 
 	onDestroy(() => {
 		stopHealthCheck(); // Stop health monitoring
+		canvasSnapshots.clear(); // Free snapshot memory
 		if (webCodecsService) {
 			webCodecsService.destroy();
 			webCodecsService = null;

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

@@ -52,8 +52,9 @@
 	let previewContainer = $state<HTMLDivElement | undefined>();
 
 	// 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)
 	);
 
 	// Navigation overlay state with debounce to prevent flickering during state transitions

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;
 			}
 
@@ -781,7 +784,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 {
@@ -795,13 +798,18 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 			browserCleanup.clearAll();
 
 			// 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/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/DesktopNavigator.svelte

@@ -26,6 +26,9 @@
 	let projectToDelete = $state<Project | null>(null);
 	let searchQuery = $state('');
 	let showTunnelModal = $state(false);
+	let hoveredProject = $state<Project | null>(null);
+	let tooltipY = $state(0);
+	let tooltipX = $state(0);
 
 	// Derived
 	const isCollapsed = $derived(workspaceState.navigatorCollapsed);
@@ -145,6 +148,17 @@
 		// Single word: take first 2 letters
 		return name.substring(0, 2).toUpperCase();
 	}
+
+	function showProjectTooltip(project: Project, event: MouseEvent) {
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		tooltipX = rect.right + 8;
+		tooltipY = rect.top + rect.height / 2;
+		hoveredProject = project;
+	}
+
+	function hideProjectTooltip() {
+		hoveredProject = null;
+	}
 </script>
 
 <!-- Project Navigator Sidebar -->
@@ -315,7 +329,8 @@
 							? 'bg-violet-500/10 dark:bg-violet-500/20 text-violet-700 dark:text-violet-300'
 							: 'bg-slate-200/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100'}"
 						onclick={() => selectProject(project)}
-						title={project.name}
+						onmouseenter={(e) => showProjectTooltip(project, e)}
+						onmouseleave={hideProjectTooltip}
 					>
 						<span>{getProjectInitials(project.name)}</span>
 						<span
@@ -349,6 +364,17 @@
 	</nav>
 </aside>
 
+<!-- Collapsed project tooltip (fixed position to avoid overflow clipping) -->
+{#if hoveredProject}
+	<div
+		class="fixed z-50 pointer-events-none flex flex-col py-1.5 px-2.5 rounded-lg bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 shadow-lg whitespace-nowrap"
+		style="left: {tooltipX}px; top: {tooltipY}px; transform: translateY(-50%);"
+	>
+		<span class="text-xs font-semibold text-slate-900 dark:text-slate-100">{hoveredProject.name}</span>
+		<span class="text-3xs font-mono text-slate-500 dark:text-slate-400">{hoveredProject.path}</span>
+	</div>
+{/if}
+
 <!-- Folder Browser (includes its own Modal) -->
 <FolderBrowser
 	bind:isOpen={showFolderBrowser}

package/frontend/components/workspace/WorkspaceLayout.svelte

@@ -28,6 +28,7 @@
 	import { initializeSessions } from '$frontend/stores/core/sessions.svelte';
 	import { initializeNotifications, notificationStore } from '$frontend/stores/ui/notification.svelte';
 	import { applyServerSettings, loadSystemSettings } from '$frontend/stores/features/settings.svelte';
+	import { applyTodoPanelState } from '$frontend/stores/ui/todo-panel.svelte';
 	import { initPresence } from '$frontend/stores/core/presence.svelte';
 	import ws from '$frontend/utils/ws';
 	import { debug } from '$shared/utils/logger';
@@ -84,7 +85,7 @@
 
 			// Step 3: Restore user state from server
 			setProgress(30, 'Restoring state...');
-			let serverState: { currentProjectId: string | null; lastView: string | null; settings: any; unreadSessions: any } | null = null;
+			let serverState: { currentProjectId: string | null; lastView: string | null; settings: any; unreadSessions: any; todoPanelState: any } | null = null;
 			try {
 				serverState = await ws.http('user:restore-state', {});
 				debug.log('workspace', 'Server state restored:', serverState);
@@ -97,6 +98,7 @@
 			if (serverState?.settings) {
 				applyServerSettings(serverState.settings);
 			}
+			applyTodoPanelState(serverState?.todoPanelState);
 			restoreLastView(serverState?.lastView);
 			restoreUnreadSessions(serverState?.unreadSessions);
 			await loadSystemSettings();

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

@@ -18,6 +18,7 @@
 	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
 	import type { IconName } from '$shared/types/ui/icons';
+	import { fileState, clearRevealRequest } from '$frontend/stores/core/files.svelte';
 
 	// Props
 	interface Props {
@@ -51,6 +52,7 @@
 		savedContent: string;
 		isLoading: boolean;
 		externallyChanged?: boolean;
+		isBinary?: boolean;
 	}
 
 	let openTabs = $state<EditorTab[]>([]);
@@ -68,6 +70,7 @@
 	let displayFile = $state<FileNode | null>(null);
 	let displayLoading = $state(false);
 	let displayTargetLine = $state<number | undefined>(undefined);
+	let displayIsBinary = $state(false);
 	let displayExternallyChanged = $state(false);
 
 	// Sync display state when active tab changes
@@ -78,12 +81,14 @@
 			displaySavedContent = activeTab.savedContent;
 			displayLoading = activeTab.isLoading;
 			displayExternallyChanged = activeTab.externallyChanged || false;
+			displayIsBinary = activeTab.isBinary || false;
 		} else {
 			displayFile = null;
 			displayContent = '';
 			displaySavedContent = '';
 			displayLoading = false;
 			displayExternallyChanged = false;
+			displayIsBinary = false;
 		}
 	});
 
@@ -341,9 +346,10 @@
 		try {
 			const data = await ws.http('files:read-file', { file_path: filePath });
 			const content = data.content || '';
+			const isBinary = data.isBinary || false;
 			openTabs = openTabs.map(t =>
 				t.file.path === filePath
-					? { ...t, currentContent: content, savedContent: content, isLoading: false }
+					? { ...t, currentContent: content, savedContent: content, isLoading: false, isBinary }
 					: t
 			);
 			// Update display if this is the active tab
@@ -351,6 +357,7 @@
 				displayContent = content;
 				displaySavedContent = content;
 				displayLoading = false;
+				displayIsBinary = isBinary;
 			}
 			return true;
 		} catch (err) {
@@ -377,6 +384,7 @@
 			displayContent = tab.currentContent;
 			displaySavedContent = tab.savedContent;
 			displayLoading = tab.isLoading;
+			displayIsBinary = tab.isBinary || false;
 		}
 	}
 
@@ -1086,6 +1094,72 @@
 		prevTwoColumnMode = isTwoColumnMode;
 	});
 
+	// Reveal and open file in editor when requested from external components (e.g. chat tools)
+	$effect(() => {
+		const revealPath = fileState.revealRequest;
+		if (!revealPath || !projectPath) return;
+
+		clearRevealRequest();
+
+		// Expand all parent directories in the tree
+		const relativePath = revealPath.startsWith(projectPath)
+			? revealPath.slice(projectPath.length).replace(/^[/\\]/, '')
+			: '';
+		if (relativePath) {
+			const parts = relativePath.split(/[/\\]/);
+			let currentPath = projectPath;
+			for (let i = 0; i < parts.length - 1; i++) {
+				currentPath += '/' + parts[i];
+				expandedFolders.add(currentPath);
+			}
+			expandedFolders = new Set(expandedFolders);
+		}
+
+		// Open file in editor tab (handleFileOpen also handles missing tree nodes)
+		revealAndOpenFile(revealPath);
+	});
+
+	async function revealAndOpenFile(filePath: string) {
+		const existingTab = openTabs.find(t => t.file.path === filePath);
+		if (existingTab) {
+			// Tab already open — just activate it
+			activeTabPath = filePath;
+			if (!isTwoColumnMode) viewMode = 'viewer';
+			scrollToActiveFile(filePath);
+			return;
+		}
+
+		// Create new tab
+		let file = findFileInTree(projectFiles, filePath);
+		if (!file) {
+			const fileName = filePath.split(/[/\\]/).pop() || 'Untitled';
+			file = { name: fileName, path: filePath, type: 'file', size: 0, modified: new Date() };
+		}
+		const newTab: EditorTab = {
+			file,
+			currentContent: '',
+			savedContent: '',
+			isLoading: true
+		};
+		openTabs = [...openTabs, newTab];
+		activeTabPath = filePath;
+		if (!isTwoColumnMode) viewMode = 'viewer';
+
+		// Load content and verify file exists on disk
+		const success = await loadTabContent(filePath);
+		if (!success) {
+			openTabs = openTabs.filter(t => t.file.path !== filePath);
+			if (activeTabPath === filePath) {
+				activeTabPath = openTabs.length > 0 ? openTabs[openTabs.length - 1].file.path : null;
+				if (!activeTabPath && !isTwoColumnMode) viewMode = 'tree';
+			}
+			showErrorAlert('File no longer exists on disk.', 'File Not Found');
+			return;
+		}
+
+		scrollToActiveFile(filePath);
+	}
+
 	// Save state to persistent storage on component destruction (mobile/desktop switch)
 	onDestroy(() => {
 		if (projectPath) {
@@ -1269,6 +1343,8 @@
 							onToggleWordWrap={() => { wordWrapEnabled = !wordWrapEnabled; }}
 							externallyChanged={displayExternallyChanged}
 							onForceReload={forceReloadTab}
+							isBinary={displayIsBinary}
+						projectPath={projectPath}
 						/>
 					</div>
 				</div>