@myrialabs/clopen 0.1.7 → 0.1.9

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/components/workspace/panels/GitPanel.svelte

@@ -67,9 +67,6 @@
 	let newTagName = $state('');
 	let newTagMessage = $state('');
 
-	// More menu state (for Stash/Tags)
-	let showMoreMenu = $state(false);
-
 	// Tab system (like Files panel)
 	interface DiffTab {
 		id: string;
@@ -1053,12 +1050,21 @@
 		gitStatus.staged.length + allChanges.length + gitStatus.conflicted.length
 	);
 
+	// View tabs config for tab bar
+	const viewTabs = $derived([
+		{ id: 'changes' as const, label: 'Changes', icon: 'lucide:file-pen' as IconName, badge: totalChanges > 0 ? totalChanges : null },
+		{ id: 'log' as const, label: 'History', icon: 'lucide:history' as IconName, badge: null },
+		{ id: 'stash' as const, label: 'Stash', icon: 'lucide:archive' as IconName, badge: stashEntries.length > 0 ? stashEntries.length : null },
+		{ id: 'tags' as const, label: 'Tags', icon: 'lucide:tag' as IconName, badge: tags.length > 0 ? tags.length : null }
+	]);
+
 	// Exported panel actions for PanelHeader
 	export const panelActions = {
 		push: handlePush,
 		pull: handlePull,
 		fetch: handleFetch,
 		init: handleInit,
+		openBranchManager: () => { showBranchManager = true; },
 		getBranchInfo: () => branchInfo,
 		getIsRepo: () => isRepo,
 		getIsFetching: () => isFetching,
@@ -1102,97 +1108,32 @@
 	{/if}
 {/snippet}
 
-<!-- Changes list snippet -->
-{#snippet changesList()}
-	<!-- View tabs with branch switch -->
-	<div class="flex items-center gap-1 px-2 py-1.5 border-b border-slate-100 dark:border-slate-800">
-		<button
-			type="button"
-			class="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md bg-slate-100 dark:bg-slate-800/60 text-slate-700 dark:text-slate-300 hover:bg-violet-500/10 hover:text-violet-600 transition-colors cursor-pointer border-none min-w-0"
-			onclick={() => showBranchManager = true}
-			title="Switch Branch"
-		>
-			<Icon name="lucide:git-branch" class="w-3.5 h-3.5 shrink-0" />
-			<span class="truncate max-w-24">{branchInfo?.current || '...'}</span>
-		</button>
-
-		<div class="flex-1"></div>
-
-		<!-- Primary tabs: Changes & History -->
-		<button
-			type="button"
-			class="px-2 py-1 text-xs font-medium rounded-md transition-colors cursor-pointer border-none
-				{activeView === 'changes'
-					? 'bg-violet-500/10 text-violet-600'
-					: 'bg-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}"
-			onclick={() => { switchToView('changes'); showMoreMenu = false; }}
-		>
-			Changes{totalChanges > 0 ? ` (${totalChanges})` : ''}
-		</button>
-		<button
-			type="button"
-			class="px-2 py-1 text-xs font-medium rounded-md transition-colors cursor-pointer border-none
-				{activeView === 'log'
-					? 'bg-violet-500/10 text-violet-600'
-					: 'bg-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}"
-			onclick={() => { switchToView('log'); showMoreMenu = false; }}
-		>
-			History
-		</button>
-
-		<!-- More menu (Stash, Tags) -->
-		<div class="relative">
+<!-- View tabs snippet (always visible, even in single-column diff mode) -->
+{#snippet viewTabBar()}
+	<div class="relative flex border-b border-slate-200 dark:border-slate-700">
+		{#each viewTabs as tab (tab.id)}
+			{@const isActive = activeView === tab.id}
 			<button
 				type="button"
-				class="flex items-center justify-center w-7 h-7 rounded-md transition-colors cursor-pointer border-none
-					{activeView === 'stash' || activeView === 'tags'
-						? 'bg-violet-500/10 text-violet-600'
-						: 'bg-transparent text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'}"
-				onclick={() => showMoreMenu = !showMoreMenu}
-				title="More views"
+				class="relative flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium transition-colors {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={() => switchToView(tab.id)}
 			>
-				<Icon name="lucide:ellipsis" class="w-4 h-4" />
+				{tab.label}
+				{#if tab.badge}
+					<span class="min-w-4 h-4 px-1 rounded-full bg-violet-500/15 dark:bg-violet-500/25 text-3xs font-semibold flex items-center justify-center">{tab.badge}</span>
+				{/if}
+				{#if isActive}
+					<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+				{/if}
 			</button>
-
-			{#if showMoreMenu}
-				<div
-					class="fixed inset-0 z-40"
-					onclick={() => showMoreMenu = false}
-				></div>
-				<div class="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg py-1 min-w-32">
-					<button
-						type="button"
-						class="flex items-center gap-2 w-full px-3 py-1.5 text-xs font-medium text-left transition-colors cursor-pointer border-none
-							{activeView === 'stash'
-								? 'bg-violet-500/10 text-violet-600'
-								: 'bg-transparent text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'}"
-						onclick={() => { switchToView('stash'); showMoreMenu = false; }}
-					>
-						<Icon name="lucide:archive" class="w-3.5 h-3.5" />
-						Stash
-						{#if stashEntries.length > 0}
-							<span class="ml-auto text-3xs font-semibold text-slate-400">{stashEntries.length}</span>
-						{/if}
-					</button>
-					<button
-						type="button"
-						class="flex items-center gap-2 w-full px-3 py-1.5 text-xs font-medium text-left transition-colors cursor-pointer border-none
-							{activeView === 'tags'
-								? 'bg-violet-500/10 text-violet-600'
-								: 'bg-transparent text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'}"
-						onclick={() => { switchToView('tags'); showMoreMenu = false; }}
-					>
-						<Icon name="lucide:tag" class="w-3.5 h-3.5" />
-						Tags
-						{#if tags.length > 0}
-							<span class="ml-auto text-3xs font-semibold text-slate-400">{tags.length}</span>
-						{/if}
-					</button>
-				</div>
-			{/if}
-		</div>
+		{/each}
 	</div>
+{/snippet}
 
+<!-- Changes list snippet -->
+{#snippet changesList()}
 	{#if activeView === 'changes'}
 		<!-- Commit form -->
 		<CommitForm
@@ -1253,7 +1194,7 @@
 		/>
 	{:else if activeView === 'stash'}
 		<!-- Stash View -->
-		<div class="flex-1 overflow-y-auto">
+		<div class="flex-1 overflow-y-auto pt-2">
 			<!-- Stash save button/form -->
 			<div class="px-2 pb-2">
 				{#if showStashSaveForm}
@@ -1337,7 +1278,7 @@
 		</div>
 	{:else if activeView === 'tags'}
 		<!-- Tags View -->
-		<div class="flex-1 overflow-y-auto">
+		<div class="flex-1 overflow-y-auto pt-2">
 			<!-- Create tag button/form -->
 			<div class="px-2 pb-2">
 				{#if showCreateTagForm}
@@ -1502,16 +1443,17 @@
 		<div class="flex-1 overflow-hidden">
 			<!-- Unified layout: always render both panels to preserve state (like Files panel) -->
 			<div class="h-full flex">
-				<!-- Left panel: Changes list (w-80 like Files panel tree) -->
+				<!-- Left panel: Changes list -->
 				<div
 					class={isTwoColumnMode
 						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700 flex flex-col'
 						: (viewMode === 'list' ? 'w-full h-full overflow-hidden flex flex-col' : 'hidden')}
 				>
+					{@render viewTabBar()}
 					{@render changesList()}
 				</div>
 
-				<!-- Right panel: Diff viewer (like Files panel editor) -->
+				<!-- Right panel: Diff viewer -->
 				<div
 					class={isTwoColumnMode
 						? 'flex-1 h-full overflow-hidden flex flex-col'

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/frontend/lib/stores/ui/workspace.svelte.ts

@@ -459,20 +459,20 @@ const defaultPanels: Record<PanelId, PanelConfig> = {
 		minimized: false,
 		order: 0
 	},
-	preview: {
-		id: 'preview',
-		title: 'Preview',
-		icon: 'lucide:globe',
-		visible: true,
-		minimized: false,
-		order: 1
-	},
 	files: {
 		id: 'files',
 		title: 'Files',
 		icon: 'lucide:folder',
 		visible: true,
 		minimized: false,
+		order: 1
+	},
+	git: {
+		id: 'git',
+		title: 'Source Control',
+		icon: 'lucide:git-branch',
+		visible: true,
+		minimized: false,
 		order: 2
 	},
 	terminal: {
@@ -483,10 +483,10 @@ const defaultPanels: Record<PanelId, PanelConfig> = {
 		minimized: false,
 		order: 3
 	},
-	git: {
-		id: 'git',
-		title: 'Source Control',
-		icon: 'lucide:git-branch',
+	preview: {
+		id: 'preview',
+		title: 'Preview',
+		icon: 'lucide:globe',
 		visible: true,
 		minimized: false,
 		order: 4
@@ -496,9 +496,9 @@ const defaultPanels: Record<PanelId, PanelConfig> = {
 export const PANEL_OPTIONS: { id: PanelId; title: string; icon: IconName }[] = [
 	{ id: 'chat', title: 'AI Assistant', icon: 'lucide:bot' },
 	{ id: 'files', title: 'Files', icon: 'lucide:folder' },
-	{ id: 'preview', title: 'Preview', icon: 'lucide:globe' },
+	{ id: 'git', title: 'Source Control', icon: 'lucide:git-branch' },
 	{ id: 'terminal', title: 'Terminal', icon: 'lucide:terminal' },
-	{ id: 'git', title: 'Source Control', icon: 'lucide:git-branch' }
+	{ id: 'preview', title: 'Preview', icon: 'lucide:globe' }
 ];
 
 // Default: Main + Stack layout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.1.7",
+  "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",
@@ -62,7 +62,6 @@
     "@types/bun": "^1.2.18",
     "@types/node": "^24.0.14",
     "@types/qrcode": "^1.5.6",
-    "@types/xterm": "^3.0.0",
     "concurrently": "^9.2.1",
     "eslint": "^9.31.0",
     "eslint-plugin-svelte": "^3.10.1",
@@ -83,8 +82,12 @@
     "@modelcontextprotocol/sdk": "^1.26.0",
     "@monaco-editor/loader": "^1.5.0",
     "@opencode-ai/sdk": "^1.2.15",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/addon-clipboard": "^0.2.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-ligatures": "^0.10.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
     "bun-pty": "^0.4.2",
     "cloudflared": "^0.7.1",
     "elysia": "^1.4.19",
@@ -95,8 +98,7 @@
     "nanoid": "^5.1.6",
     "puppeteer": "^24.33.0",
     "puppeteer-cluster": "^0.25.0",
-    "qrcode": "^1.5.4",
-    "xterm": "^5.3.0"
+    "qrcode": "^1.5.4"
   },
   "trustedDependencies": [
     "cloudflared",