@myrialabs/clopen 0.2.3 → 0.2.4

package/frontend/components/checkpoint/ConflictResolutionModal.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import DiffBlock from '$frontend/components/chat/tools/components/DiffBlock.svelte';
+	import type { RestoreConflict, ConflictResolution } from '$frontend/services/snapshot/snapshot.service';
+
+	let {
+		isOpen = $bindable(false),
+		conflicts,
+		onConfirm,
+		onClose
+	}: {
+		isOpen: boolean;
+		conflicts: RestoreConflict[];
+		onConfirm: (resolutions: ConflictResolution) => void;
+		onClose: () => void;
+	} = $props();
+
+	// Internal state
+	let conflictResolutions = $state<ConflictResolution>({});
+	let expandedDiffs = $state<Set<string>>(new Set());
+
+	// Reset internal state when conflicts change (modal opened with new data)
+	$effect(() => {
+		if (conflicts.length > 0) {
+			const resolutions: ConflictResolution = {};
+			for (const conflict of conflicts) {
+				resolutions[conflict.filepath] = 'keep';
+			}
+			conflictResolutions = resolutions;
+			expandedDiffs = new Set();
+		}
+	});
+
+	function handleClose() {
+		isOpen = false;
+		onClose();
+	}
+
+	function handleConfirm() {
+		isOpen = false;
+		onConfirm(conflictResolutions);
+	}
+
+	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
+	size="md"
+	onClose={handleClose}
+>
+	{#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 conflicts 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={handleClose}
+			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={handleConfirm}
+			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/components/checkpoint/TimelineModal.svelte

@@ -2,7 +2,7 @@
 	import Modal from '$frontend/components/common/overlay/Modal.svelte';
 	import Dialog from '$frontend/components/common/overlay/Dialog.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
-	import DiffBlock from '$frontend/components/chat/tools/components/DiffBlock.svelte';
+	import ConflictResolutionModal from './ConflictResolutionModal.svelte';
 	import TimelineGraph from './timeline/TimelineGraph.svelte';
 	import { sessionState, loadMessagesForSession } from '$frontend/stores/core/sessions.svelte';
 	import { appState } from '$frontend/stores/core/app.svelte';
@@ -38,9 +38,7 @@
 	// 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[]>([]);
@@ -207,12 +205,6 @@
 			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 {
@@ -229,14 +221,13 @@
 	}
 
 	// Execute restore after conflict resolution
-	async function confirmConflictRestore() {
+	async function confirmConflictRestore(resolutions: ConflictResolution) {
 		if (!conflictCheckingNode) return;
 
-		showConflictModal = false;
 		const node = conflictCheckingNode;
 		conflictCheckingNode = null;
 
-		await executeRestore(node, conflictResolutions);
+		await executeRestore(node, resolutions);
 	}
 
 	// Execute restore after simple confirmation
@@ -335,35 +326,6 @@
 		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}>
@@ -472,129 +434,12 @@
 />
 
 <!-- Conflict Resolution Modal -->
-<Modal
+<ConflictResolutionModal
 	bind:isOpen={showConflictModal}
-	size="md"
+	conflicts={conflictList}
+	onConfirm={confirmConflictRestore}
 	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/components/common/feedback/RestartRequiredModal.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import Dialog from '../overlay/Dialog.svelte';
+	import Icon from '../display/Icon.svelte';
+	import { updateState, hideRestartModal } from '$frontend/stores/ui/update.svelte';
+
+	function handleClose() {
+		hideRestartModal();
+	}
+</script>
+
+<Dialog
+	bind:isOpen={updateState.showRestartModal}
+	onClose={handleClose}
+	title="Updated to v{updateState.latestVersion}"
+	type="success"
+	confirmText="Got it"
+	showCancel={false}
+>
+	<div class="flex items-start space-x-4">
+		<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700/50 rounded-xl p-3">
+			<Icon name="lucide:circle-check" class="w-6 h-6 text-green-600 dark:text-green-400" />
+		</div>
+
+		<div class="flex-1 space-y-3">
+			<h3 class="text-lg font-semibold text-green-900 dark:text-green-100">
+				Updated to v{updateState.latestVersion}
+			</h3>
+
+			<p class="text-sm text-slate-600 dark:text-slate-400">
+				To apply the update, restart the server:
+			</p>
+
+			<ol class="text-sm text-slate-700 dark:text-slate-300 space-y-2.5 list-none pl-0">
+				<li class="flex items-start gap-2.5">
+					<span class="flex items-center justify-center w-5 h-5 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 text-xs font-bold shrink-0 mt-0.5">1</span>
+					<span>Go to the terminal where you ran <code class="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-xs font-mono">clopen</code> <span class="text-slate-500 dark:text-slate-500">(not the terminal inside Clopen)</span></span>
+				</li>
+				<li class="flex items-start gap-2.5">
+					<span class="flex items-center justify-center w-5 h-5 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 text-xs font-bold shrink-0 mt-0.5">2</span>
+					<span>Press <kbd class="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded text-xs font-mono">Ctrl+C</kbd> to stop the server</span>
+				</li>
+				<li class="flex items-start gap-2.5">
+					<span class="flex items-center justify-center w-5 h-5 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 text-xs font-bold shrink-0 mt-0.5">3</span>
+					<span>Run <code class="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-xs font-mono">clopen</code> again</span>
+				</li>
+				<li class="flex items-start gap-2.5">
+					<span class="flex items-center justify-center w-5 h-5 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 text-xs font-bold shrink-0 mt-0.5">4</span>
+					<span>Refresh this browser tab</span>
+				</li>
+			</ol>
+		</div>
+	</div>
+</Dialog>

package/frontend/components/common/feedback/UpdateBanner.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-	import { updateState, runUpdate, dismissUpdate, checkForUpdate } from '$frontend/stores/ui/update.svelte';
+	import { updateState, runUpdate, dismissUpdate, checkForUpdate, showRestartModal } from '$frontend/stores/ui/update.svelte';
 	import { systemSettings, updateSystemSettings } from '$frontend/stores/features/settings.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import { slide } from 'svelte/transition';
 
 	const showBanner = $derived(
-		!updateState.dismissed && (
+		updateState.pendingRestart ||
+		(!updateState.dismissed && (
 			updateState.updateAvailable ||
 			updateState.updating ||
 			updateState.updateSuccess ||
 			updateState.error
-		)
+		))
 	);
 
 	function handleUpdate() {
@@ -28,13 +29,17 @@
 	function handleRetry() {
 		checkForUpdate();
 	}
+
+	function handleShowRestart() {
+		showRestartModal();
+	}
 </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
+			{updateState.updateSuccess || updateState.pendingRestart
 				? 'bg-emerald-600 text-white'
 				: updateState.error
 					? 'bg-red-600 text-white'
@@ -44,9 +49,15 @@
 		role="status"
 		aria-live="polite"
 	>
-		{#if updateState.updateSuccess}
+		{#if updateState.updateSuccess || updateState.pendingRestart}
 			<Icon name="lucide:package-check" class="w-4 h-4" />
-			<span>Updated to v{updateState.latestVersion} — restart clopen to apply</span>
+			<span>Updated to v{updateState.latestVersion} — restart required</span>
+			<button
+				onclick={handleShowRestart}
+				class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-white/20 hover:bg-white/30 transition-colors"
+			>
+				How to restart
+			</button>
 		{:else if updateState.error}
 			<Icon name="lucide:package-x" class="w-4 h-4" />
 			<span>{updateState.errorType === 'check' ? 'Unable to check for updates' : 'Update failed'}</span>