@myrialabs/clopen 0.2.5 → 0.2.7

package/frontend/components/chat/input/components/ChatInputActions.svelte

@@ -4,6 +4,7 @@
 
 	interface Props {
 		isLoading: boolean;
+		isCancelling: boolean;
 		hasActiveProject: boolean;
 		messageText: string;
 		attachedFiles: FileAttachment[];
@@ -16,6 +17,7 @@
 
 	const {
 		isLoading,
+		isCancelling,
 		hasActiveProject,
 		messageText,
 		attachedFiles,
@@ -65,6 +67,14 @@
 		>
 			<Icon name="lucide:circle-stop" class="text-white w-5 h-5" />
 		</button>
+	{:else if isCancelling}
+		<button
+			disabled
+			class="w-10 h-10 bg-red-500 opacity-70 rounded-xl flex items-center justify-center transition-all duration-200 cursor-not-allowed"
+			aria-label="Cancelling..."
+		>
+			<Icon name="lucide:loader-circle" class="text-white w-5 h-5 animate-spin" />
+		</button>
 	{:else}
 		<button
 			onclick={onSend}

package/frontend/components/chat/input/composables/use-chat-actions.svelte.ts

@@ -10,7 +10,6 @@ import { debug } from '$shared/utils/logger';
 import type { FileAttachment } from './use-file-handling.svelte';
 
 interface ChatActionsParams {
-	messageText: string;
 	attachedFiles: FileAttachment[];
 	clearAllAttachments: () => void;
 	adjustTextareaHeight: () => void;
@@ -27,7 +26,6 @@ export function useChatActions(params: ChatActionsParams) {
 	function handleCancelEdit() {
 		cancelEdit();
 		clearInput();
-		params.messageText = ''; // This won't work directly, need to pass setter
 		params.clearAllAttachments();
 		params.adjustTextareaHeight();
 	}
@@ -52,6 +50,12 @@ export function useChatActions(params: ChatActionsParams) {
 					await snapshotService.restore(restoreTargetId, sessionState.currentSession.id);
 				}
 
+				// Set skip and clear draft BEFORE reloading messages — editing the first message
+				// causes messages to become empty (welcome state), which remounts ChatInput.
+				// Without this, the new instance restores stale server state into the input.
+				setSkipNextRestore(true);
+				params.clearDraft();
+
 				// Reload messages from database to update UI
 				if (sessionState.currentSession?.id) {
 					await loadMessagesForSession(sessionState.currentSession.id);

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/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/files/FileViewer.svelte

@@ -40,6 +40,7 @@
 		externallyChanged?: boolean;
 		onForceReload?: () => void;
 		isBinary?: boolean;
+		projectPath?: string;
 	}
 
 	const {
@@ -56,9 +57,19 @@
 		onToggleWordWrap,
 		externallyChanged = false,
 		onForceReload,
-		isBinary = false
+		isBinary = false,
+		projectPath = ''
 	}: Props = $props();
 
+	// Relative path for display
+	const displayPath = $derived.by(() => {
+		if (!file) return '';
+		if (projectPath && file.path.startsWith(projectPath)) {
+			return file.path.slice(projectPath.length).replace(/^[/\\]/, '');
+		}
+		return file.path;
+	});
+
 	// Theme state
 	const isDark = $derived(themeStore.isDark);
 	const monacoTheme = $derived(isDark ? 'vs-dark' : 'vs-light');
@@ -273,7 +284,7 @@
 						{file.name}
 					</h3>
 					<p class="text-xs text-slate-600 dark:text-slate-400 truncate mt-0.5">
-						<span class="hidden sm:inline">{file.path} • </span> {formatFileSize(file.size || 0)}
+						<span class="hidden sm:inline">{displayPath} • </span> {formatFileSize(file.size || 0)}
 					</p>
 				</div>
 			</div>

package/frontend/components/history/HistoryModal.svelte

@@ -428,7 +428,7 @@
 									<span
 										class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 {isSessionWaitingInput(session.id, projectState.currentProject?.id) ? 'bg-amber-500' : 'bg-emerald-500'}"
 									></span>
-								{:else if isSessionUnread(session.id)}
+								{:else if isSessionUnread(session.id) && session.id !== sessionState.currentSession?.id}
 									<span
 										class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 bg-blue-500"
 									></span>

package/frontend/components/preview/browser/BrowserPreview.svelte

@@ -61,6 +61,9 @@
 	// Flag to prevent URL watcher from double-launching during MCP session creation
 	const mcpLaunchInProgress = $state(false);
 
+	// Touch interaction mode for canvas
+	let touchMode = $state<'scroll' | 'cursor'>('scroll');
+
 	// Flag to track if sessions were recovered (prevents creating empty tab on mount)
 	let sessionsRecovered = $state(false);
 
@@ -160,6 +163,7 @@
 		if (currentProjectId && currentProjectId !== previousProjectId && previousProjectId !== '') {
 			debug.log('preview', `🔄 Project changed: ${previousProjectId} → ${currentProjectId}`);
 			previousProjectId = currentProjectId;
+			sessionsRecovered = false; // Reset for new project (enables empty tab creation if needed)
 			coordinator.switchProject();
 		}
 	});
@@ -416,6 +420,14 @@
 		return mcpHandler.isCurrentTabMcpControlled();
 	}
 
+	// Hide MCP virtual cursor when switching to a non-MCP-controlled tab
+	$effect(() => {
+		void activeTabId; // track activeTabId changes
+		if (!isCurrentTabMcpControlled()) {
+			mcpVirtualCursor = { x: 0, y: 0, visible: false, clicking: false };
+		}
+	});
+
 	// Stream message handling
 	$effect(() => {
 		if (activeTabId && sessionId) {
@@ -425,6 +437,8 @@
 
 	// Expose methods for parent (PreviewPanel)
 	export const browserActions = {
+		getTouchMode: () => touchMode,
+		setTouchMode: (mode: 'scroll' | 'cursor') => { touchMode = mode; },
 		changeDeviceSize: (size: DeviceSize) => {
 			coordinator.changeDeviceSize(size, previewDimensions?.scale);
 		},
@@ -493,6 +507,7 @@
 				bind:canvasAPI
 				bind:previewDimensions
 				bind:lastFrameData={currentTabLastFrameData}
+				bind:touchMode
 				isMcpControlled={isCurrentTabMcpControlled()}
 				onInteraction={handleCanvasInteraction}
 				onRetry={handleGoClick}