From 7dfbdd221ac0f7a839dd049e3e82b6a84c316860 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 13 Aug 2026 15:20:59 -0600
Subject: [PATCH] refac

---
 src/lib/components/chat/FileNav.svelte        | 627 +++++++++++-------
 .../chat/FileNav/BulkActionBar.svelte         |  57 +-
 .../chat/FileNav/FileEntryRow.svelte          | 186 ++++--
 .../chat/FileNav/FileNavToolbar.svelte        | 156 +++--
 .../components/chat/FileNav/PortList.svelte   |  53 +-
 5 files changed, 632 insertions(+), 447 deletions(-)

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 6b14ee6c62..3548140179 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -1,6 +1,8 @@
 <script context="module">
 	// Persists across mount/unmount cycles (module-level, not per-instance)
 	let savedPath = '/';
+	const treeExpandedCache = new Map<string, string[]>();
+	const treeContentsCache = new Map<string, [string, any[]][]>();
 </script>
 
 <script lang="ts">
@@ -30,13 +32,12 @@
 		type TerminalCwd
 	} from '$lib/apis/terminal';
 	import { isCodeFile } from '$lib/utils/codeHighlight';
-	import PenAlt from '../icons/PenAlt.svelte';
-	import ZoomReset from '../icons/ZoomReset.svelte';
 	import { isSavedChatId, isTemporaryChatId } from '$lib/utils/chatId';
 
 	import Spinner from '../common/Spinner.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import ConfirmDialog from '../common/ConfirmDialog.svelte';
+	import DropdownMenu from '../common/DropdownMenu.svelte';
 
 	import FileNavToolbar from './FileNav/FileNavToolbar.svelte';
 	import FilePreview from './FileNav/FilePreview.svelte';
@@ -97,19 +98,41 @@
 	let loading = false;
 	let error: string | null = null;
 
-	// ── Sort state ──────────────────────────────────────────────────────
-	type SortMode = 'name' | 'date';
+	// ── Browser view state ──────────────────────────────────────────────
+	type SortMode = 'name' | 'size' | 'date';
+	type BrowserRow = FileEntry & {
+		fullPath: string;
+		parentPath: string;
+		depth: number;
+		rowIndex: number;
+	};
+
 	let sortBy: SortMode = 'name';
 	let sortAsc = true;
+	let showHidden = false;
+	let visibleEntries: BrowserRow[] = [];
+	let expandedDirs: Set<string> = new Set();
+	let treeCache: Map<string, FileEntry[]> = new Map();
+	let loadingDirs: Set<string> = new Set();
+	let directoryMenu: { x: number; y: number } | null = null;
 
 	const sortEntries = (items: FileEntry[]): FileEntry[] => {
 		return [...items].sort((a, b) => {
 			// Directories always first
 			if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
 			if (sortBy === 'date') {
-				const aTime = a.modified ?? 0;
-				const bTime = b.modified ?? 0;
-				return sortAsc ? aTime - bTime : bTime - aTime;
+				if (a.modified !== undefined && b.modified !== undefined) {
+					return sortAsc ? a.modified - b.modified : b.modified - a.modified;
+				}
+				const cmp = a.name.localeCompare(b.name);
+				return sortAsc ? cmp : -cmp;
+			}
+			if (sortBy === 'size') {
+				if (a.size !== undefined && b.size !== undefined) {
+					return sortAsc ? a.size - b.size : b.size - a.size;
+				}
+				const cmp = a.name.localeCompare(b.name);
+				return sortAsc ? cmp : -cmp;
 			}
 			const cmp = a.name.localeCompare(b.name);
 			return sortAsc ? cmp : -cmp;
@@ -121,11 +144,38 @@
 			sortAsc = !sortAsc;
 		} else {
 			sortBy = mode;
-			sortAsc = mode === 'name'; // name defaults asc, date defaults asc (oldest first)
+			sortAsc = true;
 		}
-		entries = sortEntries(entries);
+		entries = [...entries];
+		treeCache = new Map(treeCache);
 	};
 
+	const filterEntries = (items: FileEntry[]) =>
+		showHidden ? items : items.filter((entry) => !entry.name.startsWith('.'));
+
+	const entryPath = (parentPath: string, entry: FileEntry) =>
+		entry.type === 'directory' ? `${parentPath}${entry.name}/` : `${parentPath}${entry.name}`;
+
+	const withRowIndexes = (rows: Omit<BrowserRow, 'rowIndex'>[]): BrowserRow[] =>
+		rows.map((row, rowIndex) => ({ ...row, rowIndex }));
+
+	const buildVisibleRows = (
+		items: FileEntry[],
+		parentPath: string,
+		depth = 0
+	): Omit<BrowserRow, 'rowIndex'>[] =>
+		sortEntries(filterEntries(items)).flatMap((entry) => {
+			const fullPath = entryPath(parentPath, entry);
+			const row = { ...entry, fullPath, parentPath, depth };
+			const children =
+				entry.type === 'directory' && expandedDirs.has(fullPath)
+					? buildVisibleRows(treeCache.get(fullPath) ?? [], fullPath, depth + 1)
+					: [];
+			return [row, ...children];
+		});
+
+	$: visibleEntries = withRowIndexes(buildVisibleRows(entries, currentPath));
+
 	// ── Navigation history ──────────────────────────────────────────────
 	type NavEntry = { path: string; file: string | null };
 	let navHistory: NavEntry[] = [];
@@ -227,6 +277,7 @@
 	let creatingFile = false;
 	let newFileName = '';
 	let newFileInput: HTMLInputElement;
+	let directoryUploadInput: HTMLInputElement;
 
 	// ── Delete confirmation ──────────────────────────────────────────────
 	let deleteTarget: { path: string; name: string } | null = null;
@@ -292,6 +343,7 @@
 				loading = true;
 				error = null;
 				entries = [];
+				resetTreeState();
 				(async () => {
 					if (terminalChanged) {
 						const config = await getTerminalConfig(terminal.url, terminal.key);
@@ -325,18 +377,59 @@
 		return normalized.endsWith('/') ? normalized : `${normalized}/`;
 	};
 
+	const resetTreeState = () => {
+		expandedDirs = new Set();
+		treeCache = new Map();
+		loadingDirs = new Set();
+	};
+
+	const saveTreeState = () => {
+		treeExpandedCache.set(currentPath, [...expandedDirs]);
+		treeContentsCache.set(currentPath, [...treeCache.entries()]);
+	};
+
+	const restoreTreeState = (path: string) => {
+		expandedDirs = new Set(treeExpandedCache.get(path) ?? []);
+		treeCache = new Map(treeContentsCache.get(path) ?? []);
+		loadingDirs = new Set();
+	};
+
+	const invalidateTreeCache = (...paths: string[]) => {
+		const directories = paths.map(asDirectoryPath);
+		const next = new Map(treeCache);
+		for (const key of next.keys()) {
+			if (directories.some((directory) => key === directory || key.startsWith(directory))) {
+				next.delete(key);
+			}
+		}
+		treeCache = next;
+	};
+
+	const toggleHidden = () => {
+		showHidden = !showHidden;
+		localStorage.setItem('fileNav:showHidden', String(showHidden));
+		clearSelection();
+		void refreshBrowser();
+	};
+
+	const closeDirectoryMenu = () => {
+		directoryMenu = null;
+	};
+
 	const labelFromPath = (path: string) => {
 		const parts = normalizePath(path).split('/').filter(Boolean);
 		return parts.at(-1) ?? '/';
 	};
 
 	const setFileRoot = (root?: TerminalFileRoot) => {
+		const previousRoot = fileRoot?.path ?? null;
 		fileRoot = root?.path
 			? {
 					path: asDirectoryPath(root.path),
 					label: root.label || labelFromPath(root.path)
 				}
 			: null;
+		if ((fileRoot?.path ?? null) !== previousRoot) resetTreeState();
 	};
 
 	const isInsideFileRoot = (path: string) => {
@@ -351,8 +444,14 @@
 	};
 
 	const applyCwd = (cwd: TerminalCwd | null) => {
-		setFileRoot(cwd?.root);
-		const path = cwd?.cwd ? asDirectoryPath(cwd.cwd) : (fileRoot?.path ?? '/');
+		const cwdPath = cwd?.cwd ? asDirectoryPath(cwd.cwd) : null;
+		const homePath = cwd?.home ? asDirectoryPath(cwd.home) : null;
+		const homeRoot =
+			homePath && cwdPath && (cwdPath === homePath || cwdPath.startsWith(homePath))
+				? { path: homePath, label: 'Home' }
+				: undefined;
+		setFileRoot(cwd?.root ?? homeRoot);
+		const path = cwdPath ?? fileRoot?.path ?? '/';
 		return clampToFileRoot(path);
 	};
 
@@ -411,10 +510,15 @@
 	};
 
 	// ── Directory operations ─────────────────────────────────────────────
-	const loadDir = async (path: string) => {
+	const loadDir = async (path: string, options: { preserveTree?: boolean; restoreTree?: boolean } = {}) => {
 		const terminal = selectedTerminal;
 		if (!terminal) return;
 		const directory = clampToFileRoot(path);
+		if (options.restoreTree) {
+			restoreTreeState(directory);
+		} else if (!options.preserveTree && directory !== currentPath) {
+			resetTreeState();
+		}
 
 		loading = true;
 		error = null;
@@ -439,19 +543,83 @@
 			entries = [];
 		} else {
 			currentWritable = result.writable !== false;
-			entries = sortEntries(result.entries);
+			entries = result.entries;
+			treeCache = new Map(treeCache).set(directory, result.entries);
+			saveTreeState();
+		}
+	};
+
+	const fetchExpandedDir = async (path: string) => {
+		const terminal = selectedTerminal;
+		if (!terminal) return null;
+		const directory = asDirectoryPath(path);
+		loadingDirs = new Set(loadingDirs).add(directory);
+		const result = await listFiles(terminal.url, terminal.key, directory, chatId ?? undefined);
+		const nextLoading = new Set(loadingDirs);
+		nextLoading.delete(directory);
+		loadingDirs = nextLoading;
+		if (result === null) return null;
+		treeCache = new Map(treeCache).set(directory, result.entries);
+		saveTreeState();
+		return result.entries;
+	};
+
+	const refreshExpandedDirs = async () => {
+		for (const directory of [...expandedDirs]) {
+			await fetchExpandedDir(directory);
+		}
+	};
+
+	const refreshBrowser = async () => {
+		await loadDir(currentPath, { preserveTree: true });
+		await refreshExpandedDirs();
+	};
+
+	const toggleExpand = async (path: string) => {
+		const directory = asDirectoryPath(path);
+		if (expandedDirs.has(directory)) {
+			const next = new Set(expandedDirs);
+			next.delete(directory);
+			expandedDirs = next;
+			saveTreeState();
+			return;
+		}
+
+		expandedDirs = new Set(expandedDirs).add(directory);
+		saveTreeState();
+		if (treeCache.has(directory)) {
+			entries = [...entries];
+			treeCache = new Map(treeCache);
+			return;
+		}
+
+		const result = await fetchExpandedDir(directory);
+		if (result === null) {
+			const next = new Set(expandedDirs);
+			next.delete(directory);
+			expandedDirs = next;
+			saveTreeState();
+			toast.error($i18n.t('Failed to load folder'));
+		} else {
+			entries = [...entries];
+			treeCache = new Map(treeCache);
 		}
 	};
 
 	const openEntry = async (entry: FileEntry) => {
+		const fullPath = 'fullPath' in entry ? (entry as BrowserRow).fullPath : entryPath(currentPath, entry);
+		const parentPath = 'parentPath' in entry ? (entry as BrowserRow).parentPath : currentPath;
 		if (entry.type === 'directory') {
-			await loadDir(`${currentPath}${entry.name}/`);
+			await loadDir(fullPath);
 			return;
 		}
 
-		const filePath = `${currentPath}${entry.name}`;
+		const filePath = fullPath;
+		if (parentPath !== currentPath) {
+			await loadDir(parentPath);
+		}
 		selectedFileWritable = entry.writable !== false;
-		pushNavHistory(currentPath, filePath);
+		pushNavHistory(parentPath, filePath);
 
 		const terminal = selectedTerminal;
 		if (!terminal) return;
@@ -576,10 +744,11 @@
 	const handleDragOver = (e: DragEvent) => {
 		if (selectedFile) return;
 		if (!currentWritable) return;
-		if (!e.dataTransfer?.types.includes('Files')) return;
+		const types = e.dataTransfer?.types;
+		if (!types?.includes('Files') && !types?.includes('application/x-terminal-file-move')) return;
 		e.preventDefault();
 		e.stopPropagation();
-		isDragOver = true;
+		isDragOver = types.includes('Files');
 	};
 
 	const handleDrop = async (e: DragEvent) => {
@@ -590,6 +759,16 @@
 		const terminal = selectedTerminal;
 		if (selectedFile || !terminal || !currentWritable) return;
 
+		const rawMove = e.dataTransfer?.getData('application/x-terminal-file-move');
+		if (rawMove) {
+			try {
+				const data = JSON.parse(rawMove);
+				const paths = data.paths || (data.path ? [data.path] : []);
+				for (const path of paths) await handleMove(path, currentPath);
+			} catch {}
+			return;
+		}
+
 		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
 		if (!droppedFiles.length) return;
 
@@ -598,7 +777,8 @@
 			await uploadToTerminal(terminal.url, terminal.key, currentPath, file, chatId ?? undefined);
 		}
 		uploading = false;
-		await loadDir(currentPath);
+		invalidateTreeCache(currentPath);
+			await loadDir(currentPath, { preserveTree: true });
 	};
 
 	const handleUploadFiles = async (files: File[]) => {
@@ -610,7 +790,8 @@
 			await uploadToTerminal(terminal.url, terminal.key, currentPath, file, chatId ?? undefined);
 		}
 		uploading = false;
-		await loadDir(currentPath);
+		invalidateTreeCache(currentPath);
+		await loadDir(currentPath, { preserveTree: true });
 	};
 
 	// ── Folder creation ──────────────────────────────────────────────────
@@ -640,7 +821,8 @@
 		toast[result ? 'success' : 'error'](
 			$i18n.t(result ? 'Folder created' : 'Failed to create folder')
 		);
-		await loadDir(currentPath);
+		invalidateTreeCache(currentPath);
+		await loadDir(currentPath, { preserveTree: true });
 	};
 
 	// ── File creation ────────────────────────────────────────────────────
@@ -664,7 +846,8 @@
 		const emptyFile = new File([''], name, { type: 'application/octet-stream' });
 		const result = await uploadToTerminal(terminal.url, terminal.key, currentPath, emptyFile);
 		toast[result ? 'success' : 'error']($i18n.t(result ? 'File created' : 'Failed to create file'));
-		await loadDir(currentPath);
+		invalidateTreeCache(currentPath);
+		await loadDir(currentPath, { preserveTree: true });
 	};
 
 	// ── Delete ───────────────────────────────────────────────────────────
@@ -676,7 +859,8 @@
 		toast[result ? 'success' : 'error'](
 			$i18n.t(result ? '{{name}} deleted' : 'Failed to delete {{name}}', { name })
 		);
-		await loadDir(currentPath);
+		invalidateTreeCache(currentPath, path);
+		await loadDir(currentPath, { preserveTree: true });
 	};
 
 	const requestDelete = (path: string, name: string) => {
@@ -690,19 +874,20 @@
 		const terminal = selectedTerminal;
 		if (!terminal || !currentWritable) return;
 
-		const fileName = source.split('/').pop() ?? '';
-		const destination = `${destFolder}${fileName}`;
+		const cleanSource = source.replace(/\/$/, '');
+		const fileName = cleanSource.split('/').pop() ?? '';
+		const destination = `${asDirectoryPath(destFolder)}${fileName}`;
 
-		if (source === destination) return;
+		if (!fileName || cleanSource === destination) return;
 
 		// Prevent moving a folder into itself or its own subtree
-		const sourceDir = source.endsWith('/') ? source : source + '/';
-		if (destFolder.startsWith(sourceDir)) return;
+		const sourceDir = asDirectoryPath(cleanSource);
+		if (asDirectoryPath(destFolder).startsWith(sourceDir)) return;
 
 		const result = await moveEntry(
 			terminal.url,
 			terminal.key,
-			source,
+			cleanSource,
 			destination,
 			chatId ?? undefined
 		);
@@ -711,7 +896,8 @@
 		} else {
 			toast.success($i18n.t('Moved {{name}}', { name: fileName }));
 		}
-		await loadDir(currentPath);
+		invalidateTreeCache(currentPath, destFolder, cleanSource.substring(0, cleanSource.lastIndexOf('/') + 1));
+		await loadDir(currentPath, { preserveTree: true });
 	};
 
 	// ── Rename ──────────────────────────────────────────────────────────
@@ -736,7 +922,8 @@
 		} else {
 			toast.success($i18n.t('Renamed to {{name}}', { name: newName }));
 		}
-		await loadDir(currentPath);
+		invalidateTreeCache(currentPath, oldPath);
+		await loadDir(currentPath, { preserveTree: true });
 	};
 
 	// ── Multi-select ────────────────────────────────────────────────────
@@ -745,12 +932,10 @@
 	let selectionMode = false;
 
 	$: selectedCount = selectedEntries.size;
-	$: hasSelectedFiles = [...selectedEntries].some((p) => !p.endsWith('/'));
 	$: selectedEntriesWritable =
 		currentWritable &&
 		[...selectedEntries].every((path) => {
-			const name = path.replace(/\/$/, '').split('/').pop();
-			const entry = entries.find((item) => item.name === name);
+			const entry = visibleEntries.find((item) => item.fullPath === path);
 			return entry?.writable !== false;
 		});
 
@@ -761,45 +946,38 @@
 	};
 
 	const selectAll = () => {
-		selectedEntries = new Set(
-			entries.map((e) => {
-				const p = `${currentPath}${e.name}`;
-				return e.type === 'directory' ? p + '/' : p;
-			})
-		);
+		selectedEntries = new Set(visibleEntries.map((entry) => entry.fullPath));
 		selectedEntries = selectedEntries; // trigger reactivity
 	};
 
-	const handleSelect = (entry: FileEntry, event: MouseEvent) => {
-		const path =
-			entry.type === 'directory' ? `${currentPath}${entry.name}/` : `${currentPath}${entry.name}`;
-		const idx = entries.indexOf(entry);
-
+	const handleSelect = (entry: FileEntry, event: MouseEvent, path?: string, index?: number) => {
+		const selectedPath = path ?? entryPath(currentPath, entry);
+		const idx = index ?? visibleEntries.findIndex((row) => row.fullPath === selectedPath);
+		if (idx < 0) return;
 		if (event.shiftKey && lastClickedIndex !== null) {
 			// Range select — replaces current selection with range
 			const start = Math.min(lastClickedIndex, idx);
 			const end = Math.max(lastClickedIndex, idx);
 			const newSet = new Set<string>();
 			for (let i = start; i <= end; i++) {
-				const e = entries[i];
-				const p = e.type === 'directory' ? `${currentPath}${e.name}/` : `${currentPath}${e.name}`;
-				newSet.add(p);
+				const row = visibleEntries[i];
+				if (row) newSet.add(row.fullPath);
 			}
 			selectedEntries = newSet;
 		} else if (event.metaKey || event.ctrlKey) {
 			// Toggle one
-			if (selectedEntries.has(path)) {
-				selectedEntries.delete(path);
+			if (selectedEntries.has(selectedPath)) {
+				selectedEntries.delete(selectedPath);
 			} else {
-				selectedEntries.add(path);
+				selectedEntries.add(selectedPath);
 			}
 			selectedEntries = selectedEntries;
 		} else {
 			// In selection mode (touch), toggle
-			if (selectedEntries.has(path)) {
-				selectedEntries.delete(path);
+			if (selectedEntries.has(selectedPath)) {
+				selectedEntries.delete(selectedPath);
 			} else {
-				selectedEntries.add(path);
+				selectedEntries.add(selectedPath);
 			}
 			selectedEntries = selectedEntries;
 		}
@@ -823,8 +1001,9 @@
 		toast[ok > 0 ? 'success' : 'error'](
 			$i18n.t('Deleted {{ok}} of {{total}} items', { ok, total: paths.length })
 		);
+		invalidateTreeCache(currentPath, ...paths);
 		clearSelection();
-		await loadDir(currentPath);
+		await loadDir(currentPath, { preserveTree: true });
 	};
 
 	const bulkDownload = async () => {
@@ -871,6 +1050,7 @@
 
 	// Click outside panel to clear selection
 	const handleWindowClick = (e: MouseEvent) => {
+		if (directoryMenu) directoryMenu = null;
 		if (selectedCount > 0 && containerEl && !containerEl.contains(e.target as Node)) {
 			clearSelection();
 		}
@@ -878,6 +1058,7 @@
 
 	// ── Lifecycle ────────────────────────────────────────────────────────
 	onMount(() => {
+		showHidden = localStorage.getItem('fileNav:showHidden') === 'true';
 		const terminal = getTerminal();
 
 		let handledDisplayFile = false;
@@ -928,7 +1109,7 @@
 				}
 			} else {
 				if (currentPath.startsWith(dir) || dir.startsWith(currentPath)) {
-					await loadDir(currentPath);
+					await loadDir(currentPath, { preserveTree: true });
 				}
 			}
 		});
@@ -946,7 +1127,7 @@
 					savedPath = applyCwd(await getCwd(terminal.url, terminal.key, chatId ?? undefined));
 				}
 				savedPath = clampToFileRoot(savedPath);
-				loadDir(savedPath);
+				loadDir(savedPath, { restoreTree: true });
 			})();
 		}
 
@@ -968,7 +1149,7 @@
 				!terminalChatContextPending &&
 				!loading
 			) {
-				loadDir(currentPath);
+				loadDir(currentPath, { preserveTree: true });
 			}
 		};
 
@@ -1051,23 +1232,11 @@
 	>
 		{#if isDragOver}
 			<div
-				class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm pointer-events-none gap-1.5"
+				class="absolute inset-1 z-10 flex items-center justify-center rounded-lg border-2 border-dashed border-blue-400 bg-blue-500/10 dark:border-blue-500 pointer-events-none"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="1.5"
-					class="size-5 text-gray-400 dark:text-gray-500"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
-					/>
-				</svg>
-				<span class="text-xs text-gray-400 dark:text-gray-500">{currentPath}</span>
+				<span class="text-xs font-medium text-blue-500 dark:text-blue-400">
+					{$i18n.t('Drop to upload')}
+				</span>
 			</div>
 		{/if}
 
@@ -1081,6 +1250,7 @@
 				{canGoForward}
 				{sortBy}
 				{sortAsc}
+				{showHidden}
 				onGoBack={goBack}
 				onGoForward={goForward}
 				onNavigate={loadDir}
@@ -1089,7 +1259,7 @@
 						const fileName = selectedFile.split('/').pop() ?? '';
 						openEntry({ name: fileName, type: 'file', size: 0 });
 					} else {
-						loadDir(currentPath);
+						refreshBrowser();
 					}
 				}}
 				onNewFolder={startNewFolder}
@@ -1098,33 +1268,34 @@
 				onDownloadDir={() => downloadFile(currentPath)}
 				onMove={handleMove}
 				onSort={toggleSort}
+				onToggleHidden={toggleHidden}
 			>
 				{#if fileImageUrl !== null || (fileOfficeSlides !== null && fileOfficeSlides.length > 0)}
 					<Tooltip content={$i18n.t('Reset view')}>
 						<button
-							class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+							class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 							on:click={() => filePreviewRef?.resetImageView()}
 							aria-label={$i18n.t('Reset view')}
 						>
-							<ZoomReset className="size-3.5" />
+							<Icon name="refresh" size={11} strokeWidth={1.4} />
 						</button>
 					</Tooltip>
 				{/if}
 				{#if filePdfData !== null}
 					<Tooltip content={$i18n.t('Reset view')}>
 						<button
-							class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+							class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 							on:click={() => filePreviewRef?.resetPdfView()}
 							aria-label={$i18n.t('Reset view')}
 						>
-							<ZoomReset className="size-3.5" />
+							<Icon name="refresh" size={11} strokeWidth={1.4} />
 						</button>
 					</Tooltip>
 				{/if}
 				{#if (isMarkdown || isCsv || isHtml || isJson || isSvg || isNotebook) && fileContent !== null && !editing}
 					<Tooltip content={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}>
 						<button
-							class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+							class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 							on:click={() => {
 								if (editing) filePreviewRef?.cancelEdit();
 								showRaw = !showRaw;
@@ -1132,40 +1303,9 @@
 							aria-label={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}
 						>
 							{#if showRaw}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="1.5"
-									class="size-3.5"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-									/>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-									/>
-								</svg>
+								<Icon name="eye" size={11} strokeWidth={1.4} />
 							{:else}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="1.5"
-									class="size-3.5"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
-									/>
-								</svg>
+								<Icon name="code" size={11} strokeWidth={1.4} />
 							{/if}
 						</button>
 					</Tooltip>
@@ -1174,7 +1314,7 @@
 					{#if isHtml && showRaw}
 						<Tooltip content={$i18n.t('Save')}>
 							<button
-								class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
+								class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:bg-transparent"
 								on:click={() => filePreviewRef?.saveCodeFile()}
 								disabled={saving || !selectedFileWritable}
 								aria-label={$i18n.t('Save')}
@@ -1182,18 +1322,7 @@
 								{#if saving}
 									<Spinner className="size-3.5" />
 								{:else}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="size-3.5"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
+									<Icon name="check" size={11} strokeWidth={1.7} />
 								{/if}
 							</button>
 						</Tooltip>
@@ -1202,7 +1331,7 @@
 					{:else if isMarkdown && showRaw}
 						<Tooltip content={$i18n.t('Save')}>
 							<button
-								class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
+								class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:bg-transparent"
 								on:click={() => filePreviewRef?.saveCodeFile()}
 								disabled={saving || !selectedFileWritable}
 								aria-label={$i18n.t('Save')}
@@ -1210,18 +1339,7 @@
 								{#if saving}
 									<Spinner className="size-3.5" />
 								{:else}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="size-3.5"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
+									<Icon name="check" size={11} strokeWidth={1.7} />
 								{/if}
 							</button>
 						</Tooltip>
@@ -1230,7 +1348,7 @@
 					{:else if isCode}
 						<Tooltip content={$i18n.t('Save')}>
 							<button
-								class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
+								class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:bg-transparent"
 								on:click={() => filePreviewRef?.saveCodeFile()}
 								disabled={saving || !selectedFileWritable}
 								aria-label={$i18n.t('Save')}
@@ -1238,43 +1356,23 @@
 								{#if saving}
 									<Spinner className="size-3.5" />
 								{:else}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="size-3.5"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
+									<Icon name="check" size={11} strokeWidth={1.7} />
 								{/if}
 							</button>
 						</Tooltip>
 					{:else if editing}
 						<Tooltip content={$i18n.t('Cancel')}>
 							<button
-								class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+								class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 								on:click={() => filePreviewRef?.cancelEdit()}
 								aria-label={$i18n.t('Cancel')}
 							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 20 20"
-									fill="currentColor"
-									class="size-3.5"
-								>
-									<path
-										d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
-									/>
-								</svg>
+								<Icon name="xmark" size={11} strokeWidth={1.7} />
 							</button>
 						</Tooltip>
 						<Tooltip content={$i18n.t('Save')}>
 							<button
-								class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
+								class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:bg-transparent"
 								on:click={() => filePreviewRef?.saveEdit()}
 								disabled={saving || !selectedFileWritable}
 								aria-label={$i18n.t('Save')}
@@ -1282,30 +1380,19 @@
 								{#if saving}
 									<Spinner className="size-3.5" />
 								{:else}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="size-3.5"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
+									<Icon name="check" size={11} strokeWidth={1.7} />
 								{/if}
 							</button>
 						</Tooltip>
 					{:else}
 						<Tooltip content={$i18n.t('Edit')}>
 							<button
-								class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
+								class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:bg-transparent"
 								on:click={() => filePreviewRef?.startEdit()}
 								disabled={!selectedFileWritable}
 								aria-label={$i18n.t('Edit')}
 							>
-								<PenAlt className="size-3.5" />
+								<Icon name="pencil" size={11} strokeWidth={1.4} />
 							</button>
 						</Tooltip>
 					{/if}
@@ -1314,50 +1401,24 @@
 				{#if fileContent !== null}
 					<Tooltip content={$i18n.t('Copy')}>
 						<button
-							class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+							class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 							on:click={async () => {
 								await navigator.clipboard.writeText(fileContent ?? '');
 								toast.success($i18n.t('Copied to clipboard'));
 							}}
 							aria-label={$i18n.t('Copy')}
 						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="1.5"
-								class="size-3.5"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9.75a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-								/>
-							</svg>
+							<Icon name="copy" size={11} strokeWidth={1.4} />
 						</button>
 					</Tooltip>
 				{/if}
 				<Tooltip content={$i18n.t('Download')}>
 					<button
-						class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+						class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 						on:click={() => selectedFile && downloadFile(selectedFile)}
 						aria-label={$i18n.t('Download')}
 					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="1.5"
-							class="size-3.5"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
-							/>
-						</svg>
+						<Icon name="download" size={11} strokeWidth={1.4} />
 					</button>
 				</Tooltip>
 			</FileNavToolbar>
@@ -1366,7 +1427,6 @@
 			{#if selectedCount > 0}
 				<BulkActionBar
 					count={selectedCount}
-					hasFiles={hasSelectedFiles}
 					canDelete={selectedEntriesWritable}
 					onDelete={() => {
 						deleteTarget = { path: '__bulk__', name: `${selectedCount} items` };
@@ -1383,8 +1443,15 @@
 		<div
 			class="flex-1 overflow-y-auto min-h-0 min-w-0"
 			on:click={(e) => {
+				closeDirectoryMenu();
 				if (e.target === e.currentTarget && selectedCount > 0) clearSelection();
 			}}
+			on:contextmenu={(e) => {
+				if (selectedFile || previewPort !== null) return;
+				if ((e.target as HTMLElement)?.closest('[data-file-row]')) return;
+				e.preventDefault();
+				directoryMenu = { x: e.clientX, y: e.clientY };
+			}}
 		>
 			{#if previewPort !== null}
 				<PortPreview
@@ -1450,7 +1517,7 @@
 					<div class="flex justify-center pt-8"><Spinner className="size-4" /></div>
 				{:else if error}
 					<div class="p-4 text-xs">{error}</div>
-				{:else if entries.length === 0 && !creatingFolder && !creatingFile}
+				{:else if visibleEntries.length === 0 && !creatingFolder && !creatingFile}
 					<div class="flex items-center justify-center py-12">
 						<div class="text-xs text-gray-400 dark:text-gray-500">
 							{$i18n.t('This folder is empty')}
@@ -1460,12 +1527,12 @@
 
 				{#if !loading && !error && !uploading && !($selectedTerminalId && $terminalServers === null)}
 					{#if creatingFolder}
-						<div class="flex items-center gap-2 px-3 py-1.5">
+						<div class="flex h-7 items-center gap-2 px-2">
 							<FileTypeIcon name={newFolderName} type="directory" />
 							<input
 								bind:this={newFolderInput}
 								bind:value={newFolderName}
-								class="flex-1 text-xs bg-transparent border border-gray-200 dark:border-gray-700 rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500"
+								class="flex-1 text-xs bg-transparent border border-gray-100 dark:border-white/[0.06] rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500"
 								placeholder={$i18n.t('Folder name')}
 								on:keydown={(e) => {
 									if (e.key === 'Enter') submitNewFolder();
@@ -1479,12 +1546,12 @@
 						</div>
 					{/if}
 					{#if creatingFile}
-						<div class="flex items-center gap-2 px-3 py-1.5">
+						<div class="flex h-7 items-center gap-2 px-2">
 							<FileTypeIcon name={newFileName} type="file" />
 							<input
 								bind:this={newFileInput}
 								bind:value={newFileName}
-								class="flex-1 text-xs bg-transparent border border-gray-200 dark:border-gray-700 rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500"
+								class="flex-1 text-xs bg-transparent border border-gray-100 dark:border-white/[0.06] rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500"
 								placeholder={$i18n.t('File name')}
 								on:keydown={(e) => {
 									if (e.key === 'Enter') submitNewFile();
@@ -1498,28 +1565,30 @@
 						</div>
 					{/if}
 
-					{#if entries.length > 0 || creatingFolder || creatingFile}
+					{#if visibleEntries.length > 0 || creatingFolder || creatingFile}
 						<ul>
-							{#each entries as entry}
+							{#each visibleEntries as entry (entry.fullPath)}
 								<FileEntryRow
 									{entry}
-									{currentPath}
+									currentPath={entry.parentPath}
+									fullPath={entry.fullPath}
+									depth={entry.depth}
+									rowIndex={entry.rowIndex}
+									expanded={expandedDirs.has(entry.fullPath)}
+									loadingChildren={loadingDirs.has(entry.fullPath)}
 									terminalUrl={selectedTerminal.url}
 									terminalKey={selectedTerminal.key}
-									selected={selectedEntries.has(
-										entry.type === 'directory'
-											? `${currentPath}${entry.name}/`
-											: `${currentPath}${entry.name}`
-									)}
+									selected={selectedEntries.has(entry.fullPath)}
 									{selectionMode}
 									selectedPaths={selectedEntries}
-									onOpen={openEntry}
+									onOpen={(row) => openEntry({ ...row, fullPath: entry.fullPath, parentPath: entry.parentPath, depth: entry.depth, rowIndex: entry.rowIndex })}
 									onDownload={downloadFile}
 									onDelete={requestDelete}
 									onMove={handleMove}
 									onRename={handleRename}
 									onSelect={handleSelect}
 									onLongPress={enterSelectionMode}
+									onToggleExpand={toggleExpand}
 									showDate={sortBy === 'date'}
 									parentWritable={currentWritable}
 								/>
@@ -1561,7 +1630,7 @@
 
 				<!-- Toggle header (full-width button) -->
 				<button
-					class="w-full flex items-center gap-2 px-3 py-1 mb-0.5 text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition"
+					class="w-full flex items-center gap-2 px-2 py-1 mb-0.5 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-100"
 					on:click={toggleTerminal}
 				>
 					<Icon name="terminal" size={14} strokeWidth={1.4} class="shrink-0" />
@@ -1577,18 +1646,12 @@
 						/>
 					{/if}
 
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="size-3 ml-auto transition-transform {terminalExpanded ? 'rotate-180' : ''}"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
-							clip-rule="evenodd"
-						/>
-					</svg>
+					<Icon
+						name="chevron-up"
+						size={12}
+						strokeWidth={1.4}
+						class="ml-auto transition-transform {terminalExpanded ? 'rotate-180' : ''}"
+					/>
 				</button>
 
 				{#if terminalExpanded}
@@ -1603,5 +1666,97 @@
 				{/if}
 			</div>
 		{/if}
+
+		<input
+			bind:this={directoryUploadInput}
+			type="file"
+			multiple
+			hidden
+			on:change={async () => {
+				if (!currentWritable || !directoryUploadInput?.files?.length) return;
+				await handleUploadFiles(Array.from(directoryUploadInput.files));
+				directoryUploadInput.value = '';
+			}}
+		/>
+
+		{#if directoryMenu}
+			<div
+				class="fixed z-[9999999]"
+				style="left: {directoryMenu.x}px; top: {directoryMenu.y}px;"
+				on:click|stopPropagation
+			>
+				<DropdownMenu className="min-w-[9.375rem]">
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
+						on:click={() => {
+							closeDirectoryMenu();
+							refreshBrowser();
+						}}
+					>
+						<Icon name="refresh" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('Refresh')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						disabled={!currentWritable}
+						on:click={() => {
+							closeDirectoryMenu();
+							startNewFile();
+						}}
+					>
+						<Icon name="empty-page" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('New File')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						disabled={!currentWritable}
+						on:click={() => {
+							closeDirectoryMenu();
+							startNewFolder();
+						}}
+					>
+						<Icon name="folder" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('New Folder')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						disabled={!currentWritable}
+						on:click={() => {
+							closeDirectoryMenu();
+							directoryUploadInput?.click();
+						}}
+					>
+						<Icon name="upload" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('Upload')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
+						on:click={() => {
+							closeDirectoryMenu();
+							downloadFile(currentPath);
+						}}
+					>
+						<Icon name="download" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('Download')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
+						on:click={() => {
+							closeDirectoryMenu();
+							toggleHidden();
+						}}
+					>
+						<Icon name="eye" size={12} strokeWidth={1.4} />
+						<span>{showHidden ? $i18n.t('Hide Hidden Files') : $i18n.t('Show Hidden Files')}</span>
+					</button>
+				</DropdownMenu>
+			</div>
+		{/if}
 	</div>
 {/if}
diff --git a/src/lib/components/chat/FileNav/BulkActionBar.svelte b/src/lib/components/chat/FileNav/BulkActionBar.svelte
index 6e2158ca08..7f50440ee7 100644
--- a/src/lib/components/chat/FileNav/BulkActionBar.svelte
+++ b/src/lib/components/chat/FileNav/BulkActionBar.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import GarbageBin from '../../icons/GarbageBin.svelte';
 	import Tooltip from '../../common/Tooltip.svelte';
+	import Icon from './Icon.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let count: number = 0;
-	export let hasFiles: boolean = false;
 	export let canDelete = true;
 
 	export let onDelete: () => void = () => {};
@@ -15,81 +14,51 @@
 	export let onClear: () => void = () => {};
 </script>
 
-<div class="flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-gray-800/50 shrink-0">
-	<span class="text-xs font-normal text-gray-600 dark:text-gray-400 flex-1 truncate">
+<div
+	class="flex h-8 items-center gap-2 px-2 bg-blue-50 dark:bg-blue-500/5 shrink-0 border-t border-gray-50 dark:border-gray-850/30"
+>
+	<span class="text-[0.6875rem] font-medium text-blue-600 dark:text-blue-400 flex-1 truncate">
 		{$i18n.t('{{count}} selected', { count })}
 	</span>
 
 	<Tooltip content={$i18n.t('Select All')}>
 		<button
-			class="p-1 rounded transition text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-400"
+			class="flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 			on:click={onSelectAll}
 			aria-label={$i18n.t('Select All')}
 		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="size-3.5"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
-					clip-rule="evenodd"
-				/>
-			</svg>
+			<Icon name="check" size={12} strokeWidth={1.6} />
 		</button>
 	</Tooltip>
 
 	<Tooltip content={$i18n.t('Download')}>
 		<button
-			class="p-1 rounded transition text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-400"
+			class="flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 			on:click={onDownload}
 			aria-label={$i18n.t('Download')}
 		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="size-3.5"
-			>
-				<path
-					d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
-				/>
-				<path
-					d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"
-				/>
-			</svg>
+			<Icon name="download" size={12} strokeWidth={1.4} />
 		</button>
 	</Tooltip>
 
 	<Tooltip content={$i18n.t('Delete')}>
 		<button
-			class="p-1 rounded transition text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
+			class="flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-red-500 disabled:opacity-30 disabled:hover:text-gray-400"
 			on:click={onDelete}
 			disabled={!canDelete}
 			aria-label={$i18n.t('Delete')}
 		>
-			<GarbageBin className="size-3.5" />
+			<Icon name="trash" size={12} strokeWidth={1.4} />
 		</button>
 	</Tooltip>
 
 	<Tooltip content={$i18n.t('Deselect')}>
 		<button
-			class="p-1 rounded transition text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-400"
+			class="flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 			on:click={onClear}
 			aria-label={$i18n.t('Deselect')}
 		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="size-3.5"
-			>
-				<path
-					d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
-				/>
-			</svg>
+			<Icon name="xmark" size={12} strokeWidth={1.5} />
 		</button>
 	</Tooltip>
 </div>
diff --git a/src/lib/components/chat/FileNav/FileEntryRow.svelte b/src/lib/components/chat/FileNav/FileEntryRow.svelte
index defdaab477..d172d53397 100644
--- a/src/lib/components/chat/FileNav/FileEntryRow.svelte
+++ b/src/lib/components/chat/FileNav/FileEntryRow.svelte
@@ -6,16 +6,18 @@
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
-	import EllipsisHorizontal from '../../icons/EllipsisHorizontal.svelte';
-	import GarbageBin from '../../icons/GarbageBin.svelte';
-	import Pencil from '../../icons/Pencil.svelte';
-	import Clipboard from '../../icons/Clipboard.svelte';
 	import FileTypeIcon from './FileTypeIcon.svelte';
+	import Icon from './Icon.svelte';
 
 	const i18n: any = getContext('i18n');
 
 	export let entry: FileEntry;
 	export let currentPath: string;
+	export let fullPath: string | null = null;
+	export let depth = 0;
+	export let rowIndex = 0;
+	export let expanded = false;
+	export let loadingChildren = false;
 	export let terminalUrl: string = '';
 	export let terminalKey: string = '';
 
@@ -29,13 +31,23 @@
 	export let selected: boolean = false;
 	export let selectionMode: boolean = false;
 	export let selectedPaths: Set<string> = new Set();
-	export let onSelect: (entry: FileEntry, event: MouseEvent) => void = () => {};
+	export let onSelect: (
+		entry: FileEntry,
+		event: MouseEvent,
+		path: string,
+		index: number
+	) => void = () => {};
 	export let onLongPress: () => void = () => {};
+	export let onToggleExpand: (path: string) => void = () => {};
 	export let showDate: boolean = false;
 	export let parentWritable = true;
 
+	$: entryPath =
+		fullPath ?? (entry.type === 'directory' ? `${currentPath}${entry.name}/` : `${currentPath}${entry.name}`);
+	$: directoryPath = entryPath.endsWith('/') ? entryPath : `${entryPath}/`;
 	$: writable = entry.writable !== false;
 	$: canMutate = parentWritable && writable;
+	$: rowIndent = `${12 + depth * 16}px`;
 
 	const formatRelativeTime = (epoch: number): string => {
 		const diff = Math.floor(Date.now() / 1000) - epoch;
@@ -48,6 +60,13 @@
 	};
 
 	let dragOverFolder = false;
+	let expandTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const clearExpandTimer = () => {
+		if (!expandTimer) return;
+		clearTimeout(expandTimer);
+		expandTimer = null;
+	};
 
 	// ── Rename state ─────────────────────────────────────────────────────
 	let renaming = false;
@@ -71,7 +90,7 @@
 		const newName = renameValue.trim();
 		renaming = false;
 		if (!newName || newName === entry.name) return;
-		onRename(`${currentPath}${entry.name}`, newName);
+		onRename(entryPath.replace(/\/$/, ''), newName);
 	};
 
 	const cancelRename = () => {
@@ -89,7 +108,7 @@
 		longPressTimer = setTimeout(() => {
 			didLongPress = true;
 			onLongPress();
-			onSelect(entry, e as any);
+			onSelect(entry, e as any, entryPath, rowIndex);
 		}, 500);
 	};
 
@@ -109,6 +128,7 @@
 
 	onDestroy(() => {
 		if (longPressTimer) clearTimeout(longPressTimer);
+		clearExpandTimer();
 	});
 
 	// ── Click handler ────────────────────────────────────────────────────
@@ -122,13 +142,13 @@
 		// Modifier click → toggle/range select
 		if (e.metaKey || e.ctrlKey || e.shiftKey) {
 			e.preventDefault();
-			onSelect(entry, e);
+			onSelect(entry, e, entryPath, rowIndex);
 			return;
 		}
 
 		// In selection mode (touch) → toggle select
 		if (selectionMode) {
-			onSelect(entry, e);
+			onSelect(entry, e, entryPath, rowIndex);
 			return;
 		}
 
@@ -137,14 +157,13 @@
 	};
 </script>
 
-<li class="group">
+<li class="group" data-file-row>
 	<div
-		class="w-full flex items-center transition
-			{selected ? 'bg-blue-50 dark:bg-blue-900/20' : 'hover:bg-gray-50/40 dark:hover:bg-gray-850/30'}
+		class="w-full flex items-center transition-colors duration-75
+			{selected ? 'bg-blue-50 dark:bg-blue-500/10' : 'hover:bg-gray-50/40 dark:hover:bg-white/4'}
 			{dragOverFolder
-			? 'bg-blue-50 dark:bg-blue-900/30 ring-1 ring-blue-400 dark:ring-blue-500 ring-inset'
+			? 'bg-blue-50 dark:bg-blue-500/10 ring-1 ring-blue-400 dark:ring-blue-500 ring-inset'
 			: ''}"
-		role={entry.type === 'directory' ? 'button' : undefined}
 		on:dragover={(e) => {
 			if (entry.type !== 'directory') return;
 			if (!writable) return;
@@ -152,11 +171,18 @@
 			e.preventDefault();
 			e.stopPropagation();
 			dragOverFolder = true;
+			if (!expanded && !expandTimer) {
+				expandTimer = setTimeout(() => {
+					onToggleExpand(directoryPath);
+					expandTimer = null;
+				}, 600);
+			}
 		}}
 		on:dragleave={(e) => {
 			if (entry.type !== 'directory') return;
 			e.stopPropagation();
 			dragOverFolder = false;
+			clearExpandTimer();
 		}}
 		on:drop={(e) => {
 			if (entry.type !== 'directory') return;
@@ -166,10 +192,11 @@
 			e.preventDefault();
 			e.stopPropagation();
 			dragOverFolder = false;
+			clearExpandTimer();
 			try {
 				const data = JSON.parse(raw);
 				const paths = data.paths || (data.path ? [data.path] : []);
-				const destFolder = `${currentPath}${entry.name}/`;
+				const destFolder = directoryPath;
 				for (const p of paths) {
 					if (p + '/' === destFolder || p === destFolder) continue;
 					onMove(p, destFolder);
@@ -177,15 +204,35 @@
 			} catch {}
 		}}
 	>
+		{#if entry.type === 'directory'}
+			<button
+				type="button"
+				class="mr-1 flex w-4 shrink-0 items-center self-stretch justify-center text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400"
+				style="margin-left: {rowIndent};"
+				on:click|stopPropagation={() => onToggleExpand(directoryPath)}
+				aria-label={expanded ? $i18n.t('Collapse') : $i18n.t('Expand')}
+			>
+				<Icon
+					name={expanded ? 'chevron-down' : 'chevron-right'}
+					size={9}
+					strokeWidth={1.5}
+					class={loadingChildren ? 'animate-pulse' : ''}
+				/>
+			</button>
+		{:else}
+			<span class="mr-1 w-4 shrink-0 self-stretch" style="margin-left: {rowIndent};"></span>
+		{/if}
+
 		<button
-			class="flex-1 flex items-center gap-2 px-3 py-1.5 text-left min-w-0"
+			type="button"
+			class="flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-2 text-left"
 			draggable={canMutate}
 			on:dragstart={(e) => {
 				if (!canMutate) {
 					e.preventDefault();
 					return;
 				}
-				const filePath = `${currentPath}${entry.name}`;
+				const filePath = entryPath.replace(/\/$/, '');
 				// If dragging a selected item, drag all selected
 				if (selected && selectedPaths.size > 1) {
 					e.dataTransfer?.setData(
@@ -203,7 +250,7 @@
 				} else {
 					e.dataTransfer?.setData(
 						'application/x-terminal-file-move',
-						JSON.stringify({ path: filePath, name: entry.name })
+						JSON.stringify({ path: entry.type === 'directory' ? directoryPath : filePath, name: entry.name })
 					);
 				}
 				if (entry.type === 'file') {
@@ -229,34 +276,23 @@
 			{#if selectionMode || selected}
 				<!-- Checkbox indicator -->
 				<div
-					class="size-3.5 shrink-0 rounded border transition-colors flex items-center justify-center
+				class="size-3.5 shrink-0 rounded border transition-colors flex items-center justify-center
 						{selected
 						? 'bg-blue-500 dark:bg-blue-600 border-blue-500 dark:border-blue-600 text-white'
 						: 'border-gray-300 dark:border-gray-600'}"
 				>
 					{#if selected}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="size-2.5"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
+						<Icon name="check" size={10} strokeWidth={2} />
 					{/if}
 				</div>
 			{/if}
-			<FileTypeIcon name={entry.name} type={entry.type} />
+			<FileTypeIcon name={entry.name} type={entry.type} size={13} />
 			{#if renaming}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<input
 					bind:this={renameInput}
 					bind:value={renameValue}
-					class="flex-1 text-xs bg-transparent border border-gray-200 dark:border-gray-700 rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500 text-gray-800 dark:text-gray-200 min-w-0"
+					class="flex-1 text-xs bg-transparent border border-gray-100 dark:border-white/[0.06] rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500 text-gray-800 dark:text-gray-200 min-w-0"
 					on:keydown={(e) => {
 						if (e.key === 'Enter') {
 							e.preventDefault();
@@ -294,65 +330,79 @@
 
 		<Dropdown align="end" sideOffset={4}>
 			<button
-				class="shrink-0 p-0.5 mr-1 rounded-lg transition
+				class="shrink-0 flex h-5 w-5 items-center justify-center mr-1 rounded transition
 					text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400
-					hover:bg-gray-100 dark:hover:bg-gray-800"
+					hover:bg-gray-50/40 dark:hover:bg-white/4"
 				aria-label={$i18n.t('More')}
 			>
-				<EllipsisHorizontal className="size-3.5" />
+				<Icon name="three-dots" size={12} strokeWidth={1.4} />
 			</button>
 
 			<div slot="content">
 				<DropdownMenu className="min-w-[9.375rem] z-[9999999]">
 					<button
 						type="button"
-						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
 						on:click={(e) => {
 							e.stopPropagation();
-							const path =
-								entry.type === 'directory'
-									? `${currentPath}${entry.name}/`
-									: `${currentPath}${entry.name}`;
-							onDownload(path);
+							onOpen(entry);
 						}}
 					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="size-3.5"
-						>
-							<path
-								d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
-							/>
-							<path
-								d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"
-							/>
-						</svg>
-						<div class="flex items-center">{$i18n.t('Download')}</div>
+						<Icon name={entry.type === 'directory' ? 'folder' : 'eye'} size={12} strokeWidth={1.4} />
+						<div class="flex items-center">
+							{entry.type === 'directory' ? $i18n.t('Open Folder') : $i18n.t('Open')}
+						</div>
 					</button>
 
+					{#if entry.type === 'directory'}
+						<button
+							type="button"
+							class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
+							on:click={(e) => {
+								e.stopPropagation();
+								onToggleExpand(directoryPath);
+							}}
+						>
+							<Icon
+								name={expanded ? 'chevron-down' : 'chevron-right'}
+								size={12}
+								strokeWidth={1.4}
+							/>
+							<div class="flex items-center">
+								{expanded ? $i18n.t('Collapse') : $i18n.t('Expand')}
+							</div>
+						</button>
+					{:else}
+						<button
+							type="button"
+							class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
+							on:click={(e) => {
+								e.stopPropagation();
+								onDownload(entryPath);
+							}}
+						>
+							<Icon name="download" size={12} strokeWidth={1.4} />
+							<div class="flex items-center">{$i18n.t('Download')}</div>
+						</button>
+					{/if}
+
 					<button
 						type="button"
-						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
 						on:click={(e) => {
 							e.stopPropagation();
-							const path =
-								entry.type === 'directory'
-									? `${currentPath}${entry.name}/`
-									: `${currentPath}${entry.name}`;
-							navigator.clipboard.writeText(path).then(() => {
+							navigator.clipboard.writeText(entryPath).then(() => {
 								toast.success($i18n.t('Path copied'));
 							});
 						}}
 					>
-						<Clipboard className="size-3.5" strokeWidth="1.5" />
+						<Icon name="copy" size={12} strokeWidth={1.4} />
 						<div class="flex items-center">{$i18n.t('Copy Path')}</div>
 					</button>
 
 					<button
 						type="button"
-						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
 						disabled={!canMutate}
 						on:click={(e) => {
 							e.stopPropagation();
@@ -360,21 +410,21 @@
 							startRename();
 						}}
 					>
-						<Pencil className="size-3.5" strokeWidth="1.5" />
+						<Icon name="pencil" size={12} strokeWidth={1.4} />
 						<div class="flex items-center">{$i18n.t('Rename')}</div>
 					</button>
 
 					<button
 						type="button"
-						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
 						disabled={!canMutate}
 						on:click={(e) => {
 							e.stopPropagation();
 							if (!canMutate) return;
-							onDelete(`${currentPath}${entry.name}`, entry.name);
+							onDelete(entryPath.replace(/\/$/, ''), entry.name);
 						}}
 					>
-						<GarbageBin className="size-3.5" />
+						<Icon name="trash" size={12} strokeWidth={1.4} />
 						<div class="flex items-center">{$i18n.t('Delete')}</div>
 					</button>
 				</DropdownMenu>
diff --git a/src/lib/components/chat/FileNav/FileNavToolbar.svelte b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
index 83dbb0afe3..4399f7dbf7 100644
--- a/src/lib/components/chat/FileNav/FileNavToolbar.svelte
+++ b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
@@ -20,11 +20,13 @@
 	export let onUploadFiles: (files: File[]) => void = () => {};
 	export let onDownloadDir: () => void = () => {};
 	export let onMove: (source: string, destFolder: string) => void = () => {};
+	export let showHidden = false;
+	export let onToggleHidden: () => void = () => {};
 
 	// Sort controls
-	export let sortBy: 'name' | 'date' = 'name';
+	export let sortBy: 'name' | 'size' | 'date' = 'name';
 	export let sortAsc: boolean = true;
-	export let onSort: (mode: 'name' | 'date') => void = () => {};
+	export let onSort: (mode: 'name' | 'size' | 'date') => void = () => {};
 
 	// Back / forward navigation
 	export let canGoBack = false;
@@ -46,45 +48,45 @@
 	});
 </script>
 
-<div class="flex items-center px-2 pb-1.5 shrink-0 gap-1">
+<div class="m-0 flex items-center gap-1 px-1 pt-0 pb-1.5 shrink-0 border-b border-gray-50 dark:border-gray-850/30">
 	<!-- Back -->
 	<Tooltip content={$i18n.t('Back')}>
 		<button
-			class="shrink-0 p-1 rounded transition {canGoBack
-				? 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-400'
+			class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 {canGoBack
+				? 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300'
 				: 'text-gray-200 dark:text-gray-700 cursor-default'}"
 			on:click={onGoBack}
 			disabled={!canGoBack}
 			aria-label={$i18n.t('Back')}
 		>
-			<Icon name="chevron-left" size={14} strokeWidth={1.5} />
+			<Icon name="chevron-left" size={11} strokeWidth={1.5} />
 		</button>
 	</Tooltip>
 
 	<!-- Forward -->
 	<Tooltip content={$i18n.t('Forward')}>
 		<button
-			class="shrink-0 p-1 rounded transition {canGoForward
-				? 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-400'
+			class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 {canGoForward
+				? 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300'
 				: 'text-gray-200 dark:text-gray-700 cursor-default'}"
 			on:click={onGoForward}
 			disabled={!canGoForward}
 			aria-label={$i18n.t('Forward')}
 		>
-			<Icon name="chevron-right" size={14} strokeWidth={1.5} />
+			<Icon name="chevron-right" size={11} strokeWidth={1.5} />
 		</button>
 	</Tooltip>
 
 	<div
 		bind:this={breadcrumbEl}
-		class="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none"
+		class="flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-none"
 	>
 		{#each breadcrumbs as crumb, i}
 			{#if showSeparator(i)}
-				<span class="text-gray-300 dark:text-gray-600 text-xs shrink-0 select-none mx-0.5">/</span>
+				<span class="text-gray-300 dark:text-gray-600 text-xs shrink-0 select-none">/</span>
 			{/if}
 			<button
-				class="text-xs shrink-0 px-1 py-0.5 rounded transition
+				class="text-xs shrink-0 p-0 transition
 					{!selectedFile && i === breadcrumbs.length - 1
 					? 'text-gray-700 dark:text-gray-300'
 					: 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400'}
@@ -120,8 +122,8 @@
 			</button>
 		{/each}
 		{#if selectedFile}
-			<span class="text-gray-300 dark:text-gray-600 text-xs shrink-0 select-none mx-0.5">/</span>
-			<span class="text-xs shrink-0 px-1.5 py-0.5 text-gray-700 dark:text-gray-300">
+			<span class="text-gray-300 dark:text-gray-600 text-xs shrink-0 select-none">/</span>
+			<span class="text-xs shrink-0 p-0 text-gray-700 dark:text-gray-300">
 				{selectedFile.split('/').pop()}
 			</span>
 		{/if}
@@ -132,11 +134,11 @@
 
 	<Tooltip content={$i18n.t('Refresh')}>
 		<button
-			class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+			class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 			on:click={onRefresh}
 			aria-label={$i18n.t('Refresh')}
 		>
-			<Icon name="refresh" size={14} strokeWidth={1.4} class={loading ? 'animate-spin' : ''} />
+			<Icon name="refresh" size={11} strokeWidth={1.4} class={loading ? 'animate-spin' : ''} />
 		</button>
 	</Tooltip>
 
@@ -144,10 +146,10 @@
 		<Dropdown align="end" sideOffset={4}>
 			<Tooltip content={$i18n.t('Sort')}>
 				<button
-					class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+					class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 					aria-label={$i18n.t('Sort')}
 				>
-					<Icon name="sort" size={14} strokeWidth={1.4} />
+					<Icon name="sort" size={11} strokeWidth={1.4} />
 				</button>
 			</Tooltip>
 
@@ -155,7 +157,7 @@
 				<DropdownMenu className="min-w-[9.375rem] z-[9999999]">
 					<button
 						type="button"
-						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
 						on:click={() => onSort('name')}
 					>
 						<span class="flex-1 text-left">{$i18n.t('Name')}</span>
@@ -172,7 +174,24 @@
 					</button>
 					<button
 						type="button"
-						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
+						on:click={() => onSort('size')}
+					>
+						<span class="flex-1 text-left">{$i18n.t('Size')}</span>
+						{#if sortBy === 'size'}
+							<Icon
+								name="chevron-up"
+								size={12}
+								strokeWidth={1.5}
+								class="text-gray-500 dark:text-gray-400 transition-transform {sortAsc
+									? ''
+									: 'rotate-180'}"
+							/>
+						{/if}
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
 						on:click={() => onSort('date')}
 					>
 						<span class="flex-1 text-left">{$i18n.t('Date Modified')}</span>
@@ -190,45 +209,64 @@
 				</DropdownMenu>
 			</div>
 		</Dropdown>
-		<Tooltip content={$i18n.t('New Folder')}>
-			<button
-				class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
-				on:click={onNewFolder}
-				disabled={!writable}
-				aria-label={$i18n.t('New Folder')}
-			>
-				<Icon name="folder" size={14} strokeWidth={1.4} />
-			</button>
-		</Tooltip>
-		<Tooltip content={$i18n.t('New File')}>
-			<button
-				class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
-				on:click={onNewFile}
-				disabled={!writable}
-				aria-label={$i18n.t('New File')}
-			>
-				<Icon name="empty-page" size={14} strokeWidth={1.4} />
-			</button>
-		</Tooltip>
-		<Tooltip content={$i18n.t('Download')}>
-			<button
-				class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
-				on:click={onDownloadDir}
-				aria-label={$i18n.t('Download')}
-			>
-				<Icon name="download" size={14} strokeWidth={1.4} />
-			</button>
-		</Tooltip>
-		<Tooltip content={$i18n.t('Upload')}>
-			<button
-				class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
-				on:click={() => uploadInput?.click()}
-				disabled={!writable}
-				aria-label={$i18n.t('Upload')}
-			>
-				<Icon name="upload" size={14} strokeWidth={1.4} />
-			</button>
-		</Tooltip>
+		<Dropdown align="end" sideOffset={4}>
+			<Tooltip content={$i18n.t('Actions')}>
+				<button
+					class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+					aria-label={$i18n.t('Actions')}
+				>
+					<Icon name="three-dots" size={11} strokeWidth={1.4} />
+				</button>
+			</Tooltip>
+
+			<div slot="content">
+				<DropdownMenu className="min-w-[9.375rem] z-[9999999]">
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						on:click={onNewFolder}
+						disabled={!writable}
+					>
+						<Icon name="folder" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('New Folder')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						on:click={onNewFile}
+						disabled={!writable}
+					>
+						<Icon name="empty-page" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('New File')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						on:click={() => uploadInput?.click()}
+						disabled={!writable}
+					>
+						<Icon name="upload" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('Upload')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
+						on:click={onDownloadDir}
+					>
+						<Icon name="download" size={12} strokeWidth={1.4} />
+						<span>{$i18n.t('Download')}</span>
+					</button>
+					<button
+						type="button"
+						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition"
+						on:click={onToggleHidden}
+					>
+						<Icon name="eye" size={12} strokeWidth={1.4} />
+						<span>{showHidden ? $i18n.t('Hide Hidden Files') : $i18n.t('Show Hidden Files')}</span>
+					</button>
+				</DropdownMenu>
+			</div>
+		</Dropdown>
 		<input
 			bind:this={uploadInput}
 			type="file"
diff --git a/src/lib/components/chat/FileNav/PortList.svelte b/src/lib/components/chat/FileNav/PortList.svelte
index 736f7350de..5ae6aa0e74 100644
--- a/src/lib/components/chat/FileNav/PortList.svelte
+++ b/src/lib/components/chat/FileNav/PortList.svelte
@@ -3,6 +3,7 @@
 	import type { ListeningPort } from '$lib/apis/terminal';
 	import { getListeningPorts, getPortProxyUrl } from '$lib/apis/terminal';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Icon from './Icon.svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher<{ previewPort: number }>();
@@ -55,21 +56,15 @@
 
 <div class="px-2 py-1">
 	<button
-		class="flex items-center gap-1 w-full text-xs font-normal text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition"
+		class="flex items-center gap-1 w-full text-xs font-normal text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-100"
 		on:click={() => (expanded = !expanded)}
 	>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 20 20"
-			fill="currentColor"
-			class="size-3 transition-transform {expanded ? '' : '-rotate-90'}"
-		>
-			<path
-				fill-rule="evenodd"
-				d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
-				clip-rule="evenodd"
-			/>
-		</svg>
+		<Icon
+			name="chevron-down"
+			size={12}
+			strokeWidth={1.4}
+			class="transition-transform {expanded ? '' : '-rotate-90'}"
+		/>
 		{$i18n.t('Ports')}
 		<span class="ml-auto flex items-center gap-1">
 			{#if ports.length > 0}
@@ -81,22 +76,11 @@
 			{/if}
 			<Tooltip content={$i18n.t('Refresh')}>
 				<button
-					class="p-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+					class="flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 					on:click|stopPropagation={loadPorts}
 					aria-label={$i18n.t('Refresh')}
 				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="size-3 {loading ? 'animate-spin' : ''}"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.451a.75.75 0 0 0 0-1.5H4.5a.75.75 0 0 0-.75.75v3.75a.75.75 0 0 0 1.5 0v-2.127l.13.13a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm-10.624-2.85a5.5 5.5 0 0 1 9.201-2.465l.312.31H11.75a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 .75-.75V3.42a.75.75 0 0 0-1.5 0v2.126l-.13-.129A7 7 0 0 0 3.239 8.555a.75.75 0 0 0 1.449.39Z"
-							clip-rule="evenodd"
-						/>
-					</svg>
+					<Icon name="refresh" size={11} strokeWidth={1.4} class={loading ? 'animate-spin' : ''} />
 				</button>
 			</Tooltip>
 		</span>
@@ -111,7 +95,7 @@
 			{:else}
 				{#each ports as port}
 					<button
-						class="flex items-center w-full gap-2 px-1.5 py-1 text-xs rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition group"
+						class="flex h-7 items-center w-full gap-2 px-1.5 text-xs rounded-lg hover:bg-gray-50/40 dark:hover:bg-white/4 transition-colors duration-75 group"
 						on:click={() => previewPort(port.port)}
 					>
 						<span class="font-mono text-blue-500 dark:text-blue-400 shrink-0">
@@ -125,21 +109,10 @@
 							<span
 								role="button"
 								tabindex="-1"
-								class="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition shrink-0 p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+								class="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition shrink-0 flex h-5 w-5 items-center justify-center rounded hover:text-gray-600 dark:hover:text-gray-300"
 								on:click|stopPropagation={() => openPortExternal(port.port)}
 							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 20 20"
-									fill="currentColor"
-									class="size-3"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Zm7.5-3.5a.75.75 0 0 0 0 1.5h2.69l-4.72 4.72a.75.75 0 0 0 1.06 1.06l4.72-4.72v2.69a.75.75 0 0 0 1.5 0v-5.25a.75.75 0 0 0-.75-.75h-5.25Z"
-										clip-rule="evenodd"
-									/>
-								</svg>
+								<Icon name="external-link" size={11} strokeWidth={1.4} />
 							</span>
 						</Tooltip>
 					</button>