@myrialabs/clopen 0.1.5 → 0.1.6

package/backend/ws/system/operations.ts

@@ -3,14 +3,109 @@
  *
  * HTTP endpoints for system-level operations:
  * - Clear all database data
+ * - Check for package updates
+ * - Run package update
  */
 
 import { t } from 'elysia';
+import { join } from 'node:path';
+import { readFileSync } from 'node:fs';
 import { createRouter } from '$shared/utils/ws-server';
 import { initializeDatabase, getDatabase } from '../../lib/database';
 import { debug } from '$shared/utils/logger';
 
+/** Read current version from package.json */
+function getCurrentVersion(): string {
+	try {
+		const packagePath = join(import.meta.dir, '..', '..', '..', 'package.json');
+		const pkg = JSON.parse(readFileSync(packagePath, 'utf-8'));
+		return pkg.version || '0.0.0';
+	} catch {
+		return '0.0.0';
+	}
+}
+
+/** Fetch latest version from npm registry */
+async function fetchLatestVersion(): Promise<string> {
+	const response = await fetch('https://registry.npmjs.org/@myrialabs/clopen/latest');
+	if (!response.ok) {
+		throw new Error(`npm registry returned ${response.status}`);
+	}
+	const data = await response.json() as { version: string };
+	return data.version;
+}
+
+/** Simple semver comparison: returns true if latest > current */
+function isNewerVersion(current: string, latest: string): boolean {
+	const currentParts = current.split('.').map(Number);
+	const latestParts = latest.split('.').map(Number);
+
+	for (let i = 0; i < 3; i++) {
+		const c = currentParts[i] || 0;
+		const l = latestParts[i] || 0;
+		if (l > c) return true;
+		if (l < c) return false;
+	}
+	return false;
+}
+
 export const operationsHandler = createRouter()
+	// Check for package updates
+	.http('system:check-update', {
+		data: t.Object({}),
+		response: t.Object({
+			currentVersion: t.String(),
+			latestVersion: t.String(),
+			updateAvailable: t.Boolean()
+		})
+	}, async () => {
+		const currentVersion = getCurrentVersion();
+		debug.log('server', `Checking for updates... current version: ${currentVersion}`);
+
+		const latestVersion = await fetchLatestVersion();
+		const updateAvailable = isNewerVersion(currentVersion, latestVersion);
+
+		debug.log('server', `Latest version: ${latestVersion}, update available: ${updateAvailable}`);
+
+		return { currentVersion, latestVersion, updateAvailable };
+	})
+
+	// Run package update
+	.http('system:run-update', {
+		data: t.Object({}),
+		response: t.Object({
+			success: t.Boolean(),
+			output: t.String(),
+			newVersion: t.String()
+		})
+	}, async () => {
+		debug.log('server', 'Running package update...');
+
+		const proc = Bun.spawn(['bun', 'add', '-g', '@myrialabs/clopen@latest'], {
+			stdout: 'pipe',
+			stderr: 'pipe'
+		});
+
+		const [stdout, stderr] = await Promise.all([
+			new Response(proc.stdout).text(),
+			new Response(proc.stderr).text()
+		]);
+
+		const exitCode = await proc.exited;
+		const output = (stdout + '\n' + stderr).trim();
+
+		if (exitCode !== 0) {
+			throw new Error(`Update failed (exit code ${exitCode}): ${output}`);
+		}
+
+		// Re-fetch to confirm new version
+		const newVersion = await fetchLatestVersion();
+
+		debug.log('server', `Update completed. New version: ${newVersion}`);
+
+		return { success: true, output, newVersion };
+	})
+
 	// Clear all database data
 	.http('system:clear-data', {
 		data: t.Object({}),

package/frontend/App.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import WorkspaceLayout from '$frontend/lib/components/workspace/WorkspaceLayout.svelte';
+	import ConnectionBanner from '$frontend/lib/components/common/ConnectionBanner.svelte';
+	import UpdateBanner from '$frontend/lib/components/common/UpdateBanner.svelte';
 	import { backgroundTerminalService } from '$frontend/lib/services/terminal/background';
 	import { initializeMCPPreview } from '$frontend/lib/services/preview';
 	import { globalStreamMonitor } from '$frontend/lib/services/notification/global-stream-monitor';
 	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
+	import { startUpdateChecker, stopUpdateChecker } from '$frontend/lib/stores/ui/update.svelte';
 
 	// NOTE: In Phase 3, we'll need to handle routing for SPA
 	// For now, we'll just render the main workspace
@@ -27,12 +30,26 @@
 
 		// Restore tunnel status from server
 		tunnelStore.checkStatus();
+
+		// Start periodic update checker
+		startUpdateChecker();
+	});
+
+	onDestroy(() => {
+		stopUpdateChecker();
 	});
 </script>
 
-<WorkspaceLayout>
-	{#snippet children()}
-		<!-- Main content will be here -->
-		<!-- TODO: Add SPA router in Phase 3 if needed -->
-	{/snippet}
-</WorkspaceLayout>
+<div class="flex flex-col h-dvh w-screen overflow-hidden">
+	<ConnectionBanner />
+	<UpdateBanner />
+
+	<div class="flex-1 min-h-0">
+		<WorkspaceLayout>
+			{#snippet children()}
+				<!-- Main content will be here -->
+				<!-- TODO: Add SPA router in Phase 3 if needed -->
+			{/snippet}
+		</WorkspaceLayout>
+	</div>
+</div>

package/frontend/lib/components/chat/ChatInterface.svelte

@@ -12,7 +12,7 @@
 <script lang="ts">
 	import { sessionState, setCurrentSession, createNewChatSession, clearMessages, loadMessagesForSession } from '$frontend/lib/stores/core/sessions.svelte';
 	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
-	import { appState } from '$frontend/lib/stores/core/app.svelte';
+	import { appState, isSessionUnread } from '$frontend/lib/stores/core/app.svelte';
 	import { presenceState, isSessionWaitingInput } from '$frontend/lib/stores/core/presence.svelte';
 	import { userStore } from '$frontend/lib/stores/features/user.svelte';
 	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
@@ -294,7 +294,7 @@
 									>
 										<div class="flex-1 min-w-0">
 											<div class="flex items-center gap-1.5">
-												<span class="w-1.5 h-1.5 rounded-full shrink-0 {isStreaming ? (isSessionWaitingInput(session.id, projectState.currentProject?.id) ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500 animate-pulse') : isCurrent ? 'bg-green-500' : 'bg-slate-300 dark:bg-slate-600'}"></span>
+												<span class="w-1.5 h-1.5 rounded-full shrink-0 {isStreaming ? (isSessionWaitingInput(session.id, projectState.currentProject?.id) ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500 animate-pulse') : isCurrent ? 'bg-green-500' : isSessionUnread(session.id) ? 'bg-blue-500' : 'bg-slate-300 dark:bg-slate-600'}"></span>
 												<span class="text-sm font-medium truncate">{getSessionShortTitle(session)}</span>
 											</div>
 											<p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">

package/frontend/lib/components/checkpoint/TimelineModal.svelte

@@ -519,7 +519,7 @@ This will restore your files to this point within this session.`
 					<!-- Diff View -->
 					{#if expandedDiffs.has(conflict.filepath) && conflict.restoreContent && conflict.currentContent}
 						<div class="mb-3">
-							<div class="flex items-center gap-3 mb-1.5 text-[10px] text-slate-500 dark:text-slate-400">
+							<div class="flex items-center gap-3 mb-1.5 text-3xs text-slate-500 dark:text-slate-400">
 								<span class="flex items-center gap-1">
 									<span class="inline-block w-2 h-2 rounded-sm bg-red-400"></span>
 									Restore version

package/frontend/lib/components/common/ConnectionBanner.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { connectionState } from '$frontend/lib/stores/ui/connection.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import ws from '$frontend/lib/utils/ws';
+	import { slide } from 'svelte/transition';
+
+	const showBanner = $derived(
+		connectionState.status !== 'connected' || connectionState.justReconnected
+	);
+
+	const isReconnecting = $derived(connectionState.status === 'reconnecting');
+	const isDisconnected = $derived(connectionState.status === 'disconnected');
+	const isReconnected = $derived(connectionState.justReconnected && connectionState.status === 'connected');
+
+	function handleReconnect() {
+		ws.reconnect();
+	}
+</script>
+
+{#if showBanner}
+	<div
+		transition:slide={{ duration: 300 }}
+		class="flex items-center justify-center gap-2 px-4 py-1.5 text-sm font-medium
+			{isReconnected
+				? 'bg-emerald-600 text-white'
+				: isDisconnected
+					? 'bg-red-600 text-white'
+					: 'bg-amber-600 text-white'}"
+		role="status"
+		aria-live="polite"
+	>
+		{#if isReconnected}
+			<Icon name="lucide:wifi" class="w-4 h-4" />
+			<span>Reconnected</span>
+		{:else if isReconnecting}
+			<Icon name="lucide:loader-circle" class="w-4 h-4 animate-spin" />
+			<span>Reconnecting{#if connectionState.reconnectAttempts > 1}&nbsp;(attempt {connectionState.reconnectAttempts}){/if}...</span>
+			<button
+				onclick={handleReconnect}
+				class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-white/20 hover:bg-white/30 transition-colors"
+			>
+				Reconnect now
+			</button>
+		{:else}
+			<Icon name="lucide:wifi-off" class="w-4 h-4" />
+			<span>Connection lost</span>
+			<button
+				onclick={handleReconnect}
+				class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-white/20 hover:bg-white/30 transition-colors"
+			>
+				Reconnect now
+			</button>
+		{/if}
+	</div>
+{/if}

package/frontend/lib/components/common/UpdateBanner.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { updateState, runUpdate, dismissUpdate, checkForUpdate } from '$frontend/lib/stores/ui/update.svelte';
+	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { slide } from 'svelte/transition';
+
+	const showBanner = $derived(
+		!updateState.dismissed && (
+			updateState.updateAvailable ||
+			updateState.updating ||
+			updateState.updateSuccess ||
+			updateState.error
+		)
+	);
+
+	function handleUpdate() {
+		runUpdate();
+	}
+
+	function handleDismiss() {
+		dismissUpdate();
+	}
+
+	function toggleAutoUpdate() {
+		updateSettings({ autoUpdate: !settings.autoUpdate });
+	}
+
+	function handleRetry() {
+		checkForUpdate();
+	}
+</script>
+
+{#if showBanner}
+	<div
+		transition:slide={{ duration: 300 }}
+		class="flex items-center justify-center gap-2 px-4 py-1.5 text-sm font-medium
+			{updateState.updateSuccess
+				? 'bg-emerald-600 text-white'
+				: updateState.error
+					? 'bg-red-600 text-white'
+					: updateState.updating
+						? 'bg-amber-600 text-white'
+						: 'bg-violet-600 text-white'}"
+		role="status"
+		aria-live="polite"
+	>
+		{#if updateState.updateSuccess}
+			<Icon name="lucide:package-check" class="w-4 h-4" />
+			<span>Updated to v{updateState.latestVersion} — restart clopen to apply</span>
+		{:else if updateState.error}
+			<Icon name="lucide:package-x" class="w-4 h-4" />
+			<span>Update failed</span>
+			<button
+				onclick={handleRetry}
+				class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-white/20 hover:bg-white/30 transition-colors"
+			>
+				Retry
+			</button>
+			<button
+				onclick={handleDismiss}
+				class="ml-1 px-1.5 py-0.5 text-xs rounded bg-white/10 hover:bg-white/20 transition-colors"
+			>
+				<Icon name="lucide:x" class="w-3 h-3" />
+			</button>
+		{:else if updateState.updating}
+			<Icon name="lucide:loader-circle" class="w-4 h-4 animate-spin" />
+			<span>Updating to v{updateState.latestVersion}...</span>
+		{:else}
+			<Icon name="lucide:package" class="w-4 h-4" />
+			<span>
+				v{updateState.latestVersion} available
+				<span class="opacity-70">(current: v{updateState.currentVersion})</span>
+			</span>
+			<button
+				onclick={handleUpdate}
+				class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-white/20 hover:bg-white/30 transition-colors"
+			>
+				Update now
+			</button>
+			<button
+				onclick={handleDismiss}
+				class="ml-1 px-1.5 py-0.5 text-xs rounded bg-white/10 hover:bg-white/20 transition-colors"
+			>
+				<Icon name="lucide:x" class="w-3 h-3" />
+			</button>
+		{/if}
+	</div>
+{/if}

package/frontend/lib/components/history/HistoryModal.svelte

@@ -11,6 +11,7 @@
 	import Modal from '$frontend/lib/components/common/Modal.svelte';
 	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
 	import { presenceState, isSessionWaitingInput } from '$frontend/lib/stores/core/presence.svelte';
+	import { isSessionUnread } from '$frontend/lib/stores/core/app.svelte';
 	import { userStore } from '$frontend/lib/stores/features/user.svelte';
 	import { debug } from '$shared/utils/logger';
 
@@ -475,6 +476,10 @@
 									<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 {isSessionWaitingInput(session.id, projectState.currentProject?.id) ? 'bg-amber-500' : 'bg-emerald-500'}"
 									></span>
+								{:else if isSessionUnread(session.id)}
+									<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 bg-blue-500"
+									></span>
 								{:else}
 									<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 bg-slate-300 dark:bg-slate-600"

package/frontend/lib/components/settings/SettingsModal.svelte

@@ -83,7 +83,7 @@
 			role="dialog"
 			aria-labelledby="settings-title"
 			tabindex="-1"
-			class="flex flex-col w-full max-w-225 h-[85vh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-violet-500/20 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-screen max-md:max-h-screen max-md:rounded-none"
+			class="flex flex-col w-full max-w-225 h-[85dvh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-violet-500/20 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-dvh max-md:max-h-dvh max-md:rounded-none"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 			in:scale={{ duration: 250, easing: cubicOut, start: 0.95 }}
@@ -100,7 +100,7 @@
 						onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
 						aria-label="Toggle menu"
 					>
-						<Icon name={isMobileMenuOpen ? 'lucide:x' : 'lucide:menu'} class="w-5 h-5" />
+						<Icon name={isMobileMenuOpen ? 'lucide:arrow-left' : 'lucide:menu'} class="w-5 h-5" />
 					</button>
 					<h2
 						id="settings-title"

package/frontend/lib/components/settings/general/GeneralSettings.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import DataManagementSettings from './DataManagementSettings.svelte';
 	import AdvancedSettings from './AdvancedSettings.svelte';
+	import UpdateSettings from './UpdateSettings.svelte';
 </script>
 
-<DataManagementSettings />
+<UpdateSettings />
+
+<div class="mt-6">
+	<DataManagementSettings />
+</div>
 
 <div class="mt-6">
 	<AdvancedSettings />

package/frontend/lib/components/settings/general/UpdateSettings.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { updateState, checkForUpdate, runUpdate } from '$frontend/lib/stores/ui/update.svelte';
+	import Icon from '../../common/Icon.svelte';
+
+	function toggleAutoUpdate() {
+		updateSettings({ autoUpdate: !settings.autoUpdate });
+	}
+
+	function handleCheckNow() {
+		checkForUpdate();
+	}
+
+	function handleUpdateNow() {
+		runUpdate();
+	}
+</script>
+
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Updates</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Check for new versions and configure automatic updates</p>
+
+	<div class="flex flex-col gap-3.5">
+		<!-- Version Info -->
+		<div class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl">
+			<div class="flex items-start gap-3.5">
+				<div class="flex items-center justify-center w-10 h-10 rounded-lg shrink-0 bg-violet-400/15 text-violet-500">
+					<Icon name="lucide:package" class="w-5 h-5" />
+				</div>
+				<div class="flex flex-col gap-1 min-w-0 flex-1">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">
+						@myrialabs/clopen
+					</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">
+						{#if updateState.currentVersion}
+							Current version: <span class="font-mono font-medium text-slate-700 dark:text-slate-400">v{updateState.currentVersion}</span>
+						{:else}
+							Version info will appear after checking
+						{/if}
+					</div>
+					{#if updateState.updateAvailable}
+						<div class="text-xs">
+							<span class="inline-flex items-center gap-1 px-1.5 py-0.5 bg-violet-500/15 text-violet-600 dark:text-violet-400 rounded text-2xs font-semibold">
+								v{updateState.latestVersion} available
+							</span>
+						</div>
+					{/if}
+				</div>
+
+				<div class="flex items-center gap-2 shrink-0">
+					{#if updateState.updateAvailable}
+						<button
+							type="button"
+							onclick={handleUpdateNow}
+							disabled={updateState.updating}
+							class="inline-flex items-center gap-1.5 py-2 px-3.5 bg-violet-500/10 border border-violet-500/20 rounded-lg text-violet-600 dark:text-violet-400 text-xs font-semibold cursor-pointer transition-all duration-150 hover:bg-violet-500/20 hover:border-violet-600/40 disabled:opacity-60 disabled:cursor-not-allowed"
+						>
+							{#if updateState.updating}
+								<div class="w-3.5 h-3.5 border-2 border-violet-600/30 border-t-violet-600 rounded-full animate-spin"></div>
+								Updating...
+							{:else}
+								<Icon name="lucide:download" class="w-3.5 h-3.5" />
+								Update
+							{/if}
+						</button>
+					{/if}
+					<button
+						type="button"
+						onclick={handleCheckNow}
+						disabled={updateState.checking}
+						class="inline-flex items-center gap-1.5 py-2 px-3.5 bg-slate-200/80 dark:bg-slate-700/80 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-700 dark:text-slate-300 text-xs font-semibold cursor-pointer transition-all duration-150 hover:bg-slate-300 dark:hover:bg-slate-600 disabled:opacity-60 disabled:cursor-not-allowed"
+					>
+						{#if updateState.checking}
+							<div class="w-3.5 h-3.5 border-2 border-slate-600/30 border-t-slate-600 dark:border-slate-400/30 dark:border-t-slate-400 rounded-full animate-spin"></div>
+							Checking...
+						{:else}
+							<Icon name="lucide:refresh-cw" class="w-3.5 h-3.5" />
+							Check now
+						{/if}
+					</button>
+				</div>
+			</div>
+
+			{#if updateState.error}
+				<div class="mt-3 flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg">
+					<Icon name="lucide:circle-alert" class="w-4 h-4 text-red-500 shrink-0" />
+					<span class="text-xs text-red-600 dark:text-red-400">{updateState.error}</span>
+				</div>
+			{/if}
+
+			{#if updateState.updateSuccess}
+				<div class="mt-3 flex items-center gap-2 px-3 py-2 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
+					<Icon name="lucide:circle-check" class="w-4 h-4 text-emerald-500 shrink-0" />
+					<span class="text-xs text-emerald-600 dark:text-emerald-400">Updated successfully — restart clopen to apply</span>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Auto-Update Toggle -->
+		<div class="flex items-center justify-between gap-4 py-3 px-4 bg-slate-100/50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-lg">
+			<div class="flex items-center gap-3">
+				<Icon name="lucide:refresh-cw" class="w-4.5 h-4.5 text-slate-600 dark:text-slate-400" />
+				<div class="text-left">
+					<div class="text-sm font-medium text-slate-900 dark:text-slate-100">Auto-update</div>
+					<div class="text-xs text-slate-600 dark:text-slate-400">Automatically install new versions when available</div>
+				</div>
+			</div>
+			<button
+				type="button"
+				role="switch"
+				aria-checked={settings.autoUpdate}
+				onclick={toggleAutoUpdate}
+				class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-violet-500/30
+					{settings.autoUpdate ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-600'}"
+			>
+				<span
+					class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out
+						{settings.autoUpdate ? 'translate-x-5' : 'translate-x-0'}"
+				></span>
+			</button>
+		</div>
+	</div>
+</div>

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

@@ -138,7 +138,7 @@
 
 <!-- Main Workspace Layout -->
 <div
-	class="h-screen w-screen overflow-hidden {isMobile ? 'bg-white/90 dark:bg-slate-900/98' : 'bg-slate-50 dark:bg-slate-900/70'} text-slate-900 dark:text-slate-100 font-sans"
+	class="h-full w-full overflow-hidden {isMobile ? 'bg-white/90 dark:bg-slate-900/98' : 'bg-slate-50 dark:bg-slate-900/70'} text-slate-900 dark:text-slate-100 font-sans"
 >
 	<!-- Skip link for accessibility -->
 	<a

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

@@ -9,7 +9,8 @@
 
 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';
+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<{
@@ -30,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, {
@@ -38,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;
 	});
@@ -84,27 +95,33 @@ export function isSessionWaitingInput(chatSessionId: string, projectId?: string)
 
 /**
  * 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)
+ * - 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);
-	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 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';
 
-	// 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';
+	}
 
-	// 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

@@ -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.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/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}`,