@myrialabs/clopen 0.2.8 → 0.2.10

package/frontend/components/chat/tools/components/TerminalCommand.svelte

@@ -16,6 +16,13 @@
 	}
 
 	const parsedCommand = $derived(parseCommandParts(command));
+
+	function formatTimeout(ms: number): string {
+		if (ms < 1000) return `${ms}ms`;
+		if (ms < 60_000) return `${ms / 1000}s`;
+		if (ms < 3_600_000) return `${ms / 60_000}m`;
+		return `${ms / 3_600_000}h`;
+	}
 </script>
 
 <!-- Description (if provided) -->
@@ -34,7 +41,7 @@
 		</div>
 		{#if timeout}
 			<div class="inline-block ml-auto text-3xs bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">
-				Timeout: {timeout}ms
+				Timeout: {formatTimeout(timeout)}
 			</div>
 		{/if}
 	</div>

package/frontend/components/common/overlay/Dialog.svelte

@@ -184,7 +184,7 @@
 		out:fade={{ duration: 150, easing: cubicOut }}
 	>
 		<div
-			class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl max-w-md w-full p-6 space-y-4 shadow-xl"
+			class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl max-w-md w-full p-6 space-y-4 shadow-xl max-h-[calc(100dvh-2rem)] overflow-y-auto"
 			role="document"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}

package/frontend/components/common/overlay/Lightbox.svelte

@@ -171,7 +171,7 @@
 
 		<!-- Content container -->
 		<div
-			class="relative max-w-[95vw] max-h-[95vh] flex items-center justify-center"
+			class="relative max-w-[95vw] max-h-[95dvh] flex items-center justify-center"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 			role="document"
@@ -184,7 +184,7 @@
 				<img
 					src="data:{mediaType};base64,{data}"
 					alt="Full size view"
-					class="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl"
+					class="max-w-full max-h-[90dvh] object-contain rounded-lg shadow-2xl"
 					loading="eager"
 				/>
 			{:else if type === 'document'}

package/frontend/components/common/overlay/Modal.svelte

@@ -51,7 +51,7 @@
 		md: 'max-w-[95vw] md:max-w-lg',
 		lg: 'max-w-[95vw] md:max-w-2xl',
 		xl: 'max-w-[95vw] md:max-w-4xl',
-		full: 'max-w-[95vw] md:max-w-[90vw] max-h-[90vh]'
+		full: 'max-w-[95vw] md:max-w-[90vw]'
 	};
 
 	// Auto-focus management
@@ -106,7 +106,7 @@
 		<div
 			class="bg-white dark:bg-slate-900 rounded-lg md:rounded-xl border border-slate-200 dark:border-slate-800 shadow-2xl w-full {sizeClasses[
 				size
-			]} max-h-[95vh] md:max-h-[90vh] overflow-hidden flex flex-col {className}"
+			]} max-h-[calc(100dvh-1rem)] md:max-h-[calc(100dvh-2rem)] overflow-hidden flex flex-col {className}"
 			role="document"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}

package/frontend/components/common/xterm/XTerm.svelte

@@ -635,7 +635,7 @@
 <!-- Pure xterm.js terminal container -->
 <div
 	bind:this={terminalContainer}
-	class="w-full h-full overflow-hidden bg-slate-50 dark:bg-slate-900/70 {className} select-none"
+	class="w-full h-full overflow-hidden bg-white dark:bg-slate-900/70 {className} select-none"
 	style="transition: opacity 0.2s ease-in-out; user-select: text;"
 	role="textbox"
 	tabindex="0"
@@ -677,6 +677,11 @@
 		height: 100% !important;
 	}
 
+	:global(.xterm .xterm-scrollable-element) {
+		background: transparent !important;
+		height: 100% !important;
+	}
+
 	:global(.xterm .xterm-helper-textarea) {
 		height: 100% !important;
 	}

package/frontend/components/git/ConflictResolver.svelte

@@ -26,7 +26,7 @@
 {#if isOpen}
 	<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" onclick={onClose}>
 		<div
-			class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[85vh] flex flex-col"
+			class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 my-4 max-h-[calc(100dvh-2rem)] flex flex-col"
 			onclick={(e) => e.stopPropagation()}
 		>
 			<!-- Header -->

package/frontend/components/git/GitModal.svelte

@@ -13,7 +13,7 @@
 	let gitPanelRef: any = $state();
 </script>
 
-<Modal {isOpen} {onClose} size="full" className="!max-h-[85vh] !max-w-[95vw] md:!max-w-5xl">
+<Modal {isOpen} {onClose} size="full" className="!max-h-[85dvh] !max-w-[95vw] md:!max-w-5xl">
 	{#snippet header()}
 		<div class="flex items-center justify-between px-4 py-3 md:px-6 md:py-4">
 			<div class="flex items-center gap-2.5">
@@ -73,7 +73,7 @@
 	{/snippet}
 
 	{#snippet children()}
-		<div class="h-[65vh] -mx-4 -my-6 md:-mx-6">
+		<div class="h-[65dvh] -mx-4 -my-6 md:-mx-6">
 			<GitPanel bind:this={gitPanelRef} />
 		</div>
 	{/snippet}

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

@@ -223,6 +223,12 @@
 	let previousUrl = '';
 	$effect(() => {
 		if (!url || url === previousUrl) return;
+		// Ignore browser-internal error pages (e.g. DNS failure) — they are not real URLs
+		// and should never trigger a new navigation attempt.
+		if (url.startsWith('chrome-error://') || url.startsWith('chrome://')) {
+			previousUrl = url;
+			return;
+		}
 		if (mcpLaunchInProgress) {
 			previousUrl = url;
 			urlInput = url;
@@ -306,7 +312,7 @@
 
 	// Initialize URL input
 	$effect(() => {
-		if (url && !url.startsWith('http://') && !url.startsWith('https://')) {
+		if (url && !url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('file://')) {
 			url = 'http://' + url;
 		}
 		if (url && !urlInput) {
@@ -319,7 +325,7 @@
 		if (!urlInput.trim()) return;
 
 		let processedUrl = urlInput.trim();
-		if (!processedUrl.startsWith('http://') && !processedUrl.startsWith('https://')) {
+		if (!processedUrl.startsWith('http://') && !processedUrl.startsWith('https://') && !processedUrl.startsWith('file://')) {
 			processedUrl = 'http://' + processedUrl;
 		}
 
@@ -447,7 +453,8 @@
 		},
 		getSessionInfo: () => sessionInfo,
 		getIsStreamReady: () => isStreamReady,
-		getErrorMessage: () => errorMessage
+		getErrorMessage: () => errorMessage,
+		getIsMcpControlled: () => isCurrentTabMcpControlled()
 	};
 </script>
 

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

@@ -26,6 +26,7 @@
 		onStatsUpdate = $bindable<(stats: BrowserWebCodecsStreamStats | null) => void>(() => {}),
 		onRequestScreencastRefresh = $bindable<() => void>(() => {}), // Called when stream is stuck
 		touchMode = $bindable<'scroll' | 'cursor'>('scroll'),
+		touchTarget = undefined as HTMLElement | undefined, // Container element for touch events
 		onTouchCursorUpdate = $bindable<(pos: { x: number; y: number; visible: boolean; clicking?: boolean }) => void>(() => {})
 	} = $props();
 
@@ -566,12 +567,16 @@
 						debug.log('webcodecs', 'Streaming started successfully');
 					} else {
 						// Service handles errors internally and returns false.
-						// Never retry here — retrying immediately creates a stop/start loop.
-						debug.warn('webcodecs', 'Streaming start returned false, stopping retries');
+						// Retry after a delay — the peer/offer may need more time to initialize.
+						retries++;
+						if (retries < maxRetries) {
+							debug.warn('webcodecs', `Streaming start returned false, retrying in ${retryDelay * retries}ms (${retries}/${maxRetries})`);
+							await new Promise(resolve => setTimeout(resolve, retryDelay * retries));
+							continue;
+						}
+						debug.error('webcodecs', 'Streaming start failed after all retries');
+						break;
 					}
-					// Always break after the service returns (success or failure).
-					// The service catches all exceptions internally, so the catch block
-					// below never runs, making retries/retryDelay dead code anyway.
 					break;
 				} catch (error: any) {
 					// This block only runs if the service unexpectedly throws.
@@ -1002,20 +1007,6 @@
 				canvas.focus();
 			});
 
-			const touchStartHandler = (e: TouchEvent) => handleTouchStart(e, canvas);
-			let lastTouchMoveTime = 0;
-			const touchMoveHandler = (e: TouchEvent) => {
-				const now = Date.now();
-				if (now - lastTouchMoveTime >= 16) {
-					lastTouchMoveTime = now;
-					handleTouchMove(e, canvas);
-				}
-			};
-			const touchEndHandler = (e: TouchEvent) => handleTouchEnd(e, canvas);
-
-			canvas.addEventListener('touchstart', touchStartHandler, { passive: false });
-			canvas.addEventListener('touchmove', touchMoveHandler, { passive: false });
-			canvas.addEventListener('touchend', touchEndHandler, { passive: false });
 
 			const handleMouseLeave = () => {
 				if (isMouseDown) {
@@ -1045,13 +1036,38 @@
 				canvas.removeEventListener('mousedown', (e) => handleCanvasMouseDown(e, canvas));
 				canvas.removeEventListener('mouseup', (e) => handleCanvasMouseUp(e, canvas));
 				canvas.removeEventListener('mousemove', handleMouseMove);
-				canvas.removeEventListener('touchstart', touchStartHandler);
-				canvas.removeEventListener('touchmove', touchMoveHandler);
-				canvas.removeEventListener('touchend', touchEndHandler);
 			};
 		}
 	});
 
+	// Attach touch events to touchTarget (Container's previewContainer) instead of canvas
+	$effect(() => {
+		if (!touchTarget || !canvasElement) return;
+
+		const canvas = canvasElement;
+		let lastTouchMoveTime = 0;
+
+		const touchStartHandler = (e: TouchEvent) => handleTouchStart(e, canvas);
+		const touchMoveHandler = (e: TouchEvent) => {
+			const now = Date.now();
+			if (now - lastTouchMoveTime >= 16) {
+				lastTouchMoveTime = now;
+				handleTouchMove(e, canvas);
+			}
+		};
+		const touchEndHandler = (e: TouchEvent) => handleTouchEnd(e, canvas);
+
+		touchTarget.addEventListener('touchstart', touchStartHandler, { passive: false });
+		touchTarget.addEventListener('touchmove', touchMoveHandler, { passive: false });
+		touchTarget.addEventListener('touchend', touchEndHandler, { passive: false });
+
+		return () => {
+			touchTarget.removeEventListener('touchstart', touchStartHandler);
+			touchTarget.removeEventListener('touchmove', touchMoveHandler);
+			touchTarget.removeEventListener('touchend', touchEndHandler);
+		};
+	});
+
 	// Convert canvas coordinates to viewport (screen) coordinates for VirtualCursor display
 	function canvasToScreen(cx: number, cy: number): { x: number; y: number } {
 		if (!canvasElement) return { x: 0, y: 0 };
@@ -1391,7 +1407,8 @@
 			getStats: () => webCodecsService?.getStats() ?? null,
 			getLatency: () => latencyMs,
 			// Navigation handling
-			notifyNavigationComplete
+			notifyNavigationComplete,
+			freezeForSpaNavigation: () => webCodecsService?.freezeForSpaNavigation()
 		};
 	});
 

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

@@ -70,10 +70,11 @@
 	let showNavigationOverlay = $state(false);
 	let overlayHideTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	// Debounced navigation overlay - similar to progress bar logic
-	// Shows immediately when navigating/reconnecting, hides with delay to prevent flicker
+	// Debounced navigation overlay - only for user-initiated toolbar navigations
+	// In-browser navigations (link clicks) only show progress bar, not this overlay
+	// This makes the preview behave like a real browser
 	$effect(() => {
-		const shouldShowOverlay = (isNavigating || isReconnecting) && isStreamReady;
+		const shouldShowOverlay = isNavigating && isStreamReady;
 
 		// Cancel any pending hide when overlay should show
 		if (shouldShowOverlay && overlayHideTimeout) {
@@ -385,6 +386,7 @@
 						bind:isNavigating
 						bind:isReconnecting
 						bind:touchMode
+						touchTarget={previewContainer}
 						onInteraction={handleCanvasInteraction}
 						onCursorUpdate={handleCursorUpdate}
 						onFrameUpdate={handleFrameUpdate}
@@ -408,7 +410,8 @@
 				</div>
 			{/if}
 
-			<!-- Navigation Overlay: Semi-transparent overlay during navigation/reconnect (shows last frame behind) -->
+			<!-- Navigation Overlay: Only for user-initiated toolbar navigations (Go button/Enter) -->
+			<!-- In-browser link clicks only show the progress bar, not this overlay -->
 			{#if showNavigationOverlay}
 				<div
 					class="absolute inset-0 bg-white/60 dark:bg-slate-800/60 backdrop-blur-[2px] flex items-center justify-center z-10"
@@ -416,7 +419,7 @@
 					<div class="flex flex-col items-center gap-2">
 						<Icon name="lucide:loader-circle" class="w-8 h-8 animate-spin text-violet-600" />
 						<div class="text-slate-600 dark:text-slate-300 text-center">
-							<div class="text-sm font-medium">Loading preview...</div>
+							<div class="text-sm font-medium">Navigating...</div>
 						</div>
 					</div>
 				</div>

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

@@ -163,6 +163,21 @@
 		progressPercent = 0;
 	}
 
+	// Reset progress bar immediately when active tab changes
+	// This prevents stale progress from a previous tab leaking into the new tab
+	let previousActiveTabId = $state<string | null>(null);
+	$effect(() => {
+		if (activeTabId !== previousActiveTabId) {
+			previousActiveTabId = activeTabId;
+			// Immediately stop any running progress animation and clear pending timeouts
+			stopProgress();
+			if (progressCompleteTimeout) {
+				clearTimeout(progressCompleteTimeout);
+				progressCompleteTimeout = null;
+			}
+		}
+	});
+
 	// Watch loading states to control progress bar
 	// Progress bar should be active during:
 	// 1. isLaunchingBrowser: API call to launch browser
@@ -214,7 +229,7 @@
 </script>
 
 <!-- Preview Toolbar -->
-<div class="relative bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
+<div class="relative bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
 	<!-- Tabs bar (Git-style underline tabs) — separated with its own border-bottom -->
 	{#if tabs.length > 0}
 		<div class="relative flex items-center overflow-x-auto border-b border-slate-200 dark:border-slate-700">

package/frontend/components/preview/browser/core/coordinator.svelte.ts

@@ -771,6 +771,19 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 					debug.warn('preview', `Tab not found for sessionId: ${data.sessionId}`);
 				}
 			});
+
+			// Listen for SPA navigation events (pushState/replaceState)
+			ws.on('preview:browser-navigation-spa', (data: { sessionId: string; type: string; url: string; timestamp: number }) => {
+				debug.log('preview', `🔄 SPA navigation event received: ${data.sessionId} → ${data.url}`);
+
+				const tab = tabManager.tabs.find(t => t.sessionId === data.sessionId);
+				if (tab) {
+					streamHandler.handleStreamMessage({
+						type: 'navigation-spa',
+						data: { url: data.url }
+					}, tab.id);
+				}
+			});
 		});
 	}
 

package/frontend/components/preview/browser/core/stream-handler.svelte.ts

@@ -73,6 +73,10 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 				handleNavigation(targetTabId, message.data, tab);
 				break;
 
+			case 'navigation-spa':
+				handleNavigationSpa(targetTabId, message.data, tab);
+				break;
+
 			case 'new-window':
 				handleNewWindow(message.data);
 				break;
@@ -172,13 +176,14 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 	function handleNavigationLoading(tabId: string, data: any) {
 		if (data && data.url) {
 			const tab = tabManager.getTab(tabId);
-			// isNavigating: true if session already exists (navigating within same session)
-			// isNavigating: false if no session yet (initial load)
-			const isNavigating = tab?.sessionId ? true : false;
 
+			// Only set isLoading (progress bar) for in-browser navigations.
+			// Do NOT set isNavigating here — that flag is reserved for user-initiated
+			// toolbar navigations (Go button/Enter), which is set in navigateBrowserForTab().
+			// This prevents the "Loading preview..." overlay from showing on link clicks
+			// within the browser, making it behave like a real browser.
 			tabManager.updateTab(tabId, {
 				isLoading: true,
-				isNavigating,
 				url: data.url,
 				title: getTabTitle(data.url)
 			});
@@ -216,6 +221,34 @@ export function createStreamMessageHandler(config: StreamMessageHandlerConfig) {
 		}
 	}
 
+	function handleNavigationSpa(tabId: string, data: any, tab: PreviewTab) {
+		if (data && data.url && data.url !== tab.url) {
+			debug.log('preview', `🔄 SPA navigation for tab ${tabId}: ${tab.url} → ${data.url}`);
+
+			// Freeze canvas briefly to avoid showing white flash during SPA transition
+			// The last rendered frame is held while the DOM settles
+			tab.canvasAPI?.freezeForSpaNavigation?.();
+
+			// SPA navigation: update URL/title and reset any loading states.
+			// A preceding navigation-loading event may have set isLoading=true
+			// (e.g., if the browser started a document request before the SPA
+			// router intercepted it). Reset those states here since the SPA
+			// handled the navigation without a full page reload.
+			// Video streaming continues uninterrupted since page context is unchanged.
+			tabManager.updateTab(tabId, {
+				url: data.url,
+				title: getTabTitle(data.url),
+				isLoading: false,
+				isNavigating: false
+			});
+
+			// Update parent if this is the active tab
+			if (tabId === tabManager.activeTabId && onNavigationUpdate) {
+				onNavigationUpdate(tabId, data.url);
+			}
+		}
+	}
+
 	function handleNewWindow(data: any) {
 		if (data && data.url) {
 			tabManager.createTab(data.url);

package/frontend/components/settings/SettingsModal.svelte

@@ -106,7 +106,7 @@
 			role="dialog"
 			aria-labelledby="settings-title"
 			tabindex="-1"
-			class="flex flex-col w-full max-w-225 h-[85dvh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-violet-500/20 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-dvh max-md:max-h-dvh max-md:rounded-none"
+			class="flex flex-col w-full max-w-225 h-[85dvh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-dvh max-md:max-h-dvh max-md:rounded-none"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 			in:scale={{ duration: 250, easing: cubicOut, start: 0.95 }}

package/frontend/components/settings/general/DataManagementSettings.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
-	import { initializeProjects, projectState } from '$frontend/stores/core/projects.svelte';
-	import { initializeStore } from '$frontend/stores/core/app.svelte';
-	import { sessionState } from '$frontend/stores/core/sessions.svelte';
 	import { addNotification } from '$frontend/stores/ui/notification.svelte';
-	import { settings, resetToDefaults } from '$frontend/stores/features/settings.svelte';
+	import { resetToDefaults } from '$frontend/stores/features/settings.svelte';
 	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
-	import { terminalStore } from '$frontend/stores/features/terminal.svelte';
 	import Icon from '../../common/display/Icon.svelte';
 	import { debug } from '$shared/utils/logger';
 	import ws from '$frontend/utils/ws';
 
-	let isExporting = $state(false);
 	let isClearing = $state(false);
 
 	async function clearData() {
@@ -26,82 +21,26 @@
 		if (confirmed) {
 			isClearing = true;
 			try {
-				localStorage.clear();
-				sessionStorage.clear();
-
 				const response = await ws.http('system:clear-data', {});
 
 				if (response.cleared) {
-					terminalStore.clearAllSessions();
-					projectState.currentProject = null;
-					await initializeProjects();
-					await initializeStore();
-					resetToDefaults();
-
-					addNotification({
-						type: 'success',
-						title: 'Data Cleared',
-						message: 'All data has been cleared successfully'
-					});
+					localStorage.clear();
+					sessionStorage.clear();
+					window.location.reload();
 				}
 			} catch (error) {
 				debug.error('settings', 'Error clearing data:', error);
+				isClearing = false;
 				addNotification({
 					type: 'error',
 					title: 'Clear Data Error',
 					message: 'Failed to clear all data',
 					duration: 4000
 				});
-			} finally {
-				isClearing = false;
 			}
 		}
 	}
 
-	async function exportData() {
-		isExporting = true;
-		try {
-			const [projects, sessions, messages] = await Promise.all([
-				ws.http('projects:list', {}),
-				ws.http('sessions:list', {}),
-				ws.http('messages:list', { session_id: '', include_all: true })
-			]);
-
-			const data = {
-				projects: projects || projectState.projects,
-				sessions: sessions || sessionState.sessions,
-				messages: messages || sessionState.messages,
-				settings: settings,
-				exportedAt: new Date().toISOString(),
-				version: '1.0'
-			};
-
-			const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-			const url = URL.createObjectURL(blob);
-			const a = document.createElement('a');
-			a.href = url;
-			a.download = `clopen-data-${new Date().toISOString().split('T')[0]}.json`;
-			a.click();
-			URL.revokeObjectURL(url);
-
-			addNotification({
-				type: 'success',
-				title: 'Export Complete',
-				message: 'Your data has been exported successfully'
-			});
-		} catch (error) {
-			debug.error('settings', 'Export error:', error);
-			addNotification({
-				type: 'error',
-				title: 'Export Error',
-				message: 'Failed to export data',
-				duration: 4000
-			});
-		} finally {
-			isExporting = false;
-		}
-	}
-
 	async function resetSettings() {
 		const confirmed = await showConfirm({
 			title: 'Reset Settings',

package/frontend/components/terminal/Terminal.svelte

@@ -5,9 +5,7 @@
 <script lang="ts">
 	import { terminalStore } from '$frontend/stores/features/terminal.svelte';
 	import { projectState } from '$frontend/stores/core/projects.svelte';
-	import { getShortcutLabels } from '$frontend/utils/platform';
 	import TerminalTabs from './TerminalTabs.svelte';
-	import LoadingSpinner from '../common/feedback/LoadingSpinner.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import XTerm from '$frontend/components/common/xterm/XTerm.svelte';
 
@@ -26,9 +24,6 @@
 	let isCancelling = $state(false);
 	let terminalContainer: HTMLDivElement | undefined = $state();
 
-	// Get platform-specific shortcut labels
-	const shortcuts = $derived(getShortcutLabels());
-
 	// Initialize terminal only once when component mounts
 	let isInitialized = false;
 	$effect(() => {
@@ -258,7 +253,7 @@
 	aria-label="Terminal application">
 
 	<!-- Terminal Header with Tabs -->
-	<div class="flex-shrink-0 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
+	<div class="flex-shrink-0 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
 		<!-- Terminal Tabs -->
 		<TerminalTabs
 			sessions={terminalStore.sessions}
@@ -292,29 +287,6 @@
 		</div>
 	{/if}
 
-	<!-- Terminal status bar -->
-	<div class="flex-shrink-0 px-2 py-0.5 bg-slate-100 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 text-3xs text-slate-500 dark:text-slate-500 font-mono">
-		<div class="flex items-center justify-between">
-			<div class="flex items-center space-x-3">
-				<span class="hidden sm:inline"><kbd class="px-1 py-0.5 bg-slate-200 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded text-3xs text-slate-700 dark:text-slate-300">↑↓</kbd> History</span>
-				<span class="hidden md:inline"><kbd class="px-1 py-0.5 bg-slate-200 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded text-3xs text-slate-700 dark:text-slate-300">Ctrl+L</kbd> Clear</span>
-				<span class="hidden sm:inline"><kbd class="px-1 py-0.5 bg-slate-200 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded text-3xs text-slate-700 dark:text-slate-300">{shortcuts.cancel}</kbd> Interrupt
-					{#if isCancelling}
-						<span class="animate-pulse ml-1">(cancelling...)</span>
-					{/if}
-				</span>
-			</div>
-			<div class="flex items-center space-x-1.5">
-				{#if hasActiveProject}
-					<span class="text-emerald-500 text-xs">●</span>
-					<span class="hidden sm:inline">Ready</span>
-				{:else}
-					<span class="text-amber-500 text-xs">●</span>
-					<span class="hidden sm:inline">No Project</span>
-				{/if}
-			</div>
-		</div>
-	</div>
 </div>
 
 <style>

package/frontend/components/tunnel/TunnelInactive.svelte

@@ -4,7 +4,7 @@
 	import Modal from '$frontend/components/common/overlay/Modal.svelte';
 	import Checkbox from '$frontend/components/common/form/Checkbox.svelte';
 
-	let port = $state(3000);
+	let port = $state<number | null>(null);
 	let autoStopMinutes = $state(60);
 	let showWarning = $state(false);
 	let dontShowWarningAgain = $state(false);
@@ -20,6 +20,8 @@
 	);
 
 	async function handleStartTunnel() {
+		if (!port) return;
+
 		// Check if tunnel already exists for this port
 		if (tunnelStore.getTunnel(port)) {
 			warningMessage = `Tunnel already active on port ${port}`;
@@ -44,9 +46,9 @@
 	}
 
 	// Get loading and progress state for current port
-	const isLoading = $derived(tunnelStore.isLoading(port));
-	const progress = $derived(tunnelStore.getProgress(port));
-	const error = $derived(tunnelStore.getError(port));
+	const isLoading = $derived(tunnelStore.isLoading(port ?? 0));
+	const progress = $derived(tunnelStore.getProgress(port ?? 0));
+	const error = $derived(tunnelStore.getError(port ?? 0));
 
 	function openWarningModal() {
 		// Clear any previous warning messages
@@ -151,7 +153,7 @@
 		<!-- Start Button -->
 		<button
 			onclick={openWarningModal}
-			disabled={isLoading}
+			disabled={isLoading || !port}
 			class="inline-flex items-center justify-center font-semibold transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed w-full px-3 md:px-4 py-2.5 text-sm rounded-lg bg-violet-600 hover:bg-violet-700 text-white gap-2"
 		>
 			{#if isLoading}

package/frontend/components/workspace/DesktopNavigator.svelte

@@ -168,7 +168,7 @@
 	aria-label="Project Navigator"
 >
 	<nav
-		class="flex flex-col h-full bg-slate-50 dark:bg-slate-900/95 transition-all duration-200 {isCollapsed
+		class="flex flex-col h-full bg-white dark:bg-slate-900/95 transition-all duration-200 {isCollapsed
 			? 'items-center'
 			: ''}"
 	>