@myrialabs/clopen 0.1.5 → 0.1.7

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/files/FileTree.svelte

@@ -222,19 +222,14 @@
 		}
 	}
 
-	// Toggle search visibility (preserve inputs, auto-submit on re-open)
-	function toggleSearch() {
-		searchVisible = !searchVisible;
-		if (searchVisible) {
-			setTimeout(() => {
-				searchInputRef?.focus();
-				// Auto-submit if there's already a query
-				if (searchQuery.trim()) {
-					performSearch();
-				}
-			}, 100);
-		}
-		// Don't clear search state on close - preserve inputs
+	function switchToSearch() {
+		searchVisible = true;
+		setTimeout(() => {
+			searchInputRef?.focus();
+			if (searchQuery.trim()) {
+				performSearch();
+			}
+		}, 100);
 	}
 
 	// Search functions
@@ -454,15 +449,7 @@
 						<Icon name="lucide:folder-plus" class="w-4 h-4" />
 					</button>
 				{/if}
-				<!-- Search toggle button -->
-				<button
-					class="flex flex-shrink-0 p-1.5 rounded-md transition-colors {searchVisible ? 'text-violet-600 dark:text-violet-400 bg-violet-50 dark:bg-violet-900/30' : 'text-slate-600 dark:text-slate-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/30'}"
-					onclick={toggleSearch}
-					title="Search"
-				>
-					<Icon name="lucide:search" class="w-4 h-4" />
-				</button>
-				{#if hasClipboard && onPasteToRoot}
+					{#if hasClipboard && onPasteToRoot}
 					<button
 						class="flex flex-shrink-0 p-1.5 text-slate-600 dark:text-slate-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/30 rounded-md transition-colors"
 						onclick={onPasteToRoot}
@@ -475,7 +462,31 @@
 		</div>
 	</div>
 
-	<!-- Search Bar (toggle) -->
+	<!-- Tab Navigation -->
+	<div class="relative flex border-b border-slate-200 dark:border-slate-700">
+		<button
+			onclick={() => { searchVisible = false; }}
+			class="relative flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors {!searchVisible ? 'text-violet-600 dark:text-violet-400' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
+		>
+			<Icon name="lucide:folder" class="w-3.5 h-3.5" />
+			Explorer
+			{#if !searchVisible}
+				<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+			{/if}
+		</button>
+		<button
+			onclick={switchToSearch}
+			class="relative flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors {searchVisible ? 'text-violet-600 dark:text-violet-400' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
+		>
+			<Icon name="lucide:search" class="w-3.5 h-3.5" />
+			Search
+			{#if searchVisible}
+				<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+			{/if}
+		</button>
+	</div>
+
+	<!-- Search Bar -->
 	{#if searchVisible}
 		<div class="px-3 py-2 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
 			<!-- Search Input -->

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