@myrialabs/clopen 0.2.7 → 0.2.9

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'
 			: ''}"
 	>

package/frontend/components/workspace/PanelHeader.svelte

@@ -47,6 +47,9 @@
 	// Mobile detection
 	let isMobile = $state(false);
 
+	// Touchscreen detection
+	let isTouchDevice = $state(false);
+
 	// Chat session users (other users in the same chat session, excluding self)
 	const chatSessionUsers = $derived.by(() => {
 		if (panelId !== 'chat') return [];
@@ -142,6 +145,7 @@
 	onMount(() => {
 		handleResize();
 		if (browser) {
+			isTouchDevice = navigator.maxTouchPoints > 0 || 'ontouchstart' in window;
 			window.addEventListener('resize', handleResize);
 		}
 	});
@@ -383,7 +387,7 @@
 				{/if} -->
 
 				<!-- Device size dropdown -->
-				<div class="relative {isMobile ? '' : 'mr-1.5'}">
+				<div class="relative">
 					<button
 						type="button"
 						class="flex items-center justify-center gap-1.5 {isMobile ? 'px-2 h-9' : 'px-1 h-6'} bg-transparent border-none rounded-md text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
@@ -481,20 +485,22 @@
 					{/if}
 				</div>
 
-				<!-- Touch mode toggle (scroll ↔ trackpad cursor) -->
-				<button
-					type="button"
-					class="flex items-center justify-center gap-1.5 {isMobile ? 'px-2 h-9' : 'px-1 h-6'} bg-transparent border-none rounded-md cursor-pointer transition-all duration-150 hover:bg-violet-500/10
-						{previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'text-violet-600 dark:text-violet-400' : 'text-slate-500 hover:text-slate-900 dark:hover:text-slate-100'}"
-					onclick={() => {
-						const current = previewPanelRef?.panelActions?.getTouchMode() || 'scroll';
-						previewPanelRef?.panelActions?.setTouchMode(current === 'scroll' ? 'cursor' : 'scroll');
-					}}
-					title={previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'Trackpad mode: 1-finger moves cursor, tap=click, 2-finger scroll/right-click' : 'Scroll mode: touch scrolls the page (tap to click)'}
-				>
-					<Icon name={previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'lucide:mouse-pointer-2' : 'lucide:pointer'} class={isMobile ? 'w-4.5 h-4.5' : 'w-4 h-4'} />
-					<span class="text-xs font-medium">{previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'Cursor' : 'Touch'}</span>
-				</button>
+				<!-- Touch mode toggle (scroll ↔ trackpad cursor) — only shown on touchscreen devices -->
+				{#if isTouchDevice}
+					<button
+						type="button"
+						class="flex items-center justify-center gap-1.5 {isMobile ? 'px-2 h-9' : 'px-1 h-6'} bg-transparent border-none rounded-md cursor-pointer transition-all duration-150 hover:bg-violet-500/10
+							{previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'text-violet-600 dark:text-violet-400' : 'text-slate-500 hover:text-slate-900 dark:hover:text-slate-100'}"
+						onclick={() => {
+							const current = previewPanelRef?.panelActions?.getTouchMode() || 'scroll';
+							previewPanelRef?.panelActions?.setTouchMode(current === 'scroll' ? 'cursor' : 'scroll');
+						}}
+						title={previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'Trackpad mode: 1-finger moves cursor, tap=click, 2-finger scroll/right-click' : 'Scroll mode: touch scrolls the page (tap to click)'}
+					>
+						<Icon name={previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'lucide:mouse-pointer-2' : 'lucide:pointer'} class={isMobile ? 'w-4.5 h-4.5' : 'w-4 h-4'} />
+						<span class="text-xs font-medium">{previewPanelRef?.panelActions?.getTouchMode() === 'cursor' ? 'Cursor' : 'Touch'}</span>
+					</button>
+				{/if}
 
 				<!-- Rotation toggle -->
 				<button
@@ -510,7 +516,7 @@
 				</button>
 
 				<!-- Scale info badge -->
-				<div class="flex items-center gap-1.5 {isMobile ? 'px-2.5 h-9 bg-transparent' : 'px-2 h-6 bg-slate-100/60 dark:bg-slate-800/40'} rounded-md text-xs font-medium text-slate-500">
+				<div class="flex items-center gap-1.5 {isMobile ? 'px-1 h-9 bg-transparent' : 'px-1 h-6 bg-slate-100/60 dark:bg-slate-800/40'} rounded-md text-xs font-medium text-slate-500">
 					<Icon name="lucide:move-diagonal" class={isMobile ? 'w-4 h-4' : 'w-3.5 h-3.5'} />
 					<span>{Math.round((previewPanelRef?.panelActions?.getScale() || 1) * 100)}%</span>
 				</div>

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/frontend/services/project/status.service.ts

@@ -7,7 +7,7 @@
  */
 
 import { getOrCreateAnonymousUser, type AnonymousUser } from '$shared/utils/anonymous-user';
-import ws from '$frontend/utils/ws';
+import ws, { onWsReconnect } from '$frontend/utils/ws';
 import { debug } from '$shared/utils/logger';
 
 export interface ProjectStatus {
@@ -44,6 +44,16 @@ class ProjectStatusService {
     this.currentUser = await getOrCreateAnonymousUser();
     debug.log('project', 'Initialized with user:', this.currentUser?.name);
 
+    // Re-join project presence after WebSocket reconnection.
+    // Without this, the new connection loses presence tracking and
+    // panels (Git, Terminal, Preview, etc.) miss status updates.
+    onWsReconnect(() => {
+      if (this.currentProjectId && this.currentUser) {
+        ws.emit('projects:join', { userName: this.currentUser.name });
+        debug.log('project', 'Re-joined project presence after reconnection');
+      }
+    });
+
     this.unsubscribe = ws.on('projects:presence-updated', (data) => {
       try {
         if (data.type === 'presence-updated' && data.data) {

package/frontend/stores/core/sessions.svelte.ts

@@ -10,7 +10,7 @@
 import type { ChatSession, SDKMessageFormatter } from '$shared/types/database/schema';
 import type { SDKMessage } from '$shared/types/messaging';
 import { buildMetadataFromTransport } from '$shared/utils/message-formatter';
-import ws from '$frontend/utils/ws';
+import ws, { onWsReconnect } from '$frontend/utils/ws';
 import { projectState } from './projects.svelte';
 import { setupEditModeListener, restoreEditMode } from '$frontend/stores/ui/edit-mode.svelte';
 import { markSessionUnread, markSessionRead, appState } from '$frontend/stores/core/app.svelte';
@@ -376,6 +376,16 @@ export async function reloadSessionsForProject(): Promise<string | null> {
  * automatically switch to the new shared session.
  */
 function setupCollaborativeListeners() {
+	// Re-join chat session room after WebSocket reconnection.
+	// Without this, the new connection is not in the session room and
+	// misses all chat events (stream, partial, complete, input sync, etc.).
+	onWsReconnect(() => {
+		if (sessionState.currentSession?.id) {
+			ws.emit('chat:join-session', { chatSessionId: sessionState.currentSession.id });
+			debug.log('session', 'Re-joined chat session room after reconnection:', sessionState.currentSession.id);
+		}
+	});
+
 	// Listen for new session available notifications from other users.
 	// Does NOT auto-switch — adds session to list and shows notification.
 	ws.on('sessions:session-available', async (data: { session: ChatSession }) => {

package/frontend/stores/features/terminal.svelte.ts

@@ -17,6 +17,7 @@ interface TerminalState {
 	executingSessionIds: Set<string>; // Track multiple executing sessions
 	sessionExecutionStates: Map<string, boolean>; // Track execution state per session
 	lineBuffers: Map<string, string>; // Line buffering for chunked PTY output
+	flushTimers: Map<string, ReturnType<typeof setTimeout>>; // Auto-flush timers for buffered output
 }
 
 // Terminal store state
@@ -28,7 +29,8 @@ const terminalState = $state<TerminalState>({
 	lastCommandWasCancelled: false,
 	executingSessionIds: new Set(),
 	sessionExecutionStates: new Map(),
-	lineBuffers: new Map()
+	lineBuffers: new Map(),
+	flushTimers: new Map()
 });
 
 // Computed properties
@@ -214,8 +216,13 @@ export const terminalStore = {
 			debug.error('terminal', `🔴 [closeSession] Failed to remove from project context:`, error);
 		}
 
-		// Clear any buffered content for this session
+		// Clear any buffered content and flush timers for this session
 		terminalState.lineBuffers.delete(sessionId);
+		const closeFlushTimer = terminalState.flushTimers.get(sessionId);
+		if (closeFlushTimer) {
+			clearTimeout(closeFlushTimer);
+			terminalState.flushTimers.delete(sessionId);
+		}
 
 		// Remove execution states for this session
 		terminalState.sessionExecutionStates.delete(sessionId);
@@ -285,6 +292,13 @@ export const terminalStore = {
 
 		// Flush any buffered content before cancel (if was executing)
 		if (wasExecuting) {
+			// Clear flush timer first
+			const cancelFlushTimer = terminalState.flushTimers.get(activeSession.id);
+			if (cancelFlushTimer) {
+				clearTimeout(cancelFlushTimer);
+				terminalState.flushTimers.delete(activeSession.id);
+			}
+
 			const remainingBuffer = terminalState.lineBuffers.get(activeSession.id);
 			if (remainingBuffer && remainingBuffer.length > 0) {
 				this.addLineToSession(activeSession.id, {
@@ -353,31 +367,41 @@ export const terminalStore = {
 
 	// Process buffered output to handle chunked PTY data properly
 	processBufferedOutput(sessionId: string, content: string, type: 'output' | 'error'): void {
-		// Buffer incomplete lines to avoid splitting words like "Reply" into "R" and "eply"
+		// Clear any pending flush timer for this session
+		const existingTimer = terminalState.flushTimers.get(sessionId);
+		if (existingTimer) {
+			clearTimeout(existingTimer);
+			terminalState.flushTimers.delete(sessionId);
+		}
+
 		let buffer = terminalState.lineBuffers.get(sessionId) || '';
 		buffer += content;
-		
-		// Only send complete chunks to avoid word splitting
-		// If buffer ends with a partial ANSI sequence or in middle of a word, wait for more
-		if (buffer.length < 2) {
-			// Very short buffer, likely incomplete - wait for more
-			terminalState.lineBuffers.set(sessionId, buffer);
-			return;
-		}
-		
+
 		// Check if we're in the middle of an ANSI escape sequence
 		const lastEscIndex = buffer.lastIndexOf('\x1b');
 		if (lastEscIndex >= 0 && lastEscIndex > buffer.length - 10) {
-			// Might be in middle of escape sequence, check if it's complete
 			const remaining = buffer.substring(lastEscIndex);
 			if (!/^(\x1b\[[0-9;]*[a-zA-Z]|\x1b\[\?[0-9]+[lh])/.test(remaining)) {
-				// Incomplete escape sequence, wait for more
+				// Incomplete escape sequence - hold briefly, auto-flush after 8ms
 				terminalState.lineBuffers.set(sessionId, buffer);
+				const flushTimer = setTimeout(() => {
+					terminalState.flushTimers.delete(sessionId);
+					const pending = terminalState.lineBuffers.get(sessionId);
+					if (pending && pending.length > 0) {
+						this.addLineToSession(sessionId, {
+							content: pending,
+							type: type,
+							timestamp: new Date()
+						});
+						terminalState.lineBuffers.set(sessionId, '');
+					}
+				}, 8);
+				terminalState.flushTimers.set(sessionId, flushTimer);
 				return;
 			}
 		}
-		
-		// Send the buffer and clear it
+
+		// Flush immediately - no artificial delay for complete data
 		if (buffer.length > 0) {
 			this.addLineToSession(sessionId, {
 				content: buffer,
@@ -390,15 +414,11 @@ export const terminalStore = {
 
 	// Session Content Management
 	addLineToSession(sessionId: string, line: TerminalLine): void {
-		terminalState.sessions = terminalState.sessions.map(session => 
-			session.id === sessionId 
-				? { 
-					...session, 
-					lines: [...session.lines, line],
-					lastUsedAt: new Date()
-				}
-				: session
-		);
+		const session = terminalState.sessions.find(s => s.id === sessionId);
+		if (session) {
+			session.lines.push(line);
+			session.lastUsedAt = new Date();
+		}
 	},
 
 	updateSessionHistory(sessionId: string, history: string[]): void {
@@ -411,8 +431,13 @@ export const terminalStore = {
 
 
 	clearSession(sessionId: string): void {
-		// Clear any buffered content for this session
+		// Clear any buffered content and flush timers for this session
 		terminalState.lineBuffers.delete(sessionId);
+		const clearFlushTimer = terminalState.flushTimers.get(sessionId);
+		if (clearFlushTimer) {
+			clearTimeout(clearFlushTimer);
+			terminalState.flushTimers.delete(sessionId);
+		}
 		
 		// CRITICAL FIX: Actually clear the session lines history
 		// This ensures when switching tabs, the cleared terminal stays clear
@@ -600,6 +625,11 @@ export const terminalStore = {
 	 */
 	removeSessionFromStore(sessionId: string): void {
 		terminalState.lineBuffers.delete(sessionId);
+		const removeFlushTimer = terminalState.flushTimers.get(sessionId);
+		if (removeFlushTimer) {
+			clearTimeout(removeFlushTimer);
+			terminalState.flushTimers.delete(sessionId);
+		}
 		terminalState.sessionExecutionStates.delete(sessionId);
 		terminalState.executingSessionIds.delete(sessionId);
 		terminalState.sessions = terminalState.sessions.filter(s => s.id !== sessionId);

package/frontend/stores/ui/theme.svelte.ts

@@ -96,7 +96,7 @@ function updateThemeColor(mode: 'light' | 'dark') {
 	}
 	
 	// Set appropriate theme color
-	const themeColor = mode === 'dark' ? '#0a0a0a' : '#ffffff';
+	const themeColor = mode === 'dark' ? '#0e172b' : '#ffffff';
 	metaThemeColor.setAttribute('content', themeColor);
 }
 

package/frontend/utils/ws.ts

@@ -7,6 +7,7 @@
 import { WSClient } from '$shared/utils/ws-client';
 import type { WSAPI } from '$backend/ws';
 import { setConnectionStatus } from '$frontend/stores/ui/connection.svelte';
+import { debug } from '$shared/utils/logger';
 
 /**
  * Get WebSocket URL based on environment
@@ -18,6 +19,28 @@ function getWebSocketUrl(): string {
 	return `${protocol}//${host}/ws`;
 }
 
+// ============================================================================
+// Reconnect Handler Registry
+// ============================================================================
+
+/** Handlers to run after WebSocket reconnection (re-join rooms, restore subscriptions) */
+const reconnectHandlers = new Set<() => void>();
+
+/**
+ * Register a handler to run after WebSocket reconnection.
+ * Use this to re-join rooms (chat:join-session, projects:join) and
+ * restore subscriptions that are lost when the connection drops.
+ * Returns an unsubscribe function.
+ */
+export function onWsReconnect(handler: () => void): () => void {
+	reconnectHandlers.add(handler);
+	return () => { reconnectHandlers.delete(handler); };
+}
+
+// ============================================================================
+// WebSocket Client
+// ============================================================================
+
 const ws = new WSClient<WSAPI>(getWebSocketUrl(), {
 	autoReconnect: true,
 	maxReconnectAttempts: 0, // Infinite reconnect
@@ -25,6 +48,16 @@ const ws = new WSClient<WSAPI>(getWebSocketUrl(), {
 	maxReconnectDelay: 30000,
 	onStatusChange: (status, reconnectAttempts) => {
 		setConnectionStatus(status, reconnectAttempts);
+	},
+	onReconnect: () => {
+		debug.log('websocket', `Running ${reconnectHandlers.size} reconnect handler(s)`);
+		for (const handler of reconnectHandlers) {
+			try {
+				handler();
+			} catch (err) {
+				debug.error('websocket', 'Reconnect handler error:', err);
+			}
+		}
 	}
 });
 
@@ -45,4 +78,13 @@ window.addEventListener('beforeunload', () => {
 	ws.disconnect();
 });
 
+// Force reload when page is restored from bfcache (back-forward cache).
+// After beforeunload, all WS listeners are cleared and the connection is dead.
+// A full reload ensures all state (handlers, room subscriptions) is re-initialized.
+window.addEventListener('pageshow', (event) => {
+	if (event.persisted) {
+		window.location.reload();
+	}
+});
+
 export default ws;

package/index.html

@@ -9,7 +9,7 @@
 			name="description"
 			content="Clopen - Modern web UI for Claude Code & OpenCode with real browser preview, git management, multi-account support, file management, checkpoints, collaboration, and integrated terminal. Built with Bun and Svelte 5."
 		/>
-		<meta name="theme-color" content="#0a0a0a" />
+		<meta name="theme-color" content="#0e172b" />
 		<title>Clopen</title>
 
 		<!-- DM Sans - Local self-hosted font -->
@@ -47,7 +47,7 @@
 					// Update meta theme-color for mobile browsers
 					const metaThemeColor = document.querySelector('meta[name="theme-color"]');
 					if (metaThemeColor) {
-						metaThemeColor.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
+						metaThemeColor.setAttribute('content', isDark ? '#0e172b' : '#ffffff');
 					}
 				} catch (e) {
 					// Fallback to system preference if anything fails

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "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",