@myrialabs/clopen 0.2.4 → 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 =>
@@ -981,7 +1025,7 @@
 			}
 
 			// 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';

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/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/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.4",
+  "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",

package/shared/constants/binary-extensions.ts

@@ -0,0 +1,40 @@
+/**
+ * Shared binary file extension constants.
+ * Single source of truth used by both backend (file-type-detection) and frontend (file-type).
+ */
+
+/** Binary extensions that CAN be previewed in the browser (image, audio, video, PDF) */
+export const PREVIEWABLE_BINARY_EXTENSIONS = new Set([
+	// Images
+	'.png', '.jpg', '.jpeg', '.gif', '.bmp', '.ico', '.webp', '.tiff', '.tif',
+	// Audio
+	'.mp3', '.wav', '.ogg', '.flac', '.aac', '.m4a', '.wma', '.opus',
+	// Video
+	'.mp4', '.webm', '.avi', '.mkv', '.mov', '.flv', '.wmv', '.m4v', '.ogv',
+	// Documents
+	'.pdf',
+]);
+
+/** Binary extensions that CANNOT be previewed — archives, executables, fonts, databases, etc. */
+export const NON_PREVIEWABLE_BINARY_EXTENSIONS = new Set([
+	// Archives
+	'.zip', '.tar', '.gz', '.bz2', '.xz', '.7z', '.rar', '.zst', '.lz4',
+	// Office documents
+	'.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx',
+	// Executables & compiled
+	'.exe', '.dll', '.com', '.bin', '.dat', '.pak', '.res',
+	'.beam', '.pyc', '.pyo', '.class', '.o', '.obj', '.so', '.dylib', '.a',
+	'.lib', '.wasm', '.bc', '.pdb', '.dSYM',
+	// Fonts
+	'.woff', '.woff2', '.ttf', '.eot', '.otf',
+	// Databases
+	'.sqlite', '.db', '.mdb',
+	// Disk images & other
+	'.iso', '.dmg', '.img', '.swf', '.swc',
+]);
+
+/** All known binary extensions (union of previewable + non-previewable) */
+export const ALL_BINARY_EXTENSIONS = new Set([
+	...PREVIEWABLE_BINARY_EXTENSIONS,
+	...NON_PREVIEWABLE_BINARY_EXTENSIONS,
+]);

package/shared/types/messaging/tool.ts

@@ -108,6 +108,7 @@ export interface ToolResult {
   type: 'tool_result';
   tool_use_id: string;
   content: string;
+  is_error?: boolean;
 }
 
 // ============================================================

package/shared/utils/file-type-detection.ts

@@ -1,7 +1,9 @@
 import { fileTypeFromBuffer } from 'file-type';
 import isTextPath from 'is-text-path';
 
+import { ALL_BINARY_EXTENSIONS } from '$shared/constants/binary-extensions';
 import { debug } from '$shared/utils/logger';
+
 /**
  * Simple and reliable text file detection using external libraries
  */
@@ -11,7 +13,13 @@ export async function isTextFile(filePath: string): Promise<boolean> {
 		if (isTextPath(filePath)) {
 			return true;
 		}
-		
+
+		// Fast reject: known binary extensions
+		const ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase();
+		if (ALL_BINARY_EXTENSIONS.has(ext)) {
+			return false;
+		}
+
 		const file = Bun.file(filePath);
 		const buffer = Buffer.from(await file.arrayBuffer());
 		

package/static/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "Clopen",
+  "short_name": "Clopen",
+  "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ]
+}