@myrialabs/clopen 0.1.4 → 0.1.5

package/frontend/lib/components/workspace/MobileNavigator.svelte

@@ -8,7 +8,7 @@
 		type PanelId
 	} from '$frontend/lib/stores/ui/workspace.svelte';
 	import { projectState, removeProject } from '$frontend/lib/stores/core/projects.svelte';
-	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
+	import { presenceState, getProjectStatusColor } from '$frontend/lib/stores/core/presence.svelte';
 	import { openSettingsModal } from '$frontend/lib/stores/ui/settings-modal.svelte';
 	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
@@ -65,18 +65,7 @@
 		}
 	}
 
-	// Get status color from presence data (single source of truth from backend)
-	// Shows real-time status for ALL projects, not just the active one.
-	// Uses backend-computed isWaitingInput so background sessions are accurate
-	// even when the frontend hasn't received their chat events.
-	function getStatusColor(projectId: string): string {
-		const status = presenceState.statuses.get(projectId);
-		if (!status?.streams) return 'bg-slate-500/30';
-		const activeStreams = status.streams.filter((s: any) => s.status === 'active');
-		if (activeStreams.length === 0) return 'bg-slate-500/30';
-		const hasWaitingInput = activeStreams.some((s: any) => s.isWaitingInput);
-		return hasWaitingInput ? 'bg-amber-500' : 'bg-emerald-500';
-	}
+	// Status color for project indicator — uses shared helper from presence store
 
 	function openAddProject() {
 		showProjectMenu = false;
@@ -162,7 +151,7 @@
 		aria-expanded={showProjectMenu}
 		aria-haspopup="menu"
 	>
-		<div class="relative shrink-0"><Icon name="lucide:folder-open" class="w-4 h-4" /><span class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-slate-100 dark:border-slate-800 {getStatusColor(projectState.currentProject?.id ?? '')}"></span></div>
+		<div class="relative shrink-0"><Icon name="lucide:folder-open" class="w-4 h-4" /><span class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-slate-100 dark:border-slate-800 {getProjectStatusColor(projectState.currentProject?.id ?? '')}"></span></div>
 		<span class="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap">
 			{projectState.currentProject?.name ?? 'No Project'}
 		</span>
@@ -315,7 +304,7 @@
 							>
 								<Icon name="lucide:folder" class="text-violet-600 dark:text-violet-400 w-4 h-4" />
 								<span
-									class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 {getStatusColor(project.id ?? '')}"
+									class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 {getProjectStatusColor(project.id ?? '')}"
 								></span>
 							</div>
 							<div class="flex-1 min-w-0">

package/frontend/lib/components/workspace/panels/FilesPanel.svelte

@@ -12,6 +12,7 @@
 	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
 	import type { FileNode } from '$shared/types/filesystem';
 	import { debug } from '$shared/utils/logger';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import { onMount, onDestroy } from 'svelte';
 	import ws from '$frontend/lib/utils/ws';
 	import { showConfirm } from '$frontend/lib/stores/ui/dialog.svelte';
@@ -138,7 +139,7 @@
 	// Container width detection for 2-column layout
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let containerWidth = $state(0);
-	const TWO_COLUMN_THRESHOLD = 800;
+	const TWO_COLUMN_THRESHOLD = $derived(Math.round(600 * (settings.fontSize / 13)));
 
 	// FileTree ref
 	let fileTreeRef = $state<any>(null);
@@ -1185,7 +1186,7 @@
 				<!-- Tree panel: always rendered, hidden via CSS in 1-column viewer mode -->
 				<div
 					class={isTwoColumnMode
-						? 'w-80 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700'
+						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700'
 						: (viewMode === 'tree' ? 'w-full h-full overflow-hidden' : 'hidden')}
 				>
 					<div class="h-full overflow-auto" bind:this={treeScrollContainer}>

package/frontend/lib/components/workspace/panels/GitPanel.svelte

@@ -5,6 +5,7 @@
 	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
 	import { showError, showInfo } from '$frontend/lib/stores/ui/notification.svelte';
 	import { debug } from '$shared/utils/logger';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import ws from '$frontend/lib/utils/ws';
 	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
 	import { getGitStatusLabel, getGitStatusColor } from '$frontend/lib/utils/git-status';
@@ -131,7 +132,7 @@
 	// Container width for responsive layout (same threshold as Files: 800)
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let containerWidth = $state(0);
-	const TWO_COLUMN_THRESHOLD = 800;
+	const TWO_COLUMN_THRESHOLD = $derived(Math.round(600 * (settings.fontSize / 13)));
 	const isTwoColumnMode = $derived(containerWidth >= TWO_COLUMN_THRESHOLD);
 
 	// Track last project for re-fetch
@@ -1504,7 +1505,7 @@
 				<!-- Left panel: Changes list (w-80 like Files panel tree) -->
 				<div
 					class={isTwoColumnMode
-						? 'w-80 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700 flex flex-col'
+						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700 flex flex-col'
 						: (viewMode === 'list' ? 'w-full h-full overflow-hidden flex flex-col' : 'hidden')}
 				>
 					{@render changesList()}

package/frontend/lib/services/notification/global-stream-monitor.ts

@@ -3,12 +3,13 @@
  *
  * Single source of truth for chat stream notifications (sound + push).
  *
- * Listens for chat:stream-finished events from the backend and triggers
- * notifications for ALL projects — both active and non-active.
+ * Listens for backend events and triggers notifications for ALL projects —
+ * both active and non-active:
+ * - chat:stream-finished  → stream completed/errored/cancelled
+ * - chat:waiting-input    → AskUserQuestion requires user input
  *
- * The backend uses ws.emit.projectMembers() to send this event to all
- * users who have been associated with the project, even if they switched
- * to a different project.
+ * The backend uses ws.emit.projectMembers() so notifications reach users
+ * even when they are on a different project or session.
  */
 
 import { soundNotification, pushNotification } from '$frontend/lib/services/notification';
@@ -19,27 +20,27 @@ import ws from '$frontend/lib/utils/ws';
 class GlobalStreamMonitor {
   private initialized = false;
 
+  /** Track notified AskUserQuestion tool_use IDs to ensure once-only notification */
+  private notifiedToolUseIds = new Set<string>();
+
   /**
-   * Initialize the monitor - subscribes to the WS event.
+   * Initialize the monitor - subscribes to WS events.
    * Safe to call multiple times (idempotent).
-   *
-   * Triggers sound/push for ALL projects the user is a member of,
-   * not just the active one — background streams deserve notifications too.
    */
   initialize(): void {
     if (this.initialized) return;
     this.initialized = true;
 
-    debug.log('notification', 'GlobalStreamMonitor: Initializing WS listener');
+    debug.log('notification', 'GlobalStreamMonitor: Initializing WS listeners');
 
+    // Stream finished — notify on completion
     ws.on('chat:stream-finished', async (data) => {
-      const { projectId, status, timestamp } = data;
+      const { projectId, status, chatSessionId } = data;
+
+      debug.log('notification', 'GlobalStreamMonitor: Stream finished', { projectId, status });
 
-      debug.log('notification', 'GlobalStreamMonitor: Stream finished', {
-        projectId,
-        status,
-        timestamp
-      });
+      // Clean up notified IDs for this session (stream is done)
+      this.clearSessionNotifications(chatSessionId);
 
       // Play sound notification
       try {
@@ -63,12 +64,51 @@ class GlobalStreamMonitor {
         debug.error('notification', 'Error sending push notification:', error);
       }
     });
+
+    // Waiting for input — notify once per AskUserQuestion
+    ws.on('chat:waiting-input', async (data) => {
+      const { projectId, chatSessionId, toolUseId } = data;
+
+      // Deduplicate: only notify once per tool_use ID
+      if (this.notifiedToolUseIds.has(toolUseId)) return;
+      this.notifiedToolUseIds.add(toolUseId);
+
+      debug.log('notification', 'GlobalStreamMonitor: Waiting for input', { projectId, chatSessionId, toolUseId });
+
+      // Play sound notification
+      try {
+        await soundNotification.play();
+      } catch (error) {
+        debug.error('notification', 'Error playing sound notification:', error);
+      }
+
+      // Send push notification
+      try {
+        const projectName = projectState.projects.find(p => p.id === projectId)?.name || 'Unknown';
+        await pushNotification.sendChatComplete(`Waiting for your input in "${projectName}"`);
+      } catch (error) {
+        debug.error('notification', 'Error sending push notification:', error);
+      }
+    });
+  }
+
+  /**
+   * Remove tracked tool_use IDs for a finished session
+   */
+  private clearSessionNotifications(chatSessionId: string): void {
+    // Tool IDs are globally unique, so a simple clear-on-stream-finish
+    // is enough — they won't collide across sessions.
+    // For long-running apps, periodically trim to avoid unbounded growth.
+    if (this.notifiedToolUseIds.size > 500) {
+      this.notifiedToolUseIds.clear();
+    }
   }
 
   /**
    * Clear state (for cleanup/testing)
    */
   clear(): void {
+    this.notifiedToolUseIds.clear();
     debug.log('notification', 'GlobalStreamMonitor: Clearing state');
   }
 }

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/presence.svelte.ts

@@ -2,11 +2,14 @@
  * 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 } from '$frontend/lib/stores/core/app.svelte';
 
 // Shared reactive state
 export const presenceState = $state<{
@@ -46,3 +49,62 @@ 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.
+ * - Gray  (bg-slate-500/30) : no active streams (idle)
+ * 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
+ * - Gray  (bg-slate-500/30) : no active streams (idle)
+ *
+ * Merges backend presence with frontend app state for accuracy.
+ */
+export function getProjectStatusColor(projectId: string): string {
+	const status = presenceState.statuses.get(projectId);
+	if (!status?.streams) return 'bg-slate-500/30';
+
+	const activeStreams = status.streams.filter((s: any) => s.status === 'active');
+	if (activeStreams.length === 0) return 'bg-slate-500/30';
+
+	// 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';
+}

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

@@ -32,12 +32,19 @@ const defaultSettings: AppSettings = {
 	soundNotifications: true,
 	pushNotifications: false,
 	layoutPresetVisibility: createDefaultPresetVisibility(),
-	allowedBasePaths: []
+	allowedBasePaths: [],
+	fontSize: 13
 };
 
 // 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 +53,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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,6 @@ 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;
 }