@myrialabs/clopen 0.2.4 → 0.2.6

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/services/chat/chat.service.ts

@@ -196,7 +196,12 @@ class ChatService {
       this.streamCompleted = true;
       this.reconnected = false;
       this.activeProcessId = null;
-      this.setProcessState({ isLoading: false, isWaitingInput: false, isCancelling: false });
+      // Don't clear isCancelling here — it causes a race with presence.
+      // The chat:cancelled WS event arrives before broadcastPresence() updates,
+      // so clearing isCancelling lets the presence $effect re-enable isLoading
+      // (because hasActiveForSession is still true). The presence $effect will
+      // clear isCancelling once the stream is actually gone from presence.
+      this.setProcessState({ isLoading: false, isWaitingInput: false });
 
       // Mark any tool_use blocks that never got a tool_result
       this.markInterruptedTools();

package/frontend/services/preview/browser/browser-webcodecs.service.ts

@@ -115,17 +115,16 @@ export class BrowserWebCodecsService {
 	private lastAudioBytesReceived = 0;
 	private lastStatsTime = 0;
 
-	// ICE servers
-	private readonly iceServers: RTCIceServer[] = [
-		{ urls: 'stun:stun.l.google.com:19302' },
-		{ urls: 'stun:stun1.l.google.com:19302' }
-	];
+	// ICE servers - empty for local connections (both peers on same machine)
+	// STUN servers are unnecessary for localhost and add 100-500ms ICE gathering latency
+	private readonly iceServers: RTCIceServer[] = [];
 
 	// Callbacks
 	private onConnectionChange: ((connected: boolean) => void) | null = null;
 	private onConnectionFailed: (() => void) | null = null;
 	private onNavigationReconnect: (() => void) | null = null; // Fast reconnection after navigation
 	private onReconnectingStart: (() => void) | null = null; // Signals reconnecting state started (for UI)
+	private onFirstFrame: (() => void) | null = null; // Fires immediately when first frame is decoded
 	private onError: ((error: Error) => void) | null = null;
 	private onStats: ((stats: BrowserWebCodecsStreamStats) => void) | null = null;
 	private onCursorChange: ((cursor: string) => void) | null = null;
@@ -641,6 +640,11 @@ export class BrowserWebCodecsService {
 				this.firstFrameTimestamp = frame.timestamp;
 				debug.log('webcodecs', 'First video frame rendered');
 
+				// Notify immediately so UI can hide loading overlay without polling delay
+				if (this.onFirstFrame) {
+					this.onFirstFrame();
+				}
+
 				// Reset navigation state - frames are flowing, navigation is complete
 				if (this.isNavigating) {
 					debug.log('webcodecs', 'Navigation complete - frames received, resetting navigation state');
@@ -1477,6 +1481,10 @@ export class BrowserWebCodecsService {
 		this.onReconnectingStart = handler;
 	}
 
+	setFirstFrameHandler(handler: () => void): void {
+		this.onFirstFrame = handler;
+	}
+
 	setErrorHandler(handler: (error: Error) => void): void {
 		this.onError = handler;
 	}

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.6",
   "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"
+    }
+  ]
+}