@myrialabs/clopen 0.2.12 → 0.2.14

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

@@ -43,16 +43,14 @@ class ChatService {
 
   static loadingTexts: string[] = [
     'thinking', 'processing', 'analyzing', 'calculating', 'computing',
-    'strategizing', 'learningpatterns', 'updatingweights', 'finetuning',
-    'adaptingmodels', 'trainingnetworks', 'evaluatingoptions', 'planningactions',
-    'executingplans', 'simulatingscenarios', 'predictingoutcomes', 'scanningenvironment',
-    'monitoringsignals', 'processinginputs', 'adjustingparameters', 'optimizing',
-    'generatingresponses', 'refininglogic', 'recognizingpatterns', 'synthesizinginformation',
-    'runninginference', 'validatingoutputs', 'modulatingresponse', 'updatingmemory',
-    'switchingcontext', 'resolvingconflicts', 'allocatingresources', 'prioritizingtasks',
-    'developingawareness', 'buildingstrategies', 'assessingscenarios', 'integratingdata',
-    'bootingreasoning', 'activatingmodules', 'triggeringaction', 'deployinglogic',
-    'maintainingstate', 'clearingcache', 'updating', 'reflecting', 'syncinglogic',
+    'strategizing', 'learningpatterns', 'adaptingmodels', 'evaluatingoptions',
+    'executingplans', 'simulatingscenarios', 'predictingoutcomes', 'planningactions',
+    'processinginputs', 'optimizing', 'generatingresponses', 'refininglogic', 
+    'validatingoutputs', 'modulatingresponse', 'updatingmemory', 'recognizingpatterns',
+    'switchingcontext', 'allocatingresources', 'prioritizingtasks',
+    'developingawareness', 'buildingstrategies', 'assessingscenarios',
+    'bootingreasoning', 'triggeringaction', 'deployinglogic', 'synthesizinginformation',
+    'maintainingstate', 'updating', 'reflecting', 'syncinglogic',
     'connectingdots', 'compilingideas', 'brainstorming', 'schedulingtasks'
   ].map(text => text + '...');
 
@@ -61,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/services/terminal/project.service.ts

@@ -262,66 +262,10 @@ class TerminalProjectManager {
 					}
 				}
 
-				// Restore saved output for this session
-				let baseOutput: any[] = [];
-				let backgroundOutput: any[] = [];
-
-				// First, restore base output from context (input/output sebelumnya)
-				if (context.sessionOutputs.has(sessionId)) {
-					const savedOutput = context.sessionOutputs.get(sessionId);
-					if (savedOutput) {
-						baseOutput = savedOutput.map(output => ({
-							content: output.content,
-							type: output.type as any,
-							timestamp: output.timestamp
-						}));
-						// Restored base output lines for session
-					}
-				}
-
-				// Second, get NEW output from server that was generated while we were away
-				// We need to track when we saved the output to know what's new
-				if (hasActiveStream && activeStreamInfo) {
-					try {
-						// Get the saved output count from context metadata
-						// This tells us how much output we had when we switched away
-						let savedOutputCount = 0;
-						const savedMetadata = context.sessionOutputs.get(`${sessionId}-metadata`);
-						if (savedMetadata && typeof savedMetadata === 'object' && 'outputCount' in savedMetadata) {
-							savedOutputCount = (savedMetadata as any).outputCount || 0;
-						} else {
-							// Fallback: count actual output lines in baseOutput
-							for (const line of baseOutput) {
-								if (line.type === 'output' || line.type === 'error') {
-									savedOutputCount++;
-								}
-							}
-						}
-
-						// Get only NEW output from server (skip what we already have)
-						const data = await terminalService.getMissedOutput(
-							sessionId,
-							activeStreamInfo.streamId,
-							savedOutputCount
-						);
-						if (data.success && data.output && data.output.length > 0) {
-							// Convert server output to terminal lines
-							backgroundOutput = data.output.map((content: string) => ({
-								content: content,
-								type: 'output',
-								timestamp: new Date()
-							}));
-							debug.log('terminal', `Restored ${backgroundOutput.length} new output lines for session ${sessionId}`);
-						}
-					} catch (error) {
-						debug.error('terminal', 'Failed to fetch missed output:', error);
-					}
-				}
-
-				// Combine base output with background output from server
-				// Base output contains previous input/output saved in context
-				// Background output contains new output from server (if any)
-				terminalSession.lines = [...baseOutput, ...backgroundOutput];
+				// Always start with empty lines.
+				// The create-session replay from headless xterm will provide the
+				// accurate current terminal state (respects clear, scrollback, etc.)
+				terminalSession.lines = [];
 
 				// Restore command history from context (persisted) rather than manager (temporary)
 				const savedCommandHistory = context.sessionCommandHistories.get(sessionId);

package/frontend/services/terminal/terminal.service.ts

@@ -62,20 +62,6 @@ export class TerminalService {
 		// Create unique stream ID for this connection
 		const streamId = `${sessionId}-${Date.now()}`;
 
-		// Get current output count to mark where new output starts
-		let outputStartIndex = 0;
-		if (typeof window !== 'undefined') {
-			try {
-				const terminalStoreModule = await import('$frontend/stores/features/terminal.svelte');
-				const termSession = terminalStoreModule.terminalStore.getSession(sessionId);
-				if (termSession && termSession.lines) {
-					outputStartIndex = termSession.lines.length;
-				}
-			} catch {
-				// Ignore error, use default 0
-			}
-		}
-
 		// Setup WebSocket listeners for this session
 		const listeners: Array<() => void> = [];
 
@@ -173,8 +159,7 @@ export class TerminalService {
 				workingDirectory: session.workingDirectory,
 				projectPath,
 				cols: terminalSize?.cols || 80,
-				rows: terminalSize?.rows || 24,
-				outputStartIndex
+				rows: terminalSize?.rows || 24
 			});
 
 			debug.log('terminal', `✅ Terminal session created:`, response);
@@ -230,6 +215,17 @@ export class TerminalService {
 		}
 	}
 
+	/**
+	 * Clear headless terminal on backend (sync with frontend clear)
+	 */
+	async clearHeadlessTerminal(sessionId: string): Promise<void> {
+		try {
+			await ws.http('terminal:clear', { sessionId });
+		} catch {
+			// Silently handle - non-critical
+		}
+	}
+
 	/**
 	 * Resize terminal for a specific session
 	 */
@@ -301,39 +297,34 @@ export class TerminalService {
 	}
 
 	/**
-	 * Get missed output for a session
+	 * Get missed output for a session (serialized terminal state)
 	 */
 	async getMissedOutput(
 		sessionId: string,
-		streamId?: string,
-		fromIndex: number = 0
+		streamId?: string
 	): Promise<{
 		success: boolean;
-		output: string[];
-		outputCount: number;
+		output: string;
 		status: string;
 	}> {
 		try {
-			const data = await ws.http('terminal:missed-output', { sessionId, streamId, fromIndex }, 5000);
+			const data = await ws.http('terminal:missed-output', { sessionId, streamId }, 5000);
 			if (data.sessionId === sessionId) {
 				return {
 					success: true,
 					output: data.output,
-					outputCount: data.outputCount,
 					status: data.status
 				};
 			}
 			return {
 				success: false,
-				output: [],
-				outputCount: 0,
+				output: '',
 				status: 'invalid_session'
 			};
 		} catch {
 			return {
 				success: false,
-				output: [],
-				outputCount: 0,
+				output: '',
 				status: 'timeout'
 			};
 		}

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

@@ -436,6 +436,12 @@ export async function initializeSessions() {
 	setupCollaborativeListeners();
 	setupEditModeListener();
 
+	// Skip loading if no project is active — both calls require WS project context
+	if (!projectState.currentProject) {
+		debug.log('session', 'No active project, skipping session load');
+		return;
+	}
+
 	// Load sessions and restore edit mode in parallel
 	// Both only need WS project context (already set by initializeProjects)
 	await Promise.all([

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.12",
+  "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",
@@ -77,17 +77,19 @@
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "0.2.63",
     "@anthropic-ai/sdk": "0.78.0",
-    "@opencode-ai/sdk": "1.2.15",
     "@elysiajs/cors": "^1.4.0",
     "@iconify-json/lucide": "^1.2.57",
     "@iconify-json/material-icon-theme": "^1.2.16",
     "@modelcontextprotocol/sdk": "^1.26.0",
     "@monaco-editor/loader": "^1.5.0",
+    "@opencode-ai/sdk": "1.2.15",
     "@xterm/addon-clipboard": "^0.2.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-ligatures": "^0.10.0",
+    "@xterm/addon-serialize": "^0.14.0",
     "@xterm/addon-unicode11": "^0.9.0",
     "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/headless": "^6.0.0",
     "@xterm/xterm": "^6.0.0",
     "bun-pty": "^0.4.2",
     "cloudflared": "^0.7.1",

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) {