@myrialabs/clopen 0.2.8 → 0.2.9

package/backend/terminal/stream-manager.ts

@@ -4,7 +4,7 @@
  */
 
 import type { IPty } from 'bun-pty';
-import { existsSync, mkdirSync, writeFileSync, readFileSync, unlinkSync } from 'fs';
+import { existsSync, mkdirSync, readFileSync, unlinkSync } from 'fs';
 import { join } from 'path';
 
 interface TerminalStream {
@@ -129,36 +129,50 @@ class TerminalStreamManager {
     }
   }
 
+  /** Pending write flag to coalesce rapid writes */
+  private pendingWrites = new Set<string>();
+
   /**
-   * Persist output to disk for cross-project persistence
+   * Persist output to disk for cross-project persistence (async, coalesced)
    */
   private persistOutputToDisk(stream: TerminalStream): void {
-    try {
-      const cacheFile = join(this.tempDir, `${stream.sessionId}.json`);
+    // Coalesce rapid writes - only schedule one write per session per microtask
+    if (this.pendingWrites.has(stream.sessionId)) return;
+    this.pendingWrites.add(stream.sessionId);
 
-      // Only save new output (from outputStartIndex onwards)
-      // This prevents duplicating old output that was already displayed
-      const newOutput = stream.outputStartIndex !== undefined
-        ? stream.output.slice(stream.outputStartIndex)
-        : stream.output;
+    queueMicrotask(() => {
+      this.pendingWrites.delete(stream.sessionId);
 
-      const cacheData = {
-        streamId: stream.streamId,
-        sessionId: stream.sessionId,
-        command: stream.command,
-        projectId: stream.projectId,
-        projectPath: stream.projectPath,
-        workingDirectory: stream.workingDirectory,
-        startedAt: stream.startedAt,
-        status: stream.status,
-        output: newOutput, // Only save new output
-        outputStartIndex: stream.outputStartIndex || 0,
-        lastUpdated: new Date().toISOString()
-      };
-      writeFileSync(cacheFile, JSON.stringify(cacheData));
-    } catch (error) {
-      // Silently handle write errors
-    }
+      try {
+        const cacheFile = join(this.tempDir, `${stream.sessionId}.json`);
+
+        // Only save new output (from outputStartIndex onwards)
+        const newOutput = stream.outputStartIndex !== undefined
+          ? stream.output.slice(stream.outputStartIndex)
+          : stream.output;
+
+        const cacheData = {
+          streamId: stream.streamId,
+          sessionId: stream.sessionId,
+          command: stream.command,
+          projectId: stream.projectId,
+          projectPath: stream.projectPath,
+          workingDirectory: stream.workingDirectory,
+          startedAt: stream.startedAt,
+          status: stream.status,
+          output: newOutput,
+          outputStartIndex: stream.outputStartIndex || 0,
+          lastUpdated: new Date().toISOString()
+        };
+
+        // Use Bun.write for non-blocking async disk write
+        Bun.write(cacheFile, JSON.stringify(cacheData)).catch(() => {
+          // Silently handle write errors
+        });
+      } catch {
+        // Silently handle errors
+      }
+    });
   }
 
   /**

package/backend/ws/system/operations.ts

@@ -10,10 +10,13 @@
 import { t } from 'elysia';
 import { join } from 'node:path';
 import { readFileSync } from 'node:fs';
+import fs from 'node:fs/promises';
 import { createRouter } from '$shared/utils/ws-server';
 import { initializeDatabase, getDatabase } from '../../database';
 import { debug } from '$shared/utils/logger';
 import { ws } from '$backend/utils/ws';
+import { getClopenDir } from '$backend/utils/index';
+import { resetEnvironment } from '$backend/engine/adapters/claude/environment';
 
 /** In-memory flag: set after successful update, cleared on server restart */
 let pendingUpdate: { fromVersion: string; toVersion: string } | null = null;
@@ -163,6 +166,26 @@ export const operationsHandler = createRouter()
 
 		debug.log('server', 'Database cleared successfully');
 
+		// Delete snapshots directory
+		const clopenDir = getClopenDir();
+		const snapshotsDir = join(clopenDir, 'snapshots');
+		try {
+			await fs.rm(snapshotsDir, { recursive: true, force: true });
+			debug.log('server', 'Snapshots directory cleared');
+		} catch (err) {
+			debug.warn('server', 'Failed to clear snapshots directory:', err);
+		}
+
+		// Delete Claude config directory and reset environment state
+		const claudeDir = join(clopenDir, 'claude');
+		try {
+			await fs.rm(claudeDir, { recursive: true, force: true });
+			resetEnvironment();
+			debug.log('server', 'Claude config directory cleared');
+		} catch (err) {
+			debug.warn('server', 'Failed to clear Claude config directory:', err);
+		}
+
 		return {
 			cleared: true,
 			tablesCount: tables.length

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

@@ -50,7 +50,7 @@
 	{#if badges.length > 0}
 		<div class="flex gap-2 mt-3">
 			{#each badges as badge}
-				<div class="text-xs px-2 py-1 rounded {badge.color}">
+				<div class="text-3xs px-2 py-0.5 rounded {badge.color}">
 					{badge.text}
 				</div>
 			{/each}

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/components/Toolbar.svelte

@@ -214,7 +214,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/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'
 			: ''}"
 	>

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/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.8",
+  "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",

package/shared/utils/ws-client.ts

@@ -56,6 +56,8 @@ export interface WSClientOptions {
 	maxReconnectDelay?: number;
 	/** Callback when connection status changes */
 	onStatusChange?: (status: WSConnectionStatus, reconnectAttempts: number) => void;
+	/** Callback when WebSocket reconnects (not on initial connection) */
+	onReconnect?: () => void;
 }
 
 // ============================================================================
@@ -204,13 +206,14 @@ function decodeBinaryMessage(buffer: ArrayBuffer): { action: string; payload: an
 export class WSClient<TAPI extends { client: any; server: any }> {
 	private ws: WebSocket | null = null;
 	private url: string;
-	private options: Required<Omit<WSClientOptions, 'onStatusChange'>> & Pick<WSClientOptions, 'onStatusChange'>;
+	private options: Required<Omit<WSClientOptions, 'onStatusChange' | 'onReconnect'>> & Pick<WSClientOptions, 'onStatusChange' | 'onReconnect'>;
 	private reconnectAttempts = 0;
 	private reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
 	private listeners = new Map<string, Set<(payload: any) => void>>();
 	private messageQueue: Array<{ action: string; payload: any }> = [];
 	private isConnected = false;
 	private shouldReconnect = true;
+	private hasConnectedBefore = false;
 
 	/** Current context (synced with server) */
 	private context: {
@@ -237,7 +240,8 @@ export class WSClient<TAPI extends { client: any; server: any }> {
 			maxReconnectAttempts: options.maxReconnectAttempts ?? 5,
 			reconnectDelay: options.reconnectDelay ?? 1000,
 			maxReconnectDelay: options.maxReconnectDelay ?? 30000,
-			onStatusChange: options.onStatusChange ?? undefined
+			onStatusChange: options.onStatusChange ?? undefined,
+			onReconnect: options.onReconnect ?? undefined
 		};
 
 		this.connect();
@@ -295,7 +299,20 @@ export class WSClient<TAPI extends { client: any; server: any }> {
 					}
 				}
 
-				// Flush queued messages AFTER context is synced
+				// Fire reconnect handlers BEFORE queue flush so room
+				// subscriptions (chat:join-session, projects:join) are
+				// restored before any queued messages are sent.
+				const isReconnect = this.hasConnectedBefore;
+				this.hasConnectedBefore = true;
+				if (isReconnect) {
+					try {
+						this.options.onReconnect?.();
+					} catch (err) {
+						debug.error('websocket', 'onReconnect callback error:', err);
+					}
+				}
+
+				// Flush queued messages AFTER context + room re-joins are synced
 				while (this.messageQueue.length > 0) {
 					const msg = this.messageQueue.shift();
 					if (msg) {
@@ -303,7 +320,7 @@ export class WSClient<TAPI extends { client: any; server: any }> {
 					}
 				}
 
-				// Resolve waitUntilConnected() callers AFTER context sync + queue flush
+				// Resolve waitUntilConnected() callers AFTER everything is ready
 				for (const resolve of this.connectResolvers) {
 					resolve();
 				}

package/static/manifest.json

@@ -4,8 +4,8 @@
   "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#0f172a",
-  "theme_color": "#0f172a",
+  "background_color": "#0e172b",
+  "theme_color": "#0e172b",
   "icons": [
     {
       "src": "/favicon.svg",