@myrialabs/clopen 0.1.4 → 0.1.5

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

@@ -2,6 +2,7 @@
 	import Modal from '$frontend/lib/components/common/Modal.svelte';
 	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
 	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import DiffBlock from '$frontend/lib/components/chat/tools/components/DiffBlock.svelte';
 	import TimelineGraph from './timeline/TimelineGraph.svelte';
 	import { sessionState, loadMessagesForSession } from '$frontend/lib/stores/core/sessions.svelte';
 	import { appState } from '$frontend/lib/stores/core/app.svelte';
@@ -10,6 +11,7 @@
 	import { buildGraph } from './timeline/graph-builder';
 	import { startAnimation } from './timeline/animation';
 	import { snapshotService } from '$frontend/lib/services/snapshot/snapshot.service';
+	import type { RestoreConflict, ConflictResolution } from '$frontend/lib/services/snapshot/snapshot.service';
 	import type { TimelineResponse, GraphNode, GraphEdge, VersionGroup, AnimationState } from './timeline/types';
 
 	let {
@@ -32,6 +34,13 @@
 	let showConfirmDialog = $state(false);
 	let pendingNode = $state<GraphNode | null>(null);
 
+	// Conflict resolution modal state
+	let showConflictModal = $state(false);
+	let conflictList = $state<RestoreConflict[]>([]);
+	let conflictResolutions = $state<ConflictResolution>({});
+	let conflictCheckingNode = $state<GraphNode | null>(null);
+	let expandedDiffs = $state<Set<string>>(new Set());
+
 	// Graph visualization state
 	let graphNodes = $state<GraphNode[]>([]);
 	let graphEdges = $state<GraphEdge[]>([]);
@@ -58,7 +67,7 @@
 	let previousMessageCount = $state(0);
 	let isInitialLoad = $state(true);
 
-	// Track if modal was opened (for detecting modal open event)
+	// Track if modal was opened
 	let wasOpen = $state(false);
 
 	// Get the session ID to use (override or current)
@@ -66,7 +75,6 @@
 
 	// Load timeline data when modal opens
 	$effect(() => {
-		// Detect modal opening (transition from closed to open)
 		if (isOpen && !wasOpen && sessionId) {
 			isContentReady = false;
 			hasScrolledToBottom = false;
@@ -149,7 +157,6 @@
 	function rebuildGraph(captureOldState = false) {
 		if (!timelineData) return;
 
-		// Capture old state for animation (FLIP technique)
 		if (captureOldState && !animationState.isAnimating) {
 			animationState.oldNodePositions = new Map(
 				graphNodes.map(n => [n.id, { x: n.x, y: n.y }])
@@ -168,20 +175,64 @@
 		svgHeight = graphData.svgHeight;
 	}
 
-	// Handle node click - show confirmation dialog
-	function handleNodeClick(node: GraphNode) {
+	// Handle node click - check conflicts first, then show appropriate dialog
+	async function handleNodeClick(node: GraphNode) {
 		if (readonly) return;
 		if (processingAction || node.isCurrent || animationState.isAnimating || appState.isLoading) return;
 
-		pendingNode = node;
-		showConfirmDialog = true;
+		const currentSessionId = sessionState.currentSession?.id;
+		if (!currentSessionId) return;
+
+		// Check for conflicts before showing confirmation
+		try {
+			const conflictCheck = await snapshotService.checkConflicts(
+				node.checkpoint.messageId,
+				currentSessionId
+			);
+
+			if (conflictCheck.hasConflicts) {
+				// Show conflict resolution modal
+				conflictList = conflictCheck.conflicts;
+				conflictResolutions = {};
+				expandedDiffs = new Set();
+				// Default all to 'keep' (safer default)
+				for (const conflict of conflictCheck.conflicts) {
+					conflictResolutions[conflict.filepath] = 'keep';
+				}
+				conflictCheckingNode = node;
+				showConflictModal = true;
+			} else {
+				// No conflicts - show simple confirmation dialog
+				pendingNode = node;
+				showConfirmDialog = true;
+			}
+		} catch (error) {
+			debug.error('snapshot', 'Error checking conflicts:', error);
+			// Fallback to simple confirmation on error
+			pendingNode = node;
+			showConfirmDialog = true;
+		}
 	}
 
-	// Perform restore checkpoint after confirmation
+	// Execute restore after conflict resolution
+	async function confirmConflictRestore() {
+		if (!conflictCheckingNode) return;
+
+		showConflictModal = false;
+		const node = conflictCheckingNode;
+		conflictCheckingNode = null;
+
+		await executeRestore(node, conflictResolutions);
+	}
+
+	// Execute restore after simple confirmation
 	async function confirmRestore() {
 		if (!pendingNode) return;
+		await executeRestore(pendingNode);
+	}
 
-		const node = pendingNode;
+	// Shared restore execution logic
+	async function executeRestore(node: GraphNode, resolutions?: ConflictResolution) {
 		processingAction = true;
 
 		// Capture current state for animation
@@ -202,10 +253,10 @@
 				throw new Error('No active session');
 			}
 
-			// Unified restore - works for all nodes
 			await snapshotService.restore(
 				node.checkpoint.messageId,
-				sessionState.currentSession.id
+				sessionState.currentSession.id,
+				resolutions
 			);
 
 			// Reload messages
@@ -214,7 +265,6 @@
 			// Reload timeline
 			const newTimelineData = await snapshotService.getTimeline(sessionState.currentSession.id);
 
-			// Check if structure changed
 			if (JSON.stringify(newTimelineData.nodes) !== JSON.stringify(timelineData?.nodes)) {
 				timelineData = newTimelineData;
 				rebuildGraph();
@@ -270,6 +320,36 @@
 		if (text.length <= maxLength) return text;
 		return text.substring(0, maxLength) + '...';
 	}
+
+	function toggleDiff(filepath: string) {
+		const next = new Set(expandedDiffs);
+		if (next.has(filepath)) {
+			next.delete(filepath);
+		} else {
+			next.add(filepath);
+		}
+		expandedDiffs = next;
+	}
+
+	function formatFilePath(filepath: string): string {
+		const parts = filepath.split('/');
+		if (parts.length <= 2) return filepath;
+		return '.../' + parts.slice(-2).join('/');
+	}
+
+	function formatTimestamp(iso: string): string {
+		try {
+			const date = new Date(iso);
+			return date.toLocaleString(undefined, {
+				month: 'short',
+				day: 'numeric',
+				hour: '2-digit',
+				minute: '2-digit'
+			});
+		} catch {
+			return iso;
+		}
+	}
 </script>
 
 <Modal bind:isOpen={isOpen} bind:contentRef={scrollContainer} size="lg" onClose={onClose}>
@@ -335,22 +415,6 @@
 					isDisabled={appState.isLoading}
 					onNodeClick={handleNodeClick}
 				/>
-
-				<!-- Legend -->
-				<!-- <div class="mt-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 flex flex-wrap items-center gap-6 text-xs">
-					<div class="flex items-center gap-2">
-						<div class="w-3 h-3 rounded-full bg-green-500 ring-2 ring-green-300 dark:ring-green-700"></div>
-						<span class="text-slate-600 dark:text-slate-400">Current Position</span>
-					</div>
-					<div class="flex items-center gap-2">
-						<div class="w-3 h-3 rounded-full bg-blue-500"></div>
-						<span class="text-slate-600 dark:text-slate-400">Active Path</span>
-					</div>
-					<div class="flex items-center gap-2">
-						<div class="w-3 h-3 rounded-full bg-slate-300 dark:bg-slate-600 opacity-60"></div>
-						<span class="text-slate-600 dark:text-slate-400">Orphaned</span>
-					</div>
-				</div> -->
 			</div>
 		{:else if timelineData && graphNodes.length === 0}
 			<div class="text-center py-12">
@@ -375,7 +439,7 @@
 	{/snippet}
 </Modal>
 
-<!-- Confirmation Dialog -->
+<!-- Simple Confirmation Dialog (no conflicts) -->
 <Dialog
 	bind:isOpen={showConfirmDialog}
 	type="warning"
@@ -383,7 +447,7 @@
 	message={pendingNode
 		? `Are you sure you want to restore to this checkpoint?
 "${getTruncatedMessage(pendingNode.checkpoint.messageText)}"
-This will restore your conversation and files to this point.`
+This will restore your files to this point within this session.`
 		: ''}
 	confirmText="Restore"
 	cancelText="Cancel"
@@ -394,3 +458,131 @@ This will restore your conversation and files to this point.`
 		pendingNode = null;
 	}}
 />
+
+<!-- Conflict Resolution Modal -->
+<Modal
+	bind:isOpen={showConflictModal}
+	size="md"
+	onClose={() => {
+		showConflictModal = false;
+		conflictCheckingNode = null;
+		conflictList = [];
+		conflictResolutions = {};
+		expandedDiffs = new Set();
+	}}
+>
+	{#snippet header()}
+		<div class="flex items-start gap-4 px-4 py-3 md:px-6 md:py-4">
+			<div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700/50 rounded-xl p-3">
+				<Icon name="lucide:triangle-alert" class="w-6 h-6 text-amber-600 dark:text-amber-400" />
+			</div>
+			<div class="flex-1">
+				<h3 id="modal-title" class="text-lg font-semibold text-slate-900 dark:text-slate-100">
+					Restore Conflict Detected
+				</h3>
+				<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
+					The following files were also modified in other sessions. Choose how to handle each file:
+				</p>
+			</div>
+		</div>
+	{/snippet}
+
+	{#snippet children()}
+		<div class="space-y-3">
+			{#each conflictList as conflict}
+				<div class="border border-slate-200 dark:border-slate-700 rounded-lg p-3">
+					<div class="flex items-center justify-between gap-2 mb-2">
+						<div class="flex items-center gap-2 min-w-0">
+							<Icon name="lucide:file-warning" class="w-4 h-4 text-amber-500 shrink-0" />
+							<span class="text-sm font-medium text-slate-800 dark:text-slate-200 truncate" title={conflict.filepath}>
+								{formatFilePath(conflict.filepath)}
+							</span>
+						</div>
+						{#if conflict.restoreContent && conflict.currentContent}
+							<button
+								class="shrink-0 flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md transition-colors
+									{expandedDiffs.has(conflict.filepath)
+										? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-300 dark:border-blue-600'
+										: 'bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-700'
+									}"
+								onclick={() => toggleDiff(conflict.filepath)}
+							>
+								<Icon name="lucide:git-compare" class="w-3 h-3" />
+								{expandedDiffs.has(conflict.filepath) ? 'Hide Diff' : 'View Diff'}
+							</button>
+						{/if}
+					</div>
+					<p class="text-xs text-slate-500 dark:text-slate-400 mb-2">
+						Modified by another session on {formatTimestamp(conflict.modifiedAt)}
+					</p>
+
+					<!-- 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">
+								<span class="flex items-center gap-1">
+									<span class="inline-block w-2 h-2 rounded-sm bg-red-400"></span>
+									Restore version
+								</span>
+								<span class="flex items-center gap-1">
+									<span class="inline-block w-2 h-2 rounded-sm bg-green-400"></span>
+									Current version
+								</span>
+							</div>
+							<DiffBlock
+								oldString={conflict.restoreContent}
+								newString={conflict.currentContent}
+							/>
+						</div>
+					{/if}
+
+					<div class="flex gap-2">
+						<button
+							class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700"
+							onclick={() => { conflictResolutions[conflict.filepath] = 'restore'; }}
+						>
+							{#if conflictResolutions[conflict.filepath] === 'restore'}
+								<span class="absolute -top-1.5 -right-1.5 w-5 h-5 flex items-center justify-center rounded-full bg-green-500 dark:bg-green-600 border-2 border-white dark:border-slate-900">
+									<Icon name="lucide:check" class="w-3 h-3 text-white" />
+								</span>
+							{/if}
+							Restore
+						</button>
+						<button
+							class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700"
+							onclick={() => { conflictResolutions[conflict.filepath] = 'keep'; }}
+						>
+							{#if conflictResolutions[conflict.filepath] === 'keep'}
+								<span class="absolute -top-1.5 -right-1.5 w-5 h-5 flex items-center justify-center rounded-full bg-green-500 dark:bg-green-600 border-2 border-white dark:border-slate-900">
+									<Icon name="lucide:check" class="w-3 h-3 text-white" />
+								</span>
+							{/if}
+							Keep Current
+						</button>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/snippet}
+
+	{#snippet footer()}
+		<button
+			onclick={() => {
+				showConflictModal = false;
+				conflictCheckingNode = null;
+				conflictList = [];
+				conflictResolutions = {};
+				expandedDiffs = new Set();
+			}}
+			class="px-6 py-2.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 font-semibold"
+		>
+			Cancel
+		</button>
+		<button
+			onclick={confirmConflictRestore}
+			class="px-6 py-2.5 bg-amber-600 hover:bg-amber-700 text-white rounded-lg transition-all duration-200 font-semibold"
+		>
+			Proceed with Restore
+		</button>
+	{/snippet}
+</Modal>

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

@@ -3,6 +3,7 @@
 	import loader from '@monaco-editor/loader';
 	import type { editor } from 'monaco-editor';
 	import { themeStore } from '$frontend/lib/stores/ui/theme.svelte';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import { debug } from '$shared/utils/logger';
 
 	interface Props {
@@ -375,6 +376,8 @@
 
 	const createEditorOptions: (value: string, lang: string, theme: string) => editor.IStandaloneEditorConstructionOptions = (value, lang, theme) => ({
 		...EDITOR_CONFIG,
+		fontSize: Math.round(settings.fontSize * 0.9),
+		lineHeight: Math.round(settings.fontSize * 0.9 * 1.5),
 		value,
 		language: lang,
 		theme,
@@ -472,6 +475,17 @@
 		}
 	});
 
+	// Update font size when setting changes
+	$effect(() => {
+		const size = settings.fontSize;
+		if (monacoEditor && isInitialized) {
+			monacoEditor.updateOptions({
+				fontSize: Math.round(size * 0.9),
+				lineHeight: Math.round(size * 0.9 * 1.5) 
+			});
+		}
+	});
+
 	// Cleanup function
 	function cleanup() {
 		if (resizeObserver) {

package/frontend/lib/components/common/xterm/XTerm.svelte

@@ -11,6 +11,7 @@
 	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
 	import { backgroundTerminalService } from '$frontend/lib/services/terminal/background';
 	import { terminalService } from '$frontend/lib/services/terminal';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	
 	// Import CSS directly - Vite will handle it properly
 	import 'xterm/css/xterm.css';
@@ -399,6 +400,14 @@
 		lastExecutingState = sessionExecuting;
 	});
 
+	// Reactively update terminal font size when setting changes
+	$effect(() => {
+		const size = settings.fontSize;
+		if (isInitialized) {
+			xtermService.updateFontSize(size, session?.id);
+		}
+	});
+
 	// Save terminal buffer before switching away
 	function saveCurrentBuffer(sessionId: string) {
 		// No longer saving buffer since we re-render from session lines

package/frontend/lib/components/common/xterm/xterm-service.ts

@@ -179,6 +179,15 @@ export class XTermService {
 		// No-op in interactive mode
 	}
 
+	/**
+	 * Update terminal font size and refit to container
+	 */
+	updateFontSize(size: number, sessionId?: string): void {
+		if (!this.terminal) return;
+		this.terminal.options.fontSize = size;
+		this.fit(sessionId);
+	}
+
 	/**
 	 * Show prompt (compatibility method - not needed in interactive mode)
 	 */

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

@@ -5,6 +5,7 @@
 	import { getGitStatusBadgeLabel, getGitStatusBadgeColor } from '$frontend/lib/utils/git-status';
 	import { themeStore } from '$frontend/lib/stores/ui/theme.svelte';
 	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import loader from '@monaco-editor/loader';
 	import type { editor } from 'monaco-editor';
 	import type { GitFileDiff } from '$shared/types/git';
@@ -216,10 +217,11 @@
 				theme: isDark ? 'diff-dark' : 'diff-light',
 				readOnly: true,
 				renderSideBySide: true,
+				renderSideBySideInlineBreakpoint: Math.round(600 * (settings.fontSize / 13)),
 				minimap: { enabled: false },
 				scrollBeyondLastLine: false,
-				fontSize: 12,
-				lineHeight: 20,
+				fontSize: Math.round(settings.fontSize * 0.9),
+				lineHeight: Math.round(settings.fontSize * 0.9 * 1.5),
 				renderOverviewRuler: false,
 				enableSplitViewResizing: true,
 				automaticLayout: true,
@@ -246,6 +248,18 @@
 		}
 	});
 
+	// Update font size when setting changes
+	$effect(() => {
+		const size = settings.fontSize;
+		if (diffEditorInstance) {
+			diffEditorInstance.updateOptions({
+				fontSize: Math.round(size * 0.9),
+				lineHeight: Math.round(size * 0.9 * 1.5),
+				renderSideBySideInlineBreakpoint: Math.round(600 * (size / 13))
+			});
+		}
+	});
+
 	// Reinitialize when diff or selected file changes
 	$effect(() => {
 		if (activeDiff && containerRef) {

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

@@ -10,9 +10,8 @@
 	import AvatarBubble from '$frontend/lib/components/common/AvatarBubble.svelte';
 	import Modal from '$frontend/lib/components/common/Modal.svelte';
 	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
-	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
+	import { presenceState, isSessionWaitingInput } from '$frontend/lib/stores/core/presence.svelte';
 	import { userStore } from '$frontend/lib/stores/features/user.svelte';
-	import { getSessionProcessState } from '$frontend/lib/stores/core/app.svelte';
 	import { debug } from '$shared/utils/logger';
 
 	interface Props {
@@ -474,7 +473,7 @@
 								<Icon name="lucide:message-square" class="text-violet-600 dark:text-violet-400 w-4 h-4" />
 								{#if streaming}
 									<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 {getSessionProcessState(session.id).isWaitingInput ? 'bg-amber-500' : 'bg-emerald-500'}"
+										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}
 									<span
@@ -512,7 +511,7 @@
 									{/if}
 								</div>
 								{#if streaming}
-								{#if getSessionProcessState(session.id).isWaitingInput}
+								{#if isSessionWaitingInput(session.id, projectState.currentProject?.id)}
 									<p class="text-xs text-amber-500 dark:text-amber-400 mt-0.5 flex items-center gap-1.5">
 										<Icon name="lucide:message-circle-question-mark" class="w-3 h-3 shrink-0" />
 										Waiting for input...

package/frontend/lib/components/settings/appearance/AppearanceSettings.svelte

@@ -1,6 +1,20 @@
 <script lang="ts">
 	import { themeStore, toggleDarkMode } from '$frontend/lib/stores/ui/theme.svelte';
+	import { settings, updateSettings, applyFontSize } from '$frontend/lib/stores/features/settings.svelte';
 	import Icon from '../../common/Icon.svelte';
+
+	const FONT_SIZE_MIN = 10;
+	const FONT_SIZE_MAX = 20;
+
+	function handleFontSizeChange(e: Event) {
+		const value = Number((e.target as HTMLInputElement).value);
+		applyFontSize(value);
+		updateSettings({ fontSize: value });
+	}
+
+	function fontSizePercent() {
+		return ((settings.fontSize - FONT_SIZE_MIN) / (FONT_SIZE_MAX - FONT_SIZE_MIN)) * 100;
+	}
 </script>
 
 <div class="py-1">
@@ -41,5 +55,50 @@
 				></span>
 			</label>
 		</div>
+
+		<!-- Font Size -->
+		<div
+			class="flex flex-col gap-3 p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl transition-all duration-150 hover:border-violet-500/20"
+		>
+			<div class="flex items-center gap-3.5">
+				<div
+					class="flex items-center justify-center w-10 h-10 bg-violet-500/10 dark:bg-violet-500/15 rounded-lg text-violet-600 dark:text-violet-400"
+				>
+					<Icon name="lucide:type" class="w-5 h-5" />
+				</div>
+				<div class="flex flex-col gap-0.5 flex-1">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">Font Size</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">Adjust the base font size of the application</div>
+				</div>
+				<div class="text-sm font-semibold text-violet-600 dark:text-violet-400 shrink-0 w-10 text-right">
+					{settings.fontSize}px
+				</div>
+			</div>
+
+			<div class="flex items-center gap-2.5 px-0.5">
+				<span class="text-xs text-slate-500 dark:text-slate-500 shrink-0">A</span>
+				<div class="relative flex-1 h-1.5">
+					<div class="absolute inset-0 bg-slate-300 dark:bg-slate-700 rounded-full"></div>
+					<div
+						class="absolute inset-y-0 left-0 bg-gradient-to-r from-violet-500 to-purple-500 rounded-full"
+						style="width: {fontSizePercent()}%"
+					></div>
+					<input
+						type="range"
+						min={FONT_SIZE_MIN}
+						max={FONT_SIZE_MAX}
+						step="1"
+						value={settings.fontSize}
+						oninput={handleFontSizeChange}
+						class="absolute inset-0 w-full opacity-0 cursor-pointer h-full"
+					/>
+					<div
+						class="absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-white border-2 border-violet-500 rounded-full shadow-sm pointer-events-none"
+						style="left: calc({fontSizePercent()}% - {fontSizePercent() / 100 * 16}px)"
+					></div>
+				</div>
+				<span class="text-base text-slate-500 dark:text-slate-500 shrink-0">A</span>
+			</div>
+		</div>
 	</div>
 </div>

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

@@ -284,16 +284,10 @@
 			/>
 		</div>
 	{:else}
-		<!-- No active session -->
+		<!-- No active session - will auto-connect -->
 		<div class="flex-1 flex items-center justify-center font-mono">
 			<div class="text-center text-slate-600 dark:text-slate-400">
 				<p>No terminal sessions available</p>
-				<button
-					class="mt-2 px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white rounded-md transition-colors"
-					onclick={handleNewSession}
-				>
-					Create New Terminal
-				</button>
 			</div>
 		</div>
 	{/if}

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

@@ -7,9 +7,10 @@
 	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
 	import { openSettingsModal } from '$frontend/lib/stores/ui/settings-modal.svelte';
 	import { projectStatusService } from '$frontend/lib/services/project';
-	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
+	import { presenceState, getProjectStatusColor } from '$frontend/lib/stores/core/presence.svelte';
 	import type { Project } from '$shared/types/database/schema';
 	import { debug } from '$shared/utils/logger';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import FolderBrowser from '$frontend/lib/components/common/FolderBrowser.svelte';
 	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
 	import ViewMenu from '$frontend/lib/components/workspace/ViewMenu.svelte';
@@ -30,7 +31,7 @@
 	const isCollapsed = $derived(workspaceState.navigatorCollapsed);
 	const currentProjectId = $derived(projectState.currentProject?.id);
 	const navigatorWidth = $derived(
-		workspaceState.navigatorCollapsed ? 48 : workspaceState.navigatorWidth
+		workspaceState.navigatorCollapsed ? 48 : Math.round(workspaceState.navigatorWidth * (settings.fontSize / 13))
 	);
 
 	const filteredProjects = $derived(() => {
@@ -110,18 +111,7 @@
 		}
 	}
 
-	// Get status color from presence data (single source of truth from backend)
-	// Shows real-time status for ALL projects, not just the active one.
-	// Uses backend-computed isWaitingInput so background sessions are accurate
-	// even when the frontend hasn't received their chat events.
-	function getStatusColor(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 hasWaitingInput = activeStreams.some((s: any) => s.isWaitingInput);
-		return hasWaitingInput ? 'bg-amber-500' : 'bg-emerald-500';
-	}
+	// Status color for project indicator — uses shared helper from presence store
 
 	// Close folder browser
 	function closeFolderBrowser() {
@@ -244,7 +234,7 @@
 							<div class="relative shrink-0">
 								<Icon name="lucide:folder" class="w-4 h-4" />
 								<span
-									class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-slate-50 dark:border-slate-900/95 {getStatusColor(project.id ?? '')}"
+									class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-slate-50 dark:border-slate-900/95 {getProjectStatusColor(project.id ?? '')}"
 								></span>
 							</div>
 
@@ -301,7 +291,7 @@
 			</footer>
 		{:else}
 			<!-- Collapsed State: Icon Buttons -->
-			<div class="flex-1 flex flex-col items-center gap-2 py-4 px-2">
+			<div class="flex flex-col items-center pt-4 px-2 shrink-0">
 				<button
 					type="button"
 					class="flex items-center justify-center w-9 h-9 bg-transparent border-none rounded-lg text-slate-500 cursor-pointer transition-all duration-150 relative hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
@@ -312,13 +302,15 @@
 				</button>
 
 				<div class="w-6 h-px bg-violet-500/10 my-1"></div>
+			</div>
 
-				{#each existingProjects.slice(0, 5) as project (project.id)}
+			<div class="flex-1 flex flex-col items-center gap-2 px-2 pb-4 min-h-0 overflow-y-auto">
+				{#each existingProjects as project (project.id)}
 					{@const projectStatus = presenceState.statuses.get(project.id ?? '')}
 					{@const activeUserCount = (projectStatus?.activeUsers || []).length}
 					<button
 						type="button"
-						class="flex items-center justify-center w-9 h-9 border-none rounded-lg cursor-pointer transition-all duration-150 relative font-semibold text-sm
+						class="flex items-center justify-center w-9 h-9 shrink-0 border-none rounded-lg cursor-pointer transition-all duration-150 relative font-semibold text-sm
 							{currentProjectId === project.id
 							? 'bg-violet-500/10 dark:bg-violet-500/20 text-violet-700 dark:text-violet-300'
 							: 'bg-slate-200/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100'}"
@@ -327,7 +319,7 @@
 					>
 						<span>{getProjectInitials(project.name)}</span>
 						<span
-							class="absolute bottom-1 right-1 w-2.5 h-2.5 rounded-full border-2 border-slate-50 dark:border-slate-900/95 {getStatusColor(project.id ?? '')}"
+							class="absolute bottom-1 right-1 w-2.5 h-2.5 rounded-full border-2 border-slate-50 dark:border-slate-900/95 {getProjectStatusColor(project.id ?? '')}"
 						></span>
 						{#if activeUserCount > 0}
 							<span