@myrialabs/clopen 0.2.4 → 0.2.5

package/backend/engine/adapters/opencode/message-converter.ts

@@ -356,6 +356,35 @@ function normalizeToolInput(claudeToolName: string, raw: OCToolInput): Normalize
 	}
 }
 
+// ============================================================
+// Tool Error Detection
+// ============================================================
+
+/**
+ * Common error prefixes in tool output content.
+ * OpenCode SDK may mark a tool as 'completed' even when the output is an error
+ * (e.g. "Error: File not found"). These patterns detect such cases.
+ */
+const ERROR_CONTENT_PATTERNS = [
+	/^Error:\s/i,
+	/^ENOENT:\s/i,
+	/^EPERM:\s/i,
+	/^EACCES:\s/i,
+	/^Command failed/i,
+	/^Permission denied/i,
+];
+
+/**
+ * Determine if a tool result should be marked as is_error.
+ * Returns true when the tool part status is 'error', OR when the output
+ * content matches a known error pattern (for tools that complete with error output).
+ */
+function isToolError(status: string, content: string): boolean {
+	if (status === 'error') return true;
+	if (!content || status !== 'completed') return false;
+	return ERROR_CONTENT_PATTERNS.some(pattern => pattern.test(content));
+}
+
 // ============================================================
 // Stop Reason Mapping
 // ============================================================
@@ -483,16 +512,19 @@ export function convertAssistantMessages(
 			};
 
 			if (toolPart.state.status === 'completed') {
+				const output = toolPart.state.output || '';
 				block.$result = {
 					type: 'tool_result',
 					tool_use_id: block.id,
-					content: toolPart.state.output || '',
+					content: output,
+					...(isToolError('completed', output) && { is_error: true }),
 				};
 			} else if (toolPart.state.status === 'error') {
 				block.$result = {
 					type: 'tool_result',
 					tool_use_id: block.id,
 					content: toolPart.state.error || 'Tool execution failed',
+					is_error: true,
 				};
 			}
 
@@ -854,6 +886,8 @@ export function convertToolResultOnly(
 		content = '';
 	}
 
+	const hasError = isToolError(toolPart.state.status, content);
+
 	return {
 		type: 'user',
 		uuid: crypto.randomUUID(),
@@ -864,7 +898,8 @@ export function convertToolResultOnly(
 			content: [{
 				type: 'tool_result',
 				tool_use_id: toolUseId,
-				content
+				content,
+				...(hasError && { is_error: true }),
 			}]
 		}
 	} as unknown as SDKMessage;

package/backend/ws/user/crud.ts

@@ -109,7 +109,8 @@ export const crudHandler = createRouter()
 			currentProjectId: t.Union([t.String(), t.Null()]),
 			lastView: t.Union([t.String(), t.Null()]),
 			settings: t.Union([t.Any(), t.Null()]),
-			unreadSessions: t.Union([t.Any(), t.Null()])
+			unreadSessions: t.Union([t.Any(), t.Null()]),
+			todoPanelState: t.Union([t.Any(), t.Null()])
 		})
 	}, async ({ conn }) => {
 		const userId = ws.getUserId(conn);
@@ -118,6 +119,7 @@ export const crudHandler = createRouter()
 		const lastView = getUserState(userId, 'lastView') as string | null;
 		const userSettings = getUserState(userId, 'settings');
 		const unreadSessions = getUserState(userId, 'unreadSessions');
+		const todoPanelState = getUserState(userId, 'todoPanelState');
 
 		debug.log('user', `Restored state for ${userId}:`, {
 			currentProjectId,
@@ -130,7 +132,8 @@ export const crudHandler = createRouter()
 			currentProjectId: currentProjectId ?? null,
 			lastView: lastView ?? null,
 			settings: userSettings ?? null,
-			unreadSessions: unreadSessions ?? null
+			unreadSessions: unreadSessions ?? null,
+			todoPanelState: todoPanelState ?? null
 		};
 	})
 
@@ -147,7 +150,7 @@ export const crudHandler = createRouter()
 		const userId = ws.getUserId(conn);
 
 		// Validate allowed keys to prevent arbitrary data storage
-		const allowedKeys = ['currentProjectId', 'lastView', 'settings', 'unreadSessions'];
+		const allowedKeys = ['currentProjectId', 'lastView', 'settings', 'unreadSessions', 'todoPanelState'];
 		if (!allowedKeys.includes(data.key)) {
 			throw new Error(`Invalid state key: ${data.key}. Allowed: ${allowedKeys.join(', ')}`);
 		}

package/frontend/components/chat/tools/components/FileHeader.svelte

@@ -3,6 +3,15 @@
 	import type { IconName } from '$shared/types/ui/icons';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
 	import { formatPath } from '../../shared/utils';
+	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
+	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';
+
+	function handleClick() {
+		const visiblePanels = getVisiblePanels(workspaceState.layout);
+		if (visiblePanels.includes('files')) {
+			requestRevealFile(filePath);
+		}
+	}
 
 	interface Props {
 		filePath: string;
@@ -18,10 +27,15 @@
 </script>
 
 <div class={box ? "bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3" : ""}>
-	<div class="flex items-center gap-3 mb-1">
-		<Icon 
-			name={getFileIcon(displayFileName)} 
-			class="w-6 h-6 {iconColor || ''}" 
+	<button
+		type="button"
+		class="flex items-center gap-3 mb-1 w-full text-left hover:opacity-80 transition-opacity cursor-pointer"
+		onclick={handleClick}
+		title="Reveal in Files panel"
+	>
+		<Icon
+			name={getFileIcon(displayFileName)}
+			class="w-6 h-6 {iconColor || ''}"
 		/>
 		<div class="flex-1 min-w-0">
 			<h3 class="font-medium text-slate-900 dark:text-slate-100 truncate">
@@ -31,7 +45,7 @@
 				{formatPath(filePath)}
 			</p>
 		</div>
-	</div>
+	</button>
 	
 	{#if badges.length > 0}
 		<div class="flex gap-2 mt-3">

package/frontend/components/chat/widgets/FloatingTodoList.svelte

@@ -8,17 +8,14 @@
 <script lang="ts">
 	import { sessionState } from '$frontend/stores/core/sessions.svelte';
 	import { appState } from '$frontend/stores/core/app.svelte';
+	import { todoPanelState, saveTodoPanelState } from '$frontend/stores/ui/todo-panel.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import { fly } from 'svelte/transition';
 	import type { TodoWriteToolInput } from '$shared/types/messaging';
 
-	let isExpanded = $state(true);
-	let isMinimized = $state(false);
-
-	// Drag & snap state
-	let posY = $state(80);
+	// Drag-only local state (posX is always transient, posY syncs to store on drop)
+	let posY = $state(todoPanelState.posY);
 	let posX = $state(0);
-	let snapSide = $state<'left' | 'right'>('right');
 	let isDragging = $state(false);
 
 	// Minimized button ref for measuring width at snap time
@@ -28,18 +25,18 @@
 	let _sx = 0, _sy = 0, _mx = 0, _my = 0, _hasDragged = false;
 
 	function getPanelWidth() {
-		return isExpanded ? 330 : 230;
+		return todoPanelState.isExpanded ? 330 : 230;
 	}
 
 	// Always use `left` property so CSS can transition in both directions
 	const panelDisplayLeft = $derived(
-		isDragging ? posX : snapSide === 'right' ? window.innerWidth - getPanelWidth() - 16 : 16
+		isDragging ? posX : todoPanelState.snapSide === 'right' ? window.innerWidth - getPanelWidth() - 16 : 16
 	);
 
 	const minimizedDisplayLeft = $derived(
 		isDragging
 			? posX
-			: snapSide === 'right'
+			: todoPanelState.snapSide === 'right'
 				? window.innerWidth - (minimizedBtn?.offsetWidth ?? 90) - 16
 				: 16
 	);
@@ -69,7 +66,9 @@
 	function endDrag(e: PointerEvent) {
 		if (!isDragging) return;
 		isDragging = false;
-		snapSide = posX + getPanelWidth() / 2 < window.innerWidth / 2 ? 'left' : 'right';
+		todoPanelState.snapSide = posX + getPanelWidth() / 2 < window.innerWidth / 2 ? 'left' : 'right';
+		todoPanelState.posY = posY;
+		saveTodoPanelState();
 	}
 
 	// --- Minimized button drag (click = restore, drag = move) ---
@@ -103,7 +102,9 @@
 			return;
 		}
 		const el = e.currentTarget as HTMLElement;
-		snapSide = posX + el.offsetWidth / 2 < window.innerWidth / 2 ? 'left' : 'right';
+		todoPanelState.snapSide = posX + el.offsetWidth / 2 < window.innerWidth / 2 ? 'left' : 'right';
+		todoPanelState.posY = posY;
+		saveTodoPanelState();
 	}
 
 	// Extract the latest TodoWrite data from messages
@@ -151,19 +152,22 @@
 	const shouldShow = $derived(latestTodos !== null && latestTodos.length > 0);
 
 	function toggleExpand() {
-		if (!isMinimized) {
-			isExpanded = !isExpanded;
+		if (!todoPanelState.isMinimized) {
+			todoPanelState.isExpanded = !todoPanelState.isExpanded;
+			saveTodoPanelState();
 		}
 	}
 
 	function minimize() {
-		isMinimized = true;
-		isExpanded = false;
+		todoPanelState.isMinimized = true;
+		todoPanelState.isExpanded = false;
+		saveTodoPanelState();
 	}
 
 	function restore() {
-		isMinimized = false;
-		isExpanded = true;
+		todoPanelState.isMinimized = false;
+		todoPanelState.isExpanded = true;
+		saveTodoPanelState();
 	}
 
 	function getStatusIcon(status: string) {
@@ -194,7 +198,7 @@
 </script>
 
 {#if shouldShow && !appState.isRestoring}
-	{#if isMinimized}
+	{#if todoPanelState.isMinimized}
 		<!-- Minimized state - small floating button, draggable -->
 		<button
 			bind:this={minimizedBtn}
@@ -210,7 +214,7 @@
 				cursor: {isDragging ? 'grabbing' : 'grab'};
 				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease'};
 			"
-			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 200 }}
+			transition:fly={{ x: todoPanelState.snapSide === 'right' ? 100 : -100, duration: 200 }}
 		>
 			<Icon name="lucide:list-todo" class="w-5 h-5" />
 			<span class="text-sm font-medium">{progress.completed}/{progress.total}</span>
@@ -222,11 +226,11 @@
 			style="
 				top: {posY}px;
 				left: {panelDisplayLeft}px;
-				width: {isExpanded ? '330px' : '230px'};
-				max-height: {isExpanded ? '600px' : '56px'};
+				width: {todoPanelState.isExpanded ? '330px' : '230px'};
+				max-height: {todoPanelState.isExpanded ? '600px' : '56px'};
 				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease, width 0.3s, max-height 0.3s'};
 			"
-			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 300 }}
+			transition:fly={{ x: todoPanelState.snapSide === 'right' ? 100 : -100, duration: 300 }}
 		>
 			<!-- Header (drag handle) -->
 			<div
@@ -244,7 +248,7 @@
 						<span class="text-sm font-semibold text-slate-900 dark:text-slate-100">
 							Task Progress
 						</span>
-						{#if !isExpanded}
+						{#if !todoPanelState.isExpanded}
 							<span class="text-xs text-slate-600 dark:text-slate-400">
 								{progress.completed}/{progress.total} tasks ({progress.percentage}%)
 							</span>
@@ -256,10 +260,10 @@
 					<button
 						onclick={toggleExpand}
 						class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
-						title={isExpanded ? 'Collapse' : 'Expand'}
+						title={todoPanelState.isExpanded ? 'Collapse' : 'Expand'}
 					>
 						<Icon
-							name={isExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'}
+							name={todoPanelState.isExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'}
 							class="w-4 h-4 text-slate-600 dark:text-slate-400"
 						/>
 					</button>
@@ -273,7 +277,7 @@
 				</div>
 			</div>
 
-			{#if isExpanded}
+			{#if todoPanelState.isExpanded}
 				<!-- Progress bar -->
 				<div class="px-4 py-3 border-b border-slate-100 dark:border-slate-800">
 					<div class="flex items-center justify-between mb-2">

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>