@myrialabs/clopen 0.2.12 → 0.2.14

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

@@ -178,6 +178,14 @@
 		}
 	});
 
+	// Resize textarea when placeholder text changes (typewriter animation) while empty
+	$effect(() => {
+		chatPlaceholder; // track placeholder changes
+		if (!messageText || !messageText.trim()) {
+			adjustTextareaHeight();
+		}
+	});
+
 	// Sync appState.isLoading from presence data (single source of truth for all users)
 	// Also fetch partial text and reconnect to stream for late-joining users / refresh
 	let lastCatchupProjectId: string | undefined;

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

@@ -13,12 +13,12 @@
 
 {#if appState.isLoading}
 	<div
-		class="absolute z-20 {isWelcomeState ? '-top-16' : '-top-14'} left-0 right-0 flex justify-center pointer-events-none"
+		class="absolute z-20 h-9 {isWelcomeState ? '-top-16' : '-top-14'} left-0 right-0 flex justify-center pointer-events-none"
 		transition:fly={{ y: 100, duration: 300 }}
 	>
 		{#if appState.isWaitingInput}
 			<!-- Waiting for user input state -->
-			<div class="flex items-center gap-2.5 px-4 py-2 bg-amber-50 dark:bg-amber-900/30 rounded-full border border-amber-300 dark:border-amber-700 shadow-sm">
+			<div class="flex items-center gap-2.5 px-4 py-2 bg-amber-50 dark:bg-amber-950 rounded-full border border-amber-200 dark:border-amber-900 shadow-sm">
 				<Icon name="lucide:message-circle-question-mark" class="w-4 h-4 text-amber-600 dark:text-amber-400" />
 				<span class="text-sm font-medium text-amber-700 dark:text-amber-300">
 					Waiting for your input...

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

@@ -3,6 +3,9 @@ import { onDestroy } from 'svelte';
 /**
  * Composable for managing placeholder and loading text animations
  * Combines placeholder typewriter effect and loading text rotation
+ *
+ * Both animations use a `destroyed` flag to prevent interval callbacks
+ * from mutating state after the owning component is torn down (HMR / navigation).
  */
 
 // ============================================================================
@@ -12,83 +15,77 @@ import { onDestroy } from 'svelte';
 export function usePlaceholderAnimation(placeholderTexts: string[]) {
 	let currentPlaceholderIndex = $state(0);
 	let placeholderText = $state('');
-	let placeholderTypewriterInterval: number | null = null;
-	let placeholderRotationInterval: number | null = null;
-	let placeholderDeleteTimeout: number | null = null;
+	let destroyed = false;
+
+	// Track every active timer so stopPlaceholderAnimation can clear them all
+	let typewriterInterval: number | null = null;
+	let rotationInterval: number | null = null;
+	let deleteTimeout: number | null = null;
+	let deleteInterval: number | null = null;
 
-	// Typewriter effect for placeholder
 	function typewritePlaceholder(text: string) {
-		if (placeholderTypewriterInterval) {
-			clearInterval(placeholderTypewriterInterval);
-		}
+		if (typewriterInterval) clearInterval(typewriterInterval);
+		typewriterInterval = null;
 
-		let currentIndex = 0;
+		let idx = 0;
 		placeholderText = '';
 
-		placeholderTypewriterInterval = window.setInterval(() => {
-			if (currentIndex < text.length) {
-				placeholderText = text.substring(0, currentIndex + 1);
-				currentIndex++;
+		typewriterInterval = window.setInterval(() => {
+			if (destroyed) { clearInterval(typewriterInterval!); typewriterInterval = null; return; }
+			if (idx < text.length) {
+				placeholderText = text.substring(0, idx + 1);
+				idx++;
 			} else {
-				clearInterval(placeholderTypewriterInterval!);
-				placeholderTypewriterInterval = null;
+				clearInterval(typewriterInterval!);
+				typewriterInterval = null;
 			}
-		}, 20); // Typing speed
+		}, 20);
 	}
 
-	// Update placeholder with typewriter effect
 	function updatePlaceholder() {
 		const fullText = placeholderTexts[currentPlaceholderIndex];
 
-		// Clear any existing delete timeout
-		if (placeholderDeleteTimeout) {
-			clearTimeout(placeholderDeleteTimeout);
-		}
+		if (deleteTimeout) clearTimeout(deleteTimeout);
+		if (deleteInterval) clearInterval(deleteInterval);
+		deleteTimeout = null;
+		deleteInterval = null;
 
-		// Use a tracked timeout that can be cleared properly
-		placeholderDeleteTimeout = window.setTimeout(() => {
-			// Clear current text with backspace effect
-			let deleteInterval = window.setInterval(() => {
+		deleteTimeout = window.setTimeout(() => {
+			if (destroyed) return;
+			deleteTimeout = null;
+
+			deleteInterval = window.setInterval(() => {
+				if (destroyed) { clearInterval(deleteInterval!); deleteInterval = null; return; }
 				if (placeholderText.length > 0) {
 					placeholderText = placeholderText.substring(0, placeholderText.length - 1);
 				} else {
-					clearInterval(deleteInterval);
-					// Start typing new text
+					clearInterval(deleteInterval!);
+					deleteInterval = null;
 					typewritePlaceholder(fullText);
 				}
-			}, 15); // Delete speed
-		}, 2000); // Wait 2 seconds before deleting
+			}, 15);
+		}, 2000);
 	}
 
 	function startPlaceholderAnimation() {
-		// Clear any existing intervals first
 		stopPlaceholderAnimation();
+		destroyed = false;
 
 		currentPlaceholderIndex = Math.floor(Math.random() * placeholderTexts.length);
-		// Initial placeholder
-		const initialText = placeholderTexts[currentPlaceholderIndex];
-		typewritePlaceholder(initialText);
+		typewritePlaceholder(placeholderTexts[currentPlaceholderIndex]);
 
-		// Rotate placeholders
-		placeholderRotationInterval = window.setInterval(() => {
+		rotationInterval = window.setInterval(() => {
+			if (destroyed) { clearInterval(rotationInterval!); rotationInterval = null; return; }
 			currentPlaceholderIndex = (currentPlaceholderIndex + 1) % placeholderTexts.length;
 			updatePlaceholder();
-		}, 7000); // Change every 7 seconds
+		}, 7000);
 	}
 
 	function stopPlaceholderAnimation() {
-		if (placeholderTypewriterInterval) {
-			clearInterval(placeholderTypewriterInterval);
-			placeholderTypewriterInterval = null;
-		}
-		if (placeholderRotationInterval) {
-			clearInterval(placeholderRotationInterval);
-			placeholderRotationInterval = null;
-		}
-		if (placeholderDeleteTimeout) {
-			clearTimeout(placeholderDeleteTimeout);
-			placeholderDeleteTimeout = null;
-		}
+		if (typewriterInterval) { clearInterval(typewriterInterval); typewriterInterval = null; }
+		if (rotationInterval) { clearInterval(rotationInterval); rotationInterval = null; }
+		if (deleteTimeout) { clearTimeout(deleteTimeout); deleteTimeout = null; }
+		if (deleteInterval) { clearInterval(deleteInterval); deleteInterval = null; }
 	}
 
 	function setStaticPlaceholder(text: string) {
@@ -96,15 +93,13 @@ export function usePlaceholderAnimation(placeholderTexts: string[]) {
 		placeholderText = text;
 	}
 
-	// Cleanup on destroy
 	onDestroy(() => {
+		destroyed = true;
 		stopPlaceholderAnimation();
 	});
 
 	return {
-		get placeholderText() {
-			return placeholderText;
-		},
+		get placeholderText() { return placeholderText; },
 		startAnimation: startPlaceholderAnimation,
 		stopAnimation: stopPlaceholderAnimation,
 		setStaticPlaceholder
@@ -116,85 +111,106 @@ export function usePlaceholderAnimation(placeholderTexts: string[]) {
 // ============================================================================
 
 export function useLoadingTextAnimation(loadingTexts: string[]) {
-	let currentLoadingText = $state('thinking');
-	let visibleLoadingText = $state('thinking');
-	let loadingTextIntervalId: number | null = null;
-	let typewriterIntervalId: number | null = null;
-
-	// Typewriter effect for smooth text transition
-	function animateTextTransition(newText: string) {
-		if (typewriterIntervalId) {
-			clearInterval(typewriterIntervalId);
-		}
+	let visibleLoadingText = $state('');
+	let currentFullText = '';
+	let destroyed = false;
+
+	let typewriterInterval: number | null = null;
+	let rotationInterval: number | null = null;
+
+	/**
+	 * Typewriter: type characters one-by-one.
+	 * Calls `onDone` when the full text has been typed.
+	 */
+	function typeText(text: string, onDone?: () => void) {
+		if (typewriterInterval) clearInterval(typewriterInterval);
+		typewriterInterval = null;
+
+		let idx = 0;
+		visibleLoadingText = '';
+
+		typewriterInterval = window.setInterval(() => {
+			if (destroyed) { clearInterval(typewriterInterval!); typewriterInterval = null; return; }
+			if (idx < text.length) {
+				visibleLoadingText = text.substring(0, idx + 1);
+				idx++;
+			} else {
+				clearInterval(typewriterInterval!);
+				typewriterInterval = null;
+				onDone?.();
+			}
+		}, 40);
+	}
 
-		const oldText = visibleLoadingText;
-		let deleteIndex = oldText.length;
-		let typeIndex = 0;
-		let isDeleting = true;
-
-		typewriterIntervalId = window.setInterval(() => {
-			if (isDeleting) {
-				// Delete characters
-				if (deleteIndex > 0) {
-					visibleLoadingText = oldText.substring(0, deleteIndex - 1);
-					deleteIndex--;
-				} else {
-					// Finished deleting, start typing
-					isDeleting = false;
-				}
+	/**
+	 * Backspace: delete characters one-by-one from the current visible text.
+	 * Calls `onDone` when the text is fully erased.
+	 */
+	function deleteText(onDone?: () => void) {
+		if (typewriterInterval) clearInterval(typewriterInterval);
+		typewriterInterval = null;
+
+		const snapshot = visibleLoadingText;
+		let len = snapshot.length;
+
+		typewriterInterval = window.setInterval(() => {
+			if (destroyed) { clearInterval(typewriterInterval!); typewriterInterval = null; return; }
+			if (len > 0) {
+				len--;
+				visibleLoadingText = snapshot.substring(0, len);
 			} else {
-				// Type new characters
-				if (typeIndex < newText.length) {
-					visibleLoadingText = newText.substring(0, typeIndex + 1);
-					typeIndex++;
-				} else {
-					// Finished typing
-					clearInterval(typewriterIntervalId!);
-					typewriterIntervalId = null;
-				}
+				clearInterval(typewriterInterval!);
+				typewriterInterval = null;
+				onDone?.();
 			}
-		}, 50); // Adjust speed here (lower = faster)
+		}, 40);
+	}
+
+	function pickNextText(): string {
+		let next = currentFullText;
+		while (next === currentFullText && loadingTexts.length > 1) {
+			next = loadingTexts[Math.floor(Math.random() * loadingTexts.length)];
+		}
+		return next;
+	}
+
+	/** Delete current text, then type new text */
+	function transitionTo(newText: string) {
+		currentFullText = newText;
+		deleteText(() => {
+			if (destroyed) return;
+			typeText(newText);
+		});
 	}
 
 	function startLoadingAnimation() {
-		// Clear any existing intervals first to prevent duplication
 		stopLoadingAnimation();
+		destroyed = false;
 
-		// Start loading text rotation with typewriter effect
-		currentLoadingText = loadingTexts[Math.floor(Math.random() * loadingTexts.length)];
-		visibleLoadingText = currentLoadingText;
-		loadingTextIntervalId = window.setInterval(() => {
-			// Get a different text than the current one
-			let newText = currentLoadingText;
-			while (newText === currentLoadingText && loadingTexts.length > 1) {
-				newText = loadingTexts[Math.floor(Math.random() * loadingTexts.length)];
-			}
-			currentLoadingText = newText;
-			animateTextTransition(newText);
+		// Type the initial text character-by-character
+		currentFullText = loadingTexts[Math.floor(Math.random() * loadingTexts.length)];
+		typeText(currentFullText);
+
+		// Rotate to a new random text periodically
+		rotationInterval = window.setInterval(() => {
+			if (destroyed) { clearInterval(rotationInterval!); rotationInterval = null; return; }
+			transitionTo(pickNextText());
 		}, 15000);
 	}
 
 	function stopLoadingAnimation() {
-		// Clear loading text interval
-		if (loadingTextIntervalId) {
-			window.clearInterval(loadingTextIntervalId);
-			loadingTextIntervalId = null;
-		}
-		if (typewriterIntervalId) {
-			window.clearInterval(typewriterIntervalId);
-			typewriterIntervalId = null;
-		}
+		if (typewriterInterval) { clearInterval(typewriterInterval); typewriterInterval = null; }
+		if (rotationInterval) { clearInterval(rotationInterval); rotationInterval = null; }
+		visibleLoadingText = '';
 	}
 
-	// Cleanup on destroy
 	onDestroy(() => {
+		destroyed = true;
 		stopLoadingAnimation();
 	});
 
 	return {
-		get visibleLoadingText() {
-			return visibleLoadingText;
-		},
+		get visibleLoadingText() { return visibleLoadingText; },
 		startAnimation: startLoadingAnimation,
 		stopAnimation: stopLoadingAnimation
 	};

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

@@ -12,8 +12,18 @@ export function useTextareaResize() {
 			// Reset height to auto to get accurate scrollHeight
 			textareaElement.style.height = 'auto';
 
-			// If content is empty or only whitespace, keep at minimum height
+			// If content is empty, measure placeholder height instead
 			if (!messageText || !messageText.trim()) {
+				const placeholder = textareaElement.placeholder;
+				if (placeholder) {
+					// Temporarily set value to placeholder to measure wrapped height
+					// (native placeholder doesn't affect scrollHeight)
+					textareaElement.value = placeholder;
+					const scrollHeight = textareaElement.scrollHeight;
+					textareaElement.value = '';
+					const newHeight = Math.min(scrollHeight, MAX_HEIGHT_PX);
+					textareaElement.style.height = newHeight + 'px';
+				}
 				return;
 			}
 

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

@@ -259,7 +259,7 @@
 				<div class="flex items-center gap-1">
 					<button
 						onclick={toggleExpand}
-						class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
+						class="flex p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
 						title={todoPanelState.isExpanded ? 'Collapse' : 'Expand'}
 					>
 						<Icon
@@ -269,7 +269,7 @@
 					</button>
 					<button
 						onclick={minimize}
-						class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
+						class="flex p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
 						title="Minimize"
 					>
 						<Icon name="lucide:minus" class="w-4 h-4 text-slate-600 dark:text-slate-400" />

package/frontend/components/checkpoint/TimelineModal.svelte

@@ -247,9 +247,11 @@
 		const previousCurrentId = timelineData?.currentHeadId;
 		if (timelineData) {
 			timelineData.currentHeadId = node.id;
+			const isInitialRestore = !!node.checkpoint.isInitial;
 			graphNodes = graphNodes.map(n => ({
 				...n,
-				isCurrent: n.id === node.id
+				isCurrent: n.id === node.id,
+				isOrphaned: isInitialRestore ? n.id !== node.id : n.isOrphaned
 			}));
 		}
 

package/frontend/components/common/overlay/Dialog.svelte

@@ -201,7 +201,7 @@
 						</div>
 					{/if}
 					
-					<div class="flex-1 space-y-2">
+					<div class="flex-1 space-y-1">
 						<h3 id="dialog-title" class="text-lg font-semibold {colors.text}">
 							{title}
 						</h3>
@@ -227,7 +227,7 @@
 				</div>
 			{/if}
 
-			{#if !children}
+			{#if !children || onConfirm}
 				<div class="flex justify-end gap-3 pt-2">
 					{#if showCancel}
 						<button

package/frontend/components/git/ChangesSection.svelte

@@ -27,12 +27,78 @@
 		onStageAll, onUnstageAll, onDiscardAll,
 		onViewDiff, onResolve
 	}: Props = $props();
+
+	// Virtual scroll — only render visible items when list is large
+	const ITEM_HEIGHT = 32;
+	const BUFFER = 10;
+	const VIRTUALIZE_THRESHOLD = 200;
+
+	let scrollEl = $state<HTMLDivElement>();
+	let headerEl = $state<HTMLDivElement>();
+	let scrollTop = $state(0);
+	let containerHeight = $state(384);
+	let panelHeight = $state(0);
+
+	const shouldVirtualize = $derived(files.length > VIRTUALIZE_THRESHOLD);
+	const visibleStart = $derived(
+		shouldVirtualize ? Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER) : 0
+	);
+	const visibleEnd = $derived(
+		shouldVirtualize
+			? Math.min(files.length, Math.ceil((scrollTop + containerHeight) / ITEM_HEIGHT) + BUFFER)
+			: files.length
+	);
+	const visibleFiles = $derived(files.slice(visibleStart, visibleEnd));
+	const topPad = $derived(visibleStart * ITEM_HEIGHT);
+	const bottomPad = $derived(Math.max(0, (files.length - visibleEnd) * ITEM_HEIGHT));
+
+	// Dynamic max-height: fill panel minus section header — no gap
+	const headerH = $derived(headerEl?.offsetHeight ?? 48);
+	const scrollMaxH = $derived(panelHeight > 0 ? Math.max(128, panelHeight - headerH) : 384);
+
+	// Track nearest scrollable ancestor size via ResizeObserver
+	$effect(() => {
+		const el = scrollEl;
+		if (!el) return;
+
+		let parent = el.parentElement;
+		while (parent && parent !== document.body) {
+			const ov = getComputedStyle(parent).overflowY;
+			if (ov === 'auto' || ov === 'scroll') break;
+			parent = parent.parentElement;
+		}
+		if (!parent || parent === document.body) return;
+
+		const obs = new ResizeObserver(() => {
+			panelHeight = parent!.clientHeight;
+			containerHeight = el.clientHeight || 384;
+		});
+		obs.observe(parent);
+		panelHeight = parent.clientHeight;
+		containerHeight = el.clientHeight || 384;
+
+		return () => obs.disconnect();
+	});
+
+	// Reset scroll position when section is expanded (container remounts)
+	$effect(() => {
+		if (!isCollapsed) {
+			scrollTop = 0;
+		}
+	});
+
+	function onScroll(e: Event) {
+		const el = e.currentTarget as HTMLDivElement;
+		scrollTop = el.scrollTop;
+		containerHeight = el.clientHeight;
+	}
 </script>
 
 {#if files.length > 0}
 	<div class="mb-1">
 		<!-- Section header -->
 		<div
+			bind:this={headerEl}
 			onclick={() => isCollapsed = !isCollapsed}
 			class="group flex items-center gap-2 py-3 px-2 cursor-pointer select-none hover:bg-slate-100 dark:hover:bg-slate-800/40 rounded-md transition-colors">
 			<div
@@ -87,19 +153,44 @@
 
 		<!-- Files list -->
 		{#if !isCollapsed}
-			<div class="ml-2">
-				{#each files as file (file.path)}
-					<FileChangeItem
-						{file}
-						{section}
-						{onStage}
-						{onUnstage}
-						{onDiscard}
-						{onViewDiff}
-						{onResolve}
-					/>
-				{/each}
-			</div>
+			{#if shouldVirtualize}
+				<div
+					class="ml-2 overflow-y-auto"
+					style="max-height: {scrollMaxH}px"
+					bind:this={scrollEl}
+					onscroll={onScroll}
+				>
+					<div style="padding-top: {topPad}px; padding-bottom: {bottomPad}px;">
+						{#each visibleFiles as file (file.path)}
+							<div style="height: {ITEM_HEIGHT}px" class="overflow-hidden">
+								<FileChangeItem
+									{file}
+									{section}
+									{onStage}
+									{onUnstage}
+									{onDiscard}
+									{onViewDiff}
+									{onResolve}
+								/>
+							</div>
+						{/each}
+					</div>
+				</div>
+			{:else}
+				<div class="ml-2">
+					{#each files as file (file.path)}
+						<FileChangeItem
+							{file}
+							{section}
+							{onStage}
+							{onUnstage}
+							{onDiscard}
+							{onViewDiff}
+							{onResolve}
+						/>
+					{/each}
+				</div>
+			{/if}
 		{/if}
 	</div>
 {/if}

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

@@ -299,6 +299,13 @@
 		}
 	});
 
+	// Sync isNavigating back to active tab (Canvas resets this on first frame after navigation)
+	$effect(() => {
+		if (activeTabId && activeTab && activeTab.isNavigating !== isNavigating) {
+			tabManager.updateTab(activeTabId, { isNavigating });
+		}
+	});
+
 	// Watch scale changes and send to backend
 	let lastSentScale = 1;
 	$effect(() => {

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

@@ -573,6 +573,14 @@
 							isReconnecting = false;
 						}, 300);
 					}
+
+					// Reset navigation state when first frame arrives after navigation.
+					// The preview:browser-navigation event that normally resets this can be
+					// missed during stream reconnect (listeners are removed/re-registered),
+					// so use the first rendered frame as definitive signal that navigation completed.
+					if (isNavigating) {
+						isNavigating = false;
+					}
 				});
 
 				// Setup cursor change handler

package/frontend/components/settings/engines/AIEnginesSettings.svelte

@@ -73,7 +73,7 @@
 	let openCodeCommandCopiedTimer: ReturnType<typeof setTimeout> | null = null;
 
 	// Debug PTY (xterm.js)
-	const showDebug = $state(true);
+	const showDebug = $state(false);
 	let debugTermContainer = $state<HTMLDivElement>();
 	let debugTerminal: Terminal | null = null;
 	let debugFitAddon: FitAddon | null = null;

package/frontend/components/settings/general/AuthModeSettings.svelte

@@ -188,7 +188,7 @@
 				<Icon name="lucide:triangle-alert" class="w-6 h-6 text-amber-600 dark:text-amber-400" />
 			</div>
 
-			<div class="flex-1 space-y-3">
+			<div class="flex-1 space-y-1">
 				<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
 					Change Authentication Mode
 				</h3>
@@ -197,7 +197,7 @@
 				</p>
 
 				<!-- PAT Display -->
-				<div class="p-3.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
+				<div class="mt-3 p-3.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
 					<div class="flex items-center gap-2 text-sm font-semibold text-amber-800 dark:text-amber-200 mb-2">
 						<Icon name="lucide:key-round" class="w-4 h-4" />
 						<span>Your Personal Access Token</span>

package/frontend/components/terminal/Terminal.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
 	import { terminalStore } from '$frontend/stores/features/terminal.svelte';
 	import { projectState } from '$frontend/stores/core/projects.svelte';
+	import { terminalService } from '$frontend/services/terminal';
 	import TerminalTabs from './TerminalTabs.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import XTerm from '$frontend/components/common/xterm/XTerm.svelte';
@@ -160,11 +161,14 @@
 		if (activeSession) {
 			// Clear the terminal store session
 			terminalStore.clearSession(activeSession.id);
-			
+
 			// Also immediately clear the XTerm display
 			if (xterminalRef) {
 				xterminalRef.clear();
 			}
+
+			// Sync clear with backend headless terminal
+			terminalService.clearHeadlessTerminal(activeSession.id);
 		}
 	}