@myrialabs/clopen 0.2.3 → 0.2.5

package/frontend/components/chat/message/ChatMessage.svelte

@@ -24,7 +24,9 @@
 	import TokenUsageModal from '../modal/TokenUsageModal.svelte';
 	import DebugModal from '../modal/DebugModal.svelte';
 	import Dialog from '$frontend/components/common/overlay/Dialog.svelte';
-	import ws from '$frontend/utils/ws';
+	import ConflictResolutionModal from '$frontend/components/checkpoint/ConflictResolutionModal.svelte';
+	import { snapshotService } from '$frontend/services/snapshot/snapshot.service';
+	import type { RestoreConflict, ConflictResolution } from '$frontend/services/snapshot/snapshot.service';
 
 	const {
 		message,
@@ -39,6 +41,11 @@
 	let showTokenUsagePopup = $state(false);
 	let showRestoreConfirm = $state(false);
 
+	// Conflict resolution state
+	let showConflictModal = $state(false);
+	let conflictList = $state<RestoreConflict[]>([]);
+	let processingRestore = $state(false);
+
 	// Format timestamp
 	const formatTime = (timestamp?: string) => {
 		if (!timestamp) return 'Unknown';
@@ -268,15 +275,8 @@
 		showDebugPopup = false;
 	}
 
-	// Handle restore button click
+	// Handle restore button click - check conflicts first
 	async function handleRestore() {
-		showRestoreConfirm = true;
-	}
-
-	// Confirm restore action
-	async function confirmRestore() {
-		showRestoreConfirm = false;
-
 		if (!messageId) {
 			addNotification({
 				type: 'error',
@@ -287,16 +287,41 @@
 			return;
 		}
 
+		const currentSessionId = sessionState.currentSession?.id;
+		if (!currentSessionId) return;
+
 		try {
-			// Send restore request via WebSocket HTTP
-			await ws.http('snapshot:restore', {
+			const conflictCheck = await snapshotService.checkConflicts(messageId, currentSessionId);
+
+			if (conflictCheck.hasConflicts) {
+				// Show conflict resolution modal
+				conflictList = conflictCheck.conflicts;
+				showConflictModal = true;
+			} else {
+				// No conflicts - show simple confirmation
+				showRestoreConfirm = true;
+			}
+		} catch (error) {
+			debug.error('chat', 'Error checking conflicts:', error);
+			// Fallback to simple confirmation
+			showRestoreConfirm = true;
+		}
+	}
+
+	// Execute restore with optional conflict resolutions
+	async function executeRestore(resolutions?: ConflictResolution) {
+		if (!messageId || !sessionState.currentSession?.id) return;
+
+		processingRestore = true;
+
+		try {
+			await snapshotService.restore(
 				messageId,
-				sessionId: sessionState.currentSession?.id || ''
-			});
+				sessionState.currentSession.id,
+				resolutions
+			);
 
-			if (sessionState.currentSession?.id) {
-				await loadMessagesForSession(sessionState.currentSession.id);
-			}
+			await loadMessagesForSession(sessionState.currentSession.id);
 		} catch (error) {
 			debug.error('chat', 'Restore error:', error);
 			addNotification({
@@ -305,9 +330,22 @@
 				message: error instanceof Error ? error.message : 'Unknown error',
 				duration: 5000
 			});
+		} finally {
+			processingRestore = false;
 		}
 	}
 
+	// Confirm simple restore (no conflicts)
+	async function confirmRestore() {
+		showRestoreConfirm = false;
+		await executeRestore();
+	}
+
+	// Confirm restore with conflict resolutions
+	async function confirmConflictRestore(resolutions: ConflictResolution) {
+		await executeRestore(resolutions);
+	}
+
 	// Handle edit button click
 	async function handleEdit() {
 		if (!messageId) {
@@ -473,6 +511,16 @@ This will restore your conversation to this point.`}
 	}}
 />
 
+<!-- Conflict Resolution Modal -->
+<ConflictResolutionModal
+	bind:isOpen={showConflictModal}
+	conflicts={conflictList}
+	onConfirm={confirmConflictRestore}
+	onClose={() => {
+		conflictList = [];
+	}}
+/>
+
 <style>
 	/* Animate chevron icon when details are opened */
 	:global(details[open] summary .iconify) {

package/frontend/components/chat/tools/components/FileHeader.svelte

@@ -3,6 +3,15 @@
 	import type { IconName } from '$shared/types/ui/icons';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
 	import { formatPath } from '../../shared/utils';
+	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
+	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';
+
+	function handleClick() {
+		const visiblePanels = getVisiblePanels(workspaceState.layout);
+		if (visiblePanels.includes('files')) {
+			requestRevealFile(filePath);
+		}
+	}
 
 	interface Props {
 		filePath: string;
@@ -18,10 +27,15 @@
 </script>
 
 <div class={box ? "bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3" : ""}>
-	<div class="flex items-center gap-3 mb-1">
-		<Icon 
-			name={getFileIcon(displayFileName)} 
-			class="w-6 h-6 {iconColor || ''}" 
+	<button
+		type="button"
+		class="flex items-center gap-3 mb-1 w-full text-left hover:opacity-80 transition-opacity cursor-pointer"
+		onclick={handleClick}
+		title="Reveal in Files panel"
+	>
+		<Icon
+			name={getFileIcon(displayFileName)}
+			class="w-6 h-6 {iconColor || ''}"
 		/>
 		<div class="flex-1 min-w-0">
 			<h3 class="font-medium text-slate-900 dark:text-slate-100 truncate">
@@ -31,7 +45,7 @@
 				{formatPath(filePath)}
 			</p>
 		</div>
-	</div>
+	</button>
 	
 	{#if badges.length > 0}
 		<div class="flex gap-2 mt-3">

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

@@ -8,17 +8,14 @@
 <script lang="ts">
 	import { sessionState } from '$frontend/stores/core/sessions.svelte';
 	import { appState } from '$frontend/stores/core/app.svelte';
+	import { todoPanelState, saveTodoPanelState } from '$frontend/stores/ui/todo-panel.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	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);
+	// Drag-only local state (posX is always transient, posY syncs to store on drop)
+	let posY = $state(todoPanelState.posY);
 	let posX = $state(0);
-	let snapSide = $state<'left' | 'right'>('right');
 	let isDragging = $state(false);
 
 	// Minimized button ref for measuring width at snap time
@@ -28,18 +25,18 @@
 	let _sx = 0, _sy = 0, _mx = 0, _my = 0, _hasDragged = false;
 
 	function getPanelWidth() {
-		return isExpanded ? 330 : 230;
+		return todoPanelState.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
+		isDragging ? posX : todoPanelState.snapSide === 'right' ? window.innerWidth - getPanelWidth() - 16 : 16
 	);
 
 	const minimizedDisplayLeft = $derived(
 		isDragging
 			? posX
-			: snapSide === 'right'
+			: todoPanelState.snapSide === 'right'
 				? window.innerWidth - (minimizedBtn?.offsetWidth ?? 90) - 16
 				: 16
 	);
@@ -69,7 +66,9 @@
 	function endDrag(e: PointerEvent) {
 		if (!isDragging) return;
 		isDragging = false;
-		snapSide = posX + getPanelWidth() / 2 < window.innerWidth / 2 ? 'left' : 'right';
+		todoPanelState.snapSide = posX + getPanelWidth() / 2 < window.innerWidth / 2 ? 'left' : 'right';
+		todoPanelState.posY = posY;
+		saveTodoPanelState();
 	}
 
 	// --- Minimized button drag (click = restore, drag = move) ---
@@ -103,7 +102,9 @@
 			return;
 		}
 		const el = e.currentTarget as HTMLElement;
-		snapSide = posX + el.offsetWidth / 2 < window.innerWidth / 2 ? 'left' : 'right';
+		todoPanelState.snapSide = posX + el.offsetWidth / 2 < window.innerWidth / 2 ? 'left' : 'right';
+		todoPanelState.posY = posY;
+		saveTodoPanelState();
 	}
 
 	// Extract the latest TodoWrite data from messages
@@ -151,19 +152,22 @@
 	const shouldShow = $derived(latestTodos !== null && latestTodos.length > 0);
 
 	function toggleExpand() {
-		if (!isMinimized) {
-			isExpanded = !isExpanded;
+		if (!todoPanelState.isMinimized) {
+			todoPanelState.isExpanded = !todoPanelState.isExpanded;
+			saveTodoPanelState();
 		}
 	}
 
 	function minimize() {
-		isMinimized = true;
-		isExpanded = false;
+		todoPanelState.isMinimized = true;
+		todoPanelState.isExpanded = false;
+		saveTodoPanelState();
 	}
 
 	function restore() {
-		isMinimized = false;
-		isExpanded = true;
+		todoPanelState.isMinimized = false;
+		todoPanelState.isExpanded = true;
+		saveTodoPanelState();
 	}
 
 	function getStatusIcon(status: string) {
@@ -194,7 +198,7 @@
 </script>
 
 {#if shouldShow && !appState.isRestoring}
-	{#if isMinimized}
+	{#if todoPanelState.isMinimized}
 		<!-- Minimized state - small floating button, draggable -->
 		<button
 			bind:this={minimizedBtn}
@@ -210,7 +214,7 @@
 				cursor: {isDragging ? 'grabbing' : 'grab'};
 				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease'};
 			"
-			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 200 }}
+			transition:fly={{ x: todoPanelState.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>
@@ -222,11 +226,11 @@
 			style="
 				top: {posY}px;
 				left: {panelDisplayLeft}px;
-				width: {isExpanded ? '330px' : '230px'};
-				max-height: {isExpanded ? '600px' : '56px'};
+				width: {todoPanelState.isExpanded ? '330px' : '230px'};
+				max-height: {todoPanelState.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 }}
+			transition:fly={{ x: todoPanelState.snapSide === 'right' ? 100 : -100, duration: 300 }}
 		>
 			<!-- Header (drag handle) -->
 			<div
@@ -244,7 +248,7 @@
 						<span class="text-sm font-semibold text-slate-900 dark:text-slate-100">
 							Task Progress
 						</span>
-						{#if !isExpanded}
+						{#if !todoPanelState.isExpanded}
 							<span class="text-xs text-slate-600 dark:text-slate-400">
 								{progress.completed}/{progress.total} tasks ({progress.percentage}%)
 							</span>
@@ -256,10 +260,10 @@
 					<button
 						onclick={toggleExpand}
 						class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
-						title={isExpanded ? 'Collapse' : 'Expand'}
+						title={todoPanelState.isExpanded ? 'Collapse' : 'Expand'}
 					>
 						<Icon
-							name={isExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'}
+							name={todoPanelState.isExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'}
 							class="w-4 h-4 text-slate-600 dark:text-slate-400"
 						/>
 					</button>
@@ -273,7 +277,7 @@
 				</div>
 			</div>
 
-			{#if isExpanded}
+			{#if todoPanelState.isExpanded}
 				<!-- Progress bar -->
 				<div class="px-4 py-3 border-b border-slate-100 dark:border-slate-800">
 					<div class="flex items-center justify-between mb-2">

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>