@myrialabs/clopen 0.2.3 → 0.2.5

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>

package/frontend/components/common/media/MediaPreview.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import LoadingSpinner from '$frontend/components/common/feedback/LoadingSpinner.svelte';
+	import { isImageFile, isSvgFile, isPdfFile, isAudioFile, isVideoFile } from '$frontend/utils/file-type';
+	import { debug } from '$shared/utils/logger';
+	import ws from '$frontend/utils/ws';
+
+	interface Props {
+		/** File name for type detection */
+		fileName: string;
+		/** Absolute path used to load binary content via ws */
+		filePath: string;
+		/** Optional text content for SVG inline rendering */
+		svgContent?: string;
+	}
+
+	const { fileName, filePath, svgContent }: Props = $props();
+
+	let blobUrl = $state<string | null>(null);
+	let pdfBlobUrl = $state<string | null>(null);
+	let mediaBlobUrl = $state<string | null>(null);
+	let isLoading = $state(false);
+
+	function cleanup() {
+		if (blobUrl) {
+			URL.revokeObjectURL(blobUrl);
+			blobUrl = null;
+		}
+		if (pdfBlobUrl) {
+			URL.revokeObjectURL(pdfBlobUrl);
+			pdfBlobUrl = null;
+		}
+		if (mediaBlobUrl) {
+			URL.revokeObjectURL(mediaBlobUrl);
+			mediaBlobUrl = null;
+		}
+	}
+
+	async function loadBinaryContent(path: string, name: string) {
+		isLoading = true;
+		try {
+			const response = await ws.http('files:read-content', { path });
+
+			if (response.content) {
+				const binaryString = atob(response.content);
+				const bytes = new Uint8Array(binaryString.length);
+				for (let i = 0; i < binaryString.length; i++) {
+					bytes[i] = binaryString.charCodeAt(i);
+				}
+				const blob = new Blob([bytes], { type: response.contentType || 'application/octet-stream' });
+
+				if (isPdfFile(name)) {
+					if (pdfBlobUrl) URL.revokeObjectURL(pdfBlobUrl);
+					pdfBlobUrl = URL.createObjectURL(blob);
+				} else if (isAudioFile(name) || isVideoFile(name)) {
+					if (mediaBlobUrl) URL.revokeObjectURL(mediaBlobUrl);
+					mediaBlobUrl = URL.createObjectURL(blob);
+				} else {
+					if (blobUrl) URL.revokeObjectURL(blobUrl);
+					blobUrl = URL.createObjectURL(blob);
+				}
+			}
+		} catch (err) {
+			debug.error('file', 'Failed to load binary content:', err);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	$effect(() => {
+		const name = fileName;
+		const path = filePath;
+		untrack(() => {
+			cleanup();
+			if (name && path) {
+				loadBinaryContent(path, name);
+			}
+		});
+	});
+
+	onDestroy(cleanup);
+</script>
+
+{#if isImageFile(fileName)}
+	<div class="flex items-center justify-center h-full p-4 overflow-hidden checkerboard-bg">
+		{#if isLoading}
+			<LoadingSpinner size="lg" />
+		{:else if blobUrl}
+			<img
+				src={blobUrl}
+				alt={fileName}
+				class="max-w-full max-h-full object-contain"
+			/>
+		{:else}
+			<div class="flex flex-col items-center gap-2 text-slate-500 text-xs">
+				<Icon name="lucide:image-off" class="w-8 h-8 opacity-40" />
+				<span>Failed to load preview</span>
+			</div>
+		{/if}
+	</div>
+{:else if isSvgFile(fileName)}
+	<div class="flex items-center justify-center h-full p-4 overflow-auto checkerboard-bg">
+		{#if isLoading}
+			<LoadingSpinner size="lg" />
+		{:else if blobUrl}
+			<img
+				src={blobUrl}
+				alt={fileName}
+				class="max-w-full max-h-full object-contain"
+			/>
+		{:else if svgContent}
+			<div class="max-w-full max-h-full flex items-center justify-center">
+				{@html svgContent}
+			</div>
+		{:else}
+			<div class="flex flex-col items-center gap-2 text-slate-500 text-xs">
+				<Icon name="lucide:image-off" class="w-8 h-8 opacity-40" />
+				<span>Failed to load preview</span>
+			</div>
+		{/if}
+	</div>
+{:else if isPdfFile(fileName)}
+	<div class="h-full w-full">
+		{#if isLoading}
+			<div class="flex items-center justify-center h-full">
+				<LoadingSpinner size="lg" />
+			</div>
+		{:else if pdfBlobUrl}
+			<iframe
+				src={pdfBlobUrl}
+				title={fileName}
+				class="w-full h-full border-0"
+			></iframe>
+		{:else}
+			<div class="flex flex-col items-center justify-center h-full gap-2 text-slate-500 text-xs">
+				<Icon name="lucide:file-x" class="w-8 h-8 opacity-40" />
+				<span>Failed to load PDF preview</span>
+			</div>
+		{/if}
+	</div>
+{:else if isAudioFile(fileName)}
+	<div class="flex flex-col items-center justify-center h-full p-8 checkerboard-bg">
+		<Icon name="lucide:music" class="w-16 h-16 text-violet-400 mb-6" />
+		<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-4">
+			{fileName}
+		</h3>
+		{#if isLoading}
+			<LoadingSpinner size="lg" />
+		{:else if mediaBlobUrl}
+			<audio controls class="w-full max-w-md" src={mediaBlobUrl}>
+				Your browser does not support the audio element.
+			</audio>
+		{:else}
+			<div class="flex flex-col items-center gap-2 text-slate-500 text-xs">
+				<Icon name="lucide:music" class="w-8 h-8 opacity-40" />
+				<span>Failed to load audio</span>
+			</div>
+		{/if}
+	</div>
+{:else if isVideoFile(fileName)}
+	<div class="flex items-center justify-center h-full p-4 overflow-hidden checkerboard-bg">
+		{#if isLoading}
+			<LoadingSpinner size="lg" />
+		{:else if mediaBlobUrl}
+			<!-- svelte-ignore a11y_media_has_caption -->
+			<video controls class="max-w-full max-h-full object-contain" src={mediaBlobUrl}>
+				Your browser does not support the video element.
+			</video>
+		{:else}
+			<div class="flex flex-col items-center gap-2 text-slate-500 text-xs">
+				<Icon name="lucide:video-off" class="w-8 h-8 opacity-40" />
+				<span>Failed to load video</span>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.checkerboard-bg {
+		background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23f0f0f0%22%2F%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23e0e0e0%22%2F%3E%3C%2Fsvg%3E');
+	}
+
+	:global(.dark) .checkerboard-bg {
+		background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23181818%22%2F%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222222%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222222%22%2F%3E%3C%2Fsvg%3E');
+	}
+</style>