@myrialabs/clopen 0.1.8 → 0.1.9

package/backend/lib/database/migrations/023_create_user_unread_sessions_table.ts

@@ -0,0 +1,32 @@
+import type { DatabaseConnection } from '$shared/types/database/connection';
+import { debug } from '$shared/utils/logger';
+
+export const description = 'Create user_unread_sessions table for persisting per-user unread session state';
+
+export const up = (db: DatabaseConnection): void => {
+	debug.log('migration', 'Creating user_unread_sessions table...');
+
+	db.exec(`
+		CREATE TABLE IF NOT EXISTS user_unread_sessions (
+			user_id TEXT NOT NULL,
+			session_id TEXT NOT NULL,
+			project_id TEXT NOT NULL,
+			marked_at TEXT NOT NULL,
+			PRIMARY KEY (user_id, session_id),
+			FOREIGN KEY (session_id) REFERENCES chat_sessions(id) ON DELETE CASCADE
+		)
+	`);
+
+	db.exec(`
+		CREATE INDEX IF NOT EXISTS idx_user_unread_sessions_user_project
+		ON user_unread_sessions(user_id, project_id)
+	`);
+
+	debug.log('migration', 'user_unread_sessions table created');
+};
+
+export const down = (db: DatabaseConnection): void => {
+	debug.log('migration', 'Dropping user_unread_sessions table...');
+	db.exec('DROP TABLE IF EXISTS user_unread_sessions');
+	debug.log('migration', 'user_unread_sessions table dropped');
+};

package/backend/lib/database/migrations/index.ts

@@ -21,6 +21,7 @@ import * as migration019 from './019_add_claude_account_to_sessions';
 import * as migration020 from './020_add_snapshot_tree_hash';
 import * as migration021 from './021_drop_prompt_templates_table';
 import * as migration022 from './022_add_snapshot_changes_column';
+import * as migration023 from './023_create_user_unread_sessions_table';
 
 // Export all migrations in order
 export const migrations = [
@@ -155,6 +156,12 @@ export const migrations = [
 		description: migration022.description,
 		up: migration022.up,
 		down: migration022.down
+	},
+	{
+		id: '023',
+		description: migration023.description,
+		up: migration023.up,
+		down: migration023.down
 	}
 ];
 

package/backend/lib/database/queries/session-queries.ts

@@ -267,5 +267,42 @@ export const sessionQueries = {
 			SET head_message_id = ?
 			WHERE session_id = ? AND branch_name = ?
 		`).run(newHeadMessageId, sessionId, branchName);
+	},
+
+	// ==================== PER-USER UNREAD SESSION TRACKING ====================
+
+	/**
+	 * Mark a session as unread for a specific user
+	 */
+	markUnread(userId: string, sessionId: string, projectId: string): void {
+		const db = getDatabase();
+		const now = new Date().toISOString();
+		db.prepare(`
+			INSERT OR IGNORE INTO user_unread_sessions (user_id, session_id, project_id, marked_at)
+			VALUES (?, ?, ?, ?)
+		`).run(userId, sessionId, projectId, now);
+	},
+
+	/**
+	 * Mark a session as read for a specific user
+	 */
+	markRead(userId: string, sessionId: string): void {
+		const db = getDatabase();
+		db.prepare(`
+			DELETE FROM user_unread_sessions
+			WHERE user_id = ? AND session_id = ?
+		`).run(userId, sessionId);
+	},
+
+	/**
+	 * Get all unread session IDs for a user within a project
+	 * Returns array of { sessionId, projectId }
+	 */
+	getUnreadSessions(userId: string, projectId: string): { session_id: string; project_id: string }[] {
+		const db = getDatabase();
+		return db.prepare(`
+			SELECT session_id, project_id FROM user_unread_sessions
+			WHERE user_id = ? AND project_id = ?
+		`).all(userId, projectId) as { session_id: string; project_id: string }[];
 	}
 };

package/backend/ws/sessions/crud.ts

@@ -33,7 +33,11 @@ export const crudHandler = createRouter()
 				started_at: t.String(),
 				ended_at: t.Optional(t.String())
 			})),
-			currentSessionId: t.Optional(t.String())
+			currentSessionId: t.Optional(t.String()),
+			unreadSessionIds: t.Array(t.Object({
+				sessionId: t.String(),
+				projectId: t.String()
+			}))
 		})
 	}, async ({ conn }) => {
 		const projectId = ws.getProjectId(conn);
@@ -43,6 +47,10 @@ export const crudHandler = createRouter()
 		// Get the user's saved current session for this project
 		const currentSessionId = projectQueries.getCurrentSessionId(userId, projectId);
 
+		// Get unread sessions for this user/project
+		const unreadRows = sessionQueries.getUnreadSessions(userId, projectId);
+		debug.log('session', `[unread] sessions:list — user=${userId}, project=${projectId}, unreadCount=${unreadRows.length}`, unreadRows);
+
 		// Convert null to undefined for TypeScript optional fields
 		return {
 			sessions: sessions.map(session => ({
@@ -54,7 +62,8 @@ export const crudHandler = createRouter()
 				current_head_message_id: session.current_head_message_id ?? undefined,
 				ended_at: session.ended_at ?? undefined
 			})),
-			currentSessionId: currentSessionId ?? undefined
+			currentSessionId: currentSessionId ?? undefined,
+			unreadSessionIds: unreadRows.map(r => ({ sessionId: r.session_id, projectId: r.project_id }))
 		};
 	})
 
@@ -324,4 +333,27 @@ export const crudHandler = createRouter()
 		const userId = ws.getUserId(conn);
 		projectQueries.setCurrentSessionId(userId, projectId, data.sessionId);
 		debug.log('session', `User ${userId} set current session to ${data.sessionId} in project ${projectId}`);
+	})
+
+	// Mark a session as read for the current user
+	.on('sessions:mark-read', {
+		data: t.Object({
+			sessionId: t.String()
+		})
+	}, async ({ data, conn }) => {
+		const userId = ws.getUserId(conn);
+		sessionQueries.markRead(userId, data.sessionId);
+		debug.log('session', `[unread] Marked session ${data.sessionId} as READ for user ${userId}`);
+	})
+
+	// Mark a session as unread for the current user
+	.on('sessions:mark-unread', {
+		data: t.Object({
+			sessionId: t.String(),
+			projectId: t.String()
+		})
+	}, async ({ data, conn }) => {
+		const userId = ws.getUserId(conn);
+		sessionQueries.markUnread(userId, data.sessionId, data.projectId);
+		debug.log('session', `[unread] Marked session ${data.sessionId} as UNREAD for user ${userId} in project ${data.projectId}`);
 	});

package/backend/ws/user/crud.ts

@@ -108,7 +108,8 @@ export const crudHandler = createRouter()
 		response: t.Object({
 			currentProjectId: t.Union([t.String(), t.Null()]),
 			lastView: t.Union([t.String(), t.Null()]),
-			settings: t.Union([t.Any(), t.Null()])
+			settings: t.Union([t.Any(), t.Null()]),
+			unreadSessions: t.Union([t.Any(), t.Null()])
 		})
 	}, async ({ conn }) => {
 		const userId = ws.getUserId(conn);
@@ -116,17 +117,20 @@ export const crudHandler = createRouter()
 		const currentProjectId = getUserState(userId, 'currentProjectId') as string | null;
 		const lastView = getUserState(userId, 'lastView') as string | null;
 		const userSettings = getUserState(userId, 'settings');
+		const unreadSessions = getUserState(userId, 'unreadSessions');
 
 		debug.log('user', `Restored state for ${userId}:`, {
 			currentProjectId,
 			lastView,
-			hasSettings: !!userSettings
+			hasSettings: !!userSettings,
+			unreadSessionsCount: unreadSessions ? Object.keys(unreadSessions).length : 0
 		});
 
 		return {
 			currentProjectId: currentProjectId ?? null,
 			lastView: lastView ?? null,
-			settings: userSettings ?? null
+			settings: userSettings ?? null,
+			unreadSessions: unreadSessions ?? null
 		};
 	})
 
@@ -143,7 +147,7 @@ export const crudHandler = createRouter()
 		const userId = ws.getUserId(conn);
 
 		// Validate allowed keys to prevent arbitrary data storage
-		const allowedKeys = ['currentProjectId', 'lastView', 'settings'];
+		const allowedKeys = ['currentProjectId', 'lastView', 'settings', 'unreadSessions'];
 		if (!allowedKeys.includes(data.key)) {
 			throw new Error(`Invalid state key: ${data.key}. Allowed: ${allowedKeys.join(', ')}`);
 		}

package/frontend/lib/components/git/GitLog.svelte

@@ -14,6 +14,25 @@
 	const { commits, isLoading, hasMore, onLoadMore, onViewCommit }: Props = $props();
 
 	let selectedHash = $state('');
+	let sentinelEl = $state<HTMLDivElement | null>(null);
+
+	// Infinite scroll: auto load more when sentinel is visible
+	$effect(() => {
+		const el = sentinelEl;
+		if (!el || !hasMore) return;
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting && hasMore && !isLoading) {
+					onLoadMore();
+				}
+			},
+			{ rootMargin: '100px' }
+		);
+
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
 
 	// ========================
 	// Git Graph Computation
@@ -325,7 +344,7 @@
 					<div class="flex-1 min-w-0 px-1.5 py-0.5 flex flex-col justify-center overflow-hidden">
 						<!-- Line 1: Message + Date -->
 						<div class="flex items-center gap-2">
-							<p class="flex-1 min-w-0 text-sm text-slate-900 dark:text-slate-100 leading-tight truncate">
+							<p class="flex-1 min-w-0 text-sm text-slate-900 dark:text-slate-100 leading-tight truncate" title={commit.message}>
 								{commit.message}
 							</p>
 							<span class="text-3xs text-slate-400 shrink-0">{formatDate(commit.date)}</span>
@@ -349,7 +368,7 @@
 							<div class="flex items-center gap-1 mt-px overflow-hidden">
 								{#each commit.refs.slice(0, MAX_VISIBLE_REFS) as ref}
 									<span
-										class="text-3xs px-1 py-px rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 shrink-0 truncate max-w-28"
+										class="text-3xs px-1 rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 shrink-0 truncate max-w-28"
 										title={ref}
 									>
 										{truncateRef(ref)}
@@ -369,17 +388,12 @@
 				</div>
 			{/each}
 
-			<!-- Load more -->
+			<!-- Infinite scroll sentinel -->
 			{#if hasMore}
-				<div class="flex justify-center py-3">
-					<button
-						type="button"
-						class="px-4 py-1.5 text-xs font-medium text-violet-600 bg-violet-500/10 rounded-md hover:bg-violet-500/20 transition-colors cursor-pointer border-none"
-						onclick={onLoadMore}
-						disabled={isLoading}
-					>
-						{isLoading ? 'Loading...' : 'Load More'}
-					</button>
+				<div bind:this={sentinelEl} class="flex justify-center py-3">
+					{#if isLoading}
+						<div class="w-4 h-4 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
+					{/if}
 				</div>
 			{/if}
 		</div>

package/frontend/lib/components/preview/browser/components/Toolbar.svelte

@@ -214,26 +214,21 @@
 </script>
 
 <!-- Preview Toolbar -->
-<div class="relative px-3 py-2.5 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
-	<!-- Tabs bar -->
+<div class="relative bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
+	<!-- Tabs bar (Git-style underline tabs) — separated with its own border-bottom -->
 	{#if tabs.length > 0}
-		<div class="flex items-center gap-1.5 overflow-x-auto mb-1.5">
-			<!-- Tabs -->
+		<div class="relative flex items-center overflow-x-auto border-b border-slate-200 dark:border-slate-700">
 			{#each tabs as tab}
-				<div
-					class="group relative flex items-center gap-2 pl-3 pr-2 py-1.5 border border-slate-200 dark:border-slate-700 rounded-lg transition-all duration-200 min-w-0 max-w-xs cursor-pointer
-						{tab.id === activeTabId 
-							? 'bg-slate-100 dark:bg-slate-700'
-							: 'bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700'}"
+				{@const isActive = tab.id === activeTabId}
+				<button
+					type="button"
+					class="group relative flex items-center justify-center gap-1 px-2 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
+						{isActive
+							? 'text-violet-600 dark:text-violet-400'
+							: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
 					onclick={() => onSwitchTab(tab.id)}
 					role="tab"
 					tabindex="0"
-					onkeydown={(e) => {
-						if (e.key === 'Enter' || e.key === ' ') {
-							e.preventDefault();
-							onSwitchTab(tab.id);
-						}
-					}}
 				>
 					{#if tab.id === mcpControlledTabId}
 						<Icon name="lucide:bot" class="w-3 h-3 flex-shrink-0 text-amber-500" />
@@ -242,81 +237,95 @@
 					{:else}
 						<Icon name="lucide:globe" class="w-3 h-3 flex-shrink-0" />
 					{/if}
-					<span class="text-xs font-medium truncate max-w-37.5" title={tab.url}>
+					<span class="truncate max-w-28" title={tab.url}>
 						{tab.title || 'New Tab'}
 					</span>
 					{#if tab.id === mcpControlledTabId}
-						<span title="MCP Controlled" class="flex">
-							<Icon name="lucide:lock" class="w-3 h-3 flex-shrink-0 text-amber-500" />
+						<span title="MCP Controlled" class="flex"><Icon name="lucide:lock" class="w-3 h-3 flex-shrink-0 text-amber-500" /></span>
+					{/if}
+					<!-- Close button -->
+					{#if tab.id !== mcpControlledTabId}
+						<span
+							role="button"
+							tabindex="0"
+							onclick={(e) => {
+								e.stopPropagation();
+								onCloseTab(tab.id);
+							}}
+							onkeydown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.stopPropagation();
+									onCloseTab(tab.id);
+								}
+							}}
+							class="flex items-center justify-center w-4 h-4 rounded hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-200 flex-shrink-0"
+							title="Close tab"
+						>
+							<Icon name="lucide:x" class="w-2.5 h-2.5" />
 						</span>
 					{/if}
-					<button
-						onclick={(e) => {
-							e.stopPropagation();
-							onCloseTab(tab.id);
-						}}
-						class="flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-0.5 transition-all duration-200 {tab.id === mcpControlledTabId ? 'hidden' : ''}"
-						title="Close tab"
-						disabled={tab.id === mcpControlledTabId}
-					>
-						<Icon name="lucide:x" class="w-3 h-3" />
-					</button>
-				</div>
+					{#if isActive}
+						<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+					{/if}
+				</button>
 			{/each}
-		
+
 			<!-- New tab button -->
 			<button
+				type="button"
 				onclick={() => onNewTab()}
-				class="flex items-center justify-center w-5 h-5 rounded-md hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-200"
+				class="flex items-center justify-center w-6 h-6 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-all duration-200 flex-shrink-0 ml-1"
 				title="Open new tab"
 			>
 				<Icon name="lucide:plus" class="w-3 h-3" />
 			</button>
 		</div>
 	{/if}
-	
-	<!-- Main toolbar header -->
-	<div class="px-1 py-0.5 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
-		<div class="flex items-center justify-between gap-4">
-			<!-- Left section: URL navigation -->
-			<div class="flex items-center gap-3 flex-1 min-w-0">
-				<!-- URL input with integrated controls -->
-				<input
-					type="text"
-					bind:value={urlInput}
-					onkeydown={handleUrlKeydown}
-					oninput={handleUrlInput}
-					onfocus={() => isUserTyping = true}
-					onblur={() => isUserTyping = false}
-					placeholder="Enter URL to preview..."
-					class="flex-1 pl-3 py-2.5 text-sm bg-transparent border-0 focus:outline-none min-w-0 text-ellipsis"
-				/>
-				<div class="flex items-center gap-1 px-2">
-					{#if url}
-						<button
-							onclick={handleOpenInExternalBrowser}
-							class="flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200"
-							title="Open in external browser"
-						>
-							<Icon name="lucide:external-link" class="w-4 h-4" />
-						</button>
+
+	<!-- Main toolbar header (URL bar) -->
+	<div class="px-2.5 py-1.5">
+		<div class="px-1 py-0.5 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+			<div class="flex items-center justify-between gap-3">
+				<!-- Left section: URL navigation -->
+				<div class="flex items-center gap-2 flex-1 min-w-0">
+					<!-- URL input with integrated controls -->
+					<input
+						type="text"
+						bind:value={urlInput}
+						onkeydown={handleUrlKeydown}
+						oninput={handleUrlInput}
+						onfocus={() => isUserTyping = true}
+						onblur={() => isUserTyping = false}
+						placeholder="Enter URL to preview..."
+						class="flex-1 pl-3 py-2 text-sm bg-transparent border-0 focus:outline-none min-w-0 text-ellipsis"
+					/>
+					<div class="flex items-center gap-1 px-1.5">
+						{#if url}
+							<button
+								onclick={handleOpenInExternalBrowser}
+								class="flex p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200"
+								title="Open in external browser"
+							>
+								<Icon name="lucide:external-link" class="w-4 h-4" />
+							</button>
+							<button
+								onclick={handleRefresh}
+								disabled={isLoading}
+								class="flex p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 disabled:opacity-50"
+								title="Refresh current page"
+							>
+								<Icon name={isLoading ? 'lucide:loader-circle' : 'lucide:refresh-cw'} class="w-4 h-4 transition-transform duration-200 {isLoading ? 'animate-spin' : 'hover:rotate-180'}" />
+							</button>
+						{/if}
 						<button
-							onclick={handleRefresh}
-							disabled={isLoading}
-							class="flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 disabled:opacity-50"
-							title="Refresh current page"
+							onclick={handleGoClick}
+							disabled={!urlInput.trim() || isLoading}
+							class="ml-0.5 px-3.5 py-1 text-xs font-medium rounded-md bg-violet-500 hover:bg-violet-600 disabled:bg-slate-300 disabled:dark:bg-slate-600 text-white transition-all duration-200 disabled:opacity-50"
+							title="Navigate to URL"
 						>
-							<Icon name={isLoading ? 'lucide:loader-circle' : 'lucide:refresh-cw'} class="w-4 h-4 transition-transform duration-200 {isLoading ? 'animate-spin' : 'hover:rotate-180'}" />
+							Go
 						</button>
-					{/if}
-					<button
-						onclick={handleGoClick}
-						disabled={!urlInput.trim() || isLoading}
-						class="ml-1 px-4 py-1.5 text-sm font-medium rounded-lg bg-violet-500 hover:bg-violet-600 disabled:bg-slate-300 disabled:dark:bg-slate-600 text-white transition-all duration-200 disabled:opacity-50"
-						title="Navigate to URL"
-					>
-						Go
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>

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

@@ -17,7 +17,6 @@
 	import UserSettings from './user/UserSettings.svelte';
 	import NotificationSettings from './notifications/NotificationSettings.svelte';
 	import GeneralSettings from './general/GeneralSettings.svelte';
-	import pkg from '../../../../package.json';
 
 	// Responsive state
 	let isMobileMenuOpen = $state(false);
@@ -179,13 +178,7 @@
 						{/each}
 					</nav>
 
-					<footer class="p-4 border-t border-slate-200 dark:border-slate-800">
-						<div class="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-500">
-							<Icon name="lucide:info" class="w-4 h-4" />
-							<span>Clopen v{pkg.version}</span>
-						</div>
-					</footer>
-				</aside>
+					</aside>
 
 				<!-- Mobile Menu Overlay -->
 				{#if isMobile && isMobileMenuOpen}

package/frontend/lib/components/terminal/Terminal.svelte

@@ -258,7 +258,7 @@
 	aria-label="Terminal application">
 
 	<!-- Terminal Header with Tabs -->
-	<div class="flex-shrink-0 px-3 py-2.5 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
+	<div class="flex-shrink-0 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
 		<!-- Terminal Tabs -->
 		<TerminalTabs
 			sessions={terminalStore.sessions}

package/frontend/lib/components/terminal/TerminalTabs.svelte

@@ -31,52 +31,54 @@
 	});
 </script>
 
-<!-- Compact Terminal Tabs -->
-<div class="flex items-center gap-1.5 overflow-x-auto flex-1">
+<!-- Terminal Tabs (Git-style underline tabs) -->
+<div class="relative flex items-center overflow-x-auto flex-1">
 	{#each sessions as session (session.id)}
-		<div
-			class="group relative flex items-center gap-2 pl-3 pr-2 py-1.5 border border-slate-200 dark:border-slate-700 rounded-lg transition-all duration-200 min-w-0 max-w-xs cursor-pointer
-				{session.isActive
-					? 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100'
-					: 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'}"
+		{@const isActive = session.isActive}
+		<button
+			type="button"
+			class="group relative flex items-center justify-center gap-1 px-2 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
+				{isActive
+					? 'text-violet-600 dark:text-violet-400'
+					: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
 			onclick={() => onSwitchSession?.(session.id)}
 			role="tab"
 			tabindex="0"
-			onkeydown={(e) => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					e.preventDefault();
-					onSwitchSession?.(session.id);
-				}
-			}}
 		>
-			<!-- Terminal icon -->
 			<Icon name="lucide:terminal" class="w-3 h-3 flex-shrink-0" />
-
-			<!-- Session name -->
-			<span class="text-xs font-medium truncate max-w-37.5">
-				{session.name}
-			</span>
-
+			<span class="truncate max-w-28">{session.name}</span>
 			<!-- Close button -->
-			<button
+			<span
+				role="button"
+				tabindex="0"
 				onclick={(e) => {
 					e.stopPropagation();
 					onCloseSession?.(session.id);
 				}}
-				class="flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-0.5 transition-all duration-200 flex-shrink-0"
+				onkeydown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.stopPropagation();
+						onCloseSession?.(session.id);
+					}
+				}}
+				class="flex items-center justify-center w-4 h-4 rounded hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-200 flex-shrink-0"
 				title="Close terminal"
 				aria-label="Close terminal session"
 			>
-				<Icon name="lucide:x" class="w-3 h-3" />
-			</button>
-		</div>
+				<Icon name="lucide:x" class="w-2.5 h-2.5" />
+			</span>
+			{#if isActive}
+				<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+			{/if}
+		</button>
 	{/each}
 
 	<!-- New terminal button -->
 	{#if onNewSession}
 		<button
+			type="button"
 			onclick={onNewSession}
-			class="flex items-center justify-center w-5 h-5 rounded-md hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-200 flex-shrink-0"
+			class="flex items-center justify-center w-6 h-6 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-all duration-200 flex-shrink-0 ml-1"
 			title="New terminal"
 			aria-label="New terminal session"
 		>

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

@@ -8,7 +8,7 @@
 		workspaceState,
 		initializeWorkspace,
 	} from '$frontend/lib/stores/ui/workspace.svelte';
-	import { appState, setAppLoading, setAppInitialized, restoreLastView } from '$frontend/lib/stores/core/app.svelte';
+	import { appState, setAppLoading, setAppInitialized, restoreLastView, restoreUnreadSessions } from '$frontend/lib/stores/core/app.svelte';
 	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
 	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
 
@@ -89,7 +89,7 @@
 
 			// Step 3: Restore user state from server
 			setProgress(30, 'Restoring state...');
-			let serverState: { currentProjectId: string | null; lastView: string | null; settings: any } | null = null;
+			let serverState: { currentProjectId: string | null; lastView: string | null; settings: any; unreadSessions: any } | null = null;
 			try {
 				serverState = await ws.http('user:restore-state', {});
 				debug.log('workspace', 'Server state restored:', serverState);
@@ -103,6 +103,7 @@
 				applyServerSettings(serverState.settings);
 			}
 			restoreLastView(serverState?.lastView);
+			restoreUnreadSessions(serverState?.unreadSessions);
 			initPresence();
 
 			// Step 5: Load projects (with server-restored currentProjectId)

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

@@ -139,26 +139,72 @@ export function clearSessionProcessState(sessionId: string): void {
 // UNREAD SESSION MANAGEMENT
 // ========================================
 
+/**
+ * Persist the current unread sessions Map to the server via user:save-state.
+ * Uses the same proven infrastructure as currentProjectId/lastView persistence.
+ * Debounced: only the last call within 500ms actually persists.
+ */
+let saveUnreadTimeout: ReturnType<typeof setTimeout> | null = null;
+
+function persistUnreadSessions(): void {
+	if (saveUnreadTimeout) clearTimeout(saveUnreadTimeout);
+	saveUnreadTimeout = setTimeout(() => {
+		const serialized = Object.fromEntries(appState.unreadSessions);
+		debug.log('session', '[unread] Persisting to server:', serialized);
+		ws.http('user:save-state', { key: 'unreadSessions', value: serialized }).catch(err => {
+			debug.error('session', '[unread] Error persisting unread sessions:', err);
+		});
+	}, 500);
+}
+
 /**
  * Mark a session as unread (has new activity the user hasn't seen).
+ * Persists to backend so the state survives browser refresh.
  */
 export function markSessionUnread(sessionId: string, projectId: string): void {
 	const next = new Map(appState.unreadSessions);
 	next.set(sessionId, projectId);
 	appState.unreadSessions = next;
+
+	// Persist to backend via user:save-state (proven infrastructure)
+	debug.log('session', `[unread] markSessionUnread: sessionId=${sessionId}, projectId=${projectId}`);
+	ws.emit('sessions:mark-unread', { sessionId, projectId });
+	persistUnreadSessions();
 }
 
 /**
  * Mark a session as read (user has viewed it).
+ * Persists to backend so the state survives browser refresh.
  */
 export function markSessionRead(sessionId: string): void {
 	if (appState.unreadSessions.has(sessionId)) {
 		const next = new Map(appState.unreadSessions);
 		next.delete(sessionId);
 		appState.unreadSessions = next;
+
+		// Persist to backend via user:save-state (proven infrastructure)
+		debug.log('session', `[unread] markSessionRead: sessionId=${sessionId}`);
+		ws.emit('sessions:mark-read', { sessionId });
+		persistUnreadSessions();
 	}
 }
 
+/**
+ * Restore unread sessions from server state (called during initialization).
+ */
+export function restoreUnreadSessions(saved: Record<string, string> | null): void {
+	if (!saved || typeof saved !== 'object') return;
+
+	const next = new Map(appState.unreadSessions);
+	for (const [sessionId, projectId] of Object.entries(saved)) {
+		if (typeof sessionId === 'string' && typeof projectId === 'string') {
+			next.set(sessionId, projectId);
+		}
+	}
+	appState.unreadSessions = next;
+	debug.log('session', '[unread] Restored from server:', Object.fromEntries(appState.unreadSessions));
+}
+
 /**
  * Check if a session is unread.
  */

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

@@ -13,7 +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 { markSessionUnread, markSessionRead, appState } from '$frontend/lib/stores/core/app.svelte';
 import { debug } from '$shared/utils/logger';
 
 interface SessionState {
@@ -236,9 +236,20 @@ export async function loadSessions() {
 		const response = await ws.http('sessions:list');
 
 		if (response) {
-			const { sessions, currentSessionId } = response;
+			const { sessions, currentSessionId, unreadSessionIds } = response;
 			sessionState.sessions = sessions;
 
+			// Restore unread session state from backend
+			debug.log('session', '[unread] loadSessions received unreadSessionIds:', unreadSessionIds);
+			if (unreadSessionIds && Array.isArray(unreadSessionIds) && unreadSessionIds.length > 0) {
+				const next = new Map(appState.unreadSessions);
+				for (const { sessionId, projectId } of unreadSessionIds) {
+					next.set(sessionId, projectId);
+				}
+				appState.unreadSessions = next;
+				debug.log('session', '[unread] Restored unread sessions:', Array.from(appState.unreadSessions.entries()));
+			}
+
 			// Auto-restore: find the active session for the current project
 			if (!sessionState.currentSession) {
 				const currentProject = projectState.currentProject;
@@ -310,7 +321,7 @@ export async function reloadSessionsForProject(): Promise<string | null> {
 	try {
 		const response = await ws.http('sessions:list');
 		if (response) {
-			const { sessions, currentSessionId } = response;
+			const { sessions, currentSessionId, unreadSessionIds } = response;
 			// Merge: keep sessions from other projects, replace sessions for current project
 			const currentProjectId = projectState.currentProject?.id;
 			if (currentProjectId) {
@@ -321,6 +332,16 @@ export async function reloadSessionsForProject(): Promise<string | null> {
 			} else {
 				sessionState.sessions = sessions;
 			}
+
+			// Restore unread session state from backend
+			if (unreadSessionIds && Array.isArray(unreadSessionIds)) {
+				const next = new Map(appState.unreadSessions);
+				for (const { sessionId, projectId } of unreadSessionIds) {
+					next.set(sessionId, projectId);
+				}
+				appState.unreadSessions = next;
+			}
+
 			return currentSessionId || null;
 		}
 	} catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "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",