@myrialabs/clopen 0.1.4 → 0.1.6

package/frontend/lib/components/chat/tools/AskUserQuestionTool.svelte

@@ -2,7 +2,6 @@
 	import type { AskUserQuestionToolInput } from '$shared/types/messaging';
 	import Icon from '$frontend/lib/components/common/Icon.svelte';
 	import ws from '$frontend/lib/utils/ws';
-	import { soundNotification, pushNotification } from '$frontend/lib/services/notification';
 	import { currentSessionId } from '$frontend/lib/stores/core/sessions.svelte';
 	import { appState, updateSessionProcessState } from '$frontend/lib/stores/core/app.svelte';
 	import { debug } from '$shared/utils/logger';
@@ -99,13 +98,9 @@
 		otherActive = initialOther;
 	});
 
-	// Play notification sound when this tool appears and is not yet answered/errored/interrupted
-	$effect(() => {
-		if (!hasResult && !hasSubmitted && !isInterrupted) {
-			soundNotification.play().catch(() => {});
-			pushNotification.sendChatComplete('Claude is asking you a question. Please respond.').catch(() => {});
-		}
-	});
+	// Sound/push notifications for AskUserQuestion are handled globally by
+	// GlobalStreamMonitor (via chat:waiting-input event) — works cross-session,
+	// plays once per tool_use, and does not replay when returning to session.
 
 	function toggleSelection(questionIdx: number, label: string, isMultiSelect: boolean) {
 		const current = selections[questionIdx] || new Set();

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-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
+								</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/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/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/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/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,9 @@
 	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 { isSessionUnread } from '$frontend/lib/stores/core/app.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 +474,11 @@
 								<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 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
@@ -512,7 +516,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...