@myrialabs/clopen 0.1.4 → 0.1.6

package/frontend/lib/services/snapshot/snapshot.service.ts

@@ -1,43 +1,82 @@
 /**
- * Snapshot Service - WebSocket Implementation
+ * Snapshot Service - WebSocket Implementation (v2 - Session-Scoped)
  *
- * Provides snapshot/restore functionality using WebSocket
+ * Provides snapshot/restore functionality using WebSocket.
+ * v2 adds conflict detection and session-scoped restore.
  */
 
 import ws from '$frontend/lib/utils/ws';
 import type { TimelineResponse } from '$frontend/lib/components/checkpoint/timeline/types';
 
+/**
+ * Conflict information for a single file
+ */
+export interface RestoreConflict {
+	filepath: string;
+	modifiedBySessionId: string;
+	modifiedBySnapshotId: string;
+	modifiedAt: string;
+	restoreContent?: string;
+	currentContent?: string;
+}
+
+/**
+ * Result of conflict detection
+ */
+export interface RestoreConflictCheck {
+	hasConflicts: boolean;
+	conflicts: RestoreConflict[];
+	checkpointsToUndo: string[];
+}
+
+/**
+ * User's resolution for conflicting files
+ */
+export type ConflictResolution = Record<string, 'restore' | 'keep'>;
+
 class SnapshotService {
-  /**
-   * Get timeline data for a session
-   */
-  async getTimeline(sessionId: string): Promise<TimelineResponse> {
-    return ws.http('snapshot:get-timeline', { sessionId });
-  }
-
-  /**
-   * Restore to a checkpoint (unified - replaces undo/redo)
-   */
-  async restore(messageId: string, sessionId: string): Promise<any> {
-    return ws.http('snapshot:restore', { messageId, sessionId });
-  }
-
-  /**
-   * @deprecated Use restore() instead. Kept for backward compatibility.
-   */
-  async undo(messageId: string, sessionId: string): Promise<any> {
-    return this.restore(messageId, sessionId);
-  }
-
-  /**
-   * @deprecated Use restore() instead. Kept for backward compatibility.
-   */
-  async redo(branchName: string, sessionId: string, messageId?: string): Promise<any> {
-    if (messageId) {
-      return this.restore(messageId, sessionId);
-    }
-    throw new Error('messageId is required for restore operation');
-  }
+	/**
+	 * Get timeline data for a session
+	 */
+	async getTimeline(sessionId: string): Promise<TimelineResponse> {
+		return ws.http('snapshot:get-timeline', { sessionId });
+	}
+
+	/**
+	 * Check for conflicts before restoring to a checkpoint.
+	 * Should be called before restore() to detect cross-session conflicts.
+	 */
+	async checkConflicts(messageId: string, sessionId: string): Promise<RestoreConflictCheck> {
+		return ws.http('snapshot:check-conflicts', { messageId, sessionId });
+	}
+
+	/**
+	 * Restore to a checkpoint with optional conflict resolutions.
+	 */
+	async restore(
+		messageId: string,
+		sessionId: string,
+		conflictResolutions?: ConflictResolution
+	): Promise<any> {
+		return ws.http('snapshot:restore', { messageId, sessionId, conflictResolutions });
+	}
+
+	/**
+	 * @deprecated Use restore() instead. Kept for backward compatibility.
+	 */
+	async undo(messageId: string, sessionId: string): Promise<any> {
+		return this.restore(messageId, sessionId);
+	}
+
+	/**
+	 * @deprecated Use restore() instead. Kept for backward compatibility.
+	 */
+	async redo(branchName: string, sessionId: string, messageId?: string): Promise<any> {
+		if (messageId) {
+			return this.restore(messageId, sessionId);
+		}
+		throw new Error('messageId is required for restore operation');
+	}
 }
 
 // Export singleton instance

package/frontend/lib/stores/core/app.svelte.ts

@@ -50,6 +50,9 @@ interface AppState {
 	// Per-session process states (source of truth for multi-session support)
 	sessionStates: Record<string, SessionProcessState>;
 
+	// Unread sessions — maps session ID → project ID for sessions with new activity
+	unreadSessions: Map<string, string>;
+
 	// Page Information
 	pageInfo: PageInfo;
 
@@ -71,6 +74,9 @@ export const appState = $state<AppState>({
 	// Per-session process states
 	sessionStates: {},
 
+	// Unread sessions (sessionId → projectId)
+	unreadSessions: new Map<string, string>(),
+
 	// Page Information
 	pageInfo: {
 		title: 'Claude Code',
@@ -129,6 +135,47 @@ export function clearSessionProcessState(sessionId: string): void {
 	delete appState.sessionStates[sessionId];
 }
 
+// ========================================
+// UNREAD SESSION MANAGEMENT
+// ========================================
+
+/**
+ * Mark a session as unread (has new activity the user hasn't seen).
+ */
+export function markSessionUnread(sessionId: string, projectId: string): void {
+	const next = new Map(appState.unreadSessions);
+	next.set(sessionId, projectId);
+	appState.unreadSessions = next;
+}
+
+/**
+ * Mark a session as read (user has viewed it).
+ */
+export function markSessionRead(sessionId: string): void {
+	if (appState.unreadSessions.has(sessionId)) {
+		const next = new Map(appState.unreadSessions);
+		next.delete(sessionId);
+		appState.unreadSessions = next;
+	}
+}
+
+/**
+ * Check if a session is unread.
+ */
+export function isSessionUnread(sessionId: string): boolean {
+	return appState.unreadSessions.has(sessionId);
+}
+
+/**
+ * Check if a project has any unread sessions.
+ */
+export function hasUnreadSessionsForProject(projectId: string): boolean {
+	for (const pId of appState.unreadSessions.values()) {
+		if (pId === projectId) return true;
+	}
+	return false;
+}
+
 // ========================================
 // UI STATE MANAGEMENT
 // ========================================

package/frontend/lib/stores/core/presence.svelte.ts

@@ -2,11 +2,15 @@
  * Presence Store
  * Shared reactive state for project presence (active users)
  * Subscribes once to projectStatusService, shared across all components
+ *
+ * Also provides unified helpers for status indicators so all components
+ * read from one place (merges backend presence + frontend app state).
  */
 
-import { onMount } from 'svelte';
 import { projectStatusService, type ProjectStatus } from '$frontend/lib/services/project/status.service';
 import { userStore } from '$frontend/lib/stores/features/user.svelte';
+import { appState, markSessionUnread, hasUnreadSessionsForProject } from '$frontend/lib/stores/core/app.svelte';
+import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
 
 // Shared reactive state
 export const presenceState = $state<{
@@ -27,6 +31,7 @@ export function initPresence() {
 
 	projectStatusService.onStatusUpdate((statuses) => {
 		const currentUserId = userStore.currentUser?.id;
+		const currentSessionId = sessionState.currentSession?.id;
 		const statusMap = new Map<string, ProjectStatus>();
 		statuses.forEach((status) => {
 			statusMap.set(status.projectId, {
@@ -35,6 +40,15 @@ export function initPresence() {
 					? status.activeUsers.filter((u) => u.userId !== currentUserId)
 					: status.activeUsers
 			});
+
+			// Mark non-current sessions with active streams as unread
+			if (status.streams) {
+				for (const stream of status.streams) {
+					if (stream.status === 'active' && stream.chatSessionId !== currentSessionId) {
+						markSessionUnread(stream.chatSessionId, status.projectId);
+					}
+				}
+			}
 		});
 		presenceState.statuses = statusMap;
 	});
@@ -46,3 +60,68 @@ export function initPresence() {
 export function getProjectPresence(projectId: string): ProjectStatus | undefined {
 	return presenceState.statuses.get(projectId);
 }
+
+// ========================================
+// UNIFIED STATUS HELPERS
+// ========================================
+
+/**
+ * Check if a chat session is waiting for user input.
+ * Merges two sources so the result is always up-to-date:
+ *   1. Frontend appState.sessionStates (instant, set by chat stream events)
+ *   2. Backend presenceState (works for background / other-project sessions)
+ */
+export function isSessionWaitingInput(chatSessionId: string, projectId?: string): boolean {
+	// Frontend app state — immediate for the active session
+	if (appState.sessionStates[chatSessionId]?.isWaitingInput) return true;
+
+	// Backend presence — covers background & cross-project sessions
+	if (projectId) {
+		const status = presenceState.statuses.get(projectId);
+		if (status?.streams?.some(
+			(s: any) => s.status === 'active' && s.chatSessionId === chatSessionId && s.isWaitingInput
+		)) return true;
+	} else {
+		// No projectId provided — search all projects
+		for (const status of presenceState.statuses.values()) {
+			if (status.streams?.some(
+				(s: any) => s.status === 'active' && s.chatSessionId === chatSessionId && s.isWaitingInput
+			)) return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * Get the status indicator color for a project.
+ * Priority (highest wins when multiple sessions exist):
+ * - Green (bg-emerald-500)  : at least one stream actively processing
+ * - Amber (bg-amber-500)    : all active streams waiting for user input
+ * - Blue  (bg-blue-500)     : session(s) with unread activity
+ * - Gray  (bg-slate-500/30) : idle
+ *
+ * Merges backend presence with frontend app state for accuracy.
+ */
+export function getProjectStatusColor(projectId: string): string {
+	const status = presenceState.statuses.get(projectId);
+
+	const activeStreams = status?.streams?.filter((s: any) => s.status === 'active') ?? [];
+
+	if (activeStreams.length > 0) {
+		// Green wins: at least one stream is actively processing (not waiting)
+		const hasProcessing = activeStreams.some((s: any) =>
+			!s.isWaitingInput && !appState.sessionStates[s.chatSessionId]?.isWaitingInput
+		);
+		if (hasProcessing) return 'bg-emerald-500';
+
+		// All active streams are waiting for input
+		return 'bg-amber-500';
+	}
+
+	// Check for unread sessions in this project
+	if (hasUnreadSessionsForProject(projectId)) return 'bg-blue-500';
+
+	return 'bg-slate-500/30';
+}
+

package/frontend/lib/stores/core/projects.svelte.ts

@@ -109,14 +109,22 @@ export async function setCurrentProject(project: Project | null) {
 
 				// Reload all sessions for this project from server
 				// (local state may only have sessions from the previous project)
-				await reloadSessionsForProject();
+				const savedSessionId = await reloadSessionsForProject();
 
 				// Check if there's an existing session for this project
 				const existingSessions = getSessionsForProject(project.id);
 				const activeSessions = existingSessions
 					.filter(s => !s.ended_at)
 					.sort((a, b) => new Date(b.started_at).getTime() - new Date(a.started_at).getTime());
-				const activeSession = activeSessions[0] || null;
+
+				// Try server-saved session first (preserves user's last selected session)
+				let activeSession = savedSessionId
+					? activeSessions.find(s => s.id === savedSessionId) || null
+					: null;
+				// Fall back to most recent active session
+				if (!activeSession) {
+					activeSession = activeSessions[0] || null;
+				}
 
 				if (activeSession) {
 					// Restore the most recent active session for this project

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

@@ -13,6 +13,7 @@ import { buildMetadataFromTransport } from '$shared/utils/message-formatter';
 import ws from '$frontend/lib/utils/ws';
 import { projectState } from './projects.svelte';
 import { setupEditModeListener, restoreEditMode } from '$frontend/lib/stores/ui/edit-mode.svelte';
+import { markSessionUnread, markSessionRead } from '$frontend/lib/stores/core/app.svelte';
 import { debug } from '$shared/utils/logger';
 
 interface SessionState {
@@ -56,6 +57,11 @@ export async function setCurrentSession(session: ChatSession | null, skipLoadMes
 	const previousSessionId = sessionState.currentSession?.id;
 	sessionState.currentSession = session;
 
+	// Clear unread status when viewing a session
+	if (session) {
+		markSessionRead(session.id);
+	}
+
 	// Leave previous chat session room
 	if (previousSessionId && previousSessionId !== session?.id) {
 		ws.emit('chat:leave-session', { chatSessionId: previousSessionId });
@@ -300,11 +306,11 @@ export function getRecentSessions(limit: number = 10): ChatSession[] {
  * Reload sessions for the current project from the server.
  * Called when the user switches projects so session list stays in sync.
  */
-export async function reloadSessionsForProject() {
+export async function reloadSessionsForProject(): Promise<string | null> {
 	try {
 		const response = await ws.http('sessions:list');
 		if (response) {
-			const { sessions } = response;
+			const { sessions, currentSessionId } = response;
 			// Merge: keep sessions from other projects, replace sessions for current project
 			const currentProjectId = projectState.currentProject?.id;
 			if (currentProjectId) {
@@ -315,10 +321,12 @@ export async function reloadSessionsForProject() {
 			} else {
 				sessionState.sessions = sessions;
 			}
+			return currentSessionId || null;
 		}
 	} catch (error) {
 		debug.error('session', 'Error reloading sessions:', error);
 	}
+	return null;
 }
 
 // ========================================
@@ -345,6 +353,11 @@ function setupCollaborativeListeners() {
 		} else {
 			sessionState.sessions[existingIndex] = session;
 		}
+
+		// Mark as unread if it's not the current session
+		if (session.id !== sessionState.currentSession?.id) {
+			markSessionUnread(session.id, session.project_id);
+		}
 	});
 
 	// Listen for session deletion broadcasts from other users

package/frontend/lib/stores/features/settings.svelte.ts

@@ -32,12 +32,20 @@ const defaultSettings: AppSettings = {
 	soundNotifications: true,
 	pushNotifications: false,
 	layoutPresetVisibility: createDefaultPresetVisibility(),
-	allowedBasePaths: []
+	allowedBasePaths: [],
+	fontSize: 13,
+	autoUpdate: false
 };
 
 // Create and export reactive settings state directly (starts with defaults)
 export const settings = $state<AppSettings>({ ...defaultSettings });
 
+export function applyFontSize(size: number): void {
+	if (typeof window !== 'undefined') {
+		document.documentElement.style.fontSize = `${size}px`;
+	}
+}
+
 /**
  * Apply server-provided settings during initialization.
  * Called from WorkspaceLayout with state from user:restore-state.
@@ -46,6 +54,7 @@ export function applyServerSettings(serverSettings: Partial<AppSettings> | null)
 	if (serverSettings && typeof serverSettings === 'object') {
 		// Merge with defaults to ensure all properties exist
 		Object.assign(settings, { ...defaultSettings, ...serverSettings });
+		applyFontSize(settings.fontSize);
 		debug.log('settings', 'Applied server settings');
 	}
 }

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

@@ -469,6 +469,12 @@ export const terminalStore = {
 
 			case 'error':
 				if (data.content) {
+					// If PTY session is gone, auto-close the tab instead of showing error
+					if (data.content.includes('Session not found') || data.content.includes('PTY not available')) {
+						debug.log('terminal', `🧹 Auto-closing dead terminal tab: ${sessionId}`);
+						this.closeSession(sessionId);
+						return;
+					}
 					// Error messages are usually complete, but still buffer for safety
 					this.processBufferedOutput(sessionId, data.content, 'error');
 				}

package/frontend/lib/stores/ui/connection.svelte.ts

@@ -0,0 +1,40 @@
+/**
+ * WebSocket Connection Status Store
+ * Tracks connection state reactively for UI components
+ */
+
+export type ConnectionStatus = 'connected' | 'disconnected' | 'reconnecting';
+
+interface ConnectionState {
+	status: ConnectionStatus;
+	reconnectAttempts: number;
+	/** Whether we just reconnected (for showing brief "Reconnected" message) */
+	justReconnected: boolean;
+}
+
+export const connectionState = $state<ConnectionState>({
+	status: 'connected',
+	reconnectAttempts: 0,
+	justReconnected: false,
+});
+
+let reconnectedTimeout: ReturnType<typeof setTimeout> | null = null;
+
+export function setConnectionStatus(status: ConnectionStatus, reconnectAttempts = 0): void {
+	const wasDisconnected = connectionState.status === 'disconnected' || connectionState.status === 'reconnecting';
+	const isNowConnected = status === 'connected';
+
+	connectionState.status = status;
+	connectionState.reconnectAttempts = reconnectAttempts;
+
+	// Show "Reconnected" briefly when recovering from a disconnection
+	if (wasDisconnected && isNowConnected) {
+		connectionState.justReconnected = true;
+
+		if (reconnectedTimeout) clearTimeout(reconnectedTimeout);
+		reconnectedTimeout = setTimeout(() => {
+			connectionState.justReconnected = false;
+			reconnectedTimeout = null;
+		}, 2000);
+	}
+}

package/frontend/lib/stores/ui/update.svelte.ts

@@ -0,0 +1,124 @@
+/**
+ * Update Status Store
+ * Tracks npm package update availability and auto-update state
+ */
+
+import ws from '$frontend/lib/utils/ws';
+import { settings } from '$frontend/lib/stores/features/settings.svelte';
+import { debug } from '$shared/utils/logger';
+
+interface UpdateState {
+	currentVersion: string;
+	latestVersion: string;
+	updateAvailable: boolean;
+	checking: boolean;
+	updating: boolean;
+	dismissed: boolean;
+	error: string | null;
+	updateOutput: string | null;
+	updateSuccess: boolean;
+}
+
+export const updateState = $state<UpdateState>({
+	currentVersion: '',
+	latestVersion: '',
+	updateAvailable: false,
+	checking: false,
+	updating: false,
+	dismissed: false,
+	error: null,
+	updateOutput: null,
+	updateSuccess: false
+});
+
+let checkInterval: ReturnType<typeof setInterval> | null = null;
+let successTimeout: ReturnType<typeof setTimeout> | null = null;
+
+/** Check for updates from npm registry */
+export async function checkForUpdate(): Promise<void> {
+	if (updateState.checking || updateState.updating) return;
+
+	updateState.checking = true;
+	updateState.error = null;
+
+	try {
+		const result = await ws.http('system:check-update', {});
+		updateState.currentVersion = result.currentVersion;
+		updateState.latestVersion = result.latestVersion;
+		updateState.updateAvailable = result.updateAvailable;
+
+		// Auto-update if enabled and update is available
+		if (result.updateAvailable && settings.autoUpdate) {
+			debug.log('server', 'Auto-update enabled, starting update...');
+			await runUpdate();
+		}
+	} catch (err) {
+		updateState.error = err instanceof Error ? err.message : 'Failed to check for updates';
+		debug.error('server', 'Update check failed:', err);
+	} finally {
+		updateState.checking = false;
+	}
+}
+
+/** Run the package update */
+export async function runUpdate(): Promise<void> {
+	if (updateState.updating) return;
+
+	updateState.updating = true;
+	updateState.error = null;
+	updateState.updateOutput = null;
+
+	try {
+		const result = await ws.http('system:run-update', {});
+		updateState.updateOutput = result.output;
+		updateState.updateSuccess = true;
+		updateState.updateAvailable = false;
+		updateState.latestVersion = result.newVersion;
+
+		debug.log('server', 'Update completed successfully');
+
+		// Clear success message after 5 seconds
+		if (successTimeout) clearTimeout(successTimeout);
+		successTimeout = setTimeout(() => {
+			updateState.updateSuccess = false;
+			updateState.dismissed = true;
+		}, 5000);
+	} catch (err) {
+		updateState.error = err instanceof Error ? err.message : 'Update failed';
+		debug.error('server', 'Update failed:', err);
+	} finally {
+		updateState.updating = false;
+	}
+}
+
+/** Dismiss the update banner */
+export function dismissUpdate(): void {
+	updateState.dismissed = true;
+}
+
+/** Start periodic update checks (every 30 minutes) */
+export function startUpdateChecker(): void {
+	// Initial check after 5 seconds (let the app settle)
+	setTimeout(() => {
+		checkForUpdate();
+	}, 5000);
+
+	// Periodic check every 30 minutes
+	if (checkInterval) clearInterval(checkInterval);
+	checkInterval = setInterval(() => {
+		updateState.dismissed = false; // Reset dismissal on new checks
+		checkForUpdate();
+	}, 30 * 60 * 1000);
+}
+
+/** Stop periodic update checks */
+export function stopUpdateChecker(): void {
+	if (checkInterval) {
+		clearInterval(checkInterval);
+		checkInterval = null;
+	}
+	if (successTimeout) {
+		clearTimeout(successTimeout);
+		successTimeout = null;
+	}
+}

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

@@ -513,7 +513,7 @@ export const workspaceState = $state<WorkspaceState>({
 	layout: defaultPreset.layout,
 	activePresetId: 'main-stack',
 	navigatorCollapsed: false,
-	navigatorWidth: 220,
+	navigatorWidth: 200,
 	activeMobilePanel: 'chat'
 });
 
@@ -732,8 +732,9 @@ export function toggleNavigator(): void {
 	saveWorkspaceState();
 }
 
-export function setNavigatorWidth(width: number): void {
-	workspaceState.navigatorWidth = Math.max(200, Math.min(400, width));
+export function setNavigatorWidth(width: number, fontSize: number = 13): void {
+	const scale = fontSize / 13;
+	workspaceState.navigatorWidth = Math.max(Math.round(180 * scale), Math.min(Math.round(400 * scale), width));
 	saveWorkspaceState();
 }
 

package/frontend/lib/utils/ws.ts

@@ -6,6 +6,7 @@
 
 import { WSClient } from '$shared/utils/ws-client';
 import type { WSAPI } from '$backend/ws';
+import { setConnectionStatus } from '$frontend/lib/stores/ui/connection.svelte';
 
 /**
  * Get WebSocket URL based on environment
@@ -21,7 +22,10 @@ const ws = new WSClient<WSAPI>(getWebSocketUrl(), {
 	autoReconnect: true,
 	maxReconnectAttempts: 0, // Infinite reconnect
 	reconnectDelay: 1000,
-	maxReconnectDelay: 30000
+	maxReconnectDelay: 30000,
+	onStatusChange: (status, reconnectAttempts) => {
+		setConnectionStatus(status, reconnectAttempts);
+	}
 });
 
 // CRITICAL: Handle Vite HMR to prevent WebSocket connection accumulation

package/index.html

@@ -59,7 +59,7 @@
 		</script>
 	</head>
 	<body
-		class="min-h-screen bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors duration-200"
+		class="min-h-dvh bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors duration-200"
 	>
 		<!-- App mount point -->
 		<div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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/types/database/schema.ts

@@ -107,6 +107,24 @@ export interface MessageSnapshot {
 	branch_id?: string | null; // Branch identifier for multi-branch redo
 	// Blob store format (new): tree hash for content-addressable storage
 	tree_hash?: string | null; // When set, snapshot uses blob store (files in ~/.clopen/snapshots/)
+	// Session-scoped changes: { filepath: { oldHash, newHash } }
+	session_changes?: string | null; // JSON string of SessionScopedChanges
+}
+
+/**
+ * Session-scoped file change entry for a single file
+ */
+export interface SessionFileChange {
+	oldHash: string; // Hash of file content before change
+	newHash: string; // Hash of file content after change
+}
+
+/**
+ * Session-scoped changes map: filepath → { oldHash, newHash }
+ * Used for session-scoped restore and conflict detection
+ */
+export interface SessionScopedChanges {
+	[filepath: string]: SessionFileChange;
 }
 
 /**

package/shared/types/stores/settings.ts

@@ -12,4 +12,8 @@ export interface AppSettings {
 	layoutPresetVisibility: Record<string, boolean>;
 	/** Restrict folder browser to only these base paths. Empty = no restriction. */
 	allowedBasePaths: string[];
+	/** Base font size in pixels (10–20). Default: 13. */
+	fontSize: number;
+	/** Automatically update to the latest version when available. Default: false. */
+	autoUpdate: boolean;
 }