diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 144beccf4..77445bd02 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -20,7 +20,10 @@
 	} from '$lib/apis/terminal';
 	import Folder from '../icons/Folder.svelte';
 	import Document from '../icons/Document.svelte';
+	import PenAlt from '../icons/PenAlt.svelte';
+	import Reset from '../icons/Reset.svelte';
 	import Spinner from '../common/Spinner.svelte';
+	import Tooltip from '../common/Tooltip.svelte';
 	import ConfirmDialog from '../common/ConfirmDialog.svelte';
 
 	import FileNavToolbar from './FileNav/FileNavToolbar.svelte';
@@ -45,6 +48,19 @@
 	let fileLoading = false;
 	let filePreviewRef: FilePreview;
 
+	// ── File preview toolbar state (bound from FilePreview) ─────────────
+	let editing = false;
+	let showRaw = false;
+	let saving = false;
+
+	const MD_EXTS = new Set(['md', 'markdown', 'mdx']);
+	const CSV_EXTS = new Set(['csv', 'tsv']);
+	const getFileExt = (path: string | null) => path?.split('.').pop()?.toLowerCase() ?? '';
+
+	$: isMarkdown = MD_EXTS.has(getFileExt(selectedFile));
+	$: isCsv = CSV_EXTS.has(getFileExt(selectedFile));
+	$: isTextFile = fileContent !== null && fileImageUrl === null && filePdfData === null;
+
 	// ── Upload / folder creation ─────────────────────────────────────────
 	let isDragOver = false;
 	let uploading = false;
@@ -428,19 +444,108 @@
 			onNewFolder={startNewFolder}
 			onNewFile={startNewFile}
 			onUploadFiles={handleUploadFiles}
-		/>
+		>
+			{#if fileImageUrl !== 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"
+						on:click={() => filePreviewRef?.resetImageView()}
+						aria-label={$i18n.t('Reset view')}
+					>
+						<Reset className="size-3.5" />
+					</button>
+				</Tooltip>
+			{/if}
+			{#if (isMarkdown || isCsv) && fileContent !== null}
+				<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"
+						on:click={() => {
+							if (editing) filePreviewRef?.cancelEdit();
+							showRaw = !showRaw;
+						}}
+						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>
+						{: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>
+						{/if}
+					</button>
+				</Tooltip>
+			{/if}
+			{#if isTextFile}
+				{#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"
+							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>
+						</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"
+							on:click={() => filePreviewRef?.saveEdit()}
+							disabled={saving}
+							aria-label={$i18n.t('Save')}
+						>
+							{#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>
+							{/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"
+							on:click={() => filePreviewRef?.startEdit()}
+							aria-label={$i18n.t('Edit')}
+						>
+							<PenAlt className="size-3.5" />
+						</button>
+					</Tooltip>
+				{/if}
+			{/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"
+					on:click={() => 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>
+				</button>
+			</Tooltip>
+		</FileNavToolbar>
 
 		<!-- Content -->
 		<div class="flex-1 overflow-y-auto min-h-0">
 			{#if selectedFile !== null}
 				<FilePreview
 					bind:this={filePreviewRef}
+					bind:editing
+					bind:showRaw
+					bind:saving
 					{selectedFile}
 					{fileLoading}
 					{fileImageUrl}
 					{filePdfData}
 					{fileContent}
-					onDownload={() => downloadFile(selectedFile)}
 					onSave={async (content) => {
 						const terminal = selectedTerminal;
 						if (!terminal || !selectedFile) return;
diff --git a/src/lib/components/chat/FileNav/FileNavToolbar.svelte b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
index 8b3b8de24..db5b3732a 100644
--- a/src/lib/components/chat/FileNav/FileNavToolbar.svelte
+++ b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
@@ -127,5 +127,7 @@
 				uploadInput.value = '';
 			}}
 		/>
+	{:else}
+		<slot />
 	{/if}
 </div>
diff --git a/src/lib/components/chat/FileNav/FilePreview.svelte b/src/lib/components/chat/FileNav/FilePreview.svelte
index 5489aa3bc..a28bde13e 100644
--- a/src/lib/components/chat/FileNav/FilePreview.svelte
+++ b/src/lib/components/chat/FileNav/FilePreview.svelte
@@ -5,9 +5,6 @@
 	import DOMPurify from 'dompurify';
 	import Spinner from '../../common/Spinner.svelte';
 	import PDFViewer from '../../common/PDFViewer.svelte';
-	import Tooltip from '../../common/Tooltip.svelte';
-	import Reset from '../../icons/Reset.svelte';
-	import PenAlt from '../../icons/PenAlt.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -17,12 +14,11 @@
 	export let filePdfData: ArrayBuffer | null = null;
 	export let fileContent: string | null = null;
 
-	export let onDownload: () => void = () => {};
 	export let onSave: ((content: string) => Promise<void>) | null = null;
 
-	let editing = false;
+	export let editing = false;
 	let editContent = '';
-	let saving = false;
+	export let saving = false;
 
 	// Reset edit state when switching files
 	$: selectedFile, resetEdit();
@@ -33,13 +29,13 @@
 		saving = false;
 	};
 
-	const startEdit = () => {
+	export const startEdit = () => {
 		editContent = fileContent ?? '';
 		editing = true;
 		showRaw = true;
 	};
 
-	const saveEdit = async () => {
+	export const saveEdit = async () => {
 		if (!onSave) return;
 		saving = true;
 		await onSave(editContent);
@@ -47,7 +43,7 @@
 		editing = false;
 	};
 
-	const cancelEdit = () => {
+	export const cancelEdit = () => {
 		editing = false;
 		editContent = '';
 	};
@@ -109,7 +105,7 @@
 	$: csvHeader = csvRows.length > 0 ? csvRows[0] : [];
 	$: csvBody = csvRows.length > 1 ? csvRows.slice(1) : [];
 
-	let showRaw = false;
+	export let showRaw = false;
 	$: selectedFile, (showRaw = false); // reset to preview mode when switching files
 
 	let pzInstance: PanZoom | null = null;
@@ -122,7 +118,7 @@
 		});
 	};
 
-	const resetImageView = () => {
+	export const resetImageView = () => {
 		if (pzInstance) {
 			pzInstance.moveTo(0, 0);
 			pzInstance.zoomAbs(0, 0, 1);
@@ -146,135 +142,6 @@
 		? 'overflow-hidden'
 		: 'overflow-y-auto'} min-h-0 relative h-full"
 >
-	<!-- Floating action buttons -->
-	<div class="absolute top-2 right-2 z-10 flex gap-1">
-		{#if fileImageUrl !== null}
-			<Tooltip content={$i18n.t('Reset view')}>
-				<button
-					class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
-					on:click={resetImageView}
-					aria-label={$i18n.t('Reset view')}
-				>
-					<Reset className="size-4" />
-				</button>
-			</Tooltip>
-		{/if}
-		{#if (isMarkdown || isCsv) && fileContent !== null}
-			<Tooltip content={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}>
-				<button
-					class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
-					on:click={() => {
-						if (editing) cancelEdit();
-						showRaw = !showRaw;
-					}}
-					aria-label={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}
-				>
-					{#if showRaw}
-						<!-- Eye icon: switch to preview -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="1.5"
-							class="size-4"
-						>
-							<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>
-					{:else}
-						<!-- Code icon: switch to raw -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="1.5"
-							class="size-4"
-						>
-							<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>
-					{/if}
-				</button>
-			</Tooltip>
-		{/if}
-		{#if isTextFile && onSave}
-			{#if editing}
-				<Tooltip content={$i18n.t('Cancel')}>
-					<button
-						class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
-						on:click={cancelEdit}
-						aria-label={$i18n.t('Cancel')}
-					>
-						<!-- X icon -->
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
-							<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>
-					</button>
-				</Tooltip>
-				<Tooltip content={$i18n.t('Save')}>
-					<button
-						class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
-						on:click={saveEdit}
-						disabled={saving}
-						aria-label={$i18n.t('Save')}
-					>
-						{#if saving}
-							<Spinner className="size-4" />
-						{:else}
-							<!-- Check icon -->
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
-								<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>
-						{/if}
-					</button>
-				</Tooltip>
-			{:else}
-				<Tooltip content={$i18n.t('Edit')}>
-					<button
-						class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
-						on:click={startEdit}
-						aria-label={$i18n.t('Edit')}
-					>
-						<PenAlt className="size-4" />
-					</button>
-				</Tooltip>
-			{/if}
-		{/if}
-		<button
-			class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
-			on:click={onDownload}
-			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-4"
-			>
-				<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>
-		</button>
-	</div>
-
 	<!-- File preview -->
 	{#if fileLoading}
 		<div class="flex items-center justify-center h-full"><Spinner className="size-4" /></div>