@myrialabs/clopen 0.1.5 → 0.1.7

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

@@ -33,7 +33,8 @@ const defaultSettings: AppSettings = {
 	pushNotifications: false,
 	layoutPresetVisibility: createDefaultPresetVisibility(),
 	allowedBasePaths: [],
-	fontSize: 13
+	fontSize: 13,
+	autoUpdate: false
 };
 
 // Create and export reactive settings state directly (starts with defaults)

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/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.5",
+  "version": "0.1.7",
   "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",
@@ -60,6 +60,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@tailwindcss/vite": "^4.1.11",
     "@types/bun": "^1.2.18",
+    "@types/node": "^24.0.14",
     "@types/qrcode": "^1.5.6",
     "@types/xterm": "^3.0.0",
     "concurrently": "^9.2.1",
@@ -82,18 +83,11 @@
     "@modelcontextprotocol/sdk": "^1.26.0",
     "@monaco-editor/loader": "^1.5.0",
     "@opencode-ai/sdk": "^1.2.15",
-    "@tailwindcss/typography": "^0.5.16",
-    "@types/marked": "^5.0.2",
-    "@types/node": "^24.0.14",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
     "bun-pty": "^0.4.2",
-    "canvas": "^3.1.2",
-    "chokidar": "^4.0.3",
     "cloudflared": "^0.7.1",
-    "devtools-detector": "^2.0.23",
     "elysia": "^1.4.19",
-    "eruda": "^3.4.3",
     "file-type": "^21.0.0",
     "is-text-path": "^3.0.0",
     "marked": "^16.1.1",
@@ -102,8 +96,6 @@
     "puppeteer": "^24.33.0",
     "puppeteer-cluster": "^0.25.0",
     "qrcode": "^1.5.4",
-    "sharp": "^0.34.3",
-    "werift": "^0.22.2",
     "xterm": "^5.3.0"
   },
   "trustedDependencies": [

package/shared/types/stores/settings.ts

@@ -14,4 +14,6 @@ export interface AppSettings {
 	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;
 }

package/shared/utils/ws-client.ts

@@ -37,6 +37,11 @@ const BINARY_ACTIONS = new Set<string>([
 // Client Options
 // ============================================================================
 
+/**
+ * Connection status for external consumers
+ */
+export type WSConnectionStatus = 'connected' | 'disconnected' | 'reconnecting';
+
 /**
  * WebSocket client options
  */
@@ -49,6 +54,8 @@ export interface WSClientOptions {
 	reconnectDelay?: number;
 	/** Maximum reconnect delay in ms */
 	maxReconnectDelay?: number;
+	/** Callback when connection status changes */
+	onStatusChange?: (status: WSConnectionStatus, reconnectAttempts: number) => void;
 }
 
 // ============================================================================
@@ -197,7 +204,7 @@ function decodeBinaryMessage(buffer: ArrayBuffer): { action: string; payload: an
 export class WSClient<TAPI extends { client: any; server: any }> {
 	private ws: WebSocket | null = null;
 	private url: string;
-	private options: Required<WSClientOptions>;
+	private options: Required<Omit<WSClientOptions, 'onStatusChange'>> & Pick<WSClientOptions, 'onStatusChange'>;
 	private reconnectAttempts = 0;
 	private reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
 	private listeners = new Map<string, Set<(payload: any) => void>>();
@@ -226,7 +233,8 @@ export class WSClient<TAPI extends { client: any; server: any }> {
 			autoReconnect: options.autoReconnect ?? true,
 			maxReconnectAttempts: options.maxReconnectAttempts ?? 5,
 			reconnectDelay: options.reconnectDelay ?? 1000,
-			maxReconnectDelay: options.maxReconnectDelay ?? 30000
+			maxReconnectDelay: options.maxReconnectDelay ?? 30000,
+			onStatusChange: options.onStatusChange ?? undefined
 		};
 
 		this.connect();
@@ -262,6 +270,7 @@ export class WSClient<TAPI extends { client: any; server: any }> {
 				debug.log('websocket', 'Connected');
 				this.isConnected = true;
 				this.reconnectAttempts = 0;
+				this.options.onStatusChange?.('connected', 0);
 
 				// Sync context on reconnection - MUST await before flushing queue
 				if (this.context.userId || this.context.projectId) {
@@ -320,7 +329,10 @@ export class WSClient<TAPI extends { client: any; server: any }> {
 
 				// Auto-reconnect
 				if (this.shouldReconnect && this.options.autoReconnect) {
+					this.options.onStatusChange?.('reconnecting', this.reconnectAttempts);
 					this.scheduleReconnect();
+				} else {
+					this.options.onStatusChange?.('disconnected', this.reconnectAttempts);
 				}
 			};
 		} catch (err) {
@@ -389,6 +401,7 @@ export class WSClient<TAPI extends { client: any; server: any }> {
 	private scheduleReconnect(): void {
 		if (this.options.maxReconnectAttempts > 0 && this.reconnectAttempts >= this.options.maxReconnectAttempts) {
 			debug.error('websocket', 'Max reconnect attempts reached');
+			this.options.onStatusChange?.('disconnected', this.reconnectAttempts);
 			return;
 		}
 
@@ -399,6 +412,7 @@ export class WSClient<TAPI extends { client: any; server: any }> {
 		);
 
 		debug.log('websocket', `Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);
+		this.options.onStatusChange?.('reconnecting', this.reconnectAttempts);
 
 		this.reconnectTimeout = setTimeout(() => {
 			this.connect();

package/vite.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
 	server: {
 		port: frontendPort,
 		strictPort: false,
+		allowedHosts: true,
 		proxy: {
 			'/api': {
 				target: `http://localhost:${backendPort}`,