@myrialabs/clopen 0.2.3 → 0.2.5

package/frontend/components/workspace/panels/FilesPanel.svelte

@@ -18,6 +18,7 @@
 	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
 	import type { IconName } from '$shared/types/ui/icons';
+	import { fileState, clearRevealRequest } from '$frontend/stores/core/files.svelte';
 
 	// Props
 	interface Props {
@@ -51,6 +52,7 @@
 		savedContent: string;
 		isLoading: boolean;
 		externallyChanged?: boolean;
+		isBinary?: boolean;
 	}
 
 	let openTabs = $state<EditorTab[]>([]);
@@ -68,6 +70,7 @@
 	let displayFile = $state<FileNode | null>(null);
 	let displayLoading = $state(false);
 	let displayTargetLine = $state<number | undefined>(undefined);
+	let displayIsBinary = $state(false);
 	let displayExternallyChanged = $state(false);
 
 	// Sync display state when active tab changes
@@ -78,12 +81,14 @@
 			displaySavedContent = activeTab.savedContent;
 			displayLoading = activeTab.isLoading;
 			displayExternallyChanged = activeTab.externallyChanged || false;
+			displayIsBinary = activeTab.isBinary || false;
 		} else {
 			displayFile = null;
 			displayContent = '';
 			displaySavedContent = '';
 			displayLoading = false;
 			displayExternallyChanged = false;
+			displayIsBinary = false;
 		}
 	});
 
@@ -341,9 +346,10 @@
 		try {
 			const data = await ws.http('files:read-file', { file_path: filePath });
 			const content = data.content || '';
+			const isBinary = data.isBinary || false;
 			openTabs = openTabs.map(t =>
 				t.file.path === filePath
-					? { ...t, currentContent: content, savedContent: content, isLoading: false }
+					? { ...t, currentContent: content, savedContent: content, isLoading: false, isBinary }
 					: t
 			);
 			// Update display if this is the active tab
@@ -351,6 +357,7 @@
 				displayContent = content;
 				displaySavedContent = content;
 				displayLoading = false;
+				displayIsBinary = isBinary;
 			}
 			return true;
 		} catch (err) {
@@ -377,6 +384,7 @@
 			displayContent = tab.currentContent;
 			displaySavedContent = tab.savedContent;
 			displayLoading = tab.isLoading;
+			displayIsBinary = tab.isBinary || false;
 		}
 	}
 
@@ -1086,6 +1094,72 @@
 		prevTwoColumnMode = isTwoColumnMode;
 	});
 
+	// Reveal and open file in editor when requested from external components (e.g. chat tools)
+	$effect(() => {
+		const revealPath = fileState.revealRequest;
+		if (!revealPath || !projectPath) return;
+
+		clearRevealRequest();
+
+		// Expand all parent directories in the tree
+		const relativePath = revealPath.startsWith(projectPath)
+			? revealPath.slice(projectPath.length).replace(/^[/\\]/, '')
+			: '';
+		if (relativePath) {
+			const parts = relativePath.split(/[/\\]/);
+			let currentPath = projectPath;
+			for (let i = 0; i < parts.length - 1; i++) {
+				currentPath += '/' + parts[i];
+				expandedFolders.add(currentPath);
+			}
+			expandedFolders = new Set(expandedFolders);
+		}
+
+		// Open file in editor tab (handleFileOpen also handles missing tree nodes)
+		revealAndOpenFile(revealPath);
+	});
+
+	async function revealAndOpenFile(filePath: string) {
+		const existingTab = openTabs.find(t => t.file.path === filePath);
+		if (existingTab) {
+			// Tab already open — just activate it
+			activeTabPath = filePath;
+			if (!isTwoColumnMode) viewMode = 'viewer';
+			scrollToActiveFile(filePath);
+			return;
+		}
+
+		// Create new tab
+		let file = findFileInTree(projectFiles, filePath);
+		if (!file) {
+			const fileName = filePath.split(/[/\\]/).pop() || 'Untitled';
+			file = { name: fileName, path: filePath, type: 'file', size: 0, modified: new Date() };
+		}
+		const newTab: EditorTab = {
+			file,
+			currentContent: '',
+			savedContent: '',
+			isLoading: true
+		};
+		openTabs = [...openTabs, newTab];
+		activeTabPath = filePath;
+		if (!isTwoColumnMode) viewMode = 'viewer';
+
+		// Load content and verify file exists on disk
+		const success = await loadTabContent(filePath);
+		if (!success) {
+			openTabs = openTabs.filter(t => t.file.path !== filePath);
+			if (activeTabPath === filePath) {
+				activeTabPath = openTabs.length > 0 ? openTabs[openTabs.length - 1].file.path : null;
+				if (!activeTabPath && !isTwoColumnMode) viewMode = 'tree';
+			}
+			showErrorAlert('File no longer exists on disk.', 'File Not Found');
+			return;
+		}
+
+		scrollToActiveFile(filePath);
+	}
+
 	// Save state to persistent storage on component destruction (mobile/desktop switch)
 	onDestroy(() => {
 		if (projectPath) {
@@ -1269,6 +1343,7 @@
 							onToggleWordWrap={() => { wordWrapEnabled = !wordWrapEnabled; }}
 							externallyChanged={displayExternallyChanged}
 							onForceReload={forceReloadTab}
+							isBinary={displayIsBinary}
 						/>
 					</div>
 				</div>

package/frontend/components/workspace/panels/GitPanel.svelte

@@ -8,6 +8,7 @@
 	import { settings } from '$frontend/stores/features/settings.svelte';
 	import ws from '$frontend/utils/ws';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { isPreviewableFile, isBinaryFile } from '$frontend/utils/file-type';
 	import { getGitStatusLabel, getGitStatusColor } from '$frontend/utils/git-status';
 	import type { IconName } from '$shared/types/ui/icons';
 	import type {
@@ -404,16 +405,8 @@
 
 	// Detect binary files by extension (for fallback when git diff returns empty)
 	function isBinaryByExtension(filePath: string): boolean {
-		const ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase();
-		return [
-			'.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.bmp', '.svg',
-			'.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx',
-			'.zip', '.tar', '.gz', '.7z', '.rar', '.bz2',
-			'.exe', '.dll', '.so', '.dylib',
-			'.woff', '.woff2', '.ttf', '.eot', '.otf',
-			'.mp3', '.mp4', '.wav', '.avi', '.mkv', '.flv', '.mov', '.ogg',
-			'.sqlite', '.db',
-		].includes(ext);
+		const fileName = filePath.split(/[\\/]/).pop() || filePath;
+		return isPreviewableFile(fileName) || isBinaryFile(fileName);
 	}
 
 	async function viewDiff(file: GitFileChange, section: string) {
@@ -437,23 +430,74 @@
 		if (!isTwoColumnMode) viewMode = 'diff';
 
 		try {
-			const action = section === 'staged' ? 'git:diff-staged' : 'git:diff-unstaged';
-			const diffs = await ws.http(action, { projectId, filePath: file.path });
-			let diffResult: GitFileDiff | null = diffs.length > 0 ? diffs[0] : null;
-
-			// When git diff returns empty (e.g. untracked files), create a synthetic diff
-			if (!diffResult) {
-				diffResult = {
-					oldPath: file.path,
-					newPath: file.path,
-					status: status || '?',
-					hunks: [],
-					isBinary: isBinaryByExtension(file.path)
-				};
-			} else if (status) {
-				// Override diff parser status with authoritative status from git status
-				// parseDiff defaults to 'M', but the real status (A, D, R, etc.) comes from git status
-				diffResult = { ...diffResult, status };
+			let diffResult: GitFileDiff | null = null;
+
+			if (status === '?') {
+				// Untracked files have no git diff — read file content to build a synthetic diff
+				const isBinary = isBinaryByExtension(file.path);
+				if (isBinary) {
+					diffResult = {
+						oldPath: file.path,
+						newPath: file.path,
+						status: '?',
+						hunks: [],
+						isBinary: true
+					};
+				} else {
+					const basePath = projectState.currentProject?.path || '';
+					const separator = basePath.includes('\\') ? '\\' : '/';
+					const fullPath = `${basePath}${separator}${file.path}`;
+					const fileData = await ws.http('files:read-file', { file_path: fullPath });
+
+					if (fileData.isBinary) {
+						// Backend detected binary content — show preview instead of diff
+						diffResult = {
+							oldPath: file.path,
+							newPath: file.path,
+							status: '?',
+							hunks: [],
+							isBinary: true
+						};
+					} else {
+						const lines = (fileData.content || '').split('\n');
+						diffResult = {
+							oldPath: file.path,
+							newPath: file.path,
+							status: '?',
+							hunks: [{
+								oldStart: 0,
+								oldLines: 0,
+								newStart: 1,
+								newLines: lines.length,
+								header: `@@ -0,0 +1,${lines.length} @@`,
+								lines: lines.map((line, i) => ({
+									type: 'add' as const,
+									content: line,
+									newLineNumber: i + 1
+								}))
+							}],
+							isBinary: false
+						};
+					}
+				}
+			} else {
+				const action = section === 'staged' ? 'git:diff-staged' : 'git:diff-unstaged';
+				const diffs = await ws.http(action, { projectId, filePath: file.path });
+				diffResult = diffs.length > 0 ? diffs[0] : null;
+
+				if (!diffResult) {
+					diffResult = {
+						oldPath: file.path,
+						newPath: file.path,
+						status: status || '?',
+						hunks: [],
+						isBinary: isBinaryByExtension(file.path)
+					};
+				} else if (status) {
+					// Override diff parser status with authoritative status from git status
+					// parseDiff defaults to 'M', but the real status (A, D, R, etc.) comes from git status
+					diffResult = { ...diffResult, status };
+				}
 			}
 
 			openTabs = openTabs.map(t =>
@@ -674,7 +718,7 @@
 		isPulling = true;
 		try {
 			const prevBehind = branchInfo?.behind ?? 0;
-			const result = await ws.http('git:pull', { projectId, remote: selectedRemote });
+			const result = await ws.http('git:pull', { projectId, remote: selectedRemote, branch: branchInfo?.current });
 			if (!result.success) {
 				if (result.message.includes('conflict')) {
 					await loadAll();
@@ -704,7 +748,7 @@
 		isPushing = true;
 		try {
 			const prevAhead = branchInfo?.ahead ?? 0;
-			const result = await ws.http('git:push', { projectId, remote: selectedRemote });
+			const result = await ws.http('git:push', { projectId, remote: selectedRemote, branch: branchInfo?.current });
 			if (!result.success) {
 				showError('Push Failed', result.message);
 			} else {
@@ -971,11 +1015,17 @@
 		if (changeDebounce) clearTimeout(changeDebounce);
 		changeDebounce = setTimeout(async () => {
 			changeDebounce = null;
-			// Refresh git status
-			await loadStatus();
+			// Refresh git status and branches (branch switch also modifies working tree)
+			const prevBranch = branchInfo?.current;
+			await Promise.all([loadStatus(), loadBranches()]);
+
+			// If branch changed, also refresh remotes
+			if (branchInfo?.current !== prevBranch) {
+				loadRemotes();
+			}
 
 			// Refresh the active diff tab if currently viewing one
-			if (activeTab && !activeTab.isLoading && activeTab.section !== 'commit') {
+			if (activeTab && !activeTab.isLoading && activeTab.section !== 'commit' && activeTab.status !== '?') {
 				const tab = activeTab;
 				try {
 					const action = tab.section === 'staged' ? 'git:diff-staged' : 'git:diff-unstaged';
@@ -1016,8 +1066,9 @@
 		const unsub = ws.on('git:changed', (payload: any) => {
 			if (payload.projectId !== projectId || !isRepo) return;
 			scheduleGitRefresh();
-			// Also refresh branches in case of branch switch/create/delete
+			// Refresh branches and remotes in case of branch switch/create/delete
 			loadBranches();
+			loadRemotes();
 			// Refresh log if it was already loaded (History tab was visited)
 			if (commits.length > 0) {
 				loadLog(true);

package/frontend/main.ts

@@ -6,6 +6,10 @@ import { mount } from 'svelte';
 import './app.css';
 import App from './App.svelte';
 
+if (import.meta.env.DEV) {
+	document.title = 'Clopen - DEV';
+}
+
 const app = mount(App, {
 	target: document.getElementById('app')!
 });

package/frontend/stores/core/files.svelte.ts

@@ -11,6 +11,7 @@ interface FileState {
 	expandedFolders: Set<string>;
 	isLoading: boolean;
 	error: string | null;
+	revealRequest: string | null;
 }
 
 // File state using Svelte 5 runes
@@ -19,7 +20,8 @@ export const fileState = $state<FileState>({
 	selectedFile: null,
 	expandedFolders: new Set<string>(),
 	isLoading: false,
-	error: null
+	error: null,
+	revealRequest: null
 });
 
 // ========================================
@@ -70,4 +72,16 @@ export function setError(error: string | null) {
 
 export function clearError() {
 	fileState.error = null;
+}
+
+// ========================================
+// FILE REVEAL
+// ========================================
+
+export function requestRevealFile(filePath: string) {
+	fileState.revealRequest = filePath;
+}
+
+export function clearRevealRequest() {
+	fileState.revealRequest = null;
 }

package/frontend/stores/features/settings.svelte.ts

@@ -32,7 +32,13 @@ const defaultSettings: AppSettings = {
 	soundNotifications: true,
 	pushNotifications: false,
 	layoutPresetVisibility: createDefaultPresetVisibility(),
-	fontSize: 13
+	fontSize: 13,
+	commitGenerator: {
+		useCustomModel: false,
+		engine: 'claude-code',
+		model: 'claude-code:haiku',
+		format: 'single-line'
+	}
 };
 
 // Default system settings
@@ -63,7 +69,12 @@ export function applyFontSize(size: number): void {
 export function applyServerSettings(serverSettings: Partial<AppSettings> | null): void {
 	if (serverSettings && typeof serverSettings === 'object') {
 		// Merge with defaults to ensure all properties exist
-		Object.assign(settings, { ...defaultSettings, ...serverSettings });
+		const merged = { ...defaultSettings, ...serverSettings };
+		// Deep merge nested objects so new default fields are preserved
+		if (serverSettings.commitGenerator) {
+			merged.commitGenerator = { ...defaultSettings.commitGenerator, ...serverSettings.commitGenerator };
+		}
+		Object.assign(settings, merged);
 		applyFontSize(settings.fontSize);
 		debug.log('settings', 'Applied server settings');
 	}

package/frontend/stores/ui/settings-modal.svelte.ts

@@ -6,7 +6,7 @@
 import type { IconName } from '$shared/types/ui/icons';
 
 export type SettingsSection =
-	| 'model'
+	| 'models'
 	| 'engines'
 	| 'appearance'
 	| 'notifications'
@@ -31,10 +31,10 @@ export interface SettingsSectionMeta {
 
 export const settingsSections: SettingsSectionMeta[] = [
 	{
-		id: 'model',
-		label: 'Model',
-		icon: 'lucide:cpu',
-		description: 'AI engine and model'
+		id: 'models',
+		label: 'Models',
+		icon: 'lucide:sparkles',
+		description: 'Chat and commit model'
 	},
 	{
 		id: 'appearance',
@@ -56,8 +56,8 @@ export const settingsSections: SettingsSectionMeta[] = [
 	},
 	{
 		id: 'engines',
-		label: 'AI Engine',
-		icon: 'lucide:bot',
+		label: 'Engines',
+		icon: 'lucide:plug',
 		description: 'Installation and accounts',
 		adminOnly: true
 	},
@@ -87,11 +87,11 @@ export const settingsSections: SettingsSectionMeta[] = [
 // Create the state using Svelte 5 runes
 export const settingsModalState = $state<SettingsModalState>({
 	isOpen: false,
-	activeSection: 'model'
+	activeSection: 'models'
 });
 
 // Helper functions
-export function openSettingsModal(section: SettingsSection = 'model') {
+export function openSettingsModal(section: SettingsSection = 'models') {
 	settingsModalState.isOpen = true;
 	settingsModalState.activeSection = section;
 }

package/frontend/stores/ui/todo-panel.svelte.ts

@@ -0,0 +1,39 @@
+/**
+ * Todo Panel UI State
+ *
+ * Persists floating todo panel position and view mode via server-side user state.
+ */
+
+import ws from '$frontend/utils/ws';
+import { debug } from '$shared/utils/logger';
+
+export interface TodoPanelState {
+	posY: number;
+	snapSide: 'left' | 'right';
+	isExpanded: boolean;
+	isMinimized: boolean;
+}
+
+const defaults: TodoPanelState = {
+	posY: 80,
+	snapSide: 'right',
+	isExpanded: true,
+	isMinimized: false,
+};
+
+export const todoPanelState = $state<TodoPanelState>({ ...defaults });
+
+/** Apply server-restored state during initialization. */
+export function applyTodoPanelState(saved: Partial<TodoPanelState> | null): void {
+	if (saved && typeof saved === 'object') {
+		Object.assign(todoPanelState, { ...defaults, ...saved });
+		debug.log('workspace', 'Applied server todo panel state');
+	}
+}
+
+/** Persist current state to server (fire-and-forget). */
+export function saveTodoPanelState(): void {
+	ws.http('user:save-state', { key: 'todoPanelState', value: { ...todoPanelState } }).catch(err => {
+		debug.error('workspace', 'Failed to save todo panel state:', err);
+	});
+}

package/frontend/stores/ui/update.svelte.ts

@@ -18,6 +18,9 @@ interface UpdateState {
 	errorType: 'check' | 'update' | null;
 	updateOutput: string | null;
 	updateSuccess: boolean;
+	pendingRestart: boolean;
+	pendingVersions: { from: string; to: string } | null;
+	showRestartModal: boolean;
 }
 
 export const updateState = $state<UpdateState>({
@@ -30,7 +33,10 @@ export const updateState = $state<UpdateState>({
 	error: null,
 	errorType: null,
 	updateOutput: null,
-	updateSuccess: false
+	updateSuccess: false,
+	pendingRestart: false,
+	pendingVersions: null,
+	showRestartModal: false
 });
 
 let checkInterval: ReturnType<typeof setInterval> | null = null;
@@ -49,8 +55,17 @@ export async function checkForUpdate(): Promise<void> {
 		updateState.latestVersion = result.latestVersion;
 		updateState.updateAvailable = result.updateAvailable;
 
-		// Auto-update if enabled and update is available
-		if (result.updateAvailable && systemSettings.autoUpdate) {
+		// Restore pending restart state from backend (survives page refresh)
+		if (result.pendingRestart && result.pendingUpdate) {
+			updateState.pendingRestart = true;
+			updateState.pendingVersions = { from: result.pendingUpdate.fromVersion, to: result.pendingUpdate.toVersion };
+			updateState.updateSuccess = true;
+			updateState.latestVersion = result.pendingUpdate.toVersion;
+			updateState.showRestartModal = true;
+		}
+
+		// Auto-update if enabled and update is available (skip if already pending restart)
+		if (result.updateAvailable && systemSettings.autoUpdate && !result.pendingRestart) {
 			debug.log('server', 'Auto-update enabled, starting update...');
 			await runUpdate();
 		}
@@ -77,7 +92,10 @@ export async function runUpdate(): Promise<void> {
 		updateState.updateOutput = result.output;
 		updateState.updateSuccess = true;
 		updateState.updateAvailable = false;
+		updateState.pendingRestart = true;
+		updateState.pendingVersions = { from: updateState.currentVersion, to: result.newVersion };
 		updateState.latestVersion = result.newVersion;
+		updateState.showRestartModal = true;
 
 		debug.log('server', 'Update completed successfully');
 	} catch (err) {
@@ -89,11 +107,34 @@ export async function runUpdate(): Promise<void> {
 	}
 }
 
-/** Dismiss the update banner */
+/** Dismiss the update banner (not allowed when restart is pending) */
 export function dismissUpdate(): void {
+	if (updateState.pendingRestart) return;
 	updateState.dismissed = true;
 }
 
+/** Show the restart instructions modal */
+export function showRestartModal(): void {
+	updateState.showRestartModal = true;
+}
+
+/** Hide the restart instructions modal */
+export function hideRestartModal(): void {
+	updateState.showRestartModal = false;
+}
+
+// Listen for update-completed broadcast (notifies other tabs/clients)
+ws.on('system:update-completed', (payload) => {
+	debug.log('server', 'Update completed broadcast received');
+	updateState.updateSuccess = true;
+	updateState.updateAvailable = false;
+	updateState.pendingRestart = true;
+	updateState.pendingVersions = { from: payload.fromVersion, to: payload.toVersion };
+	updateState.latestVersion = payload.toVersion;
+	updateState.showRestartModal = true;
+	updateState.dismissed = false;
+});
+
 /** Start periodic update checks (every 30 minutes) */
 export function startUpdateChecker(): void {
 	// Initial check after 5 seconds (let the app settle)

package/frontend/utils/file-type.ts

@@ -0,0 +1,68 @@
+/**
+ * Shared file type detection utilities.
+ * Used by FileViewer, DiffViewer, and MediaPreview.
+ *
+ * Extension lists are sourced from shared/constants/binary-extensions.ts
+ * to stay in sync with the backend's file-type-detection.
+ */
+
+import { NON_PREVIEWABLE_BINARY_EXTENSIONS } from '$shared/constants/binary-extensions';
+
+const IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.bmp'];
+const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.flac', '.aac', '.m4a', '.wma', '.opus'];
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogv', '.mov', '.avi', '.mkv', '.flv', '.wmv', '.m4v'];
+
+function getExtension(fileName: string): string {
+	return fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+}
+
+export function isImageFile(fileName: string): boolean {
+	return IMAGE_EXTENSIONS.includes(getExtension(fileName));
+}
+
+export function isSvgFile(fileName: string): boolean {
+	return fileName.toLowerCase().endsWith('.svg');
+}
+
+export function isPdfFile(fileName: string): boolean {
+	return fileName.toLowerCase().endsWith('.pdf');
+}
+
+export function isAudioFile(fileName: string): boolean {
+	return AUDIO_EXTENSIONS.includes(getExtension(fileName));
+}
+
+export function isVideoFile(fileName: string): boolean {
+	return VIDEO_EXTENSIONS.includes(getExtension(fileName));
+}
+
+/** Non-previewable binary file detection, sourced from shared constants. */
+export function isBinaryFile(fileName: string): boolean {
+	return NON_PREVIEWABLE_BINARY_EXTENSIONS.has(getExtension(fileName));
+}
+
+export function isVisualFile(fileName: string): boolean {
+	return isImageFile(fileName) || isSvgFile(fileName) || isPdfFile(fileName);
+}
+
+export function isMediaFile(fileName: string): boolean {
+	return isAudioFile(fileName) || isVideoFile(fileName);
+}
+
+/** Returns true if the file can be rendered as a media preview (image, SVG, PDF, audio, video). */
+export function isPreviewableFile(fileName: string): boolean {
+	return isVisualFile(fileName) || isMediaFile(fileName);
+}
+
+/** Detects the backend's binary placeholder content pattern. */
+export function isBinaryContent(content: string): boolean {
+	return /^\[Binary file - \d+ bytes\]$/.test(content);
+}
+
+export function formatFileSize(bytes: number): string {
+	if (bytes === 0) return '0 B';
+	const k = 1024;
+	const sizes = ['B', 'KB', 'MB', 'GB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}

package/index.html

@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.svg" />
+		<link rel="manifest" href="/manifest.json" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta
 			name="description"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
   "author": "Myria Labs",
   "license": "MIT",