@myrialabs/clopen 0.2.3 → 0.2.5

package/frontend/components/git/DiffViewer.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { onMount, onDestroy, untrack } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import MediaPreview from '$frontend/components/common/media/MediaPreview.svelte';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { isPreviewableFile } from '$frontend/utils/file-type';
 	import { getGitStatusBadgeLabel, getGitStatusBadgeColor } from '$frontend/utils/git-status';
 	import { themeStore } from '$frontend/stores/ui/theme.svelte';
 	import { projectState } from '$frontend/stores/core/projects.svelte';
@@ -11,7 +13,8 @@
 	import type { GitFileDiff } from '$shared/types/git';
 	import type { IconName } from '$shared/types/ui/icons';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/utils/ws';
+	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
+	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';
 
 	interface Props {
 		diff: GitFileDiff | null;
@@ -32,91 +35,21 @@
 	let monacoInstance: typeof import('monaco-editor') | null = null;
 	const isDark = $derived(themeStore.isDark);
 
-	// Binary file preview state
-	let blobUrl = $state<string | null>(null);
-	let pdfBlobUrl = $state<string | null>(null);
-	let isBinaryLoading = $state(false);
-
-	// File type detection helpers
-	function isImageFile(fileName: string): boolean {
-		const ext = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
-		return ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.bmp'].includes(ext);
-	}
-
-	function isSvgFile(fileName: string): boolean {
-		return fileName.toLowerCase().endsWith('.svg');
-	}
-
-	function isPdfFile(fileName: string): boolean {
-		return fileName.toLowerCase().endsWith('.pdf');
-	}
-
-	function isPreviewableBinary(fileName: string): boolean {
-		return isImageFile(fileName) || isSvgFile(fileName) || isPdfFile(fileName);
-	}
-
-	// Load binary content for preview
-	async function loadBinaryPreview(filePath: string) {
+	// Derive absolute path for binary preview
+	const binaryPreviewPath = $derived.by(() => {
+		if (!activeDiff?.isBinary || activeDiff.status === 'D') return null;
+		const filePath = activeDiff.newPath || activeDiff.oldPath;
+		if (!filePath) return null;
+		const fileName = getFileName(filePath);
+		if (!isPreviewableFile(fileName)) return null;
 		const projectPath = projectState.currentProject?.path;
-		if (!projectPath) return;
-
-		const absolutePath = `${projectPath}/${filePath}`;
-		isBinaryLoading = true;
-
-		try {
-			const response = await ws.http('files:read-content', { path: absolutePath });
-
-			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(filePath)) {
-					if (pdfBlobUrl) URL.revokeObjectURL(pdfBlobUrl);
-					pdfBlobUrl = URL.createObjectURL(blob);
-				} else {
-					if (blobUrl) URL.revokeObjectURL(blobUrl);
-					blobUrl = URL.createObjectURL(blob);
-				}
-			}
-		} catch (err) {
-			debug.error('git', 'Failed to load binary preview:', err);
-		} finally {
-			isBinaryLoading = false;
-		}
-	}
-
-	function cleanupBlobUrls() {
-		if (blobUrl) {
-			URL.revokeObjectURL(blobUrl);
-			blobUrl = null;
-		}
-		if (pdfBlobUrl) {
-			URL.revokeObjectURL(pdfBlobUrl);
-			pdfBlobUrl = null;
-		}
-	}
+		if (!projectPath) return null;
+		return `${projectPath}/${filePath}`;
+	});
 
-	// Load binary preview when activeDiff changes to a binary file
-	$effect(() => {
-		const currentDiff = activeDiff;
-		if (currentDiff?.isBinary) {
-			const filePath = currentDiff.newPath || currentDiff.oldPath;
-			if (filePath && isPreviewableBinary(getFileName(filePath))) {
-				// Status 'D' means file is deleted, can't preview
-				if (currentDiff.status !== 'D') {
-					untrack(() => {
-						cleanupBlobUrls();
-						loadBinaryPreview(filePath);
-					});
-				}
-			}
-		} else {
-			untrack(() => cleanupBlobUrls());
-		}
+	const binaryFileName = $derived.by(() => {
+		if (!activeDiff) return '';
+		return getFileName(activeDiff.newPath || activeDiff.oldPath);
 	});
 
 	// Build full content from hunks
@@ -162,6 +95,19 @@
 		return path.split(/[\\/]/).pop() || path;
 	}
 
+	function openInFilesPanel() {
+		if (!activeDiff) return;
+		const visiblePanels = getVisiblePanels(workspaceState.layout);
+		if (!visiblePanels.includes('files')) return;
+		const basePath = projectState.currentProject?.path;
+		if (!basePath) return;
+		const relativePath = activeDiff.newPath || activeDiff.oldPath;
+		const separator = basePath.includes('\\') ? '\\' : '/';
+		requestRevealFile(`${basePath}${separator}${relativePath}`);
+	}
+
+	const isFilesPanelVisible = $derived(getVisiblePanels(workspaceState.layout).includes('files'));
+
 	async function initDiffEditor() {
 		if (!containerRef || !activeDiff) return;
 
@@ -273,7 +219,6 @@
 			diffEditorInstance.dispose();
 			diffEditorInstance = null;
 		}
-		cleanupBlobUrls();
 	});
 </script>
 
@@ -288,20 +233,30 @@
 			<span>Select a file to view diff</span>
 		</div>
 	{:else}
-		<!-- File header (like FileViewer) -->
+		<!-- File header -->
 		<div class="flex-shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-slate-200 dark:border-slate-700">
-			<div class="flex items-center gap-2 min-w-0 flex-1">
-				<Icon name={getFileIcon(getFileName(activeDiff.newPath || activeDiff.oldPath)) as IconName} class="w-5 h-5 shrink-0" />
+			<div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+				<Icon name={getFileIcon(getFileName(activeDiff.newPath || activeDiff.oldPath)) as IconName} class="w-7 h-7 shrink-0" />
 				<div class="min-w-0 flex-1">
-					<h3 class="text-xs font-bold text-slate-900 dark:text-slate-100 truncate">
+					<h3 class="text-xs sm:text-sm font-bold text-slate-900 dark:text-slate-100 truncate">
 						{getFileName(activeDiff.newPath || activeDiff.oldPath)}
 					</h3>
-					<p class="text-3xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
+					<p class="text-xs text-slate-600 dark:text-slate-400 truncate mt-0.5">
 						{activeDiff.newPath || activeDiff.oldPath}
 					</p>
 				</div>
 			</div>
-			<div class="flex items-center gap-2 shrink-0">
+			<div class="flex items-center gap-1.5 sm:gap-1 flex-shrink-0">
+				{#if isFilesPanelVisible && activeDiff.status !== 'D'}
+					<button
+						type="button"
+						class="flex p-2 text-slate-600 dark:text-slate-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/30 rounded-lg transition-all duration-200 cursor-pointer"
+						onclick={openInFilesPanel}
+						title="Open in Files panel"
+					>
+						<Icon name="lucide:file-symlink" class="w-4 h-4" />
+					</button>
+				{/if}
 				<span class="text-3xs font-bold px-1.5 py-0.5 rounded {getGitStatusBadgeColor(activeDiff.status)}">
 					{getGitStatusBadgeLabel(activeDiff.status)}
 				</span>
@@ -309,7 +264,6 @@
 		</div>
 
 		{#if activeDiff.isBinary}
-			{@const fileName = getFileName(activeDiff.newPath || activeDiff.oldPath)}
 			{@const isDeleted = activeDiff.status === 'D'}
 			{#if isDeleted}
 				<!-- Deleted binary file -->
@@ -320,43 +274,9 @@
 						This binary file has been deleted and cannot be previewed.
 					</p>
 				</div>
-			{:else if isImageFile(fileName) || isSvgFile(fileName)}
-				<!-- Image / SVG preview -->
-				<div class="flex-1 flex items-center justify-center p-4 overflow-hidden bg-[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')]">
-					{#if isBinaryLoading}
-						<div class="w-5 h-5 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
-					{: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 isPdfFile(fileName)}
-				<!-- PDF preview -->
-				<div class="flex-1 h-full w-full">
-					{#if isBinaryLoading}
-						<div class="flex items-center justify-center h-full">
-							<div class="w-5 h-5 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
-						</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}
+			{:else if binaryPreviewPath}
+				<div class="flex-1 overflow-hidden">
+					<MediaPreview fileName={binaryFileName} filePath={binaryPreviewPath} />
 				</div>
 			{:else}
 				<!-- Generic binary file -->

package/frontend/components/git/FileChangeItem.svelte

@@ -4,6 +4,9 @@
 	import { getGitStatusLabel, getGitStatusColor } from '$frontend/utils/git-status';
 	import type { GitFileChange } from '$shared/types/git';
 	import type { IconName } from '$shared/types/ui/icons';
+	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
+	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
 
 	interface Props {
 		file: GitFileChange;
@@ -28,6 +31,15 @@
 		return parts.join('/');
 	});
 	const fileIcon = $derived(getFileIcon(fileName) as IconName);
+	const isFilesPanelVisible = $derived(getVisiblePanels(workspaceState.layout).includes('files'));
+
+	function openInFilesPanel(e: MouseEvent) {
+		e.stopPropagation();
+		const basePath = projectState.currentProject?.path;
+		if (!basePath) return;
+		const separator = basePath.includes('\\') ? '\\' : '/';
+		requestRevealFile(`${basePath}${separator}${file.path}`);
+	}
 </script>
 
 <div
@@ -57,6 +69,16 @@
 
 	<!-- Actions - always visible -->
 	<div class="flex items-center gap-0.5 shrink-0">
+		{#if isFilesPanelVisible && statusCode !== 'D'}
+			<button
+				type="button"
+				class="flex items-center justify-center w-6 h-6 rounded-md text-slate-400 hover:bg-violet-500/10 hover:text-violet-500 transition-colors bg-transparent border-none cursor-pointer"
+				onclick={openInFilesPanel}
+				title="Open in Files panel"
+			>
+				<Icon name="lucide:file-symlink" class="w-3.5 h-3.5" />
+			</button>
+		{/if}
 		{#if section === 'staged'}
 			<button
 				type="button"

package/frontend/components/settings/SettingsModal.svelte

@@ -219,7 +219,7 @@
 				<!-- Content Area -->
 				<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
 					<div class="flex-1 overflow-y-auto p-4 md:p-5">
-						{#if activeSection === 'model'}
+						{#if activeSection === 'models'}
 							<div in:fly={{ x: 20, duration: 200 }}>
 								<ModelSettings />
 							</div>

package/frontend/components/settings/SettingsView.svelte

@@ -23,7 +23,7 @@
 	<div class="flex-1 overflow-auto">
 		<div class="space-y-6">
 
-			<!-- Model Configuration -->
+			<!-- AI Model (Assistant + Commit Message) -->
 			<ModelSettings />
 
 			<!-- Appearance Configuration -->

package/frontend/components/settings/engines/AIEnginesSettings.svelte

@@ -383,9 +383,9 @@
 
 <div class="space-y-6">
 	<!-- Header -->
-	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">AI Engine</h3>
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Engines</h3>
 	<p class="text-sm text-slate-600 dark:text-slate-500 mb-4">
-		Manage AI engine installations and accounts
+		Manage engine installations and accounts
 	</p>
 
 	<!-- Claude Code Card -->

package/frontend/components/settings/general/UpdateSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { systemSettings, updateSystemSettings } from '$frontend/stores/features/settings.svelte';
-	import { updateState, checkForUpdate, runUpdate } from '$frontend/stores/ui/update.svelte';
+	import { updateState, checkForUpdate, runUpdate, showRestartModal } from '$frontend/stores/ui/update.svelte';
 	import Icon from '../../common/display/Icon.svelte';
 
 	function toggleAutoUpdate() {
@@ -88,10 +88,17 @@
 				</div>
 			{/if}
 
-			{#if updateState.updateSuccess}
+			{#if updateState.updateSuccess || updateState.pendingRestart}
 				<div class="mt-3 flex items-center gap-2 px-3 py-2 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
 					<Icon name="lucide:circle-check" class="w-4 h-4 text-emerald-500 shrink-0" />
-					<span class="text-xs text-emerald-600 dark:text-emerald-400">Updated successfully — restart clopen to apply</span>
+					<span class="text-xs text-emerald-600 dark:text-emerald-400">Updated to v{updateState.latestVersion} — restart required</span>
+					<button
+						type="button"
+						onclick={() => showRestartModal()}
+						class="text-xs font-semibold text-emerald-600 dark:text-emerald-400 underline underline-offset-2 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors"
+					>
+						How to restart
+					</button>
 				</div>
 			{/if}
 		</div>