enh: code interpreter pyodide fs

src/lib/components/admin/Settings/CodeExecution.svelte

@@ -67,7 +67,7 @@
 								>
 									<option disabled selected value="">{$i18n.t('Select a engine')}</option>
 									{#each engines as engine}
-										<option value={engine}>{engine}</option>
+										<option value={engine}>{engine}{engine === 'jupyter' ? ' (Legacy)' : ''}</option>
 									{/each}
 								</select>
 							</div>
@@ -193,7 +193,7 @@
 									>
 										<option disabled selected value="">{$i18n.t('Select a engine')}</option>
 										{#each engines as engine}
-											<option value={engine}>{engine}</option>
+											<option value={engine}>{engine}{engine === 'jupyter' ? ' (Legacy)' : ''}</option>
 										{/each}
 									</select>
 								</div>

src/lib/components/chat/Chat.svelte

@@ -148,6 +148,8 @@
 	let webSearchEnabled = false;
 	let codeInterpreterEnabled = false;
 
+
+
 	let showCommands = false;
 
 	let generating = false;
@@ -2924,6 +2926,7 @@
 					{stopResponse}
 					{showMessage}
 					{eventTarget}
+					{codeInterpreterEnabled}
 				/>
 			</PaneGroup>
 		</div>

src/lib/components/chat/ChatControls.svelte

@@ -10,6 +10,7 @@
 
 	import { onDestroy, onMount, tick, getContext } from 'svelte';
 	import {
+		config,
 		terminalServers,
 		mobile,
 		showControls,
@@ -31,6 +32,7 @@
 	import Artifacts from './Artifacts.svelte';
 	import Embeds from './ChatControls/Embeds.svelte';
 	import FileNav from './FileNav.svelte';
+	import PyodideFileNav from './PyodideFileNav.svelte';
 	import Overview from './Overview.svelte';
 
 	const i18n = getContext('i18n');
@@ -50,6 +52,8 @@
 	export let files;
 	export let modelId;
 
+	export let codeInterpreterEnabled = false;
+
 	export let pane: Pane | null = null;
 
 	let largeScreen = false;
@@ -67,7 +71,7 @@
 	$: hasMessages = history?.messages && Object.keys(history.messages).length > 0;
 
 	$: showControlsTab = $user?.role === 'admin' || ($user?.permissions?.chat?.controls ?? true);
-	$: showFilesTab = !!$selectedTerminalId;
+	$: showFilesTab = !!$selectedTerminalId || (codeInterpreterEnabled && $config?.code?.interpreter_engine !== 'jupyter');
 	$: showOverviewTab = hasMessages;
 
 	// Tab fallback: if active tab becomes hidden, switch to next available
@@ -355,6 +359,8 @@
 								/>
 							{:else if activeTab === 'files' && $selectedTerminalId}
 								<FileNav onAttach={handleTerminalAttach} />
+							{:else if activeTab === 'files' && codeInterpreterEnabled}
+								<PyodideFileNav />
 							{:else}
 								<Controls embed={true} {models} bind:chatFiles bind:params />
 							{/if}
@@ -504,6 +510,8 @@
 									/>
 								{:else if activeTab === 'files' && $selectedTerminalId}
 									<FileNav onAttach={handleTerminalAttach} overlay={dragged} />
+								{:else if activeTab === 'files' && codeInterpreterEnabled}
+									<PyodideFileNav overlay={dragged} />
 								{:else}
 									<Controls embed={true} {models} bind:chatFiles bind:params />
 								{/if}

src/lib/components/chat/FileNav/FileEntryRow.svelte

@@ -12,8 +12,8 @@
 
 	export let entry: FileEntry;
 	export let currentPath: string;
-	export let terminalUrl: string;
-	export let terminalKey: string;
+	export let terminalUrl: string = '';
+	export let terminalKey: string = '';
 
 	export let onOpen: (entry: FileEntry) => void = () => {};
 	export let onDownload: (path: string) => void = () => {};

src/lib/components/chat/MessageInput.svelte

@@ -508,11 +508,17 @@
 
 	let showCodeInterpreterButton = false;
 	$: showCodeInterpreterButton =
+		!$selectedTerminalId &&
 		(atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length ===
 			codeInterpreterCapableModels.length &&
 		$config?.features?.enable_code_interpreter &&
 		($_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter);
 
+	// Disable code interpreter when terminal is active (mutually exclusive)
+	$: if ($selectedTerminalId && codeInterpreterEnabled) {
+		codeInterpreterEnabled = false;
+	}
+
 	const scrollToBottom = () => {
 		const element = document.getElementById('messages-container');
 		element.scrollTo({

src/lib/components/chat/PyodideFileNav.svelte

@@ -0,0 +1,367 @@
+<script context="module">
+	let savedPyodidePath = '/mnt/uploads';
+</script>
+
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import { pyodideWorker } from '$lib/stores';
+	import PyodideWorkerConstructor from '$lib/workers/pyodide.worker?worker';
+	import type { FileEntry } from '$lib/apis/terminal';
+
+	import FileNavToolbar from './FileNav/FileNavToolbar.svelte';
+	import FileEntryRow from './FileNav/FileEntryRow.svelte';
+	import FilePreview from './FileNav/FilePreview.svelte';
+	import ConfirmDialog from '../common/ConfirmDialog.svelte';
+	import Spinner from '../common/Spinner.svelte';
+	import Folder from '../icons/Folder.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let overlay = false;
+
+	// ── State ─────────────────────────────────────────────────────────────
+	let currentPath = savedPyodidePath;
+	let entries: FileEntry[] = [];
+	let loading = false;
+	let error: string | null = null;
+
+	let selectedFile: string | null = null;
+	let fileLoading = false;
+	let fileContent: string | null = null;
+	let fileImageUrl: string | null = null;
+
+	let isDragOver = false;
+	let showDeleteConfirm = false;
+	let deletePath = '';
+	let deleteName = '';
+
+	let _reqId = 0;
+
+	const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'ico', 'avif']);
+	const isImage = (path: string) => IMAGE_EXTS.has(path.split('.').pop()?.toLowerCase() ?? '');
+
+	// ── Worker management ─────────────────────────────────────────────────
+
+	function ensureWorker(): Worker {
+		let worker = $pyodideWorker;
+		if (!worker) {
+			worker = new PyodideWorkerConstructor();
+			pyodideWorker.set(worker);
+		}
+		return worker;
+	}
+
+	function sendWorkerMessage(msg: any): Promise<any> {
+		const worker = ensureWorker();
+		const id = `fs-${++_reqId}`;
+		return new Promise((resolve, reject) => {
+			const timeout = setTimeout(() => {
+				worker.removeEventListener('message', handler);
+				reject('Timeout');
+			}, 30000);
+
+			function handler(event: MessageEvent) {
+				if (event.data?.id !== id) return;
+				clearTimeout(timeout);
+				worker.removeEventListener('message', handler);
+				resolve(event.data);
+			}
+
+			worker.addEventListener('message', handler);
+			worker.postMessage({ ...msg, id });
+		});
+	}
+
+	// ── Breadcrumbs ───────────────────────────────────────────────────────
+
+	const buildBreadcrumbs = (path: string) => {
+		const parts = path.split('/').filter(Boolean);
+		return parts.reduce(
+			(acc, part) => {
+				const prev = acc[acc.length - 1];
+				acc.push({ label: part, path: `${prev.path}${part}/` });
+				return acc;
+			},
+			[{ label: '/', path: '/' }]
+		);
+	};
+
+	$: breadcrumbs = buildBreadcrumbs(currentPath);
+
+	// ── Operations ────────────────────────────────────────────────────────
+
+	const loadDir = async (path: string) => {
+		loading = true;
+		error = null;
+		selectedFile = null;
+		clearPreview();
+		currentPath = path.endsWith('/') ? path : path + '/';
+		savedPyodidePath = currentPath;
+
+		try {
+			const res = await sendWorkerMessage({ type: 'fs:list', path: currentPath.replace(/\/$/, '') || '/' });
+			entries = (res.entries || []).sort((a: FileEntry, b: FileEntry) => {
+				if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+				return a.name.localeCompare(b.name);
+			});
+		} catch {
+			error = 'Failed to list directory';
+			entries = [];
+		}
+		loading = false;
+	};
+
+	const openEntry = async (entry: FileEntry) => {
+		if (entry.type === 'directory') {
+			await loadDir(`${currentPath}${entry.name}/`);
+			return;
+		}
+
+		const filePath = `${currentPath}${entry.name}`;
+		selectedFile = filePath;
+		fileLoading = true;
+		clearPreview();
+
+		try {
+			const res = await sendWorkerMessage({ type: 'fs:read', path: filePath });
+			if (res.error) {
+				fileContent = `Error: ${res.error}`;
+			} else if (isImage(filePath)) {
+				const blob = new Blob([res.data]);
+				fileImageUrl = URL.createObjectURL(blob);
+			} else {
+				const decoder = new TextDecoder('utf-8', { fatal: true });
+				try {
+					fileContent = decoder.decode(res.data);
+				} catch {
+					fileContent = `[Binary file: ${entry.size ?? 0} bytes]`;
+				}
+			}
+		} catch {
+			fileContent = 'Failed to read file';
+		}
+		fileLoading = false;
+	};
+
+	const clearPreview = () => {
+		fileContent = null;
+		if (fileImageUrl) {
+			URL.revokeObjectURL(fileImageUrl);
+			fileImageUrl = null;
+		}
+	};
+
+	const downloadFile = async (path: string) => {
+		try {
+			const res = await sendWorkerMessage({ type: 'fs:read', path });
+			if (res.data) {
+				const blob = new Blob([res.data]);
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement('a');
+				a.href = url;
+				a.download = path.split('/').pop() ?? 'file';
+				a.click();
+				URL.revokeObjectURL(url);
+			}
+		} catch (e) {
+			console.error('Download failed:', e);
+		}
+	};
+
+	const confirmDelete = (path: string, name: string) => {
+		deletePath = path;
+		deleteName = name;
+		showDeleteConfirm = true;
+	};
+
+	const doDelete = async () => {
+		try {
+			await sendWorkerMessage({ type: 'fs:delete', path: deletePath });
+			if (selectedFile === deletePath) {
+				selectedFile = null;
+				clearPreview();
+			}
+			await loadDir(currentPath);
+		} catch (e) {
+			console.error('Delete failed:', e);
+		}
+	};
+
+	const createFolder = async () => {
+		const name = prompt($i18n.t('Folder name'));
+		if (!name) return;
+		const folderPath = `${currentPath}${name}`.replace(/\/$/, '');
+		try {
+			await sendWorkerMessage({ type: 'fs:mkdir', path: folderPath });
+			await loadDir(currentPath);
+		} catch (e) {
+			console.error('Failed to create folder:', e);
+		}
+	};
+
+	const uploadFiles = async (fileList: File[]) => {
+		const payloads: { name: string; data: ArrayBuffer }[] = [];
+		for (const file of fileList) {
+			payloads.push({ name: file.name, data: await file.arrayBuffer() });
+		}
+		try {
+			await sendWorkerMessage({ type: 'fs:upload', files: payloads, dir: currentPath.replace(/\/$/, '') || '/' });
+		} catch (e) {
+			console.error('Upload failed:', e);
+		}
+		await loadDir(currentPath);
+	};
+
+	// ── Drag and drop ─────────────────────────────────────────────────────
+
+	const handleDragOver = (e: DragEvent) => {
+		if (selectedFile) return;
+		if (!e.dataTransfer?.types.includes('Files')) return;
+		e.preventDefault();
+		e.stopPropagation();
+		isDragOver = true;
+	};
+
+	const handleDrop = async (e: DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		isDragOver = false;
+		if (selectedFile) return;
+		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+		if (droppedFiles.length) await uploadFiles(droppedFiles);
+	};
+
+	// ── Lifecycle ─────────────────────────────────────────────────────────
+
+	onMount(() => {
+		ensureWorker();
+		loadDir(currentPath);
+	});
+</script>
+
+<ConfirmDialog
+	bind:show={showDeleteConfirm}
+	title={$i18n.t('Delete {{name}}', { name: deleteName })}
+	message={$i18n.t('Are you sure you want to delete this?')}
+	on:confirm={doDelete}
+/>
+
+<div
+	class="flex flex-col h-full min-h-0 min-w-0 relative"
+	on:dragover={handleDragOver}
+	on:dragleave={() => (isDragOver = false)}
+	on:drop={handleDrop}
+	role="region"
+	aria-label={$i18n.t('Pyodide file browser')}
+>
+	{#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"
+		>
+			<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">{$i18n.t('Drop files here')}</span>
+		</div>
+	{/if}
+
+	{#if overlay}
+		<div class="absolute inset-0 z-10 pointer-events-none" />
+	{/if}
+
+	<!-- Toolbar (shared with FileNav) -->
+	<FileNavToolbar
+		{breadcrumbs}
+		{selectedFile}
+		{loading}
+		onNavigate={(path) => loadDir(path)}
+		onRefresh={() => {
+			if (selectedFile) {
+				const name = selectedFile.split('/').pop() ?? '';
+				openEntry({ name, type: 'file', size: 0 });
+			} else {
+				loadDir(currentPath);
+			}
+		}}
+		onNewFolder={createFolder}
+		onNewFile={() => {}}
+		onUploadFiles={uploadFiles}
+		onMove={() => {}}
+	>
+		<!-- File action buttons when a file is selected (slot content) -->
+		<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={() => selectedFile && downloadFile(selectedFile)}
+			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>
+		</button>
+		<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-red-600 dark:hover:text-red-400"
+			on:click={() => {
+				if (selectedFile) {
+					confirmDelete(selectedFile, selectedFile.split('/').pop() ?? '');
+				}
+			}}
+			aria-label={$i18n.t('Delete')}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
+				<path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022 1.005 11.36A2.75 2.75 0 0 0 7.764 20h4.472a2.75 2.75 0 0 0 2.745-2.689l1.005-11.36.149.022a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 1 .7.8l-.3 6a.75.75 0 0 1-1.5-.075l.3-6a.75.75 0 0 1 .8-.725ZM12.2 8.52a.75.75 0 0 0-1.5.075l-.3 6a.75.75 0 0 0 1.5-.075l.3-6Z" clip-rule="evenodd" />
+			</svg>
+		</button>
+	</FileNavToolbar>
+
+	<!-- Content area -->
+	<div class="flex-1 min-h-0 flex flex-col">
+		{#if selectedFile}
+			<FilePreview
+				{selectedFile}
+				{fileLoading}
+				{fileImageUrl}
+				{fileContent}
+				{overlay}
+			/>
+		{:else if loading}
+			<div class="flex items-center justify-center flex-1 p-6">
+				<Spinner className="size-4" />
+			</div>
+		{:else if error}
+			<div class="flex items-center justify-center flex-1 p-6">
+				<div class="text-xs text-red-500">{error}</div>
+			</div>
+		{:else if entries.length === 0}
+			<div class="flex flex-col items-center justify-center flex-1 p-6 text-center gap-2">
+				<Folder className="size-5 text-gray-300 dark:text-gray-600" />
+				<div class="text-xs text-gray-400 dark:text-gray-500">
+					{$i18n.t('No files yet. Upload files or run Python code to create them.')}
+				</div>
+			</div>
+		{:else}
+			<ul class="overflow-y-auto flex-1 min-h-0">
+				{#each entries as entry (entry.name)}
+					<FileEntryRow
+						{entry}
+						{currentPath}
+						onOpen={openEntry}
+						onDownload={downloadFile}
+						onDelete={confirmDelete}
+					/>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</div>