@myrialabs/clopen 0.2.11 → 0.2.13

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/message/MessageBubble.svelte

@@ -64,6 +64,19 @@
 			}
 		});
 	});
+
+	// Force reactive tracking for assistant text streaming.
+	// Without an explicit $effect that reads partialText, Svelte 5's derived chain
+	// may not re-render the component when partialText changes on a proxied object.
+	// Reasoning gets this implicitly via the auto-scroll effect above.
+	$effect(() => {
+		if (roleCategory !== 'assistant') return;
+		if (message.type !== 'stream_event') return;
+		if (!('partialText' in message)) return;
+		// Reading partialText subscribes this effect to changes,
+		// which forces the component to re-evaluate its derived values
+		const _track = message.partialText;
+	});
 </script>
 
 <div class="relative overflow-hidden">

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/common/form/FolderBrowser.svelte

@@ -41,6 +41,11 @@
 	let showDeleteFolder = $state(false);
 	let folderToDelete: FileItem | null = $state(null);
 	let deleteFolderConfirmName = $state('');
+	let showHidden = $state(false);
+
+	const filteredItems = $derived(
+		showHidden ? items : items.filter(item => !item.name.startsWith('.'))
+	);
 
 	// Derived: whether directory access is restricted
 	const hasRestrictions = $derived(systemSettings.allowedBasePaths && systemSettings.allowedBasePaths.length > 0);
@@ -611,6 +616,14 @@
 					</div>
 					
 					<div class="flex items-center space-x-2">
+						<button
+							onclick={() => showHidden = !showHidden}
+							class="px-3 py-1.5 text-xs rounded-lg transition-colors {showHidden ? 'bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300' : 'bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300'}"
+							title={showHidden ? 'Hide hidden folders' : 'Show hidden folders'}
+						>
+							<Icon name={showHidden ? 'lucide:eye' : 'lucide:eye-off'} class="inline sm:mr-1" />
+							<span class="hidden sm:inline">Hidden</span>
+						</button>
 						<button
 							onclick={() => showCreateFolder = true}
 							class="px-3 py-1.5 text-xs rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 transition-colors"
@@ -651,24 +664,24 @@
 					</Button>
 				</div>
 			</div>
-		{:else if showLoadingSpinner && items.length === 0}
+		{:else if showLoadingSpinner && filteredItems.length === 0}
 			<div class="flex items-center justify-center py-12">
 				<div class="text-center">
 					<div class="animate-spin rounded-full h-8 w-8 border-2 border-violet-500 border-t-transparent mx-auto mb-4"></div>
 					<p class="text-slate-600 dark:text-slate-400">Loading directory...</p>
 				</div>
 			</div>
-		{:else if items.length === 0}
+		{:else if filteredItems.length === 0}
 			<div class="flex items-center justify-center py-12">
 				<div class="text-center">
 					<Icon name="lucide:folder-x" class="text-4xl text-slate-400 mx-auto mb-4" />
 					<p class="text-slate-600 dark:text-slate-400">No folders found</p>
-					<p class="text-sm text-slate-500 dark:text-slate-500 mt-2">This directory doesn't contain any subdirectories</p>
+					<p class="text-sm text-slate-500 dark:text-slate-500 mt-2">{items.length > 0 ? 'Toggle "Hidden" to show hidden folders' : 'This directory doesn\'t contain any subdirectories'}</p>
 				</div>
 			</div>
 		{:else}
 			<div class="space-y-2 transition-opacity duration-300 {loading ? 'opacity-75' : 'opacity-100'}">
-				{#each items as item (item.path)}
+				{#each filteredItems as item (item.path)}
 					<div 
 						class="flex items-center space-x-3 py-3 px-4 rounded-xl border transition-all duration-200 cursor-pointer {selectedPath === item.path 
 							? 'bg-violet-50 dark:bg-violet-900/20 border-violet-200 dark:border-violet-700' 

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

@@ -226,24 +226,26 @@
 					</div>
 				</div>
 			{/if}
-			
-			<div class="flex justify-end gap-3 pt-2">
-				{#if showCancel}
+
+			{#if !children}
+				<div class="flex justify-end gap-3 pt-2">
+					{#if showCancel}
+						<button
+							onclick={handleCancel}
+							class="px-6 py-2.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 font-semibold"
+						>
+							{cancelText}
+						</button>
+					{/if}
 					<button
-						onclick={handleCancel}
-						class="px-6 py-2.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 font-semibold"
+						onclick={handleConfirm}
+						disabled={confirmDisabled}
+						class="px-6 py-2.5 {colors.button} rounded-lg transition-all duration-200 font-semibold focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-current"
 					>
-						{cancelText}
+						{confirmText}
 					</button>
-				{/if}
-				<button
-					onclick={handleConfirm}
-					disabled={confirmDisabled}
-					class="px-6 py-2.5 {colors.button} rounded-lg transition-all duration-200 font-semibold focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-current"
-				>
-					{confirmText}
-				</button>
-			</div>
+				</div>
+			{/if}
 		</div>
 	</div>
 {/if}

package/frontend/components/files/FileNode.svelte

@@ -116,14 +116,6 @@
 		onAction?.(action, file);
 	}
 
-	function formatFileSize(bytes: number): string {
-		if (bytes === 0) return '0 B';
-		const k = 1024;
-		const sizes = ['B', 'KB', 'MB', 'GB'];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-	}
-
 	// Close menu when clicking outside
 	onMount(() => {
 		function handleClickOutside(event: MouseEvent) {
@@ -184,13 +176,6 @@
 		{/if}
 	</span>
 
-	<!-- File metadata -->
-	{#if file.type === 'file'}
-		<span class="flex-shrink-0 text-xs text-slate-400 dark:text-slate-500 lg:group-hover:hidden">
-			{formatFileSize(file.size || 0)}
-		</span>
-	{/if}
-
 	<!-- Actions menu (always visible, triggered by click) -->
 	<div class="flex-shrink-0">
 		<div class="relative">

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}