@myrialabs/clopen 0.2.13 → 0.2.14

package/backend/snapshot/snapshot-service.ts

@@ -479,9 +479,6 @@ export class SnapshotService {
 			let restoredFiles = 0;
 			let skippedFiles = 0;
 
-			// Update in-memory baseline as we restore
-			const baseline = this.sessionBaselines.get(sessionId) || {};
-
 			for (const [filepath, expectedHash] of expectedState) {
 				// Check conflict resolution
 				if (conflictResolutions && conflictResolutions[filepath] === 'keep') {
@@ -509,7 +506,6 @@ export class SnapshotService {
 					// File should not exist at the target → delete it
 					try {
 						await fs.unlink(fullPath);
-						delete baseline[filepath];
 						debug.log('snapshot', `Deleted: ${filepath}`);
 						restoredFiles++;
 					} catch {
@@ -522,7 +518,6 @@ export class SnapshotService {
 						const dir = path.dirname(fullPath);
 						await fs.mkdir(dir, { recursive: true });
 						await fs.writeFile(fullPath, content);
-						baseline[filepath] = expectedHash;
 						debug.log('snapshot', `Restored: ${filepath}`);
 						restoredFiles++;
 					} catch (err) {
@@ -532,8 +527,15 @@ export class SnapshotService {
 				}
 			}
 
-			// Update in-memory baseline to reflect restored state
-			this.sessionBaselines.set(sessionId, baseline);
+			// Force re-initialize baseline from actual disk state.
+			// This is critical because:
+			// 1. Files already at expected state were skipped (baseline not updated for them)
+			// 2. After server restart, baseline starts empty — only restored files get entries
+			// 3. Files not mentioned in any snapshot are missing from the partial baseline
+			// Without this, subsequent captures would compute oldHash='' for files missing
+			// from the baseline, causing future restores to incorrectly delete those files.
+			this.sessionBaselines.delete(sessionId);
+			await this.initializeSessionBaseline(projectPath, sessionId);
 
 			debug.log('snapshot', `Restore complete: ${restoredFiles} restored, ${skippedFiles} skipped`);
 			return { restoredFiles, skippedFiles };

package/backend/ws/snapshot/timeline.ts

@@ -126,9 +126,13 @@ export const timelineHandler = createRouter()
 			const isOnActivePath = activePathIds.has(cp.id);
 			const isCurrent = cp.id === activeCheckpointId;
 
-			// Orphaned = descendant of active checkpoint in the checkpoint tree
+			// Orphaned = in the "future" relative to the current checkpoint.
+			// At initial state: ALL checkpoints are orphaned (we've gone back before any messages).
+			// Otherwise: only descendants of the active checkpoint that are not on the active path.
 			let isOrphaned = false;
-			if (activeCheckpointId && !isOnActivePath) {
+			if (isAtInitialState) {
+				isOrphaned = true;
+			} else if (activeCheckpointId && !isOnActivePath) {
 				isOrphaned = isDescendant(cp.id, activeCheckpointId, childrenMap);
 			}
 

package/bin/clopen.ts

@@ -33,6 +33,7 @@ interface CLIOptions {
 	version?: boolean;
 	update?: boolean;
 	resetPat?: boolean;
+	clearData?: boolean;
 }
 
 // Get version from package.json
@@ -46,47 +47,274 @@ function getVersion(): string {
 	}
 }
 
-// Simple loading indicator
-let loadingInterval: Timer | null = null;
-let currentMessage = '';
+// ============================================================
+// Simple single-line spinner (used for update / clear-data)
+// ============================================================
 
-async function delay(ms: number = 500) {
-	await new Promise(resolve => setTimeout(resolve, ms));
-}
+let spinnerInterval: Timer | null = null;
+let spinnerMessage = '';
 
-function updateLoading(message: string) {
-	currentMessage = message;
-	if (!loadingInterval) {
+function startSpinner(message: string) {
+	spinnerMessage = message;
+	if (!spinnerInterval) {
 		const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 		let i = 0;
-		loadingInterval = setInterval(() => {
-			// Clear line and write new message to avoid text overlap
-			process.stdout.write(`\r\x1b[K${frames[i]} ${currentMessage}`);
+		spinnerInterval = setInterval(() => {
+			process.stdout.write(`\r\x1b[K${frames[i]} ${spinnerMessage}`);
 			i = (i + 1) % frames.length;
 		}, 80);
 	}
 }
 
-function stopLoading() {
-	if (loadingInterval) {
-		clearInterval(loadingInterval);
-		loadingInterval = null;
-		process.stdout.write('\r\x1b[K'); // Clear line
+function updateSpinner(message: string) {
+	spinnerMessage = message;
+}
+
+function stopSpinner() {
+	if (spinnerInterval) {
+		clearInterval(spinnerInterval);
+		spinnerInterval = null;
+		process.stdout.write('\r\x1b[K');
+	}
+}
+
+// ============================================================
+// Multi-step progress display (used for startup sequence)
+// ============================================================
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const MAX_OUTPUT_LINES = 5;
+const OUTPUT_TRUNCATE = 72;
+
+type StepState = 'pending' | 'running' | 'done' | 'skipped' | 'error';
+
+interface ProgressStep {
+	id: string;
+	label: string;
+	activeLabel: string;
+}
+
+interface StepStatus {
+	state: StepState;
+	startTime?: number;
+	outputLines: string[];
+}
+
+const isTTY = process.stdout.isTTY === true;
+let progressSteps: ProgressStep[] = [];
+const stepStatuses = new Map<string, StepStatus>();
+let frameIdx = 0;
+let renderTimer: Timer | null = null;
+let drawnLines = 0;
+
+function stripAnsi(str: string): string {
+	return str.replace(/\x1b\[[0-9;]*[mGKHFABCDJhls]/g, '');
+}
+
+function trunc(str: string, max: number): string {
+	if (str.length <= max) return str;
+	return str.slice(0, max - 1) + '…';
+}
+
+function initProgress(steps: ProgressStep[]) {
+	progressSteps = steps;
+	stepStatuses.clear();
+	drawnLines = 0;
+	frameIdx = 0;
+	for (const s of steps) {
+		stepStatuses.set(s.id, { state: 'pending', outputLines: [] });
+	}
+	if (isTTY) {
+		process.stdout.write('\x1b[?25l'); // hide cursor
+		renderTimer = setInterval(renderProgress, 80);
+		renderProgress();
+	}
+}
+
+function renderProgress() {
+	if (!isTTY) return;
+
+	if (drawnLines > 0) {
+		process.stdout.write(`\x1b[${drawnLines}A\x1b[J`);
+	}
+
+	let output = '';
+	let lines = 0;
+
+	for (const step of progressSteps) {
+		const status = stepStatuses.get(step.id)!;
+		let icon: string;
+		let label: string;
+
+		switch (status.state) {
+			case 'pending':
+				icon = '\x1b[90m·\x1b[0m';
+				label = `\x1b[90m${step.label}\x1b[0m`;
+				break;
+			case 'running': {
+				const elapsed = Math.floor((Date.now() - (status.startTime ?? Date.now())) / 1000);
+				icon = `\x1b[36m${SPINNER_FRAMES[frameIdx]}\x1b[0m`;
+				const timer = elapsed >= 3 ? ` \x1b[90m(${elapsed}s)\x1b[0m` : '';
+				label = `${step.activeLabel}${timer}`;
+				break;
+			}
+			case 'done':
+				icon = '\x1b[32m✓\x1b[0m';
+				label = step.label;
+				break;
+			case 'skipped':
+				icon = '\x1b[90m✓\x1b[0m';
+				label = `\x1b[90m${step.label} (up to date)\x1b[0m`;
+				break;
+			case 'error':
+				icon = '\x1b[31m✗\x1b[0m';
+				label = `\x1b[31m${step.label}\x1b[0m`;
+				break;
+		}
+
+		output += `\x1b[K  ${icon} ${label}\n`;
+		lines++;
+
+		// Show last N output lines for the currently running step
+		if (status.state === 'running' && status.outputLines.length > 0) {
+			const visible = status.outputLines.slice(-MAX_OUTPUT_LINES);
+			for (const line of visible) {
+				output += `\x1b[K     \x1b[90m│ ${trunc(line, OUTPUT_TRUNCATE)}\x1b[0m\n`;
+				lines++;
+			}
+		}
+	}
+
+	process.stdout.write(output);
+	drawnLines = lines;
+	frameIdx = (frameIdx + 1) % SPINNER_FRAMES.length;
+}
+
+function stopProgress() {
+	if (renderTimer) {
+		clearInterval(renderTimer);
+		renderTimer = null;
+	}
+	if (isTTY) {
+		renderProgress(); // final render
+		process.stdout.write('\x1b[?25h'); // show cursor
+	}
+}
+
+function clearProgress() {
+	if (renderTimer) {
+		clearInterval(renderTimer);
+		renderTimer = null;
+	}
+	if (isTTY) {
+		if (drawnLines > 0) {
+			process.stdout.write(`\x1b[${drawnLines}A\x1b[J`);
+			drawnLines = 0;
+		}
+		process.stdout.write('\x1b[?25h');
+	}
+}
+
+function progressStepStart(id: string) {
+	const s = stepStatuses.get(id);
+	if (!s) return;
+	s.state = 'running';
+	s.startTime = Date.now();
+	s.outputLines = [];
+	if (!isTTY) {
+		const step = progressSteps.find(p => p.id === id);
+		process.stdout.write(`  ${step?.activeLabel ?? id}...\n`);
+	}
+}
+
+function progressStepDone(id: string) {
+	const s = stepStatuses.get(id);
+	if (!s) return;
+	s.state = 'done';
+	if (!isTTY) {
+		const step = progressSteps.find(p => p.id === id);
+		process.stdout.write(`  ✓ ${step?.label ?? id}\n`);
+	}
+}
+
+function progressStepSkip(id: string) {
+	const s = stepStatuses.get(id);
+	if (!s) return;
+	s.state = 'skipped';
+	if (!isTTY) {
+		const step = progressSteps.find(p => p.id === id);
+		process.stdout.write(`  ✓ ${step?.label ?? id} (up to date)\n`);
+	}
+}
+
+function progressStepFail(id: string) {
+	const s = stepStatuses.get(id);
+	if (!s) return;
+	s.state = 'error';
+}
+
+function progressAppendOutput(id: string, line: string) {
+	const s = stepStatuses.get(id);
+	if (!s || s.state !== 'running') return;
+	s.outputLines.push(stripAnsi(line).trim());
+}
+
+async function streamSubprocess(stream: ReadableStream<Uint8Array>, stepId: string): Promise<void> {
+	const reader = stream.getReader();
+	const decoder = new TextDecoder();
+	let buffer = '';
+	try {
+		for (;;) {
+			const { done, value } = await reader.read();
+			if (done) break;
+			buffer += decoder.decode(value, { stream: true });
+			const parts = buffer.split('\n');
+			buffer = parts.pop() ?? '';
+			for (const part of parts) {
+				const line = part.trim();
+				if (line) progressAppendOutput(stepId, line);
+			}
+		}
+		if (buffer.trim()) progressAppendOutput(stepId, buffer.trim());
+	} catch {
+		// stream closed or error — fine
+	} finally {
+		reader.releaseLock();
 	}
 }
 
+// Restore cursor on unexpected exit
+process.on('exit', () => {
+	if (renderTimer) clearInterval(renderTimer);
+	if (spinnerInterval) clearInterval(spinnerInterval);
+	if (isTTY) process.stdout.write('\x1b[?25h');
+});
+
+// ============================================================
+// Constants
+// ============================================================
+
 const __dirname = join(import.meta.dir, '..');
 const ENV_EXAMPLE = join(__dirname, '.env.example');
 const ENV_FILE = join(__dirname, '.env');
 const DIST_DIR = join(__dirname, 'dist');
 const BUILD_VERSION_FILE = join(DIST_DIR, '.build-version');
 
-// Default values
 const DEFAULT_PORT = 9141;
 const DEFAULT_HOST = 'localhost';
 const MIN_PORT = 1024;
 const MAX_PORT = 65535;
 
+const STARTUP_STEPS: ProgressStep[] = [
+	{ id: 'deps', label: 'Dependencies', activeLabel: 'Installing dependencies' },
+	{ id: 'build', label: 'Build', activeLabel: 'Building' },
+	{ id: 'server', label: 'Server', activeLabel: 'Starting server' },
+];
+
+// ============================================================
+// CLI helpers
+// ============================================================
+
 function showHelp() {
 	console.log(`
 Clopen - All-in-one web workspace for Claude Code & OpenCode
@@ -98,6 +326,7 @@ USAGE:
 COMMANDS:
   update                  Update clopen to the latest version
   reset-pat               Regenerate admin Personal Access Token
+  clear-data              Delete all projects, sessions, and settings
 
 OPTIONS:
   -p, --port <number>     Port to run the server on (default: ${DEFAULT_PORT})
@@ -106,12 +335,10 @@ OPTIONS:
   -h, --help              Show this help message
 
 EXAMPLES:
-  clopen                  # Start with default settings (port ${DEFAULT_PORT})
-  clopen --port 9145      # Start on port 9145
-  clopen --host 0.0.0.0   # Bind to all network interfaces
-  clopen update           # Update to the latest version
-  clopen reset-pat        # Regenerate admin login token
-  clopen --version        # Show version
+  clopen                  # Start with default settings
+  clopen --port 9145      # Start on custom port
+  clopen -v               # Show version
+  clopen update           # Update to latest version
 
 For more information, visit: https://github.com/myrialabs/clopen
 `);
@@ -175,6 +402,10 @@ function parseArguments(): CLIOptions {
 				options.resetPat = true;
 				break;
 
+			case 'clear-data':
+				options.clearData = true;
+				break;
+
 			default:
 				console.error(`❌ Error: Unknown option "${arg}"`);
 				console.log('Run "clopen --help" for usage information');
@@ -199,30 +430,33 @@ function isNewerVersion(current: string, latest: string): boolean {
 	return false;
 }
 
+// ============================================================
+// Commands
+// ============================================================
+
 async function runUpdate() {
 	const currentVersion = getVersion();
 	console.log(`\x1b[36mClopen\x1b[0m v${currentVersion}\n`);
 
-	// Check for latest version
-	updateLoading('Checking for updates...');
+	startSpinner('Checking for updates...');
 
 	let latestVersion: string;
 	try {
 		const response = await fetch('https://registry.npmjs.org/@myrialabs/clopen/latest');
 		if (!response.ok) {
-			stopLoading();
+			stopSpinner();
 			console.error(`❌ Failed to check for updates (HTTP ${response.status})`);
 			process.exit(1);
 		}
 		const data = await response.json() as { version: string };
 		latestVersion = data.version;
 	} catch (err) {
-		stopLoading();
+		stopSpinner();
 		console.error('❌ Failed to reach npm registry:', err instanceof Error ? err.message : err);
 		process.exit(1);
 	}
 
-	stopLoading();
+	stopSpinner();
 
 	if (!isNewerVersion(currentVersion, latestVersion)) {
 		console.log(`✓ Already up to date (v${currentVersion})`);
@@ -231,8 +465,7 @@ async function runUpdate() {
 
 	console.log(`  New version available: v${currentVersion} → \x1b[32mv${latestVersion}\x1b[0m\n`);
 
-	// Run update
-	updateLoading(`Updating to v${latestVersion}...`);
+	startSpinner(`Updating to v${latestVersion}...`);
 
 	const proc = Bun.spawn(['bun', 'add', '-g', '@myrialabs/clopen@latest'], {
 		stdout: 'pipe',
@@ -245,7 +478,7 @@ async function runUpdate() {
 	]);
 
 	const exitCode = await proc.exited;
-	stopLoading();
+	stopSpinner();
 
 	if (exitCode !== 0) {
 		const output = (stdout + '\n' + stderr).trim();
@@ -262,7 +495,6 @@ async function recoverAdminToken() {
 	const version = getVersion();
 	console.log(`\x1b[36mClopen\x1b[0m v${version} — Admin Token Recovery\n`);
 
-	// Initialize database (import dynamically to avoid loading full backend)
 	const { initializeDatabase } = await import('../backend/database/index');
 	const { listUsers, regeneratePAT } = await import('../backend/auth/auth-service');
 
@@ -283,8 +515,56 @@ async function recoverAdminToken() {
 	console.log(`\n  Use this token to log in. Keep it safe — it won't be shown again.`);
 }
 
+async function clearAllData() {
+	const version = getVersion();
+	console.log(`\x1b[36mClopen\x1b[0m v${version} — Clear All Data\n`);
+
+	console.log('\x1b[31m⚠  WARNING: This will permanently delete all projects, sessions, and settings.\x1b[0m');
+	console.log('   This action cannot be undone.\n');
+
+	process.stdout.write('Are you sure? Type "yes" to confirm: ');
+
+	const response = await new Promise<string>(resolve => {
+		const chunks: Buffer[] = [];
+		process.stdin.once('data', (data: Buffer) => {
+			chunks.push(data);
+			resolve(Buffer.concat(chunks).toString().trim());
+		});
+	});
+
+	if (response !== 'yes') {
+		console.log('\nAborted. No data was deleted.');
+		process.exit(0);
+	}
+
+	console.log('');
+	startSpinner('Clearing all data...');
+
+	const { initializeDatabase, closeDatabase } = await import('../backend/database/index');
+	const { getClopenDir } = await import('../backend/utils/paths');
+	const { resetEnvironment } = await import('../backend/engine/adapters/claude/environment');
+	const fs = await import('node:fs/promises');
+
+	await initializeDatabase();
+	closeDatabase();
+
+	const clopenDir = getClopenDir();
+	await fs.rm(clopenDir, { recursive: true, force: true });
+
+	resetEnvironment();
+
+	await initializeDatabase();
+
+	stopSpinner();
+	console.log('✓ All data cleared successfully.');
+	console.log('  Database has been reinitialized with a fresh state.');
+}
+
+// ============================================================
+// Startup sequence
+// ============================================================
+
 async function setupEnvironment() {
-	// Check if .env exists, if not copy from .env.example
 	if (!existsSync(ENV_FILE)) {
 		if (existsSync(ENV_EXAMPLE)) {
 			copyFileSync(ENV_EXAMPLE, ENV_FILE);
@@ -293,43 +573,35 @@ async function setupEnvironment() {
 }
 
 async function installDependencies() {
-	// Always run bun install to ensure dependencies are up to date
-	// Bun is fast and will skip if nothing changed
-	updateLoading('Checking dependencies...');
-	await delay();
+	progressStepStart('deps');
 
-	const installProc = Bun.spawn(['bun', 'install', '--silent'], {
+	const proc = Bun.spawn(['bun', 'install'], {
 		cwd: __dirname,
 		stdout: 'pipe',
-		stderr: 'pipe'
+		stderr: 'pipe',
 	});
 
-	// If install takes longer than 3 seconds, it's actually installing
-	const updateMessageTimeout = setTimeout(() => {
-		updateLoading('Installing dependencies...');
-	}, 3000);
-
-	const exitCode = await installProc.exited;
-	clearTimeout(updateMessageTimeout);
+	const [exitCode] = await Promise.all([
+		proc.exited,
+		streamSubprocess(proc.stdout as ReadableStream<Uint8Array>, 'deps'),
+		streamSubprocess(proc.stderr as ReadableStream<Uint8Array>, 'deps'),
+	]);
 
 	if (exitCode !== 0) {
-		stopLoading();
-		// Show error output only if failed
-		const errorText = await new Response(installProc.stderr).text();
+		progressStepFail('deps');
+		clearProgress();
+		const status = stepStatuses.get('deps');
 		console.error('❌ Dependency installation failed:');
-		console.error(errorText);
+		if (status?.outputLines.length) console.error(status.outputLines.join('\n'));
 		process.exit(exitCode);
 	}
+
+	progressStepDone('deps');
 }
 
 function needsBuild(): boolean {
-	// No dist directory — must build
 	if (!existsSync(DIST_DIR)) return true;
-
-	// No build version file — must build
 	if (!existsSync(BUILD_VERSION_FILE)) return true;
-
-	// Compare built version with current version
 	try {
 		const builtVersion = readFileSync(BUILD_VERSION_FILE, 'utf-8').trim();
 		return builtVersion !== getVersion();
@@ -339,44 +611,46 @@ function needsBuild(): boolean {
 }
 
 async function verifyBuild() {
-	if (needsBuild()) {
-		updateLoading('Building...');
-		await delay();
-
-		const buildProc = Bun.spawn(['bun', 'run', 'build'], {
-			cwd: __dirname,
-			stdout: 'pipe',
-			stderr: 'pipe'
-		});
+	if (!needsBuild()) {
+		progressStepSkip('build');
+		return;
+	}
 
-		const exitCode = await buildProc.exited;
+	progressStepStart('build');
 
-		if (exitCode !== 0) {
-			stopLoading();
-			const errorText = await new Response(buildProc.stderr).text();
-			console.error('❌ Build failed:');
-			console.error(errorText);
-			process.exit(exitCode);
-		}
+	const proc = Bun.spawn(['bun', 'run', 'build'], {
+		cwd: __dirname,
+		stdout: 'pipe',
+		stderr: 'pipe',
+	});
 
-		// Write current version to build version file
-		writeFileSync(BUILD_VERSION_FILE, getVersion());
+	const [exitCode] = await Promise.all([
+		proc.exited,
+		streamSubprocess(proc.stdout as ReadableStream<Uint8Array>, 'build'),
+		streamSubprocess(proc.stderr as ReadableStream<Uint8Array>, 'build'),
+	]);
+
+	if (exitCode !== 0) {
+		progressStepFail('build');
+		clearProgress();
+		const status = stepStatuses.get('build');
+		console.error('❌ Build failed:');
+		if (status?.outputLines.length) console.error(status.outputLines.join('\n'));
+		process.exit(exitCode);
 	}
+
+	writeFileSync(BUILD_VERSION_FILE, getVersion());
+	progressStepDone('build');
 }
 
 async function startServer(options: CLIOptions) {
-	updateLoading('Starting server...');
-	await delay();
+	progressStepStart('server');
+	progressStepDone('server');
+	stopProgress();
+	console.log('');
 
-	// Delegate to scripts/start.ts — handles port resolution (IPv4 + IPv6
-	// zombie detection) and starts backend in a single consistent path.
 	const startScript = join(__dirname, 'scripts/start.ts');
 
-	stopLoading();
-
-	// Overlay clopen's own .env on top of process.env to override any
-	// pollution from a .env file in the directory where `clopen` was invoked.
-	// CLI args take highest priority on top of that.
 	const env = { ...process.env, ...loadEnvFile(ENV_FILE) };
 	if (options.port) env.PORT = options.port.toString();
 	if (options.host) env.HOST = options.host;
@@ -386,19 +660,20 @@ async function startServer(options: CLIOptions) {
 		stdout: 'inherit',
 		stderr: 'inherit',
 		stdin: 'inherit',
-		env
+		env,
 	});
 
-	// Wait for server process
 	await serverProc.exited;
 }
 
+// ============================================================
+// Main
+// ============================================================
+
 async function main() {
 	try {
-		// Parse CLI arguments
 		const options = parseArguments();
 
-		// Show version if requested
 		if (options.version) {
 			const currentVersion = getVersion();
 			console.log(`v${currentVersion}`);
@@ -420,42 +695,44 @@ async function main() {
 			process.exit(0);
 		}
 
-		// Show help if requested
 		if (options.help) {
 			showHelp();
 			process.exit(0);
 		}
 
-		// Run update if requested
 		if (options.update) {
 			await runUpdate();
 			process.exit(0);
 		}
 
-		// Recover admin token if requested
 		if (options.resetPat) {
 			await setupEnvironment();
 			await recoverAdminToken();
 			process.exit(0);
 		}
 
-		// 1. Setup environment variables
-		await setupEnvironment();
+		if (options.clearData) {
+			await setupEnvironment();
+			await clearAllData();
+			process.exit(0);
+		}
 
-		// 2. Install dependencies if needed
-		await installDependencies();
+		// Print header
+		console.log(`\n\x1b[36mClopen\x1b[0m v${getVersion()}\n`);
 
-		// 3. Verify/build frontend
-		await verifyBuild();
+		// Init multi-step progress
+		initProgress(STARTUP_STEPS);
 
-		// 4. Start server
+		await setupEnvironment();
+		await installDependencies();
+		await verifyBuild();
 		await startServer(options);
 
 	} catch (error) {
+		clearProgress();
 		console.error('❌ Failed to start Clopen:', error);
 		process.exit(1);
 	}
 }
 
-// Run CLI
 main();

package/frontend/components/chat/input/components/LoadingIndicator.svelte

@@ -13,12 +13,12 @@
 
 {#if appState.isLoading}
 	<div
-		class="absolute z-20 {isWelcomeState ? '-top-16' : '-top-14'} left-0 right-0 flex justify-center pointer-events-none"
+		class="absolute z-20 h-9 {isWelcomeState ? '-top-16' : '-top-14'} left-0 right-0 flex justify-center pointer-events-none"
 		transition:fly={{ y: 100, duration: 300 }}
 	>
 		{#if appState.isWaitingInput}
 			<!-- Waiting for user input state -->
-			<div class="flex items-center gap-2.5 px-4 py-2 bg-amber-50 dark:bg-amber-900/30 rounded-full border border-amber-300 dark:border-amber-700 shadow-sm">
+			<div class="flex items-center gap-2.5 px-4 py-2 bg-amber-50 dark:bg-amber-950 rounded-full border border-amber-200 dark:border-amber-900 shadow-sm">
 				<Icon name="lucide:message-circle-question-mark" class="w-4 h-4 text-amber-600 dark:text-amber-400" />
 				<span class="text-sm font-medium text-amber-700 dark:text-amber-300">
 					Waiting for your input...

package/frontend/components/checkpoint/TimelineModal.svelte

@@ -247,9 +247,11 @@
 		const previousCurrentId = timelineData?.currentHeadId;
 		if (timelineData) {
 			timelineData.currentHeadId = node.id;
+			const isInitialRestore = !!node.checkpoint.isInitial;
 			graphNodes = graphNodes.map(n => ({
 				...n,
-				isCurrent: n.id === node.id
+				isCurrent: n.id === node.id,
+				isOrphaned: isInitialRestore ? n.id !== node.id : n.isOrphaned
 			}));
 		}
 

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

@@ -201,7 +201,7 @@
 						</div>
 					{/if}
 					
-					<div class="flex-1 space-y-2">
+					<div class="flex-1 space-y-1">
 						<h3 id="dialog-title" class="text-lg font-semibold {colors.text}">
 							{title}
 						</h3>
@@ -227,7 +227,7 @@
 				</div>
 			{/if}
 
-			{#if !children}
+			{#if !children || onConfirm}
 				<div class="flex justify-end gap-3 pt-2">
 					{#if showCancel}
 						<button

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

@@ -299,6 +299,13 @@
 		}
 	});
 
+	// Sync isNavigating back to active tab (Canvas resets this on first frame after navigation)
+	$effect(() => {
+		if (activeTabId && activeTab && activeTab.isNavigating !== isNavigating) {
+			tabManager.updateTab(activeTabId, { isNavigating });
+		}
+	});
+
 	// Watch scale changes and send to backend
 	let lastSentScale = 1;
 	$effect(() => {

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

@@ -573,6 +573,14 @@
 							isReconnecting = false;
 						}, 300);
 					}
+
+					// Reset navigation state when first frame arrives after navigation.
+					// The preview:browser-navigation event that normally resets this can be
+					// missed during stream reconnect (listeners are removed/re-registered),
+					// so use the first rendered frame as definitive signal that navigation completed.
+					if (isNavigating) {
+						isNavigating = false;
+					}
 				});
 
 				// Setup cursor change handler

package/frontend/components/settings/engines/AIEnginesSettings.svelte

@@ -73,7 +73,7 @@
 	let openCodeCommandCopiedTimer: ReturnType<typeof setTimeout> | null = null;
 
 	// Debug PTY (xterm.js)
-	const showDebug = $state(true);
+	const showDebug = $state(false);
 	let debugTermContainer = $state<HTMLDivElement>();
 	let debugTerminal: Terminal | null = null;
 	let debugFitAddon: FitAddon | null = null;

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

@@ -188,7 +188,7 @@
 				<Icon name="lucide:triangle-alert" class="w-6 h-6 text-amber-600 dark:text-amber-400" />
 			</div>
 
-			<div class="flex-1 space-y-3">
+			<div class="flex-1 space-y-1">
 				<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
 					Change Authentication Mode
 				</h3>
@@ -197,7 +197,7 @@
 				</p>
 
 				<!-- PAT Display -->
-				<div class="p-3.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
+				<div class="mt-3 p-3.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
 					<div class="flex items-center gap-2 text-sm font-semibold text-amber-800 dark:text-amber-200 mb-2">
 						<Icon name="lucide:key-round" class="w-4 h-4" />
 						<span>Your Personal Access Token</span>

package/frontend/components/tunnel/TunnelInactive.svelte

@@ -15,7 +15,7 @@
 	// Info box visibility - load from localStorage
 	let showInfoBox = $state(
 		typeof window !== 'undefined'
-			? localStorage.getItem('tunnel-info-dismissed') !== 'true'
+			? localStorage.getItem('clopen-tunnel-info-dismissed') !== 'true'
 			: true
 	);
 
@@ -32,7 +32,7 @@
 
 		// Save "don't show again" preference
 		if (dontShowWarningAgain) {
-			localStorage.setItem('tunnel-warning-dismissed', 'true');
+			localStorage.setItem('clopen-tunnel-warning-dismissed', 'true');
 		}
 
 		// Close modal immediately
@@ -59,7 +59,7 @@
 		warningDismissed = false;
 
 		// Check if user has dismissed warning permanently
-		const securityWarningDismissed = localStorage.getItem('tunnel-warning-dismissed') === 'true';
+		const securityWarningDismissed = localStorage.getItem('clopen-tunnel-warning-dismissed') === 'true';
 		if (securityWarningDismissed) {
 			// Skip warning and start tunnel directly
 			handleStartTunnel();
@@ -70,7 +70,7 @@
 
 	function closeInfoBox() {
 		showInfoBox = false;
-		localStorage.setItem('tunnel-info-dismissed', 'true');
+		localStorage.setItem('clopen-tunnel-info-dismissed', 'true');
 	}
 
 	function dismissError() {

package/frontend/services/chat/chat.service.ts

@@ -59,7 +59,50 @@ class ChatService {
     'Create a full-stack e-commerce platform with Next.js, Stripe, and PostgreSQL',
     'Build a real-time chat application using Socket.io with room support and typing indicators',
     'Create a SaaS dashboard with user management, billing, and analytics',
-    // ... (keep the same placeholder texts as before)
+    'Build a REST API with authentication, rate limiting, and Swagger documentation',
+    'Create a CLI tool in TypeScript that scaffolds new projects with custom templates',
+    // Debugging & fixing
+    'Debug a memory leak in a Node.js service causing it to crash every 24 hours',
+    'Fix race conditions in a concurrent queue processor causing duplicate jobs',
+    'Fix a CORS issue blocking requests between a frontend and backend on different origins',
+    'Fix broken JWT refresh logic that logs users out unexpectedly',
+    'Fix flaky tests that pass locally but fail randomly in CI',
+    // Code review & refactoring
+    'Refactor a 1000-line monolithic function into clean, testable modules',
+    'Convert a class-based React codebase to functional components with hooks',
+    'Migrate a JavaScript project to TypeScript with strict mode enabled',
+    'Refactor database queries to use an ORM with proper migrations',
+    'Clean up and standardize error handling across an entire Express application',
+    // Writing tests
+    'Write unit tests for a payment processing module with 100% coverage',
+    'Add end-to-end tests using Playwright for a multi-step checkout flow',
+    'Set up integration tests for a REST API using a real test database',
+    'Write property-based tests to find edge cases in a data validation library',
+    'Set up test coverage reporting and enforce a minimum threshold in CI',
+    // Performance & optimization
+    'Optimize a slow PostgreSQL query that runs 10 seconds on a 5M-row table',
+    'Implement Redis caching to reduce database load by 80%',
+    'Reduce bundle size of a React app from 4MB to under 500KB',
+    'Profile and optimize a Python data pipeline processing 1M records per hour',
+    'Add lazy loading and virtualization to a list rendering 10,000 items',
+    // Architecture & design
+    'Design a scalable event-driven architecture using Kafka for a high-traffic app',
+    'Plan a migration from a monolith to microservices without downtime',
+    'Design a multi-tenant SaaS architecture with data isolation per customer',
+    'Create an authentication system supporting SSO, OAuth, and MFA',
+    'Architect a real-time notification system using WebSockets and a message queue',
+    // DevOps & infrastructure
+    'Write a Dockerfile and docker-compose setup for a full-stack app with hot reload',
+    'Set up a GitHub Actions CI/CD pipeline with testing, linting, and auto-deploy',
+    'Configure Nginx as a reverse proxy with SSL termination and load balancing',
+    'Create Terraform scripts to provision a production-ready AWS infrastructure',
+    'Set up monitoring and alerting using Prometheus and Grafana',
+    // AI & data
+    'Build a RAG pipeline using LangChain, embeddings, and a vector database',
+    'Create a sentiment analysis API using a fine-tuned transformer model',
+    'Build a data scraper that extracts and structures product data at scale',
+    'Implement a recommendation engine using collaborative filtering',
+    'Create a real-time data dashboard ingesting from multiple streaming sources',
   ];
 
   constructor() {

package/frontend/stores/ui/settings-modal.svelte.ts

@@ -50,7 +50,7 @@ export const settingsSections: SettingsSectionMeta[] = [
 	},
 	{
 		id: 'account',
-		label: 'Account',
+		label: 'User Profile',
 		icon: 'lucide:user',
 		description: 'Your profile and access'
 	},

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

@@ -3,7 +3,7 @@ import type { Theme } from '$shared/types/ui';
 // Theme store using Svelte 5 runes
 export const themeStore = $state({
 	current: {
-		name: 'claude-modern',
+		name: 'clopen-modern',
 		primary: '#D97757',
 		secondary: '#4F46E5',
 		background: '#F9FAFB',
@@ -26,7 +26,7 @@ export function isDarkMode() {
 // Theme presets
 export const themes: Theme[] = [
 	{
-		name: 'claude-modern',
+		name: 'clopen-modern',
 		primary: '#D97757',
 		secondary: '#4F46E5',
 		background: '#F9FAFB',
@@ -34,7 +34,7 @@ export const themes: Theme[] = [
 		mode: 'light'
 	},
 	{
-		name: 'claude-dark',
+		name: 'clopen-dark',
 		primary: '#D97757',
 		secondary: '#4F46E5',
 		background: '#111827',
@@ -83,7 +83,7 @@ export function setTheme(theme: Theme) {
 	}
 
 	// Save to localStorage
-	localStorage.setItem('claude-theme', JSON.stringify(theme));
+	localStorage.setItem('clopen-theme', JSON.stringify(theme));
 }
 
 // Helper function to update theme color meta tag
@@ -105,12 +105,12 @@ export function toggleDarkMode() {
 	const newMode: 'light' | 'dark' = themeStore.isDark ? 'light' : 'dark';
 
 	// Use predefined themes for consistency
-	const newTheme = newMode === 'dark' ? themes[1] : themes[0]; // claude-dark or claude-modern
+	const newTheme = newMode === 'dark' ? themes[1] : themes[0]; // clopen-dark or clopen-modern
 	
 	setTheme(newTheme);
 	
 	// Mark as manual theme choice
-	localStorage.setItem('claude-theme-manual', 'true');
+	localStorage.setItem('clopen-theme-manual', 'true');
 }
 
 export function initializeTheme() {
@@ -121,8 +121,8 @@ export function initializeTheme() {
 	themeStore.isSystemDark = isSystemDark;
 	
 	// Check for saved theme preference
-	const savedTheme = localStorage.getItem('claude-theme');
-	const isManualTheme = localStorage.getItem('claude-theme-manual') === 'true';
+	const savedTheme = localStorage.getItem('clopen-theme');
+	const isManualTheme = localStorage.getItem('clopen-theme-manual') === 'true';
 	
 	let initialTheme: Theme;
 	
@@ -160,7 +160,7 @@ export function initializeTheme() {
 		themeStore.isSystemDark = e.matches;
 		
 		// Only follow system if no manual theme was set
-		if (!localStorage.getItem('claude-theme-manual')) {
+		if (!localStorage.getItem('clopen-theme-manual')) {
 			const newTheme = e.matches ? themes[1] : themes[0];
 			setTheme(newTheme);
 		}
@@ -169,11 +169,11 @@ export function initializeTheme() {
 
 export function setManualTheme(theme: Theme) {
 	setTheme(theme);
-	localStorage.setItem('claude-theme-manual', 'true');
+	localStorage.setItem('clopen-theme-manual', 'true');
 }
 
 export function useSystemTheme() {
-	localStorage.removeItem('claude-theme-manual');
+	localStorage.removeItem('clopen-theme-manual');
 	const defaultTheme = themeStore.isSystemDark ? themes[1] : themes[0];
 	setTheme(defaultTheme);
 }

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

@@ -751,7 +751,7 @@ export function setActiveMobilePanel(panelId: PanelId): void {
 // PERSISTENCE
 // ============================================
 
-const STORAGE_KEY = 'claude-workspace-layout';
+const STORAGE_KEY = 'clopen-workspace-layout';
 
 export function saveWorkspaceState(): void {
 	try {

package/index.html

@@ -20,8 +20,8 @@
 			(function() {
 				// Check for saved theme preference
 				try {
-					const savedTheme = localStorage.getItem('claude-theme');
-					const isManualTheme = localStorage.getItem('claude-theme-manual') === 'true';
+					const savedTheme = localStorage.getItem('clopen-theme');
+					const isManualTheme = localStorage.getItem('clopen-theme-manual') === 'true';
 
 					let isDark = false;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "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/anonymous-user.ts

@@ -56,7 +56,7 @@ export async function getOrCreateAnonymousUser(): Promise<AnonymousUser | null>
     return null;
   }
 
-  const stored = localStorage.getItem('claude-anonymous-user');
+  const stored = localStorage.getItem('clopen-anonymous-user');
 
   if (stored) {
     try {
@@ -76,7 +76,7 @@ export async function getOrCreateAnonymousUser(): Promise<AnonymousUser | null>
   const newUser = await generateAnonymousUserFromServer();
 
   if (newUser) {
-    localStorage.setItem('claude-anonymous-user', JSON.stringify(newUser));
+    localStorage.setItem('clopen-anonymous-user', JSON.stringify(newUser));
     return newUser;
   }
 
@@ -93,7 +93,7 @@ export function getCurrentAnonymousUser(): AnonymousUser | null {
     return null;
   }
 
-  const stored = localStorage.getItem('claude-anonymous-user');
+  const stored = localStorage.getItem('clopen-anonymous-user');
 
   if (stored) {
     try {
@@ -146,7 +146,7 @@ export async function updateAnonymousUserName(newName: string): Promise<Anonymou
     });
 
     // Save to localStorage
-    localStorage.setItem('claude-anonymous-user', JSON.stringify(response));
+    localStorage.setItem('clopen-anonymous-user', JSON.stringify(response));
     debug.log('user', '✅ Updated user name:', response.name);
     return response;
   } catch (error) {