@myrialabs/clopen 0.2.12 → 0.2.13

package/backend/ws/terminal/session.ts

@@ -30,8 +30,7 @@ export const sessionHandler = createRouter()
 			workingDirectory: t.Optional(t.String()),
 			projectPath: t.Optional(t.String()),
 			cols: t.Optional(t.Number()),
-			rows: t.Optional(t.Number()),
-			outputStartIndex: t.Optional(t.Number())
+			rows: t.Optional(t.Number())
 		}),
 		response: t.Object({
 			sessionId: t.String(),
@@ -48,8 +47,7 @@ export const sessionHandler = createRouter()
 			workingDirectory,
 			projectPath,
 			cols = 80,
-			rows = 24,
-			outputStartIndex = 0
+			rows = 24
 		} = data;
 
 		const projectId = ws.getProjectId(conn);
@@ -120,7 +118,7 @@ export const sessionHandler = createRouter()
 			projectPath || '',
 			projectId || '',
 			streamId,
-			outputStartIndex
+			{ cols, rows }
 		);
 
 		// Broadcast initial ready event (frontend filters by sessionId)
@@ -179,20 +177,17 @@ export const sessionHandler = createRouter()
 
 		debug.log('terminal', `✅ Added fresh listeners to PTY session ${sessionId}`);
 
-		// Replay historical output for reconnection (e.g., after browser refresh)
-		// The stream preserves output from the old stream when reconnecting to the same PTY.
-		// Replay from outputStartIndex so frontend receives all output it doesn't have yet.
-		const historicalOutput = terminalStreamManager.getOutput(registeredStreamId, outputStartIndex);
-		if (historicalOutput.length > 0) {
-			debug.log('terminal', `📜 Replaying ${historicalOutput.length} historical output entries for session ${sessionId}`);
-			for (const output of historicalOutput) {
-				ws.emit.project(projectId, 'terminal:output', {
-					sessionId,
-					content: output,
-					projectId,
-					timestamp: new Date().toISOString()
-				});
-			}
+		// Replay serialized terminal state for reconnection (e.g., after browser refresh)
+		// The headless xterm preserves full terminal state including clear/scrollback
+		const serializedOutput = terminalStreamManager.getSerializedOutput(registeredStreamId);
+		if (serializedOutput) {
+			debug.log('terminal', `📜 Replaying serialized terminal state for session ${sessionId}`);
+			ws.emit.project(projectId, 'terminal:output', {
+				sessionId,
+				content: serializedOutput,
+				projectId,
+				timestamp: new Date().toISOString()
+			});
 		}
 
 		// Broadcast terminal tab created to all project users
@@ -216,6 +211,20 @@ export const sessionHandler = createRouter()
 		};
 	})
 
+	// Clear headless terminal buffer (sync with frontend clear)
+	.http('terminal:clear', {
+		data: t.Object({
+			sessionId: t.String()
+		}),
+		response: t.Object({
+			sessionId: t.String()
+		})
+	}, async ({ data }) => {
+		const { sessionId } = data;
+		terminalStreamManager.clearHeadlessTerminal(sessionId);
+		return { sessionId };
+	})
+
 	// Resize terminal viewport
 	.http('terminal:resize', {
 		data: t.Object({
@@ -239,6 +248,9 @@ export const sessionHandler = createRouter()
 			throw new Error('No active PTY session found');
 		}
 
+		// Keep headless terminal in sync with PTY dimensions
+		terminalStreamManager.resizeHeadlessTerminal(sessionId, cols, rows);
+
 		return { sessionId, cols, rows };
 	})
 
@@ -309,6 +321,12 @@ export const sessionHandler = createRouter()
 
 		debug.log('terminal', `💀 [kill-session] Successfully killed PTY session: ${sessionId} (PID: ${pid})`);
 
+		// Clean up stream and headless terminal
+		const stream = terminalStreamManager.getStreamBySession(sessionId);
+		if (stream) {
+			terminalStreamManager.removeStream(stream.streamId);
+		}
+
 		// Broadcast terminal tab closed to all project users
 		const projectId = ws.getProjectId(conn);
 		ws.emit.project(projectId, 'terminal:tab-closed', {

package/bun.lock

@@ -16,8 +16,10 @@
         "@xterm/addon-clipboard": "^0.2.0",
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/addon-ligatures": "^0.10.0",
+        "@xterm/addon-serialize": "^0.14.0",
         "@xterm/addon-unicode11": "^0.9.0",
         "@xterm/addon-web-links": "^0.12.0",
+        "@xterm/headless": "^6.0.0",
         "@xterm/xterm": "^6.0.0",
         "bun-pty": "^0.4.2",
         "cloudflared": "^0.7.1",
@@ -348,10 +350,14 @@
 
     "@xterm/addon-ligatures": ["@xterm/addon-ligatures@0.10.0", "", { "dependencies": { "font-finder": "^1.1.0", "font-ligatures": "^1.4.1" } }, "sha512-/Few8ZSHMib7sGjRJoc5l7bCtEB9XJfkNofvPpOcWADxKaUl8og8P172j67OoACSNJAXqeCLIuvj8WFCBkcTxg=="],
 
+    "@xterm/addon-serialize": ["@xterm/addon-serialize@0.14.0", "", {}, "sha512-uteyTU1EkrQa2Ux6P/uFl2fzmXI46jy5uoQMKEOM0fKTyiW7cSn0WrFenHm5vO5uEXX/GpwW/FgILvv3r0WbkA=="],
+
     "@xterm/addon-unicode11": ["@xterm/addon-unicode11@0.9.0", "", {}, "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw=="],
 
     "@xterm/addon-web-links": ["@xterm/addon-web-links@0.12.0", "", {}, "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw=="],
 
+    "@xterm/headless": ["@xterm/headless@6.0.0", "", {}, "sha512-5Yj1QINYCyzrZtf8OFIHi47iQtI+0qYFPHmouEfG8dHNxbZ9Tb9YGSuLcsEwj9Z+OL75GJqPyJbyoFer80a2Hw=="],
+
     "@xterm/xterm": ["@xterm/xterm@6.0.0", "", {}, "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg=="],
 
     "accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="],

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/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/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/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);
 		}
 	}