@myrialabs/clopen 0.2.2 → 0.2.4

package/frontend/components/chat/widgets/FloatingTodoList.svelte

@@ -9,12 +9,103 @@
 	import { sessionState } from '$frontend/stores/core/sessions.svelte';
 	import { appState } from '$frontend/stores/core/app.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
-	import { fade, fly } from 'svelte/transition';
+	import { fly } from 'svelte/transition';
 	import type { TodoWriteToolInput } from '$shared/types/messaging';
 
 	let isExpanded = $state(true);
 	let isMinimized = $state(false);
 
+	// Drag & snap state
+	let posY = $state(80);
+	let posX = $state(0);
+	let snapSide = $state<'left' | 'right'>('right');
+	let isDragging = $state(false);
+
+	// Minimized button ref for measuring width at snap time
+	let minimizedBtn = $state<HTMLButtonElement | null>(null);
+
+	// Non-reactive drag tracking
+	let _sx = 0, _sy = 0, _mx = 0, _my = 0, _hasDragged = false;
+
+	function getPanelWidth() {
+		return isExpanded ? 330 : 230;
+	}
+
+	// Always use `left` property so CSS can transition in both directions
+	const panelDisplayLeft = $derived(
+		isDragging ? posX : snapSide === 'right' ? window.innerWidth - getPanelWidth() - 16 : 16
+	);
+
+	const minimizedDisplayLeft = $derived(
+		isDragging
+			? posX
+			: snapSide === 'right'
+				? window.innerWidth - (minimizedBtn?.offsetWidth ?? 90) - 16
+				: 16
+	);
+
+	// --- Main panel drag (from header) ---
+	function startDrag(e: PointerEvent) {
+		if ((e.target as HTMLElement).closest('button')) return;
+		isDragging = true;
+		// Use actual rendered position for accuracy
+		const panel = (e.currentTarget as HTMLElement).parentElement!;
+		const rect = panel.getBoundingClientRect();
+		_sx = rect.left;
+		_sy = rect.top;
+		_mx = e.clientX;
+		_my = e.clientY;
+		posX = _sx;
+		posY = _sy;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		posX = _sx + e.clientX - _mx;
+		posY = Math.max(0, Math.min(window.innerHeight - 56, _sy + e.clientY - _my));
+	}
+
+	function endDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+		snapSide = posX + getPanelWidth() / 2 < window.innerWidth / 2 ? 'left' : 'right';
+	}
+
+	// --- Minimized button drag (click = restore, drag = move) ---
+	function startMinimizedDrag(e: PointerEvent) {
+		isDragging = true;
+		_hasDragged = false;
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		_sx = rect.left;
+		_sy = rect.top;
+		_mx = e.clientX;
+		_my = e.clientY;
+		posX = _sx;
+		posY = _sy;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onMinimizedDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		const dx = e.clientX - _mx;
+		const dy = e.clientY - _my;
+		if (Math.abs(dx) > 5 || Math.abs(dy) > 5) _hasDragged = true;
+		posX = _sx + dx;
+		posY = Math.max(0, Math.min(window.innerHeight - 56, _sy + dy));
+	}
+
+	function endMinimizedDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+		if (!_hasDragged) {
+			restore();
+			return;
+		}
+		const el = e.currentTarget as HTMLElement;
+		snapSide = posX + el.offsetWidth / 2 < window.innerWidth / 2 ? 'left' : 'right';
+	}
+
 	// Extract the latest TodoWrite data from messages
 	const latestTodos = $derived.by(() => {
 		if (!sessionState.currentSession || sessionState.messages.length === 0) {
@@ -104,11 +195,22 @@
 
 {#if shouldShow && !appState.isRestoring}
 	{#if isMinimized}
-		<!-- Minimized state - small floating button -->
+		<!-- Minimized state - small floating button, draggable -->
 		<button
-			onclick={restore}
-			class="fixed top-20 right-4 z-30 bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600 text-white rounded-full p-3 shadow-lg transition-all duration-200 flex items-center gap-2"
-			transition:fly={{ x: 100, duration: 200 }}
+			bind:this={minimizedBtn}
+			onpointerdown={startMinimizedDrag}
+			onpointermove={onMinimizedDrag}
+			onpointerup={endMinimizedDrag}
+			onpointercancel={endMinimizedDrag}
+			class="fixed z-30 bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600 text-white rounded-full p-3 shadow-lg flex items-center gap-2"
+			style="
+				top: {posY}px;
+				left: {minimizedDisplayLeft}px;
+				touch-action: none;
+				cursor: {isDragging ? 'grabbing' : 'grab'};
+				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease'};
+			"
+			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 200 }}
 		>
 			<Icon name="lucide:list-todo" class="w-5 h-5" />
 			<span class="text-sm font-medium">{progress.completed}/{progress.total}</span>
@@ -116,13 +218,25 @@
 	{:else}
 		<!-- Floating panel -->
 		<div
-			class="fixed top-20 right-4 z-30 bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300"
-			style="width: {isExpanded ? '330px' : '230px'}; max-height: {isExpanded ? '600px' : '56px'}"
-			transition:fly={{ x: 100, duration: 300 }}
+			class="fixed z-30 bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden"
+			style="
+				top: {posY}px;
+				left: {panelDisplayLeft}px;
+				width: {isExpanded ? '330px' : '230px'};
+				max-height: {isExpanded ? '600px' : '56px'};
+				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease, width 0.3s, max-height 0.3s'};
+			"
+			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 300 }}
 		>
-			<!-- Header -->
+			<!-- Header (drag handle) -->
 			<div
 				class="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-violet-50 to-violet-50 dark:from-slate-800 dark:to-slate-800 border-b border-slate-200 dark:border-slate-700"
+				style="touch-action: none; cursor: {isDragging ? 'grabbing' : 'grab'};"
+				onpointerdown={startDrag}
+				onpointermove={onDrag}
+				onpointerup={endDrag}
+				onpointercancel={endDrag}
+				role="none"
 			>
 				<div class="flex items-center gap-3">
 					<Icon name="lucide:list-todo" class="w-5 h-5 text-violet-600 dark:text-violet-400" />
@@ -246,4 +360,4 @@
 	:global(.dark) div::-webkit-scrollbar-thumb:hover {
 		background: rgb(71 85 105);
 	}
-</style>
+</style>

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>