@myrialabs/clopen 0.2.4 → 0.2.6

package/frontend/components/chat/message/MessageBubble.svelte

@@ -9,6 +9,7 @@
 -->
 
 <script lang="ts">
+	import { tick } from 'svelte';
 	import type { SDKMessageFormatter } from '$shared/types/database/schema';
 	import type { IconName } from '$shared/types/ui/icons';
 	import Card from '$frontend/components/common/display/Card.svelte';
@@ -46,6 +47,23 @@
 		onShowTokenUsage: () => void;
 		onShowDebug: () => void;
 	} = $props();
+
+	let scrollContainer: HTMLDivElement | undefined = $state();
+
+	// Auto-scroll reasoning/system content to bottom while receiving partial text
+	$effect(() => {
+		if (roleCategory !== 'reasoning' && roleCategory !== 'system') return;
+		if (!scrollContainer) return;
+		// Track message content changes (partialText for streaming, message for final)
+		const _track = message.type === 'stream_event' && 'partialText' in message
+			? message.partialText
+			: message;
+		tick().then(() => {
+			if (scrollContainer) {
+				scrollContainer.scrollTop = scrollContainer.scrollHeight;
+			}
+		});
+	});
 </script>
 
 <div class="relative overflow-hidden">
@@ -73,7 +91,10 @@
 		/>
 
 		<!-- Message Content -->
-		<div class="p-3 md:p-4">
+		<div
+			bind:this={scrollContainer}
+			class="p-3 md:p-4 {roleCategory === 'reasoning' || roleCategory === 'system' ? 'max-h-80 overflow-y-auto' : ''}"
+		>
 			<div class="max-w-none space-y-4">
 				<!-- Content rendering using MessageFormatter component -->
 				<MessageFormatter {message} />

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/tools/components/TerminalCommand.svelte

@@ -33,14 +33,14 @@
 			<span class="text-xs font-medium text-slate-700 dark:text-slate-300">Command:</span>
 		</div>
 		{#if timeout}
-			<div class="inline-block ml-auto text-xs bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">
+			<div class="inline-block ml-auto text-3xs bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">
 				Timeout: {timeout}ms
 			</div>
 		{/if}
 	</div>
 
 	<!-- Terminal-style command display -->
-	<div class="bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60 rounded-md p-2.5 font-mono text-sm">
+	<div class="max-h-64 overflow-y-auto bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60 rounded-md p-2.5 font-mono text-sm">
 		<div class="flex items-start gap-2">
 			<span class="text-green-600 dark:text-green-400 select-none">$</span>
 			<div class="flex-1 text-slate-900 dark:text-slate-200 break-all">

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>