feat: show and auto-refresh Files panel for pyodide code executions

Author: Algorithm5838

src/lib/components/chat/ChatControls.svelte

@@ -20,7 +20,8 @@
 		settings,
 		showFileNavPath,
 		selectedTerminalId,
-		user
+		user,
+		pyodideWorker
 	} from '$lib/stores';
 
 	import { uploadFile } from '$lib/apis/files';
@@ -73,7 +74,8 @@
 	$: showControlsTab = $user?.role === 'admin' || ($user?.permissions?.chat?.controls ?? true);
 	$: showFilesTab =
 		!!$selectedTerminalId ||
-		(codeInterpreterEnabled && $config?.code?.interpreter_engine !== 'jupyter');
+		(codeInterpreterEnabled && $config?.code?.interpreter_engine !== 'jupyter') ||
+		!!$pyodideWorker;
 	$: showOverviewTab = hasMessages;
 
 	// Tab fallback: if active tab becomes hidden, switch to next available
@@ -361,7 +363,7 @@
 								/>
 							{:else if activeTab === 'files' && $selectedTerminalId}
 								<FileNav onAttach={handleTerminalAttach} />
-							{:else if activeTab === 'files' && codeInterpreterEnabled}
+							{:else if activeTab === 'files' && (codeInterpreterEnabled || !!$pyodideWorker)}
 								<PyodideFileNav />
 							{:else}
 								<Controls embed={true} {models} bind:chatFiles bind:params />
@@ -512,7 +514,7 @@
 									/>
 								{:else if activeTab === 'files' && $selectedTerminalId}
 									<FileNav onAttach={handleTerminalAttach} overlay={dragged} />
-								{:else if activeTab === 'files' && codeInterpreterEnabled}
+								{:else if activeTab === 'files' && (codeInterpreterEnabled || !!$pyodideWorker)}
 									<PyodideFileNav overlay={dragged} />
 								{:else}
 									<Controls embed={true} {models} bind:chatFiles bind:params />

src/lib/components/chat/PyodideFileNav.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 	import { getContext, onMount, tick } from 'svelte';
-	import { pyodideWorker } from '$lib/stores';
+	import { pyodideWorker, pyodideExecutionCount } from '$lib/stores';
 	import PyodideWorkerConstructor from '$lib/workers/pyodide.worker?worker';
 	import type { FileEntry } from '$lib/apis/terminal';
 
@@ -45,6 +45,12 @@
 	let newFileInput: HTMLInputElement;
 
 	let _reqId = 0;
+	let _mounted = false;
+
+	// Auto-refresh the file listing after each code execution
+	$: if (_mounted && $pyodideExecutionCount > 0 && !selectedFile) {
+		loadDir(currentPath);
+	}
 
 	const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'ico', 'avif']);
 	const isImage = (path: string) => IMAGE_EXTS.has(path.split('.').pop()?.toLowerCase() ?? '');
@@ -285,6 +291,7 @@
 	onMount(() => {
 		ensureWorker();
 		loadDir(currentPath);
+		_mounted = true;
 	});
 </script>
 

src/lib/stores/index.ts

@@ -74,6 +74,7 @@ export const terminalServers = writable([]);
 
 // Persistent Pyodide worker for code interpreter FS
 export const pyodideWorker: Writable<Worker | null> = writable(null);
+export const pyodideExecutionCount: Writable<number> = writable(0);
 
 export const banners: Writable<Banner[]> = writable([]);
 

src/lib/workers/pyodide.worker.ts

@@ -189,6 +189,13 @@ async function executeCode(
 		persistFS();
 	}
 
+	// Ensure working directory is /mnt/uploads so relative file writes appear in the panel
+	try {
+		await self.pyodide.runPythonAsync("import os; os.chdir('/mnt/uploads')");
+	} catch (e) {
+		console.warn('[pyodide] chdir to /mnt/uploads failed:', e);
+	}
+
 	try {
 		// check if matplotlib is imported in the code
 		if (code.includes('matplotlib')) {

src/routes/+layout.svelte

@@ -35,7 +35,8 @@
 		showControls,
 		showFileNavPath,
 		showFileNavDir,
-		pyodideWorker
+		pyodideWorker,
+		pyodideExecutionCount
 	} from '$lib/stores';
 	import { getFileContentById } from '$lib/apis/files';
 	import { goto } from '$app/navigation';
@@ -476,7 +477,10 @@
 		} else if (data?.session_id === $socket.id) {
 			if (type === 'execute:python') {
 				console.log('execute:python', data);
-				executePythonAsWorker(data.id, data.code, cb, data.files || []);
+				executePythonAsWorker(data.id, data.code, (result) => {
+					cb(result);
+					pyodideExecutionCount.update((n) => n + 1);
+				}, data.files || []);
 			} else if (type === 'execute:tool') {
 				console.log('execute:tool', data);
 				executeTool(data, cb);