From 911b0656e8e2466bf8ec31471521bf770dbb1a11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 26 Sep 2025 18:22:20 +0100
Subject: [PATCH 01/41] .

---
 .../website/public/php-playground.html        | 454 ++++++++++++++++++
 1 file changed, 454 insertions(+)

diff --git a/packages/playground/website/public/php-playground.html b/packages/playground/website/public/php-playground.html
index e8918d3ce1..b0b96eccbe 100644
--- a/packages/playground/website/public/php-playground.html
+++ b/packages/playground/website/public/php-playground.html
@@ -7,6 +7,10 @@
 			content="width=device-width, initial-scale=1.0, user-scalable=yes"
 		/>
 		<title>WordPress PHP Playground</title>
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css"
+		/>
 		<style>
 			html,
 			body {
@@ -155,6 +159,22 @@
 				border: 0;
 			}
 
+			#terminalPane {
+				height: 260px;
+				background: #111;
+				border-top: 1px solid #333;
+				color: #fff;
+				font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
+					Consolas, 'Courier New', monospace;
+				padding: 8px;
+				box-sizing: border-box;
+			}
+
+			#terminal {
+				width: 100%;
+				height: calc(100% - 16px);
+			}
+
 			/* Modal styles */
 			.modal {
 				display: none;
@@ -315,6 +335,9 @@
 				#editor .cm-editor {
 					font-size: 13px;
 				}
+				#terminalPane {
+					height: 220px;
+				}
 			}
 
 			/* Small mobile adjustments */
@@ -343,6 +366,9 @@
 					font-size: 12px;
 					line-height: 1.3;
 				}
+				#terminalPane {
+					height: 200px;
+				}
 			}
 
 			/* Modal responsive styles */
@@ -439,6 +465,9 @@ <h1>WordPress PHP Playground</h1>
 				<iframe id="preview" title="WordPress Playground"></iframe>
 			</div>
 		</div>
+		<div id="terminalPane">
+			<div id="terminal"></div>
+		</div>
 
 		<!-- Help Modal -->
 		<div id="helpModal" class="modal">
@@ -708,6 +737,8 @@ <h2>💡 Tips</h2>
 				startPlaygroundWeb,
 				SupportedPHPVersionsList,
 			} from 'https://playground.wordpress.net/client/index.js';
+			import { Terminal } from 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/+esm';
+			import { FitAddon } from 'https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/+esm';
 
 			const editorEl = document.getElementById('editor');
 			const phpCompartment = new Compartment();
@@ -834,6 +865,428 @@ <h2>💡 Tips</h2>
 			let bootPromise = Promise.resolve();
 			let runCounter = 0;
 
+			const terminalContainer = document.getElementById('terminal');
+			const term = new Terminal({
+				convertEol: true,
+				fontSize: 14,
+				theme: {
+					background: '#111111',
+					foreground: '#f1f5f9',
+				},
+				cursorBlink: true,
+			});
+			const fitAddon = new FitAddon();
+			term.loadAddon(fitAddon);
+			term.open(terminalContainer);
+			fitAddon.fit();
+
+			function debounce(fn, delay) {
+				let timeoutId = null;
+				return (...args) => {
+					if (timeoutId) {
+						clearTimeout(timeoutId);
+					}
+					timeoutId = setTimeout(() => {
+						fn(...args);
+					}, delay);
+				};
+			}
+
+			window.addEventListener(
+				'resize',
+				debounce(() => fitAddon.fit(), 150)
+			);
+
+			const commandHistory = [];
+			let historyIndex = -1;
+			let currentLine = '';
+			let isRunningCommand = false;
+			let currentProcess = null;
+			const WP_CLI_PATH = '/tmp/wp-cli.phar';
+			const COMPOSER_PATH = '/tmp/composer.phar';
+
+			term.writeln(
+				'WordPress Playground CLI ready. Type `help` to see available commands.'
+			);
+			prompt(false);
+
+			function prompt(newLine = true) {
+				const prefix = newLine ? '\r\n$ ' : '$ ';
+				term.write(prefix);
+			}
+
+			function refreshInputLine() {
+				term.write(`\r\x1b[2K$ ${currentLine}`);
+			}
+
+			function writeStdout(text) {
+				if (!text) {
+					return;
+				}
+				const normalised = text.replace(/\r?\n/g, '\r\n');
+				term.write(normalised);
+			}
+
+			function writeStderr(text) {
+				if (!text) {
+					return;
+				}
+				const normalised = text.replace(/\r?\n/g, '\r\n');
+				term.write(`\u001b[31m${normalised}\u001b[0m`);
+			}
+
+			function splitShellCommand(command) {
+				const MODE_NORMAL = 0;
+				const MODE_IN_QUOTE = 1;
+				let mode = MODE_NORMAL;
+				let quote = '';
+				const parts = [];
+				let currentPart = '';
+				for (let i = 0; i < command.length; i++) {
+					const char = command[i];
+					if (mode === MODE_NORMAL) {
+						if (char === '"' || char === "'") {
+							mode = MODE_IN_QUOTE;
+							quote = char;
+						} else if (/\s/.test(char)) {
+							if (currentPart) {
+								parts.push(currentPart);
+								currentPart = '';
+							}
+						} else {
+							currentPart += char;
+						}
+					} else if (mode === MODE_IN_QUOTE) {
+						if (char === '\\') {
+							i += 1;
+							currentPart += command[i] ?? '';
+						} else if (char === quote) {
+							mode = MODE_NORMAL;
+							quote = '';
+						} else {
+							currentPart += char;
+						}
+					}
+				}
+				if (currentPart) {
+					parts.push(currentPart);
+				}
+				return parts;
+			}
+
+			async function ensureWpCliBinary() {
+				await bootPromise;
+				if (!client) {
+					throw new Error('Playground client is not ready yet.');
+				}
+				if (await client.fileExists(WP_CLI_PATH)) {
+					return;
+				}
+				term.writeln('\r\nDownloading WP-CLI...');
+				const response = await fetch(
+					'https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar'
+				);
+				if (!response.ok) {
+					throw new Error('Failed to download WP-CLI');
+				}
+				const buffer = await response.arrayBuffer();
+				await client.writeFile(WP_CLI_PATH, new Uint8Array(buffer));
+				term.writeln('Download complete.');
+			}
+
+			async function ensureComposerBinary() {
+				await bootPromise;
+				if (!client) {
+					throw new Error('Playground client is not ready yet.');
+				}
+				if (await client.fileExists(COMPOSER_PATH)) {
+					return;
+				}
+				term.writeln('\r\nDownloading Composer...');
+				const response = await fetch(
+					'https://wordpress-playground-cors-proxy.net/?https://getcomposer.org/composer-stable.phar'
+				);
+				if (!response.ok) {
+					throw new Error('Failed to download Composer');
+				}
+				const buffer = await response.arrayBuffer();
+				await client.writeFile(COMPOSER_PATH, new Uint8Array(buffer));
+				term.writeln('Download complete.');
+			}
+
+			async function runCli(argv, options = {}) {
+				await bootPromise;
+				if (!client) {
+					throw new Error('Playground client is not ready yet.');
+				}
+				const requestHandler = client.__internal_getRequestHandler?.();
+				if (!requestHandler?.processManager) {
+					throw new Error('Unable to access PHP runtime.');
+				}
+				const { php, reap } =
+					await requestHandler.processManager.acquirePHPInstance();
+				let response;
+				try {
+					response = await php.cli(argv, options);
+				} catch (error) {
+					reap();
+					throw error;
+				}
+				response.exitCode.finally(() => {
+					reap();
+				});
+
+				const process = {
+					response,
+					php,
+					aborted: false,
+					async terminate() {
+						if (process.aborted) {
+							return;
+						}
+						process.aborted = true;
+						try {
+							await response.stdout.cancel();
+						} catch {}
+						try {
+							await response.stderr.cancel();
+						} catch {}
+						try {
+							php.exit(130);
+						} catch {}
+					},
+				};
+				const callbackSink = (callback) =>
+					new WritableStream({
+						write(chunk) {
+							if (process.aborted) {
+								return;
+							}
+							if (chunk) {
+								callback(chunk);
+							}
+						},
+					});
+
+				currentProcess = process;
+
+				const streamStdout = response.stdout
+					.pipeThrough(new TextDecoderStream())
+					.pipeTo(callbackSink(writeStdout))
+					.catch((error) => {
+						if (!process.aborted) {
+							throw error;
+						}
+					});
+
+				const streamStderr = response.stderr
+					.pipeThrough(new TextDecoderStream())
+					.pipeTo(callbackSink(writeStderr))
+					.catch((error) => {
+						if (!process.aborted) {
+							throw error;
+						}
+					});
+
+				const exitCodePromise = response.exitCode.catch((error) => {
+					if (!process.aborted) {
+						throw error;
+					}
+					return 130;
+				});
+
+				const [, , exitCode] = await Promise.all([
+					streamStdout,
+					streamStderr,
+					exitCodePromise,
+				]);
+
+				const wasAborted = process.aborted;
+				currentProcess = null;
+				if (wasAborted) {
+					term.writeln('\r\nProcess interrupted.');
+				}
+				return { exitCode, aborted: wasAborted };
+			}
+
+			async function runTerminalCommand(rawInput) {
+				const trimmed = rawInput.trim();
+				if (!trimmed) {
+					isRunningCommand = false;
+					prompt();
+					return;
+				}
+				const parts = splitShellCommand(trimmed);
+				if (parts.length === 0) {
+					isRunningCommand = false;
+					prompt();
+					return;
+				}
+				const [command, ...args] = parts;
+				try {
+					switch (command) {
+						case 'help': {
+							term.writeln(
+								'\r\nAvailable commands:\r\n  help        Show this message\r\n  php <...>  Run PHP CLI arguments\r\n  wp <...>   Run WP-CLI (auto-downloads if needed)\r\n  composer <...>  Run Composer (auto-downloads if needed)'
+							);
+							break;
+						}
+						case 'php': {
+							if (!args.length) {
+								term.writeln('\r\nUsage: php <arguments>');
+								break;
+							}
+							const result = await runCli(['php', ...args]);
+							if (!result.aborted && result.exitCode !== 0) {
+								term.writeln(
+									`\r\nProcess exited with code ${result.exitCode}`
+								);
+							}
+							break;
+						}
+						case 'wp': {
+							await ensureWpCliBinary();
+							const result = await runCli([
+								'php',
+								WP_CLI_PATH,
+								'--path=/wordpress',
+								...args,
+							]);
+							if (!result.aborted && result.exitCode !== 0) {
+								term.writeln(
+									`\r\nProcess exited with code ${result.exitCode}`
+								);
+							}
+							break;
+						}
+						case 'composer': {
+							await ensureComposerBinary();
+							const result = await runCli([
+								'php',
+								COMPOSER_PATH,
+								...args,
+							]);
+							if (!result.aborted && result.exitCode !== 0) {
+								term.writeln(
+									`\r\nProcess exited with code ${result.exitCode}`
+								);
+							}
+							break;
+						}
+						default:
+							term.writeln(`\r\n${command}: command not found`);
+					}
+				} catch (error) {
+					const message = error?.message || String(error);
+					term.writeln(`\r\nError: ${message}`);
+				} finally {
+					isRunningCommand = false;
+					if (!currentProcess) {
+						prompt();
+					}
+				}
+			}
+
+			async function abortActiveProcess() {
+				if (!currentProcess) {
+					isRunningCommand = false;
+					prompt();
+					return;
+				}
+				try {
+					await currentProcess.terminate();
+				} finally {
+					isRunningCommand = false;
+				}
+			}
+
+			term.onData((data) => {
+				if (data === '\u0003') {
+					term.write('^C');
+					void abortActiveProcess();
+					currentLine = '';
+					return;
+				}
+				if (isRunningCommand) {
+					return;
+				}
+				switch (data) {
+					case '\r': {
+						term.write('\r\n');
+						const submitted = currentLine;
+						if (submitted.trim()) {
+							commandHistory.unshift(submitted);
+						}
+						historyIndex = -1;
+						currentLine = '';
+						isRunningCommand = true;
+						void runTerminalCommand(submitted);
+						break;
+					}
+					case '\u007F': {
+						if (currentLine.length > 0) {
+							currentLine = currentLine.slice(0, -1);
+							term.write('\b \b');
+						}
+						break;
+					}
+					default: {
+						if ((data >= ' ' && data <= '~') || data >= '\u00a0') {
+							currentLine += data;
+							term.write(data);
+						}
+						break;
+					}
+				}
+			});
+
+			term.attachCustomKeyEventHandler((event) => {
+				if (event.type !== 'keydown') {
+					return true;
+				}
+				if ((event.metaKey || event.ctrlKey) && event.code === 'KeyV') {
+					navigator.clipboard
+						.readText()
+						.then((text) => {
+							if (!isRunningCommand && text) {
+								currentLine += text;
+								refreshInputLine();
+							}
+						})
+						.catch(() => {});
+					return false;
+				}
+				if (event.metaKey || event.ctrlKey) {
+					return true;
+				}
+				if (event.code === 'ArrowUp') {
+					event.preventDefault();
+					if (commandHistory.length === 0) {
+						return false;
+					}
+					const nextIndex = historyIndex + 1;
+					if (nextIndex < commandHistory.length) {
+						historyIndex = nextIndex;
+						currentLine = commandHistory[historyIndex];
+						refreshInputLine();
+					}
+					return false;
+				}
+				if (event.code === 'ArrowDown') {
+					event.preventDefault();
+					if (historyIndex > 0) {
+						historyIndex -= 1;
+						currentLine = commandHistory[historyIndex];
+					} else {
+						historyIndex = -1;
+						currentLine = '';
+					}
+					refreshInputLine();
+					return false;
+				}
+				return true;
+			});
+
 			// Detect platform for keyboard shortcut display
 			const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 			const shortcutText = isMac ? 'Cmd+S' : 'Ctrl+S';
@@ -858,6 +1311,7 @@ <h2>💡 Tips</h2>
 			async function bootPlayground(phpVersion, wpVersion) {
 				// Point the iframe at the appropriate PHP and WordPress versions using the Query API
 				previewIframe.src = `https://playground.wordpress.net/remote.html`;
+				// previewIframe.src = `http://127.0.0.1:5400/remote.html`;
 				client = await startPlaygroundWeb({
 					iframe: previewIframe,
 					remoteUrl: previewIframe.src,

From 9e1336ca47dfd50946a88cddd36a200b98c32e3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 26 Sep 2025 22:36:45 +0100
Subject: [PATCH 02/41] Basic terminal interaction!

---
 .../php-wasm/universal/src/lib/php-worker.ts  |  16 ++-
 packages/php-wasm/universal/src/lib/php.ts    |   3 +-
 .../website/public/php-playground.html        | 108 +++++++++---------
 3 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/packages/php-wasm/universal/src/lib/php-worker.ts b/packages/php-wasm/universal/src/lib/php-worker.ts
index 2744d26949..d209746cf0 100644
--- a/packages/php-wasm/universal/src/lib/php-worker.ts
+++ b/packages/php-wasm/universal/src/lib/php-worker.ts
@@ -195,11 +195,23 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 		const { php, reap } = await _private
 			.get(this)!
 			.requestHandler!.processManager.acquirePHPInstance();
+		let response: StreamedPHPResponse;
 		try {
-			return await php.cli(argv, options);
-		} finally {
+			response = await php.cli(argv, options);
+		} catch (error) {
 			reap();
+			throw error;
 		}
+		/**
+		 * Register the reap() callback to run asynchronously once
+		 * the response is finished.
+		 *
+		 * We don't await for response.finished here. It is a
+		 * `StreamedPHPResponse` instance and the caller may want
+		 * to start processing the streamed data immediately.
+		 */
+		response.finished.finally(reap);
+		return response;
 	}
 
 	/** @inheritDoc @php-wasm/universal!/PHP.chdir */
diff --git a/packages/php-wasm/universal/src/lib/php.ts b/packages/php-wasm/universal/src/lib/php.ts
index 2b7e4f0a66..534cc9fff1 100644
--- a/packages/php-wasm/universal/src/lib/php.ts
+++ b/packages/php-wasm/universal/src/lib/php.ts
@@ -616,6 +616,7 @@ export class PHP implements Disposable {
 		const streamedResponsePromise = this.#executeWithErrorHandling(
 			async () => {
 				if (!this.#phpWasmInitCalled) {
+					this.#phpWasmInitCalled = true;
 					await this[__private__dont__use].ccall(
 						'php_wasm_init',
 						null,
@@ -625,7 +626,6 @@ export class PHP implements Disposable {
 							isAsync: true,
 						}
 					);
-					this.#phpWasmInitCalled = true;
 				}
 				if (
 					request.scriptPath &&
@@ -1460,7 +1460,6 @@ export class PHP implements Disposable {
 					[arg]
 				);
 			}
-
 			return this[__private__dont__use].ccall('run_cli', null, [], [], {
 				async: true,
 			});
diff --git a/packages/playground/website/public/php-playground.html b/packages/playground/website/public/php-playground.html
index b0b96eccbe..b77ba4b3d7 100644
--- a/packages/playground/website/public/php-playground.html
+++ b/packages/playground/website/public/php-playground.html
@@ -1014,28 +1014,32 @@ <h2>💡 Tips</h2>
 				term.writeln('Download complete.');
 			}
 
+			function invertPromise() {
+				let resolve, reject;
+				const promise = new Promise((_resolve, _reject) => {
+					resolve = _resolve;
+					reject = _reject;
+				});
+				return {
+					resolve,
+					reject,
+					promise,
+				};
+			}
+
 			async function runCli(argv, options = {}) {
 				await bootPromise;
 				if (!client) {
 					throw new Error('Playground client is not ready yet.');
 				}
-				const requestHandler = client.__internal_getRequestHandler?.();
-				if (!requestHandler?.processManager) {
-					throw new Error('Unable to access PHP runtime.');
-				}
-				const { php, reap } =
-					await requestHandler.processManager.acquirePHPInstance();
-				let response;
-				try {
-					response = await php.cli(argv, options);
-				} catch (error) {
-					reap();
-					throw error;
-				}
-				response.exitCode.finally(() => {
-					reap();
-				});
+				console.log({ argv, options });
+				await client.writeFile(
+					'/tmp/test.php',
+					'<?php echo "hi!"; flush(); sleep(60); echo "\nnewline"; ?>'
+				);
+				const response = await client.cli(argv, options);
 
+				const abortedPromise = invertPromise();
 				const process = {
 					response,
 					php,
@@ -1045,20 +1049,21 @@ <h2>💡 Tips</h2>
 							return;
 						}
 						process.aborted = true;
-						try {
-							await response.stdout.cancel();
-						} catch {}
-						try {
-							await response.stderr.cancel();
-						} catch {}
-						try {
-							php.exit(130);
-						} catch {}
+						abortedPromise.resolve();
+
+						// Ignore cancelation errors and also don't
+						// await these promises. The cancel() calls
+						// go to the remote worker which may be busy
+						// for some more time before it's able to
+						// respond to the cancel() call.
+						response.stdout.cancel().catch(() => {});
+						response.stderr.cancel().catch(() => {});
 					},
 				};
 				const callbackSink = (callback) =>
 					new WritableStream({
 						write(chunk) {
+							console.log({ chunk });
 							if (process.aborted) {
 								return;
 							}
@@ -1070,43 +1075,22 @@ <h2>💡 Tips</h2>
 
 				currentProcess = process;
 
-				const streamStdout = response.stdout
+				response.stdout
 					.pipeThrough(new TextDecoderStream())
-					.pipeTo(callbackSink(writeStdout))
-					.catch((error) => {
-						if (!process.aborted) {
-							throw error;
-						}
-					});
+					.pipeTo(callbackSink(writeStdout));
 
-				const streamStderr = response.stderr
+				response.stderr
 					.pipeThrough(new TextDecoderStream())
-					.pipeTo(callbackSink(writeStderr))
-					.catch((error) => {
-						if (!process.aborted) {
-							throw error;
-						}
-					});
-
-				const exitCodePromise = response.exitCode.catch((error) => {
-					if (!process.aborted) {
-						throw error;
-					}
-					return 130;
-				});
+					.pipeTo(callbackSink(writeStderr));
 
-				const [, , exitCode] = await Promise.all([
-					streamStdout,
-					streamStderr,
-					exitCodePromise,
+				const exitCode = await Promise.race([
+					response.exitCode,
+					abortedPromise.promise.then(() => 130),
 				]);
 
-				const wasAborted = process.aborted;
 				currentProcess = null;
-				if (wasAborted) {
-					term.writeln('\r\nProcess interrupted.');
-				}
-				return { exitCode, aborted: wasAborted };
+
+				return { exitCode, aborted: process.aborted };
 			}
 
 			async function runTerminalCommand(rawInput) {
@@ -1131,6 +1115,14 @@ <h2>💡 Tips</h2>
 							);
 							break;
 						}
+						case 'ls': {
+							(
+								(await client.listFiles(args[0] || '/')) || []
+							).forEach((line) => {
+								term.writeln(line);
+							});
+							break;
+						}
 						case 'php': {
 							if (!args.length) {
 								term.writeln('\r\nUsage: php <arguments>');
@@ -1198,6 +1190,8 @@ <h2>💡 Tips</h2>
 				} finally {
 					isRunningCommand = false;
 				}
+
+				currentProcess = null;
 			}
 
 			term.onData((data) => {
@@ -1310,8 +1304,8 @@ <h2>💡 Tips</h2>
 
 			async function bootPlayground(phpVersion, wpVersion) {
 				// Point the iframe at the appropriate PHP and WordPress versions using the Query API
-				previewIframe.src = `https://playground.wordpress.net/remote.html`;
-				// previewIframe.src = `http://127.0.0.1:5400/remote.html`;
+				// previewIframe.src = `https://playground.wordpress.net/remote.html`;
+				previewIframe.src = `http://127.0.0.1:5400/remote.html`;
 				client = await startPlaygroundWeb({
 					iframe: previewIframe,
 					remoteUrl: previewIframe.src,

From 2a1ea70f1a62f336da794bed4b2c3ba0327c1ccf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 26 Sep 2025 23:30:45 +0100
Subject: [PATCH 03/41] Run subprocesses and report any runtime errors

---
 packages/php-wasm/universal/src/lib/api.ts    | 41 +++++++--
 packages/php-wasm/universal/src/lib/php.ts    | 84 ++++++++++++++++++-
 .../lib/sandboxed-spawn-handler-factory.ts    | 40 ++++++---
 .../website/public/php-playground.html        | 54 ++++++------
 4 files changed, 174 insertions(+), 45 deletions(-)

diff --git a/packages/php-wasm/universal/src/lib/api.ts b/packages/php-wasm/universal/src/lib/api.ts
index 4112c2a544..80744e43ea 100644
--- a/packages/php-wasm/universal/src/lib/api.ts
+++ b/packages/php-wasm/universal/src/lib/api.ts
@@ -374,7 +374,12 @@ function streamToPort(stream: ReadableStream<Uint8Array>): MessagePort {
 			}
 		} catch (e: any) {
 			try {
-				port1.postMessage({ t: 'error', m: e?.message || String(e) });
+				// @TODO: Find a way to transfer the error object, including any stack trace etc.,
+				//        using the error transfer handlers.
+				port1.postMessage({
+					t: 'error',
+					m: e?.message || JSON.stringify(e),
+				});
 			} catch {
 				// Ignore error
 			}
@@ -407,10 +412,24 @@ function portToStream(port: MessagePort): ReadableStream<Uint8Array> {
 						controller.close();
 						cleanup();
 						break;
-					case 'error':
-						controller.error(new Error(data.m || 'Stream error'));
+					case 'error': {
+						let error = '';
+						try {
+							error = JSON.parse(data.m);
+						} catch {
+							// Ignore error
+						}
+						if (!error) {
+							error = data.m;
+						}
+						if (typeof error === 'string') {
+							controller.error(new Error(error));
+						} else {
+							controller.error(error);
+						}
 						cleanup();
 						break;
+					}
 				}
 			};
 			const cleanup = () => {
@@ -475,7 +494,7 @@ function promiseToPort(promise: Promise<any>): MessagePort {
 			try {
 				port1.postMessage({
 					t: 'reject',
-					m: (err as any)?.message || String(err),
+					m: (err as any)?.message || JSON.stringify(err),
 				});
 			} catch {
 				// Ignore error
@@ -504,8 +523,20 @@ function portToPromise(port: MessagePort): Promise<any> {
 				cleanup();
 				resolve(data.v);
 			} else if (data.t === 'reject') {
+				// @TODO: Find a way to transfer the error object, including any stack trace etc.,
+				//        using the error transfer handlers.
 				cleanup();
-				reject(new Error(data.m || ''));
+				let error = '';
+				try {
+					error = JSON.parse(data.m);
+				} catch {
+					// Ignore error
+				}
+				if (typeof error === 'string') {
+					reject(new Error(error));
+				} else {
+					reject(error);
+				}
 			}
 		};
 		const cleanup = () => {
diff --git a/packages/php-wasm/universal/src/lib/php.ts b/packages/php-wasm/universal/src/lib/php.ts
index 534cc9fff1..f884953257 100644
--- a/packages/php-wasm/universal/src/lib/php.ts
+++ b/packages/php-wasm/universal/src/lib/php.ts
@@ -9,6 +9,7 @@ import { getLoadedRuntime } from './load-php-runtime';
 import type { PHPRequestHandler } from './php-request-handler';
 import { PHPResponse, StreamedPHPResponse } from './php-response';
 import type {
+	ChildProcess,
 	MessageListener,
 	PHPEvent,
 	PHPEventListener,
@@ -1437,8 +1438,12 @@ export class PHP implements Disposable {
 	 */
 	async cli(
 		argv: string[],
-		options: { env?: Record<string, string> } = {}
+		options: { env?: Record<string, string>; cwd?: string } = {}
 	): Promise<StreamedPHPResponse> {
+		if (argv[0] !== 'php' && !argv[0].endsWith('/php')) {
+			return this.subProcess(argv, options);
+		}
+
 		if (this.#phpWasmInitCalled) {
 			this.#rotationOptions.needsRotating = true;
 		}
@@ -1473,6 +1478,83 @@ export class PHP implements Disposable {
 			});
 	}
 
+	/**
+	 * Runs an arbitrary CLI command using the spawn handler associated
+	 * with this PHP instance.
+	 *
+	 * @param argv
+	 * @param options
+	 * @returns StreamedPHPResponse.
+	 */
+	private async subProcess(
+		argv: string[],
+		options: { env?: Record<string, string>; cwd?: string } = {}
+	): Promise<StreamedPHPResponse> {
+		const process = this[__private__dont__use].spawnProcess(
+			argv[0],
+			argv.slice(1),
+			{
+				env: options.env,
+				cwd:
+					options.cwd ??
+					this.#rotationOptions?.cwd ??
+					this.documentRoot ??
+					'/',
+			}
+		) as ChildProcess;
+
+		const stderrStream = await createInvertedReadableStream<Uint8Array>();
+		process.on('error', (error) => {
+			stderrStream.controller.error(error);
+		});
+		process.stderr.on('data', (data) => {
+			stderrStream.controller.enqueue(data);
+		});
+
+		const stdoutStream = await createInvertedReadableStream<Uint8Array>();
+		process.stdout.on('data', (data) => {
+			stdoutStream.controller.enqueue(data);
+		});
+
+		process.on('exit', () => {
+			// Delay until next tick to ensure we don't close the streams before
+			// emitting the error event on the stderrStream.
+			setTimeout(() => {
+				/**
+				 * Ignore any close() errors, e.g. "stream already closed". We just
+				 * need to try to call close() and forget about this subprocess.
+				 */
+				try {
+					stderrStream.controller.close();
+				} catch {
+					// Ignore error
+				}
+				try {
+					stdoutStream.controller.close();
+				} catch {
+					// Ignore error
+				}
+			}, 0);
+		});
+
+		return new StreamedPHPResponse(
+			// Headers stream
+			new ReadableStream({
+				start(controller) {
+					controller.close();
+				},
+			}),
+			stdoutStream.stream,
+			stderrStream.stream,
+			// Exit code
+			new Promise((resolve) => {
+				process.on('exit', (code) => {
+					resolve(code);
+				});
+			})
+		);
+	}
+
 	setSkipShebang(shouldSkip: boolean) {
 		this[__private__dont__use].ccall(
 			'wasm_set_skip_shebang',
diff --git a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
index 82a78ed6d2..e5268287dd 100644
--- a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
+++ b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
@@ -40,9 +40,11 @@ export function sandboxedSpawnHandlerFactory(
 			// @TODO: Do not hardcode this
 			processApi.stdout(`18 140`);
 			processApi.exit(0);
+			return;
 		} else if (binaryName === 'tput' && args[1] === 'cols') {
 			processApi.stdout(`140`);
 			processApi.exit(0);
+			return;
 		} else if (binaryName === 'less') {
 			processApi.on('stdin', (data: Uint8Array) => {
 				processApi.stdout(data);
@@ -55,13 +57,17 @@ export function sandboxedSpawnHandlerFactory(
 			});
 			processApi.exit(0);
 			return;
-		} else if (binaryName === 'php') {
-			const { php, reap } = await processManager.acquirePHPInstance({
-				considerPrimary: false,
-			});
+		}
 
-			php.chdir(options.cwd as string);
-			try {
+		// Binaries requiring PHP to be running.
+		const { php, reap } = await processManager.acquirePHPInstance({
+			considerPrimary: false,
+		});
+
+		try {
+			php.chdir((options.cwd as string) ?? '/');
+
+			if (binaryName === 'php') {
 				// Figure out more about setting env, putenv(), etc.
 				const result = await php.cli(args, {
 					env: {
@@ -89,15 +95,23 @@ export function sandboxedSpawnHandlerFactory(
 					})
 				);
 				processApi.exit(await result.exitCode);
-			} catch (e) {
-				// An exception here means the PHP runtime has crashed.
-				processApi.exit(1);
-				throw e;
-			} finally {
-				reap();
+			} else if (binaryName === 'ls') {
+				const files = php.listFiles(args[1] || '/');
+				files.forEach((file) => {
+					processApi.stdout(file + '\n');
+				});
+				await new Promise((resolve) => setTimeout(resolve, 10));
+				processApi.exit(0);
+			} else {
+				// 127 is the exit code for command not found.
+				processApi.exit(127);
 			}
-		} else {
+		} catch (e) {
+			// An exception here means the PHP runtime has crashed.
 			processApi.exit(1);
+			throw e;
+		} finally {
+			reap();
 		}
 	});
 }
diff --git a/packages/playground/website/public/php-playground.html b/packages/playground/website/public/php-playground.html
index b77ba4b3d7..11bc3ce228 100644
--- a/packages/playground/website/public/php-playground.html
+++ b/packages/playground/website/public/php-playground.html
@@ -1048,6 +1048,9 @@ <h2>💡 Tips</h2>
 						if (process.aborted) {
 							return;
 						}
+						await new Promise((resolve) =>
+							setTimeout(resolve, 1000)
+						);
 						process.aborted = true;
 						abortedPromise.resolve();
 
@@ -1063,7 +1066,6 @@ <h2>💡 Tips</h2>
 				const callbackSink = (callback) =>
 					new WritableStream({
 						write(chunk) {
-							console.log({ chunk });
 							if (process.aborted) {
 								return;
 							}
@@ -1081,11 +1083,14 @@ <h2>💡 Tips</h2>
 
 				response.stderr
 					.pipeThrough(new TextDecoderStream())
-					.pipeTo(callbackSink(writeStderr));
+					.pipeTo(callbackSink(writeStderr))
+					.catch((error) => {
+						console.log('catch', error);
+					});
 
 				const exitCode = await Promise.race([
 					response.exitCode,
-					abortedPromise.promise.then(() => 130),
+					// abortedPromise.promise.then(() => 130),
 				]);
 
 				currentProcess = null;
@@ -1115,27 +1120,6 @@ <h2>💡 Tips</h2>
 							);
 							break;
 						}
-						case 'ls': {
-							(
-								(await client.listFiles(args[0] || '/')) || []
-							).forEach((line) => {
-								term.writeln(line);
-							});
-							break;
-						}
-						case 'php': {
-							if (!args.length) {
-								term.writeln('\r\nUsage: php <arguments>');
-								break;
-							}
-							const result = await runCli(['php', ...args]);
-							if (!result.aborted && result.exitCode !== 0) {
-								term.writeln(
-									`\r\nProcess exited with code ${result.exitCode}`
-								);
-							}
-							break;
-						}
 						case 'wp': {
 							await ensureWpCliBinary();
 							const result = await runCli([
@@ -1165,8 +1149,26 @@ <h2>💡 Tips</h2>
 							}
 							break;
 						}
-						default:
-							term.writeln(`\r\n${command}: command not found`);
+						default: {
+							if (!args.length) {
+								term.writeln('\r\nUsage: php <arguments>');
+								break;
+							}
+							const result = await runCli(parts);
+							if (result.exitCode === 127) {
+								term.writeln(
+									`\r\n${command}: command not found`
+								);
+							} else if (
+								!result.aborted &&
+								result.exitCode !== 0
+							) {
+								term.writeln(
+									`\r\nProcess exited with code ${result.exitCode}`
+								);
+							}
+							break;
+						}
 					}
 				} catch (error) {
 					const message = error?.message || String(error);

From aa127504e375ea4b8105de4bcc1e7f59f073d1e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 26 Sep 2025 23:32:55 +0100
Subject: [PATCH 04/41] small readability improvements

---
 packages/php-wasm/universal/src/lib/php.ts                | 4 ++++
 .../universal/src/lib/sandboxed-spawn-handler-factory.ts  | 8 ++++++--
 packages/playground/website/public/php-playground.html    | 4 +++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/php-wasm/universal/src/lib/php.ts b/packages/php-wasm/universal/src/lib/php.ts
index f884953257..dd89fd2731 100644
--- a/packages/php-wasm/universal/src/lib/php.ts
+++ b/packages/php-wasm/universal/src/lib/php.ts
@@ -398,6 +398,10 @@ export class PHP implements Disposable {
 		this[__private__dont__use].FS.chdir(path);
 	}
 
+	cwd() {
+		return this[__private__dont__use].FS.cwd();
+	}
+
 	/**
 	 * Changes the permissions of a file or directory.
 	 * @param path - The path to the file or directory.
diff --git a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
index e5268287dd..c96aa026d5 100644
--- a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
+++ b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
@@ -65,7 +65,11 @@ export function sandboxedSpawnHandlerFactory(
 		});
 
 		try {
-			php.chdir((options.cwd as string) ?? '/');
+			if ('cwd' in options) {
+				php.chdir((options.cwd as string) ?? '/');
+			}
+
+			const cwd = php.cwd();
 
 			if (binaryName === 'php') {
 				// Figure out more about setting env, putenv(), etc.
@@ -96,7 +100,7 @@ export function sandboxedSpawnHandlerFactory(
 				);
 				processApi.exit(await result.exitCode);
 			} else if (binaryName === 'ls') {
-				const files = php.listFiles(args[1] || '/');
+				const files = php.listFiles(args[1] ?? cwd);
 				files.forEach((file) => {
 					processApi.stdout(file + '\n');
 				});
diff --git a/packages/playground/website/public/php-playground.html b/packages/playground/website/public/php-playground.html
index 11bc3ce228..b78560d557 100644
--- a/packages/playground/website/public/php-playground.html
+++ b/packages/playground/website/public/php-playground.html
@@ -1151,7 +1151,9 @@ <h2>💡 Tips</h2>
 						}
 						default: {
 							if (!args.length) {
-								term.writeln('\r\nUsage: php <arguments>');
+								term.writeln(
+									`\r\nUsage: ${command} <arguments>`
+								);
 								break;
 							}
 							const result = await runCli(parts);

From 83144ea36c6e76bcd86f747dc156fa99e992fd85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 26 Sep 2025 23:50:40 +0100
Subject: [PATCH 05/41] Polyfill grapheme_strlen to prevent composer error

---
 .../website/public/php-playground.html        | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/playground/website/public/php-playground.html b/packages/playground/website/public/php-playground.html
index b78560d557..3945a1a55e 100644
--- a/packages/playground/website/public/php-playground.html
+++ b/packages/playground/website/public/php-playground.html
@@ -1004,13 +1004,28 @@ <h2>💡 Tips</h2>
 				}
 				term.writeln('\r\nDownloading Composer...');
 				const response = await fetch(
-					'https://wordpress-playground-cors-proxy.net/?https://getcomposer.org/composer-stable.phar'
+					'https://wordpress-playground-cors-proxy.net/?https://getcomposer.org/download/2.8.12/composer.phar'
 				);
 				if (!response.ok) {
 					throw new Error('Failed to download Composer');
 				}
 				const buffer = await response.arrayBuffer();
-				await client.writeFile(COMPOSER_PATH, new Uint8Array(buffer));
+				await client.writeFile(
+					COMPOSER_PATH + '.bin',
+					new Uint8Array(buffer)
+				);
+				await client.writeFile(
+					COMPOSER_PATH,
+					`<?php
+					// Composer assumes the grapheme_strlen function is available
+					// and will crash if it's not. Symfony Polyfills somehow do
+					// not kick in in this case.
+					function grapheme_strlen($string) {
+						return strlen($string);
+					}
+					require_once __FILE__ . '.bin';
+				`
+				);
 				term.writeln('Download complete.');
 			}
 

From af571b5c0ddad68a8d200a93c59d6c0d715ba06c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sat, 27 Sep 2025 12:50:56 +0100
Subject: [PATCH 06/41] React app php playground

---
 package-lock.json                             | 238 ++++++
 package.json                                  |   7 +
 packages/php-wasm/util/src/lib/index.ts       |   1 +
 .../website/public/php-playground.html        | 738 +++++++++++++----
 .../php-playground/components/Controls.tsx    |  95 +++
 .../php-playground/components/EditorHost.tsx  | 125 +++
 .../php-playground/components/HelpModal.tsx   | 140 ++++
 .../components/Layout.module.css              | 413 ++++++++++
 .../src/php-playground/components/Layout.tsx  |  57 ++
 .../components/PlaygroundManager.tsx          | 233 ++++++
 .../php-playground/components/Terminal.tsx    | 770 ++++++++++++++++++
 .../website/src/php-playground/constants.ts   |  17 +
 .../website/src/php-playground/hooks.ts       |   6 +
 .../website/src/php-playground/main.tsx       |  15 +
 .../website/src/php-playground/runtime.ts     |  24 +
 .../website/src/php-playground/store.ts       | 120 +++
 .../website/src/php-playground/url-state.ts   |  70 ++
 packages/playground/website/vite.config.ts    |   3 +
 18 files changed, 2907 insertions(+), 165 deletions(-)
 create mode 100644 packages/playground/website/src/php-playground/components/Controls.tsx
 create mode 100644 packages/playground/website/src/php-playground/components/EditorHost.tsx
 create mode 100644 packages/playground/website/src/php-playground/components/HelpModal.tsx
 create mode 100644 packages/playground/website/src/php-playground/components/Layout.module.css
 create mode 100644 packages/playground/website/src/php-playground/components/Layout.tsx
 create mode 100644 packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
 create mode 100644 packages/playground/website/src/php-playground/components/Terminal.tsx
 create mode 100644 packages/playground/website/src/php-playground/constants.ts
 create mode 100644 packages/playground/website/src/php-playground/hooks.ts
 create mode 100644 packages/playground/website/src/php-playground/main.tsx
 create mode 100644 packages/playground/website/src/php-playground/runtime.ts
 create mode 100644 packages/playground/website/src/php-playground/store.ts
 create mode 100644 packages/playground/website/src/php-playground/url-state.ts

diff --git a/package-lock.json b/package-lock.json
index 21a37ba87f..e3c992645b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,13 @@
 				"packages/playground/*"
 			],
 			"dependencies": {
+				"@codemirror/autocomplete": "6.19.0",
+				"@codemirror/commands": "6.8.1",
+				"@codemirror/lang-php": "6.0.2",
+				"@codemirror/language": "6.11.3",
+				"@codemirror/search": "6.5.11",
+				"@codemirror/state": "6.5.2",
+				"@codemirror/view": "6.38.3",
 				"@preact/signals-react": "1.3.6",
 				"@reduxjs/toolkit": "2.6.1",
 				"@types/xml2js": "0.4.14",
@@ -2499,6 +2506,145 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@codemirror/autocomplete": {
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.19.0.tgz",
+			"integrity": "sha512-61Hfv3cF07XvUxNeC3E7jhG8XNi1Yom1G0lRC936oLnlF+jrbrv8rc/J98XlYzcsAoTVupfsf5fLej1aI8kyIg==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/commands": {
+			"version": "6.8.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.1.tgz",
+			"integrity": "sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.4.0",
+				"@codemirror/view": "^6.27.0",
+				"@lezer/common": "^1.1.0"
+			}
+		},
+		"node_modules/@codemirror/lang-css": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+			"integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@lezer/common": "^1.0.2",
+				"@lezer/css": "^1.1.7"
+			}
+		},
+		"node_modules/@codemirror/lang-html": {
+			"version": "6.4.10",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.10.tgz",
+			"integrity": "sha512-h/SceTVsN5r+WE+TVP2g3KDvNoSzbSrtZXCKo4vkKdbfT5t4otuVgngGdFukOO/rwRD2++pCxoh6xD4TEVMkQA==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/lang-css": "^6.0.0",
+				"@codemirror/lang-javascript": "^6.0.0",
+				"@codemirror/language": "^6.4.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/css": "^1.1.0",
+				"@lezer/html": "^1.3.0"
+			}
+		},
+		"node_modules/@codemirror/lang-javascript": {
+			"version": "6.2.4",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
+			"integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.6.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/javascript": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/lang-php": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.2.tgz",
+			"integrity": "sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/lang-html": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/php": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/language": {
+			"version": "6.11.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
+			"integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.23.0",
+				"@lezer/common": "^1.1.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0",
+				"style-mod": "^4.0.0"
+			}
+		},
+		"node_modules/@codemirror/lint": {
+			"version": "6.8.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.5.tgz",
+			"integrity": "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.35.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/search": {
+			"version": "6.5.11",
+			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.11.tgz",
+			"integrity": "sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/state": {
+			"version": "6.5.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
+			"integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
+			"license": "MIT",
+			"dependencies": {
+				"@marijn/find-cluster-break": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/view": {
+			"version": "6.38.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.3.tgz",
+			"integrity": "sha512-x2t87+oqwB1mduiQZ6huIghjMt4uZKFEdj66IcXw7+a5iBEvv9lh7EWDRHI7crnD4BMGpnyq/RzmCGbiEZLcvQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/state": "^6.5.0",
+				"crelt": "^1.0.6",
+				"style-mod": "^4.1.0",
+				"w3c-keyname": "^2.2.4"
+			}
+		},
 		"node_modules/@colors/colors": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -8183,6 +8329,80 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/@lezer/common": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+			"integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==",
+			"license": "MIT"
+		},
+		"node_modules/@lezer/css": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.0.tgz",
+			"integrity": "sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.3.0"
+			}
+		},
+		"node_modules/@lezer/highlight": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+			"integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/html": {
+			"version": "1.3.12",
+			"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.12.tgz",
+			"integrity": "sha512-RJ7eRWdaJe3bsiiLLHjCFT1JMk8m1YP9kaUbvu2rMLEoOnke9mcTVDyfOslsln0LtujdWespjJ39w6zo+RsQYw==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/javascript": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
+			"integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.1.3",
+				"@lezer/lr": "^1.3.0"
+			}
+		},
+		"node_modules/@lezer/lr": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+			"integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/php": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.5.tgz",
+			"integrity": "sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.1.0"
+			}
+		},
+		"node_modules/@marijn/find-cluster-break": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+			"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+			"license": "MIT"
+		},
 		"node_modules/@mdx-js/mdx": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.0.tgz",
@@ -23131,6 +23351,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/crelt": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+			"license": "MIT"
+		},
 		"node_modules/cron-parser": {
 			"version": "4.9.0",
 			"resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
@@ -47671,6 +47897,12 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/style-mod": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+			"integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
+			"license": "MIT"
+		},
 		"node_modules/style-to-js": {
 			"version": "1.1.16",
 			"resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.16.tgz",
@@ -50786,6 +51018,12 @@
 				"typescript": "*"
 			}
 		},
+		"node_modules/w3c-keyname": {
+			"version": "2.2.8",
+			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+			"license": "MIT"
+		},
 		"node_modules/w3c-xmlserializer": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
diff --git a/package.json b/package.json
index 44373fb7d2..8e0a5c0994 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,13 @@
 	},
 	"private": true,
 	"dependencies": {
+		"@codemirror/autocomplete": "6.19.0",
+		"@codemirror/commands": "6.8.1",
+		"@codemirror/lang-php": "6.0.2",
+		"@codemirror/language": "6.11.3",
+		"@codemirror/search": "6.5.11",
+		"@codemirror/state": "6.5.2",
+		"@codemirror/view": "6.38.3",
 		"@preact/signals-react": "1.3.6",
 		"@reduxjs/toolkit": "2.6.1",
 		"@types/xml2js": "0.4.14",
diff --git a/packages/php-wasm/util/src/lib/index.ts b/packages/php-wasm/util/src/lib/index.ts
index 907993c758..6fc7d2f07c 100644
--- a/packages/php-wasm/util/src/lib/index.ts
+++ b/packages/php-wasm/util/src/lib/index.ts
@@ -9,6 +9,7 @@ export {
 	normalizePath,
 	isParentOf,
 } from './paths';
+export { splitShellCommand } from './split-shell-command';
 export { createSpawnHandler } from './create-spawn-handler';
 export { randomString } from './random-string';
 export { randomFilename } from './random-filename';
diff --git a/packages/playground/website/public/php-playground.html b/packages/playground/website/public/php-playground.html
index 3945a1a55e..4708c5ce29 100644
--- a/packages/playground/website/public/php-playground.html
+++ b/packages/playground/website/public/php-playground.html
@@ -93,9 +93,17 @@
 				text-decoration: underline;
 			}
 
+			#editorContent {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				min-height: 0;
+			}
+
 			#editor {
 				flex: 1;
 				font-size: 14px;
+				min-height: 0;
 			}
 
 			/* CodeMirror font size */
@@ -159,20 +167,120 @@
 				border: 0;
 			}
 
-			#terminalPane {
-				height: 260px;
+			.terminal-section {
 				background: #111;
-				border-top: 1px solid #333;
 				color: #fff;
 				font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
 					Consolas, 'Courier New', monospace;
+				display: flex;
+				flex-direction: column;
+				border-top: 1px solid #333;
+			}
+
+			.terminal-section.collapsed .terminal-resize-handle,
+			.terminal-section.collapsed #terminalPane {
+				display: none;
+			}
+
+			.terminal-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 6px 12px;
+				background: #1a1a1a;
+				gap: 12px;
+			}
+
+			.terminal-toggle {
+				background: none;
+				border: 0;
+				color: inherit;
+				cursor: pointer;
+				font: inherit;
+				padding: 0;
+				display: flex;
+				align-items: center;
+				gap: 6px;
+			}
+
+			.terminal-toggle:hover {
+				opacity: 0.8;
+			}
+
+			.terminal-section.collapsed .terminal-toggle::after {
+				content: ' ▸';
+			}
+
+			.terminal-section:not(.collapsed) .terminal-toggle::after {
+				content: ' ▾';
+			}
+
+			.terminal-progress {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			.terminal-progress-label {
+				font-size: 13px;
+				color: #cbd5f5;
+			}
+
+			.terminal-progress-track {
+				width: 140px;
+				height: 6px;
+				background: #2a2a2a;
+				border-radius: 999px;
+				overflow: hidden;
+			}
+
+			.terminal-progress-bar {
+				height: 100%;
+				width: 0;
+				background: linear-gradient(90deg, #22d3ee, #4ade80);
+				transition: width 0.1s ease;
+			}
+
+			.terminal-progress-bar.is-indeterminate {
+				width: 35%;
+				animation: terminalProgressIndeterminate 1.2s ease-in-out
+					infinite;
+			}
+
+			@keyframes terminalProgressIndeterminate {
+				0% {
+					transform: translateX(-100%);
+				}
+				50% {
+					transform: translateX(50%);
+				}
+				100% {
+					transform: translateX(200%);
+				}
+			}
+
+			.terminal-resize-handle {
+				height: 6px;
+				cursor: ns-resize;
+				background: #202020;
+				touch-action: none;
+			}
+
+			.terminal-resize-handle:hover,
+			.terminal-resize-handle.is-dragging {
+				background: #2f2f2f;
+			}
+
+			#terminalPane {
+				height: 220px;
 				padding: 8px;
 				box-sizing: border-box;
+				background: #111;
 			}
 
 			#terminal {
 				width: 100%;
-				height: calc(100% - 16px);
+				height: 100%;
 			}
 
 			/* Modal styles */
@@ -336,7 +444,7 @@
 					font-size: 13px;
 				}
 				#terminalPane {
-					height: 220px;
+					height: 200px;
 				}
 			}
 
@@ -367,7 +475,7 @@
 					line-height: 1.3;
 				}
 				#terminalPane {
-					height: 200px;
+					height: 160px;
 				}
 			}
 
@@ -459,15 +567,56 @@ <h1>WordPress PHP Playground</h1>
 						<a href="#" id="helpBtn">How does this work?</a>
 					</div>
 				</div>
-				<div id="editor"></div>
+				<div id="editorContent">
+					<div id="editor"></div>
+					<section
+						id="terminalSection"
+						class="terminal-section"
+						aria-label="Playground terminal"
+					>
+						<header id="terminalHeader" class="terminal-header">
+							<button
+								id="terminalToggle"
+								type="button"
+								aria-expanded="true"
+								class="terminal-toggle"
+							>
+								Terminal
+							</button>
+							<div
+								id="terminalProgress"
+								class="terminal-progress"
+								hidden
+							>
+								<span
+									id="terminalProgressLabel"
+									class="terminal-progress-label"
+								></span>
+								<div class="terminal-progress-track">
+									<div
+										id="terminalProgressBar"
+										class="terminal-progress-bar"
+									></div>
+								</div>
+							</div>
+						</header>
+						<div
+							id="terminalResizeHandle"
+							class="terminal-resize-handle"
+							role="separator"
+							aria-orientation="horizontal"
+							aria-label="Resize terminal"
+						></div>
+						<div id="terminalPane">
+							<div id="terminal"></div>
+						</div>
+					</section>
+				</div>
 			</div>
 			<div id="previewPane">
 				<iframe id="preview" title="WordPress Playground"></iframe>
 			</div>
 		</div>
-		<div id="terminalPane">
-			<div id="terminal"></div>
-		</div>
 
 		<!-- Help Modal -->
 		<div id="helpModal" class="modal">
@@ -865,6 +1014,20 @@ <h2>💡 Tips</h2>
 			let bootPromise = Promise.resolve();
 			let runCounter = 0;
 
+			const terminalSection = document.getElementById('terminalSection');
+			const terminalPane = document.getElementById('terminalPane');
+			const terminalToggle = document.getElementById('terminalToggle');
+			const terminalResizeHandle = document.getElementById(
+				'terminalResizeHandle'
+			);
+			const terminalProgressRow =
+				document.getElementById('terminalProgress');
+			const terminalProgressLabel = document.getElementById(
+				'terminalProgressLabel'
+			);
+			const terminalProgressBar = document.getElementById(
+				'terminalProgressBar'
+			);
 			const terminalContainer = document.getElementById('terminal');
 			const term = new Terminal({
 				convertEol: true,
@@ -880,6 +1043,126 @@ <h2>💡 Tips</h2>
 			term.open(terminalContainer);
 			fitAddon.fit();
 
+			const MIN_TERMINAL_HEIGHT = 140;
+			const MAX_TERMINAL_HEIGHT = 600;
+			let terminalHeight = terminalPane.offsetHeight || 220;
+			let lastExpandedHeight = terminalHeight;
+			let isTerminalCollapsed = false;
+			let isDraggingTerminal = false;
+			let dragStartY = 0;
+			let dragStartHeight = terminalHeight;
+
+			function applyTerminalHeight(height) {
+				terminalHeight = Math.min(
+					MAX_TERMINAL_HEIGHT,
+					Math.max(MIN_TERMINAL_HEIGHT, height)
+				);
+				terminalPane.style.height = `${terminalHeight}px`;
+				if (!isTerminalCollapsed) {
+					requestAnimationFrame(() => fitAddon.fit());
+				}
+			}
+
+			applyTerminalHeight(terminalHeight);
+
+			function setTerminalCollapsed(collapsed) {
+				if (collapsed === isTerminalCollapsed) {
+					return;
+				}
+				isTerminalCollapsed = collapsed;
+				terminalSection.classList.toggle('collapsed', collapsed);
+				terminalToggle.setAttribute(
+					'aria-expanded',
+					String(!collapsed)
+				);
+				if (collapsed) {
+					lastExpandedHeight = terminalHeight;
+					terminalPane.style.height = '0px';
+					terminalPane.setAttribute('aria-hidden', 'true');
+				} else {
+					terminalPane.removeAttribute('aria-hidden');
+					const heightToRestore = Math.min(
+						MAX_TERMINAL_HEIGHT,
+						Math.max(
+							MIN_TERMINAL_HEIGHT,
+							lastExpandedHeight || terminalHeight
+						)
+					);
+					applyTerminalHeight(heightToRestore);
+				}
+			}
+
+			terminalToggle.addEventListener('click', () => {
+				setTerminalCollapsed(!isTerminalCollapsed);
+			});
+
+			function startTerminalDrag(startY) {
+				if (isTerminalCollapsed) {
+					return;
+				}
+				isDraggingTerminal = true;
+				dragStartY = startY;
+				dragStartHeight = terminalHeight;
+				terminalResizeHandle.classList.add('is-dragging');
+				document.body.style.userSelect = 'none';
+			}
+
+			function handleTerminalDrag(currentY) {
+				if (!isDraggingTerminal) {
+					return;
+				}
+				const delta = currentY - dragStartY;
+				applyTerminalHeight(dragStartHeight - delta);
+			}
+
+			function stopTerminalDrag() {
+				if (!isDraggingTerminal) {
+					return;
+				}
+				isDraggingTerminal = false;
+				terminalResizeHandle.classList.remove('is-dragging');
+				document.body.style.userSelect = '';
+			}
+
+			terminalResizeHandle.addEventListener('mousedown', (event) => {
+				event.preventDefault();
+				startTerminalDrag(event.clientY);
+				const onMouseMove = (moveEvent) => {
+					handleTerminalDrag(moveEvent.clientY);
+				};
+				const onMouseUp = () => {
+					stopTerminalDrag();
+					document.removeEventListener('mousemove', onMouseMove);
+					document.removeEventListener('mouseup', onMouseUp);
+				};
+				document.addEventListener('mousemove', onMouseMove);
+				document.addEventListener('mouseup', onMouseUp);
+			});
+
+			terminalResizeHandle.addEventListener('touchstart', (event) => {
+				if (event.touches.length !== 1) {
+					return;
+				}
+				event.preventDefault();
+				const touch = event.touches[0];
+				startTerminalDrag(touch.clientY);
+				const onTouchMove = (moveEvent) => {
+					if (moveEvent.touches.length !== 1) {
+						return;
+					}
+					handleTerminalDrag(moveEvent.touches[0].clientY);
+				};
+				const onTouchEnd = () => {
+					stopTerminalDrag();
+					document.removeEventListener('touchmove', onTouchMove);
+					document.removeEventListener('touchend', onTouchEnd);
+					document.removeEventListener('touchcancel', onTouchEnd);
+				};
+				document.addEventListener('touchmove', onTouchMove);
+				document.addEventListener('touchend', onTouchEnd);
+				document.addEventListener('touchcancel', onTouchEnd);
+			});
+
 			function debounce(fn, delay) {
 				let timeoutId = null;
 				return (...args) => {
@@ -894,7 +1177,11 @@ <h2>💡 Tips</h2>
 
 			window.addEventListener(
 				'resize',
-				debounce(() => fitAddon.fit(), 150)
+				debounce(() => {
+					if (!isTerminalCollapsed) {
+						fitAddon.fit();
+					}
+				}, 150)
 			);
 
 			const commandHistory = [];
@@ -902,13 +1189,47 @@ <h2>💡 Tips</h2>
 			let currentLine = '';
 			let isRunningCommand = false;
 			let currentProcess = null;
+			let lastInputChar = '';
+
 			const WP_CLI_PATH = '/tmp/wp-cli.phar';
 			const COMPOSER_PATH = '/tmp/composer.phar';
 
-			term.writeln(
-				'WordPress Playground CLI ready. Type `help` to see available commands.'
-			);
-			prompt(false);
+			let activeDownload = null;
+
+			function showDownloadProgress(label, totalBytes = 0) {
+				activeDownload = { label, totalBytes };
+				terminalProgressRow.hidden = false;
+				terminalProgressBar.classList.toggle(
+					'is-indeterminate',
+					!totalBytes
+				);
+				terminalProgressBar.style.width = totalBytes ? '0%' : '35%';
+				terminalProgressLabel.textContent = totalBytes
+					? `${label} (0%)`
+					: label;
+			}
+
+			function updateDownloadProgress(receivedBytes) {
+				if (!activeDownload || !activeDownload.totalBytes) {
+					return;
+				}
+				const percent = Math.min(
+					100,
+					Math.round(
+						(receivedBytes / activeDownload.totalBytes) * 100
+					)
+				);
+				terminalProgressBar.style.width = `${percent}%`;
+				terminalProgressLabel.textContent = `${activeDownload.label} (${percent}%)`;
+			}
+
+			function hideDownloadProgress() {
+				activeDownload = null;
+				terminalProgressRow.hidden = true;
+				terminalProgressBar.classList.remove('is-indeterminate');
+				terminalProgressBar.style.width = '0%';
+				terminalProgressLabel.textContent = '';
+			}
 
 			function prompt(newLine = true) {
 				const prefix = newLine ? '\r\n$ ' : '$ ';
@@ -938,8 +1259,10 @@ <h2>💡 Tips</h2>
 			function splitShellCommand(command) {
 				const MODE_NORMAL = 0;
 				const MODE_IN_QUOTE = 1;
+
 				let mode = MODE_NORMAL;
 				let quote = '';
+
 				const parts = [];
 				let currentPart = '';
 				for (let i = 0; i < command.length; i++) {
@@ -974,6 +1297,58 @@ <h2>💡 Tips</h2>
 				return parts;
 			}
 
+			term.writeln(
+				'WordPress Playground CLI ready. Type `help` to see available commands.'
+			);
+			prompt(false);
+
+			async function downloadWithProgress(url, label) {
+				showDownloadProgress(label);
+				try {
+					const response = await fetch(url);
+					if (!response.ok) {
+						throw new Error(
+							`Failed to download ${label.toLowerCase()}.`
+						);
+					}
+					const totalHeader = response.headers.get('content-length');
+					const totalBytes = totalHeader ? Number(totalHeader) : 0;
+					if (totalBytes) {
+						showDownloadProgress(label, totalBytes);
+					}
+					if (!response.body || !response.body.getReader) {
+						const buffer = await response.arrayBuffer();
+						hideDownloadProgress();
+						return new Uint8Array(buffer);
+					}
+					const reader = response.body.getReader();
+					const chunks = [];
+					let received = 0;
+					while (true) {
+						const { value, done } = await reader.read();
+						if (done) {
+							break;
+						}
+						if (value) {
+							chunks.push(value);
+							received += value.byteLength;
+							updateDownloadProgress(received);
+						}
+					}
+					const bytes = new Uint8Array(received);
+					let offset = 0;
+					for (const chunk of chunks) {
+						bytes.set(chunk, offset);
+						offset += chunk.byteLength;
+					}
+					hideDownloadProgress();
+					return bytes;
+				} catch (error) {
+					hideDownloadProgress();
+					throw error;
+				}
+			}
+
 			async function ensureWpCliBinary() {
 				await bootPromise;
 				if (!client) {
@@ -983,14 +1358,11 @@ <h2>💡 Tips</h2>
 					return;
 				}
 				term.writeln('\r\nDownloading WP-CLI...');
-				const response = await fetch(
-					'https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar'
+				const binary = await downloadWithProgress(
+					'https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar',
+					'Downloading WP-CLI'
 				);
-				if (!response.ok) {
-					throw new Error('Failed to download WP-CLI');
-				}
-				const buffer = await response.arrayBuffer();
-				await client.writeFile(WP_CLI_PATH, new Uint8Array(buffer));
+				await client.writeFile(WP_CLI_PATH, binary);
 				term.writeln('Download complete.');
 			}
 
@@ -1003,114 +1375,155 @@ <h2>💡 Tips</h2>
 					return;
 				}
 				term.writeln('\r\nDownloading Composer...');
-				const response = await fetch(
-					'https://wordpress-playground-cors-proxy.net/?https://getcomposer.org/download/2.8.12/composer.phar'
-				);
-				if (!response.ok) {
-					throw new Error('Failed to download Composer');
-				}
-				const buffer = await response.arrayBuffer();
-				await client.writeFile(
-					COMPOSER_PATH + '.bin',
-					new Uint8Array(buffer)
+				const binary = await downloadWithProgress(
+					'https://wordpress-playground-cors-proxy.net/?https://getcomposer.org/download/2.8.12/composer.phar',
+					'Downloading Composer'
 				);
+				await client.writeFile(COMPOSER_PATH + '.bin', binary);
 				await client.writeFile(
 					COMPOSER_PATH,
 					`<?php
-					// Composer assumes the grapheme_strlen function is available
-					// and will crash if it's not. Symfony Polyfills somehow do
-					// not kick in in this case.
-					function grapheme_strlen($string) {
-						return strlen($string);
-					}
-					require_once __FILE__ . '.bin';
-				`
+	// Composer assumes the grapheme_strlen function is available
+	// and will crash if it's not. Symfony Polyfills somehow do
+	// not kick in in this case.
+	function grapheme_strlen($string) {
+		return strlen($string);
+	}
+	require_once __FILE__ . '.bin';
+	`
 				);
 				term.writeln('Download complete.');
 			}
 
-			function invertPromise() {
-				let resolve, reject;
-				const promise = new Promise((_resolve, _reject) => {
-					resolve = _resolve;
-					reject = _reject;
-				});
-				return {
-					resolve,
-					reject,
-					promise,
-				};
-			}
-
 			async function runCli(argv, options = {}) {
 				await bootPromise;
 				if (!client) {
 					throw new Error('Playground client is not ready yet.');
 				}
-				console.log({ argv, options });
-				await client.writeFile(
-					'/tmp/test.php',
-					'<?php echo "hi!"; flush(); sleep(60); echo "\nnewline"; ?>'
-				);
-				const response = await client.cli(argv, options);
-
-				const abortedPromise = invertPromise();
+				const requestHandler = client.__internal_getRequestHandler?.();
+				const processManager = requestHandler?.processManager;
+				if (!processManager) {
+					throw new Error('Unable to access the PHP runtime.');
+				}
+				const { php, reap } = await processManager.acquirePHPInstance();
+				let response;
+				try {
+					response = await php.cli(argv, options);
+				} catch (error) {
+					reap();
+					throw error;
+				}
+				const stdoutDecoder = new TextDecoder();
+				const stderrDecoder = new TextDecoder();
+				const stdoutReader = response.stdout.getReader();
+				const stderrReader = response.stderr.getReader();
 				const process = {
 					response,
 					php,
+					stdoutReader,
+					stderrReader,
 					aborted: false,
 					async terminate() {
 						if (process.aborted) {
 							return;
 						}
-						await new Promise((resolve) =>
-							setTimeout(resolve, 1000)
-						);
 						process.aborted = true;
-						abortedPromise.resolve();
-
-						// Ignore cancelation errors and also don't
-						// await these promises. The cancel() calls
-						// go to the remote worker which may be busy
-						// for some more time before it's able to
-						// respond to the cancel() call.
-						response.stdout.cancel().catch(() => {});
-						response.stderr.cancel().catch(() => {});
+						try {
+							await stdoutReader.cancel();
+						} catch {}
+						try {
+							await stderrReader.cancel();
+						} catch {}
+						try {
+							php.exit(130);
+						} catch {}
 					},
 				};
-				const callbackSink = (callback) =>
-					new WritableStream({
-						write(chunk) {
-							if (process.aborted) {
-								return;
+				currentProcess = process;
+
+				try {
+					const streamStdout = (async () => {
+						try {
+							while (!process.aborted) {
+								const { value, done } =
+									await stdoutReader.read();
+								if (done) {
+									break;
+								}
+								if (value) {
+									const text = stdoutDecoder.decode(value, {
+										stream: true,
+									});
+									if (text) {
+										writeStdout(text);
+									}
+								}
 							}
-							if (chunk) {
-								callback(chunk);
+							const flush = stdoutDecoder.decode();
+							if (flush && !process.aborted) {
+								writeStdout(flush);
 							}
-						},
-					});
-
-				currentProcess = process;
+						} catch (error) {
+							if (!process.aborted) {
+								throw error;
+							}
+						}
+					})();
 
-				response.stdout
-					.pipeThrough(new TextDecoderStream())
-					.pipeTo(callbackSink(writeStdout));
+					const streamStderr = (async () => {
+						try {
+							while (!process.aborted) {
+								const { value, done } =
+									await stderrReader.read();
+								if (done) {
+									break;
+								}
+								if (value) {
+									const text = stderrDecoder.decode(value, {
+										stream: true,
+									});
+									if (text) {
+										writeStderr(text);
+									}
+								}
+							}
+							const flush = stderrDecoder.decode();
+							if (flush && !process.aborted) {
+								writeStderr(flush);
+							}
+						} catch (error) {
+							if (!process.aborted) {
+								throw error;
+							}
+						}
+					})();
 
-				response.stderr
-					.pipeThrough(new TextDecoderStream())
-					.pipeTo(callbackSink(writeStderr))
-					.catch((error) => {
-						console.log('catch', error);
+					const exitCodePromise = response.exitCode.catch((error) => {
+						if (!process.aborted) {
+							throw error;
+						}
+						return 130;
 					});
 
-				const exitCode = await Promise.race([
-					response.exitCode,
-					// abortedPromise.promise.then(() => 130),
-				]);
+					exitCodePromise.then(
+						() => reap(),
+						() => reap()
+					);
 
-				currentProcess = null;
+					const [, , exitCode] = await Promise.all([
+						streamStdout.catch(() => {}),
+						streamStderr.catch(() => {}),
+						exitCodePromise,
+					]);
 
-				return { exitCode, aborted: process.aborted };
+					const aborted = process.aborted;
+					if (aborted) {
+						term.writeln('\r\nProcess interrupted.');
+					}
+					return { exitCode, aborted };
+				} finally {
+					currentProcess = null;
+				}
 			}
 
 			async function runTerminalCommand(rawInput) {
@@ -1126,6 +1539,9 @@ <h2>💡 Tips</h2>
 					prompt();
 					return;
 				}
+				if (isTerminalCollapsed) {
+					setTerminalCollapsed(false);
+				}
 				const [command, ...args] = parts;
 				try {
 					switch (command) {
@@ -1135,6 +1551,19 @@ <h2>💡 Tips</h2>
 							);
 							break;
 						}
+						case 'php': {
+							if (!args.length) {
+								term.writeln('\r\nUsage: php <arguments>');
+								break;
+							}
+							const result = await runCli(['php', ...args]);
+							if (!result.aborted && result.exitCode !== 0) {
+								term.writeln(
+									`\r\nProcess exited with code ${result.exitCode}`
+								);
+							}
+							break;
+						}
 						case 'wp': {
 							await ensureWpCliBinary();
 							const result = await runCli([
@@ -1165,26 +1594,7 @@ <h2>💡 Tips</h2>
 							break;
 						}
 						default: {
-							if (!args.length) {
-								term.writeln(
-									`\r\nUsage: ${command} <arguments>`
-								);
-								break;
-							}
-							const result = await runCli(parts);
-							if (result.exitCode === 127) {
-								term.writeln(
-									`\r\n${command}: command not found`
-								);
-							} else if (
-								!result.aborted &&
-								result.exitCode !== 0
-							) {
-								term.writeln(
-									`\r\nProcess exited with code ${result.exitCode}`
-								);
-							}
-							break;
+							term.writeln(`\r\n${command}: command not found`);
 						}
 					}
 				} catch (error) {
@@ -1207,49 +1617,60 @@ <h2>💡 Tips</h2>
 				try {
 					await currentProcess.terminate();
 				} finally {
+					currentProcess = null;
 					isRunningCommand = false;
 				}
-
-				currentProcess = null;
 			}
 
-			term.onData((data) => {
-				if (data === '\u0003') {
-					term.write('^C');
-					void abortActiveProcess();
-					currentLine = '';
-					return;
-				}
-				if (isRunningCommand) {
-					return;
-				}
-				switch (data) {
-					case '\r': {
-						term.write('\r\n');
-						const submitted = currentLine;
-						if (submitted.trim()) {
-							commandHistory.unshift(submitted);
-						}
-						historyIndex = -1;
+			term.onData((chunk) => {
+				for (const char of chunk) {
+					if (char === '\u0003') {
+						term.write('^C');
 						currentLine = '';
-						isRunningCommand = true;
-						void runTerminalCommand(submitted);
-						break;
+						void abortActiveProcess();
+						lastInputChar = char;
+						continue;
 					}
-					case '\u007F': {
-						if (currentLine.length > 0) {
-							currentLine = currentLine.slice(0, -1);
-							term.write('\b \b');
-						}
-						break;
+					if (isRunningCommand) {
+						lastInputChar = char;
+						continue;
 					}
-					default: {
-						if ((data >= ' ' && data <= '~') || data >= '\u00a0') {
-							currentLine += data;
-							term.write(data);
+					switch (char) {
+						case '\r':
+						case '\n': {
+							if (char === '\n' && lastInputChar === '\r') {
+								break;
+							}
+							term.write('\r\n');
+							const submitted = currentLine;
+							if (submitted.trim()) {
+								commandHistory.unshift(submitted);
+							}
+							historyIndex = -1;
+							currentLine = '';
+							isRunningCommand = true;
+							void runTerminalCommand(submitted);
+							break;
+						}
+						case '\u007f': {
+							if (currentLine.length > 0) {
+								currentLine = currentLine.slice(0, -1);
+								term.write('\b \b');
+							}
+							break;
+						}
+						default: {
+							if (char === '\n') {
+								break;
+							}
+							if (char >= ' ' || char >= '\u00a0') {
+								currentLine += char;
+								term.write(char);
+							}
+							break;
 						}
-						break;
 					}
+					lastInputChar = char;
 				}
 			});
 
@@ -1257,18 +1678,6 @@ <h2>💡 Tips</h2>
 				if (event.type !== 'keydown') {
 					return true;
 				}
-				if ((event.metaKey || event.ctrlKey) && event.code === 'KeyV') {
-					navigator.clipboard
-						.readText()
-						.then((text) => {
-							if (!isRunningCommand && text) {
-								currentLine += text;
-								refreshInputLine();
-							}
-						})
-						.catch(() => {});
-					return false;
-				}
 				if (event.metaKey || event.ctrlKey) {
 					return true;
 				}
@@ -1299,7 +1708,6 @@ <h2>💡 Tips</h2>
 				}
 				return true;
 			});
-
 			// Detect platform for keyboard shortcut display
 			const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 			const shortcutText = isMac ? 'Cmd+S' : 'Ctrl+S';
diff --git a/packages/playground/website/src/php-playground/components/Controls.tsx b/packages/playground/website/src/php-playground/components/Controls.tsx
new file mode 100644
index 0000000000..65adbf5c2f
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/Controls.tsx
@@ -0,0 +1,95 @@
+import { ChangeEvent, useMemo } from 'react';
+
+import { useAppDispatch, useAppSelector } from '../hooks';
+import { queueRun, setPhpVersion, setWpVersion } from '../store';
+import styles from './layout.module.css';
+
+interface ControlsProps {
+	onHelpClick: () => void;
+}
+
+export const Controls = ({ onHelpClick }: ControlsProps) => {
+	const dispatch = useAppDispatch();
+	const {
+		phpVersion,
+		wpVersion,
+		phpVersions,
+		wpVersions,
+		wpVersionsLoading,
+	} = useAppSelector((state) => state.playground);
+
+	const runLabel = useMemo(() => {
+		const isMac =
+			typeof navigator !== 'undefined' &&
+			navigator.platform.toUpperCase().includes('MAC');
+		return `Run (${isMac ? 'Cmd+S' : 'Ctrl+S'})`;
+	}, []);
+
+	const handlePhpVersionChange = (event: ChangeEvent<HTMLSelectElement>) => {
+		dispatch(setPhpVersion(event.target.value));
+	};
+
+	const handleWpVersionChange = (event: ChangeEvent<HTMLSelectElement>) => {
+		dispatch(setWpVersion(event.target.value));
+	};
+
+	const handleRunClick = () => {
+		dispatch(queueRun());
+	};
+
+	return (
+		<div className={styles.controls}>
+			<h1 className={styles.controlsTitle}>WordPress PHP Playground</h1>
+			<div className={styles.controlsRight}>
+				<label htmlFor="wpVersion">WordPress</label>
+				<select
+					id="wpVersion"
+					className={styles.select}
+					value={wpVersion}
+					onChange={handleWpVersionChange}
+				>
+					{wpVersionsLoading ? (
+						<option value={wpVersion}>Loading...</option>
+					) : (
+						wpVersions.map((version) => (
+							<option key={version} value={version}>
+								{version}
+							</option>
+						))
+					)}
+					{!wpVersionsLoading && !wpVersions.includes(wpVersion) && (
+						<option value={wpVersion}>{wpVersion}</option>
+					)}
+				</select>
+				<label htmlFor="phpVersion">PHP</label>
+				<select
+					id="phpVersion"
+					className={styles.select}
+					value={phpVersion}
+					onChange={handlePhpVersionChange}
+				>
+					{phpVersions.map((version) => (
+						<option key={version} value={version}>
+							{version}
+						</option>
+					))}
+				</select>
+				<button
+					id="runBtn"
+					type="button"
+					className={styles.runButton}
+					onClick={handleRunClick}
+				>
+					{runLabel}
+				</button>
+				<button
+					id="helpBtn"
+					className={styles.helpLink}
+					onClick={onHelpClick}
+				>
+					How does this work?
+				</button>
+			</div>
+		</div>
+	);
+};
diff --git a/packages/playground/website/src/php-playground/components/EditorHost.tsx b/packages/playground/website/src/php-playground/components/EditorHost.tsx
new file mode 100644
index 0000000000..3c3976a88c
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/EditorHost.tsx
@@ -0,0 +1,125 @@
+import { useEffect, useRef } from 'react';
+import { Compartment, EditorState } from '@codemirror/state';
+import {
+	EditorView,
+	keymap,
+	lineNumbers,
+	highlightActiveLine,
+	highlightActiveLineGutter,
+	dropCursor,
+	rectangularSelection,
+	crosshairCursor,
+} from '@codemirror/view';
+import {
+	defaultKeymap,
+	history,
+	historyKeymap,
+	indentWithTab,
+} from '@codemirror/commands';
+import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import {
+	autocompletion,
+	completionKeymap,
+	closeBrackets,
+	closeBracketsKeymap,
+} from '@codemirror/autocomplete';
+import {
+	foldGutter,
+	indentOnInput,
+	bracketMatching,
+	foldKeymap,
+	syntaxHighlighting,
+	defaultHighlightStyle,
+} from '@codemirror/language';
+import { php } from '@codemirror/lang-php';
+
+import { useAppDispatch, useAppSelector } from '../hooks';
+import { queueRun, setCode } from '../store';
+import styles from './layout.module.css';
+
+export const EditorHost = () => {
+	const dispatch = useAppDispatch();
+	const code = useAppSelector((state) => state.playground.code);
+	const editorRef = useRef<HTMLDivElement | null>(null);
+	const viewRef = useRef<EditorView | null>(null);
+	const phpCompartmentRef = useRef(new Compartment());
+
+	useEffect(() => {
+		if (viewRef.current) {
+			return;
+		}
+		const container = editorRef.current;
+		if (!container) {
+			return;
+		}
+
+		const state = EditorState.create({
+			doc: code,
+			extensions: [
+				lineNumbers(),
+				highlightActiveLineGutter(),
+				highlightActiveLine(),
+				foldGutter(),
+				dropCursor(),
+				rectangularSelection(),
+				crosshairCursor(),
+				phpCompartmentRef.current.of(php()),
+				syntaxHighlighting(defaultHighlightStyle),
+				indentOnInput(),
+				bracketMatching(),
+				closeBrackets(),
+				history(),
+				highlightSelectionMatches(),
+				autocompletion(),
+				EditorView.updateListener.of((update) => {
+					if (!update.docChanged) {
+						return;
+					}
+					const nextDoc = update.state.doc.toString();
+					dispatch(setCode(nextDoc));
+				}),
+				keymap.of([
+					{
+						key: 'Mod-s',
+						preventDefault: true,
+						run: () => {
+							dispatch(queueRun());
+							return true;
+						},
+					},
+					...closeBracketsKeymap,
+					...completionKeymap,
+					...foldKeymap,
+					...searchKeymap,
+					...historyKeymap,
+					...defaultKeymap,
+					indentWithTab,
+				]),
+			],
+		});
+
+		const view = new EditorView({ state, parent: container });
+		viewRef.current = view;
+
+		return () => {
+			view.destroy();
+			viewRef.current = null;
+		};
+	}, [code, dispatch]);
+
+	useEffect(() => {
+		const view = viewRef.current;
+		if (!view) {
+			return;
+		}
+		const currentDoc = view.state.doc.toString();
+		if (code === currentDoc) {
+			return;
+		}
+		view.dispatch({
+			changes: { from: 0, to: view.state.doc.length, insert: code },
+		});
+	}, [code]);
+
+	return <div id="editor" ref={editorRef} className={styles.editor} />;
+};
diff --git a/packages/playground/website/src/php-playground/components/HelpModal.tsx b/packages/playground/website/src/php-playground/components/HelpModal.tsx
new file mode 100644
index 0000000000..3434b3f068
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/HelpModal.tsx
@@ -0,0 +1,140 @@
+import { MouseEvent, useEffect } from 'react';
+import clsx from 'clsx';
+
+import styles from './layout.module.css';
+
+interface HelpModalProps {
+	isOpen: boolean;
+	onRequestClose: () => void;
+}
+
+export const HelpModal = ({ isOpen, onRequestClose }: HelpModalProps) => {
+	const modalClassName = clsx(styles.modal, {
+		[styles.modalVisible]: isOpen,
+	});
+
+	const handleOverlayClick = () => {
+		if (isOpen) {
+			onRequestClose();
+		}
+	};
+
+	const handleContentClick = (event: MouseEvent<HTMLDivElement>) => {
+		event.stopPropagation();
+	};
+
+	useEffect(() => {
+		if (!isOpen) {
+			return;
+		}
+		const handleKeydown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				onRequestClose();
+			}
+		};
+		document.addEventListener('keydown', handleKeydown);
+		return () => {
+			document.removeEventListener('keydown', handleKeydown);
+		};
+	}, [isOpen, onRequestClose]);
+
+	return (
+		<div
+			id="helpModal"
+			className={modalClassName}
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="helpModalTitle"
+			aria-hidden={!isOpen}
+			onClick={handleOverlayClick}
+		>
+			<div className={styles.modalContent} onClick={handleContentClick}>
+				<div className={styles.modalHeader}>
+					<h2 id="helpModalTitle" className={styles.modalTitle}>
+						✨ WordPress PHP Playground ✨
+					</h2>
+					<button
+						type="button"
+						className={styles.closeButton}
+						id="closeModal"
+						aria-label="Close help"
+						onClick={onRequestClose}
+					>
+						&times;
+					</button>
+				</div>
+				<div className={styles.modalBody}>
+					<p>
+						Welcome to the <strong>WordPress PHP Playground</strong>
+						! This interactive environment lets you experiment with
+						PHP code alongside a full WordPress installation—all
+						within your browser. No setup required!
+					</p>
+					<h3 className={styles.modalBodyHeading}>
+						🚀 Getting Started
+					</h3>
+					<ul className={styles.modalBodyList}>
+						<li>
+							<strong>Write PHP:</strong> Use the editor on the
+							left to enter PHP code.
+						</li>
+						<li>
+							<strong>Run Instantly:</strong> Click <em>Run</em>{' '}
+							or press <kbd>Ctrl/Cmd + S</kbd> to execute your
+							code.
+						</li>
+						<li>
+							<strong>See Output:</strong> Results appear in the
+							preview panel on the right.
+						</li>
+					</ul>
+					<h3 className={styles.modalBodyHeading}>🧰 Features</h3>
+					<ul className={styles.modalBodyList}>
+						<li>
+							<strong>Full WordPress:</strong> A complete
+							WordPress environment is available at{' '}
+							<code className={styles.modalBodyCode}>
+								/wordpress
+							</code>
+							.
+						</li>
+						<li>
+							<strong>Version Control:</strong> Choose different
+							WordPress and PHP versions on the top right.
+						</li>
+						<li>
+							<strong>Shareable URLs:</strong> Your code and
+							version choices are encoded in the address bar.
+						</li>
+					</ul>
+					<h3 className={styles.modalBodyHeading}>📚 Learn More</h3>
+					<ul className={styles.modalBodyList}>
+						<li>
+							<strong>Documentation:</strong>{' '}
+							<a
+								href="https://developer.wordpress.org/playground/"
+								target="_blank"
+								rel="noreferrer"
+								className={styles.modalBodyLink}
+							>
+								developer.wordpress.org/playground
+							</a>
+						</li>
+						<li>
+							<strong>GitHub:</strong>{' '}
+							<a
+								href="https://github.com/WordPress/wordpress-playground"
+								target="_blank"
+								rel="noreferrer"
+								className={styles.modalBodyLink}
+							>
+								github.com/WordPress/wordpress-playground
+							</a>
+						</li>
+					</ul>
+					<p>Have fun experimenting with WordPress and PHP! 💡</p>
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/packages/playground/website/src/php-playground/components/Layout.module.css b/packages/playground/website/src/php-playground/components/Layout.module.css
new file mode 100644
index 0000000000..f4cc20503f
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/Layout.module.css
@@ -0,0 +1,413 @@
+:global(:root) {
+	color-scheme: light;
+}
+
+:global(html),
+:global(body) {
+	margin: 0;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	font-family: system-ui, sans-serif;
+}
+
+.root {
+	flex: 1;
+	display: flex;
+	min-height: 0;
+	height: 100vh;
+	width: 100%;
+}
+
+.app {
+	flex: 1;
+	display: flex;
+	min-height: 0;
+	height: 100%;
+}
+
+.editorPane {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-width: 280px;
+}
+
+.controls {
+	padding: 8px 12px;
+	background: #f5f5f5;
+	border-bottom: 1px solid #ddd;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	font-size: 16px;
+}
+
+.controls,
+.controls * {
+	font-size: 16px;
+}
+
+.controlsTitle {
+	margin: 0;
+	font-size: 18px;
+	font-weight: 600;
+	color: #333;
+}
+
+.controlsRight {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.runButton {
+	padding: 6px 12px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	background: white;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.runButton:hover {
+	background: #f0f0f0;
+}
+
+.select {
+	padding: 6px 8px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	background: white;
+}
+
+.helpLink {
+	color: #0073aa;
+	text-decoration: none;
+	font-size: 14px;
+	margin-left: 8px;
+}
+
+.helpLink:hover {
+	text-decoration: underline;
+}
+
+.editorContent {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.editor {
+	flex: 1;
+	min-height: 0;
+	font-size: 14px;
+}
+
+:global(#editor .cm-editor) {
+	font-size: 14px;
+	line-height: 1.4;
+}
+
+:global(#editor .cm-content) {
+	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+		'Courier New', monospace;
+}
+
+:global(#editor .cm-editor .tok-keyword) {
+	color: #0969da;
+	font-weight: 600;
+}
+
+:global(#editor .cm-editor .tok-string) {
+	color: #032f62;
+}
+
+:global(#editor .cm-editor .tok-comment) {
+	color: #6a737d;
+	font-style: italic;
+}
+
+:global(#editor .cm-editor .tok-variableName) {
+	color: #d73a49;
+}
+
+:global(#editor .cm-editor .tok-number) {
+	color: #005cc5;
+}
+
+:global(#editor .cm-editor .tok-operator) {
+	color: #d73a49;
+}
+
+:global(#editor .cm-editor .tok-punctuation) {
+	color: #24292e;
+}
+
+:global(#editor .cm-editor .tok-typeName) {
+	color: #6f42c1;
+}
+
+:global(#editor .cm-editor .tok-propertyName) {
+	color: #005cc5;
+}
+
+:global(#editor .cm-editor .tok-function) {
+	color: #6f42c1;
+	font-weight: 600;
+}
+
+.previewPane {
+	flex: 1;
+	position: relative;
+	min-width: 320px;
+}
+
+.preview {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	border: 0;
+}
+
+.terminalSection {
+	background: #111;
+	color: #fff;
+	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+		'Courier New', monospace;
+	display: flex;
+	flex-direction: column;
+	border-top: 1px solid #333;
+}
+
+.terminalSectionCollapsed .terminalPane {
+	display: none;
+}
+
+.terminalHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 16px;
+	background: #1a1a1a;
+	gap: 12px;
+	cursor: pointer;
+	&:hover {
+		opacity: 0.8;
+	}
+}
+
+.terminalResizeHandle {
+	height: 6px;
+	cursor: ns-resize;
+	background: #202020;
+	touch-action: none;
+}
+
+.terminalResizeHandle:hover,
+.terminalResizeHandleDragging {
+	background: #2f2f2f;
+}
+
+.terminalPane {
+	box-sizing: border-box;
+	overflow: hidden;
+	transition: height 0.1s ease;
+}
+
+.terminal {
+	width: 100%;
+	height: 100%;
+}
+
+.modal {
+	display: none;
+	position: fixed;
+	z-index: 1000;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modalVisible {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.modalContent {
+	background: white;
+	border-radius: 8px;
+	padding: 24px;
+	max-width: 600px;
+	max-height: 80vh;
+	overflow-y: auto;
+	position: relative;
+	margin: 20px;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.modalHeader {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 16px;
+	padding-bottom: 16px;
+	border-bottom: 1px solid #ddd;
+}
+
+.modalTitle {
+	margin: 0;
+	color: #333;
+	font-size: 20px;
+}
+
+.closeButton {
+	background: none;
+	border: none;
+	font-size: 24px;
+	cursor: pointer;
+	color: #666;
+	padding: 0;
+	width: 30px;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.closeButton:hover {
+	color: #333;
+}
+
+.modalBody {
+	line-height: 1.6;
+	color: #555;
+}
+
+.modalBodyHeading {
+	color: #333;
+	margin-top: 20px;
+	margin-bottom: 8px;
+}
+
+.modalBodyList {
+	padding-left: 20px;
+}
+
+.modalBodyLink {
+	color: #0073aa;
+	text-decoration: none;
+}
+
+.modalBodyLink:hover {
+	text-decoration: underline;
+}
+
+.modalBodyCode {
+	background: #f5f5f5;
+	padding: 2px 4px;
+	border-radius: 3px;
+	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+		'Courier New', monospace;
+	font-size: 14px;
+}
+
+@media (max-width: 1200px) {
+	.app {
+		flex-direction: column;
+	}
+	.previewPane {
+		height: 45vh;
+		min-width: 0;
+	}
+	.editorPane {
+		min-width: 0;
+	}
+}
+
+@media (max-width: 900px) {
+	.controlsTitle {
+		font-size: 16px;
+	}
+	.controlsRight {
+		gap: 6px;
+	}
+	.controlsRight label,
+	.controlsRight select,
+	.controlsRight button,
+	.controlsRight a {
+		font-size: 14px;
+	}
+	.previewPane {
+		height: 40vh;
+	}
+}
+
+@media (max-width: 768px) {
+	.controls {
+		flex-direction: column;
+		align-items: stretch;
+		gap: 8px;
+		padding: 12px;
+	}
+	.controlsTitle {
+		font-size: 14px;
+		text-align: center;
+		margin-bottom: 4px;
+	}
+	.controlsRight {
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+	.runButton,
+	.select {
+		padding: 8px 12px;
+		min-height: 44px;
+	}
+	.previewPane {
+		height: 35vh;
+	}
+	:global(#editor .cm-editor) {
+		font-size: 13px;
+	}
+	.terminalPane {
+		height: 200px;
+	}
+}
+
+@media (max-width: 480px) {
+	.controls {
+		padding: 8px;
+	}
+	.controlsTitle {
+		font-size: 13px;
+	}
+	.controlsRight {
+		font-size: 13px;
+	}
+	.runButton,
+	.select {
+		min-height: 40px;
+		font-size: 13px;
+	}
+	.helpLink {
+		font-size: 12px;
+	}
+	.previewPane {
+		height: 30vh;
+	}
+	:global(#editor .cm-editor) {
+		font-size: 12px;
+		line-height: 1.3;
+	}
+	.terminalPane {
+		height: 160px;
+	}
+}
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
new file mode 100644
index 0000000000..7852499dfa
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import styles from './layout.module.css';
+import { Controls } from './Controls';
+import { EditorHost } from './EditorHost';
+import { HelpModal } from './HelpModal';
+import { PlaygroundManager } from './PlaygroundManager';
+import { Terminal } from './Terminal';
+
+export const Layout = () => {
+	const [isHelpOpen, setHelpOpen] = useState(false);
+
+	useEffect(() => {
+		const previousTitle = document.title;
+		document.title = 'WordPress PHP Playground';
+		return () => {
+			document.title = previousTitle;
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!isHelpOpen) {
+			return;
+		}
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+		return () => {
+			document.body.style.overflow = previousOverflow;
+		};
+	}, [isHelpOpen]);
+
+	const handleOpenHelp = useCallback(() => setHelpOpen(true), []);
+	const handleCloseHelp = useCallback(() => setHelpOpen(false), []);
+
+	return (
+		<div id="php-playground-react-root" className={styles.root}>
+			<PlaygroundManager />
+			<div id="app" className={styles.app}>
+				<div id="editorPane" className={styles.editorPane}>
+					<Controls onHelpClick={handleOpenHelp} />
+					<div className={styles.editorContent}>
+						<EditorHost />
+						<Terminal />
+					</div>
+				</div>
+				<div id="previewPane" className={styles.previewPane}>
+					<iframe
+						id="preview"
+						title="WordPress Playground"
+						className={styles.preview}
+					/>
+				</div>
+			</div>
+			<HelpModal isOpen={isHelpOpen} onRequestClose={handleCloseHelp} />
+		</div>
+	);
+};
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
new file mode 100644
index 0000000000..79d0a0fa14
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
@@ -0,0 +1,233 @@
+import { useEffect, useRef } from 'react';
+
+import { startPlaygroundWeb } from '@wp-playground/client';
+
+import { DEFAULT_WP_REMOTE } from '../constants';
+import { useAppDispatch, useAppSelector } from '../hooks';
+import {
+	applyUrlState,
+	setBootError,
+	setBootStatus,
+	setClient,
+	setWpVersion,
+	setWpVersions,
+	setWpVersionsLoading,
+} from '../store';
+import { loadStateFromURL, saveStateToURL } from '../url-state';
+import { playgroundRuntime } from '../runtime';
+
+export const PlaygroundManager = () => {
+	const dispatch = useAppDispatch();
+	const { code, phpVersion, wpVersion, runRequestId, client, initialized } =
+		useAppSelector((state) => state.playground);
+
+	const codeRef = useRef(code);
+	const phpVersionRef = useRef(phpVersion);
+	const wpVersionRef = useRef(wpVersion);
+	const clientRef = useRef(client);
+	const runCountRef = useRef(0);
+	const bootPromiseRef = useRef<Promise<void>>(Promise.resolve());
+
+	useEffect(() => {
+		return () => {
+			clientRef.current = null;
+			playgroundRuntime.setClient(null);
+			playgroundRuntime.setBootPromise(Promise.resolve());
+		};
+	}, []);
+
+	useEffect(() => {
+		codeRef.current = code;
+	}, [code]);
+
+	useEffect(() => {
+		phpVersionRef.current = phpVersion;
+	}, [phpVersion]);
+
+	useEffect(() => {
+		wpVersionRef.current = wpVersion;
+	}, [wpVersion]);
+
+	useEffect(() => {
+		clientRef.current = client;
+	}, [client]);
+
+	useEffect(() => {
+		if (initialized) {
+			return;
+		}
+		const state = loadStateFromURL();
+		dispatch(
+			applyUrlState({
+				code: state.code,
+				phpVersion: state.phpVersion,
+				wpVersion: state.wpVersion,
+			})
+		);
+	}, [dispatch, initialized]);
+
+	useEffect(() => {
+		const handleHashChange = () => {
+			const state = loadStateFromURL();
+			dispatch(
+				applyUrlState({
+					code: state.code,
+					phpVersion: state.phpVersion,
+					wpVersion: state.wpVersion,
+				})
+			);
+		};
+		window.addEventListener('hashchange', handleHashChange);
+		return () => {
+			window.removeEventListener('hashchange', handleHashChange);
+		};
+	}, [dispatch]);
+
+	useEffect(() => {
+		if (!initialized) {
+			return;
+		}
+		const timeout = window.setTimeout(() => {
+			saveStateToURL({
+				code: codeRef.current,
+				php: phpVersionRef.current,
+				wp: wpVersionRef.current,
+			});
+		}, 500);
+		return () => window.clearTimeout(timeout);
+	}, [code, phpVersion, wpVersion, initialized]);
+
+	useEffect(() => {
+		if (!initialized) {
+			return;
+		}
+
+		const previewIframe = document.getElementById(
+			'preview'
+		) as HTMLIFrameElement | null;
+		if (!previewIframe) {
+			return;
+		}
+
+		let cancelled = false;
+		const boot = async () => {
+			dispatch(setBootStatus('booting'));
+			dispatch(setBootError(null));
+			dispatch(setClient(null));
+			clientRef.current = null;
+			playgroundRuntime.setClient(null);
+			dispatch(setWpVersionsLoading(true));
+			runCountRef.current = 0;
+
+			previewIframe.src = DEFAULT_WP_REMOTE;
+
+			try {
+				const clientInstance = await startPlaygroundWeb({
+					iframe: previewIframe,
+					remoteUrl: previewIframe.src,
+					blueprint: {
+						preferredVersions: {
+							wp: wpVersionRef.current,
+							php: phpVersionRef.current,
+						},
+					},
+				});
+
+				if (cancelled) {
+					try {
+						if (
+							'destroy' in clientInstance &&
+							typeof (clientInstance as any).destroy ===
+								'function'
+						) {
+							await (clientInstance as any).destroy();
+						}
+					} catch {}
+					return;
+				}
+
+				try {
+					const { all, latest } =
+						await clientInstance.getMinifiedWordPressVersions();
+					const versions = Object.keys(all);
+					dispatch(setWpVersions(versions));
+					if (!versions.includes(wpVersionRef.current)) {
+						dispatch(setWpVersion(latest));
+					}
+				} catch (error) {
+					console.warn(
+						'Failed to load WordPress versions list from client',
+						error
+					);
+					dispatch(setWpVersionsLoading(false));
+				}
+
+				await clientInstance.isReady;
+				if (cancelled) {
+					try {
+						if (
+							'destroy' in clientInstance &&
+							typeof (clientInstance as any).destroy ===
+								'function'
+						) {
+							await (clientInstance as any).destroy();
+						}
+					} catch {}
+					return;
+				}
+
+				await clientInstance.writeFile(
+					'/wordpress/code.php',
+					codeRef.current
+				);
+				await clientInstance.goTo('/code.php');
+
+				clientRef.current = clientInstance;
+				dispatch(setClient(clientInstance));
+				playgroundRuntime.setClient(clientInstance);
+				dispatch(setBootStatus('ready'));
+			} catch (error: any) {
+				const message = error?.message ?? String(error);
+				dispatch(setBootStatus('error'));
+				dispatch(setBootError(message));
+				dispatch(setWpVersionsLoading(false));
+			}
+		};
+
+		const promise = boot();
+		bootPromiseRef.current = promise;
+		playgroundRuntime.setBootPromise(promise);
+
+		return () => {
+			cancelled = true;
+		};
+	}, [dispatch, phpVersion, wpVersion, initialized]);
+
+	useEffect(() => {
+		if (!initialized) {
+			return;
+		}
+		if (runRequestId === 0) {
+			return;
+		}
+
+		const executeRun = async () => {
+			await bootPromiseRef.current.catch(() => {});
+			const currentClient = clientRef.current;
+			if (!currentClient) {
+				return;
+			}
+			runCountRef.current += 1;
+			await currentClient.writeFile(
+				'/wordpress/code.php',
+				codeRef.current
+			);
+			const cacheBuster = `run=${runCountRef.current}-${Date.now()}`;
+			await currentClient.goTo(`/code.php?${cacheBuster}`);
+		};
+
+		void executeRun();
+	}, [runRequestId, initialized]);
+
+	return null;
+};
diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/Terminal.tsx
new file mode 100644
index 0000000000..8ed6179b0d
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/Terminal.tsx
@@ -0,0 +1,770 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import clsx from 'clsx';
+import { splitShellCommand } from '@php-wasm/util';
+import { Terminal as XTerm } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+
+import { playgroundRuntime } from '../runtime';
+import styles from './layout.module.css';
+import 'xterm/css/xterm.css';
+
+const MIN_TERMINAL_HEIGHT = 140;
+const MAX_TERMINAL_HEIGHT = 600;
+const DEFAULT_TERMINAL_HEIGHT = 220;
+const PROGRESS_BAR_WIDTH = 28;
+const SPINNER_FRAMES = ['-', '\\', '|', '/'];
+
+interface DownloadProgress {
+	label: string;
+	totalBytes: number;
+	receivedBytes: number;
+	spinnerIndex: number;
+	lastRenderedLength: number;
+}
+
+const clampHeight = (value: number) =>
+	Math.min(MAX_TERMINAL_HEIGHT, Math.max(MIN_TERMINAL_HEIGHT, value));
+
+const formatBytes = (bytes: number) => {
+	if (bytes < 1024) {
+		return `${bytes} B`;
+	}
+	const units = ['KB', 'MB', 'GB'];
+	let size = bytes / 1024;
+	let unitIndex = 0;
+	while (size >= 1024 && unitIndex < units.length - 1) {
+		size /= 1024;
+		unitIndex += 1;
+	}
+	return `${size.toFixed(1)} ${units[unitIndex]}`;
+};
+
+const drawProgress = (term: XTerm, progress: DownloadProgress) => {
+	let line: string;
+	if (progress.totalBytes > 0) {
+		const percent = Math.min(
+			100,
+			Math.round((progress.receivedBytes / progress.totalBytes) * 100)
+		);
+		const filled = Math.round((PROGRESS_BAR_WIDTH * percent) / 100);
+		const bar = '#'.repeat(filled).padEnd(PROGRESS_BAR_WIDTH, ' ');
+		line = `${progress.label}: [${bar}] ${percent
+			.toString()
+			.padStart(3, ' ')}%`;
+	} else {
+		const spinner =
+			SPINNER_FRAMES[progress.spinnerIndex % SPINNER_FRAMES.length];
+		line = `${progress.label}: ${spinner} ${formatBytes(
+			progress.receivedBytes
+		)}`;
+	}
+	const padLength = Math.max(line.length, progress.lastRenderedLength);
+	term.write(`\r${line.padEnd(padLength, ' ')}`);
+	progress.lastRenderedLength = padLength;
+};
+
+export const Terminal = () => {
+	const terminalContainerRef = useRef<HTMLDivElement | null>(null);
+	const fitAddonRef = useRef<FitAddon | null>(null);
+	const progressRef = useRef<DownloadProgress | null>(null);
+
+	const [height, setHeight] = useState(DEFAULT_TERMINAL_HEIGHT);
+	const [isCollapsed, setCollapsed] = useState(false);
+	const [isDragging, setDragging] = useState(false);
+
+	const lastExpandedHeightRef = useRef(DEFAULT_TERMINAL_HEIGHT);
+	const isCollapsedRef = useRef(isCollapsed);
+	const isDraggingRef = useRef(false);
+	const dragContextRef = useRef({
+		pointerId: -1,
+		startY: 0,
+		startHeight: DEFAULT_TERMINAL_HEIGHT,
+	});
+
+	useEffect(() => {
+		isCollapsedRef.current = isCollapsed;
+	}, [isCollapsed]);
+
+	useEffect(() => {
+		if (!isCollapsed) {
+			lastExpandedHeightRef.current = height;
+		}
+	}, [height, isCollapsed]);
+
+	useEffect(() => {
+		if (!isDragging) {
+			return;
+		}
+		const previousUserSelect = document.body.style.userSelect;
+		document.body.style.userSelect = 'none';
+		return () => {
+			document.body.style.userSelect = previousUserSelect;
+		};
+	}, [isDragging]);
+
+	const applyHeight = useCallback((value: number) => {
+		setHeight(clampHeight(value));
+	}, []);
+
+	const handlePointerDown = useCallback(
+		(event: ReactPointerEvent<HTMLDivElement>) => {
+			event.preventDefault();
+
+			let baseHeight = height;
+			if (isCollapsedRef.current) {
+				const restored = clampHeight(
+					lastExpandedHeightRef.current || DEFAULT_TERMINAL_HEIGHT
+				);
+				baseHeight = restored;
+				setCollapsed(false);
+				setHeight(restored);
+			}
+
+			dragContextRef.current = {
+				pointerId: event.pointerId,
+				startY: event.clientY,
+				startHeight: baseHeight,
+			};
+			isDraggingRef.current = true;
+			setDragging(true);
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+		},
+		[height]
+	);
+
+	const handlePointerMove = useCallback(
+		(event: ReactPointerEvent<HTMLDivElement>) => {
+			if (
+				!isDraggingRef.current ||
+				dragContextRef.current.pointerId !== event.pointerId
+			) {
+				return;
+			}
+			const delta = dragContextRef.current.startY - event.clientY;
+			applyHeight(dragContextRef.current.startHeight + delta);
+		},
+		[applyHeight]
+	);
+
+	const endResize = useCallback(
+		(event: ReactPointerEvent<HTMLDivElement>) => {
+			if (dragContextRef.current.pointerId !== event.pointerId) {
+				return;
+			}
+			event.currentTarget.releasePointerCapture?.(event.pointerId);
+			isDraggingRef.current = false;
+			setDragging(false);
+			fitAddonRef.current?.fit();
+		},
+		[]
+	);
+
+	const toggleCollapse = useCallback(() => {
+		setCollapsed((prev) => {
+			if (prev) {
+				const restored = clampHeight(
+					lastExpandedHeightRef.current || DEFAULT_TERMINAL_HEIGHT
+				);
+				setHeight(restored);
+				return false;
+			}
+			lastExpandedHeightRef.current = height;
+			return true;
+		});
+	}, [height]);
+
+	useEffect(() => {
+		if (isCollapsed) {
+			return;
+		}
+		const fitAddon = fitAddonRef.current;
+		if (!fitAddon) {
+			return;
+		}
+		const frame = requestAnimationFrame(() => {
+			try {
+				fitAddon.fit();
+			} catch {}
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [height, isCollapsed]);
+
+	useEffect(() => {
+		const handleResize = () => {
+			if (!isCollapsedRef.current) {
+				try {
+					fitAddonRef.current?.fit();
+				} catch {}
+			}
+		};
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	useEffect(() => {
+		const container = terminalContainerRef.current;
+		if (!container) {
+			return;
+		}
+
+		const term = new XTerm({
+			convertEol: true,
+			fontSize: 14,
+			theme: {
+				background: '#111111',
+				foreground: '#f1f5f9',
+			},
+			cursorBlink: true,
+		});
+		const fitAddon = new FitAddon();
+		term.loadAddon(fitAddon);
+		term.open(container);
+		fitAddonRef.current = fitAddon;
+		requestAnimationFrame(() => {
+			try {
+				fitAddon.fit();
+			} catch {}
+		});
+
+		const startDownloadProgress = (label: string, totalBytes: number) => {
+			progressRef.current = {
+				label,
+				totalBytes,
+				receivedBytes: 0,
+				spinnerIndex: 0,
+				lastRenderedLength: 0,
+			};
+			term.writeln('');
+			drawProgress(term, progressRef.current);
+		};
+
+		const updateDownloadProgress = (
+			receivedBytes: number,
+			totalBytes: number
+		) => {
+			if (!progressRef.current) {
+				return;
+			}
+			progressRef.current.receivedBytes = receivedBytes;
+			if (totalBytes) {
+				progressRef.current.totalBytes = totalBytes;
+			}
+			progressRef.current.spinnerIndex += 1;
+			drawProgress(term, progressRef.current);
+		};
+
+		const finishDownloadProgress = (message: string) => {
+			if (!progressRef.current) {
+				return;
+			}
+			if (progressRef.current.totalBytes) {
+				progressRef.current.receivedBytes =
+					progressRef.current.totalBytes;
+				drawProgress(term, progressRef.current);
+			}
+			term.writeln('');
+			term.writeln(`${progressRef.current.label}: ${message}`);
+			progressRef.current = null;
+		};
+
+		const failDownloadProgress = (message: string) => {
+			if (!progressRef.current) {
+				term.writeln(message);
+				return;
+			}
+			const failureLine = `${progressRef.current.label}: failed`;
+			const pad = Math.max(
+				failureLine.length,
+				progressRef.current.lastRenderedLength
+			);
+			term.write(`\r${failureLine.padEnd(pad, ' ')}`);
+			term.writeln('');
+			term.writeln(message);
+			progressRef.current = null;
+		};
+
+		const prompt = (newLine = true) => {
+			term.write(newLine ? '\r\n$ ' : '$ ');
+		};
+
+		const refreshInputLine = (currentLine: string) => {
+			term.write(`\r\x1b[2K$ ${currentLine}`);
+		};
+
+		const writeStdout = (text: string) => {
+			if (!text) {
+				return;
+			}
+			term.write(text.replace(/\r?\n/g, '\r\n'));
+		};
+
+		const writeStderr = (text: string) => {
+			if (!text) {
+				return;
+			}
+			term.write(`\u001b[31m${text.replace(/\r?\n/g, '\r\n')}\u001b[0m`);
+		};
+
+		term.writeln(
+			'WordPress Playground CLI ready. Type `help` to see available commands.'
+		);
+		prompt(false);
+
+		const downloadWithProgress = async (url: string, label: string) => {
+			try {
+				const response = await fetch(url);
+				if (!response.ok) {
+					throw new Error(
+						`Failed to download ${label.toLowerCase()}.`
+					);
+				}
+				const totalHeader = response.headers.get('content-length');
+				const totalBytes = totalHeader ? Number(totalHeader) : 0;
+				startDownloadProgress(label, totalBytes);
+
+				if (!response.body || !response.body.getReader) {
+					const buffer = await response.arrayBuffer();
+					finishDownloadProgress('complete');
+					return new Uint8Array(buffer);
+				}
+
+				const reader = response.body.getReader();
+				const chunks: Uint8Array[] = [];
+				let received = 0;
+				while (true) {
+					const { value, done } = await reader.read();
+					if (done) {
+						break;
+					}
+					if (value) {
+						chunks.push(value);
+						received += value.byteLength;
+						updateDownloadProgress(received, totalBytes);
+					}
+				}
+
+				const bytes = new Uint8Array(received);
+				let offset = 0;
+				for (const chunk of chunks) {
+					bytes.set(chunk, offset);
+					offset += chunk.byteLength;
+				}
+				finishDownloadProgress('complete');
+				return bytes;
+			} catch (error: any) {
+				failDownloadProgress(error?.message || String(error));
+				throw error;
+			}
+		};
+
+		const ensureBootReady = async () => {
+			await playgroundRuntime.getBootPromise();
+			const client = playgroundRuntime.getClient();
+			if (!client) {
+				throw new Error('Playground client is not ready yet.');
+			}
+			return client as any;
+		};
+
+		const ensureTerminalExpanded = () => {
+			if (!isCollapsedRef.current) {
+				return;
+			}
+			const targetHeight = clampHeight(
+				lastExpandedHeightRef.current || DEFAULT_TERMINAL_HEIGHT
+			);
+			lastExpandedHeightRef.current = targetHeight;
+			setCollapsed(false);
+			setHeight(targetHeight);
+		};
+
+		const ensureWpCliBinary = async () => {
+			const client = await ensureBootReady();
+			const path = '/tmp/wp-cli.phar';
+			if (await client.fileExists(path)) {
+				return;
+			}
+			term.writeln('\r\nPreparing WP-CLI...');
+			const binary = await downloadWithProgress(
+				'https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar',
+				'WP-CLI download'
+			);
+			await client.writeFile(path, binary);
+		};
+
+		const ensureComposerBinary = async () => {
+			const client = await ensureBootReady();
+			const path = '/tmp/composer.phar';
+			if (await client.fileExists(path)) {
+				return;
+			}
+			term.writeln('\r\nPreparing Composer...');
+			const binary = await downloadWithProgress(
+				'https://wordpress-playground-cors-proxy.net/?https://getcomposer.org/download/2.8.12/composer.phar',
+				'Composer download'
+			);
+			await client.writeFile(`${path}.bin`, binary);
+			await client.writeFile(
+				path,
+				`<?php
+// Composer assumes the grapheme_strlen function is available
+// and will crash if it's not. Symfony Polyfills somehow do
+// not kick in in this case.
+function grapheme_strlen($string) {
+	return strlen($string);
+}
+require_once __FILE__ . '.bin';
+`
+			);
+		};
+
+		const runCli = async (
+			argv: string[],
+			options: { env?: Record<string, string> } = {}
+		) => {
+			const client = await ensureBootReady();
+			const requestHandler = client.__internal_getRequestHandler?.();
+			const processManager = requestHandler?.processManager;
+			const { php, reap } = processManager
+				? await processManager.acquirePHPInstance()
+				: { php: await client.__internal_getPHP?.(), reap: () => {} };
+			try {
+				const response = await php.cli(argv, options);
+				const stdoutReader = response.stdout.getReader();
+				const stderrReader = response.stderr.getReader();
+				const stdoutDecoder = new TextDecoder();
+				const stderrDecoder = new TextDecoder();
+				let aborted = false;
+
+				const activeProcess = {
+					async terminate() {
+						if (aborted) {
+							return;
+						}
+						aborted = true;
+						try {
+							await stdoutReader.cancel();
+						} catch {}
+						try {
+							await stderrReader.cancel();
+						} catch {}
+						try {
+							php.exit(130);
+						} catch {}
+					},
+				};
+				currentProcess = activeProcess;
+
+				const streamStdout = (async () => {
+					try {
+						while (!aborted) {
+							const { value, done } = await stdoutReader.read();
+							if (done) {
+								break;
+							}
+							if (value) {
+								const text = stdoutDecoder.decode(value, {
+									stream: true,
+								});
+								writeStdout(text);
+							}
+						}
+						const flush = stdoutDecoder.decode();
+						writeStdout(flush);
+					} catch (error) {
+						if (!aborted) {
+							throw error;
+						}
+					}
+				})();
+
+				const streamStderr = (async () => {
+					try {
+						while (!aborted) {
+							const { value, done } = await stderrReader.read();
+							if (done) {
+								break;
+							}
+							if (value) {
+								const text = stderrDecoder.decode(value, {
+									stream: true,
+								});
+								writeStderr(text);
+							}
+						}
+						const flush = stderrDecoder.decode();
+						writeStderr(flush);
+					} catch (error) {
+						if (!aborted) {
+							throw error;
+						}
+					}
+				})();
+
+				const exitCodePromise = response.exitCode.catch(
+					(error: any) => {
+						if (!aborted) {
+							throw error;
+						}
+						return 130;
+					}
+				);
+
+				exitCodePromise.finally(() => reap());
+
+				const [, , exitCode] = await Promise.all([
+					streamStdout.catch(() => {}),
+					streamStderr.catch(() => {}),
+					exitCodePromise,
+				]);
+
+				const result = {
+					exitCode,
+					aborted,
+				};
+				currentProcess = null;
+				return result;
+			} catch (error) {
+				currentProcess = null;
+				throw error;
+			}
+		};
+
+		const commandHistory: string[] = [];
+		let historyIndex = -1;
+		let currentLine = '';
+		let isRunningCommand = false;
+		let currentProcess: { terminate: () => Promise<void> } | null = null;
+		let lastInputChar = '';
+
+		const runTerminalCommand = async (rawInput: string) => {
+			const trimmed = rawInput.trim();
+			if (!trimmed) {
+				isRunningCommand = false;
+				prompt();
+				return;
+			}
+			const parts = splitShellCommand(trimmed);
+			if (!parts.length) {
+				isRunningCommand = false;
+				prompt();
+				return;
+			}
+
+			ensureTerminalExpanded();
+
+			const [command, ...args] = parts;
+			try {
+				if (command === 'help') {
+					term.writeln(
+						'\r\nAvailable commands:\r\n  help        Show this message\r\n  php <...>  Run PHP CLI arguments\r\n  wp <...>   Run WP-CLI (auto-downloads if needed)\r\n  composer <...>  Run Composer (auto-downloads if needed)'
+					);
+				} else if (command === 'php') {
+					if (!args.length) {
+						term.writeln('\r\nUsage: php <arguments>');
+					} else {
+						const result = await runCli(['php', ...args]);
+						if (!result.aborted && result.exitCode !== 0) {
+							term.writeln(
+								`\r\nProcess exited with code ${result.exitCode}`
+							);
+						}
+					}
+				} else if (command === 'wp') {
+					await ensureWpCliBinary();
+					const result = await runCli([
+						'php',
+						'/tmp/wp-cli.phar',
+						'--path=/wordpress',
+						...args,
+					]);
+					if (!result.aborted && result.exitCode !== 0) {
+						term.writeln(
+							`\r\nProcess exited with code ${result.exitCode}`
+						);
+					}
+				} else if (command === 'composer') {
+					await ensureComposerBinary();
+					const result = await runCli([
+						'php',
+						'/tmp/composer.phar',
+						...args,
+					]);
+					if (!result.aborted && result.exitCode !== 0) {
+						term.writeln(
+							`\r\nProcess exited with code ${result.exitCode}`
+						);
+					}
+				} else {
+					term.writeln(`\r\n${command}: command not found`);
+				}
+			} catch (error: any) {
+				const message = error?.message || String(error);
+				term.writeln(`\r\nError: ${message}`);
+			} finally {
+				isRunningCommand = false;
+				if (!currentProcess) {
+					prompt();
+				}
+			}
+		};
+
+		const abortActiveProcess = async () => {
+			if (!currentProcess) {
+				isRunningCommand = false;
+				prompt();
+				return;
+			}
+			try {
+				await currentProcess.terminate();
+			} finally {
+				currentProcess = null;
+				isRunningCommand = false;
+			}
+		};
+
+		term.onData((chunk) => {
+			for (const char of chunk) {
+				if (char === '\u0003') {
+					term.write('^C');
+					currentLine = '';
+					void abortActiveProcess();
+					lastInputChar = char;
+					continue;
+				}
+				if (isRunningCommand) {
+					lastInputChar = char;
+					continue;
+				}
+				switch (char) {
+					case '\r':
+					case '\n': {
+						if (char === '\n' && lastInputChar === '\r') {
+							break;
+						}
+						term.write('\r\n');
+						const submitted = currentLine;
+						if (submitted.trim()) {
+							commandHistory.unshift(submitted);
+						}
+						historyIndex = -1;
+						currentLine = '';
+						isRunningCommand = true;
+						void runTerminalCommand(submitted);
+						break;
+					}
+					case '\u007f': {
+						if (currentLine.length > 0) {
+							currentLine = currentLine.slice(0, -1);
+							term.write('\b \b');
+						}
+						break;
+					}
+					default: {
+						if (char === '\n') {
+							break;
+						}
+						if (char >= ' ' || char >= '\u00a0') {
+							currentLine += char;
+							term.write(char);
+						}
+						break;
+					}
+				}
+				lastInputChar = char;
+			}
+		});
+
+		term.attachCustomKeyEventHandler((event) => {
+			if (event.type !== 'keydown') {
+				return true;
+			}
+			if (event.metaKey || event.ctrlKey) {
+				return true;
+			}
+			if (event.code === 'ArrowUp') {
+				event.preventDefault();
+				if (!commandHistory.length) {
+					return false;
+				}
+				const nextIndex = historyIndex + 1;
+				if (nextIndex < commandHistory.length) {
+					historyIndex = nextIndex;
+					currentLine = commandHistory[historyIndex];
+					refreshInputLine(currentLine);
+				}
+				return false;
+			}
+			if (event.code === 'ArrowDown') {
+				event.preventDefault();
+				if (historyIndex > 0) {
+					historyIndex -= 1;
+					currentLine = commandHistory[historyIndex];
+				} else {
+					historyIndex = -1;
+					currentLine = '';
+				}
+				refreshInputLine(currentLine);
+				return false;
+			}
+			return true;
+		});
+
+		return () => {
+			term.dispose();
+			fitAddonRef.current = null;
+			progressRef.current = null;
+		};
+	}, []);
+
+	const sectionClassName = clsx(styles.terminalSection, {
+		[styles.terminalSectionCollapsed]: isCollapsed,
+	});
+
+	const handleClassName = clsx(styles.terminalResizeHandle, {
+		[styles.terminalResizeHandleDragging]: isDragging,
+	});
+
+	const paneStyle = isCollapsed
+		? { height: 0, padding: 0 }
+		: { height, padding: 8 };
+
+	return (
+		<section
+			id="terminalSection"
+			className={sectionClassName}
+			aria-label="Playground terminal"
+		>
+			<div
+				id="terminalResizeHandle"
+				className={handleClassName}
+				role="separator"
+				aria-orientation="horizontal"
+				aria-label="Resize terminal"
+				onPointerDown={handlePointerDown}
+				onPointerMove={handlePointerMove}
+				onPointerUp={endResize}
+				onPointerCancel={endResize}
+			/>
+			<header
+				className={styles.terminalHeader}
+				onClick={toggleCollapse}
+				aria-expanded={!isCollapsed}
+			>
+				Terminal
+			</header>
+			<div
+				id="terminalPane"
+				className={styles.terminalPane}
+				style={paneStyle}
+			>
+				<div
+					ref={terminalContainerRef}
+					id="terminal"
+					className={styles.terminal}
+				/>
+			</div>
+		</section>
+	);
+};
diff --git a/packages/playground/website/src/php-playground/constants.ts b/packages/playground/website/src/php-playground/constants.ts
new file mode 100644
index 0000000000..82a04ba9e2
--- /dev/null
+++ b/packages/playground/website/src/php-playground/constants.ts
@@ -0,0 +1,17 @@
+export const DEFAULT_PHP_VERSION = '8.4';
+export const DEFAULT_WP_VERSION = '6.8';
+export const DEFAULT_WP_REMOTE = 'https://playground.wordpress.net/remote.html';
+
+export const DEFAULT_CODE = `<?php
+echo "Hello from PHP " . phpversion();
+echo "<br>";
+
+// WordPress is available if you need it!
+require '/wordpress/wp-load.php';
+
+echo "WordPress " . wp_get_wp_version() . "<br>";
+
+$html_processor = WP_HTML_Processor::create_fragment('<p><span>Hey!</span></p>');
+$html_processor->next_tag();
+var_dump($html_processor->get_tag());
+?>`;
diff --git a/packages/playground/website/src/php-playground/hooks.ts b/packages/playground/website/src/php-playground/hooks.ts
new file mode 100644
index 0000000000..a6ab8518a7
--- /dev/null
+++ b/packages/playground/website/src/php-playground/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
new file mode 100644
index 0000000000..24752b6c05
--- /dev/null
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -0,0 +1,15 @@
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+
+import { collectWindowErrors, logger } from '@php-wasm/logger';
+import { Layout } from './components/Layout';
+import { store } from './store';
+
+collectWindowErrors(logger);
+
+const root = createRoot(document.getElementById('root')!);
+root.render(
+	<Provider store={store}>
+		<Layout />
+	</Provider>
+);
diff --git a/packages/playground/website/src/php-playground/runtime.ts b/packages/playground/website/src/php-playground/runtime.ts
new file mode 100644
index 0000000000..f4bb6d9c2b
--- /dev/null
+++ b/packages/playground/website/src/php-playground/runtime.ts
@@ -0,0 +1,24 @@
+import type { PlaygroundClient } from '@wp-playground/client';
+
+class PlaygroundRuntime {
+	private client: PlaygroundClient | null = null;
+	private bootPromise: Promise<void> = Promise.resolve();
+
+	setClient(client: PlaygroundClient | null) {
+		this.client = client;
+	}
+
+	getClient() {
+		return this.client;
+	}
+
+	setBootPromise(promise: Promise<void>) {
+		this.bootPromise = promise;
+	}
+
+	getBootPromise() {
+		return this.bootPromise;
+	}
+}
+
+export const playgroundRuntime = new PlaygroundRuntime();
diff --git a/packages/playground/website/src/php-playground/store.ts b/packages/playground/website/src/php-playground/store.ts
new file mode 100644
index 0000000000..1c1f4908e4
--- /dev/null
+++ b/packages/playground/website/src/php-playground/store.ts
@@ -0,0 +1,120 @@
+import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { PlaygroundClient } from '@wp-playground/client';
+import { SupportedPHPVersionsList } from '@wp-playground/client';
+
+import {
+	DEFAULT_CODE,
+	DEFAULT_PHP_VERSION,
+	DEFAULT_WP_VERSION,
+} from './constants';
+
+export type BootStatus = 'idle' | 'booting' | 'ready' | 'error';
+
+export interface PlaygroundState {
+	code: string;
+	phpVersion: string;
+	wpVersion: string;
+	phpVersions: string[];
+	wpVersions: string[];
+	bootStatus: BootStatus;
+	bootError: string | null;
+	runRequestId: number;
+	client: PlaygroundClient | null;
+	initialized: boolean;
+	wpVersionsLoading: boolean;
+}
+
+const initialState: PlaygroundState = {
+	code: DEFAULT_CODE,
+	phpVersion: DEFAULT_PHP_VERSION,
+	wpVersion: 'latest',
+	phpVersions: SupportedPHPVersionsList,
+	wpVersions: [],
+	bootStatus: 'idle',
+	bootError: null,
+	runRequestId: 0,
+	client: null,
+	initialized: false,
+	wpVersionsLoading: true,
+};
+
+const playgroundSlice = createSlice({
+	name: 'playground',
+	initialState,
+	reducers: {
+		setCode(state, action: PayloadAction<string>) {
+			state.code = action.payload;
+		},
+		setPhpVersion(state, action: PayloadAction<string>) {
+			state.phpVersion = action.payload;
+		},
+		setWpVersion(state, action: PayloadAction<string>) {
+			state.wpVersion = action.payload;
+		},
+		setWpVersions(state, action: PayloadAction<string[]>) {
+			state.wpVersions = action.payload;
+			state.wpVersionsLoading = false;
+		},
+		setWpVersionsLoading(state, action: PayloadAction<boolean>) {
+			state.wpVersionsLoading = action.payload;
+		},
+		queueRun(state) {
+			state.runRequestId += 1;
+		},
+		setBootStatus(state, action: PayloadAction<BootStatus>) {
+			state.bootStatus = action.payload;
+			if (action.payload !== 'error') {
+				state.bootError = null;
+			}
+		},
+		setBootError(state, action: PayloadAction<string | null>) {
+			state.bootError = action.payload;
+		},
+		setClient(state, action: PayloadAction<PlaygroundClient | null>) {
+			state.client = action.payload;
+		},
+		applyUrlState(
+			state,
+			action: PayloadAction<{
+				code: string;
+				phpVersion?: string;
+				wpVersion?: string;
+			}>
+		) {
+			state.code = action.payload.code;
+			if (action.payload.phpVersion) {
+				state.phpVersion = action.payload.phpVersion;
+			}
+			if (action.payload.wpVersion) {
+				state.wpVersion = action.payload.wpVersion;
+			}
+			state.initialized = true;
+		},
+	},
+});
+
+export const {
+	setCode,
+	setPhpVersion,
+	setWpVersion,
+	setWpVersions,
+	setWpVersionsLoading,
+	queueRun,
+	setBootStatus,
+	setBootError,
+	setClient,
+	applyUrlState,
+} = playgroundSlice.actions;
+
+export const store = configureStore({
+	reducer: {
+		playground: playgroundSlice.reducer,
+	},
+	middleware: (getDefaultMiddleware) =>
+		getDefaultMiddleware({
+			serializableCheck: false,
+		}),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/packages/playground/website/src/php-playground/url-state.ts b/packages/playground/website/src/php-playground/url-state.ts
new file mode 100644
index 0000000000..33ef1bb3ea
--- /dev/null
+++ b/packages/playground/website/src/php-playground/url-state.ts
@@ -0,0 +1,70 @@
+import { DEFAULT_CODE } from './constants';
+
+export type PlaygroundUrlState = {
+	code?: string;
+	php?: string;
+	wp?: string;
+};
+
+const encodeBase64UTF8 = (str: string) =>
+	btoa(
+		encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) =>
+			String.fromCharCode(Number(`0x${p1}`))
+		)
+	);
+
+const decodeBase64UTF8 = (base64: string) => {
+	try {
+		return decodeURIComponent(
+			atob(base64)
+				.split('')
+				.map((c) => `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`)
+				.join('')
+		);
+	} catch {
+		return null;
+	}
+};
+
+export const loadStateFromURL = () => {
+	const fragment = window.location.hash.slice(1);
+	if (!fragment) {
+		return {
+			code: DEFAULT_CODE,
+			phpVersion: undefined,
+			wpVersion: undefined,
+		};
+	}
+	const decoded = decodeBase64UTF8(fragment);
+	if (decoded === null) {
+		return {
+			code: DEFAULT_CODE,
+			phpVersion: undefined,
+			wpVersion: undefined,
+		};
+	}
+	try {
+		const state = JSON.parse(decoded) as PlaygroundUrlState;
+		return {
+			code: state.code ?? DEFAULT_CODE,
+			phpVersion: state.php,
+			wpVersion: state.wp,
+		};
+	} catch {
+		return {
+			code: decoded || DEFAULT_CODE,
+			phpVersion: undefined,
+			wpVersion: undefined,
+		};
+	}
+};
+
+export const saveStateToURL = (state: PlaygroundUrlState) => {
+	const json = JSON.stringify(state);
+	const encoded = encodeBase64UTF8(json);
+	window.history.replaceState(
+		null,
+		'',
+		`${window.location.pathname}${window.location.search}#${encoded}`
+	);
+};
diff --git a/packages/playground/website/vite.config.ts b/packages/playground/website/vite.config.ts
index 30abb6a0b9..7b7689c27a 100644
--- a/packages/playground/website/vite.config.ts
+++ b/packages/playground/website/vite.config.ts
@@ -177,6 +177,9 @@ export default defineConfig(({ command, mode }) => {
 					index: fileURLToPath(
 						new URL('./index.html', import.meta.url)
 					),
+					'beta-php-playground.html': fileURLToPath(
+						new URL('./beta-php-playground.html', import.meta.url)
+					),
 					'index.html': fileURLToPath(
 						new URL('./demos/index.html', import.meta.url)
 					),

From 39f0a2cef8888f77802ffadd42d56afae61f0e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sat, 27 Sep 2025 22:24:38 +0100
Subject: [PATCH 07/41] Prototype of file browser and terminal

---
 package-lock.json                             |  11 +
 package.json                                  |   1 +
 packages/php-wasm/universal/src/lib/api.ts    |  85 +++++-
 packages/playground/client/src/index.ts       |   3 +
 .../src/FilePickerControl/index.tsx           |   2 +-
 .../components/src/FilePickerTree/index.tsx   |  25 +-
 packages/playground/components/src/index.ts   |   2 +
 .../website/beta-php-playground.html          |  77 +++++
 .../components/Layout.module.css              |  44 ++-
 .../src/php-playground/components/Layout.tsx  | 141 ++++++++-
 .../components/PlaygroundFilePickerTree.tsx   | 241 +++++++++++++++
 .../components/PlaygroundManager.tsx          |  74 ++---
 .../php-playground/components/Terminal.tsx    | 282 +++++-------------
 .../website/src/php-playground/constants.ts   |   4 +-
 14 files changed, 705 insertions(+), 287 deletions(-)
 create mode 100644 packages/playground/website/beta-php-playground.html
 create mode 100644 packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx

diff --git a/package-lock.json b/package-lock.json
index e3c992645b..1f3905c8c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
 				"react-dom": "18.3.1",
 				"react-hook-form": "7.53.0",
 				"react-redux": "8.1.3",
+				"react-resizable-panels": "3.0.6",
 				"react-transition-group": "4.4.5",
 				"sha.js": "2.4.11",
 				"tmp-promise": "3.0.3",
@@ -44176,6 +44177,16 @@
 				}
 			}
 		},
+		"node_modules/react-resizable-panels": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
+			"integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+				"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+			}
+		},
 		"node_modules/react-router": {
 			"version": "5.3.4",
 			"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
diff --git a/package.json b/package.json
index 8e0a5c0994..f1e869c787 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
 		"react-dom": "18.3.1",
 		"react-hook-form": "7.53.0",
 		"react-redux": "8.1.3",
+		"react-resizable-panels": "3.0.6",
 		"react-transition-group": "4.4.5",
 		"sha.js": "2.4.11",
 		"tmp-promise": "3.0.3",
diff --git a/packages/php-wasm/universal/src/lib/api.ts b/packages/php-wasm/universal/src/lib/api.ts
index 80744e43ea..debee5f243 100644
--- a/packages/php-wasm/universal/src/lib/api.ts
+++ b/packages/php-wasm/universal/src/lib/api.ts
@@ -374,11 +374,12 @@ function streamToPort(stream: ReadableStream<Uint8Array>): MessagePort {
 			}
 		} catch (e: any) {
 			try {
-				// @TODO: Find a way to transfer the error object, including any stack trace etc.,
-				//        using the error transfer handlers.
+				const serialized = serializeForPort(e);
 				port1.postMessage({
 					t: 'error',
-					m: e?.message || JSON.stringify(e),
+					e: serialized,
+					// Legacy field for backwards compatibility
+					m: (e as any)?.message || JSON.stringify(e),
 				});
 			} catch {
 				// Ignore error
@@ -413,6 +414,25 @@ function portToStream(port: MessagePort): ReadableStream<Uint8Array> {
 						cleanup();
 						break;
 					case 'error': {
+						if (data.e) {
+							let errorValue: unknown;
+							try {
+								errorValue = deserializeForPort(
+									data.e,
+									'MessagePort bridged stream error'
+								);
+							} catch (deserializationError: any) {
+								// Fallback: if deserialization fails, surface a generic error
+								errorValue = new Error(
+									deserializationError?.message ||
+										'Stream error'
+								);
+							}
+							controller.error(errorValue as any);
+							cleanup();
+							break;
+						}
+						// Legacy fallback using stringified message
 						let error = '';
 						try {
 							error = JSON.parse(data.m);
@@ -492,8 +512,11 @@ function promiseToPort(promise: Promise<any>): MessagePort {
 		})
 		.catch((err) => {
 			try {
+				const serialized = serializeForPort(err);
 				port1.postMessage({
 					t: 'reject',
+					e: serialized,
+					// Legacy field for backwards compatibility
 					m: (err as any)?.message || JSON.stringify(err),
 				});
 			} catch {
@@ -523,9 +546,25 @@ function portToPromise(port: MessagePort): Promise<any> {
 				cleanup();
 				resolve(data.v);
 			} else if (data.t === 'reject') {
-				// @TODO: Find a way to transfer the error object, including any stack trace etc.,
-				//        using the error transfer handlers.
 				cleanup();
+				if (data.e) {
+					try {
+						const errorValue = deserializeForPort(
+							data.e,
+							'MessagePort bridged promise rejected'
+						);
+						reject(errorValue as any);
+					} catch (deserializationError: any) {
+						reject(
+							new Error(
+								deserializationError?.message ||
+									'Promise rejected'
+							)
+						);
+					}
+					return;
+				}
+				// Legacy fallback using stringified message
 				let error = '';
 				try {
 					error = JSON.parse(data.m);
@@ -630,6 +669,42 @@ const throwTransferHandlerCustom: Comlink.TransferHandler<
 
 Comlink.transferHandlers.set('throw', throwTransferHandlerCustom);
 
+// Utilities to serialize/deserialize thrown values over MessagePorts
+function serializeForPort(value: unknown): SerializedError {
+	let serialized: SerializedError;
+	if (value instanceof Error) {
+		serialized = {
+			isError: true,
+			value: ErrorSerializer.serializeError(value),
+		};
+		// Preserve the original error class name
+		(serialized.value as any)['originalErrorClassName'] = (
+			value as Error
+		).constructor.name;
+	} else {
+		serialized = { isError: false, value };
+	}
+	return serialized;
+}
+
+function deserializeForPort(
+	serialized: SerializedError,
+	additionalMessage: string
+): unknown {
+	if (serialized.isError) {
+		const error = ErrorSerializer.deserializeError(serialized.value);
+		// Chain host call stack at the bottom of the error chain
+		const additionalCallStack = new Error(additionalMessage);
+		let deepestError: any = error as any;
+		while (deepestError.cause) {
+			deepestError = deepestError.cause;
+		}
+		deepestError.cause = additionalCallStack;
+		return error;
+	}
+	return serialized.value;
+}
+
 function proxyClone(object: any): any {
 	return new Proxy(object, {
 		get(target, prop) {
diff --git a/packages/playground/client/src/index.ts b/packages/playground/client/src/index.ts
index 7b04b2f673..b2e40b0caa 100644
--- a/packages/playground/client/src/index.ts
+++ b/packages/playground/client/src/index.ts
@@ -165,8 +165,10 @@ const validRemoteOrigins = [
 	// Allow hosting remote from same origin
 	location.origin,
 	'http://localhost',
+	'http://localhost:5400',
 	'https://localhost',
 	'http://127.0.0.1',
+	'http://127.0.0.1:5400',
 	'https://127.0.0.1',
 	...additionalRemoteOrigins,
 ];
@@ -193,6 +195,7 @@ function assertLikelyCompatibleRemoteOrigin(remoteHtmlUrl: string) {
 		url.pathname === '/remote.html';
 
 	if (!validRemote) {
+		console.log('url.pathname', url.pathname);
 		throw new Error(
 			`Invalid remote URL: ${url}. ` +
 				'Expected remote URL to have a path of "/remote.html" based ' +
diff --git a/packages/playground/components/src/FilePickerControl/index.tsx b/packages/playground/components/src/FilePickerControl/index.tsx
index 707752a6b3..59247e2b52 100644
--- a/packages/playground/components/src/FilePickerControl/index.tsx
+++ b/packages/playground/components/src/FilePickerControl/index.tsx
@@ -3,7 +3,7 @@ import { Button, Modal } from '@wordpress/components';
 import { PathPreview } from './PathPreview';
 import css from './style.module.css';
 import type { FileNode } from '../FilePickerTree';
-import FilePickerTree from '../FilePickerTree';
+import { FilePickerTree } from '../FilePickerTree';
 
 export function FilePickerControl({
 	value = '',
diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index eabfff1de4..70dd01b312 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -24,16 +24,18 @@ export type FilePickerControlProps = {
 	onSelect?: (path: string) => void;
 	isLoading?: boolean;
 	error?: string;
+	onExpand?: (path: string) => void | Promise<void>;
 };
 
 type ExpandedNodePaths = Record<string, boolean>;
 
-const FilePickerTree: React.FC<FilePickerControlProps> = ({
+export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	isLoading = false,
 	error = undefined,
 	files,
 	initialPath,
 	onSelect = () => {},
+	onExpand,
 }) => {
 	const [expanded, setExpanded] = useState<ExpandedNodePaths>(() => {
 		if (!initialPath) {
@@ -56,6 +58,21 @@ const FilePickerTree: React.FC<FilePickerControlProps> = ({
 			...prevState,
 			[path]: isOpen,
 		}));
+		if (isOpen && onExpand) {
+			try {
+				const maybePromise = onExpand(path);
+				if (
+					maybePromise &&
+					typeof (maybePromise as any).then === 'function'
+				) {
+					(maybePromise as Promise<void>).catch(() => {
+						// ignore expansion loading error
+					});
+				}
+			} catch {
+				// ignore expansion errors
+			}
+		}
 	};
 
 	const selectPath = (path: string) => {
@@ -177,7 +194,7 @@ const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	);
 };
 
-const NodeRow: React.FC<{
+export const NodeRow: React.FC<{
 	node: FileNode;
 	level: number;
 	position: number;
@@ -299,7 +316,7 @@ const NodeRow: React.FC<{
 	);
 };
 
-const FileName: React.FC<{
+export const FileName: React.FC<{
 	node: FileNode;
 	level: number;
 	isOpen?: boolean;
@@ -324,5 +341,3 @@ const FileName: React.FC<{
 		</>
 	);
 };
-
-export default FilePickerTree;
diff --git a/packages/playground/components/src/index.ts b/packages/playground/components/src/index.ts
index 838008a0b2..ab18fc26ba 100644
--- a/packages/playground/components/src/index.ts
+++ b/packages/playground/components/src/index.ts
@@ -1 +1,3 @@
 export * from './icons';
+export * from './FilePickerTree/index';
+export * from './FilePickerControl/index';
diff --git a/packages/playground/website/beta-php-playground.html b/packages/playground/website/beta-php-playground.html
new file mode 100644
index 0000000000..5d22ec8316
--- /dev/null
+++ b/packages/playground/website/beta-php-playground.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>WordPress PHP Playground</title>
+		<base href="/" />
+		<meta
+			property="og:image"
+			content="https://playground.wordpress.net/ogimage.png"
+		/>
+		<meta property="og:title" content="WordPress PHP Playground" />
+		<meta
+			property="og:description"
+			content="PHP running in your browser for learning, testing, and developing with WordPress!"
+		/>
+		<meta property="og:url" content="https://playground.wordpress.net/" />
+		<meta
+			name="description"
+			content="PHP running in your browser for learning, testing, and developing with WordPress!"
+		/>
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<link rel="stylesheet" href="/src/styles.css" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<!-- @TODO: Only load Roboto in non-apple environments where the San Francisco font is unavailable -->
+		<link
+			href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+			rel="stylesheet"
+		/>
+		<script
+			async
+			src="https://www.googletagmanager.com/gtag/js?id=G-SVTNFCP8T7"
+		></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('js', new Date());
+			gtag('config', 'G-SVTNFCP8T7');
+		</script>
+	</head>
+	<body>
+		<main id="root" aria-label="WordPress PHP Playground">
+			<script>
+				const query = new URLSearchParams(window.location.search);
+				const shouldLazyLoadPlayground =
+					query.has('lazy') ||
+					// Initial API used "start_button" - this preserves compatibility.
+					'1' === query.get('start_button');
+
+				if (shouldLazyLoadPlayground) {
+					const query = new URLSearchParams(window.location.search);
+					query.delete('lazy');
+					query.delete('start_button');
+					const nonLazyUrl = new URL(window.location);
+					nonLazyUrl.search = query.toString();
+
+					const initiator = document.createElement('a');
+					initiator.innerText = 'Run Playground';
+					initiator.setAttribute('id', 'lazy-load-initiator');
+					initiator.setAttribute('href', nonLazyUrl);
+
+					const root = document.getElementById('root');
+					root.classList.add('lazy-loading');
+					root.appendChild(initiator);
+				}
+			</script>
+		</main>
+		<script type="module">
+			if (!shouldLazyLoadPlayground) {
+				import('./src/php-playground/main');
+			}
+		</script>
+	</body>
+</html>
diff --git a/packages/playground/website/src/php-playground/components/Layout.module.css b/packages/playground/website/src/php-playground/components/Layout.module.css
index f4cc20503f..2c87218a78 100644
--- a/packages/playground/website/src/php-playground/components/Layout.module.css
+++ b/packages/playground/website/src/php-playground/components/Layout.module.css
@@ -27,10 +27,11 @@
 }
 
 .editorPane {
-	flex: 1;
 	display: flex;
 	flex-direction: column;
 	min-width: 280px;
+	min-height: 0;
+	height: 100%;
 }
 
 .controls {
@@ -100,6 +101,13 @@
 	min-height: 0;
 }
 
+.editorSplitGroup {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
 .editor {
 	flex: 1;
 	min-height: 0;
@@ -163,6 +171,7 @@
 	flex: 1;
 	position: relative;
 	min-width: 320px;
+	height: 100%;
 }
 
 .preview {
@@ -173,6 +182,36 @@
 	border: 0;
 }
 
+.horizontalHandle {
+	width: 8px;
+	background: #e5e5e5;
+	cursor: col-resize;
+	flex-shrink: 0;
+}
+
+.horizontalHandle[data-resize-handle-active='true'],
+.horizontalHandle[data-panel-resize-handle-active='true'] {
+	background: #c7c7c7;
+}
+
+.verticalHandle {
+	height: 8px;
+	background: #202020;
+	cursor: ns-resize;
+	flex-shrink: 0;
+}
+
+.verticalHandle[data-resize-handle-active='true'],
+.verticalHandle[data-panel-resize-handle-active='true'] {
+	background: #2f2f2f;
+}
+
+.terminalPanel {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
 .terminalSection {
 	background: #111;
 	color: #fff;
@@ -215,7 +254,8 @@
 .terminalPane {
 	box-sizing: border-box;
 	overflow: hidden;
-	transition: height 0.1s ease;
+	padding: 8px;
+	flex: 1;
 }
 
 .terminal {
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 7852499dfa..45eab76e3e 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -1,14 +1,25 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import type { ImperativePanelHandle } from 'react-resizable-panels';
 
 import styles from './layout.module.css';
 import { Controls } from './Controls';
 import { EditorHost } from './EditorHost';
 import { HelpModal } from './HelpModal';
+import PlaygroundFilePickerTree from './PlaygroundFilePickerTree';
 import { PlaygroundManager } from './PlaygroundManager';
 import { Terminal } from './Terminal';
+import { useAppDispatch, useAppSelector } from '../hooks';
+import { setCode } from '../store';
 
 export const Layout = () => {
 	const [isHelpOpen, setHelpOpen] = useState(false);
+	const [isTerminalCollapsed, setTerminalCollapsed] = useState(false);
+	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
+	const { client: playgroundClient, bootStatus } = useAppSelector(
+		(state) => state.playground
+	);
 
 	useEffect(() => {
 		const previousTitle = document.title;
@@ -32,25 +43,123 @@ export const Layout = () => {
 	const handleOpenHelp = useCallback(() => setHelpOpen(true), []);
 	const handleCloseHelp = useCallback(() => setHelpOpen(false), []);
 
+	const dispatch = useAppDispatch();
+
 	return (
 		<div id="php-playground-react-root" className={styles.root}>
 			<PlaygroundManager />
-			<div id="app" className={styles.app}>
-				<div id="editorPane" className={styles.editorPane}>
-					<Controls onHelpClick={handleOpenHelp} />
-					<div className={styles.editorContent}>
-						<EditorHost />
-						<Terminal />
+			<PanelGroup direction="horizontal" id="app" className={styles.app}>
+				<>
+					<Panel minSize={5} collapsible>
+						<div className={styles.editorPane}>
+							{bootStatus === 'ready' && playgroundClient && (
+								<PlaygroundFilePickerTree
+									playgroundClient={playgroundClient}
+									root="/"
+									initialPath="/wordpress/code.php"
+									excludePaths={[
+										'/dev',
+										'/internal',
+										'/proc',
+										'/request',
+									]}
+									onSelect={async (path) => {
+										if (
+											await playgroundClient.isDir(path)
+										) {
+											return;
+										}
+										const text =
+											await playgroundClient.readFileAsText(
+												path
+											);
+										if (text.length > 1024 * 1024) {
+											dispatch(
+												setCode(
+													'File too large to be edited'
+												)
+											);
+										} else {
+											dispatch(setCode(text));
+										}
+									}}
+								/>
+							)}
+						</div>
+					</Panel>
+					<PanelResizeHandle className={styles.horizontalHandle} />
+				</>
+				<Panel minSize={40}>
+					<div className={styles.editorPane}>
+						<Controls onHelpClick={handleOpenHelp} />
+						<PanelGroup
+							direction="vertical"
+							className={styles.editorSplitGroup}
+						>
+							<Panel
+								defaultSize={60}
+								minSize={30}
+								style={{ overflow: 'auto' }}
+							>
+								<div className={styles.editorContent}>
+									<EditorHost />
+								</div>
+							</Panel>
+							<PanelResizeHandle
+								className={styles.verticalHandle}
+							/>
+							<Panel
+								ref={terminalPanelRef}
+								minSize={15}
+								collapsible
+								onCollapse={() => setTerminalCollapsed(true)}
+								onExpand={() => setTerminalCollapsed(false)}
+								className={styles.terminalPanel}
+							>
+								<section
+									id="terminalSection"
+									className={clsx(styles.terminalSection, {
+										[styles.terminalSectionCollapsed]:
+											isTerminalCollapsed,
+									})}
+									aria-label="Playground terminal"
+								>
+									<header className={styles.terminalHeader}>
+										<button
+											id="terminalToggle"
+											type="button"
+											className={styles.terminalToggle}
+											onClick={() =>
+												terminalPanelRef.current?.collapse()
+											}
+											aria-expanded={!isTerminalCollapsed}
+										>
+											{isTerminalCollapsed
+												? 'Show terminal'
+												: 'Hide terminal'}
+										</button>
+									</header>
+									<div className={styles.terminalPane}>
+										<Terminal
+											isCollapsed={isTerminalCollapsed}
+										/>
+									</div>
+								</section>
+							</Panel>
+						</PanelGroup>
+					</div>
+				</Panel>
+				<PanelResizeHandle className={styles.horizontalHandle} />
+				<Panel minSize={15}>
+					<div id="previewPane" className={styles.previewPane}>
+						<iframe
+							id="preview"
+							title="WordPress Playground"
+							className={styles.preview}
+						/>
 					</div>
-				</div>
-				<div id="previewPane" className={styles.previewPane}>
-					<iframe
-						id="preview"
-						title="WordPress Playground"
-						className={styles.preview}
-					/>
-				</div>
-			</div>
+				</Panel>
+			</PanelGroup>
 			<HelpModal isOpen={isHelpOpen} onRequestClose={handleCloseHelp} />
 		</div>
 	);
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
new file mode 100644
index 0000000000..cfecb7289a
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -0,0 +1,241 @@
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import type { FileNode } from '@wp-playground/components';
+import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
+import type { PlaygroundClient } from '@wp-playground/client';
+
+type NodeMap = Map<string, FileNode & { loaded?: boolean; loading?: boolean }>;
+
+function normalizePath(path: string) {
+	if (!path) return '/';
+	const normalized =
+		('/' + path).replace(/\/+/, '/').replace(/\/+$/, '') || '/';
+	return normalized;
+}
+
+function toSegments(path: string) {
+	const p = normalizePath(path);
+	if (p === '/') return ['/'];
+	const parts = p.split('/').filter(Boolean);
+	const segments: string[] = [];
+	let acc = '';
+	for (const part of parts) {
+		acc += '/' + part;
+		segments.push(acc);
+	}
+	return segments.length ? segments : ['/'];
+}
+
+async function listDir(client: PlaygroundClient, path: string) {
+	// listFiles returns names without the path by default
+	const names = await client.listFiles(path);
+	const results: { name: string; type: 'file' | 'folder' }[] = [];
+	for (const name of names) {
+		const childPath = path === '/' ? `/${name}` : `${path}/${name}`;
+		// Prefer isDir to avoid stat costs; isDir is available on the client
+		const isDirectory = await client.isDir(childPath).catch(() => false);
+		results.push({ name, type: isDirectory ? 'folder' : 'file' });
+	}
+	return results.sort((a, b) => {
+		// Folders first, then files; alphabetical within groups
+		if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
+		return a.name.localeCompare(b.name);
+	});
+}
+
+function getParentPath(path: string) {
+	const p = normalizePath(path);
+	if (p === '/') return '';
+	const lastSlash = p.lastIndexOf('/');
+	return lastSlash <= 0 ? '/' : p.substring(0, lastSlash);
+}
+
+function getBaseName(path: string) {
+	const p = normalizePath(path);
+	if (p === '/') return '/';
+	const parts = p.split('/').filter(Boolean);
+	return parts[parts.length - 1] || '/';
+}
+
+function upsertChild(map: NodeMap, parentPath: string, child: FileNode) {
+	const parent = map.get(parentPath);
+	if (!parent) return;
+	const prevChildren = parent.children || [];
+	const existingIndex = prevChildren.findIndex((c) => c.name === child.name);
+	let nextChildren: FileNode[];
+	if (existingIndex >= 0) {
+		nextChildren = prevChildren.slice();
+		nextChildren[existingIndex] = child;
+	} else {
+		nextChildren = prevChildren.concat(child);
+	}
+	map.set(parentPath, { ...parent, children: nextChildren });
+}
+
+function cloneTreeFromMap(map: NodeMap, rootPath: string): FileNode[] {
+	const root = map.get(rootPath);
+	if (!root) return [];
+	const clone = (nodePath: string): FileNode => {
+		const node = map.get(nodePath)!;
+		const base: FileNode = {
+			name: node.name,
+			type: node.type,
+			children: undefined,
+		};
+		if (node.children) {
+			const children: FileNode[] = [];
+			for (const child of node.children) {
+				const childPath =
+					nodePath === '/'
+						? `/${child.name}`
+						: `${nodePath}/${child.name}`;
+				children.push(clone(childPath));
+			}
+			base.children = children;
+		}
+		return base;
+	};
+	return [clone(rootPath)];
+}
+
+export default function PlaygroundFilePickerTree({
+	root = '/wordpress',
+	initialPath,
+	excludePaths,
+	onSelect,
+	playgroundClient,
+}: {
+	root?: string;
+	initialPath?: string;
+	excludePaths?: string[];
+	onSelect?: (path: string) => void;
+	playgroundClient?: PlaygroundClient;
+}) {
+	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
+	const [treeVersion, setTreeVersion] = useState(0);
+	const nodeMapRef = useRef<NodeMap>(new Map());
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	// Ensure the root exists in the map.
+	useEffect(() => {
+		nodeMapRef.current.clear();
+		const rootName =
+			normalizedRoot === '/' ? '/' : getBaseName(normalizedRoot);
+		nodeMapRef.current.set(normalizedRoot, {
+			name: rootName,
+			type: 'folder',
+			children: [],
+			loaded: false,
+		});
+		setTreeVersion((v) => v + 1);
+	}, [normalizedRoot]);
+
+	const loadChildren = useCallback(
+		async (dirPath: string) => {
+			dirPath = normalizePath(dirPath);
+			const map = nodeMapRef.current;
+			const node = map.get(dirPath);
+			if (!node || node.type !== 'folder') return;
+			if ((node as any).loading || (node as any).loaded) return;
+			(node as any).loading = true;
+			setTreeVersion((v) => v + 1);
+			try {
+				if (!playgroundClient) {
+					throw new Error('Playground client is not ready yet.');
+				}
+				const items = await listDir(playgroundClient, dirPath);
+				// Reset children to reflect latest listing
+				map.set(dirPath, {
+					...node,
+					children: [],
+				});
+				for (const item of items) {
+					const childPath =
+						dirPath === '/'
+							? `/${item.name}`
+							: `${dirPath}/${item.name}`;
+					if (excludePaths?.includes(childPath)) {
+						continue;
+					}
+					const childNode: FileNode = {
+						name: item.name,
+						type: item.type,
+						children: item.type === 'folder' ? [] : undefined,
+					};
+					map.set(childPath, { ...childNode, loaded: false });
+					upsertChild(map, dirPath, childNode);
+				}
+				(map.get(dirPath) as any).loaded = true;
+			} catch (e: any) {
+				setError(e?.message || String(e));
+			} finally {
+				(map.get(dirPath) as any).loading = false;
+				setTreeVersion((v) => v + 1);
+			}
+		},
+		[playgroundClient, excludePaths]
+	);
+
+	// Prefetch ancestors for initialPath, expanding lazily along the way
+	useEffect(() => {
+		let cancelled = false;
+		const run = async () => {
+			if (!initialPath) return;
+			setIsLoading(true);
+			try {
+				const segments = toSegments(initialPath);
+				for (const seg of segments) {
+					const parent = getParentPath(seg) || normalizedRoot;
+					// Ensure parent exists in map
+					if (!nodeMapRef.current.has(parent)) {
+						const baseName =
+							parent === '/' ? '/' : getBaseName(parent);
+						nodeMapRef.current.set(parent, {
+							name: baseName,
+							type: 'folder',
+							children: [],
+							loaded: false,
+						});
+					}
+					await loadChildren(parent);
+					if (cancelled) return;
+				}
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		void run();
+		return () => {
+			cancelled = true;
+		};
+	}, [initialPath, normalizedRoot, loadChildren]);
+
+	const files = useMemo(() => {
+		return cloneTreeFromMap(nodeMapRef.current, normalizedRoot);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [treeVersion, normalizedRoot]);
+
+	const handleSelect = useCallback(
+		(path: string) => {
+			if (onSelect) onSelect(normalizePath(path));
+		},
+		[onSelect]
+	);
+
+	return (
+		<CoreFilePickerTree
+			files={files}
+			initialPath={initialPath}
+			onSelect={handleSelect}
+			onExpand={(path) => loadChildren(path)}
+			isLoading={isLoading}
+			error={error}
+		/>
+	);
+}
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
index 79d0a0fa14..e3a9dbebdc 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
@@ -1,7 +1,5 @@
 import { useEffect, useRef } from 'react';
-
 import { startPlaygroundWeb } from '@wp-playground/client';
-
 import { DEFAULT_WP_REMOTE } from '../constants';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import {
@@ -52,10 +50,7 @@ export const PlaygroundManager = () => {
 		clientRef.current = client;
 	}, [client]);
 
-	useEffect(() => {
-		if (initialized) {
-			return;
-		}
+	function refreshStateFromUrl() {
 		const state = loadStateFromURL();
 		dispatch(
 			applyUrlState({
@@ -64,19 +59,16 @@ export const PlaygroundManager = () => {
 				wpVersion: state.wpVersion,
 			})
 		);
+	}
+
+	useEffect(() => {
+		if (!initialized) {
+			refreshStateFromUrl();
+		}
 	}, [dispatch, initialized]);
 
 	useEffect(() => {
-		const handleHashChange = () => {
-			const state = loadStateFromURL();
-			dispatch(
-				applyUrlState({
-					code: state.code,
-					phpVersion: state.phpVersion,
-					wpVersion: state.wpVersion,
-				})
-			);
-		};
+		const handleHashChange = () => refreshStateFromUrl();
 		window.addEventListener('hashchange', handleHashChange);
 		return () => {
 			window.removeEventListener('hashchange', handleHashChange);
@@ -119,30 +111,26 @@ export const PlaygroundManager = () => {
 			dispatch(setWpVersionsLoading(true));
 			runCountRef.current = 0;
 
-			previewIframe.src = DEFAULT_WP_REMOTE;
-
 			try {
+				console.log('Initializing');
 				const clientInstance = await startPlaygroundWeb({
 					iframe: previewIframe,
-					remoteUrl: previewIframe.src,
-					blueprint: {
-						preferredVersions: {
-							wp: wpVersionRef.current,
-							php: phpVersionRef.current,
-						},
-					},
+					remoteUrl: DEFAULT_WP_REMOTE,
+					// blueprint: {
+					// 	preferredVersions: {
+					// 		wp: wpVersionRef.current,
+					// 		php: phpVersionRef.current as any,
+					// 	},
+					// },
 				});
+				console.log('Client initialized');
 
 				if (cancelled) {
 					try {
-						if (
-							'destroy' in clientInstance &&
-							typeof (clientInstance as any).destroy ===
-								'function'
-						) {
-							await (clientInstance as any).destroy();
-						}
-					} catch {}
+						await (clientInstance as any).destroy();
+					} catch {
+						/** Ignore errors */
+					}
 					return;
 				}
 
@@ -162,31 +150,29 @@ export const PlaygroundManager = () => {
 					dispatch(setWpVersionsLoading(false));
 				}
 
-				await clientInstance.isReady;
+				await clientInstance.isReady();
 				if (cancelled) {
 					try {
-						if (
-							'destroy' in clientInstance &&
-							typeof (clientInstance as any).destroy ===
-								'function'
-						) {
-							await (clientInstance as any).destroy();
-						}
-					} catch {}
+						await (clientInstance as any).destroy();
+					} catch {
+						// Ignore errors
+					}
 					return;
 				}
 
+				await clientInstance.mkdir('/wordpress/workspace');
 				await clientInstance.writeFile(
-					'/wordpress/code.php',
+					'/wordpress/workspace/code.php',
 					codeRef.current
 				);
-				await clientInstance.goTo('/code.php');
+				await clientInstance.goTo('/workspace/code.php');
 
 				clientRef.current = clientInstance;
 				dispatch(setClient(clientInstance));
 				playgroundRuntime.setClient(clientInstance);
 				dispatch(setBootStatus('ready'));
 			} catch (error: any) {
+				console.log({ error });
 				const message = error?.message ?? String(error);
 				dispatch(setBootStatus('error'));
 				dispatch(setBootError(message));
diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/Terminal.tsx
index 8ed6179b0d..0f69c2a1ce 100644
--- a/packages/playground/website/src/php-playground/components/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/Terminal.tsx
@@ -1,6 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { PointerEvent as ReactPointerEvent } from 'react';
-import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
 import { splitShellCommand } from '@php-wasm/util';
 import { Terminal as XTerm } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
@@ -9,9 +7,6 @@ import { playgroundRuntime } from '../runtime';
 import styles from './layout.module.css';
 import 'xterm/css/xterm.css';
 
-const MIN_TERMINAL_HEIGHT = 140;
-const MAX_TERMINAL_HEIGHT = 600;
-const DEFAULT_TERMINAL_HEIGHT = 220;
 const PROGRESS_BAR_WIDTH = 28;
 const SPINNER_FRAMES = ['-', '\\', '|', '/'];
 
@@ -23,8 +18,9 @@ interface DownloadProgress {
 	lastRenderedLength: number;
 }
 
-const clampHeight = (value: number) =>
-	Math.min(MAX_TERMINAL_HEIGHT, Math.max(MIN_TERMINAL_HEIGHT, value));
+interface TerminalProps {
+	isCollapsed: boolean;
+}
 
 const formatBytes = (bytes: number) => {
 	if (bytes < 1024) {
@@ -64,144 +60,11 @@ const drawProgress = (term: XTerm, progress: DownloadProgress) => {
 	progress.lastRenderedLength = padLength;
 };
 
-export const Terminal = () => {
+export const Terminal = ({ isCollapsed }: TerminalProps) => {
 	const terminalContainerRef = useRef<HTMLDivElement | null>(null);
 	const fitAddonRef = useRef<FitAddon | null>(null);
 	const progressRef = useRef<DownloadProgress | null>(null);
 
-	const [height, setHeight] = useState(DEFAULT_TERMINAL_HEIGHT);
-	const [isCollapsed, setCollapsed] = useState(false);
-	const [isDragging, setDragging] = useState(false);
-
-	const lastExpandedHeightRef = useRef(DEFAULT_TERMINAL_HEIGHT);
-	const isCollapsedRef = useRef(isCollapsed);
-	const isDraggingRef = useRef(false);
-	const dragContextRef = useRef({
-		pointerId: -1,
-		startY: 0,
-		startHeight: DEFAULT_TERMINAL_HEIGHT,
-	});
-
-	useEffect(() => {
-		isCollapsedRef.current = isCollapsed;
-	}, [isCollapsed]);
-
-	useEffect(() => {
-		if (!isCollapsed) {
-			lastExpandedHeightRef.current = height;
-		}
-	}, [height, isCollapsed]);
-
-	useEffect(() => {
-		if (!isDragging) {
-			return;
-		}
-		const previousUserSelect = document.body.style.userSelect;
-		document.body.style.userSelect = 'none';
-		return () => {
-			document.body.style.userSelect = previousUserSelect;
-		};
-	}, [isDragging]);
-
-	const applyHeight = useCallback((value: number) => {
-		setHeight(clampHeight(value));
-	}, []);
-
-	const handlePointerDown = useCallback(
-		(event: ReactPointerEvent<HTMLDivElement>) => {
-			event.preventDefault();
-
-			let baseHeight = height;
-			if (isCollapsedRef.current) {
-				const restored = clampHeight(
-					lastExpandedHeightRef.current || DEFAULT_TERMINAL_HEIGHT
-				);
-				baseHeight = restored;
-				setCollapsed(false);
-				setHeight(restored);
-			}
-
-			dragContextRef.current = {
-				pointerId: event.pointerId,
-				startY: event.clientY,
-				startHeight: baseHeight,
-			};
-			isDraggingRef.current = true;
-			setDragging(true);
-			event.currentTarget.setPointerCapture?.(event.pointerId);
-		},
-		[height]
-	);
-
-	const handlePointerMove = useCallback(
-		(event: ReactPointerEvent<HTMLDivElement>) => {
-			if (
-				!isDraggingRef.current ||
-				dragContextRef.current.pointerId !== event.pointerId
-			) {
-				return;
-			}
-			const delta = dragContextRef.current.startY - event.clientY;
-			applyHeight(dragContextRef.current.startHeight + delta);
-		},
-		[applyHeight]
-	);
-
-	const endResize = useCallback(
-		(event: ReactPointerEvent<HTMLDivElement>) => {
-			if (dragContextRef.current.pointerId !== event.pointerId) {
-				return;
-			}
-			event.currentTarget.releasePointerCapture?.(event.pointerId);
-			isDraggingRef.current = false;
-			setDragging(false);
-			fitAddonRef.current?.fit();
-		},
-		[]
-	);
-
-	const toggleCollapse = useCallback(() => {
-		setCollapsed((prev) => {
-			if (prev) {
-				const restored = clampHeight(
-					lastExpandedHeightRef.current || DEFAULT_TERMINAL_HEIGHT
-				);
-				setHeight(restored);
-				return false;
-			}
-			lastExpandedHeightRef.current = height;
-			return true;
-		});
-	}, [height]);
-
-	useEffect(() => {
-		if (isCollapsed) {
-			return;
-		}
-		const fitAddon = fitAddonRef.current;
-		if (!fitAddon) {
-			return;
-		}
-		const frame = requestAnimationFrame(() => {
-			try {
-				fitAddon.fit();
-			} catch {}
-		});
-		return () => cancelAnimationFrame(frame);
-	}, [height, isCollapsed]);
-
-	useEffect(() => {
-		const handleResize = () => {
-			if (!isCollapsedRef.current) {
-				try {
-					fitAddonRef.current?.fit();
-				} catch {}
-			}
-		};
-		window.addEventListener('resize', handleResize);
-		return () => window.removeEventListener('resize', handleResize);
-	}, []);
-
 	useEffect(() => {
 		const container = terminalContainerRef.current;
 		if (!container) {
@@ -224,7 +87,9 @@ export const Terminal = () => {
 		requestAnimationFrame(() => {
 			try {
 				fitAddon.fit();
-			} catch {}
+			} catch {
+				/* ignore errors */
+			}
 		});
 
 		const startDownloadProgress = (label: string, totalBytes: number) => {
@@ -367,18 +232,6 @@ export const Terminal = () => {
 			return client as any;
 		};
 
-		const ensureTerminalExpanded = () => {
-			if (!isCollapsedRef.current) {
-				return;
-			}
-			const targetHeight = clampHeight(
-				lastExpandedHeightRef.current || DEFAULT_TERMINAL_HEIGHT
-			);
-			lastExpandedHeightRef.current = targetHeight;
-			setCollapsed(false);
-			setHeight(targetHeight);
-		};
-
 		const ensureWpCliBinary = async () => {
 			const client = await ensureBootReady();
 			const path = '/tmp/wp-cli.phar';
@@ -436,7 +289,6 @@ require_once __FILE__ . '.bin';
 				const stdoutDecoder = new TextDecoder();
 				const stderrDecoder = new TextDecoder();
 				let aborted = false;
-
 				const activeProcess = {
 					async terminate() {
 						if (aborted) {
@@ -445,13 +297,19 @@ require_once __FILE__ . '.bin';
 						aborted = true;
 						try {
 							await stdoutReader.cancel();
-						} catch {}
+						} catch {
+							/* ignore errors */
+						}
 						try {
 							await stderrReader.cancel();
-						} catch {}
+						} catch {
+							/* ignore errors */
+						}
 						try {
 							php.exit(130);
-						} catch {}
+						} catch {
+							/* ignore errors */
+						}
 					},
 				};
 				currentProcess = activeProcess;
@@ -519,15 +377,9 @@ require_once __FILE__ . '.bin';
 					exitCodePromise,
 				]);
 
-				const result = {
-					exitCode,
-					aborted,
-				};
-				currentProcess = null;
-				return result;
-			} catch (error) {
+				return { exitCode, aborted };
+			} finally {
 				currentProcess = null;
-				throw error;
 			}
 		};
 
@@ -552,8 +404,6 @@ require_once __FILE__ . '.bin';
 				return;
 			}
 
-			ensureTerminalExpanded();
-
 			const [command, ...args] = parts;
 			try {
 				if (command === 'help') {
@@ -718,53 +568,59 @@ require_once __FILE__ . '.bin';
 		};
 	}, []);
 
-	const sectionClassName = clsx(styles.terminalSection, {
-		[styles.terminalSectionCollapsed]: isCollapsed,
-	});
+	useEffect(() => {
+		if (isCollapsed) {
+			return;
+		}
+		const frame = requestAnimationFrame(() => {
+			try {
+				fitAddonRef.current?.fit();
+			} catch {
+				/* ignore errors */
+			}
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [isCollapsed]);
 
-	const handleClassName = clsx(styles.terminalResizeHandle, {
-		[styles.terminalResizeHandleDragging]: isDragging,
-	});
+	useEffect(() => {
+		const handleResize = () => {
+			if (!isCollapsed) {
+				try {
+					fitAddonRef.current?.fit();
+				} catch {
+					/* ignore errors */
+				}
+			}
+		};
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize);
+	}, [isCollapsed]);
 
-	const paneStyle = isCollapsed
-		? { height: 0, padding: 0 }
-		: { height, padding: 8 };
+	useEffect(() => {
+		const container = terminalContainerRef.current;
+		if (!container || typeof ResizeObserver === 'undefined') {
+			return;
+		}
+		const observer = new ResizeObserver(() => {
+			if (isCollapsed) {
+				return;
+			}
+			try {
+				fitAddonRef.current?.fit();
+			} catch {
+				/* ignore errors */
+			}
+		});
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [isCollapsed]);
 
 	return (
-		<section
-			id="terminalSection"
-			className={sectionClassName}
-			aria-label="Playground terminal"
-		>
-			<div
-				id="terminalResizeHandle"
-				className={handleClassName}
-				role="separator"
-				aria-orientation="horizontal"
-				aria-label="Resize terminal"
-				onPointerDown={handlePointerDown}
-				onPointerMove={handlePointerMove}
-				onPointerUp={endResize}
-				onPointerCancel={endResize}
-			/>
-			<header
-				className={styles.terminalHeader}
-				onClick={toggleCollapse}
-				aria-expanded={!isCollapsed}
-			>
-				Terminal
-			</header>
-			<div
-				id="terminalPane"
-				className={styles.terminalPane}
-				style={paneStyle}
-			>
-				<div
-					ref={terminalContainerRef}
-					id="terminal"
-					className={styles.terminal}
-				/>
-			</div>
-		</section>
+		<div
+			ref={terminalContainerRef}
+			id="terminal"
+			className={styles.terminal}
+			aria-live="polite"
+		/>
 	);
 };
diff --git a/packages/playground/website/src/php-playground/constants.ts b/packages/playground/website/src/php-playground/constants.ts
index 82a04ba9e2..75803ff9c9 100644
--- a/packages/playground/website/src/php-playground/constants.ts
+++ b/packages/playground/website/src/php-playground/constants.ts
@@ -1,6 +1,8 @@
 export const DEFAULT_PHP_VERSION = '8.4';
 export const DEFAULT_WP_VERSION = '6.8';
-export const DEFAULT_WP_REMOTE = 'https://playground.wordpress.net/remote.html';
+// @TODO: Use URL imported from vite build-time config
+export const DEFAULT_WP_REMOTE = 'http://127.0.0.1:5400/remote.html';
+// export const DEFAULT_WP_REMOTE = 'https://playground.wordpress.net/remote.html';
 
 export const DEFAULT_CODE = `<?php
 echo "Hello from PHP " . phpversion();

From 56f65c1c7570e4027d117fbcbced05672b6921ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sat, 27 Sep 2025 22:37:55 +0100
Subject: [PATCH 08/41] Document follow-up work

---
 .../website/src/php-playground/main.tsx       | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index 24752b6c05..9260b3e48d 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -1,3 +1,48 @@
+/**
+ * Follow-up work:
+ *
+ * * Files explorer
+ *    * Initialization UX – show the expanded path right away
+ *    * Separate "focus" from "open" actions so that I can browse files
+ *      without editing them
+ *    * Detect when a binary file is opened, show a special message "binary file. can't
+ *      edit (download)"
+ *    * Create and delete files and directories. "Refresh" button to refresh the directory
+ *      tree – OR auto-refresh every second or five seconds.
+ *    * Download file / directory action
+ *    * Ensure it's scrollable with overflow: auto
+ *    * Don't display "/", display just "home", "tmp", and "wordpress" directly
+ * * Editor
+ *    * Save changes when editing files other than code.php
+ *    * Display breadcrumbs of the currently open file above the editor?
+ * * UX for sharing more involved setups, e.g. when I edit a WordPress plugin
+ *   and not just the code snippet (Maybe connect GitHub and save diff in a
+ *   repository or in a gist?)
+ *    * "Git" tool to see diff against the initial state
+ *    * "Save patch"
+ *    * Maybe put that patch in the URL? Or, if too large, tell the user we need some place to store
+ *      the data to keep it shareable?
+ *    * Or add a "share" button that will tell them? But that changes the semantics vs the default
+ *      way of "just copy the URL."
+ *    * Or display a modal "Hey, this is the limit of the shareable URL. It won't be updated
+ *      anymore until you connect Github or so".
+ * * Tool palette (file browser, environment setup form with wp+php versions, Blueprint editor)
+ * * Terminal
+ *    * Collapse/reveal UX bugs
+ *    * Implement cwd, cd
+ *    * Communicate cwd in current prompt (like fish)
+ *    * Tab completion for paths
+ *    * Implement `git clone` and `git checkout`
+ * * Integrate with Playground.wordpress.net – bring over a tool
+ *   palette (file browser, sites browser, Blueprints browser).
+ * * A way to run composer install by default (simply via Blueprints?)
+ *   Communicate what it's doing by displaying the output in the terminal
+ * * Tabs for opening multiple files
+ * * Find a way to put my workspace outside of WordPress and still serve it?
+ *    * ln -s /workspace /wordpress/workspace?
+ *    * Or just make it a WordPress plugin? /wordpress/wp-content/plugins/my-plugin?
+ */
+
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 

From 3454b6ea2994536ac91f99dfcb41fce4c15f9536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 13:09:05 +0200
Subject: [PATCH 09/41] PHP Playground UX improvements

---
 .../components/src/FilePickerTree/index.tsx   | 544 ++++++++++++++----
 .../src/FilePickerTree/style.module.css       |  45 +-
 .../components/Layout.module.css              |   4 +-
 .../src/php-playground/components/Layout.tsx  |   7 +-
 .../components/PlaygroundFilePickerTree.tsx   | 233 ++------
 .../php-playground/components/Terminal.tsx    | 330 +++++++----
 .../website/src/php-playground/main.tsx       |   7 +-
 7 files changed, 782 insertions(+), 388 deletions(-)

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index 70dd01b312..149bf6571f 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
 	__experimentalTreeGrid as TreeGrid,
 	__experimentalTreeGridRow as TreeGridRow,
@@ -24,75 +24,272 @@ export type FilePickerControlProps = {
 	onSelect?: (path: string) => void;
 	isLoading?: boolean;
 	error?: string;
-	onExpand?: (path: string) => void | Promise<void>;
+	onLoadChildren?: (path: string) => Promise<FileNode[]>;
+	onContextMenu?: (
+		event: React.MouseEvent,
+		node: FileNode,
+		path: string
+	) => void;
+	renamingPath?: string | null;
+	onRename?: (path: string, newName: string) => void;
+	onRenameCancel?: (path: string) => void;
 };
 
 type ExpandedNodePaths = Record<string, boolean>;
 
+type LoadedChildrenMap = Record<string, FileNode[]>;
+
 export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	isLoading = false,
 	error = undefined,
 	files,
 	initialPath,
 	onSelect = () => {},
-	onExpand,
+	onLoadChildren,
+	onContextMenu,
+	renamingPath = null,
+	onRename,
+	onRenameCancel,
 }) => {
+	function buildPathChain(path: string): string[] {
+		if (!path) return [];
+		const normalized =
+			path
+				.replaceAll(/\\+/g, '/')
+				.replace(/\/{2,}/g, '/')
+				.replace(/\/$/, '') || path;
+		const hasLeadingSlash = normalized.startsWith('/');
+		const parts = normalized.split('/').filter(Boolean);
+		const chain: string[] = [];
+		let current = hasLeadingSlash ? '/' : '';
+		if (hasLeadingSlash) chain.push('/');
+		for (const part of parts) {
+			if (!current || current === '/') {
+				current = current === '/' ? `/${part}` : part;
+			} else {
+				current = `${current}/${part}`;
+			}
+			chain.push(current);
+		}
+		return chain;
+	}
 	const [expanded, setExpanded] = useState<ExpandedNodePaths>(() => {
 		if (!initialPath) {
 			return {};
 		}
-		const expanded: ExpandedNodePaths = {};
-		const pathParts = initialPath.split('/');
-		for (let i = 0; i < pathParts.length; i++) {
-			const pathSoFar = pathParts.slice(0, i + 1).join('/');
-			expanded[pathSoFar] = true;
+		const initialExpanded: ExpandedNodePaths = {};
+		for (const p of buildPathChain(initialPath)) {
+			initialExpanded[p] = true;
 		}
-		return expanded;
+		return initialExpanded;
 	});
 	const [selectedPath, setSelectedPath] = useState<string | null>(() =>
 		initialPath ? initialPath : null
 	);
+	const [focusedPath, setFocusedPath] = useState<string | null>(() =>
+		initialPath ? initialPath : null
+	);
+	const [lazyChildren, setLazyChildren] = useState<LoadedChildrenMap>({});
+	const [loadingPaths, setLoadingPaths] = useState<Record<string, boolean>>(
+		{}
+	);
+
+	const containerRef = useRef<HTMLDivElement>(null);
+	const searchBufferTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+	const loadingPathsRef = useRef(loadingPaths);
 
-	const expandNode = (path: string, isOpen: boolean) => {
+	useEffect(() => {
+		loadingPathsRef.current = loadingPaths;
+	}, [loadingPaths]);
+
+	const expandNode = useCallback((path: string, isOpen: boolean) => {
 		setExpanded((prevState) => ({
 			...prevState,
 			[path]: isOpen,
 		}));
-		if (isOpen && onExpand) {
+	}, []);
+
+	const selectPath = useCallback(
+		(path: string) => {
+			setSelectedPath(path);
+			onSelect(path);
+		},
+		[onSelect]
+	);
+
+	const focusPath = useCallback((path: string) => {
+		setFocusedPath(path);
+	}, []);
+
+	const generatePath = useCallback(
+		(node: FileNode, parentPath = ''): string => {
+			const raw = parentPath ? `${parentPath}/${node.name}` : node.name;
+			return raw.replaceAll(/\\+/g, '/').replace(/\/{2,}/g, '/');
+		},
+		[]
+	);
+
+	// Ensure that when initialPath changes after mount, expand its chain and focus/select
+	useEffect(() => {
+		if (!initialPath) {
+			return;
+		}
+		const chain = buildPathChain(initialPath);
+		setExpanded((prev) => {
+			const next = { ...prev } as ExpandedNodePaths;
+			for (const p of chain) {
+				next[p] = true;
+			}
+			return next;
+		});
+		const target = chain[chain.length - 1] || initialPath;
+		setFocusedPath(target);
+		setSelectedPath(target);
+	}, [initialPath]);
+
+	const getResolvedChildren = useCallback(
+		(node: FileNode, path: string): FileNode[] | undefined => {
+			if (node.children) {
+				return node.children;
+			}
+			return lazyChildren[path];
+		},
+		[lazyChildren]
+	);
+
+	const loadChildrenForPath = useCallback(
+		async (path: string, node: FileNode) => {
+			if (!onLoadChildren || node.type !== 'folder') {
+				return;
+			}
+			const existingChildren = node.children ?? lazyChildren[path];
+			if (existingChildren || loadingPathsRef.current[path]) {
+				return existingChildren;
+			}
+			setLoadingPaths((prev) => ({
+				...prev,
+				[path]: true,
+			}));
 			try {
-				const maybePromise = onExpand(path);
-				if (
-					maybePromise &&
-					typeof (maybePromise as any).then === 'function'
-				) {
-					(maybePromise as Promise<void>).catch(() => {
-						// ignore expansion loading error
-					});
-				}
-			} catch {
-				// ignore expansion errors
+				const children = await onLoadChildren(path);
+				setLazyChildren((prev) => ({
+					...prev,
+					[path]: children ?? [],
+				}));
+				return children;
+			} finally {
+				setLoadingPaths((prev) => {
+					const next = { ...prev };
+					delete next[path];
+					return next;
+				});
 			}
+		},
+		[onLoadChildren]
+	);
+
+	const handleToggleExpand = useCallback(
+		async (path: string, node: FileNode, isOpen: boolean) => {
+			expandNode(path, isOpen);
+			if (isOpen) {
+				await loadChildrenForPath(path, node);
+			}
+		},
+		[expandNode, loadChildrenForPath]
+	);
+
+	// Auto-expand and load the root when it is '/'
+	useEffect(() => {
+		if (!onLoadChildren || files.length === 0) {
+			return;
 		}
-	};
+		const rootNode = files[0];
+		if (rootNode?.type === 'folder' && rootNode.name === '/') {
+			setExpanded((prev) => (prev['/'] ? prev : { ...prev, '/': true }));
+			if (!lazyChildren['/'] && !loadingPathsRef.current['/']) {
+				void loadChildrenForPath('/', rootNode);
+			}
+		}
+	}, [files, onLoadChildren, lazyChildren, loadChildrenForPath]);
 
-	const selectPath = (path: string) => {
-		setSelectedPath(path);
-		onSelect(path);
-	};
+	useEffect(() => {
+		if (!initialPath || !onLoadChildren) {
+			return;
+		}
 
-	const generatePath = (node: FileNode, parentPath = ''): string => {
-		return parentPath
-			? `${parentPath}/${node.name}`.replaceAll(/\/+/g, '/')
-			: node.name;
-	};
+		let isMounted = true;
+		const loadInitialPath = async () => {
+			const chain = buildPathChain(initialPath);
+			let currentChildren = files;
+			let parentPath = '';
+			for (let i = 0; i < chain.length; i++) {
+				const segmentPath = chain[i];
+				const nextNode = currentChildren?.find((child) => {
+					const childPath = generatePath(child, parentPath);
+					return childPath === segmentPath;
+				});
+				if (!nextNode) {
+					break;
+				}
+				if (nextNode.type !== 'folder') {
+					currentChildren = [];
+					continue;
+				}
+				const existingChildren =
+					nextNode.children ?? lazyChildren[segmentPath];
+				if (!existingChildren && isMounted) {
+					const loaded = await loadChildrenForPath(
+						segmentPath,
+						nextNode
+					);
+					currentChildren = loaded ?? [];
+				} else {
+					currentChildren = existingChildren ?? [];
+				}
+				parentPath = segmentPath;
+			}
+		};
+
+		loadInitialPath();
+
+		return () => {
+			isMounted = false;
+		};
+	}, [initialPath, files, onLoadChildren, loadChildrenForPath]);
+
+	useEffect(() => {
+		if (!focusedPath) {
+			if (files.length > 0) {
+				const firstPath = generatePath(files[0]);
+				setFocusedPath(firstPath);
+			}
+			return;
+		}
+		if (renamingPath && renamingPath === focusedPath) {
+			return;
+		}
+		const focusTarget = containerRef.current?.querySelector(
+			`[data-path="${focusedPath}"]`
+		) as HTMLElement | null;
+		if (focusTarget && typeof focusTarget.focus === 'function') {
+			focusTarget.focus();
+		}
+	}, [files, focusedPath, generatePath, lazyChildren, renamingPath]);
+
+	useEffect(() => {
+		return () => {
+			if (searchBufferTimeoutRef.current) {
+				clearTimeout(searchBufferTimeoutRef.current);
+			}
+		};
+	}, []);
 
 	const [searchBuffer, setSearchBuffer] = useState('');
-	const searchBufferTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
 	function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
 		if (event.key.length === 1 && event.key.match(/\S/)) {
 			const newSearchBuffer = searchBuffer + event.key.toLowerCase();
 			setSearchBuffer(newSearchBuffer);
-			// Clear the buffer after 1 second
 			if (searchBufferTimeoutRef.current) {
 				clearTimeout(searchBufferTimeoutRef.current);
 			}
@@ -100,11 +297,9 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 				setSearchBuffer('');
 			}, 1000);
 
-			if (thisContainerRef.current) {
+			if (containerRef.current) {
 				const buttons = Array.from(
-					thisContainerRef.current.querySelectorAll(
-						'.file-node-button'
-					)
+					containerRef.current.querySelectorAll('.file-node-button')
 				);
 				const activeElement = document.activeElement;
 				let startIndex = 0;
@@ -118,20 +313,23 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 				}
 				for (let i = 0; i < buttons.length; i++) {
 					const index = (startIndex + i) % buttons.length;
-					const button = buttons[index];
+					const button = buttons[index] as HTMLElement;
 					if (
 						button.textContent
 							?.toLowerCase()
 							.trim()
 							.startsWith(newSearchBuffer)
 					) {
-						(button as HTMLButtonElement).focus();
+						button.focus();
+						const path = button.getAttribute('data-path');
+						if (path) {
+							focusPath(path);
+						}
 						break;
 					}
 				}
 			}
 		} else {
-			// Clear the buffer for any non-letter key press
 			setSearchBuffer('');
 			if (searchBufferTimeoutRef.current) {
 				clearTimeout(searchBufferTimeoutRef.current);
@@ -139,22 +337,6 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		}
 	}
 
-	const thisContainerRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		// automatically focus the first button when the files are loaded
-		if (thisContainerRef.current) {
-			const firstButton = initialPath
-				? thisContainerRef.current.querySelector(
-						`[data-path="${initialPath}"]`
-				  )
-				: thisContainerRef.current.querySelector('.file-node-button');
-			if (firstButton) {
-				(firstButton as HTMLButtonElement).focus();
-			}
-		}
-	}, [files.length > 0]);
-
 	if (isLoading) {
 		return (
 			<div className={css['loadingContainer']}>
@@ -173,7 +355,7 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	}
 
 	return (
-		<div onKeyDown={handleKeyDown} ref={thisContainerRef}>
+		<div onKeyDown={handleKeyDown} ref={containerRef}>
 			<TreeGrid className={css['filePickerTree']}>
 				{files.map((file, index) => (
 					<NodeRow
@@ -183,10 +365,18 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 						position={index + 1}
 						setSize={files.length}
 						expandedNodePaths={expanded}
-						expandNode={expandNode}
+						expandNode={handleToggleExpand}
 						selectedNode={selectedPath}
+						focusedNode={focusedPath}
 						selectPath={selectPath}
+						focusPath={focusPath}
 						generatePath={generatePath}
+						getChildren={getResolvedChildren}
+						loadingPaths={loadingPaths}
+						onContextMenu={onContextMenu}
+						renamingPath={renamingPath}
+						onRename={onRename}
+						onRenameCancel={onRenameCancel}
 					/>
 				))}
 			</TreeGrid>
@@ -194,18 +384,33 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	);
 };
 
-export const NodeRow: React.FC<{
+const NodeRow: React.FC<{
 	node: FileNode;
 	level: number;
 	position: number;
 	setSize: number;
 	expandedNodePaths: ExpandedNodePaths;
-	expandNode: (path: string, isOpen: boolean) => void;
+	expandNode: (
+		path: string,
+		node: FileNode,
+		isOpen: boolean
+	) => void | Promise<void>;
 	selectPath: (path: string) => void;
 	selectedNode: string | null;
+	focusPath: (path: string) => void;
+	focusedNode: string | null;
 	generatePath: (node: FileNode, parentPath?: string) => string;
+	getChildren: (node: FileNode, path: string) => FileNode[] | undefined;
+	loadingPaths: Record<string, boolean>;
+	onContextMenu?: (
+		event: React.MouseEvent,
+		node: FileNode,
+		path: string
+	) => void;
+	renamingPath: string | null;
+	onRename?: (path: string, newName: string) => void;
+	onRenameCancel?: (path: string) => void;
 	parentPath?: string;
-	parentMapping?: string;
 }> = ({
 	node,
 	level,
@@ -214,16 +419,51 @@ export const NodeRow: React.FC<{
 	expandedNodePaths,
 	expandNode,
 	selectPath,
+	selectedNode,
+	focusPath,
+	focusedNode,
 	generatePath,
+	getChildren,
+	loadingPaths,
+	onContextMenu,
+	renamingPath,
+	onRename,
+	onRenameCancel,
 	parentPath = '',
-	selectedNode,
 }) => {
 	const path = generatePath(node, parentPath);
 	const isExpanded = expandedNodePaths[path];
+	const isRenaming = renamingPath === path;
+	const renameInputRef = useRef<HTMLInputElement>(null);
+	const [renameValue, setRenameValue] = useState(node.name);
+	const renameHandledRef = useRef(false);
+
+	const resolvedChildren = getChildren(node, path) ?? [];
+	const isLoadingChildren = Boolean(loadingPaths[path]);
+
+	useEffect(() => {
+		if (isRenaming) {
+			setRenameValue(node.name);
+			renameHandledRef.current = false;
+			if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+				window.requestAnimationFrame(() => {
+					renameInputRef.current?.select();
+				});
+			} else {
+				renameInputRef.current?.select();
+			}
+		} else {
+			renameHandledRef.current = false;
+		}
+	}, [isRenaming, node.name]);
 
-	const toggleOpen = () => expandNode(path, !isExpanded);
+	const toggleOpen = () => {
+		if (node.type === 'folder') {
+			expandNode(path, node, !isExpanded);
+		}
+	};
 
-	const handleKeyDown = (event: any) => {
+	const handleKeyDown = (event: React.KeyboardEvent) => {
 		if (event.key === 'ArrowLeft') {
 			if (isExpanded) {
 				toggleOpen();
@@ -238,8 +478,11 @@ export const NodeRow: React.FC<{
 			event.stopPropagation();
 		} else if (event.key === 'ArrowRight') {
 			if (isExpanded) {
-				if (node.children?.length) {
-					const firstChildPath = generatePath(node.children[0], path);
+				if (resolvedChildren?.length) {
+					const firstChildPath = generatePath(
+						resolvedChildren[0],
+						path
+					);
 					(
 						document.querySelector(
 							`[data-path="${firstChildPath}"]`
@@ -251,10 +494,19 @@ export const NodeRow: React.FC<{
 			}
 			event.preventDefault();
 			event.stopPropagation();
-		} else if (event.key === 'Space') {
-			expandNode(path, !isExpanded);
+		} else if (
+			event.key === ' ' ||
+			event.key === 'Space' ||
+			event.key === 'Spacebar'
+		) {
+			if (node.type === 'folder') {
+				expandNode(path, node, !isExpanded);
+			}
+			event.preventDefault();
 		} else if (event.key === 'Enter') {
-			const form = event.currentTarget?.closest('form');
+			selectPath(path);
+			focusPath(path);
+			const form = (event.currentTarget as HTMLElement)?.closest('form');
 			if (form) {
 				setTimeout(() => {
 					form.dispatchEvent(new Event('submit', { bubbles: true }));
@@ -262,6 +514,35 @@ export const NodeRow: React.FC<{
 			}
 		}
 	};
+
+	const handleContextMenu = (event: React.MouseEvent) => {
+		onContextMenu?.(event, node, path);
+	};
+
+	const handleRenameSubmit = (event: React.FormEvent) => {
+		event.preventDefault();
+		renameHandledRef.current = true;
+		onRename?.(path, renameValue.trim());
+	};
+
+	const handleRenameKeyDown = (
+		event: React.KeyboardEvent<HTMLInputElement>
+	) => {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			event.stopPropagation();
+			renameHandledRef.current = true;
+			onRenameCancel?.(path);
+		}
+	};
+
+	const handleRenameBlur = () => {
+		if (!renameHandledRef.current) {
+			onRenameCancel?.(path);
+		}
+		renameHandledRef.current = false;
+	};
+
 	return (
 		<>
 			<TreeGridRow
@@ -271,44 +552,106 @@ export const NodeRow: React.FC<{
 			>
 				<TreeGridCell>
 					{() => (
-						<Button
-							onClick={() => {
-								toggleOpen();
-								selectPath(path);
-							}}
-							onKeyDown={handleKeyDown}
-							onFocus={() => {
-								selectPath(path);
-							}}
-							className={classNames(css['fileNodeButton'], {
-								[css['selected']]: selectedNode === path,
-								'file-node-button': true,
-							})}
-							data-path={path}
-						>
-							<FileName
-								node={node}
-								isOpen={node.type === 'folder' && isExpanded}
-								level={level}
-							/>
-						</Button>
+						<>
+							{isRenaming ? (
+								<form
+									onSubmit={handleRenameSubmit}
+									className={classNames(
+										css['fileNodeButton'],
+										css['renaming'],
+										'file-node-button',
+										{
+											[css['selected']]:
+												selectedNode === path,
+											[css['focused']]:
+												focusedNode === path,
+										}
+									)}
+									data-path={path}
+									onContextMenu={handleContextMenu}
+								>
+									<FileName
+										node={node}
+										isOpen={
+											node.type === 'folder' && isExpanded
+										}
+										level={level}
+										isLoading={isLoadingChildren}
+										hideName
+									/>
+									<input
+										ref={renameInputRef}
+										className={css['renameInput']}
+										value={renameValue}
+										onChange={(event) =>
+											setRenameValue(event.target.value)
+										}
+										onBlur={handleRenameBlur}
+										onFocus={() => focusPath(path)}
+										onKeyDown={handleRenameKeyDown}
+									/>
+								</form>
+							) : (
+								<Button
+									onClick={() => {
+										if (node.type === 'folder') {
+											toggleOpen();
+										}
+										selectPath(path);
+										focusPath(path);
+									}}
+									onKeyDown={handleKeyDown}
+									onFocus={() => {
+										focusPath(path);
+									}}
+									onContextMenu={handleContextMenu}
+									className={classNames(
+										css['fileNodeButton'],
+										{
+											[css['selected']]:
+												selectedNode === path,
+											[css['focused']]:
+												focusedNode === path,
+										}
+									)}
+									data-path={path}
+								>
+									<FileName
+										node={node}
+										isOpen={
+											node.type === 'folder' && isExpanded
+										}
+										level={level}
+										isLoading={isLoadingChildren}
+									/>
+								</Button>
+							)}
+						</>
 					)}
 				</TreeGridCell>
 			</TreeGridRow>
 			{isExpanded &&
-				node.children &&
-				node.children.map((child, index) => (
+				resolvedChildren &&
+				resolvedChildren.map((child, index) => (
 					<NodeRow
 						key={child.name}
 						node={child}
 						level={level + 1}
 						position={index + 1}
-						setSize={node.children!.length}
+						setSize={resolvedChildren.length}
 						expandedNodePaths={expandedNodePaths}
 						expandNode={expandNode}
-						selectedNode={selectedNode}
 						selectPath={selectPath}
+						selectedNode={selectedNode}
+						focusPath={focusPath}
+						focusedNode={focusedNode}
 						generatePath={generatePath}
+						getChildren={getChildren}
+						loadingPaths={loadingPaths}
+						onContextMenu={onContextMenu}
+						renamingPath={renamingPath}
+						onRename={onRename}
+						onRenameCancel={onRenameCancel}
 						parentPath={path}
 					/>
 				))}
@@ -316,11 +659,13 @@ export const NodeRow: React.FC<{
 	);
 };
 
-export const FileName: React.FC<{
+const FileName: React.FC<{
 	node: FileNode;
 	level: number;
 	isOpen?: boolean;
-}> = ({ node, level, isOpen }) => {
+	isLoading?: boolean;
+	hideName?: boolean;
+}> = ({ node, level, isOpen, isLoading = false, hideName = false }) => {
 	const indent: string[] = [];
 	for (let i = 0; i < level; i++) {
 		indent.push('&nbsp;&nbsp;&nbsp;&nbsp;');
@@ -337,7 +682,10 @@ export const FileName: React.FC<{
 				<div style={{ width: 16 }}>&nbsp;</div>
 			)}
 			<Icon width={16} icon={node.type === 'folder' ? folder : file} />
-			<span className={css['fileName']}>{node.name}</span>
+			{isLoading && <Spinner className={css['inlineSpinner']} />}
+			{!hideName && <span className={css['fileName']}>{node.name}</span>}
 		</>
 	);
 };
+
+export default FilePickerTree;
diff --git a/packages/playground/components/src/FilePickerTree/style.module.css b/packages/playground/components/src/FilePickerTree/style.module.css
index 7bfa7b81d0..5083803e87 100644
--- a/packages/playground/components/src/FilePickerTree/style.module.css
+++ b/packages/playground/components/src/FilePickerTree/style.module.css
@@ -43,15 +43,50 @@
 	font-size: 13px;
 	font-weight: 400;
 
-	&:focus,
-	.selected {
-		background-color: var(--wp-admin-theme-color);
-		color: #fff;
+	&:focus {
 		outline: 0 !important;
-		box-shadow: none !important;
+		/* outline: 0 !important;
+		box-shadow: none !important; */
 	}
 }
 
+.selected {
+	background-color: var(--wp-admin-theme-color);
+	color: #fff;
+
+	&:active,
+	&:focus {
+		color: #fff;
+		background-color: var(--wp-admin-theme-color);
+	}
+}
+
+.focused {
+	box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
+	border-radius: 2px;
+}
+
+.renaming {
+	align-items: center;
+	gap: 8px;
+}
+
+.rename-input,
+.renameInput {
+	flex: 1;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+	padding: 4px 6px;
+	font-size: 13px;
+	font-family: inherit;
+}
+
+.inline-spinner :global(.components-spinner__outer),
+.inlineSpinner :global(.components-spinner__outer) {
+	width: 16px;
+	height: 16px;
+}
+
 .file-name {
 	margin-left: 10px;
 }
diff --git a/packages/playground/website/src/php-playground/components/Layout.module.css b/packages/playground/website/src/php-playground/components/Layout.module.css
index 2c87218a78..4bf4021006 100644
--- a/packages/playground/website/src/php-playground/components/Layout.module.css
+++ b/packages/playground/website/src/php-playground/components/Layout.module.css
@@ -32,6 +32,7 @@
 	min-width: 280px;
 	min-height: 0;
 	height: 100%;
+	overflow: auto;
 }
 
 .controls {
@@ -213,6 +214,7 @@
 }
 
 .terminalSection {
+	height: 100%;
 	background: #111;
 	color: #fff;
 	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
@@ -253,7 +255,7 @@
 
 .terminalPane {
 	box-sizing: border-box;
-	overflow: hidden;
+	overflow: auto;
 	padding: 8px;
 	flex: 1;
 }
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 45eab76e3e..f63fbae7ba 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -16,6 +16,7 @@ import { setCode } from '../store';
 export const Layout = () => {
 	const [isHelpOpen, setHelpOpen] = useState(false);
 	const [isTerminalCollapsed, setTerminalCollapsed] = useState(false);
+	const [terminalResizeToken, setTerminalResizeToken] = useState(0);
 	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
 	const { client: playgroundClient, bootStatus } = useAppSelector(
 		(state) => state.playground
@@ -56,7 +57,7 @@ export const Layout = () => {
 								<PlaygroundFilePickerTree
 									playgroundClient={playgroundClient}
 									root="/"
-									initialPath="/wordpress/code.php"
+									initialPath="/wordpress/workspace"
 									excludePaths={[
 										'/dev',
 										'/internal',
@@ -114,6 +115,9 @@ export const Layout = () => {
 								collapsible
 								onCollapse={() => setTerminalCollapsed(true)}
 								onExpand={() => setTerminalCollapsed(false)}
+								onResize={() =>
+									setTerminalResizeToken((token) => token + 1)
+								}
 								className={styles.terminalPanel}
 							>
 								<section
@@ -142,6 +146,7 @@ export const Layout = () => {
 									<div className={styles.terminalPane}>
 										<Terminal
 											isCollapsed={isTerminalCollapsed}
+											resizeToken={terminalResizeToken}
 										/>
 									</div>
 								</section>
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index cfecb7289a..c77f516345 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -1,16 +1,8 @@
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import React, { useCallback, useMemo } from 'react';
 import type { FileNode } from '@wp-playground/components';
 import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
 import type { PlaygroundClient } from '@wp-playground/client';
 
-type NodeMap = Map<string, FileNode & { loaded?: boolean; loading?: boolean }>;
-
 function normalizePath(path: string) {
 	if (!path) return '/';
 	const normalized =
@@ -18,43 +10,20 @@ function normalizePath(path: string) {
 	return normalized;
 }
 
-function toSegments(path: string) {
-	const p = normalizePath(path);
-	if (p === '/') return ['/'];
-	const parts = p.split('/').filter(Boolean);
-	const segments: string[] = [];
-	let acc = '';
-	for (const part of parts) {
-		acc += '/' + part;
-		segments.push(acc);
-	}
-	return segments.length ? segments : ['/'];
-}
-
 async function listDir(client: PlaygroundClient, path: string) {
-	// listFiles returns names without the path by default
 	const names = await client.listFiles(path);
 	const results: { name: string; type: 'file' | 'folder' }[] = [];
 	for (const name of names) {
 		const childPath = path === '/' ? `/${name}` : `${path}/${name}`;
-		// Prefer isDir to avoid stat costs; isDir is available on the client
 		const isDirectory = await client.isDir(childPath).catch(() => false);
 		results.push({ name, type: isDirectory ? 'folder' : 'file' });
 	}
 	return results.sort((a, b) => {
-		// Folders first, then files; alphabetical within groups
 		if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
 		return a.name.localeCompare(b.name);
 	});
 }
 
-function getParentPath(path: string) {
-	const p = normalizePath(path);
-	if (p === '/') return '';
-	const lastSlash = p.lastIndexOf('/');
-	return lastSlash <= 0 ? '/' : p.substring(0, lastSlash);
-}
-
 function getBaseName(path: string) {
 	const p = normalizePath(path);
 	if (p === '/') return '/';
@@ -62,45 +31,35 @@ function getBaseName(path: string) {
 	return parts[parts.length - 1] || '/';
 }
 
-function upsertChild(map: NodeMap, parentPath: string, child: FileNode) {
-	const parent = map.get(parentPath);
-	if (!parent) return;
-	const prevChildren = parent.children || [];
-	const existingIndex = prevChildren.findIndex((c) => c.name === child.name);
-	let nextChildren: FileNode[];
-	if (existingIndex >= 0) {
-		nextChildren = prevChildren.slice();
-		nextChildren[existingIndex] = child;
-	} else {
-		nextChildren = prevChildren.concat(child);
+function toCorePath(absPath: string, normalizedRoot: string) {
+	const abs = normalizePath(absPath);
+	const rootName = getBaseName(normalizedRoot);
+	if (abs === normalizedRoot) return rootName;
+	if (normalizedRoot === '/') {
+		// When root is '/', core path is the absolute path
+		return abs;
 	}
-	map.set(parentPath, { ...parent, children: nextChildren });
+	const prefix = normalizedRoot.endsWith('/')
+		? normalizedRoot
+		: normalizedRoot + '/';
+	if (abs.startsWith(prefix)) {
+		return rootName + abs.slice(normalizedRoot.length);
+	}
+	return rootName;
 }
 
-function cloneTreeFromMap(map: NodeMap, rootPath: string): FileNode[] {
-	const root = map.get(rootPath);
-	if (!root) return [];
-	const clone = (nodePath: string): FileNode => {
-		const node = map.get(nodePath)!;
-		const base: FileNode = {
-			name: node.name,
-			type: node.type,
-			children: undefined,
-		};
-		if (node.children) {
-			const children: FileNode[] = [];
-			for (const child of node.children) {
-				const childPath =
-					nodePath === '/'
-						? `/${child.name}`
-						: `${nodePath}/${child.name}`;
-				children.push(clone(childPath));
-			}
-			base.children = children;
-		}
-		return base;
-	};
-	return [clone(rootPath)];
+function corePathToAbsolute(corePath: string, normalizedRoot: string) {
+	const rootName = getBaseName(normalizedRoot);
+	if (corePath === rootName) return normalizedRoot;
+	if (normalizedRoot === '/') {
+		// When root is '/', the incoming core path is absolute
+		return normalizePath(corePath);
+	}
+	const prefix = rootName.endsWith('/') ? rootName : rootName + '/';
+	if (corePath.startsWith(prefix)) {
+		return normalizePath(normalizedRoot + corePath.slice(rootName.length));
+	}
+	return normalizedRoot;
 }
 
 export default function PlaygroundFilePickerTree({
@@ -117,109 +76,43 @@ export default function PlaygroundFilePickerTree({
 	playgroundClient?: PlaygroundClient;
 }) {
 	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
-	const [treeVersion, setTreeVersion] = useState(0);
-	const nodeMapRef = useRef<NodeMap>(new Map());
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<string | undefined>(undefined);
-
-	// Ensure the root exists in the map.
-	useEffect(() => {
-		nodeMapRef.current.clear();
-		const rootName =
-			normalizedRoot === '/' ? '/' : getBaseName(normalizedRoot);
-		nodeMapRef.current.set(normalizedRoot, {
-			name: rootName,
-			type: 'folder',
-			children: [],
-			loaded: false,
-		});
-		setTreeVersion((v) => v + 1);
-	}, [normalizedRoot]);
+	const rootName = useMemo(
+		() => getBaseName(normalizedRoot),
+		[normalizedRoot]
+	);
 
-	const loadChildren = useCallback(
-		async (dirPath: string) => {
-			dirPath = normalizePath(dirPath);
-			const map = nodeMapRef.current;
-			const node = map.get(dirPath);
-			if (!node || node.type !== 'folder') return;
-			if ((node as any).loading || (node as any).loaded) return;
-			(node as any).loading = true;
-			setTreeVersion((v) => v + 1);
-			try {
-				if (!playgroundClient) {
-					throw new Error('Playground client is not ready yet.');
-				}
-				const items = await listDir(playgroundClient, dirPath);
-				// Reset children to reflect latest listing
-				map.set(dirPath, {
-					...node,
-					children: [],
-				});
-				for (const item of items) {
-					const childPath =
-						dirPath === '/'
-							? `/${item.name}`
-							: `${dirPath}/${item.name}`;
-					if (excludePaths?.includes(childPath)) {
-						continue;
-					}
-					const childNode: FileNode = {
-						name: item.name,
-						type: item.type,
-						children: item.type === 'folder' ? [] : undefined,
-					};
-					map.set(childPath, { ...childNode, loaded: false });
-					upsertChild(map, dirPath, childNode);
-				}
-				(map.get(dirPath) as any).loaded = true;
-			} catch (e: any) {
-				setError(e?.message || String(e));
-			} finally {
-				(map.get(dirPath) as any).loading = false;
-				setTreeVersion((v) => v + 1);
-			}
-		},
-		[playgroundClient, excludePaths]
+	const files = useMemo<FileNode[]>(
+		() => [
+			{
+				name: rootName,
+				type: 'folder',
+			},
+		],
+		[rootName]
 	);
 
-	// Prefetch ancestors for initialPath, expanding lazily along the way
-	useEffect(() => {
-		let cancelled = false;
-		const run = async () => {
-			if (!initialPath) return;
-			setIsLoading(true);
-			try {
-				const segments = toSegments(initialPath);
-				for (const seg of segments) {
-					const parent = getParentPath(seg) || normalizedRoot;
-					// Ensure parent exists in map
-					if (!nodeMapRef.current.has(parent)) {
-						const baseName =
-							parent === '/' ? '/' : getBaseName(parent);
-						nodeMapRef.current.set(parent, {
-							name: baseName,
-							type: 'folder',
-							children: [],
-							loaded: false,
-						});
-					}
-					await loadChildren(parent);
-					if (cancelled) return;
-				}
-			} finally {
-				setIsLoading(false);
-			}
-		};
-		void run();
-		return () => {
-			cancelled = true;
-		};
-	}, [initialPath, normalizedRoot, loadChildren]);
+	const coreInitialPath = useMemo(() => {
+		return initialPath
+			? toCorePath(initialPath, normalizedRoot)
+			: undefined;
+	}, [initialPath, normalizedRoot]);
 
-	const files = useMemo(() => {
-		return cloneTreeFromMap(nodeMapRef.current, normalizedRoot);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [treeVersion, normalizedRoot]);
+	const handleLoadChildren = useCallback(
+		async (corePath: string) => {
+			if (!playgroundClient) return [] as FileNode[];
+			const absDirPath = corePathToAbsolute(corePath, normalizedRoot);
+			const items = await listDir(playgroundClient, absDirPath);
+			const filtered = items.filter((item) => {
+				const childAbs =
+					absDirPath === '/'
+						? `/${item.name}`
+						: `${absDirPath}/${item.name}`;
+				return !excludePaths?.includes(childAbs);
+			});
+			return filtered as FileNode[];
+		},
+		[playgroundClient, normalizedRoot, excludePaths]
+	);
 
 	const handleSelect = useCallback(
 		(path: string) => {
@@ -231,11 +124,9 @@ export default function PlaygroundFilePickerTree({
 	return (
 		<CoreFilePickerTree
 			files={files}
-			initialPath={initialPath}
+			initialPath={coreInitialPath}
 			onSelect={handleSelect}
-			onExpand={(path) => loadChildren(path)}
-			isLoading={isLoading}
-			error={error}
+			onLoadChildren={handleLoadChildren}
 		/>
 	);
 }
diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/Terminal.tsx
index 0f69c2a1ce..eb7975fd6d 100644
--- a/packages/playground/website/src/php-playground/components/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/Terminal.tsx
@@ -1,11 +1,17 @@
 import { useEffect, useRef } from 'react';
-import { splitShellCommand } from '@php-wasm/util';
+import {
+	basename,
+	joinPaths,
+	normalizePath,
+	splitShellCommand,
+} from '@php-wasm/util';
 import { Terminal as XTerm } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 
 import { playgroundRuntime } from '../runtime';
 import styles from './layout.module.css';
 import 'xterm/css/xterm.css';
+import type { StreamedPHPResponse } from '@php-wasm/universal';
 
 const PROGRESS_BAR_WIDTH = 28;
 const SPINNER_FRAMES = ['-', '\\', '|', '/'];
@@ -20,6 +26,7 @@ interface DownloadProgress {
 
 interface TerminalProps {
 	isCollapsed: boolean;
+	resizeToken?: number;
 }
 
 const formatBytes = (bytes: number) => {
@@ -60,7 +67,7 @@ const drawProgress = (term: XTerm, progress: DownloadProgress) => {
 	progress.lastRenderedLength = padLength;
 };
 
-export const Terminal = ({ isCollapsed }: TerminalProps) => {
+export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 	const terminalContainerRef = useRef<HTMLDivElement | null>(null);
 	const fitAddonRef = useRef<FitAddon | null>(null);
 	const progressRef = useRef<DownloadProgress | null>(null);
@@ -92,6 +99,52 @@ export const Terminal = ({ isCollapsed }: TerminalProps) => {
 			}
 		});
 
+		const viewport = container.querySelector(
+			'.xterm-viewport'
+		) as HTMLElement | null;
+		let shouldStickToBottom = true;
+		const updateStickiness = () => {
+			if (!viewport) {
+				return;
+			}
+			const { scrollTop, clientHeight, scrollHeight } = viewport;
+			shouldStickToBottom =
+				scrollHeight - (scrollTop + clientHeight) <= 4;
+		};
+		viewport?.addEventListener('scroll', updateStickiness);
+
+		const autoScroll = () => {
+			if (!shouldStickToBottom) {
+				return;
+			}
+			requestAnimationFrame(() => {
+				try {
+					term.scrollToBottom();
+				} catch {
+					/* ignore errors */
+				}
+			});
+		};
+
+		const DEFAULT_CWD = '/wordpress';
+		let currentWorkingDirectory = DEFAULT_CWD;
+		const promptPrefix = () => {
+			const dirName = basename(currentWorkingDirectory) || '/';
+			return `(${dirName}) $ `;
+		};
+		const resolvePath = (target: string) => {
+			if (!target || target === '~') {
+				return DEFAULT_CWD;
+			}
+			if (target.startsWith('~/')) {
+				target = joinPaths(DEFAULT_CWD, target.slice(2));
+			}
+			const rawPath = target.startsWith('/')
+				? target
+				: joinPaths(currentWorkingDirectory, target);
+			return normalizePath(rawPath || '/');
+		};
+
 		const startDownloadProgress = (label: string, totalBytes: number) => {
 			progressRef.current = {
 				label,
@@ -102,6 +155,7 @@ export const Terminal = ({ isCollapsed }: TerminalProps) => {
 			};
 			term.writeln('');
 			drawProgress(term, progressRef.current);
+			autoScroll();
 		};
 
 		const updateDownloadProgress = (
@@ -131,11 +185,13 @@ export const Terminal = ({ isCollapsed }: TerminalProps) => {
 			term.writeln('');
 			term.writeln(`${progressRef.current.label}: ${message}`);
 			progressRef.current = null;
+			autoScroll();
 		};
 
 		const failDownloadProgress = (message: string) => {
 			if (!progressRef.current) {
 				term.writeln(message);
+				autoScroll();
 				return;
 			}
 			const failureLine = `${progressRef.current.label}: failed`;
@@ -147,14 +203,17 @@ export const Terminal = ({ isCollapsed }: TerminalProps) => {
 			term.writeln('');
 			term.writeln(message);
 			progressRef.current = null;
+			autoScroll();
 		};
 
 		const prompt = (newLine = true) => {
-			term.write(newLine ? '\r\n$ ' : '$ ');
+			term.write(newLine ? `\r\n${promptPrefix()}` : promptPrefix());
+			autoScroll();
 		};
 
 		const refreshInputLine = (currentLine: string) => {
-			term.write(`\r\x1b[2K$ ${currentLine}`);
+			term.write(`\r\x1b[2K${promptPrefix()}${currentLine}`);
+			autoScroll();
 		};
 
 		const writeStdout = (text: string) => {
@@ -162,6 +221,7 @@ export const Terminal = ({ isCollapsed }: TerminalProps) => {
 				return;
 			}
 			term.write(text.replace(/\r?\n/g, '\r\n'));
+			autoScroll();
 		};
 
 		const writeStderr = (text: string) => {
@@ -169,11 +229,13 @@ export const Terminal = ({ isCollapsed }: TerminalProps) => {
 				return;
 			}
 			term.write(`\u001b[31m${text.replace(/\r?\n/g, '\r\n')}\u001b[0m`);
+			autoScroll();
 		};
 
 		term.writeln(
 			'WordPress Playground CLI ready. Type `help` to see available commands.'
 		);
+		autoScroll();
 		prompt(false);
 
 		const downloadWithProgress = async (url: string, label: string) => {
@@ -239,6 +301,7 @@ export const Terminal = ({ isCollapsed }: TerminalProps) => {
 				return;
 			}
 			term.writeln('\r\nPreparing WP-CLI...');
+			autoScroll();
 			const binary = await downloadWithProgress(
 				'https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar',
 				'WP-CLI download'
@@ -253,6 +316,7 @@ export const Terminal = ({ isCollapsed }: TerminalProps) => {
 				return;
 			}
 			term.writeln('\r\nPreparing Composer...');
+			autoScroll();
 			const binary = await downloadWithProgress(
 				'https://wordpress-playground-cors-proxy.net/?https://getcomposer.org/download/2.8.12/composer.phar',
 				'Composer download'
@@ -277,110 +341,112 @@ require_once __FILE__ . '.bin';
 			options: { env?: Record<string, string> } = {}
 		) => {
 			const client = await ensureBootReady();
-			const requestHandler = client.__internal_getRequestHandler?.();
-			const processManager = requestHandler?.processManager;
-			const { php, reap } = processManager
-				? await processManager.acquirePHPInstance()
-				: { php: await client.__internal_getPHP?.(), reap: () => {} };
-			try {
-				const response = await php.cli(argv, options);
-				const stdoutReader = response.stdout.getReader();
-				const stderrReader = response.stderr.getReader();
-				const stdoutDecoder = new TextDecoder();
-				const stderrDecoder = new TextDecoder();
-				let aborted = false;
-				const activeProcess = {
-					async terminate() {
-						if (aborted) {
-							return;
-						}
-						aborted = true;
-						try {
-							await stdoutReader.cancel();
-						} catch {
-							/* ignore errors */
-						}
-						try {
-							await stderrReader.cancel();
-						} catch {
-							/* ignore errors */
-						}
-						try {
-							php.exit(130);
-						} catch {
-							/* ignore errors */
-						}
-					},
-				};
-				currentProcess = activeProcess;
-
-				const streamStdout = (async () => {
-					try {
-						while (!aborted) {
-							const { value, done } = await stdoutReader.read();
-							if (done) {
-								break;
-							}
-							if (value) {
-								const text = stdoutDecoder.decode(value, {
-									stream: true,
-								});
-								writeStdout(text);
+			const response = (await client.cli(
+				argv,
+				options
+			)) as StreamedPHPResponse & {
+				terminate?: () => Promise<void> | void;
+			};
+			const stdoutReader = response.stdout.getReader();
+			const stderrReader = response.stderr.getReader();
+			const stdoutDecoder = new TextDecoder();
+			const stderrDecoder = new TextDecoder();
+			const terminateResponse =
+				typeof response.terminate === 'function'
+					? async () => {
+							try {
+								await response.terminate!();
+							} catch {
+								/* ignore errors */
 							}
-						}
-						const flush = stdoutDecoder.decode();
-						writeStdout(flush);
-					} catch (error) {
-						if (!aborted) {
-							throw error;
-						}
+					  }
+					: null;
+			let aborted = false;
+			const activeProcess = {
+				async terminate() {
+					if (aborted) {
+						return;
 					}
-				})();
-
-				const streamStderr = (async () => {
+					aborted = true;
 					try {
-						while (!aborted) {
-							const { value, done } = await stderrReader.read();
-							if (done) {
-								break;
-							}
-							if (value) {
-								const text = stderrDecoder.decode(value, {
-									stream: true,
-								});
-								writeStderr(text);
-							}
+						await stdoutReader.cancel();
+					} catch {
+						/* ignore errors */
+					}
+					try {
+						await stderrReader.cancel();
+					} catch {
+						/* ignore errors */
+					}
+					if (terminateResponse) {
+						await terminateResponse();
+					}
+				},
+			};
+			currentProcess = activeProcess;
+
+			const streamStdout = (async () => {
+				try {
+					while (!aborted) {
+						const { value, done } = await stdoutReader.read();
+						if (done) {
+							break;
 						}
-						const flush = stderrDecoder.decode();
-						writeStderr(flush);
-					} catch (error) {
-						if (!aborted) {
-							throw error;
+						if (value) {
+							const text = stdoutDecoder.decode(value, {
+								stream: true,
+							});
+							writeStdout(text);
 						}
 					}
-				})();
+					const flush = stdoutDecoder.decode();
+					writeStdout(flush);
+				} catch (error) {
+					if (!aborted) {
+						throw error;
+					}
+				}
+			})();
 
-				const exitCodePromise = response.exitCode.catch(
-					(error: any) => {
-						if (!aborted) {
-							throw error;
+			const streamStderr = (async () => {
+				try {
+					while (!aborted) {
+						const { value, done } = await stderrReader.read();
+						if (done) {
+							break;
+						}
+						if (value) {
+							const text = stderrDecoder.decode(value, {
+								stream: true,
+							});
+							writeStderr(text);
 						}
-						return 130;
 					}
-				);
+					const flush = stderrDecoder.decode();
+					writeStderr(flush);
+				} catch (error) {
+					if (!aborted) {
+						throw error;
+					}
+				}
+			})();
 
-				exitCodePromise.finally(() => reap());
+			const exitCodePromise = response.exitCode.catch((error: any) => {
+				if (!aborted) {
+					throw error;
+				}
+				return 130;
+			});
 
-				const [, , exitCode] = await Promise.all([
-					streamStdout.catch(() => {}),
-					streamStderr.catch(() => {}),
-					exitCodePromise,
-				]);
+			const [, , exitCode] = await Promise.all([
+				streamStdout.catch(() => {}),
+				streamStderr.catch(() => {}),
+				exitCodePromise,
+			]);
 
-				return { exitCode, aborted };
-			} finally {
-				currentProcess = null;
-			}
+			prompt();
+
+			return { exitCode, aborted };
 		};
 
 		const commandHistory: string[] = [];
@@ -405,22 +471,36 @@ require_once __FILE__ . '.bin';
 			}
 
 			const [command, ...args] = parts;
+			let commandPrompted = false;
 			try {
 				if (command === 'help') {
 					term.writeln(
-						'\r\nAvailable commands:\r\n  help        Show this message\r\n  php <...>  Run PHP CLI arguments\r\n  wp <...>   Run WP-CLI (auto-downloads if needed)\r\n  composer <...>  Run Composer (auto-downloads if needed)'
+						'\r\nAvailable commands:\r\n  help        Show this message\r\n  php <...>  Run PHP CLI arguments\r\n  wp <...>   Run WP-CLI (auto-downloads if needed)\r\n  composer <...>  Run Composer (auto-downloads if needed)\r\n  cd <path>  Change directory (only affects prompt)'
 					);
-				} else if (command === 'php') {
-					if (!args.length) {
-						term.writeln('\r\nUsage: php <arguments>');
+					autoScroll();
+					prompt();
+					commandPrompted = true;
+				} else if (command === 'cd') {
+					const target = args[0] ?? '';
+					const client = await ensureBootReady();
+					const resolvedPath = resolvePath(target);
+					let isDirectory = false;
+					try {
+						isDirectory = client.isDir(resolvedPath);
+					} catch {
+						isDirectory = false;
+					}
+					if (!isDirectory) {
+						const message = target || resolvedPath;
+						term.writeln(
+							`\r\ncd: no such file or directory: ${message}`
+						);
+						autoScroll();
 					} else {
-						const result = await runCli(['php', ...args]);
-						if (!result.aborted && result.exitCode !== 0) {
-							term.writeln(
-								`\r\nProcess exited with code ${result.exitCode}`
-							);
-						}
+						currentWorkingDirectory = resolvedPath;
 					}
+					prompt();
+					commandPrompted = true;
 				} else if (command === 'wp') {
 					await ensureWpCliBinary();
 					const result = await runCli([
@@ -433,7 +513,9 @@ require_once __FILE__ . '.bin';
 						term.writeln(
 							`\r\nProcess exited with code ${result.exitCode}`
 						);
+						autoScroll();
 					}
+					commandPrompted = true;
 				} else if (command === 'composer') {
 					await ensureComposerBinary();
 					const result = await runCli([
@@ -445,16 +527,43 @@ require_once __FILE__ . '.bin';
 						term.writeln(
 							`\r\nProcess exited with code ${result.exitCode}`
 						);
+						autoScroll();
+					}
+					commandPrompted = true;
+				} else if (command === 'php') {
+					if (!args.length) {
+						term.writeln('\r\nUsage: php <arguments>');
+						autoScroll();
+						prompt();
+						commandPrompted = true;
+					} else {
+						const result = await runCli(['php', ...args]);
+						if (!result.aborted && result.exitCode !== 0) {
+							term.writeln(
+								`\r\nProcess exited with code ${result.exitCode}`
+							);
+							autoScroll();
+						}
+						commandPrompted = true;
 					}
 				} else {
-					term.writeln(`\r\n${command}: command not found`);
+					const result = await runCli([command, ...args]);
+					if (!result.aborted && result.exitCode !== 0) {
+						term.writeln(
+							`\r\nProcess exited with code ${result.exitCode}`
+						);
+						autoScroll();
+					}
+					// term.writeln(`\r\n${command}: command not found`);
+					commandPrompted = true;
 				}
 			} catch (error: any) {
 				const message = error?.message || String(error);
 				term.writeln(`\r\nError: ${message}`);
+				autoScroll();
 			} finally {
 				isRunningCommand = false;
-				if (!currentProcess) {
+				if (!currentProcess && !commandPrompted) {
 					prompt();
 				}
 			}
@@ -478,6 +587,7 @@ require_once __FILE__ . '.bin';
 			for (const char of chunk) {
 				if (char === '\u0003') {
 					term.write('^C');
+					autoScroll();
 					currentLine = '';
 					void abortActiveProcess();
 					lastInputChar = char;
@@ -494,6 +604,7 @@ require_once __FILE__ . '.bin';
 							break;
 						}
 						term.write('\r\n');
+						autoScroll();
 						const submitted = currentLine;
 						if (submitted.trim()) {
 							commandHistory.unshift(submitted);
@@ -562,6 +673,7 @@ require_once __FILE__ . '.bin';
 		});
 
 		return () => {
+			viewport?.removeEventListener('scroll', updateStickiness);
 			term.dispose();
 			fitAddonRef.current = null;
 			progressRef.current = null;
@@ -580,7 +692,7 @@ require_once __FILE__ . '.bin';
 			}
 		});
 		return () => cancelAnimationFrame(frame);
-	}, [isCollapsed]);
+	}, [isCollapsed, resizeToken]);
 
 	useEffect(() => {
 		const handleResize = () => {
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index 9260b3e48d..a509355c8f 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -3,14 +3,14 @@
  *
  * * Files explorer
  *    * Initialization UX – show the expanded path right away
- *    * Separate "focus" from "open" actions so that I can browse files
+ *    * ✅ Separate "focus" from "open" actions so that I can browse files
  *      without editing them
  *    * Detect when a binary file is opened, show a special message "binary file. can't
  *      edit (download)"
  *    * Create and delete files and directories. "Refresh" button to refresh the directory
  *      tree – OR auto-refresh every second or five seconds.
  *    * Download file / directory action
- *    * Ensure it's scrollable with overflow: auto
+ *    * ✅ Ensure it's scrollable with overflow: auto
  *    * Don't display "/", display just "home", "tmp", and "wordpress" directly
  * * Editor
  *    * Save changes when editing files other than code.php
@@ -30,9 +30,10 @@
  * * Terminal
  *    * Collapse/reveal UX bugs
  *    * Implement cwd, cd
- *    * Communicate cwd in current prompt (like fish)
+ *    * ✅ Communicate cwd in current prompt (like fish)
  *    * Tab completion for paths
  *    * Implement `git clone` and `git checkout`
+ *    * Implement `unzip` (via PHP `ZipArchive`)
  * * Integrate with Playground.wordpress.net – bring over a tool
  *   palette (file browser, sites browser, Blueprints browser).
  * * A way to run composer install by default (simply via Blueprints?)

From 10ff3642996c5a2203927d8d3d566772b1602c9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 13:20:43 +0200
Subject: [PATCH 10/41] =?UTF-8?q?PHP=20Playground=20UX=20improvements=20?=
 =?UTF-8?q?=E2=80=93=20dont=20reload=20file=20picker=20tree,=20support=20m?=
 =?UTF-8?q?ore=20CLI=20commands,=20compute=20the=20current=20edited=20file?=
 =?UTF-8?q?=20path?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/sandboxed-spawn-handler-factory.ts    | 378 +++++++++++++++++-
 .../components/src/FilePickerTree/index.tsx   |  30 +-
 .../php-playground/components/EditorHost.tsx  |   4 +-
 .../src/php-playground/components/Layout.tsx  |   5 +-
 .../components/PlaygroundFilePickerTree.tsx   |  55 ++-
 .../website/src/php-playground/main.tsx       |   9 +-
 .../website/src/php-playground/store.ts       |   6 +
 7 files changed, 441 insertions(+), 46 deletions(-)

diff --git a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
index c96aa026d5..bbe5cf917d 100644
--- a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
+++ b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
@@ -1,4 +1,10 @@
-import { createSpawnHandler } from '@php-wasm/util';
+import {
+	createSpawnHandler,
+	joinPaths,
+	normalizePath,
+	dirname,
+	basename,
+} from '@php-wasm/util';
 import type { PHPProcessManager } from './php-process-manager';
 
 /**
@@ -25,25 +31,70 @@ export function sandboxedSpawnHandlerFactory(
 		}
 
 		const binaryName = args[0].split('/').pop();
+		const argv = args.slice(1);
+
+		const sleep = (ms: number) =>
+			new Promise((resolve) => setTimeout(resolve, ms));
+		const parseFlags = (arr: string[]) => {
+			const flags: Set<string> = new Set();
+			const rest: string[] = [];
+			for (const a of arr) {
+				if (a.startsWith('-')) {
+					for (let i = 1; i < a.length; i++) {
+						flags.add(a[i]);
+					}
+				} else {
+					rest.push(a);
+				}
+			}
+			return { flags, rest } as const;
+		};
+		const validateAllowedFlags = (
+			program: string,
+			flags: Set<string>,
+			allowed: string[]
+		) => {
+			for (const f of flags) {
+				if (!allowed.includes(f)) {
+					processApi.stderr(
+						`${program}: unrecognized option -${f}\n`
+					);
+					return false;
+				}
+			}
+			return true;
+		};
+		const resolvePath = (path: string, cwd: string) => {
+			if (!path || path === '.') {
+				return cwd;
+			}
+			return normalizePath(
+				path.startsWith('/') ? path : joinPaths(cwd, path)
+			);
+		};
 
 		// Mock programs required by wp-cli:
-		if (
-			args[0] === '/usr/bin/env' &&
-			args[1] === 'stty' &&
-			args[2] === 'size'
-		) {
-			// These numbers are hardcoded because this
-			// spawnHandler is transmitted as a string to
-			// the PHP backend and has no access to local
-			// scope. It would be nice to find a way to
-			// transfer / proxy a live object instead.
-			// @TODO: Do not hardcode this
-			processApi.stdout(`18 140`);
-			processApi.exit(0);
+		if (binaryName === 'env') {
+			// Minimal env support: env stty size
+			if (argv[0] === 'stty' && argv[1] === 'size') {
+				// These numbers are hardcoded because this handler is stringified.
+				processApi.stdout(`18 140`);
+				processApi.exit(0);
+				return;
+			}
+			processApi.stderr('env: unsupported invocation\n');
+			processApi.exit(1);
 			return;
-		} else if (binaryName === 'tput' && args[1] === 'cols') {
-			processApi.stdout(`140`);
-			processApi.exit(0);
+		} else if (binaryName === 'tput') {
+			if (argv[0] === 'cols') {
+				processApi.stdout(`140`);
+				processApi.exit(0);
+				return;
+			}
+			processApi.stderr(
+				`tput: unknown capability ${argv[0] ? `'${argv[0]}'` : "''"}\n`
+			);
+			processApi.exit(1);
 			return;
 		} else if (binaryName === 'less') {
 			processApi.on('stdin', (data: Uint8Array) => {
@@ -99,12 +150,295 @@ export function sandboxedSpawnHandlerFactory(
 					})
 				);
 				processApi.exit(await result.exitCode);
+			} else if (binaryName === 'pwd') {
+				const { flags, rest } = parseFlags(argv);
+				if (!validateAllowedFlags('pwd', flags, [])) {
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				if (rest.length) {
+					processApi.stderr('pwd: too many arguments\n');
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				processApi.stdout(cwd + '\n');
+				await sleep(1);
+				processApi.exit(0);
+			} else if (binaryName === 'cd') {
+				const { flags, rest } = parseFlags(argv);
+				if (!validateAllowedFlags('cd', flags, [])) {
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				const target = rest[0] ? resolvePath(rest[0], cwd) : cwd;
+				if (!php.isDir(target)) {
+					processApi.stderr(
+						`cd: no such file or directory: ${rest[0] || target}\n`
+					);
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				php.chdir(target);
+				await sleep(1);
+				processApi.exit(0);
+			} else if (binaryName === 'mkdir') {
+				const { flags, rest } = parseFlags(argv);
+				if (!validateAllowedFlags('mkdir', flags, [])) {
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				if (!rest.length) {
+					processApi.stderr('mkdir: missing operand\n');
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				let failed = false;
+				for (const p of rest) {
+					try {
+						php.mkdir(resolvePath(p, cwd));
+					} catch (e: any) {
+						failed = true;
+						processApi.stderr(`mkdir: ${e?.message || e}\n`);
+					}
+				}
+				await sleep(1);
+				processApi.exit(failed ? 1 : 0);
+			} else if (binaryName === 'touch') {
+				const { flags, rest } = parseFlags(argv);
+				if (!validateAllowedFlags('touch', flags, [])) {
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				if (!rest.length) {
+					processApi.stderr('touch: missing file operand\n');
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				let failed = false;
+				for (const p of rest) {
+					const abs = resolvePath(p, cwd);
+					try {
+						if (php.isDir(abs)) {
+							processApi.stderr(
+								`touch: not a regular file: ${p}\n`
+							);
+							failed = true;
+							continue;
+						}
+						if (!php.fileExists(abs)) {
+							php.mkdir(dirname(abs));
+							php.writeFile(abs, new Uint8Array());
+						} else if (php.isFile(abs)) {
+							// No-op: pretend timestamp updated
+						}
+					} catch (e: any) {
+						failed = true;
+						processApi.stderr(`touch: ${e?.message || e}\n`);
+					}
+				}
+				await sleep(1);
+				processApi.exit(failed ? 1 : 0);
+			} else if (binaryName === 'cp') {
+				const { flags, rest } = parseFlags(argv);
+				if (!validateAllowedFlags('cp', flags, ['r'])) {
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				if (rest.length < 2) {
+					processApi.stderr('cp: missing file operand\n');
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				const recursive = flags.has('r');
+				const dest = resolvePath(rest[rest.length - 1], cwd);
+				const sources = rest
+					.slice(0, -1)
+					.map((p) => resolvePath(p, cwd));
+				const destIsDir = php.isDir(dest);
+				if (sources.length > 1 && !destIsDir) {
+					processApi.stderr('cp: target is not a directory\n');
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				let failed = false;
+				const copyFile = (src: string, to: string) => {
+					const data = php.readFileAsBuffer(src);
+					php.mkdir(dirname(to));
+					php.writeFile(to, data);
+				};
+				const copyRecursive = (src: string, to: string) => {
+					if (php.isDir(src)) {
+						php.mkdir(to);
+						for (const name of php.listFiles(src)) {
+							copyRecursive(
+								joinPaths(src, name),
+								joinPaths(to, name)
+							);
+						}
+					} else {
+						copyFile(src, to);
+					}
+				};
+				for (const src of sources) {
+					try {
+						if (!php.fileExists(src)) {
+							throw new Error(
+								`no such file or directory: ${src}`
+							);
+						}
+						const target = destIsDir
+							? joinPaths(dest, basename(src))
+							: dest;
+						if (php.isDir(src)) {
+							if (!recursive) {
+								throw new Error('omitting directory (use -r)');
+							}
+							copyRecursive(src, target);
+						} else {
+							copyFile(src, target);
+						}
+					} catch (e: any) {
+						failed = true;
+						processApi.stderr(`cp: ${e?.message || e}\n`);
+					}
+				}
+				await sleep(1);
+				processApi.exit(failed ? 1 : 0);
+			} else if (binaryName === 'mv') {
+				const { flags, rest } = parseFlags(argv);
+				if (!validateAllowedFlags('mv', flags, [])) {
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				if (rest.length < 2) {
+					processApi.stderr('mv: missing file operand\n');
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				const dest = resolvePath(rest[rest.length - 1], cwd);
+				const sources = rest
+					.slice(0, -1)
+					.map((p) => resolvePath(p, cwd));
+				const destIsDir = php.isDir(dest);
+				if (sources.length > 1 && !destIsDir) {
+					processApi.stderr('mv: target is not a directory\n');
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				let failed = false;
+				for (const src of sources) {
+					try {
+						if (!php.fileExists(src)) {
+							throw new Error(
+								`no such file or directory: ${src}`
+							);
+						}
+						const target = destIsDir
+							? joinPaths(dest, basename(src))
+							: dest;
+						php.mv(src, target);
+					} catch (e: any) {
+						failed = true;
+						processApi.stderr(`mv: ${e?.message || e}\n`);
+					}
+				}
+				await sleep(1);
+				processApi.exit(failed ? 1 : 0);
+			} else if (binaryName === 'rm') {
+				const { flags, rest } = parseFlags(argv);
+				if (!validateAllowedFlags('rm', flags, ['r'])) {
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				if (!rest.length) {
+					processApi.stderr('rm: missing operand\n');
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				const recursive = flags.has('r');
+				let failed = false;
+				for (const p of rest) {
+					const abs = resolvePath(p, cwd);
+					try {
+						if (!php.fileExists(abs)) {
+							throw new Error(`no such file or directory: ${p}`);
+						}
+						if (php.isDir(abs)) {
+							if (!recursive) {
+								throw new Error('is a directory (use -r)');
+							}
+							php.rmdir(abs, { recursive: true });
+						} else {
+							php.unlink(abs);
+						}
+					} catch (e: any) {
+						failed = true;
+						processApi.stderr(`rm: ${e?.message || e}\n`);
+					}
+				}
+				await sleep(1);
+				processApi.exit(failed ? 1 : 0);
 			} else if (binaryName === 'ls') {
-				const files = php.listFiles(args[1] ?? cwd);
-				files.forEach((file) => {
-					processApi.stdout(file + '\n');
-				});
-				await new Promise((resolve) => setTimeout(resolve, 10));
+				const { flags, rest } = parseFlags(argv);
+				if (!validateAllowedFlags('ls', flags, ['r'])) {
+					await sleep(1);
+					processApi.exit(1);
+					return;
+				}
+				const recursive = flags.has('r');
+				const targets = rest.length ? rest : [cwd];
+				const listOne = (root: string) => {
+					const items = php.listFiles(root);
+					for (const name of items) {
+						processApi.stdout(name + '\n');
+					}
+				};
+				const listRecursive = (root: string) => {
+					const walk = (dir: string, prefix = '') => {
+						for (const name of php.listFiles(dir)) {
+							const rel = prefix ? joinPaths(prefix, name) : name;
+							processApi.stdout(rel + '\n');
+							const child = joinPaths(dir, name);
+							if (php.isDir(child)) {
+								walk(child, rel);
+							}
+						}
+					};
+					walk(root, '');
+				};
+				for (const t of targets) {
+					const abs = resolvePath(t, cwd);
+					if (!php.fileExists(abs)) {
+						processApi.stderr(
+							`ls: no such file or directory: ${t}\n`
+						);
+						continue;
+					}
+					if (recursive) {
+						listRecursive(abs);
+					} else if (php.isDir(abs)) {
+						listOne(abs);
+					} else {
+						processApi.stdout(basename(abs) + '\n');
+					}
+				}
+				await sleep(10);
 				processApi.exit(0);
 			} else {
 				// 127 is the exit code for command not found.
diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index 149bf6571f..9781a95d9c 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -33,6 +33,8 @@ export type FilePickerControlProps = {
 	renamingPath?: string | null;
 	onRename?: (path: string, newName: string) => void;
 	onRenameCancel?: (path: string) => void;
+	autoFocus?: boolean;
+	inert?: boolean;
 };
 
 type ExpandedNodePaths = Record<string, boolean>;
@@ -50,6 +52,8 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	renamingPath = null,
 	onRename,
 	onRenameCancel,
+	autoFocus = true,
+	inert = false,
 }) => {
 	function buildPathChain(path: string): string[] {
 		if (!path) return [];
@@ -193,6 +197,14 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 			expandNode(path, isOpen);
 			if (isOpen) {
 				await loadChildrenForPath(path, node);
+			} else {
+				// Clear cached children on collapse so that reopening refreshes the listing
+				setLazyChildren((prev) => {
+					if (prev[path] === undefined) return prev;
+					const next = { ...prev } as LoadedChildrenMap;
+					delete next[path];
+					return next;
+				});
 			}
 		},
 		[expandNode, loadChildrenForPath]
@@ -268,13 +280,23 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		if (renamingPath && renamingPath === focusedPath) {
 			return;
 		}
+		if (!autoFocus) {
+			return;
+		}
 		const focusTarget = containerRef.current?.querySelector(
 			`[data-path="${focusedPath}"]`
 		) as HTMLElement | null;
 		if (focusTarget && typeof focusTarget.focus === 'function') {
 			focusTarget.focus();
 		}
-	}, [files, focusedPath, generatePath, lazyChildren, renamingPath]);
+	}, [
+		autoFocus,
+		files,
+		focusedPath,
+		generatePath,
+		lazyChildren,
+		renamingPath,
+	]);
 
 	useEffect(() => {
 		return () => {
@@ -355,7 +377,11 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	}
 
 	return (
-		<div onKeyDown={handleKeyDown} ref={containerRef}>
+		<div
+			onKeyDown={handleKeyDown}
+			ref={containerRef}
+			{...(inert ? { inert: 'true' } : {})}
+		>
 			<TreeGrid className={css['filePickerTree']}>
 				{files.map((file, index) => (
 					<NodeRow
diff --git a/packages/playground/website/src/php-playground/components/EditorHost.tsx b/packages/playground/website/src/php-playground/components/EditorHost.tsx
index 3c3976a88c..9da1b275f0 100644
--- a/packages/playground/website/src/php-playground/components/EditorHost.tsx
+++ b/packages/playground/website/src/php-playground/components/EditorHost.tsx
@@ -105,7 +105,9 @@ export const EditorHost = () => {
 			view.destroy();
 			viewRef.current = null;
 		};
-	}, [code, dispatch]);
+		// The editor instance should persist across renders. Recreate it only once.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
 
 	useEffect(() => {
 		const view = viewRef.current;
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index f63fbae7ba..f002daae0c 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -18,9 +18,8 @@ export const Layout = () => {
 	const [isTerminalCollapsed, setTerminalCollapsed] = useState(false);
 	const [terminalResizeToken, setTerminalResizeToken] = useState(0);
 	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
-	const { client: playgroundClient, bootStatus } = useAppSelector(
-		(state) => state.playground
-	);
+	const playgroundClient = useAppSelector((state) => state.playground.client);
+	const bootStatus = useAppSelector((state) => state.playground.bootStatus);
 
 	useEffect(() => {
 		const previousTitle = document.title;
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index c77f516345..8f996afdad 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { FileNode } from '@wp-playground/components';
 import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
 import type { PlaygroundClient } from '@wp-playground/client';
@@ -36,8 +36,8 @@ function toCorePath(absPath: string, normalizedRoot: string) {
 	const rootName = getBaseName(normalizedRoot);
 	if (abs === normalizedRoot) return rootName;
 	if (normalizedRoot === '/') {
-		// When root is '/', core path is the absolute path
-		return abs;
+		// When root is '/', drop the leading '/'
+		return abs === '/' ? '' : abs.slice(1);
 	}
 	const prefix = normalizedRoot.endsWith('/')
 		? normalizedRoot
@@ -52,8 +52,8 @@ function corePathToAbsolute(corePath: string, normalizedRoot: string) {
 	const rootName = getBaseName(normalizedRoot);
 	if (corePath === rootName) return normalizedRoot;
 	if (normalizedRoot === '/') {
-		// When root is '/', the incoming core path is absolute
-		return normalizePath(corePath);
+		// When root is '/', the incoming core path is relative to '/'
+		return normalizePath('/' + corePath);
 	}
 	const prefix = rootName.endsWith('/') ? rootName : rootName + '/';
 	if (corePath.startsWith(prefix)) {
@@ -81,15 +81,39 @@ export default function PlaygroundFilePickerTree({
 		[normalizedRoot]
 	);
 
-	const files = useMemo<FileNode[]>(
-		() => [
-			{
-				name: rootName,
-				type: 'folder',
-			},
-		],
-		[rootName]
-	);
+	const [files, setFiles] = useState<FileNode[]>([]);
+	const [isRootLoading, setIsRootLoading] = useState(false);
+
+	useEffect(() => {
+		let cancelled = false;
+		async function init() {
+			if (normalizedRoot === '/') {
+				setIsRootLoading(true);
+				if (!playgroundClient) {
+					if (!cancelled) setFiles([]);
+					setIsRootLoading(false);
+					return;
+				}
+				const items = await listDir(playgroundClient, '/');
+				const filtered = items.filter((item) => {
+					const childAbs = `/${item.name}`;
+					return !excludePaths?.includes(childAbs);
+				});
+				if (!cancelled) setFiles(filtered as FileNode[]);
+				setIsRootLoading(false);
+			} else {
+				if (!cancelled)
+					setFiles([
+						{ name: rootName, type: 'folder' },
+					] as FileNode[]);
+				setIsRootLoading(false);
+			}
+		}
+		init();
+		return () => {
+			cancelled = true;
+		};
+	}, [normalizedRoot, rootName, playgroundClient, excludePaths]);
 
 	const coreInitialPath = useMemo(() => {
 		return initialPath
@@ -127,6 +151,9 @@ export default function PlaygroundFilePickerTree({
 			initialPath={coreInitialPath}
 			onSelect={handleSelect}
 			onLoadChildren={handleLoadChildren}
+			isLoading={normalizedRoot === '/' && isRootLoading}
+			autoFocus={false}
+			inert={isRootLoading}
 		/>
 	);
 }
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index a509355c8f..09e941d7d6 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -2,16 +2,17 @@
  * Follow-up work:
  *
  * * Files explorer
- *    * Initialization UX – show the expanded path right away
- *    * ✅ Separate "focus" from "open" actions so that I can browse files
- *      without editing them
+ *    * Don't display "/", display just "home", "tmp", and "wordpress" directly
  *    * Detect when a binary file is opened, show a special message "binary file. can't
  *      edit (download)"
  *    * Create and delete files and directories. "Refresh" button to refresh the directory
  *      tree – OR auto-refresh every second or five seconds.
  *    * Download file / directory action
+ *    * ✅ Refresh the files after collapsing and expanding the parent directory
  *    * ✅ Ensure it's scrollable with overflow: auto
- *    * Don't display "/", display just "home", "tmp", and "wordpress" directly
+ *    * ✅ Initialization UX – show the expanded path right away
+ *    * ✅ Separate "focus" from "open" actions so that I can browse files
+ *      without editing them
  * * Editor
  *    * Save changes when editing files other than code.php
  *    * Display breadcrumbs of the currently open file above the editor?
diff --git a/packages/playground/website/src/php-playground/store.ts b/packages/playground/website/src/php-playground/store.ts
index 1c1f4908e4..d4f98872bf 100644
--- a/packages/playground/website/src/php-playground/store.ts
+++ b/packages/playground/website/src/php-playground/store.ts
@@ -12,6 +12,7 @@ export type BootStatus = 'idle' | 'booting' | 'ready' | 'error';
 
 export interface PlaygroundState {
 	code: string;
+	currentPath: string | null;
 	phpVersion: string;
 	wpVersion: string;
 	phpVersions: string[];
@@ -26,6 +27,7 @@ export interface PlaygroundState {
 
 const initialState: PlaygroundState = {
 	code: DEFAULT_CODE,
+	currentPath: null,
 	phpVersion: DEFAULT_PHP_VERSION,
 	wpVersion: 'latest',
 	phpVersions: SupportedPHPVersionsList,
@@ -45,6 +47,9 @@ const playgroundSlice = createSlice({
 		setCode(state, action: PayloadAction<string>) {
 			state.code = action.payload;
 		},
+		setCurrentPath(state, action: PayloadAction<string | null>) {
+			state.currentPath = action.payload;
+		},
 		setPhpVersion(state, action: PayloadAction<string>) {
 			state.phpVersion = action.payload;
 		},
@@ -95,6 +100,7 @@ const playgroundSlice = createSlice({
 
 export const {
 	setCode,
+	setCurrentPath,
 	setPhpVersion,
 	setWpVersion,
 	setWpVersions,

From 93b6144a7c99e605e6ffd03ee7a2a6c62069c5bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 13:23:34 +0200
Subject: [PATCH 11/41] Display path of the edited file above the editor

---
 .../php-playground/components/EditorHost.tsx  | 28 +++++++++++++++++++
 .../components/Layout.module.css              | 21 ++++++++++++++
 .../src/php-playground/components/Layout.tsx  | 17 ++++++++++-
 .../components/PlaygroundManager.tsx          |  8 +++---
 .../website/src/php-playground/main.tsx       |  2 +-
 5 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/EditorHost.tsx b/packages/playground/website/src/php-playground/components/EditorHost.tsx
index 9da1b275f0..cadca9b877 100644
--- a/packages/playground/website/src/php-playground/components/EditorHost.tsx
+++ b/packages/playground/website/src/php-playground/components/EditorHost.tsx
@@ -40,9 +40,12 @@ import styles from './layout.module.css';
 export const EditorHost = () => {
 	const dispatch = useAppDispatch();
 	const code = useAppSelector((state) => state.playground.code);
+	const currentPath = useAppSelector((state) => state.playground.currentPath);
+	const client = useAppSelector((state) => state.playground.client);
 	const editorRef = useRef<HTMLDivElement | null>(null);
 	const viewRef = useRef<EditorView | null>(null);
 	const phpCompartmentRef = useRef(new Compartment());
+	const saveTimeoutRef = useRef<number | null>(null);
 
 	useEffect(() => {
 		if (viewRef.current) {
@@ -123,5 +126,30 @@ export const EditorHost = () => {
 		});
 	}, [code]);
 
+	// Debounced save of editor contents to the currently selected file
+	useEffect(() => {
+		if (!client || !currentPath) {
+			return;
+		}
+		if (saveTimeoutRef.current) {
+			window.clearTimeout(saveTimeoutRef.current);
+		}
+		saveTimeoutRef.current = window.setTimeout(() => {
+			// Best-effort save; ignore errors (e.g., read-only files)
+			client
+				.writeFile(currentPath, code)
+				.catch(() => {})
+				.finally(() => {
+					/* noop */
+				});
+		}, 500);
+		return () => {
+			if (saveTimeoutRef.current) {
+				window.clearTimeout(saveTimeoutRef.current);
+				saveTimeoutRef.current = null;
+			}
+		};
+	}, [client, currentPath, code]);
+
 	return <div id="editor" ref={editorRef} className={styles.editor} />;
 };
diff --git a/packages/playground/website/src/php-playground/components/Layout.module.css b/packages/playground/website/src/php-playground/components/Layout.module.css
index 4bf4021006..cc2d989acc 100644
--- a/packages/playground/website/src/php-playground/components/Layout.module.css
+++ b/packages/playground/website/src/php-playground/components/Layout.module.css
@@ -102,6 +102,27 @@
 	min-height: 0;
 }
 
+.filePathBar {
+	box-sizing: border-box;
+	padding: 6px 10px;
+	background: #fafafa;
+	border-bottom: 1px solid #eee;
+	color: #666;
+	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+		'Courier New', monospace;
+	font-size: 12px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.filePathText {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: inline-block;
+	max-width: 100%;
+}
+
 .editorSplitGroup {
 	flex: 1;
 	display: flex;
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index f002daae0c..0a90ce3898 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -11,7 +11,7 @@ import PlaygroundFilePickerTree from './PlaygroundFilePickerTree';
 import { PlaygroundManager } from './PlaygroundManager';
 import { Terminal } from './Terminal';
 import { useAppDispatch, useAppSelector } from '../hooks';
-import { setCode } from '../store';
+import { setCode, setCurrentPath } from '../store';
 
 export const Layout = () => {
 	const [isHelpOpen, setHelpOpen] = useState(false);
@@ -20,6 +20,7 @@ export const Layout = () => {
 	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
 	const playgroundClient = useAppSelector((state) => state.playground.client);
 	const bootStatus = useAppSelector((state) => state.playground.bootStatus);
+	const currentPath = useAppSelector((state) => state.playground.currentPath);
 
 	useEffect(() => {
 		const previousTitle = document.title;
@@ -79,8 +80,10 @@ export const Layout = () => {
 													'File too large to be edited'
 												)
 											);
+											dispatch(setCurrentPath(null));
 										} else {
 											dispatch(setCode(text));
+											dispatch(setCurrentPath(path));
 										}
 									}}
 								/>
@@ -102,6 +105,18 @@ export const Layout = () => {
 								style={{ overflow: 'auto' }}
 							>
 								<div className={styles.editorContent}>
+									{currentPath && (
+										<div
+											className={styles.filePathBar}
+											title={currentPath}
+										>
+											<span
+												className={styles.filePathText}
+											>
+												{currentPath}
+											</span>
+										</div>
+									)}
 									<EditorHost />
 								</div>
 							</Panel>
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
index e3a9dbebdc..b385ea0f85 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
@@ -11,6 +11,7 @@ import {
 	setWpVersions,
 	setWpVersionsLoading,
 } from '../store';
+import { setCurrentPath } from '../store';
 import { loadStateFromURL, saveStateToURL } from '../url-state';
 import { playgroundRuntime } from '../runtime';
 
@@ -161,10 +162,9 @@ export const PlaygroundManager = () => {
 				}
 
 				await clientInstance.mkdir('/wordpress/workspace');
-				await clientInstance.writeFile(
-					'/wordpress/workspace/code.php',
-					codeRef.current
-				);
+				const initialPath = '/wordpress/workspace/code.php';
+				await clientInstance.writeFile(initialPath, codeRef.current);
+				dispatch(setCurrentPath(initialPath));
 				await clientInstance.goTo('/workspace/code.php');
 
 				clientRef.current = clientInstance;
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index 09e941d7d6..4d31483fc1 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -2,12 +2,12 @@
  * Follow-up work:
  *
  * * Files explorer
- *    * Don't display "/", display just "home", "tmp", and "wordpress" directly
  *    * Detect when a binary file is opened, show a special message "binary file. can't
  *      edit (download)"
  *    * Create and delete files and directories. "Refresh" button to refresh the directory
  *      tree – OR auto-refresh every second or five seconds.
  *    * Download file / directory action
+ *    * ✅ Don't display "/", display just "home", "tmp", and "wordpress" directly
  *    * ✅ Refresh the files after collapsing and expanding the parent directory
  *    * ✅ Ensure it's scrollable with overflow: auto
  *    * ✅ Initialization UX – show the expanded path right away

From 59e377cf5e544a006b5f510e0ae70bc60f703729 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 13:25:35 +0200
Subject: [PATCH 12/41] Document more todos

---
 .../playground/website/src/php-playground/main.tsx     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index 4d31483fc1..18dc47760b 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -2,6 +2,9 @@
  * Follow-up work:
  *
  * * Files explorer
+ *    * Don't re-render (and show the loading indicator) when not needed.
+ *    * Improve visual feedback when loading files (don't replace filename with loader).
+ *    * CSS papercuts, e.g. dark font on dark background for active hovered selected files.
  *    * Detect when a binary file is opened, show a special message "binary file. can't
  *      edit (download)"
  *    * Create and delete files and directories. "Refresh" button to refresh the directory
@@ -14,8 +17,8 @@
  *    * ✅ Separate "focus" from "open" actions so that I can browse files
  *      without editing them
  * * Editor
- *    * Save changes when editing files other than code.php
- *    * Display breadcrumbs of the currently open file above the editor?
+ *    * ✅ Save changes when editing files other than code.php
+ *    * ✅ Display breadcrumbs of the currently open file above the editor?
  * * UX for sharing more involved setups, e.g. when I edit a WordPress plugin
  *   and not just the code snippet (Maybe connect GitHub and save diff in a
  *   repository or in a gist?)
@@ -31,10 +34,11 @@
  * * Terminal
  *    * Collapse/reveal UX bugs
  *    * Implement cwd, cd
- *    * ✅ Communicate cwd in current prompt (like fish)
  *    * Tab completion for paths
+ *    * Implement basic `curl` and `curl -O` and `wget` to download remote files
  *    * Implement `git clone` and `git checkout`
  *    * Implement `unzip` (via PHP `ZipArchive`)
+ *    * ✅ Communicate cwd in current prompt (like fish)
  * * Integrate with Playground.wordpress.net – bring over a tool
  *   palette (file browser, sites browser, Blueprints browser).
  * * A way to run composer install by default (simply via Blueprints?)

From ad25ff8ead3426d6a624be0445c19cd7e65eb257 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 20:10:12 +0200
Subject: [PATCH 13/41] Save&rerun whem cmd+s is pressed

---
 .../php-playground/components/EditorHost.tsx   |  1 +
 .../src/php-playground/components/Layout.tsx   | 15 ---------------
 .../components/PlaygroundManager.tsx           | 18 +++++++++++-------
 .../website/src/php-playground/main.tsx        |  2 +-
 4 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/EditorHost.tsx b/packages/playground/website/src/php-playground/components/EditorHost.tsx
index cadca9b877..cc7387c1b3 100644
--- a/packages/playground/website/src/php-playground/components/EditorHost.tsx
+++ b/packages/playground/website/src/php-playground/components/EditorHost.tsx
@@ -136,6 +136,7 @@ export const EditorHost = () => {
 		}
 		saveTimeoutRef.current = window.setTimeout(() => {
 			// Best-effort save; ignore errors (e.g., read-only files)
+			console.log('saving', currentPath, code);
 			client
 				.writeFile(currentPath, code)
 				.catch(() => {})
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 0a90ce3898..07816f41c4 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -142,21 +142,6 @@ export const Layout = () => {
 									})}
 									aria-label="Playground terminal"
 								>
-									<header className={styles.terminalHeader}>
-										<button
-											id="terminalToggle"
-											type="button"
-											className={styles.terminalToggle}
-											onClick={() =>
-												terminalPanelRef.current?.collapse()
-											}
-											aria-expanded={!isTerminalCollapsed}
-										>
-											{isTerminalCollapsed
-												? 'Show terminal'
-												: 'Hide terminal'}
-										</button>
-									</header>
 									<div className={styles.terminalPane}>
 										<Terminal
 											isCollapsed={isTerminalCollapsed}
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
index b385ea0f85..0f5dd94248 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
@@ -189,6 +189,8 @@ export const PlaygroundManager = () => {
 		};
 	}, [dispatch, phpVersion, wpVersion, initialized]);
 
+	const currentPath = useAppSelector((state) => state.playground.currentPath);
+
 	useEffect(() => {
 		if (!initialized) {
 			return;
@@ -204,16 +206,18 @@ export const PlaygroundManager = () => {
 				return;
 			}
 			runCountRef.current += 1;
-			await currentClient.writeFile(
-				'/wordpress/code.php',
-				codeRef.current
-			);
-			const cacheBuster = `run=${runCountRef.current}-${Date.now()}`;
-			await currentClient.goTo(`/code.php?${cacheBuster}`);
+			// Saving is handled by the editor, but for the default code.php file, we also
+			// support manual save&run requests.
+			// TODO: Investigate it for race conditions. Can we ever collide with the editor autosave?
+			if (currentPath === '/wordpress/workspace/code.php') {
+				await currentClient.writeFile(currentPath, codeRef.current);
+				const cacheBuster = `run=${runCountRef.current}-${Date.now()}`;
+				await currentClient.goTo(`/workspace/code.php?${cacheBuster}`);
+			}
 		};
 
 		void executeRun();
-	}, [runRequestId, initialized]);
+	}, [runRequestId, initialized, currentPath]);
 
 	return null;
 };
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index 18dc47760b..8a37527a1b 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -32,7 +32,7 @@
  *      anymore until you connect Github or so".
  * * Tool palette (file browser, environment setup form with wp+php versions, Blueprint editor)
  * * Terminal
- *    * Collapse/reveal UX bugs
+ *    * Disable terminal collapsing for now
  *    * Implement cwd, cd
  *    * Tab completion for paths
  *    * Implement basic `curl` and `curl -O` and `wget` to download remote files

From f2d650c1b67b032e51165166e9f4bfe5047aa28c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 20:16:18 +0200
Subject: [PATCH 14/41] Avoid filepickertree re-rendering. support cd command

---
 .../components/PlaygroundFilePickerTree.tsx   |  8 +++-
 .../php-playground/components/Terminal.tsx    | 37 +++++++++++--------
 .../website/src/php-playground/main.tsx       | 19 ++++++----
 3 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 8f996afdad..cb9ead7aac 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { FileNode } from '@wp-playground/components';
 import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
@@ -113,7 +114,12 @@ export default function PlaygroundFilePickerTree({
 		return () => {
 			cancelled = true;
 		};
-	}, [normalizedRoot, rootName, playgroundClient, excludePaths]);
+	}, [
+		normalizedRoot,
+		rootName,
+		playgroundClient,
+		JSON.stringify(excludePaths),
+	]);
 
 	const coreInitialPath = useMemo(() => {
 		return initialPath
diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/Terminal.tsx
index eb7975fd6d..e751e9ea76 100644
--- a/packages/playground/website/src/php-playground/components/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/Terminal.tsx
@@ -71,6 +71,7 @@ export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 	const terminalContainerRef = useRef<HTMLDivElement | null>(null);
 	const fitAddonRef = useRef<FitAddon | null>(null);
 	const progressRef = useRef<DownloadProgress | null>(null);
+	const cwdRef = useRef<string>('/wordpress');
 
 	useEffect(() => {
 		const container = terminalContainerRef.current;
@@ -126,22 +127,21 @@ export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 			});
 		};
 
-		const DEFAULT_CWD = '/wordpress';
-		let currentWorkingDirectory = DEFAULT_CWD;
+		let currentWorkingDirectory = cwdRef.current;
 		const promptPrefix = () => {
 			const dirName = basename(currentWorkingDirectory) || '/';
 			return `(${dirName}) $ `;
 		};
 		const resolvePath = (target: string) => {
 			if (!target || target === '~') {
-				return DEFAULT_CWD;
+				return cwdRef.current;
 			}
 			if (target.startsWith('~/')) {
-				target = joinPaths(DEFAULT_CWD, target.slice(2));
+				target = joinPaths(cwdRef.current, target.slice(2));
 			}
 			const rawPath = target.startsWith('/')
 				? target
-				: joinPaths(currentWorkingDirectory, target);
+				: joinPaths(cwdRef.current, target);
 			return normalizePath(rawPath || '/');
 		};
 
@@ -341,10 +341,10 @@ require_once __FILE__ . '.bin';
 			options: { env?: Record<string, string> } = {}
 		) => {
 			const client = await ensureBootReady();
-			const response = (await client.cli(
-				argv,
-				options
-			)) as StreamedPHPResponse & {
+			const response = (await client.cli(argv, {
+				...options,
+				cwd: cwdRef.current,
+			})) as StreamedPHPResponse & {
 				terminate?: () => Promise<void> | void;
 			};
 			const stdoutReader = response.stdout.getReader();
@@ -497,18 +497,23 @@ require_once __FILE__ . '.bin';
 						);
 						autoScroll();
 					} else {
-						currentWorkingDirectory = resolvedPath;
+						cwdRef.current = resolvedPath;
 					}
 					prompt();
 					commandPrompted = true;
 				} else if (command === 'wp') {
 					await ensureWpCliBinary();
-					const result = await runCli([
-						'php',
-						'/tmp/wp-cli.phar',
-						'--path=/wordpress',
-						...args,
-					]);
+					const result = await runCli(
+						[
+							'php',
+							'/tmp/wp-cli.phar',
+							'--path=/wordpress',
+							...args,
+						],
+						{
+							cwd: cwdRef.current,
+						}
+					);
 					if (!result.aborted && result.exitCode !== 0) {
 						term.writeln(
 							`\r\nProcess exited with code ${result.exitCode}`
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index 8a37527a1b..ae23392240 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -19,6 +19,17 @@
  * * Editor
  *    * ✅ Save changes when editing files other than code.php
  *    * ✅ Display breadcrumbs of the currently open file above the editor?
+ * * Terminal
+ *    * Implement cwd, cd
+ *    * ✅ Communicate cwd in current prompt (like fish)
+ *    * ✅ Disable terminal collapsing for now
+ *    * ------- later: -------
+ *    * Tab completion for paths
+ *    * Implement basic `curl` and `curl -O` and `wget` to download remote files
+ *    * Implement `git clone` and `git checkout`
+ *    * Implement `unzip` (via PHP `ZipArchive`)
+ *
+ * ------- later: -------
  * * UX for sharing more involved setups, e.g. when I edit a WordPress plugin
  *   and not just the code snippet (Maybe connect GitHub and save diff in a
  *   repository or in a gist?)
@@ -31,14 +42,6 @@
  *    * Or display a modal "Hey, this is the limit of the shareable URL. It won't be updated
  *      anymore until you connect Github or so".
  * * Tool palette (file browser, environment setup form with wp+php versions, Blueprint editor)
- * * Terminal
- *    * Disable terminal collapsing for now
- *    * Implement cwd, cd
- *    * Tab completion for paths
- *    * Implement basic `curl` and `curl -O` and `wget` to download remote files
- *    * Implement `git clone` and `git checkout`
- *    * Implement `unzip` (via PHP `ZipArchive`)
- *    * ✅ Communicate cwd in current prompt (like fish)
  * * Integrate with Playground.wordpress.net – bring over a tool
  *   palette (file browser, sites browser, Blueprints browser).
  * * A way to run composer install by default (simply via Blueprints?)

From 76bd8c19868f2e033440b43fcc454e0a37655e8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 21:10:20 +0200
Subject: [PATCH 15/41] Add file and Add directory buttons

---
 .../php-wasm/universal/src/lib/fs-helpers.ts  |   7 +-
 .../php-wasm/universal/src/lib/php-worker.ts  |   5 +
 .../components/src/FilePickerTree/index.tsx   |  15 +-
 .../src/FilePickerTree/style.module.css       |   3 +-
 .../components/Layout.module.css              |  69 ++-
 .../src/php-playground/components/Layout.tsx  | 446 ++++++++++++++++--
 .../components/PlaygroundFilePickerTree.tsx   |  26 +-
 .../components/PlaygroundManager.tsx          |   8 +-
 .../php-playground/components/Terminal.tsx    |  23 +-
 .../website/src/php-playground/main.tsx       |  35 +-
 10 files changed, 550 insertions(+), 87 deletions(-)

diff --git a/packages/php-wasm/universal/src/lib/fs-helpers.ts b/packages/php-wasm/universal/src/lib/fs-helpers.ts
index baae4967ee..f81dfd919e 100644
--- a/packages/php-wasm/universal/src/lib/fs-helpers.ts
+++ b/packages/php-wasm/universal/src/lib/fs-helpers.ts
@@ -231,8 +231,11 @@ export class FSHelpers {
 	 * @param target
 	 * @param link
 	 */
-	static symlink(FS: Emscripten.RootFS, target: string, link: string): any {
-		return FS.symlink(target, link);
+	static symlink(FS: Emscripten.RootFS, target: string, link: string): true {
+		// Will throw an error if the symlink cannot be created or
+		// return a FS Node if the symlink is created.
+		FS.symlink(target, link);
+		return true;
 	}
 
 	/**
diff --git a/packages/php-wasm/universal/src/lib/php-worker.ts b/packages/php-wasm/universal/src/lib/php-worker.ts
index d209746cf0..70925e8541 100644
--- a/packages/php-wasm/universal/src/lib/php-worker.ts
+++ b/packages/php-wasm/universal/src/lib/php-worker.ts
@@ -249,6 +249,11 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 		return _private.get(this)!.php!.writeFile(path, data);
 	}
 
+	/** @inheritDoc @php-wasm/universal!/PHP.symlink */
+	symlink(target: string, path: string): void {
+		return _private.get(this)!.php!.symlink(target, path);
+	}
+
 	/** @inheritDoc @php-wasm/universal!/PHP.unlink */
 	unlink(path: string): void {
 		return _private.get(this)!.php!.unlink(path);
diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index 9781a95d9c..b627ff6ccf 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -34,7 +34,6 @@ export type FilePickerControlProps = {
 	onRename?: (path: string, newName: string) => void;
 	onRenameCancel?: (path: string) => void;
 	autoFocus?: boolean;
-	inert?: boolean;
 };
 
 type ExpandedNodePaths = Record<string, boolean>;
@@ -53,7 +52,6 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	onRename,
 	onRenameCancel,
 	autoFocus = true,
-	inert = false,
 }) => {
 	function buildPathChain(path: string): string[] {
 		if (!path) return [];
@@ -377,11 +375,7 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	}
 
 	return (
-		<div
-			onKeyDown={handleKeyDown}
-			ref={containerRef}
-			{...(inert ? { inert: 'true' } : {})}
-		>
+		<div onKeyDown={handleKeyDown} ref={containerRef}>
 			<TreeGrid className={css['filePickerTree']}>
 				{files.map((file, index) => (
 					<NodeRow
@@ -465,7 +459,6 @@ const NodeRow: React.FC<{
 	const renameHandledRef = useRef(false);
 
 	const resolvedChildren = getChildren(node, path) ?? [];
-	const isLoadingChildren = Boolean(loadingPaths[path]);
 
 	useEffect(() => {
 		if (isRenaming) {
@@ -602,7 +595,6 @@ const NodeRow: React.FC<{
 											node.type === 'folder' && isExpanded
 										}
 										level={level}
-										isLoading={isLoadingChildren}
 										hideName
 									/>
 									<input
@@ -648,7 +640,6 @@ const NodeRow: React.FC<{
 											node.type === 'folder' && isExpanded
 										}
 										level={level}
-										isLoading={isLoadingChildren}
 									/>
 								</Button>
 							)}
@@ -689,9 +680,8 @@ const FileName: React.FC<{
 	node: FileNode;
 	level: number;
 	isOpen?: boolean;
-	isLoading?: boolean;
 	hideName?: boolean;
-}> = ({ node, level, isOpen, isLoading = false, hideName = false }) => {
+}> = ({ node, level, isOpen, hideName = false }) => {
 	const indent: string[] = [];
 	for (let i = 0; i < level; i++) {
 		indent.push('&nbsp;&nbsp;&nbsp;&nbsp;');
@@ -708,7 +698,6 @@ const FileName: React.FC<{
 				<div style={{ width: 16 }}>&nbsp;</div>
 			)}
 			<Icon width={16} icon={node.type === 'folder' ? folder : file} />
-			{isLoading && <Spinner className={css['inlineSpinner']} />}
 			{!hideName && <span className={css['fileName']}>{node.name}</span>}
 		</>
 	);
diff --git a/packages/playground/components/src/FilePickerTree/style.module.css b/packages/playground/components/src/FilePickerTree/style.module.css
index 5083803e87..f5e2f23450 100644
--- a/packages/playground/components/src/FilePickerTree/style.module.css
+++ b/packages/playground/components/src/FilePickerTree/style.module.css
@@ -54,9 +54,10 @@
 	background-color: var(--wp-admin-theme-color);
 	color: #fff;
 
+	&:hover,
 	&:active,
 	&:focus {
-		color: #fff;
+		color: #fff !important;
 		background-color: var(--wp-admin-theme-color);
 	}
 }
diff --git a/packages/playground/website/src/php-playground/components/Layout.module.css b/packages/playground/website/src/php-playground/components/Layout.module.css
index cc2d989acc..bbd437c3c4 100644
--- a/packages/playground/website/src/php-playground/components/Layout.module.css
+++ b/packages/playground/website/src/php-playground/components/Layout.module.css
@@ -35,6 +35,68 @@
 	overflow: auto;
 }
 
+.fileExplorerContainer {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	height: 100%;
+}
+
+.fileExplorerHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 10px;
+	background: #f5f5f5;
+	border-bottom: 1px solid #e0e0e0;
+}
+
+.fileExplorerTitle {
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	color: #555;
+}
+
+.fileExplorerActions {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.fileExplorerButton {
+	border: 1px solid transparent;
+	background: transparent;
+	padding: 4px 6px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
+	color: #444;
+	transition: background-color 0.2s ease, color 0.2s ease,
+		border-color 0.2s ease;
+}
+
+.fileExplorerButton:hover {
+	background: #e9e9e9;
+	color: #111;
+	border-color: #d0d0d0;
+}
+
+.fileExplorerButton:disabled {
+	opacity: 0.5;
+	cursor: default;
+	background: transparent;
+	border-color: transparent;
+}
+
+.fileExplorerTree {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	padding: 4px 0;
+}
+
 .controls {
 	padding: 8px 12px;
 	background: #f5f5f5;
@@ -191,14 +253,15 @@
 
 .previewPane {
 	flex: 1;
-	position: relative;
+	display: flex;
+	flex-direction: column;
 	min-width: 320px;
 	height: 100%;
 }
 
 .preview {
-	position: absolute;
-	inset: 0;
+	position: static;
+	flex: 1;
 	width: 100%;
 	height: 100%;
 	border: 0;
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 07816f41c4..a5a6bf3097 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import type { ImperativePanelHandle } from 'react-resizable-panels';
+import type { PlaygroundClient } from '@wp-playground/client';
 
 import styles from './layout.module.css';
 import { Controls } from './Controls';
@@ -12,15 +13,89 @@ import { PlaygroundManager } from './PlaygroundManager';
 import { Terminal } from './Terminal';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import { setCode, setCurrentPath } from '../store';
+import AddressBar from '../../components/address-bar';
+
+const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
+
+const normalizeFsPath = (path: string) => {
+	if (!path) {
+		return '/';
+	}
+	let normalized = path.replace(/\\+/g, '/');
+	if (!normalized.startsWith('/')) {
+		normalized = `/${normalized}`;
+	}
+	normalized = normalized.replace(/\/{2,}/g, '/');
+	if (normalized.length > 1 && normalized.endsWith('/')) {
+		normalized = normalized.slice(0, -1);
+	}
+	return normalized || '/';
+};
+
+const dirnameSafe = (path: string) => {
+	const normalized = normalizeFsPath(path);
+	if (normalized === '/') {
+		return '/';
+	}
+	const index = normalized.lastIndexOf('/');
+	return index <= 0 ? '/' : normalized.slice(0, index);
+};
+
+// removed legacy prompt-based helpers in favor of inline rename flow
 
 export const Layout = () => {
 	const [isHelpOpen, setHelpOpen] = useState(false);
 	const [isTerminalCollapsed, setTerminalCollapsed] = useState(false);
 	const [terminalResizeToken, setTerminalResizeToken] = useState(0);
+	const [fileTreeRefreshToken, setFileTreeRefreshToken] = useState(0);
 	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
 	const playgroundClient = useAppSelector((state) => state.playground.client);
 	const bootStatus = useAppSelector((state) => state.playground.bootStatus);
 	const currentPath = useAppSelector((state) => state.playground.currentPath);
+	const [previewUrl, setPreviewUrl] = useState('');
+	const navigationClientRef = useRef<PlaygroundClient | null>(null);
+	const [renamingPath, setRenamingPath] = useState<string | null>(null);
+	const [selectedDirPath, setSelectedDirPath] = useState<string | null>(null);
+	const pendingCreateRef = useRef<{
+		type: 'file' | 'folder';
+		tempPath: string;
+	} | null>(null);
+
+	const dispatch = useAppDispatch();
+
+	// getBaseName not used in this component
+
+	const findAvailableName = useCallback(
+		async (client: PlaygroundClient, baseDir: string, baseName: string) => {
+			let name = baseName;
+			let counter = 0;
+			const splitExt = (n: string) => {
+				const dot = n.lastIndexOf('.');
+				if (dot > 0) {
+					return { stem: n.slice(0, dot), ext: n.slice(dot) };
+				}
+				return { stem: n, ext: '' };
+			};
+			while (
+				await client.fileExists(`${baseDir}/${name}`).catch(() => false)
+			) {
+				counter += 1;
+				const { stem, ext } = splitExt(baseName);
+				name = `${stem} (${counter})${ext}`;
+			}
+			return name;
+		},
+		[]
+	);
+
+	const ensureParentExpandedPath = useCallback(
+		(path: string) => {
+			const parent = dirnameSafe(path);
+			dispatch(setCurrentPath(parent));
+			setSelectedDirPath(parent);
+		},
+		[dispatch]
+	);
 
 	useEffect(() => {
 		const previousTitle = document.title;
@@ -41,10 +116,233 @@ export const Layout = () => {
 		};
 	}, [isHelpOpen]);
 
+	useEffect(() => {
+		if (!playgroundClient) {
+			return;
+		}
+		// Avoid registering multiple onNavigation handlers for the same client
+		if (navigationClientRef.current === playgroundClient) {
+			return;
+		}
+		navigationClientRef.current = playgroundClient;
+		let cancelled = false;
+		(async () => {
+			try {
+				const url = await playgroundClient.getCurrentURL();
+				if (!cancelled) setPreviewUrl(url || '');
+			} catch (e) {
+				void e;
+			}
+			try {
+				await playgroundClient.onNavigation((url) => {
+					setPreviewUrl(url);
+				});
+			} catch (e) {
+				void e;
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [playgroundClient]);
+
 	const handleOpenHelp = useCallback(() => setHelpOpen(true), []);
 	const handleCloseHelp = useCallback(() => setHelpOpen(false), []);
 
-	const dispatch = useAppDispatch();
+	const handleTreeRefresh = useCallback(() => {
+		setFileTreeRefreshToken((token) => token + 1);
+	}, []);
+
+	const handleCreateFile = useCallback(async () => {
+		if (!playgroundClient) {
+			return;
+		}
+		const baseDir = selectedDirPath
+			? normalizeFsPath(selectedDirPath)
+			: currentPath
+			? dirnameSafe(currentPath)
+			: DEFAULT_WORKSPACE_DIR;
+		const normalizedBase = normalizeFsPath(baseDir);
+		try {
+			const name = await findAvailableName(
+				playgroundClient,
+				normalizedBase,
+				'untitled'
+			);
+			const tempPath = `${
+				normalizedBase === '/' ? '' : normalizedBase
+			}/${name}`;
+			await playgroundClient.writeFile(tempPath, '');
+			pendingCreateRef.current = { type: 'file', tempPath };
+			setRenamingPath(tempPath);
+			ensureParentExpandedPath(tempPath);
+			handleTreeRefresh();
+		} catch (e) {
+			void e;
+		}
+	}, [
+		playgroundClient,
+		currentPath,
+		selectedDirPath,
+		findAvailableName,
+		ensureParentExpandedPath,
+		handleTreeRefresh,
+	]);
+
+	const handleCreateDirectory = useCallback(async () => {
+		if (!playgroundClient) {
+			return;
+		}
+		const baseDir = selectedDirPath
+			? normalizeFsPath(selectedDirPath)
+			: currentPath
+			? dirnameSafe(currentPath)
+			: DEFAULT_WORKSPACE_DIR;
+		const normalizedBase = normalizeFsPath(baseDir);
+		try {
+			const name = await findAvailableName(
+				playgroundClient,
+				normalizedBase,
+				'New Folder'
+			);
+			const tempPath = `${
+				normalizedBase === '/' ? '' : normalizedBase
+			}/${name}`;
+			await playgroundClient.mkdir(tempPath);
+			pendingCreateRef.current = { type: 'folder', tempPath };
+			setRenamingPath(tempPath);
+			ensureParentExpandedPath(tempPath);
+			handleTreeRefresh();
+		} catch (e) {
+			void e;
+		}
+	}, [
+		playgroundClient,
+		currentPath,
+		selectedDirPath,
+		findAvailableName,
+		ensureParentExpandedPath,
+		handleTreeRefresh,
+	]);
+
+	const handleRenameSubmit = useCallback(
+		async (path: string, newName: string) => {
+			if (!playgroundClient || !pendingCreateRef.current) {
+				setRenamingPath(null);
+				return;
+			}
+			const parent = dirnameSafe(path);
+			const sanitized = (newName || '').trim();
+			if (
+				!sanitized ||
+				sanitized.includes('/') ||
+				sanitized === '.' ||
+				sanitized === '..'
+			) {
+				// Treat invalid name as cancel
+				try {
+					if (pendingCreateRef.current.type === 'folder') {
+						await playgroundClient.rmdir(path, {
+							recursive: true,
+						} as any);
+					} else {
+						await playgroundClient.unlink(path);
+					}
+				} catch (e) {
+					void e;
+				}
+				setRenamingPath(null);
+				pendingCreateRef.current = null;
+				handleTreeRefresh();
+				return;
+			}
+
+			let finalName = sanitized;
+			const splitExt = (n: string) => {
+				const dot = n.lastIndexOf('.');
+				if (dot > 0) {
+					return { stem: n.slice(0, dot), ext: n.slice(dot) };
+				}
+				return { stem: n, ext: '' };
+			};
+			let candidate = `${parent === '/' ? '' : parent}/${finalName}`;
+			if (
+				await playgroundClient.fileExists(candidate).catch(() => false)
+			) {
+				const { stem, ext } = splitExt(finalName);
+				let counter = 1;
+				while (
+					await playgroundClient
+						.fileExists(
+							`${
+								parent === '/' ? '' : parent
+							}/${stem} (${counter})${ext}`
+						)
+						.catch(() => false)
+				) {
+					counter += 1;
+				}
+				finalName = `${stem} (${counter})${ext}`;
+				candidate = `${parent === '/' ? '' : parent}/${finalName}`;
+			}
+
+			try {
+				await playgroundClient.mv(path, candidate as any);
+				if (pendingCreateRef.current.type === 'file') {
+					try {
+						const newContent =
+							await playgroundClient.readFileAsText(candidate);
+						dispatch(setCode(newContent));
+						dispatch(setCurrentPath(candidate));
+					} catch (e) {
+						void e;
+					}
+				}
+			} catch (e) {
+				void e;
+				// If rename fails, try to clean up temp
+				try {
+					if (pendingCreateRef.current.type === 'folder') {
+						await playgroundClient.rmdir(path, {
+							recursive: true,
+						} as any);
+					} else {
+						await playgroundClient.unlink(path);
+					}
+				} catch (cleanupError) {
+					void cleanupError;
+				}
+			}
+			setRenamingPath(null);
+			pendingCreateRef.current = null;
+			handleTreeRefresh();
+		},
+		[playgroundClient, dispatch, handleTreeRefresh]
+	);
+
+	const handleRenameCancel = useCallback(
+		async (path: string) => {
+			if (!playgroundClient || !pendingCreateRef.current) {
+				setRenamingPath(null);
+				return;
+			}
+			try {
+				if (pendingCreateRef.current.type === 'folder') {
+					await playgroundClient.rmdir(path, {
+						recursive: true,
+					} as any);
+				} else {
+					await playgroundClient.unlink(path);
+				}
+			} catch (e) {
+				void e;
+			}
+			setRenamingPath(null);
+			pendingCreateRef.current = null;
+			handleTreeRefresh();
+		},
+		[playgroundClient, handleTreeRefresh]
+	);
 
 	return (
 		<div id="php-playground-react-root" className={styles.root}>
@@ -53,41 +351,107 @@ export const Layout = () => {
 				<>
 					<Panel minSize={5} collapsible>
 						<div className={styles.editorPane}>
-							{bootStatus === 'ready' && playgroundClient && (
-								<PlaygroundFilePickerTree
-									playgroundClient={playgroundClient}
-									root="/"
-									initialPath="/wordpress/workspace"
-									excludePaths={[
-										'/dev',
-										'/internal',
-										'/proc',
-										'/request',
-									]}
-									onSelect={async (path) => {
-										if (
-											await playgroundClient.isDir(path)
-										) {
-											return;
-										}
-										const text =
-											await playgroundClient.readFileAsText(
-												path
-											);
-										if (text.length > 1024 * 1024) {
-											dispatch(
-												setCode(
-													'File too large to be edited'
-												)
-											);
-											dispatch(setCurrentPath(null));
-										} else {
-											dispatch(setCode(text));
-											dispatch(setCurrentPath(path));
-										}
-									}}
-								/>
-							)}
+							{bootStatus === 'ready' && playgroundClient ? (
+								<div className={styles.fileExplorerContainer}>
+									<div className={styles.fileExplorerHeader}>
+										<span
+											className={styles.fileExplorerTitle}
+										>
+											Files
+										</span>
+										<div
+											className={
+												styles.fileExplorerActions
+											}
+										>
+											<button
+												className={
+													styles.fileExplorerButton
+												}
+												onClick={handleCreateFile}
+												title="Create new file"
+												disabled={!playgroundClient}
+											>
+												New File
+											</button>
+											<button
+												className={
+													styles.fileExplorerButton
+												}
+												onClick={handleCreateDirectory}
+												title="Create new folder"
+												disabled={!playgroundClient}
+											>
+												New Folder
+											</button>
+										</div>
+									</div>
+									<div className={styles.fileExplorerTree}>
+										<PlaygroundFilePickerTree
+											playgroundClient={playgroundClient}
+											root="/"
+											initialPath={
+												renamingPath
+													? dirnameSafe(renamingPath)
+													: selectedDirPath
+													? selectedDirPath
+													: currentPath
+													? dirnameSafe(currentPath)
+													: DEFAULT_WORKSPACE_DIR
+											}
+											excludePaths={[
+												'/dev',
+												'/internal',
+												'/proc',
+												'/request',
+											]}
+											onSelect={async (path) => {
+												if (
+													await playgroundClient.isDir(
+														path
+													)
+												) {
+													setSelectedDirPath(path);
+													return;
+												}
+												const text =
+													await playgroundClient.readFileAsText(
+														path
+													);
+												if (text.length > 1024 * 1024) {
+													dispatch(
+														setCode(
+															'File too large to be edited'
+														)
+													);
+													dispatch(
+														setCurrentPath(null)
+													);
+												} else {
+													dispatch(setCode(text));
+													dispatch(
+														setCurrentPath(path)
+													);
+													setSelectedDirPath(
+														dirnameSafe(path)
+													);
+												}
+											}}
+											renamingPath={renamingPath}
+											onRename={(path, newName) => {
+												void handleRenameSubmit(
+													path,
+													newName
+												);
+											}}
+											onRenameCancel={(path) => {
+												void handleRenameCancel(path);
+											}}
+											refreshToken={fileTreeRefreshToken}
+										/>
+									</div>
+								</div>
+							) : null}
 						</div>
 					</Panel>
 					<PanelResizeHandle className={styles.horizontalHandle} />
@@ -156,6 +520,16 @@ export const Layout = () => {
 				<PanelResizeHandle className={styles.horizontalHandle} />
 				<Panel minSize={15}>
 					<div id="previewPane" className={styles.previewPane}>
+						{bootStatus === 'ready' && playgroundClient ? (
+							<div style={{ padding: '6px 8px' }}>
+								<AddressBar
+									url={previewUrl}
+									onUpdate={(newUrl) =>
+										playgroundClient.goTo(newUrl)
+									}
+								/>
+							</div>
+						) : null}
 						<iframe
 							id="preview"
 							title="WordPress Playground"
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index cb9ead7aac..0ff09d7e1a 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -69,12 +69,20 @@ export default function PlaygroundFilePickerTree({
 	excludePaths,
 	onSelect,
 	playgroundClient,
+	refreshToken = 0,
+	renamingPath,
+	onRename,
+	onRenameCancel,
 }: {
 	root?: string;
 	initialPath?: string;
 	excludePaths?: string[];
 	onSelect?: (path: string) => void;
 	playgroundClient?: PlaygroundClient;
+	refreshToken?: number;
+	renamingPath?: string | null;
+	onRename?: (path: string, newName: string) => void;
+	onRenameCancel?: (path: string) => void;
 }) {
 	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
 	const rootName = useMemo(
@@ -119,6 +127,7 @@ export default function PlaygroundFilePickerTree({
 		rootName,
 		playgroundClient,
 		JSON.stringify(excludePaths),
+		refreshToken,
 	]);
 
 	const coreInitialPath = useMemo(() => {
@@ -153,13 +162,28 @@ export default function PlaygroundFilePickerTree({
 
 	return (
 		<CoreFilePickerTree
+			key={refreshToken}
 			files={files}
 			initialPath={coreInitialPath}
 			onSelect={handleSelect}
 			onLoadChildren={handleLoadChildren}
 			isLoading={normalizedRoot === '/' && isRootLoading}
 			autoFocus={false}
-			inert={isRootLoading}
+			renamingPath={
+				renamingPath
+					? toCorePath(renamingPath, normalizedRoot)
+					: undefined
+			}
+			onRename={(corePath, newName) => {
+				if (!onRename) return;
+				const absPath = corePathToAbsolute(corePath, normalizedRoot);
+				onRename(absPath, newName);
+			}}
+			onRenameCancel={(corePath) => {
+				if (!onRenameCancel) return;
+				const absPath = corePathToAbsolute(corePath, normalizedRoot);
+				onRenameCancel(absPath);
+			}}
 		/>
 	);
 }
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
index 0f5dd94248..0e22e46823 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
@@ -161,9 +161,13 @@ export const PlaygroundManager = () => {
 					return;
 				}
 
-				await clientInstance.mkdir('/wordpress/workspace');
-				const initialPath = '/wordpress/workspace/code.php';
+				await clientInstance.mkdir('/workspace');
+				const initialPath = '/workspace/code.php';
 				await clientInstance.writeFile(initialPath, codeRef.current);
+				await clientInstance.symlink(
+					'/workspace',
+					'/wordpress/workspace'
+				);
 				dispatch(setCurrentPath(initialPath));
 				await clientInstance.goTo('/workspace/code.php');
 
diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/Terminal.tsx
index e751e9ea76..b01336ca59 100644
--- a/packages/playground/website/src/php-playground/components/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/Terminal.tsx
@@ -71,7 +71,8 @@ export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 	const terminalContainerRef = useRef<HTMLDivElement | null>(null);
 	const fitAddonRef = useRef<FitAddon | null>(null);
 	const progressRef = useRef<DownloadProgress | null>(null);
-	const cwdRef = useRef<string>('/wordpress');
+	// @TODO: Initialize this from the client, not with a hardcoded default.
+	const cwdRef = useRef<string>('/workspace');
 
 	useEffect(() => {
 		const container = terminalContainerRef.current;
@@ -127,9 +128,8 @@ export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 			});
 		};
 
-		let currentWorkingDirectory = cwdRef.current;
 		const promptPrefix = () => {
-			const dirName = basename(currentWorkingDirectory) || '/';
+			const dirName = basename(cwdRef.current) || '/';
 			return `(${dirName}) $ `;
 		};
 		const resolvePath = (target: string) => {
@@ -503,17 +503,12 @@ require_once __FILE__ . '.bin';
 					commandPrompted = true;
 				} else if (command === 'wp') {
 					await ensureWpCliBinary();
-					const result = await runCli(
-						[
-							'php',
-							'/tmp/wp-cli.phar',
-							'--path=/wordpress',
-							...args,
-						],
-						{
-							cwd: cwdRef.current,
-						}
-					);
+					const result = await runCli([
+						'php',
+						'/tmp/wp-cli.phar',
+						'--path=/wordpress',
+						...args,
+					]);
 					if (!result.aborted && result.exitCode !== 0) {
 						term.writeln(
 							`\r\nProcess exited with code ${result.exitCode}`
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index ae23392240..b960e7f815 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -2,14 +2,16 @@
  * Follow-up work:
  *
  * * Files explorer
- *    * Don't re-render (and show the loading indicator) when not needed.
- *    * Improve visual feedback when loading files (don't replace filename with loader).
- *    * CSS papercuts, e.g. dark font on dark background for active hovered selected files.
  *    * Detect when a binary file is opened, show a special message "binary file. can't
  *      edit (download)"
  *    * Create and delete files and directories. "Refresh" button to refresh the directory
  *      tree – OR auto-refresh every second or five seconds.
  *    * Download file / directory action
+ *    * Bug – sometimes collapsing a directory = children are not visible after reopening.
+ *      Is it an actual bug or just a faulty vite hot reloader?
+ *    * ✅ CSS papercuts, e.g. dark font on dark background for active hovered selected files.
+ *    * ✅ Improve visual feedback when loading files (don't replace filename with loader).
+ *    * ✅ Don't re-render (and show the loading indicator) when not needed.
  *    * ✅ Don't display "/", display just "home", "tmp", and "wordpress" directly
  *    * ✅ Refresh the files after collapsing and expanding the parent directory
  *    * ✅ Ensure it's scrollable with overflow: auto
@@ -19,20 +21,19 @@
  * * Editor
  *    * ✅ Save changes when editing files other than code.php
  *    * ✅ Display breadcrumbs of the currently open file above the editor?
+ * * Preview
+ *    * ✅ Add address bar for easy navigation
  * * Terminal
- *    * Implement cwd, cd
+ *    * ✅ Implement cwd, cd
  *    * ✅ Communicate cwd in current prompt (like fish)
  *    * ✅ Disable terminal collapsing for now
- *    * ------- later: -------
- *    * Tab completion for paths
- *    * Implement basic `curl` and `curl -O` and `wget` to download remote files
- *    * Implement `git clone` and `git checkout`
- *    * Implement `unzip` (via PHP `ZipArchive`)
  *
  * ------- later: -------
- * * UX for sharing more involved setups, e.g. when I edit a WordPress plugin
- *   and not just the code snippet (Maybe connect GitHub and save diff in a
- *   repository or in a gist?)
+ * * Responsive design, useful support for mobile phones
+ * * Sharing
+ *    * UX for sharing more involved projects, e.g. when I edit a WordPress plugin
+ *      and not just the code snippet (Maybe connect GitHub and save diff in a
+ *      repository or in a gist?)
  *    * "Git" tool to see diff against the initial state
  *    * "Save patch"
  *    * Maybe put that patch in the URL? Or, if too large, tell the user we need some place to store
@@ -41,15 +42,19 @@
  *      way of "just copy the URL."
  *    * Or display a modal "Hey, this is the limit of the shareable URL. It won't be updated
  *      anymore until you connect Github or so".
+ * * Terminal
+ *    * Tab completion for paths
+ *    * Implement basic `curl` and `curl -O` and `wget` to download remote files
+ *    * Implement `git clone` and `git checkout`
+ *    * Implement `unzip` (via PHP `ZipArchive`)
  * * Tool palette (file browser, environment setup form with wp+php versions, Blueprint editor)
  * * Integrate with Playground.wordpress.net – bring over a tool
  *   palette (file browser, sites browser, Blueprints browser).
  * * A way to run composer install by default (simply via Blueprints?)
  *   Communicate what it's doing by displaying the output in the terminal
  * * Tabs for opening multiple files
- * * Find a way to put my workspace outside of WordPress and still serve it?
- *    * ln -s /workspace /wordpress/workspace?
- *    * Or just make it a WordPress plugin? /wordpress/wp-content/plugins/my-plugin?
+ * * ✅ Find a way to put my workspace outside of WordPress and still serve it?
+ *    * ✅ ln -s /workspace /wordpress/workspace?
  */
 
 import { createRoot } from 'react-dom/client';

From 59de0bf2d8ba14f81e3c39596e5929b678ba8cb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 23:23:24 +0200
Subject: [PATCH 16/41] Contextual menu, rename, delete buttons

---
 .../src/FilePickerTree/style.module.css       |   1 -
 .../components/Layout.module.css              |  35 ++
 .../src/php-playground/components/Layout.tsx  | 546 ++++++++++++++----
 .../components/PlaygroundFilePickerTree.tsx   |  65 ++-
 4 files changed, 523 insertions(+), 124 deletions(-)

diff --git a/packages/playground/components/src/FilePickerTree/style.module.css b/packages/playground/components/src/FilePickerTree/style.module.css
index f5e2f23450..d77df2acc6 100644
--- a/packages/playground/components/src/FilePickerTree/style.module.css
+++ b/packages/playground/components/src/FilePickerTree/style.module.css
@@ -69,7 +69,6 @@
 
 .renaming {
 	align-items: center;
-	gap: 8px;
 }
 
 .rename-input,
diff --git a/packages/playground/website/src/php-playground/components/Layout.module.css b/packages/playground/website/src/php-playground/components/Layout.module.css
index bbd437c3c4..be43a4aa46 100644
--- a/packages/playground/website/src/php-playground/components/Layout.module.css
+++ b/packages/playground/website/src/php-playground/components/Layout.module.css
@@ -97,6 +97,41 @@
 	padding: 4px 0;
 }
 
+.contextMenu {
+	position: fixed;
+	z-index: 2000;
+	min-width: 180px;
+	background: #ffffff;
+	border: 1px solid #d0d0d0;
+	box-shadow: 0 12px 30px rgba(15, 15, 15, 0.18);
+	border-radius: 6px;
+	padding: 4px 0;
+}
+
+.contextMenuButton {
+	display: block;
+	width: 100%;
+	background: transparent;
+	border: none;
+	padding: 8px 16px;
+	text-align: left;
+	font-size: 13px;
+	color: #222;
+	cursor: pointer;
+}
+
+.contextMenuButton:hover {
+	background: #f0f0f5;
+}
+
+.contextMenuButtonDanger {
+	color: #c0312c;
+}
+
+.contextMenuButtonDanger:hover {
+	background: #ffecec;
+}
+
 .controls {
 	padding: 8px 12px;
 	background: #f5f5f5;
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index a5a6bf3097..ddc6b95308 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -9,6 +9,7 @@ import { Controls } from './Controls';
 import { EditorHost } from './EditorHost';
 import { HelpModal } from './HelpModal';
 import PlaygroundFilePickerTree from './PlaygroundFilePickerTree';
+import type { FileNode } from '@wp-playground/components';
 import { PlaygroundManager } from './PlaygroundManager';
 import { Terminal } from './Terminal';
 import { useAppDispatch, useAppSelector } from '../hooks';
@@ -16,6 +17,7 @@ import { setCode, setCurrentPath } from '../store';
 import AddressBar from '../../components/address-bar';
 
 const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
+const MAX_INLINE_BYTES = 1024 * 1024; // 1MB
 
 const normalizeFsPath = (path: string) => {
 	if (!path) {
@@ -43,11 +45,45 @@ const dirnameSafe = (path: string) => {
 
 // removed legacy prompt-based helpers in favor of inline rename flow
 
+const isValidNameSegment = (name: string) => {
+	if (!name) {
+		return false;
+	}
+	if (name === '.' || name === '..') {
+		return false;
+	}
+	return !/[\\/]/.test(name);
+};
+
+const isProbablyTextBuffer = (buffer: Uint8Array) => {
+	// Fast null-byte check
+	const len = buffer.byteLength;
+	for (let i = 0; i < Math.min(len, 4096); i++) {
+		if (buffer[i] === 0) {
+			return false;
+		}
+	}
+	// UTF-8 validation
+	try {
+		new TextDecoder('utf-8', { fatal: true }).decode(buffer);
+		return true;
+	} catch {
+		return false;
+	}
+};
+
+const createDownloadUrl = (data: Uint8Array, filename: string) => {
+	const blob = new Blob([data]);
+	const url = URL.createObjectURL(blob);
+	// Best-effort cleanup later
+	setTimeout(() => URL.revokeObjectURL(url), 60_000);
+	return { url, filename };
+};
+
 export const Layout = () => {
 	const [isHelpOpen, setHelpOpen] = useState(false);
 	const [isTerminalCollapsed, setTerminalCollapsed] = useState(false);
 	const [terminalResizeToken, setTerminalResizeToken] = useState(0);
-	const [fileTreeRefreshToken, setFileTreeRefreshToken] = useState(0);
 	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
 	const playgroundClient = useAppSelector((state) => state.playground.client);
 	const bootStatus = useAppSelector((state) => state.playground.bootStatus);
@@ -55,11 +91,22 @@ export const Layout = () => {
 	const [previewUrl, setPreviewUrl] = useState('');
 	const navigationClientRef = useRef<PlaygroundClient | null>(null);
 	const [renamingPath, setRenamingPath] = useState<string | null>(null);
-	const [selectedDirPath, setSelectedDirPath] = useState<string | null>(null);
+	const [selectedDirPath, setSelectedDirPath] = useState<string | null>(
+		DEFAULT_WORKSPACE_DIR
+	);
+	const [forceSelectedPath, setForceSelectedPath] = useState<string | null>(
+		null
+	);
 	const pendingCreateRef = useRef<{
 		type: 'file' | 'folder';
 		tempPath: string;
 	} | null>(null);
+	const [contextMenu, setContextMenu] = useState<{
+		path: string;
+		type: 'file' | 'folder';
+		x: number;
+		y: number;
+	} | null>(null);
 
 	const dispatch = useAppDispatch();
 
@@ -76,8 +123,12 @@ export const Layout = () => {
 				}
 				return { stem: n, ext: '' };
 			};
+			const prefix = baseDir === '/' ? '' : baseDir;
 			while (
-				await client.fileExists(`${baseDir}/${name}`).catch(() => false)
+				(await client
+					.fileExists(`${prefix}/${name}`)
+					.catch(() => false)) ||
+				(await client.isDir(`${prefix}/${name}`).catch(() => false))
 			) {
 				counter += 1;
 				const { stem, ext } = splitExt(baseName);
@@ -88,14 +139,10 @@ export const Layout = () => {
 		[]
 	);
 
-	const ensureParentExpandedPath = useCallback(
-		(path: string) => {
-			const parent = dirnameSafe(path);
-			dispatch(setCurrentPath(parent));
-			setSelectedDirPath(parent);
-		},
-		[dispatch]
-	);
+	const ensureParentExpandedPath = useCallback((path: string) => {
+		const parent = dirnameSafe(path);
+		setSelectedDirPath(parent);
+	}, []);
 
 	useEffect(() => {
 		const previousTitle = document.title;
@@ -105,6 +152,26 @@ export const Layout = () => {
 		};
 	}, []);
 
+	useEffect(() => {
+		if (!contextMenu) {
+			return;
+		}
+		const handleClose = () => setContextMenu(null);
+		const handleKey = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				handleClose();
+			}
+		};
+		window.addEventListener('click', handleClose);
+		window.addEventListener('contextmenu', handleClose);
+		window.addEventListener('keydown', handleKey);
+		return () => {
+			window.removeEventListener('click', handleClose);
+			window.removeEventListener('contextmenu', handleClose);
+			window.removeEventListener('keydown', handleKey);
+		};
+	}, [contextMenu]);
+
 	useEffect(() => {
 		if (!isHelpOpen) {
 			return;
@@ -149,10 +216,6 @@ export const Layout = () => {
 	const handleOpenHelp = useCallback(() => setHelpOpen(true), []);
 	const handleCloseHelp = useCallback(() => setHelpOpen(false), []);
 
-	const handleTreeRefresh = useCallback(() => {
-		setFileTreeRefreshToken((token) => token + 1);
-	}, []);
-
 	const handleCreateFile = useCallback(async () => {
 		if (!playgroundClient) {
 			return;
@@ -167,7 +230,7 @@ export const Layout = () => {
 			const name = await findAvailableName(
 				playgroundClient,
 				normalizedBase,
-				'untitled'
+				'untitled.php'
 			);
 			const tempPath = `${
 				normalizedBase === '/' ? '' : normalizedBase
@@ -175,8 +238,10 @@ export const Layout = () => {
 			await playgroundClient.writeFile(tempPath, '');
 			pendingCreateRef.current = { type: 'file', tempPath };
 			setRenamingPath(tempPath);
+			setForceSelectedPath(tempPath);
 			ensureParentExpandedPath(tempPath);
-			handleTreeRefresh();
+			setSelectedDirPath(dirnameSafe(tempPath));
+			setContextMenu(null);
 		} catch (e) {
 			void e;
 		}
@@ -186,7 +251,6 @@ export const Layout = () => {
 		selectedDirPath,
 		findAvailableName,
 		ensureParentExpandedPath,
-		handleTreeRefresh,
 	]);
 
 	const handleCreateDirectory = useCallback(async () => {
@@ -211,8 +275,10 @@ export const Layout = () => {
 			await playgroundClient.mkdir(tempPath);
 			pendingCreateRef.current = { type: 'folder', tempPath };
 			setRenamingPath(tempPath);
+			setForceSelectedPath(tempPath);
 			ensureParentExpandedPath(tempPath);
-			handleTreeRefresh();
+			setSelectedDirPath(tempPath);
+			setContextMenu(null);
 		} catch (e) {
 			void e;
 		}
@@ -222,73 +288,79 @@ export const Layout = () => {
 		selectedDirPath,
 		findAvailableName,
 		ensureParentExpandedPath,
-		handleTreeRefresh,
 	]);
 
 	const handleRenameSubmit = useCallback(
 		async (path: string, newName: string) => {
-			if (!playgroundClient || !pendingCreateRef.current) {
-				setRenamingPath(null);
+			if (!playgroundClient) {
 				return;
 			}
+			const pending = pendingCreateRef.current;
+			const isPending = pending?.tempPath === path;
 			const parent = dirnameSafe(path);
 			const sanitized = (newName || '').trim();
-			if (
-				!sanitized ||
-				sanitized.includes('/') ||
-				sanitized === '.' ||
-				sanitized === '..'
-			) {
-				// Treat invalid name as cancel
-				try {
-					if (pendingCreateRef.current.type === 'folder') {
-						await playgroundClient.rmdir(path, {
-							recursive: true,
-						} as any);
-					} else {
-						await playgroundClient.unlink(path);
+			if (!isValidNameSegment(sanitized)) {
+				if (isPending) {
+					try {
+						if (pending.type === 'folder') {
+							await playgroundClient.rmdir(path, {
+								recursive: true,
+							} as any);
+						} else {
+							await playgroundClient.unlink(path);
+						}
+					} catch (e) {
+						void e;
 					}
-				} catch (e) {
-					void e;
+					pendingCreateRef.current = null;
 				}
-				setRenamingPath(null);
-				pendingCreateRef.current = null;
-				handleTreeRefresh();
+				setRenamingPath(isPending ? null : path);
 				return;
 			}
 
-			let finalName = sanitized;
-			const splitExt = (n: string) => {
-				const dot = n.lastIndexOf('.');
-				if (dot > 0) {
-					return { stem: n.slice(0, dot), ext: n.slice(dot) };
+			const composePath = (name: string) =>
+				parent === '/' ? `/${name}` : `${parent}/${name}`;
+			const finalName = sanitized;
+			let candidate = composePath(finalName);
+			const candidateNormalized = normalizeFsPath(candidate);
+			if (candidateNormalized === path) {
+				setRenamingPath(null);
+				if (isPending) {
+					pendingCreateRef.current = null;
 				}
-				return { stem: n, ext: '' };
-			};
-			let candidate = `${parent === '/' ? '' : parent}/${finalName}`;
-			if (
-				await playgroundClient.fileExists(candidate).catch(() => false)
-			) {
-				const { stem, ext } = splitExt(finalName);
-				let counter = 1;
-				while (
-					await playgroundClient
-						.fileExists(
-							`${
-								parent === '/' ? '' : parent
-							}/${stem} (${counter})${ext}`
-						)
-						.catch(() => false)
-				) {
-					counter += 1;
+				setForceSelectedPath(candidateNormalized);
+				return;
+			}
+
+			const exists = await playgroundClient
+				.fileExists(candidateNormalized)
+				.catch(() => false);
+			const existsDir = await playgroundClient
+				.isDir(candidateNormalized)
+				.catch(() => false);
+			if ((exists || existsDir) && candidateNormalized !== path) {
+				if (isPending) {
+					try {
+						const unique = await findAvailableName(
+							playgroundClient,
+							parent === '/' ? '/' : parent,
+							finalName
+						);
+						candidate = composePath(unique);
+					} catch (e) {
+						void e;
+					}
+				} else {
+					setRenamingPath(path);
+					return;
 				}
-				finalName = `${stem} (${counter})${ext}`;
-				candidate = `${parent === '/' ? '' : parent}/${finalName}`;
 			}
 
+			let candidateIsDir = pending?.type === 'folder';
+
 			try {
 				await playgroundClient.mv(path, candidate as any);
-				if (pendingCreateRef.current.type === 'file') {
+				if (pending?.type === 'file') {
 					try {
 						const newContent =
 							await playgroundClient.readFileAsText(candidate);
@@ -297,37 +369,62 @@ export const Layout = () => {
 					} catch (e) {
 						void e;
 					}
+				} else if (!pending) {
+					const isDir = await playgroundClient
+						.isDir(candidate as any)
+						.catch(() => false);
+					candidateIsDir = isDir;
+					if (!isDir) {
+						try {
+							const newContent =
+								await playgroundClient.readFileAsText(
+									candidate
+								);
+							dispatch(setCode(newContent));
+							dispatch(setCurrentPath(candidate));
+						} catch {
+							// Ignore failure
+						}
+					} else if (currentPath === path) {
+						dispatch(setCurrentPath(candidate));
+					}
 				}
-			} catch (e) {
-				void e;
-				// If rename fails, try to clean up temp
-				try {
-					if (pendingCreateRef.current.type === 'folder') {
-						await playgroundClient.rmdir(path, {
-							recursive: true,
-						} as any);
-					} else {
-						await playgroundClient.unlink(path);
+				setForceSelectedPath(candidate);
+				setSelectedDirPath(
+					candidateIsDir ? candidate : dirnameSafe(candidate)
+				);
+			} catch {
+				if (isPending) {
+					try {
+						if (pending?.type === 'folder') {
+							await playgroundClient.rmdir(path, {
+								recursive: true,
+							} as any);
+						} else {
+							await playgroundClient.unlink(path);
+						}
+					} catch {
+						// Ignore failure
 					}
-				} catch (cleanupError) {
-					void cleanupError;
 				}
+			} finally {
+				pendingCreateRef.current = null;
+				setRenamingPath(null);
 			}
-			setRenamingPath(null);
-			pendingCreateRef.current = null;
-			handleTreeRefresh();
 		},
-		[playgroundClient, dispatch, handleTreeRefresh]
+		[playgroundClient, findAvailableName, dispatch, currentPath]
 	);
 
 	const handleRenameCancel = useCallback(
 		async (path: string) => {
-			if (!playgroundClient || !pendingCreateRef.current) {
+			const pending = pendingCreateRef.current;
+			setContextMenu(null);
+			if (!playgroundClient || pending?.tempPath !== path) {
 				setRenamingPath(null);
 				return;
 			}
 			try {
-				if (pendingCreateRef.current.type === 'folder') {
+				if (pending.type === 'folder') {
 					await playgroundClient.rmdir(path, {
 						recursive: true,
 					} as any);
@@ -337,13 +434,142 @@ export const Layout = () => {
 			} catch (e) {
 				void e;
 			}
+			pendingCreateRef.current = null;
 			setRenamingPath(null);
+			setForceSelectedPath(null);
+			setSelectedDirPath((prev) => {
+				if (!prev) {
+					return prev;
+				}
+				const normalized = normalizeFsPath(path);
+				if (prev === normalized || prev.startsWith(`${normalized}/`)) {
+					return dirnameSafe(normalized);
+				}
+				return prev;
+			});
+		},
+		[playgroundClient]
+	);
+
+	const handleContextMenuRename = useCallback(
+		(path: string) => {
 			pendingCreateRef.current = null;
-			handleTreeRefresh();
+			setContextMenu(null);
+			setRenamingPath(path);
+			setForceSelectedPath(path);
+			setSelectedDirPath(dirnameSafe(path));
+			ensureParentExpandedPath(path);
+		},
+		[ensureParentExpandedPath]
+	);
+
+	const handleDeletePath = useCallback(
+		async (targetPath: string, type: 'file' | 'folder') => {
+			if (!playgroundClient) {
+				return;
+			}
+			const normalized = normalizeFsPath(targetPath);
+			setContextMenu(null);
+			try {
+				if (type === 'folder') {
+					await playgroundClient.rmdir(normalized, {
+						recursive: true,
+					} as any);
+				} else {
+					await playgroundClient.unlink(normalized);
+				}
+			} catch {
+				// Ignore failure
+			}
+			if (pendingCreateRef.current?.tempPath === normalized) {
+				pendingCreateRef.current = null;
+			}
+			if (
+				currentPath &&
+				(currentPath === normalized ||
+					currentPath.startsWith(`${normalized}/`))
+			) {
+				dispatch(setCode(''));
+				dispatch(setCurrentPath(null));
+			}
+			if (
+				selectedDirPath &&
+				(selectedDirPath === normalized ||
+					selectedDirPath.startsWith(`${normalized}/`))
+			) {
+				setSelectedDirPath(dirnameSafe(normalized));
+			}
+			setRenamingPath(null);
+			setForceSelectedPath(dirnameSafe(normalized));
+		},
+		[playgroundClient, currentPath, selectedDirPath, dispatch]
+	);
+
+	const handleDownloadPath = useCallback(
+		async (targetPath: string) => {
+			if (!playgroundClient) {
+				return;
+			}
+			setContextMenu(null);
+			try {
+				const content = await playgroundClient.readFileAsText(
+					targetPath
+				);
+				const blob = new Blob([content], {
+					type: 'text/plain;charset=utf-8',
+				});
+				const url = URL.createObjectURL(blob);
+				const link = document.createElement('a');
+				link.href = url;
+				link.download =
+					normalizeFsPath(targetPath).split('/').pop() || 'template';
+				document.body.appendChild(link);
+				link.click();
+				link.remove();
+				URL.revokeObjectURL(url);
+			} catch {
+				// Ignore failure
+			}
+		},
+		[playgroundClient]
+	);
+
+	const handleTreeContextMenu = useCallback(
+		(event: React.MouseEvent, node: FileNode, path: string) => {
+			event.preventDefault();
+			event.stopPropagation();
+			const absolute = normalizeFsPath(path);
+			setRenamingPath(null);
+			setContextMenu({
+				path: absolute,
+				type: node.type,
+				x: event.clientX,
+				y: event.clientY,
+			});
 		},
-		[playgroundClient, handleTreeRefresh]
+		[renamingPath]
+	);
+
+	const treeInitialPath = normalizeFsPath(
+		renamingPath ??
+			forceSelectedPath ??
+			selectedDirPath ??
+			(currentPath ? dirnameSafe(currentPath) : DEFAULT_WORKSPACE_DIR)
 	);
 
+	const contextMenuStyle = contextMenu
+		? {
+				left:
+					typeof window === 'undefined'
+						? contextMenu.x
+						: Math.min(contextMenu.x, window.innerWidth - 200),
+				top:
+					typeof window === 'undefined'
+						? contextMenu.y
+						: Math.min(contextMenu.y, window.innerHeight - 140),
+		  }
+		: undefined;
+
 	return (
 		<div id="php-playground-react-root" className={styles.root}>
 			<PlaygroundManager />
@@ -390,15 +616,7 @@ export const Layout = () => {
 										<PlaygroundFilePickerTree
 											playgroundClient={playgroundClient}
 											root="/"
-											initialPath={
-												renamingPath
-													? dirnameSafe(renamingPath)
-													: selectedDirPath
-													? selectedDirPath
-													: currentPath
-													? dirnameSafe(currentPath)
-													: DEFAULT_WORKSPACE_DIR
-											}
+											initialPath={treeInitialPath}
 											excludePaths={[
 												'/dev',
 												'/internal',
@@ -406,6 +624,8 @@ export const Layout = () => {
 												'/request',
 											]}
 											onSelect={async (path) => {
+												setContextMenu(null);
+												setForceSelectedPath(null);
 												if (
 													await playgroundClient.isDir(
 														path
@@ -414,40 +634,98 @@ export const Layout = () => {
 													setSelectedDirPath(path);
 													return;
 												}
-												const text =
-													await playgroundClient.readFileAsText(
-														path
+												try {
+													const data =
+														await playgroundClient.readFileAsBuffer(
+															path
+														);
+													const size =
+														data.byteLength;
+													if (
+														size > MAX_INLINE_BYTES
+													) {
+														const {
+															url,
+															filename,
+														} = createDownloadUrl(
+															data,
+															path
+																.split('/')
+																.pop() ||
+																'download'
+														);
+														dispatch(
+															setCode(
+																`File too large to open (>1MB)\nDownload: ${url}\nFilename: ${filename}`
+															)
+														);
+														dispatch(
+															setCurrentPath(null)
+														);
+														setSelectedDirPath(
+															dirnameSafe(path)
+														);
+														return;
+													}
+													if (
+														!isProbablyTextBuffer(
+															data
+														)
+													) {
+														const {
+															url,
+															filename,
+														} = createDownloadUrl(
+															data,
+															path
+																.split('/')
+																.pop() ||
+																'download'
+														);
+														dispatch(
+															setCode(
+																`binary file. can't edit (download): ${url}\nFilename: ${filename}`
+															)
+														);
+														dispatch(
+															setCurrentPath(null)
+														);
+														setSelectedDirPath(
+															dirnameSafe(path)
+														);
+														return;
+													}
+													const text =
+														new TextDecoder(
+															'utf-8'
+														).decode(data);
+													dispatch(setCode(text));
+													dispatch(
+														setCurrentPath(path)
 													);
-												if (text.length > 1024 * 1024) {
+													setSelectedDirPath(
+														dirnameSafe(path)
+													);
+												} catch {
 													dispatch(
 														setCode(
-															'File too large to be edited'
+															'Could not open file'
 														)
 													);
 													dispatch(
 														setCurrentPath(null)
 													);
-												} else {
-													dispatch(setCode(text));
-													dispatch(
-														setCurrentPath(path)
-													);
 													setSelectedDirPath(
 														dirnameSafe(path)
 													);
 												}
 											}}
 											renamingPath={renamingPath}
-											onRename={(path, newName) => {
-												void handleRenameSubmit(
-													path,
-													newName
-												);
-											}}
-											onRenameCancel={(path) => {
-												void handleRenameCancel(path);
-											}}
-											refreshToken={fileTreeRefreshToken}
+											onRename={handleRenameSubmit}
+											onRenameCancel={handleRenameCancel}
+											onContextMenu={
+												handleTreeContextMenu
+											}
 										/>
 									</div>
 								</div>
@@ -539,6 +817,42 @@ export const Layout = () => {
 				</Panel>
 			</PanelGroup>
 			<HelpModal isOpen={isHelpOpen} onRequestClose={handleCloseHelp} />
+			{contextMenu && contextMenuStyle && (
+				<div
+					className={styles.contextMenu}
+					style={contextMenuStyle}
+					onClick={(event) => event.stopPropagation()}
+					onContextMenu={(event) => event.preventDefault()}
+				>
+					<button
+						className={styles.contextMenuButton}
+						onClick={() =>
+							handleContextMenuRename(contextMenu.path)
+						}
+					>
+						Rename
+					</button>
+					<button
+						className={clsx(
+							styles.contextMenuButton,
+							styles.contextMenuButtonDanger
+						)}
+						onClick={() =>
+							handleDeletePath(contextMenu.path, contextMenu.type)
+						}
+					>
+						Delete
+					</button>
+					{contextMenu.type === 'file' && (
+						<button
+							className={styles.contextMenuButton}
+							onClick={() => handleDownloadPath(contextMenu.path)}
+						>
+							Download
+						</button>
+					)}
+				</div>
+			)}
 		</div>
 	);
 };
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 0ff09d7e1a..4618ac627e 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -69,20 +69,24 @@ export default function PlaygroundFilePickerTree({
 	excludePaths,
 	onSelect,
 	playgroundClient,
-	refreshToken = 0,
 	renamingPath,
 	onRename,
 	onRenameCancel,
+	onContextMenu,
 }: {
 	root?: string;
 	initialPath?: string;
 	excludePaths?: string[];
 	onSelect?: (path: string) => void;
 	playgroundClient?: PlaygroundClient;
-	refreshToken?: number;
 	renamingPath?: string | null;
 	onRename?: (path: string, newName: string) => void;
 	onRenameCancel?: (path: string) => void;
+	onContextMenu?: (
+		event: React.MouseEvent,
+		node: FileNode,
+		path: string
+	) => void;
 }) {
 	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
 	const rootName = useMemo(
@@ -93,6 +97,43 @@ export default function PlaygroundFilePickerTree({
 	const [files, setFiles] = useState<FileNode[]>([]);
 	const [isRootLoading, setIsRootLoading] = useState(false);
 
+	const getDirname = useCallback((path: string) => {
+		const p = normalizePath(path);
+		if (p === '/') return '/';
+		const i = p.lastIndexOf('/');
+		return i <= 0 ? '/' : p.slice(0, i);
+	}, []);
+
+	const getBasename = useCallback((path: string) => {
+		const p = normalizePath(path);
+		if (p === '/') return '/';
+		const i = p.lastIndexOf('/');
+		return i < 0 ? p : p.slice(i + 1);
+	}, []);
+
+	const prioritizeRenaming = useCallback(
+		(
+			items: { name: string; type: 'file' | 'folder' }[],
+			absDirPath: string
+		) => {
+			if (!renamingPath) return items;
+			const renPath = normalizePath(renamingPath);
+			if (getDirname(renPath) !== absDirPath) return items;
+			const targetName = getBasename(renPath);
+			const idx = items.findIndex((i) => i.name === targetName);
+			if (idx === -1) return items;
+			const copy = items.slice();
+			const [entry] = copy.splice(idx, 1);
+			const dirs = copy.filter((i) => i.type === 'folder');
+			const filesOnly = copy.filter((i) => i.type === 'file');
+			if (entry.type === 'folder') {
+				return [entry, ...dirs, ...filesOnly];
+			}
+			return [...dirs, entry, ...filesOnly];
+		},
+		[renamingPath, getDirname, getBasename]
+	);
+
 	useEffect(() => {
 		let cancelled = false;
 		async function init() {
@@ -108,7 +149,8 @@ export default function PlaygroundFilePickerTree({
 					const childAbs = `/${item.name}`;
 					return !excludePaths?.includes(childAbs);
 				});
-				if (!cancelled) setFiles(filtered as FileNode[]);
+				const ordered = prioritizeRenaming(filtered, '/');
+				if (!cancelled) setFiles(ordered as FileNode[]);
 				setIsRootLoading(false);
 			} else {
 				if (!cancelled)
@@ -127,7 +169,7 @@ export default function PlaygroundFilePickerTree({
 		rootName,
 		playgroundClient,
 		JSON.stringify(excludePaths),
-		refreshToken,
+		prioritizeRenaming,
 	]);
 
 	const coreInitialPath = useMemo(() => {
@@ -148,9 +190,9 @@ export default function PlaygroundFilePickerTree({
 						: `${absDirPath}/${item.name}`;
 				return !excludePaths?.includes(childAbs);
 			});
-			return filtered as FileNode[];
+			return prioritizeRenaming(filtered, absDirPath) as FileNode[];
 		},
-		[playgroundClient, normalizedRoot, excludePaths]
+		[playgroundClient, normalizedRoot, excludePaths, prioritizeRenaming]
 	);
 
 	const handleSelect = useCallback(
@@ -162,7 +204,6 @@ export default function PlaygroundFilePickerTree({
 
 	return (
 		<CoreFilePickerTree
-			key={refreshToken}
 			files={files}
 			initialPath={coreInitialPath}
 			onSelect={handleSelect}
@@ -184,6 +225,16 @@ export default function PlaygroundFilePickerTree({
 				const absPath = corePathToAbsolute(corePath, normalizedRoot);
 				onRenameCancel(absPath);
 			}}
+			onContextMenu={
+				onContextMenu
+					? (event, node, corePath) =>
+							onContextMenu(
+								event,
+								node as FileNode,
+								corePathToAbsolute(corePath, normalizedRoot)
+							)
+					: undefined
+			}
 		/>
 	);
 }

From 093741efb85277c1097487bbd94ac49eba8b7e5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 23:47:26 +0200
Subject: [PATCH 17/41] move most of the contextual menu logic to
 PlaygroundFilePicker

---
 .../src/php-playground/components/Layout.tsx  | 480 ++--------------
 .../components/PlaygroundFilePickerTree.tsx   | 520 ++++++++++++++++--
 .../website/src/php-playground/main.tsx       |  12 +-
 3 files changed, 511 insertions(+), 501 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index ddc6b95308..9e7bc1e93e 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -8,8 +8,9 @@ import styles from './layout.module.css';
 import { Controls } from './Controls';
 import { EditorHost } from './EditorHost';
 import { HelpModal } from './HelpModal';
-import PlaygroundFilePickerTree from './PlaygroundFilePickerTree';
-import type { FileNode } from '@wp-playground/components';
+import PlaygroundFilePickerTree, {
+	type PlaygroundFilePickerTreeRef,
+} from './PlaygroundFilePickerTree';
 import { PlaygroundManager } from './PlaygroundManager';
 import { Terminal } from './Terminal';
 import { useAppDispatch, useAppSelector } from '../hooks';
@@ -45,15 +46,7 @@ const dirnameSafe = (path: string) => {
 
 // removed legacy prompt-based helpers in favor of inline rename flow
 
-const isValidNameSegment = (name: string) => {
-	if (!name) {
-		return false;
-	}
-	if (name === '.' || name === '..') {
-		return false;
-	}
-	return !/[\\/]/.test(name);
-};
+// validation handled in tree component
 
 const isProbablyTextBuffer = (buffer: Uint8Array) => {
 	// Fast null-byte check
@@ -85,11 +78,11 @@ export const Layout = () => {
 	const [isTerminalCollapsed, setTerminalCollapsed] = useState(false);
 	const [terminalResizeToken, setTerminalResizeToken] = useState(0);
 	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
+	const treeRef = useRef<PlaygroundFilePickerTreeRef | null>(null);
 	const playgroundClient = useAppSelector((state) => state.playground.client);
 	const bootStatus = useAppSelector((state) => state.playground.bootStatus);
 	const currentPath = useAppSelector((state) => state.playground.currentPath);
 	const [previewUrl, setPreviewUrl] = useState('');
-	const navigationClientRef = useRef<PlaygroundClient | null>(null);
 	const [renamingPath, setRenamingPath] = useState<string | null>(null);
 	const [selectedDirPath, setSelectedDirPath] = useState<string | null>(
 		DEFAULT_WORKSPACE_DIR
@@ -97,53 +90,9 @@ export const Layout = () => {
 	const [forceSelectedPath, setForceSelectedPath] = useState<string | null>(
 		null
 	);
-	const pendingCreateRef = useRef<{
-		type: 'file' | 'folder';
-		tempPath: string;
-	} | null>(null);
-	const [contextMenu, setContextMenu] = useState<{
-		path: string;
-		type: 'file' | 'folder';
-		x: number;
-		y: number;
-	} | null>(null);
 
 	const dispatch = useAppDispatch();
 
-	// getBaseName not used in this component
-
-	const findAvailableName = useCallback(
-		async (client: PlaygroundClient, baseDir: string, baseName: string) => {
-			let name = baseName;
-			let counter = 0;
-			const splitExt = (n: string) => {
-				const dot = n.lastIndexOf('.');
-				if (dot > 0) {
-					return { stem: n.slice(0, dot), ext: n.slice(dot) };
-				}
-				return { stem: n, ext: '' };
-			};
-			const prefix = baseDir === '/' ? '' : baseDir;
-			while (
-				(await client
-					.fileExists(`${prefix}/${name}`)
-					.catch(() => false)) ||
-				(await client.isDir(`${prefix}/${name}`).catch(() => false))
-			) {
-				counter += 1;
-				const { stem, ext } = splitExt(baseName);
-				name = `${stem} (${counter})${ext}`;
-			}
-			return name;
-		},
-		[]
-	);
-
-	const ensureParentExpandedPath = useCallback((path: string) => {
-		const parent = dirnameSafe(path);
-		setSelectedDirPath(parent);
-	}, []);
-
 	useEffect(() => {
 		const previousTitle = document.title;
 		document.title = 'WordPress PHP Playground';
@@ -152,26 +101,6 @@ export const Layout = () => {
 		};
 	}, []);
 
-	useEffect(() => {
-		if (!contextMenu) {
-			return;
-		}
-		const handleClose = () => setContextMenu(null);
-		const handleKey = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') {
-				handleClose();
-			}
-		};
-		window.addEventListener('click', handleClose);
-		window.addEventListener('contextmenu', handleClose);
-		window.addEventListener('keydown', handleKey);
-		return () => {
-			window.removeEventListener('click', handleClose);
-			window.removeEventListener('contextmenu', handleClose);
-			window.removeEventListener('keydown', handleKey);
-		};
-	}, [contextMenu]);
-
 	useEffect(() => {
 		if (!isHelpOpen) {
 			return;
@@ -187,11 +116,6 @@ export const Layout = () => {
 		if (!playgroundClient) {
 			return;
 		}
-		// Avoid registering multiple onNavigation handlers for the same client
-		if (navigationClientRef.current === playgroundClient) {
-			return;
-		}
-		navigationClientRef.current = playgroundClient;
 		let cancelled = false;
 		(async () => {
 			try {
@@ -216,274 +140,9 @@ export const Layout = () => {
 	const handleOpenHelp = useCallback(() => setHelpOpen(true), []);
 	const handleCloseHelp = useCallback(() => setHelpOpen(false), []);
 
-	const handleCreateFile = useCallback(async () => {
-		if (!playgroundClient) {
-			return;
-		}
-		const baseDir = selectedDirPath
-			? normalizeFsPath(selectedDirPath)
-			: currentPath
-			? dirnameSafe(currentPath)
-			: DEFAULT_WORKSPACE_DIR;
-		const normalizedBase = normalizeFsPath(baseDir);
-		try {
-			const name = await findAvailableName(
-				playgroundClient,
-				normalizedBase,
-				'untitled.php'
-			);
-			const tempPath = `${
-				normalizedBase === '/' ? '' : normalizedBase
-			}/${name}`;
-			await playgroundClient.writeFile(tempPath, '');
-			pendingCreateRef.current = { type: 'file', tempPath };
-			setRenamingPath(tempPath);
-			setForceSelectedPath(tempPath);
-			ensureParentExpandedPath(tempPath);
-			setSelectedDirPath(dirnameSafe(tempPath));
-			setContextMenu(null);
-		} catch (e) {
-			void e;
-		}
-	}, [
-		playgroundClient,
-		currentPath,
-		selectedDirPath,
-		findAvailableName,
-		ensureParentExpandedPath,
-	]);
-
-	const handleCreateDirectory = useCallback(async () => {
-		if (!playgroundClient) {
-			return;
-		}
-		const baseDir = selectedDirPath
-			? normalizeFsPath(selectedDirPath)
-			: currentPath
-			? dirnameSafe(currentPath)
-			: DEFAULT_WORKSPACE_DIR;
-		const normalizedBase = normalizeFsPath(baseDir);
-		try {
-			const name = await findAvailableName(
-				playgroundClient,
-				normalizedBase,
-				'New Folder'
-			);
-			const tempPath = `${
-				normalizedBase === '/' ? '' : normalizedBase
-			}/${name}`;
-			await playgroundClient.mkdir(tempPath);
-			pendingCreateRef.current = { type: 'folder', tempPath };
-			setRenamingPath(tempPath);
-			setForceSelectedPath(tempPath);
-			ensureParentExpandedPath(tempPath);
-			setSelectedDirPath(tempPath);
-			setContextMenu(null);
-		} catch (e) {
-			void e;
-		}
-	}, [
-		playgroundClient,
-		currentPath,
-		selectedDirPath,
-		findAvailableName,
-		ensureParentExpandedPath,
-	]);
-
-	const handleRenameSubmit = useCallback(
-		async (path: string, newName: string) => {
-			if (!playgroundClient) {
-				return;
-			}
-			const pending = pendingCreateRef.current;
-			const isPending = pending?.tempPath === path;
-			const parent = dirnameSafe(path);
-			const sanitized = (newName || '').trim();
-			if (!isValidNameSegment(sanitized)) {
-				if (isPending) {
-					try {
-						if (pending.type === 'folder') {
-							await playgroundClient.rmdir(path, {
-								recursive: true,
-							} as any);
-						} else {
-							await playgroundClient.unlink(path);
-						}
-					} catch (e) {
-						void e;
-					}
-					pendingCreateRef.current = null;
-				}
-				setRenamingPath(isPending ? null : path);
-				return;
-			}
-
-			const composePath = (name: string) =>
-				parent === '/' ? `/${name}` : `${parent}/${name}`;
-			const finalName = sanitized;
-			let candidate = composePath(finalName);
-			const candidateNormalized = normalizeFsPath(candidate);
-			if (candidateNormalized === path) {
-				setRenamingPath(null);
-				if (isPending) {
-					pendingCreateRef.current = null;
-				}
-				setForceSelectedPath(candidateNormalized);
-				return;
-			}
-
-			const exists = await playgroundClient
-				.fileExists(candidateNormalized)
-				.catch(() => false);
-			const existsDir = await playgroundClient
-				.isDir(candidateNormalized)
-				.catch(() => false);
-			if ((exists || existsDir) && candidateNormalized !== path) {
-				if (isPending) {
-					try {
-						const unique = await findAvailableName(
-							playgroundClient,
-							parent === '/' ? '/' : parent,
-							finalName
-						);
-						candidate = composePath(unique);
-					} catch (e) {
-						void e;
-					}
-				} else {
-					setRenamingPath(path);
-					return;
-				}
-			}
-
-			let candidateIsDir = pending?.type === 'folder';
-
-			try {
-				await playgroundClient.mv(path, candidate as any);
-				if (pending?.type === 'file') {
-					try {
-						const newContent =
-							await playgroundClient.readFileAsText(candidate);
-						dispatch(setCode(newContent));
-						dispatch(setCurrentPath(candidate));
-					} catch (e) {
-						void e;
-					}
-				} else if (!pending) {
-					const isDir = await playgroundClient
-						.isDir(candidate as any)
-						.catch(() => false);
-					candidateIsDir = isDir;
-					if (!isDir) {
-						try {
-							const newContent =
-								await playgroundClient.readFileAsText(
-									candidate
-								);
-							dispatch(setCode(newContent));
-							dispatch(setCurrentPath(candidate));
-						} catch {
-							// Ignore failure
-						}
-					} else if (currentPath === path) {
-						dispatch(setCurrentPath(candidate));
-					}
-				}
-				setForceSelectedPath(candidate);
-				setSelectedDirPath(
-					candidateIsDir ? candidate : dirnameSafe(candidate)
-				);
-			} catch {
-				if (isPending) {
-					try {
-						if (pending?.type === 'folder') {
-							await playgroundClient.rmdir(path, {
-								recursive: true,
-							} as any);
-						} else {
-							await playgroundClient.unlink(path);
-						}
-					} catch {
-						// Ignore failure
-					}
-				}
-			} finally {
-				pendingCreateRef.current = null;
-				setRenamingPath(null);
-			}
-		},
-		[playgroundClient, findAvailableName, dispatch, currentPath]
-	);
-
-	const handleRenameCancel = useCallback(
-		async (path: string) => {
-			const pending = pendingCreateRef.current;
-			setContextMenu(null);
-			if (!playgroundClient || pending?.tempPath !== path) {
-				setRenamingPath(null);
-				return;
-			}
-			try {
-				if (pending.type === 'folder') {
-					await playgroundClient.rmdir(path, {
-						recursive: true,
-					} as any);
-				} else {
-					await playgroundClient.unlink(path);
-				}
-			} catch (e) {
-				void e;
-			}
-			pendingCreateRef.current = null;
-			setRenamingPath(null);
-			setForceSelectedPath(null);
-			setSelectedDirPath((prev) => {
-				if (!prev) {
-					return prev;
-				}
-				const normalized = normalizeFsPath(path);
-				if (prev === normalized || prev.startsWith(`${normalized}/`)) {
-					return dirnameSafe(normalized);
-				}
-				return prev;
-			});
-		},
-		[playgroundClient]
-	);
-
-	const handleContextMenuRename = useCallback(
-		(path: string) => {
-			pendingCreateRef.current = null;
-			setContextMenu(null);
-			setRenamingPath(path);
-			setForceSelectedPath(path);
-			setSelectedDirPath(dirnameSafe(path));
-			ensureParentExpandedPath(path);
-		},
-		[ensureParentExpandedPath]
-	);
-
-	const handleDeletePath = useCallback(
-		async (targetPath: string, type: 'file' | 'folder') => {
-			if (!playgroundClient) {
-				return;
-			}
-			const normalized = normalizeFsPath(targetPath);
-			setContextMenu(null);
-			try {
-				if (type === 'folder') {
-					await playgroundClient.rmdir(normalized, {
-						recursive: true,
-					} as any);
-				} else {
-					await playgroundClient.unlink(normalized);
-				}
-			} catch {
-				// Ignore failure
-			}
-			if (pendingCreateRef.current?.tempPath === normalized) {
-				pendingCreateRef.current = null;
-			}
+	const handleAfterDelete = useCallback(
+		(path: string, type: 'file' | 'folder') => {
+			const normalized = normalizeFsPath(path);
 			if (
 				currentPath &&
 				(currentPath === normalized ||
@@ -502,52 +161,27 @@ export const Layout = () => {
 			setRenamingPath(null);
 			setForceSelectedPath(dirnameSafe(normalized));
 		},
-		[playgroundClient, currentPath, selectedDirPath, dispatch]
+		[currentPath, selectedDirPath, dispatch]
 	);
 
-	const handleDownloadPath = useCallback(
-		async (targetPath: string) => {
-			if (!playgroundClient) {
-				return;
-			}
-			setContextMenu(null);
+	const handleAfterRename = useCallback(
+		async (oldPath: string, newPath: string, type: 'file' | 'folder') => {
+			if (!playgroundClient) return;
 			try {
-				const content = await playgroundClient.readFileAsText(
-					targetPath
-				);
-				const blob = new Blob([content], {
-					type: 'text/plain;charset=utf-8',
-				});
-				const url = URL.createObjectURL(blob);
-				const link = document.createElement('a');
-				link.href = url;
-				link.download =
-					normalizeFsPath(targetPath).split('/').pop() || 'template';
-				document.body.appendChild(link);
-				link.click();
-				link.remove();
-				URL.revokeObjectURL(url);
-			} catch {
-				// Ignore failure
+				if (type === 'file') {
+					const newContent = await playgroundClient.readFileAsText(
+						newPath
+					);
+					dispatch(setCode(newContent));
+					dispatch(setCurrentPath(newPath));
+				} else if (currentPath === oldPath) {
+					dispatch(setCurrentPath(newPath));
+				}
+			} catch (e) {
+				void e;
 			}
 		},
-		[playgroundClient]
-	);
-
-	const handleTreeContextMenu = useCallback(
-		(event: React.MouseEvent, node: FileNode, path: string) => {
-			event.preventDefault();
-			event.stopPropagation();
-			const absolute = normalizeFsPath(path);
-			setRenamingPath(null);
-			setContextMenu({
-				path: absolute,
-				type: node.type,
-				x: event.clientX,
-				y: event.clientY,
-			});
-		},
-		[renamingPath]
+		[playgroundClient, currentPath, dispatch]
 	);
 
 	const treeInitialPath = normalizeFsPath(
@@ -557,19 +191,6 @@ export const Layout = () => {
 			(currentPath ? dirnameSafe(currentPath) : DEFAULT_WORKSPACE_DIR)
 	);
 
-	const contextMenuStyle = contextMenu
-		? {
-				left:
-					typeof window === 'undefined'
-						? contextMenu.x
-						: Math.min(contextMenu.x, window.innerWidth - 200),
-				top:
-					typeof window === 'undefined'
-						? contextMenu.y
-						: Math.min(contextMenu.y, window.innerHeight - 140),
-		  }
-		: undefined;
-
 	return (
 		<div id="php-playground-react-root" className={styles.root}>
 			<PlaygroundManager />
@@ -594,7 +215,9 @@ export const Layout = () => {
 												className={
 													styles.fileExplorerButton
 												}
-												onClick={handleCreateFile}
+												onClick={() =>
+													treeRef.current?.createFile()
+												}
 												title="Create new file"
 												disabled={!playgroundClient}
 											>
@@ -604,7 +227,9 @@ export const Layout = () => {
 												className={
 													styles.fileExplorerButton
 												}
-												onClick={handleCreateDirectory}
+												onClick={() =>
+													treeRef.current?.createFolder()
+												}
 												title="Create new folder"
 												disabled={!playgroundClient}
 											>
@@ -614,6 +239,7 @@ export const Layout = () => {
 									</div>
 									<div className={styles.fileExplorerTree}>
 										<PlaygroundFilePickerTree
+											ref={treeRef}
 											playgroundClient={playgroundClient}
 											root="/"
 											initialPath={treeInitialPath}
@@ -624,7 +250,6 @@ export const Layout = () => {
 												'/request',
 											]}
 											onSelect={async (path) => {
-												setContextMenu(null);
 												setForceSelectedPath(null);
 												if (
 													await playgroundClient.isDir(
@@ -721,11 +346,8 @@ export const Layout = () => {
 												}
 											}}
 											renamingPath={renamingPath}
-											onRename={handleRenameSubmit}
-											onRenameCancel={handleRenameCancel}
-											onContextMenu={
-												handleTreeContextMenu
-											}
+											onAfterDelete={handleAfterDelete}
+											onAfterRename={handleAfterRename}
 										/>
 									</div>
 								</div>
@@ -817,42 +439,6 @@ export const Layout = () => {
 				</Panel>
 			</PanelGroup>
 			<HelpModal isOpen={isHelpOpen} onRequestClose={handleCloseHelp} />
-			{contextMenu && contextMenuStyle && (
-				<div
-					className={styles.contextMenu}
-					style={contextMenuStyle}
-					onClick={(event) => event.stopPropagation()}
-					onContextMenu={(event) => event.preventDefault()}
-				>
-					<button
-						className={styles.contextMenuButton}
-						onClick={() =>
-							handleContextMenuRename(contextMenu.path)
-						}
-					>
-						Rename
-					</button>
-					<button
-						className={clsx(
-							styles.contextMenuButton,
-							styles.contextMenuButtonDanger
-						)}
-						onClick={() =>
-							handleDeletePath(contextMenu.path, contextMenu.type)
-						}
-					>
-						Delete
-					</button>
-					{contextMenu.type === 'file' && (
-						<button
-							className={styles.contextMenuButton}
-							onClick={() => handleDownloadPath(contextMenu.path)}
-						>
-							Download
-						</button>
-					)}
-				</div>
-			)}
 		</div>
 	);
 };
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 4618ac627e..3956b90ded 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -1,8 +1,17 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import type { FileNode } from '@wp-playground/components';
 import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
 import type { PlaygroundClient } from '@wp-playground/client';
+import styles from './layout.module.css';
 
 function normalizePath(path: string) {
 	if (!path) return '/';
@@ -63,17 +72,12 @@ function corePathToAbsolute(corePath: string, normalizedRoot: string) {
 	return normalizedRoot;
 }
 
-export default function PlaygroundFilePickerTree({
-	root = '/wordpress',
-	initialPath,
-	excludePaths,
-	onSelect,
-	playgroundClient,
-	renamingPath,
-	onRename,
-	onRenameCancel,
-	onContextMenu,
-}: {
+export interface PlaygroundFilePickerTreeRef {
+	createFile: () => void;
+	createFolder: () => void;
+}
+
+export type PlaygroundFilePickerTreeProps = {
 	root?: string;
 	initialPath?: string;
 	excludePaths?: string[];
@@ -87,7 +91,45 @@ export default function PlaygroundFilePickerTree({
 		node: FileNode,
 		path: string
 	) => void;
-}) {
+	onAfterDelete?: (path: string, type: 'file' | 'folder') => void;
+	onAfterRename?: (
+		oldPath: string,
+		newPath: string,
+		type: 'file' | 'folder'
+	) => void;
+};
+
+const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
+
+const isValidNameSegment = (name: string) => {
+	if (!name) {
+		return false;
+	}
+	if (name === '.' || name === '..') {
+		return false;
+	}
+	return !/[\\/]/.test(name);
+};
+
+const PlaygroundFilePickerTree = forwardRef<
+	PlaygroundFilePickerTreeRef,
+	PlaygroundFilePickerTreeProps
+>(function PlaygroundFilePickerTree(
+	{
+		root = '/wordpress',
+		initialPath,
+		excludePaths,
+		onSelect,
+		playgroundClient,
+		renamingPath,
+		onRename,
+		onRenameCancel,
+		onContextMenu,
+		onAfterDelete,
+		onAfterRename,
+	},
+	ref
+) {
 	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
 	const rootName = useMemo(
 		() => getBaseName(normalizedRoot),
@@ -96,6 +138,23 @@ export default function PlaygroundFilePickerTree({
 
 	const [files, setFiles] = useState<FileNode[]>([]);
 	const [isRootLoading, setIsRootLoading] = useState(false);
+	const [contextMenu, setContextMenu] = useState<{
+		path: string;
+		type: 'file' | 'folder';
+		x: number;
+		y: number;
+	} | null>(null);
+	const [localRenamingPath, setLocalRenamingPath] = useState<string | null>(
+		null
+	);
+	const [refreshToken, setRefreshToken] = useState(0);
+	const pendingCreateRef = useRef<{
+		type: 'file' | 'folder';
+		tempPath: string;
+	} | null>(null);
+	const [lastSelectedPath, setLastSelectedPath] = useState<string | null>(
+		initialPath ?? DEFAULT_WORKSPACE_DIR
+	);
 
 	const getDirname = useCallback((path: string) => {
 		const p = normalizePath(path);
@@ -169,7 +228,6 @@ export default function PlaygroundFilePickerTree({
 		rootName,
 		playgroundClient,
 		JSON.stringify(excludePaths),
-		prioritizeRenaming,
 	]);
 
 	const coreInitialPath = useMemo(() => {
@@ -178,6 +236,27 @@ export default function PlaygroundFilePickerTree({
 			: undefined;
 	}, [initialPath, normalizedRoot]);
 
+	// Dismiss context menu on outside interactions / ESC key
+	useEffect(() => {
+		if (!contextMenu) {
+			return;
+		}
+		const handleClose = () => setContextMenu(null);
+		const handleKey = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				handleClose();
+			}
+		};
+		window.addEventListener('click', handleClose);
+		window.addEventListener('contextmenu', handleClose);
+		window.addEventListener('keydown', handleKey);
+		return () => {
+			window.removeEventListener('click', handleClose);
+			window.removeEventListener('contextmenu', handleClose);
+			window.removeEventListener('keydown', handleKey);
+		};
+	}, [contextMenu]);
+
 	const handleLoadChildren = useCallback(
 		async (corePath: string) => {
 			if (!playgroundClient) return [] as FileNode[];
@@ -197,44 +276,389 @@ export default function PlaygroundFilePickerTree({
 
 	const handleSelect = useCallback(
 		(path: string) => {
-			if (onSelect) onSelect(normalizePath(path));
+			const normalized = normalizePath(path);
+			setLastSelectedPath(normalized);
+			if (onSelect) onSelect(normalized);
 		},
 		[onSelect]
 	);
 
-	return (
-		<CoreFilePickerTree
-			files={files}
-			initialPath={coreInitialPath}
-			onSelect={handleSelect}
-			onLoadChildren={handleLoadChildren}
-			isLoading={normalizedRoot === '/' && isRootLoading}
-			autoFocus={false}
-			renamingPath={
-				renamingPath
-					? toCorePath(renamingPath, normalizedRoot)
-					: undefined
+	const effectiveRenamingPath = useMemo(() => {
+		return renamingPath ?? localRenamingPath ?? undefined;
+	}, [renamingPath, localRenamingPath]);
+
+	const handleInternalContextMenu = useCallback(
+		(event: React.MouseEvent, node: FileNode, corePath: string) => {
+			event.preventDefault();
+			event.stopPropagation();
+			const absPath = corePathToAbsolute(corePath, normalizedRoot);
+			setLocalRenamingPath(null);
+			setContextMenu({
+				path: absPath,
+				type: node.type,
+				x: event.clientX,
+				y: event.clientY,
+			});
+			if (onContextMenu) {
+				onContextMenu(event, node, absPath);
 			}
-			onRename={(corePath, newName) => {
-				if (!onRename) return;
-				const absPath = corePathToAbsolute(corePath, normalizedRoot);
-				onRename(absPath, newName);
-			}}
-			onRenameCancel={(corePath) => {
-				if (!onRenameCancel) return;
-				const absPath = corePathToAbsolute(corePath, normalizedRoot);
-				onRenameCancel(absPath);
-			}}
-			onContextMenu={
-				onContextMenu
-					? (event, node, corePath) =>
-							onContextMenu(
-								event,
-								node as FileNode,
-								corePathToAbsolute(corePath, normalizedRoot)
-							)
-					: undefined
+		},
+		[normalizedRoot, onContextMenu]
+	);
+
+	const handleContextMenuRename = useCallback((targetPath: string) => {
+		setContextMenu(null);
+		setLocalRenamingPath(targetPath);
+	}, []);
+
+	// dirname helper not needed in this component
+
+	const findAvailableName = useCallback(
+		async (client: PlaygroundClient, baseDir: string, baseName: string) => {
+			let name = baseName;
+			let counter = 0;
+			const splitExt = (n: string) => {
+				const dot = n.lastIndexOf('.');
+				if (dot > 0) {
+					return { stem: n.slice(0, dot), ext: n.slice(dot) };
+				}
+				return { stem: n, ext: '' };
+			};
+			const prefix = baseDir === '/' ? '' : baseDir;
+			while (
+				(await client
+					.fileExists(`${prefix}/${name}`)
+					.catch(() => false)) ||
+				(await client.isDir(`${prefix}/${name}`).catch(() => false))
+			) {
+				counter += 1;
+				const { stem, ext } = splitExt(baseName);
+				name = `${stem} (${counter})${ext}`;
 			}
-		/>
+			return name;
+		},
+		[]
 	);
-}
+
+	const resolveBaseDir = useCallback(() => {
+		if (!lastSelectedPath) return DEFAULT_WORKSPACE_DIR;
+		// If selection is a folder, use it; otherwise use its dirname
+		return lastSelectedPath;
+	}, [lastSelectedPath]);
+
+	const handleCreateFile = useCallback(async () => {
+		if (!playgroundClient) {
+			return;
+		}
+		const baseDir = resolveBaseDir() || DEFAULT_WORKSPACE_DIR;
+		const normalizedBase = normalizePath(baseDir);
+		try {
+			const name = await findAvailableName(
+				playgroundClient,
+				normalizedBase,
+				'untitled.php'
+			);
+			const tempPath = `${
+				normalizedBase === '/' ? '' : normalizedBase
+			}/${name}`;
+			await playgroundClient.writeFile(tempPath, '');
+			pendingCreateRef.current = { type: 'file', tempPath };
+			setLocalRenamingPath(tempPath);
+			setLastSelectedPath(tempPath);
+			setRefreshToken((t) => t + 1);
+		} catch (e) {
+			void e;
+		}
+	}, [playgroundClient, resolveBaseDir, findAvailableName]);
+
+	const handleCreateDirectory = useCallback(async () => {
+		if (!playgroundClient) {
+			return;
+		}
+		const baseDir = resolveBaseDir() || DEFAULT_WORKSPACE_DIR;
+		const normalizedBase = normalizePath(baseDir);
+		try {
+			const name = await findAvailableName(
+				playgroundClient,
+				normalizedBase,
+				'New Folder'
+			);
+			const tempPath = `${
+				normalizedBase === '/' ? '' : normalizedBase
+			}/${name}`;
+			await playgroundClient.mkdir(tempPath);
+			pendingCreateRef.current = { type: 'folder', tempPath };
+			setLocalRenamingPath(tempPath);
+			setLastSelectedPath(tempPath);
+			setRefreshToken((t) => t + 1);
+		} catch (e) {
+			void e;
+		}
+	}, [playgroundClient, resolveBaseDir, findAvailableName]);
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			createFile: handleCreateFile,
+			createFolder: handleCreateDirectory,
+		}),
+		[handleCreateFile, handleCreateDirectory]
+	);
+
+	const handleDeletePath = useCallback(
+		async (targetPath: string, type: 'file' | 'folder') => {
+			if (!playgroundClient) {
+				return;
+			}
+			const normalized = normalizePath(targetPath);
+			setContextMenu(null);
+			try {
+				if (type === 'folder') {
+					await playgroundClient.rmdir(normalized, {
+						recursive: true,
+					} as any);
+				} else {
+					await playgroundClient.unlink(normalized);
+				}
+			} catch {
+				// Ignore failure
+			} finally {
+				setLocalRenamingPath(null);
+				setRefreshToken((t) => t + 1);
+				onAfterDelete?.(normalized, type);
+			}
+		},
+		[playgroundClient, onAfterDelete]
+	);
+
+	const handleDownloadPath = useCallback(
+		async (targetPath: string) => {
+			if (!playgroundClient) {
+				return;
+			}
+			setContextMenu(null);
+			try {
+				const content = await playgroundClient.readFileAsText(
+					targetPath
+				);
+				const blob = new Blob([content], {
+					type: 'text/plain;charset=utf-8',
+				});
+				const url = URL.createObjectURL(blob);
+				const link = document.createElement('a');
+				link.href = url;
+				link.download =
+					normalizePath(targetPath).split('/').pop() || 'download';
+				document.body.appendChild(link);
+				link.click();
+				link.remove();
+				URL.revokeObjectURL(url);
+			} catch {
+				// Ignore failure
+			}
+		},
+		[playgroundClient]
+	);
+
+	const contextMenuStyle = useMemo(() => {
+		if (!contextMenu)
+			return undefined as undefined | { left: number; top: number };
+		const left =
+			typeof window === 'undefined'
+				? contextMenu.x
+				: Math.min(contextMenu.x, window.innerWidth - 200);
+		const top =
+			typeof window === 'undefined'
+				? contextMenu.y
+				: Math.min(contextMenu.y, window.innerHeight - 140);
+		return { left, top };
+	}, [contextMenu]);
+
+	return (
+		<>
+			<CoreFilePickerTree
+				key={refreshToken}
+				files={files}
+				initialPath={coreInitialPath}
+				onSelect={handleSelect}
+				onLoadChildren={handleLoadChildren}
+				isLoading={normalizedRoot === '/' && isRootLoading}
+				autoFocus={false}
+				renamingPath={
+					effectiveRenamingPath
+						? toCorePath(effectiveRenamingPath, normalizedRoot)
+						: undefined
+				}
+				onRename={async (corePath, newName) => {
+					if (!playgroundClient) return;
+					const absPath = corePathToAbsolute(
+						corePath,
+						normalizedRoot
+					);
+					const pending = pendingCreateRef.current;
+					const isPending = pending?.tempPath === absPath;
+					const parent = getDirname(absPath);
+					const sanitized = (newName || '').trim();
+					if (!isValidNameSegment(sanitized)) {
+						if (isPending) {
+							try {
+								if (pending.type === 'folder') {
+									await playgroundClient.rmdir(absPath, {
+										recursive: true,
+									} as any);
+								} else {
+									await playgroundClient.unlink(absPath);
+								}
+							} catch (e) {
+								void e;
+							}
+							pendingCreateRef.current = null;
+						}
+						setLocalRenamingPath(isPending ? null : absPath);
+						return;
+					}
+
+					const composePath = (name: string) =>
+						parent === '/' ? `/${name}` : `${parent}/${name}`;
+					const finalName = sanitized;
+					let candidate = composePath(finalName);
+					const candidateNormalized = normalizePath(candidate);
+					if (candidateNormalized === absPath) {
+						setLocalRenamingPath(null);
+						if (isPending) {
+							pendingCreateRef.current = null;
+						}
+						setLastSelectedPath(candidateNormalized);
+						return;
+					}
+
+					const exists = await playgroundClient
+						.fileExists(candidateNormalized)
+						.catch(() => false);
+					const existsDir = await playgroundClient
+						.isDir(candidateNormalized)
+						.catch(() => false);
+					if (
+						(exists || existsDir) &&
+						candidateNormalized !== absPath
+					) {
+						if (isPending) {
+							try {
+								const unique = await findAvailableName(
+									playgroundClient,
+									parent === '/' ? '/' : parent,
+									finalName
+								);
+								candidate = composePath(unique);
+							} catch (e) {
+								void e;
+							}
+						} else {
+							setLocalRenamingPath(absPath);
+							return;
+						}
+					}
+
+					let candidateIsDir = pending?.type === 'folder';
+					try {
+						await playgroundClient.mv(absPath, candidate as any);
+						if (!pending) {
+							const isDir = await playgroundClient
+								.isDir(candidate as any)
+								.catch(() => false);
+							candidateIsDir = isDir;
+						}
+						setLastSelectedPath(candidate);
+						onAfterRename?.(
+							absPath,
+							candidate,
+							candidateIsDir ? 'folder' : 'file'
+						);
+					} catch {
+						if (isPending) {
+							try {
+								if (pending?.type === 'folder') {
+									await playgroundClient.rmdir(absPath, {
+										recursive: true,
+									} as any);
+								} else {
+									await playgroundClient.unlink(absPath);
+								}
+							} catch {
+								// Ignore failure
+							}
+						}
+					} finally {
+						pendingCreateRef.current = null;
+						setLocalRenamingPath(null);
+						setRefreshToken((t) => t + 1);
+					}
+				}}
+				onRenameCancel={async (corePath) => {
+					const absPath = corePathToAbsolute(
+						corePath,
+						normalizedRoot
+					);
+					const pending = pendingCreateRef.current;
+					if (!playgroundClient || pending?.tempPath !== absPath) {
+						onRenameCancel?.(absPath);
+						setLocalRenamingPath((prev) =>
+							prev === absPath ? null : prev
+						);
+						return;
+					}
+					try {
+						if (pending.type === 'folder') {
+							await playgroundClient.rmdir(absPath, {
+								recursive: true,
+							} as any);
+						} else {
+							await playgroundClient.unlink(absPath);
+						}
+					} catch (e) {
+						void e;
+					}
+					pendingCreateRef.current = null;
+					setLocalRenamingPath(null);
+					setRefreshToken((t) => t + 1);
+				}}
+				onContextMenu={handleInternalContextMenu}
+			/>
+			{contextMenu && contextMenuStyle && (
+				<div
+					className={styles.contextMenu}
+					style={contextMenuStyle}
+					onClick={(event) => event.stopPropagation()}
+					onContextMenu={(event) => event.preventDefault()}
+				>
+					<button
+						className={styles.contextMenuButton}
+						onClick={() =>
+							handleContextMenuRename(contextMenu.path)
+						}
+					>
+						Rename
+					</button>
+					<button
+						className={`${styles.contextMenuButton} ${styles.contextMenuButtonDanger}`}
+						onClick={() =>
+							handleDeletePath(contextMenu.path, contextMenu.type)
+						}
+					>
+						Delete
+					</button>
+					{contextMenu.type === 'file' && (
+						<button
+							className={styles.contextMenuButton}
+							onClick={() => handleDownloadPath(contextMenu.path)}
+						>
+							Download
+						</button>
+					)}
+				</div>
+			)}
+		</>
+	);
+});
+
+export default PlaygroundFilePickerTree;
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index b960e7f815..f4b7730169 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -2,13 +2,13 @@
  * Follow-up work:
  *
  * * Files explorer
- *    * Detect when a binary file is opened, show a special message "binary file. can't
- *      edit (download)"
- *    * Create and delete files and directories. "Refresh" button to refresh the directory
- *      tree – OR auto-refresh every second or five seconds.
+ *    * "Refresh" button to refresh the directory tree – OR auto-refresh every ~five seconds.
  *    * Download file / directory action
  *    * Bug – sometimes collapsing a directory = children are not visible after reopening.
- *      Is it an actual bug or just a faulty vite hot reloader?
+ *      It an actual bug, not a faulty vite hot reloader!
+ *    * ✅ Detect when a binary file is opened, show a special message "binary file. can't
+ *         edit (download)"
+ *    * ✅ Create and delete files and directories.
  *    * ✅ CSS papercuts, e.g. dark font on dark background for active hovered selected files.
  *    * ✅ Improve visual feedback when loading files (don't replace filename with loader).
  *    * ✅ Don't re-render (and show the loading indicator) when not needed.
@@ -17,7 +17,7 @@
  *    * ✅ Ensure it's scrollable with overflow: auto
  *    * ✅ Initialization UX – show the expanded path right away
  *    * ✅ Separate "focus" from "open" actions so that I can browse files
- *      without editing them
+ *         without editing them
  * * Editor
  *    * ✅ Save changes when editing files other than code.php
  *    * ✅ Display breadcrumbs of the currently open file above the editor?

From 70e633349aca7e0d254a6957e7bab4bb64e878d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 23:57:58 +0200
Subject: [PATCH 18/41] reorganize the code

---
 .../php-playground/components/HelpModal.tsx   |  13 +-
 .../src/php-playground/components/Layout.tsx  | 301 ++----------------
 .../components/PlaygroundFilePickerTree.tsx   |  47 ++-
 3 files changed, 61 insertions(+), 300 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/HelpModal.tsx b/packages/playground/website/src/php-playground/components/HelpModal.tsx
index 3434b3f068..68bcbd1b78 100644
--- a/packages/playground/website/src/php-playground/components/HelpModal.tsx
+++ b/packages/playground/website/src/php-playground/components/HelpModal.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useEffect } from 'react';
+import { type MouseEvent, useEffect } from 'react';
 import clsx from 'clsx';
 
 import styles from './layout.module.css';
@@ -38,6 +38,17 @@ export const HelpModal = ({ isOpen, onRequestClose }: HelpModalProps) => {
 		};
 	}, [isOpen, onRequestClose]);
 
+	useEffect(() => {
+		if (!isOpen) {
+			return;
+		}
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+		return () => {
+			document.body.style.overflow = previousOverflow;
+		};
+	}, [isOpen]);
+
 	return (
 		<div
 			id="helpModal"
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 9e7bc1e93e..8e3973f054 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -1,89 +1,30 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import type { ImperativePanelHandle } from 'react-resizable-panels';
-import type { PlaygroundClient } from '@wp-playground/client';
 
 import styles from './layout.module.css';
 import { Controls } from './Controls';
 import { EditorHost } from './EditorHost';
 import { HelpModal } from './HelpModal';
-import PlaygroundFilePickerTree, {
-	type PlaygroundFilePickerTreeRef,
-} from './PlaygroundFilePickerTree';
+import FileExplorer from './FileExplorer';
 import { PlaygroundManager } from './PlaygroundManager';
 import { Terminal } from './Terminal';
-import { useAppDispatch, useAppSelector } from '../hooks';
-import { setCode, setCurrentPath } from '../store';
+import { useAppSelector } from '../hooks';
 import AddressBar from '../../components/address-bar';
 
 const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
-const MAX_INLINE_BYTES = 1024 * 1024; // 1MB
-
-const normalizeFsPath = (path: string) => {
-	if (!path) {
-		return '/';
-	}
-	let normalized = path.replace(/\\+/g, '/');
-	if (!normalized.startsWith('/')) {
-		normalized = `/${normalized}`;
-	}
-	normalized = normalized.replace(/\/{2,}/g, '/');
-	if (normalized.length > 1 && normalized.endsWith('/')) {
-		normalized = normalized.slice(0, -1);
-	}
-	return normalized || '/';
-};
-
-const dirnameSafe = (path: string) => {
-	const normalized = normalizeFsPath(path);
-	if (normalized === '/') {
-		return '/';
-	}
-	const index = normalized.lastIndexOf('/');
-	return index <= 0 ? '/' : normalized.slice(0, index);
-};
-
-// removed legacy prompt-based helpers in favor of inline rename flow
-
-// validation handled in tree component
-
-const isProbablyTextBuffer = (buffer: Uint8Array) => {
-	// Fast null-byte check
-	const len = buffer.byteLength;
-	for (let i = 0; i < Math.min(len, 4096); i++) {
-		if (buffer[i] === 0) {
-			return false;
-		}
-	}
-	// UTF-8 validation
-	try {
-		new TextDecoder('utf-8', { fatal: true }).decode(buffer);
-		return true;
-	} catch {
-		return false;
-	}
-};
-
-const createDownloadUrl = (data: Uint8Array, filename: string) => {
-	const blob = new Blob([data]);
-	const url = URL.createObjectURL(blob);
-	// Best-effort cleanup later
-	setTimeout(() => URL.revokeObjectURL(url), 60_000);
-	return { url, filename };
-};
 
 export const Layout = () => {
 	const [isHelpOpen, setHelpOpen] = useState(false);
 	const [isTerminalCollapsed, setTerminalCollapsed] = useState(false);
 	const [terminalResizeToken, setTerminalResizeToken] = useState(0);
 	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
-	const treeRef = useRef<PlaygroundFilePickerTreeRef | null>(null);
 	const playgroundClient = useAppSelector((state) => state.playground.client);
 	const bootStatus = useAppSelector((state) => state.playground.bootStatus);
 	const currentPath = useAppSelector((state) => state.playground.currentPath);
 	const [previewUrl, setPreviewUrl] = useState('');
-	const [renamingPath, setRenamingPath] = useState<string | null>(null);
 	const [selectedDirPath, setSelectedDirPath] = useState<string | null>(
 		DEFAULT_WORKSPACE_DIR
 	);
@@ -91,8 +32,6 @@ export const Layout = () => {
 		null
 	);
 
-	const dispatch = useAppDispatch();
-
 	useEffect(() => {
 		const previousTitle = document.title;
 		document.title = 'WordPress PHP Playground';
@@ -101,17 +40,6 @@ export const Layout = () => {
 		};
 	}, []);
 
-	useEffect(() => {
-		if (!isHelpOpen) {
-			return;
-		}
-		const previousOverflow = document.body.style.overflow;
-		document.body.style.overflow = 'hidden';
-		return () => {
-			document.body.style.overflow = previousOverflow;
-		};
-	}, [isHelpOpen]);
-
 	useEffect(() => {
 		if (!playgroundClient) {
 			return;
@@ -137,59 +65,7 @@ export const Layout = () => {
 		};
 	}, [playgroundClient]);
 
-	const handleOpenHelp = useCallback(() => setHelpOpen(true), []);
-	const handleCloseHelp = useCallback(() => setHelpOpen(false), []);
-
-	const handleAfterDelete = useCallback(
-		(path: string, type: 'file' | 'folder') => {
-			const normalized = normalizeFsPath(path);
-			if (
-				currentPath &&
-				(currentPath === normalized ||
-					currentPath.startsWith(`${normalized}/`))
-			) {
-				dispatch(setCode(''));
-				dispatch(setCurrentPath(null));
-			}
-			if (
-				selectedDirPath &&
-				(selectedDirPath === normalized ||
-					selectedDirPath.startsWith(`${normalized}/`))
-			) {
-				setSelectedDirPath(dirnameSafe(normalized));
-			}
-			setRenamingPath(null);
-			setForceSelectedPath(dirnameSafe(normalized));
-		},
-		[currentPath, selectedDirPath, dispatch]
-	);
-
-	const handleAfterRename = useCallback(
-		async (oldPath: string, newPath: string, type: 'file' | 'folder') => {
-			if (!playgroundClient) return;
-			try {
-				if (type === 'file') {
-					const newContent = await playgroundClient.readFileAsText(
-						newPath
-					);
-					dispatch(setCode(newContent));
-					dispatch(setCurrentPath(newPath));
-				} else if (currentPath === oldPath) {
-					dispatch(setCurrentPath(newPath));
-				}
-			} catch (e) {
-				void e;
-			}
-		},
-		[playgroundClient, currentPath, dispatch]
-	);
-
-	const treeInitialPath = normalizeFsPath(
-		renamingPath ??
-			forceSelectedPath ??
-			selectedDirPath ??
-			(currentPath ? dirnameSafe(currentPath) : DEFAULT_WORKSPACE_DIR)
-	);
+	// treeInitialPath is computed within FileExplorer
 
 	return (
 		<div id="php-playground-react-root" className={styles.root}>
@@ -199,158 +75,14 @@ export const Layout = () => {
 					<Panel minSize={5} collapsible>
 						<div className={styles.editorPane}>
 							{bootStatus === 'ready' && playgroundClient ? (
-								<div className={styles.fileExplorerContainer}>
-									<div className={styles.fileExplorerHeader}>
-										<span
-											className={styles.fileExplorerTitle}
-										>
-											Files
-										</span>
-										<div
-											className={
-												styles.fileExplorerActions
-											}
-										>
-											<button
-												className={
-													styles.fileExplorerButton
-												}
-												onClick={() =>
-													treeRef.current?.createFile()
-												}
-												title="Create new file"
-												disabled={!playgroundClient}
-											>
-												New File
-											</button>
-											<button
-												className={
-													styles.fileExplorerButton
-												}
-												onClick={() =>
-													treeRef.current?.createFolder()
-												}
-												title="Create new folder"
-												disabled={!playgroundClient}
-											>
-												New Folder
-											</button>
-										</div>
-									</div>
-									<div className={styles.fileExplorerTree}>
-										<PlaygroundFilePickerTree
-											ref={treeRef}
-											playgroundClient={playgroundClient}
-											root="/"
-											initialPath={treeInitialPath}
-											excludePaths={[
-												'/dev',
-												'/internal',
-												'/proc',
-												'/request',
-											]}
-											onSelect={async (path) => {
-												setForceSelectedPath(null);
-												if (
-													await playgroundClient.isDir(
-														path
-													)
-												) {
-													setSelectedDirPath(path);
-													return;
-												}
-												try {
-													const data =
-														await playgroundClient.readFileAsBuffer(
-															path
-														);
-													const size =
-														data.byteLength;
-													if (
-														size > MAX_INLINE_BYTES
-													) {
-														const {
-															url,
-															filename,
-														} = createDownloadUrl(
-															data,
-															path
-																.split('/')
-																.pop() ||
-																'download'
-														);
-														dispatch(
-															setCode(
-																`File too large to open (>1MB)\nDownload: ${url}\nFilename: ${filename}`
-															)
-														);
-														dispatch(
-															setCurrentPath(null)
-														);
-														setSelectedDirPath(
-															dirnameSafe(path)
-														);
-														return;
-													}
-													if (
-														!isProbablyTextBuffer(
-															data
-														)
-													) {
-														const {
-															url,
-															filename,
-														} = createDownloadUrl(
-															data,
-															path
-																.split('/')
-																.pop() ||
-																'download'
-														);
-														dispatch(
-															setCode(
-																`binary file. can't edit (download): ${url}\nFilename: ${filename}`
-															)
-														);
-														dispatch(
-															setCurrentPath(null)
-														);
-														setSelectedDirPath(
-															dirnameSafe(path)
-														);
-														return;
-													}
-													const text =
-														new TextDecoder(
-															'utf-8'
-														).decode(data);
-													dispatch(setCode(text));
-													dispatch(
-														setCurrentPath(path)
-													);
-													setSelectedDirPath(
-														dirnameSafe(path)
-													);
-												} catch {
-													dispatch(
-														setCode(
-															'Could not open file'
-														)
-													);
-													dispatch(
-														setCurrentPath(null)
-													);
-													setSelectedDirPath(
-														dirnameSafe(path)
-													);
-												}
-											}}
-											renamingPath={renamingPath}
-											onAfterDelete={handleAfterDelete}
-											onAfterRename={handleAfterRename}
-										/>
-									</div>
-								</div>
+								<FileExplorer
+									playgroundClient={playgroundClient}
+									currentPath={currentPath}
+									selectedDirPath={selectedDirPath}
+									setSelectedDirPath={setSelectedDirPath}
+									forceSelectedPath={forceSelectedPath}
+									setForceSelectedPath={setForceSelectedPath}
+								/>
 							) : null}
 						</div>
 					</Panel>
@@ -358,7 +90,7 @@ export const Layout = () => {
 				</>
 				<Panel minSize={40}>
 					<div className={styles.editorPane}>
-						<Controls onHelpClick={handleOpenHelp} />
+						<Controls onHelpClick={() => setHelpOpen(true)} />
 						<PanelGroup
 							direction="vertical"
 							className={styles.editorSplitGroup}
@@ -438,7 +170,10 @@ export const Layout = () => {
 					</div>
 				</Panel>
 			</PanelGroup>
-			<HelpModal isOpen={isHelpOpen} onRequestClose={handleCloseHelp} />
+			<HelpModal
+				isOpen={isHelpOpen}
+				onRequestClose={() => setHelpOpen(false)}
+			/>
 		</div>
 	);
 };
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 3956b90ded..d006aae818 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -12,6 +12,8 @@ import type { FileNode } from '@wp-playground/components';
 import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
 import type { PlaygroundClient } from '@wp-playground/client';
 import styles from './layout.module.css';
+import { useAppDispatch, useAppSelector } from '../hooks';
+import { setCode, setCurrentPath } from '../store';
 
 function normalizePath(path: string) {
 	if (!path) return '/';
@@ -91,12 +93,6 @@ export type PlaygroundFilePickerTreeProps = {
 		node: FileNode,
 		path: string
 	) => void;
-	onAfterDelete?: (path: string, type: 'file' | 'folder') => void;
-	onAfterRename?: (
-		oldPath: string,
-		newPath: string,
-		type: 'file' | 'folder'
-	) => void;
 };
 
 const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
@@ -122,11 +118,8 @@ const PlaygroundFilePickerTree = forwardRef<
 		onSelect,
 		playgroundClient,
 		renamingPath,
-		onRename,
 		onRenameCancel,
 		onContextMenu,
-		onAfterDelete,
-		onAfterRename,
 	},
 	ref
 ) {
@@ -155,6 +148,8 @@ const PlaygroundFilePickerTree = forwardRef<
 	const [lastSelectedPath, setLastSelectedPath] = useState<string | null>(
 		initialPath ?? DEFAULT_WORKSPACE_DIR
 	);
+	const dispatch = useAppDispatch();
+	const currentPath = useAppSelector((state) => state.playground.currentPath);
 
 	const getDirname = useCallback((path: string) => {
 		const p = normalizePath(path);
@@ -425,10 +420,18 @@ const PlaygroundFilePickerTree = forwardRef<
 			} finally {
 				setLocalRenamingPath(null);
 				setRefreshToken((t) => t + 1);
-				onAfterDelete?.(normalized, type);
+				// Clear editor if deleted current file or a parent directory
+				if (
+					currentPath &&
+					(currentPath === normalized ||
+						currentPath.startsWith(`${normalized}/`))
+				) {
+					dispatch(setCode(''));
+					dispatch(setCurrentPath(null));
+				}
 			}
 		},
-		[playgroundClient, onAfterDelete]
+		[playgroundClient, currentPath, dispatch]
 	);
 
 	const handleDownloadPath = useCallback(
@@ -569,11 +572,23 @@ const PlaygroundFilePickerTree = forwardRef<
 							candidateIsDir = isDir;
 						}
 						setLastSelectedPath(candidate);
-						onAfterRename?.(
-							absPath,
-							candidate,
-							candidateIsDir ? 'folder' : 'file'
-						);
+						// Update editor state if needed
+						if (candidateIsDir) {
+							if (currentPath === absPath) {
+								dispatch(setCurrentPath(candidate));
+							}
+						} else {
+							try {
+								const newContent =
+									await playgroundClient.readFileAsText(
+										candidate
+									);
+								dispatch(setCode(newContent));
+								dispatch(setCurrentPath(candidate));
+							} catch (e) {
+								void e;
+							}
+						}
 					} catch {
 						if (isPending) {
 							try {

From 9b945b077b19c1ed081937a12999d09a85220b8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Sun, 28 Sep 2025 23:58:30 +0200
Subject: [PATCH 19/41] reorganize the code

---
 .../components/FileExplorerSidebar.tsx        | 172 ++++++++++++++++++
 .../src/php-playground/components/Layout.tsx  |   4 +-
 2 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx

diff --git a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
new file mode 100644
index 0000000000..fa4ccfd571
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
@@ -0,0 +1,172 @@
+import React, { useMemo, useRef } from 'react';
+import styles from './layout.module.css';
+import PlaygroundFilePickerTree, {
+	type PlaygroundFilePickerTreeRef,
+} from './PlaygroundFilePickerTree';
+import type { PlaygroundClient } from '@wp-playground/client';
+import { useAppDispatch } from '../hooks';
+import { setCode, setCurrentPath } from '../store';
+
+const MAX_INLINE_BYTES = 1024 * 1024; // 1MB
+
+const normalizeFsPath = (path: string) => {
+	if (!path) {
+		return '/';
+	}
+	let normalized = path.replace(/\\+/g, '/');
+	if (!normalized.startsWith('/')) {
+		normalized = `/${normalized}`;
+	}
+	normalized = normalized.replace(/\/{2,}/g, '/');
+	if (normalized.length > 1 && normalized.endsWith('/')) {
+		normalized = normalized.slice(0, -1);
+	}
+	return normalized || '/';
+};
+
+const dirnameSafe = (path: string) => {
+	const normalized = normalizeFsPath(path);
+	if (normalized === '/') {
+		return '/';
+	}
+	const index = normalized.lastIndexOf('/');
+	return index <= 0 ? '/' : normalized.slice(0, index);
+};
+
+const isProbablyTextBuffer = (buffer: Uint8Array) => {
+	const len = buffer.byteLength;
+	for (let i = 0; i < Math.min(len, 4096); i++) {
+		if (buffer[i] === 0) {
+			return false;
+		}
+	}
+	try {
+		new TextDecoder('utf-8', { fatal: true }).decode(buffer);
+		return true;
+	} catch {
+		return false;
+	}
+};
+
+const createDownloadUrl = (data: Uint8Array, filename: string) => {
+	const blob = new Blob([data]);
+	const url = URL.createObjectURL(blob);
+	setTimeout(() => URL.revokeObjectURL(url), 60_000);
+	return { url, filename };
+};
+
+export default function FileExplorerSidebar({
+	playgroundClient,
+	currentPath,
+	selectedDirPath,
+	setSelectedDirPath,
+	forceSelectedPath,
+	setForceSelectedPath,
+}: {
+	playgroundClient: PlaygroundClient | null;
+	currentPath: string | null;
+	selectedDirPath: string | null;
+	setSelectedDirPath: React.Dispatch<React.SetStateAction<string | null>>;
+	forceSelectedPath: string | null;
+	setForceSelectedPath: React.Dispatch<React.SetStateAction<string | null>>;
+}) {
+	const treeRef = useRef<PlaygroundFilePickerTreeRef | null>(null);
+	const dispatch = useAppDispatch();
+
+	const treeInitialPath = useMemo(() => {
+		return normalizeFsPath(
+			forceSelectedPath ??
+				selectedDirPath ??
+				(currentPath
+					? dirnameSafe(currentPath)
+					: '/wordpress/workspace')
+		);
+	}, [forceSelectedPath, selectedDirPath, currentPath]);
+
+	return (
+		<div className={styles.fileExplorerContainer}>
+			<div className={styles.fileExplorerHeader}>
+				<span className={styles.fileExplorerTitle}>Files</span>
+				<div className={styles.fileExplorerActions}>
+					<button
+						className={styles.fileExplorerButton}
+						onClick={() => treeRef.current?.createFile()}
+						title="Create new file"
+						disabled={!playgroundClient}
+					>
+						New File
+					</button>
+					<button
+						className={styles.fileExplorerButton}
+						onClick={() => treeRef.current?.createFolder()}
+						title="Create new folder"
+						disabled={!playgroundClient}
+					>
+						New Folder
+					</button>
+				</div>
+			</div>
+			<div className={styles.fileExplorerTree}>
+				<PlaygroundFilePickerTree
+					ref={treeRef}
+					playgroundClient={playgroundClient ?? undefined}
+					root="/"
+					initialPath={treeInitialPath}
+					excludePaths={['/dev', '/internal', '/proc', '/request']}
+					onSelect={async (path) => {
+						setForceSelectedPath(null);
+						if (
+							playgroundClient &&
+							(await playgroundClient.isDir(path))
+						) {
+							setSelectedDirPath(path);
+							return;
+						}
+						if (!playgroundClient) return;
+						try {
+							const data =
+								await playgroundClient.readFileAsBuffer(path);
+							const size = data.byteLength;
+							if (size > MAX_INLINE_BYTES) {
+								const { url, filename } = createDownloadUrl(
+									data,
+									path.split('/').pop() || 'download'
+								);
+								dispatch(
+									setCode(
+										`File too large to open (>1MB)\nDownload: ${url}\nFilename: ${filename}`
+									)
+								);
+								dispatch(setCurrentPath(null));
+								setSelectedDirPath(dirnameSafe(path));
+								return;
+							}
+							if (!isProbablyTextBuffer(data)) {
+								const { url, filename } = createDownloadUrl(
+									data,
+									path.split('/').pop() || 'download'
+								);
+								dispatch(
+									setCode(
+										`binary file. can't edit (download): ${url}\nFilename: ${filename}`
+									)
+								);
+								dispatch(setCurrentPath(null));
+								setSelectedDirPath(dirnameSafe(path));
+								return;
+							}
+							const text = new TextDecoder('utf-8').decode(data);
+							dispatch(setCode(text));
+							dispatch(setCurrentPath(path));
+							setSelectedDirPath(dirnameSafe(path));
+						} catch {
+							dispatch(setCode('Could not open file'));
+							dispatch(setCurrentPath(null));
+							setSelectedDirPath(dirnameSafe(path));
+						}
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 8e3973f054..d36bdf8c8d 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -8,7 +8,7 @@ import styles from './layout.module.css';
 import { Controls } from './Controls';
 import { EditorHost } from './EditorHost';
 import { HelpModal } from './HelpModal';
-import FileExplorer from './FileExplorer';
+import FileExplorerSidebar from './FileExplorerSidebar';
 import { PlaygroundManager } from './PlaygroundManager';
 import { Terminal } from './Terminal';
 import { useAppSelector } from '../hooks';
@@ -75,7 +75,7 @@ export const Layout = () => {
 					<Panel minSize={5} collapsible>
 						<div className={styles.editorPane}>
 							{bootStatus === 'ready' && playgroundClient ? (
-								<FileExplorer
+								<FileExplorerSidebar
 									playgroundClient={playgroundClient}
 									currentPath={currentPath}
 									selectedDirPath={selectedDirPath}

From b30e0241c44fa8b36ca0997121803ed8b56aa260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 00:25:46 +0200
Subject: [PATCH 20/41] ux improvements around the file picker

---
 .../components/src/FilePickerTree/index.tsx   | 35 +++++++++++++
 .../src/php-playground/components/Layout.tsx  | 32 ++++++------
 .../components/PlaygroundFilePickerTree.tsx   | 49 +++++++++++++------
 .../website/src/php-playground/main.tsx       |  3 ++
 4 files changed, 86 insertions(+), 33 deletions(-)

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index b627ff6ccf..a8c20c6c21 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -34,6 +34,10 @@ export type FilePickerControlProps = {
 	onRename?: (path: string, newName: string) => void;
 	onRenameCancel?: (path: string) => void;
 	autoFocus?: boolean;
+	// Optional: invalidate a specific folder path cache and reload its children without remounting
+	invalidatePath?: string | null;
+	// Optional: change this to force re-invalidation even if the path is the same
+	invalidateKey?: number;
 };
 
 type ExpandedNodePaths = Record<string, boolean>;
@@ -52,6 +56,8 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	onRename,
 	onRenameCancel,
 	autoFocus = true,
+	invalidatePath = null,
+	invalidateKey = 0,
 }) => {
 	function buildPathChain(path: string): string[] {
 		if (!path) return [];
@@ -208,6 +214,35 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		[expandNode, loadChildrenForPath]
 	);
 
+	// Invalidate a folder's children and refresh them in-place without clearing first,
+	// preventing a brief empty state (visible flicker) during rename/delete/create.
+	useEffect(() => {
+		if (!invalidatePath) {
+			return;
+		}
+		// If it's expanded and we can load, refresh immediately without clearing cache
+		if (onLoadChildren && expanded[invalidatePath]) {
+			setLoadingPaths((prev) => ({
+				...prev,
+				[invalidatePath]: true,
+			}));
+			void onLoadChildren(invalidatePath)
+				.then((children) => {
+					setLazyChildren((prev) => ({
+						...prev,
+						[invalidatePath]: children ?? [],
+					}));
+				})
+				.finally(() => {
+					setLoadingPaths((prev) => {
+						const next = { ...prev };
+						delete next[invalidatePath as string];
+						return next;
+					});
+				});
+		}
+	}, [invalidatePath, invalidateKey, onLoadChildren, expanded]);
+
 	// Auto-expand and load the root when it is '/'
 	useEffect(() => {
 		if (!onLoadChildren || files.length === 0) {
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index d36bdf8c8d..82e05dacc0 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -71,23 +71,21 @@ export const Layout = () => {
 		<div id="php-playground-react-root" className={styles.root}>
 			<PlaygroundManager />
 			<PanelGroup direction="horizontal" id="app" className={styles.app}>
-				<>
-					<Panel minSize={5} collapsible>
-						<div className={styles.editorPane}>
-							{bootStatus === 'ready' && playgroundClient ? (
-								<FileExplorerSidebar
-									playgroundClient={playgroundClient}
-									currentPath={currentPath}
-									selectedDirPath={selectedDirPath}
-									setSelectedDirPath={setSelectedDirPath}
-									forceSelectedPath={forceSelectedPath}
-									setForceSelectedPath={setForceSelectedPath}
-								/>
-							) : null}
-						</div>
-					</Panel>
-					<PanelResizeHandle className={styles.horizontalHandle} />
-				</>
+				<Panel minSize={16} defaultSize={16} collapsible>
+					<div className={styles.editorPane}>
+						{bootStatus === 'ready' && playgroundClient ? (
+							<FileExplorerSidebar
+								playgroundClient={playgroundClient}
+								currentPath={currentPath}
+								selectedDirPath={selectedDirPath}
+								setSelectedDirPath={setSelectedDirPath}
+								forceSelectedPath={forceSelectedPath}
+								setForceSelectedPath={setForceSelectedPath}
+							/>
+						) : null}
+					</div>
+				</Panel>
+				<PanelResizeHandle className={styles.horizontalHandle} />
 				<Panel minSize={40}>
 					<div className={styles.editorPane}>
 						<Controls onHelpClick={() => setHelpOpen(true)} />
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index d006aae818..e08a475585 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -140,7 +140,8 @@ const PlaygroundFilePickerTree = forwardRef<
 	const [localRenamingPath, setLocalRenamingPath] = useState<string | null>(
 		null
 	);
-	const [refreshToken, setRefreshToken] = useState(0);
+	const [invalidatePath, setInvalidatePath] = useState<string | null>(null);
+	const [invalidateKey, setInvalidateKey] = useState(0);
 	const pendingCreateRef = useRef<{
 		type: 'file' | 'folder';
 		tempPath: string;
@@ -360,7 +361,8 @@ const PlaygroundFilePickerTree = forwardRef<
 			pendingCreateRef.current = { type: 'file', tempPath };
 			setLocalRenamingPath(tempPath);
 			setLastSelectedPath(tempPath);
-			setRefreshToken((t) => t + 1);
+			setInvalidatePath(normalizedBase);
+			setInvalidateKey((k) => k + 1);
 		} catch (e) {
 			void e;
 		}
@@ -385,7 +387,8 @@ const PlaygroundFilePickerTree = forwardRef<
 			pendingCreateRef.current = { type: 'folder', tempPath };
 			setLocalRenamingPath(tempPath);
 			setLastSelectedPath(tempPath);
-			setRefreshToken((t) => t + 1);
+			setInvalidatePath(normalizedBase);
+			setInvalidateKey((k) => k + 1);
 		} catch (e) {
 			void e;
 		}
@@ -419,7 +422,8 @@ const PlaygroundFilePickerTree = forwardRef<
 				// Ignore failure
 			} finally {
 				setLocalRenamingPath(null);
-				setRefreshToken((t) => t + 1);
+				setInvalidatePath(getDirname(normalized));
+				setInvalidateKey((k) => k + 1);
 				// Clear editor if deleted current file or a parent directory
 				if (
 					currentPath &&
@@ -480,7 +484,6 @@ const PlaygroundFilePickerTree = forwardRef<
 	return (
 		<>
 			<CoreFilePickerTree
-				key={refreshToken}
 				files={files}
 				initialPath={coreInitialPath}
 				onSelect={handleSelect}
@@ -492,6 +495,12 @@ const PlaygroundFilePickerTree = forwardRef<
 						? toCorePath(effectiveRenamingPath, normalizedRoot)
 						: undefined
 				}
+				invalidatePath={
+					invalidatePath
+						? toCorePath(invalidatePath, normalizedRoot)
+						: undefined
+				}
+				invalidateKey={invalidateKey}
 				onRename={async (corePath, newName) => {
 					if (!playgroundClient) return;
 					const absPath = corePathToAbsolute(
@@ -572,21 +581,27 @@ const PlaygroundFilePickerTree = forwardRef<
 							candidateIsDir = isDir;
 						}
 						setLastSelectedPath(candidate);
-						// Update editor state if needed
+						// Update editor state
 						if (candidateIsDir) {
 							if (currentPath === absPath) {
 								dispatch(setCurrentPath(candidate));
 							}
 						} else {
-							try {
-								const newContent =
-									await playgroundClient.readFileAsText(
-										candidate
-									);
-								dispatch(setCode(newContent));
+							if (isPending) {
+								// Only open the file if we just created it
+								try {
+									const newContent =
+										await playgroundClient.readFileAsText(
+											candidate
+										);
+									dispatch(setCode(newContent));
+									dispatch(setCurrentPath(candidate));
+								} catch (e) {
+									void e;
+								}
+							} else if (currentPath === absPath) {
+								// If the renamed file was open, just update the path
 								dispatch(setCurrentPath(candidate));
-							} catch (e) {
-								void e;
 							}
 						}
 					} catch {
@@ -606,7 +621,8 @@ const PlaygroundFilePickerTree = forwardRef<
 					} finally {
 						pendingCreateRef.current = null;
 						setLocalRenamingPath(null);
-						setRefreshToken((t) => t + 1);
+						setInvalidatePath(parent);
+						setInvalidateKey((k) => k + 1);
 					}
 				}}
 				onRenameCancel={async (corePath) => {
@@ -635,7 +651,8 @@ const PlaygroundFilePickerTree = forwardRef<
 					}
 					pendingCreateRef.current = null;
 					setLocalRenamingPath(null);
-					setRefreshToken((t) => t + 1);
+					setInvalidatePath(getDirname(absPath));
+					setInvalidateKey((k) => k + 1);
 				}}
 				onContextMenu={handleInternalContextMenu}
 			/>
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index f4b7730169..3f24a623ab 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -3,7 +3,9 @@
  *
  * * Files explorer
  *    * "Refresh" button to refresh the directory tree – OR auto-refresh every ~five seconds.
+ *    * Indicate the terminal and file explorer are loading
  *    * Download file / directory action
+ *    * Left/right arrows/delete don't work when renaming a file.
  *    * Bug – sometimes collapsing a directory = children are not visible after reopening.
  *      It an actual bug, not a faulty vite hot reloader!
  *    * ✅ Detect when a binary file is opened, show a special message "binary file. can't
@@ -53,6 +55,7 @@
  * * A way to run composer install by default (simply via Blueprints?)
  *   Communicate what it's doing by displaying the output in the terminal
  * * Tabs for opening multiple files
+ * * A way to save the workspace (Mount OPFS in Playground and sync it all there?)
  * * ✅ Find a way to put my workspace outside of WordPress and still serve it?
  *    * ✅ ln -s /workspace /wordpress/workspace?
  */

From 7bb7f8e2e047e9b01483cf6e72f25f4562e3f9a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 00:27:48 +0200
Subject: [PATCH 21/41] ux improvements around the file picker

---
 .../components/src/FilePickerTree/index.tsx   | 67 +++++++++++++++++++
 .../php-playground/components/EditorHost.tsx  |  4 +-
 .../components/PlaygroundFilePickerTree.tsx   | 28 ++++++++
 3 files changed, 98 insertions(+), 1 deletion(-)

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index a8c20c6c21..038efca170 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -38,6 +38,10 @@ export type FilePickerControlProps = {
 	invalidatePath?: string | null;
 	// Optional: change this to force re-invalidation even if the path is the same
 	invalidateKey?: number;
+	// Optional: remap expanded paths and cached children after a directory rename
+	renameMapping?: { from: string; to: string } | null;
+	// Optional: bump to apply a new rename mapping
+	renameKey?: number;
 };
 
 type ExpandedNodePaths = Record<string, boolean>;
@@ -58,6 +62,8 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	autoFocus = true,
 	invalidatePath = null,
 	invalidateKey = 0,
+	renameMapping = null,
+	renameKey = 0,
 }) => {
 	function buildPathChain(path: string): string[] {
 		if (!path) return [];
@@ -243,6 +249,67 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		}
 	}, [invalidatePath, invalidateKey, onLoadChildren, expanded]);
 
+	// Preserve expansion and cached children across directory rename by remapping
+	// path keys from old to new. Also update selection and focus if they were inside.
+	useEffect(() => {
+		if (!renameMapping) {
+			return;
+		}
+		const { from, to } = renameMapping;
+		const withTrailingSlash = from.endsWith('/') ? from : `${from}`;
+		const fromPrefix = withTrailingSlash + (from === '/' ? '' : '/');
+		const remapKey = (key: string): string | null => {
+			if (key === from) return to;
+			if (key.startsWith(fromPrefix)) {
+				return to + key.slice(from.length);
+			}
+			return null;
+		};
+
+		setExpanded((prev) => {
+			let changed = false;
+			const next: ExpandedNodePaths = { ...prev };
+			for (const key of Object.keys(prev)) {
+				const mapped = remapKey(key);
+				if (mapped && mapped !== key) {
+					if (!next[mapped]) {
+						next[mapped] = prev[key];
+					}
+					delete next[key];
+					changed = true;
+				}
+			}
+			return changed ? next : prev;
+		});
+
+		setLazyChildren((prev) => {
+			let changed = false;
+			const next: LoadedChildrenMap = { ...prev };
+			for (const key of Object.keys(prev)) {
+				const mapped = remapKey(key);
+				if (mapped && mapped !== key) {
+					if (next[mapped] === undefined) {
+						next[mapped] = prev[key];
+					}
+					delete next[key];
+					changed = true;
+				}
+			}
+			return changed ? next : prev;
+		});
+
+		setSelectedPath((prev) => {
+			if (!prev) return prev;
+			const mapped = remapKey(prev);
+			return mapped ?? prev;
+		});
+		setFocusedPath((prev) => {
+			if (!prev) return prev;
+			const mapped = remapKey(prev);
+			return mapped ?? prev;
+		});
+	}, [renameKey, renameMapping]);
+
 	// Auto-expand and load the root when it is '/'
 	useEffect(() => {
 		if (!onLoadChildren || files.length === 0) {
diff --git a/packages/playground/website/src/php-playground/components/EditorHost.tsx b/packages/playground/website/src/php-playground/components/EditorHost.tsx
index cc7387c1b3..aea58a2819 100644
--- a/packages/playground/website/src/php-playground/components/EditorHost.tsx
+++ b/packages/playground/website/src/php-playground/components/EditorHost.tsx
@@ -40,6 +40,9 @@ import styles from './layout.module.css';
 export const EditorHost = () => {
 	const dispatch = useAppDispatch();
 	const code = useAppSelector((state) => state.playground.code);
+	// @TODO: tricky – the parent may be renamed, moved, etc. Make
+	//        sure this stays up to date! Never save changes to an
+	//        outdated path!
 	const currentPath = useAppSelector((state) => state.playground.currentPath);
 	const client = useAppSelector((state) => state.playground.client);
 	const editorRef = useRef<HTMLDivElement | null>(null);
@@ -136,7 +139,6 @@ export const EditorHost = () => {
 		}
 		saveTimeoutRef.current = window.setTimeout(() => {
 			// Best-effort save; ignore errors (e.g., read-only files)
-			console.log('saving', currentPath, code);
 			client
 				.writeFile(currentPath, code)
 				.catch(() => {})
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index e08a475585..2604b94fe5 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -142,6 +142,11 @@ const PlaygroundFilePickerTree = forwardRef<
 	);
 	const [invalidatePath, setInvalidatePath] = useState<string | null>(null);
 	const [invalidateKey, setInvalidateKey] = useState(0);
+	const [renameMapping, setRenameMapping] = useState<{
+		from: string;
+		to: string;
+	} | null>(null);
+	const [renameKey, setRenameKey] = useState(0);
 	const pendingCreateRef = useRef<{
 		type: 'file' | 'folder';
 		tempPath: string;
@@ -501,6 +506,21 @@ const PlaygroundFilePickerTree = forwardRef<
 						: undefined
 				}
 				invalidateKey={invalidateKey}
+				renameMapping={
+					renameMapping
+						? {
+								from: toCorePath(
+									renameMapping.from,
+									normalizedRoot
+								),
+								to: toCorePath(
+									renameMapping.to,
+									normalizedRoot
+								),
+						  }
+						: undefined
+				}
+				renameKey={renameKey}
 				onRename={async (corePath, newName) => {
 					if (!playgroundClient) return;
 					const absPath = corePathToAbsolute(
@@ -581,6 +601,14 @@ const PlaygroundFilePickerTree = forwardRef<
 							candidateIsDir = isDir;
 						}
 						setLastSelectedPath(candidate);
+						// If a directory was renamed and it was expanded, remap it to keep expanded state
+						if (candidateIsDir) {
+							setRenameMapping({
+								from: absPath,
+								to: candidateNormalized,
+							});
+							setRenameKey((k) => k + 1);
+						}
 						// Update editor state
 						if (candidateIsDir) {
 							if (currentPath === absPath) {

From 65953cbd1d77a93a6ef6a04727d8a28cb2af3ce5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 00:48:46 +0200
Subject: [PATCH 22/41] ux improvements around the file picker

---
 package-lock.json                             |  51 +++++++++
 package.json                                  |   5 +
 .../components/src/FilePickerTree/index.tsx   |  77 ++++++++++++-
 .../php-playground/components/EditorHost.tsx  |  60 +++++++++-
 .../components/FileExplorerSidebar.tsx        |   8 +-
 .../components/Layout.module.css              |  79 +++++++++++++
 .../src/php-playground/components/Layout.tsx  | 104 +++++++++++++++++-
 .../components/PlaygroundFilePickerTree.tsx   |  83 +++++++++++++-
 8 files changed, 457 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f3905c8c0..eb77b9c322 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,11 @@
 			"dependencies": {
 				"@codemirror/autocomplete": "6.19.0",
 				"@codemirror/commands": "6.8.1",
+				"@codemirror/lang-css": "6.3.1",
+				"@codemirror/lang-html": "6.4.10",
+				"@codemirror/lang-javascript": "6.2.4",
+				"@codemirror/lang-json": "6.0.2",
+				"@codemirror/lang-markdown": "6.3.4",
 				"@codemirror/lang-php": "6.0.2",
 				"@codemirror/language": "6.11.3",
 				"@codemirror/search": "6.5.11",
@@ -2576,6 +2581,31 @@
 				"@lezer/javascript": "^1.0.0"
 			}
 		},
+		"node_modules/@codemirror/lang-json": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+			"integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@lezer/json": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/lang-markdown": {
+			"version": "6.3.4",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.3.4.tgz",
+			"integrity": "sha512-fBm0BO03azXnTAsxhONDYHi/qWSI+uSEIpzKM7h/bkIc9fHnFp9y7KTMXKON0teNT97pFhc1a9DQTtWBYEZ7ug==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.7.1",
+				"@codemirror/lang-html": "^6.0.0",
+				"@codemirror/language": "^6.3.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.2.1",
+				"@lezer/markdown": "^1.0.0"
+			}
+		},
 		"node_modules/@codemirror/lang-php": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.2.tgz",
@@ -8378,6 +8408,17 @@
 				"@lezer/lr": "^1.3.0"
 			}
 		},
+		"node_modules/@lezer/json": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+			"integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
 		"node_modules/@lezer/lr": {
 			"version": "1.4.2",
 			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
@@ -8387,6 +8428,16 @@
 				"@lezer/common": "^1.0.0"
 			}
 		},
+		"node_modules/@lezer/markdown": {
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.4.3.tgz",
+			"integrity": "sha512-kfw+2uMrQ/wy/+ONfrH83OkdFNM0ye5Xq96cLlaCy7h5UT9FO54DU4oRoIc0CSBh5NWmWuiIJA7NGLMJbQ+Oxg==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.0.0",
+				"@lezer/highlight": "^1.0.0"
+			}
+		},
 		"node_modules/@lezer/php": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.5.tgz",
diff --git a/package.json b/package.json
index f1e869c787..5b3a49c54e 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,11 @@
 	"dependencies": {
 		"@codemirror/autocomplete": "6.19.0",
 		"@codemirror/commands": "6.8.1",
+		"@codemirror/lang-css": "6.3.1",
+		"@codemirror/lang-html": "6.4.10",
+		"@codemirror/lang-javascript": "6.2.4",
+		"@codemirror/lang-json": "6.0.2",
+		"@codemirror/lang-markdown": "6.3.4",
 		"@codemirror/lang-php": "6.0.2",
 		"@codemirror/language": "6.11.3",
 		"@codemirror/search": "6.5.11",
diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index 038efca170..eece4bf9de 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -42,6 +42,14 @@ export type FilePickerControlProps = {
 	renameMapping?: { from: string; to: string } | null;
 	// Optional: bump to apply a new rename mapping
 	renameKey?: number;
+	// Optional: explicitly request focusing a particular node path
+	focusPathRequest?: string | null;
+	// Optional: bump to trigger a focus request
+	focusRequestKey?: number;
+	// Optional: request expanding a particular path's ancestor chain
+	expandPathRequest?: string | null;
+	// Optional: bump to trigger an expand request
+	expandRequestKey?: number;
 };
 
 type ExpandedNodePaths = Record<string, boolean>;
@@ -64,6 +72,10 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	invalidateKey = 0,
 	renameMapping = null,
 	renameKey = 0,
+	focusPathRequest = null,
+	focusRequestKey = 0,
+	expandPathRequest = null,
+	expandRequestKey = 0,
 }) => {
 	function buildPathChain(path: string): string[] {
 		if (!path) return [];
@@ -143,11 +155,13 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		[]
 	);
 
-	// Ensure that when initialPath changes after mount, expand its chain and focus/select
+	// Only use initialPath for the initial mount to prevent flicker when switching directories
+	const hasInitializedRef = useRef(false);
 	useEffect(() => {
-		if (!initialPath) {
+		if (!initialPath || hasInitializedRef.current) {
 			return;
 		}
+		hasInitializedRef.current = true;
 		const chain = buildPathChain(initialPath);
 		setExpanded((prev) => {
 			const next = { ...prev } as ExpandedNodePaths;
@@ -310,6 +324,55 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		});
 	}, [renameKey, renameMapping]);
 
+	// Explicit focus requests: set selection/focus and move DOM focus without relying on autoFocus
+	useEffect(() => {
+		if (!focusPathRequest) {
+			return;
+		}
+		setSelectedPath(focusPathRequest);
+		setFocusedPath(focusPathRequest);
+		const focusTarget = containerRef.current?.querySelector(
+			`[data-path="${focusPathRequest}"]`
+		) as HTMLElement | null;
+		if (focusTarget && typeof focusTarget.focus === 'function') {
+			focusTarget.focus();
+		}
+	}, [focusRequestKey, focusPathRequest, files, lazyChildren]);
+
+	// Expand request: expand the path's ancestor chain and load children in-place
+	useEffect(() => {
+		if (!expandPathRequest) {
+			return;
+		}
+		const chain = buildPathChain(expandPathRequest);
+		setExpanded((prev) => {
+			const next = { ...prev } as ExpandedNodePaths;
+			for (const p of chain) {
+				next[p] = true;
+			}
+			return next;
+		});
+		if (onLoadChildren) {
+			for (const p of chain) {
+				setLoadingPaths((prev) => ({ ...prev, [p]: true }));
+				void onLoadChildren(p)
+					.then((children) => {
+						setLazyChildren((prev) => ({
+							...prev,
+							[p]: children ?? [],
+						}));
+					})
+					.finally(() => {
+						setLoadingPaths((prev) => {
+							const next = { ...prev };
+							delete next[p];
+							return next;
+						});
+					});
+			}
+		}
+	}, [expandRequestKey, expandPathRequest, onLoadChildren]);
+
 	// Auto-expand and load the root when it is '/'
 	useEffect(() => {
 		if (!onLoadChildren || files.length === 0) {
@@ -654,6 +717,16 @@ const NodeRow: React.FC<{
 			event.stopPropagation();
 			renameHandledRef.current = true;
 			onRenameCancel?.(path);
+			return;
+		}
+		// Allow text navigation with arrow keys while renaming – prevent tree navigation
+		if (
+			event.key === 'ArrowLeft' ||
+			event.key === 'ArrowRight' ||
+			event.key === 'ArrowUp' ||
+			event.key === 'ArrowDown'
+		) {
+			event.stopPropagation();
 		}
 	};
 
diff --git a/packages/playground/website/src/php-playground/components/EditorHost.tsx b/packages/playground/website/src/php-playground/components/EditorHost.tsx
index aea58a2819..35d4e05394 100644
--- a/packages/playground/website/src/php-playground/components/EditorHost.tsx
+++ b/packages/playground/website/src/php-playground/components/EditorHost.tsx
@@ -32,11 +32,49 @@ import {
 	defaultHighlightStyle,
 } from '@codemirror/language';
 import { php } from '@codemirror/lang-php';
+import { css } from '@codemirror/lang-css';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { html } from '@codemirror/lang-html';
+import { markdown } from '@codemirror/lang-markdown';
 
 import { useAppDispatch, useAppSelector } from '../hooks';
 import { queueRun, setCode } from '../store';
 import styles from './layout.module.css';
 
+// Language detection function based on file extension
+const getLanguageExtension = (filePath: string | null) => {
+	if (!filePath) {
+		return php(); // Default to PHP
+	}
+
+	const extension = filePath.split('.').pop()?.toLowerCase();
+
+	switch (extension) {
+		case 'css':
+			return css();
+		case 'js':
+		case 'jsx':
+		case 'ts':
+		case 'tsx':
+			return javascript({
+				jsx: true,
+				typescript: extension === 'ts' || extension === 'tsx',
+			});
+		case 'json':
+			return json();
+		case 'html':
+		case 'htm':
+			return html();
+		case 'md':
+		case 'markdown':
+			return markdown();
+		case 'php':
+		default:
+			return php();
+	}
+};
+
 export const EditorHost = () => {
 	const dispatch = useAppDispatch();
 	const code = useAppSelector((state) => state.playground.code);
@@ -47,7 +85,7 @@ export const EditorHost = () => {
 	const client = useAppSelector((state) => state.playground.client);
 	const editorRef = useRef<HTMLDivElement | null>(null);
 	const viewRef = useRef<EditorView | null>(null);
-	const phpCompartmentRef = useRef(new Compartment());
+	const languageCompartmentRef = useRef(new Compartment());
 	const saveTimeoutRef = useRef<number | null>(null);
 
 	useEffect(() => {
@@ -69,7 +107,9 @@ export const EditorHost = () => {
 				dropCursor(),
 				rectangularSelection(),
 				crosshairCursor(),
-				phpCompartmentRef.current.of(php()),
+				languageCompartmentRef.current.of(
+					getLanguageExtension(currentPath)
+				),
 				syntaxHighlighting(defaultHighlightStyle),
 				indentOnInput(),
 				bracketMatching(),
@@ -129,6 +169,22 @@ export const EditorHost = () => {
 		});
 	}, [code]);
 
+	// Update language highlighting when currentPath changes
+	useEffect(() => {
+		const view = viewRef.current;
+		if (!view) {
+			return;
+		}
+
+		const newLanguageExtension = getLanguageExtension(currentPath);
+		view.dispatch({
+			effects:
+				languageCompartmentRef.current.reconfigure(
+					newLanguageExtension
+				),
+		});
+	}, [currentPath]);
+
 	// Debounced save of editor contents to the currently selected file
 	useEffect(() => {
 		if (!client || !currentPath) {
diff --git a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
index fa4ccfd571..4784de5095 100644
--- a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
+++ b/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
@@ -138,7 +138,7 @@ export default function FileExplorerSidebar({
 									)
 								);
 								dispatch(setCurrentPath(null));
-								setSelectedDirPath(dirnameSafe(path));
+								// Don't change selectedDirPath when clicking a file
 								return;
 							}
 							if (!isProbablyTextBuffer(data)) {
@@ -152,17 +152,17 @@ export default function FileExplorerSidebar({
 									)
 								);
 								dispatch(setCurrentPath(null));
-								setSelectedDirPath(dirnameSafe(path));
+								// Don't change selectedDirPath when clicking a file
 								return;
 							}
 							const text = new TextDecoder('utf-8').decode(data);
 							dispatch(setCode(text));
 							dispatch(setCurrentPath(path));
-							setSelectedDirPath(dirnameSafe(path));
+							// Don't change selectedDirPath when clicking a file
 						} catch {
 							dispatch(setCode('Could not open file'));
 							dispatch(setCurrentPath(null));
-							setSelectedDirPath(dirnameSafe(path));
+							// Don't change selectedDirPath when clicking a file
 						}
 					}}
 				/>
diff --git a/packages/playground/website/src/php-playground/components/Layout.module.css b/packages/playground/website/src/php-playground/components/Layout.module.css
index be43a4aa46..7257d74dc6 100644
--- a/packages/playground/website/src/php-playground/components/Layout.module.css
+++ b/packages/playground/website/src/php-playground/components/Layout.module.css
@@ -341,6 +341,7 @@
 	display: flex;
 	flex-direction: column;
 	border-top: 1px solid #333;
+	position: relative;
 }
 
 .terminalSectionCollapsed .terminalPane {
@@ -384,6 +385,84 @@
 	height: 100%;
 }
 
+/* Placeholder UI for pre-boot states */
+.placeholderContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	padding: 12px;
+	color: #666;
+	background: #fafafa;
+	border-top: 1px solid #eee;
+}
+
+.placeholderContent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+}
+
+.placeholderHeading {
+	font-size: 13px;
+	font-weight: 600;
+	color: #333;
+}
+
+.placeholderSubtext {
+	font-size: 12px;
+	color: #666;
+}
+
+.skeletonList {
+	width: 100%;
+	max-width: 220px;
+	margin-top: 6px;
+}
+
+.skeletonLine {
+	height: 10px;
+	border-radius: 6px;
+	background: linear-gradient(90deg, #ececec, #f5f5f5, #ececec);
+	background-size: 200% 100%;
+	animation: skeletonShimmer 1.2s ease-in-out infinite;
+	margin: 8px 0;
+}
+
+.skeletonLineShort {
+	width: 70%;
+}
+
+@keyframes skeletonShimmer {
+	0% {
+		background-position: 200% 0;
+	}
+	100% {
+		background-position: -200% 0;
+	}
+}
+
+/* Terminal overlay while booting */
+.terminalOverlay {
+	position: absolute;
+	inset: 0;
+	background: rgba(17, 17, 17, 0.9);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1;
+}
+
+.terminalOverlayContent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	color: #e5e5e5;
+	font-size: 13px;
+}
+
 .modal {
 	display: none;
 	position: fixed;
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 82e05dacc0..c85c068c49 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -13,6 +13,7 @@ import { PlaygroundManager } from './PlaygroundManager';
 import { Terminal } from './Terminal';
 import { useAppSelector } from '../hooks';
 import AddressBar from '../../components/address-bar';
+import { Spinner } from '../../components/spinner';
 
 const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
 
@@ -82,7 +83,82 @@ export const Layout = () => {
 								forceSelectedPath={forceSelectedPath}
 								setForceSelectedPath={setForceSelectedPath}
 							/>
-						) : null}
+						) : (
+							<div className={styles.fileExplorerContainer}>
+								<div className={styles.fileExplorerHeader}>
+									<span className={styles.fileExplorerTitle}>
+										Files
+									</span>
+									<div className={styles.fileExplorerActions}>
+										<button
+											className={
+												styles.fileExplorerButton
+											}
+											disabled
+										>
+											New File
+										</button>
+										<button
+											className={
+												styles.fileExplorerButton
+											}
+											disabled
+										>
+											New Folder
+										</button>
+									</div>
+								</div>
+								<div className={styles.fileExplorerTree}>
+									<div
+										className={styles.placeholderContainer}
+										aria-live="polite"
+									>
+										<div
+											className={
+												styles.placeholderContent
+											}
+										>
+											<div
+												className={
+													styles.placeholderHeading
+												}
+											>
+												Preparing Playground…
+											</div>
+											<div
+												className={
+													styles.placeholderSubtext
+												}
+											>
+												File explorer will be ready
+												shortly
+											</div>
+											<div
+												className={styles.skeletonList}
+												aria-hidden="true"
+											>
+												<div
+													className={
+														styles.skeletonLine
+													}
+												></div>
+												<div
+													className={
+														styles.skeletonLine
+													}
+												></div>
+												<div
+													className={clsx(
+														styles.skeletonLine,
+														styles.skeletonLineShort
+													)}
+												></div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						)}
 					</div>
 				</Panel>
 				<PanelResizeHandle className={styles.horizontalHandle} />
@@ -142,6 +218,32 @@ export const Layout = () => {
 											resizeToken={terminalResizeToken}
 										/>
 									</div>
+									{bootStatus !== 'ready' ||
+									!playgroundClient ? (
+										<div
+											className={styles.terminalOverlay}
+											aria-live="polite"
+											aria-busy="true"
+										>
+											<div
+												className={
+													styles.terminalOverlayContent
+												}
+											>
+												<Spinner size={36} />
+												<div>Starting Playground…</div>
+												<div
+													style={{
+														opacity: 0.8,
+														fontSize: '12px',
+													}}
+												>
+													Terminal will be available
+													shortly
+												</div>
+											</div>
+										</div>
+									) : null}
 								</section>
 							</Panel>
 						</PanelGroup>
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 2604b94fe5..5a23435976 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -147,6 +147,14 @@ const PlaygroundFilePickerTree = forwardRef<
 		to: string;
 	} | null>(null);
 	const [renameKey, setRenameKey] = useState(0);
+	const [focusRequestPath, setFocusRequestPath] = useState<string | null>(
+		null
+	);
+	const [focusRequestKey, setFocusRequestKey] = useState(0);
+	const [expandRequestPath, setExpandRequestPath] = useState<string | null>(
+		null
+	);
+	const [expandRequestKey, setExpandRequestKey] = useState(0);
 	const pendingCreateRef = useRef<{
 		type: 'file' | 'folder';
 		tempPath: string;
@@ -368,6 +376,11 @@ const PlaygroundFilePickerTree = forwardRef<
 			setLastSelectedPath(tempPath);
 			setInvalidatePath(normalizedBase);
 			setInvalidateKey((k) => k + 1);
+			// Ensure the base directory is expanded and focused so the form is visible
+			setExpandRequestPath(normalizedBase);
+			setExpandRequestKey((k) => k + 1);
+			setFocusRequestPath(tempPath);
+			setFocusRequestKey((k) => k + 1);
 		} catch (e) {
 			void e;
 		}
@@ -394,6 +407,11 @@ const PlaygroundFilePickerTree = forwardRef<
 			setLastSelectedPath(tempPath);
 			setInvalidatePath(normalizedBase);
 			setInvalidateKey((k) => k + 1);
+			// Ensure the base directory is expanded and focused so the form is visible
+			setExpandRequestPath(normalizedBase);
+			setExpandRequestKey((k) => k + 1);
+			setFocusRequestPath(tempPath);
+			setFocusRequestKey((k) => k + 1);
 		} catch (e) {
 			void e;
 		}
@@ -427,8 +445,12 @@ const PlaygroundFilePickerTree = forwardRef<
 				// Ignore failure
 			} finally {
 				setLocalRenamingPath(null);
-				setInvalidatePath(getDirname(normalized));
+				const parentDir = getDirname(normalized);
+				setInvalidatePath(parentDir);
 				setInvalidateKey((k) => k + 1);
+				// Focus on the parent directory after deletion
+				setFocusRequestPath(parentDir);
+				setFocusRequestKey((k) => k + 1);
 				// Clear editor if deleted current file or a parent directory
 				if (
 					currentPath &&
@@ -521,6 +543,18 @@ const PlaygroundFilePickerTree = forwardRef<
 						: undefined
 				}
 				renameKey={renameKey}
+				focusPathRequest={
+					focusRequestPath
+						? toCorePath(focusRequestPath, normalizedRoot)
+						: undefined
+				}
+				focusRequestKey={focusRequestKey}
+				expandPathRequest={
+					expandRequestPath
+						? toCorePath(expandRequestPath, normalizedRoot)
+						: undefined
+				}
+				expandRequestKey={expandRequestKey}
 				onRename={async (corePath, newName) => {
 					if (!playgroundClient) return;
 					const absPath = corePathToAbsolute(
@@ -614,6 +648,9 @@ const PlaygroundFilePickerTree = forwardRef<
 							if (currentPath === absPath) {
 								dispatch(setCurrentPath(candidate));
 							}
+							// keep focus on the renamed directory row
+							setFocusRequestPath(candidateNormalized);
+							setFocusRequestKey((k) => k + 1);
 						} else {
 							if (isPending) {
 								// Only open the file if we just created it
@@ -631,6 +668,9 @@ const PlaygroundFilePickerTree = forwardRef<
 								// If the renamed file was open, just update the path
 								dispatch(setCurrentPath(candidate));
 							}
+							// keep focus on the renamed file row
+							setFocusRequestPath(candidateNormalized);
+							setFocusRequestKey((k) => k + 1);
 						}
 					} catch {
 						if (isPending) {
@@ -651,6 +691,9 @@ const PlaygroundFilePickerTree = forwardRef<
 						setLocalRenamingPath(null);
 						setInvalidatePath(parent);
 						setInvalidateKey((k) => k + 1);
+						// focus the renamed entry or its new parent row
+						setFocusRequestPath(candidateNormalized);
+						setFocusRequestKey((k) => k + 1);
 					}
 				}}
 				onRenameCancel={async (corePath) => {
@@ -681,6 +724,9 @@ const PlaygroundFilePickerTree = forwardRef<
 					setLocalRenamingPath(null);
 					setInvalidatePath(getDirname(absPath));
 					setInvalidateKey((k) => k + 1);
+					// refocus the original item (if exists) or its parent
+					setFocusRequestPath(getDirname(absPath));
+					setFocusRequestKey((k) => k + 1);
 				}}
 				onContextMenu={handleInternalContextMenu}
 			/>
@@ -691,6 +737,41 @@ const PlaygroundFilePickerTree = forwardRef<
 					onClick={(event) => event.stopPropagation()}
 					onContextMenu={(event) => event.preventDefault()}
 				>
+					{contextMenu.type === 'folder' && (
+						<button
+							className={styles.contextMenuButton}
+							onClick={async () => {
+								const dir = contextMenu.path;
+								setContextMenu(null);
+								// Focus and expand the directory, then create a file inside
+								setExpandRequestPath(dir);
+								setExpandRequestKey((k) => k + 1);
+								const baseBefore = lastSelectedPath;
+								setLastSelectedPath(dir);
+								await handleCreateFile();
+								setLastSelectedPath(baseBefore);
+							}}
+						>
+							Create file
+						</button>
+					)}
+					{contextMenu.type === 'folder' && (
+						<button
+							className={styles.contextMenuButton}
+							onClick={async () => {
+								const dir = contextMenu.path;
+								setContextMenu(null);
+								setExpandRequestPath(dir);
+								setExpandRequestKey((k) => k + 1);
+								const baseBefore = lastSelectedPath;
+								setLastSelectedPath(dir);
+								await handleCreateDirectory();
+								setLastSelectedPath(baseBefore);
+							}}
+						>
+							Create directory
+						</button>
+					)}
 					<button
 						className={styles.contextMenuButton}
 						onClick={() =>

From 564742fce63822b7405da0c1cf88896a8cd8f553 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 00:55:01 +0200
Subject: [PATCH 23/41] ux improvements around the file picker

---
 .../components/src/FilePickerTree/index.tsx   |  6 ++--
 .../components/FileExplorerSidebar.tsx        |  8 ++++--
 .../components/PlaygroundFilePickerTree.tsx   | 28 +++++++++++++++----
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index eece4bf9de..55609ddf5b 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -240,8 +240,8 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		if (!invalidatePath) {
 			return;
 		}
-		// If it's expanded and we can load, refresh immediately without clearing cache
-		if (onLoadChildren && expanded[invalidatePath]) {
+		// Always reload to get updated child names after operations like rename
+		if (onLoadChildren) {
 			setLoadingPaths((prev) => ({
 				...prev,
 				[invalidatePath]: true,
@@ -261,7 +261,7 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 					});
 				});
 		}
-	}, [invalidatePath, invalidateKey, onLoadChildren, expanded]);
+	}, [invalidatePath, invalidateKey, onLoadChildren]);
 
 	// Preserve expansion and cached children across directory rename by remapping
 	// path keys from old to new. Also update selection and focus if they were inside.
diff --git a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
index 4784de5095..ce99d0c0c8 100644
--- a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
+++ b/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
@@ -73,15 +73,17 @@ export default function FileExplorerSidebar({
 	const treeRef = useRef<PlaygroundFilePickerTreeRef | null>(null);
 	const dispatch = useAppDispatch();
 
+	// Only set initial path once to prevent jumping between directories
 	const treeInitialPath = useMemo(() => {
 		return normalizeFsPath(
 			forceSelectedPath ??
-				selectedDirPath ??
 				(currentPath
 					? dirnameSafe(currentPath)
-					: '/wordpress/workspace')
+					: selectedDirPath ?? '/wordpress/workspace')
 		);
-	}, [forceSelectedPath, selectedDirPath, currentPath]);
+		// Remove selectedDirPath from dependencies to prevent unwanted updates
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [forceSelectedPath, currentPath]);
 
 	return (
 		<div className={styles.fileExplorerContainer}>
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 5a23435976..806548306e 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -202,6 +202,9 @@ const PlaygroundFilePickerTree = forwardRef<
 		[renamingPath, getDirname, getBasename]
 	);
 
+	// Track when we need to refresh root files
+	const [rootRefreshKey, setRootRefreshKey] = useState(0);
+
 	useEffect(() => {
 		let cancelled = false;
 		async function init() {
@@ -237,6 +240,7 @@ const PlaygroundFilePickerTree = forwardRef<
 		rootName,
 		playgroundClient,
 		JSON.stringify(excludePaths),
+		rootRefreshKey,
 	]);
 
 	const coreInitialPath = useMemo(() => {
@@ -446,8 +450,13 @@ const PlaygroundFilePickerTree = forwardRef<
 			} finally {
 				setLocalRenamingPath(null);
 				const parentDir = getDirname(normalized);
-				setInvalidatePath(parentDir);
-				setInvalidateKey((k) => k + 1);
+				if (parentDir === normalizedRoot && normalizedRoot === '/') {
+					// Special case: deleting at root level, refresh root files
+					setRootRefreshKey((k) => k + 1);
+				} else {
+					setInvalidatePath(parentDir);
+					setInvalidateKey((k) => k + 1);
+				}
 				// Focus on the parent directory after deletion
 				setFocusRequestPath(parentDir);
 				setFocusRequestKey((k) => k + 1);
@@ -689,9 +698,18 @@ const PlaygroundFilePickerTree = forwardRef<
 					} finally {
 						pendingCreateRef.current = null;
 						setLocalRenamingPath(null);
-						setInvalidatePath(parent);
-						setInvalidateKey((k) => k + 1);
-						// focus the renamed entry or its new parent row
+						// Always invalidate parent to update the file list with new name
+						if (
+							parent === normalizedRoot &&
+							normalizedRoot === '/'
+						) {
+							// Special case: renaming at root level, refresh root files
+							setRootRefreshKey((k) => k + 1);
+						} else {
+							setInvalidatePath(parent);
+							setInvalidateKey((k) => k + 1);
+						}
+						// focus the renamed entry
 						setFocusRequestPath(candidateNormalized);
 						setFocusRequestKey((k) => k + 1);
 					}

From 96bda92d5658b4203553cbd75329e6e52a77e6cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 00:58:16 +0200
Subject: [PATCH 24/41] ux improvements around the file picker

---
 .../components/PlaygroundFilePickerTree.tsx   | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 806548306e..6cda831ee4 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -385,6 +385,11 @@ const PlaygroundFilePickerTree = forwardRef<
 			setExpandRequestKey((k) => k + 1);
 			setFocusRequestPath(tempPath);
 			setFocusRequestKey((k) => k + 1);
+			// Clear requests after a short delay
+			setTimeout(() => {
+				setExpandRequestPath(null);
+				setFocusRequestPath(null);
+			}, 100);
 		} catch (e) {
 			void e;
 		}
@@ -416,6 +421,11 @@ const PlaygroundFilePickerTree = forwardRef<
 			setExpandRequestKey((k) => k + 1);
 			setFocusRequestPath(tempPath);
 			setFocusRequestKey((k) => k + 1);
+			// Clear requests after a short delay
+			setTimeout(() => {
+				setExpandRequestPath(null);
+				setFocusRequestPath(null);
+			}, 100);
 		} catch (e) {
 			void e;
 		}
@@ -460,6 +470,10 @@ const PlaygroundFilePickerTree = forwardRef<
 				// Focus on the parent directory after deletion
 				setFocusRequestPath(parentDir);
 				setFocusRequestKey((k) => k + 1);
+				// Clear focus request after a short delay
+				setTimeout(() => {
+					setFocusRequestPath(null);
+				}, 100);
 				// Clear editor if deleted current file or a parent directory
 				if (
 					currentPath &&
@@ -712,6 +726,10 @@ const PlaygroundFilePickerTree = forwardRef<
 						// focus the renamed entry
 						setFocusRequestPath(candidateNormalized);
 						setFocusRequestKey((k) => k + 1);
+						// Clear focus request after a short delay to prevent interference
+						setTimeout(() => {
+							setFocusRequestPath(null);
+						}, 100);
 					}
 				}}
 				onRenameCancel={async (corePath) => {
@@ -745,6 +763,10 @@ const PlaygroundFilePickerTree = forwardRef<
 					// refocus the original item (if exists) or its parent
 					setFocusRequestPath(getDirname(absPath));
 					setFocusRequestKey((k) => k + 1);
+					// Clear focus request after a short delay
+					setTimeout(() => {
+						setFocusRequestPath(null);
+					}, 100);
 				}}
 				onContextMenu={handleInternalContextMenu}
 			/>

From f7e5acbfb94a01c1e7a9ce01f19cbacb208b93d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 01:01:03 +0200
Subject: [PATCH 25/41] ux improvements around the file picker

---
 .../src/php-playground/components/Terminal.tsx       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/Terminal.tsx
index b01336ca59..957a650f3b 100644
--- a/packages/playground/website/src/php-playground/components/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/Terminal.tsx
@@ -328,9 +328,17 @@ export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 // Composer assumes the grapheme_strlen function is available
 // and will crash if it's not. Symfony Polyfills somehow do
 // not kick in in this case.
-function grapheme_strlen($string) {
-	return strlen($string);
+if(!function_exists('grapheme_strlen')) {
+	function grapheme_strlen($string) {
+		return strlen($string);
+	}
+}
+if(!function_exists('grapheme_substr')) {
+	function grapheme_substr($string, $start, $length) {
+		return substr($string, $start, $length);
+	}
 }
+
 require_once __FILE__ . '.bin';
 `
 			);

From 36a9893e70ab963610e2425f1b9d2c1b2f3eb12b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 01:06:05 +0200
Subject: [PATCH 26/41] ux improvements around the file picker

---
 .../components/PlaygroundFilePickerTree.tsx   | 172 +++++++++---------
 1 file changed, 88 insertions(+), 84 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 6cda831ee4..ccea43c598 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -353,83 +353,93 @@ const PlaygroundFilePickerTree = forwardRef<
 		[]
 	);
 
-	const resolveBaseDir = useCallback(() => {
-		if (!lastSelectedPath) return DEFAULT_WORKSPACE_DIR;
-		// If selection is a folder, use it; otherwise use its dirname
-		return lastSelectedPath;
-	}, [lastSelectedPath]);
-
-	const handleCreateFile = useCallback(async () => {
-		if (!playgroundClient) {
-			return;
-		}
-		const baseDir = resolveBaseDir() || DEFAULT_WORKSPACE_DIR;
-		const normalizedBase = normalizePath(baseDir);
-		try {
-			const name = await findAvailableName(
-				playgroundClient,
-				normalizedBase,
-				'untitled.php'
-			);
-			const tempPath = `${
-				normalizedBase === '/' ? '' : normalizedBase
-			}/${name}`;
-			await playgroundClient.writeFile(tempPath, '');
-			pendingCreateRef.current = { type: 'file', tempPath };
-			setLocalRenamingPath(tempPath);
-			setLastSelectedPath(tempPath);
-			setInvalidatePath(normalizedBase);
-			setInvalidateKey((k) => k + 1);
-			// Ensure the base directory is expanded and focused so the form is visible
-			setExpandRequestPath(normalizedBase);
-			setExpandRequestKey((k) => k + 1);
-			setFocusRequestPath(tempPath);
-			setFocusRequestKey((k) => k + 1);
-			// Clear requests after a short delay
-			setTimeout(() => {
-				setExpandRequestPath(null);
-				setFocusRequestPath(null);
-			}, 100);
-		} catch (e) {
-			void e;
-		}
-	}, [playgroundClient, resolveBaseDir, findAvailableName]);
+	const resolveBaseDir = useCallback(
+		(overridePath?: string) => {
+			const basePath = overridePath || lastSelectedPath;
+			if (!basePath) return DEFAULT_WORKSPACE_DIR;
+			// If selection is a folder, use it; otherwise use its dirname
+			return basePath;
+		},
+		[lastSelectedPath]
+	);
 
-	const handleCreateDirectory = useCallback(async () => {
-		if (!playgroundClient) {
-			return;
-		}
-		const baseDir = resolveBaseDir() || DEFAULT_WORKSPACE_DIR;
-		const normalizedBase = normalizePath(baseDir);
-		try {
-			const name = await findAvailableName(
-				playgroundClient,
-				normalizedBase,
-				'New Folder'
-			);
-			const tempPath = `${
-				normalizedBase === '/' ? '' : normalizedBase
-			}/${name}`;
-			await playgroundClient.mkdir(tempPath);
-			pendingCreateRef.current = { type: 'folder', tempPath };
-			setLocalRenamingPath(tempPath);
-			setLastSelectedPath(tempPath);
-			setInvalidatePath(normalizedBase);
-			setInvalidateKey((k) => k + 1);
-			// Ensure the base directory is expanded and focused so the form is visible
-			setExpandRequestPath(normalizedBase);
-			setExpandRequestKey((k) => k + 1);
-			setFocusRequestPath(tempPath);
-			setFocusRequestKey((k) => k + 1);
-			// Clear requests after a short delay
-			setTimeout(() => {
-				setExpandRequestPath(null);
-				setFocusRequestPath(null);
-			}, 100);
-		} catch (e) {
-			void e;
-		}
-	}, [playgroundClient, resolveBaseDir, findAvailableName]);
+	const handleCreateFile = useCallback(
+		async (targetDir?: string) => {
+			if (!playgroundClient) {
+				return;
+			}
+			const baseDir = resolveBaseDir(targetDir) || DEFAULT_WORKSPACE_DIR;
+			const normalizedBase = normalizePath(baseDir);
+			try {
+				const name = await findAvailableName(
+					playgroundClient,
+					normalizedBase,
+					'untitled.php'
+				);
+				const tempPath = `${
+					normalizedBase === '/' ? '' : normalizedBase
+				}/${name}`;
+				await playgroundClient.writeFile(tempPath, '');
+				pendingCreateRef.current = { type: 'file', tempPath };
+				setLocalRenamingPath(tempPath);
+				setLastSelectedPath(tempPath);
+				setInvalidatePath(normalizedBase);
+				setInvalidateKey((k) => k + 1);
+				// Ensure the base directory is expanded and focused so the form is visible
+				setExpandRequestPath(normalizedBase);
+				setExpandRequestKey((k) => k + 1);
+				setFocusRequestPath(tempPath);
+				setFocusRequestKey((k) => k + 1);
+				// Clear requests after a short delay
+				setTimeout(() => {
+					setExpandRequestPath(null);
+					setFocusRequestPath(null);
+				}, 100);
+			} catch (e) {
+				void e;
+			}
+		},
+		[playgroundClient, resolveBaseDir, findAvailableName]
+	);
+
+	const handleCreateDirectory = useCallback(
+		async (targetDir?: string) => {
+			if (!playgroundClient) {
+				return;
+			}
+			const baseDir = resolveBaseDir(targetDir) || DEFAULT_WORKSPACE_DIR;
+			const normalizedBase = normalizePath(baseDir);
+			try {
+				const name = await findAvailableName(
+					playgroundClient,
+					normalizedBase,
+					'New Folder'
+				);
+				const tempPath = `${
+					normalizedBase === '/' ? '' : normalizedBase
+				}/${name}`;
+				await playgroundClient.mkdir(tempPath);
+				pendingCreateRef.current = { type: 'folder', tempPath };
+				setLocalRenamingPath(tempPath);
+				setLastSelectedPath(tempPath);
+				setInvalidatePath(normalizedBase);
+				setInvalidateKey((k) => k + 1);
+				// Ensure the base directory is expanded and focused so the form is visible
+				setExpandRequestPath(normalizedBase);
+				setExpandRequestKey((k) => k + 1);
+				setFocusRequestPath(tempPath);
+				setFocusRequestKey((k) => k + 1);
+				// Clear requests after a short delay
+				setTimeout(() => {
+					setExpandRequestPath(null);
+					setFocusRequestPath(null);
+				}, 100);
+			} catch (e) {
+				void e;
+			}
+		},
+		[playgroundClient, resolveBaseDir, findAvailableName]
+	);
 
 	useImperativeHandle(
 		ref,
@@ -786,10 +796,7 @@ const PlaygroundFilePickerTree = forwardRef<
 								// Focus and expand the directory, then create a file inside
 								setExpandRequestPath(dir);
 								setExpandRequestKey((k) => k + 1);
-								const baseBefore = lastSelectedPath;
-								setLastSelectedPath(dir);
-								await handleCreateFile();
-								setLastSelectedPath(baseBefore);
+								await handleCreateFile(dir);
 							}}
 						>
 							Create file
@@ -803,10 +810,7 @@ const PlaygroundFilePickerTree = forwardRef<
 								setContextMenu(null);
 								setExpandRequestPath(dir);
 								setExpandRequestKey((k) => k + 1);
-								const baseBefore = lastSelectedPath;
-								setLastSelectedPath(dir);
-								await handleCreateDirectory();
-								setLastSelectedPath(baseBefore);
+								await handleCreateDirectory(dir);
 							}}
 						>
 							Create directory

From 44fa590d2861d42ff299c0b9459ed23ca8c03598 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 01:53:22 +0200
Subject: [PATCH 27/41] ux improvements around the file picker

---
 .eslintrc.json                                |   1 +
 .../lib/sandboxed-spawn-handler-factory.ts    | 381 +----------
 .../components/src/FilePickerTree/index.tsx   | 603 ++++++++----------
 .../components/PlaygroundFilePickerTree.tsx   | 584 +++++++++--------
 .../components/PlaygroundManager.tsx          |  10 +-
 .../php-playground/components/Terminal.tsx    |   8 +-
 .../website/src/php-playground/main.tsx       |  15 +-
 7 files changed, 614 insertions(+), 988 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index a7e89977ab..0af5f07c71 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -29,6 +29,7 @@
 				"no-inner-declarations": 0,
 				"no-use-before-define": "off",
 				"react/prop-types": 0,
+				"react-hooks/exhaustive-deps": 0,
 				"no-console": 1,
 				"no-empty": 0,
 				"no-async-promise-executor": 0,
diff --git a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
index bbe5cf917d..d7fe41fc70 100644
--- a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
+++ b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
@@ -1,10 +1,4 @@
-import {
-	createSpawnHandler,
-	joinPaths,
-	normalizePath,
-	dirname,
-	basename,
-} from '@php-wasm/util';
+import { createSpawnHandler } from '@php-wasm/util';
 import type { PHPProcessManager } from './php-process-manager';
 
 /**
@@ -31,70 +25,25 @@ export function sandboxedSpawnHandlerFactory(
 		}
 
 		const binaryName = args[0].split('/').pop();
-		const argv = args.slice(1);
-
-		const sleep = (ms: number) =>
-			new Promise((resolve) => setTimeout(resolve, ms));
-		const parseFlags = (arr: string[]) => {
-			const flags: Set<string> = new Set();
-			const rest: string[] = [];
-			for (const a of arr) {
-				if (a.startsWith('-')) {
-					for (let i = 1; i < a.length; i++) {
-						flags.add(a[i]);
-					}
-				} else {
-					rest.push(a);
-				}
-			}
-			return { flags, rest } as const;
-		};
-		const validateAllowedFlags = (
-			program: string,
-			flags: Set<string>,
-			allowed: string[]
-		) => {
-			for (const f of flags) {
-				if (!allowed.includes(f)) {
-					processApi.stderr(
-						`${program}: unrecognized option -${f}\n`
-					);
-					return false;
-				}
-			}
-			return true;
-		};
-		const resolvePath = (path: string, cwd: string) => {
-			if (!path || path === '.') {
-				return cwd;
-			}
-			return normalizePath(
-				path.startsWith('/') ? path : joinPaths(cwd, path)
-			);
-		};
 
 		// Mock programs required by wp-cli:
-		if (binaryName === 'env') {
-			// Minimal env support: env stty size
-			if (argv[0] === 'stty' && argv[1] === 'size') {
-				// These numbers are hardcoded because this handler is stringified.
-				processApi.stdout(`18 140`);
-				processApi.exit(0);
-				return;
-			}
-			processApi.stderr('env: unsupported invocation\n');
-			processApi.exit(1);
+		if (
+			args[0] === '/usr/bin/env' &&
+			args[1] === 'stty' &&
+			args[2] === 'size'
+		) {
+			// These numbers are hardcoded because this
+			// spawnHandler is transmitted as a string to
+			// the PHP backend and has no access to local
+			// scope. It would be nice to find a way to
+			// transfer / proxy a live object instead.
+			// @TODO: Do not hardcode this
+			processApi.stdout(`18 140`);
+			processApi.exit(0);
 			return;
-		} else if (binaryName === 'tput') {
-			if (argv[0] === 'cols') {
-				processApi.stdout(`140`);
-				processApi.exit(0);
-				return;
-			}
-			processApi.stderr(
-				`tput: unknown capability ${argv[0] ? `'${argv[0]}'` : "''"}\n`
-			);
-			processApi.exit(1);
+		} else if (binaryName === 'tput' && args[1] === 'cols') {
+			processApi.stdout(`140`);
+			processApi.exit(0);
 			return;
 		} else if (binaryName === 'less') {
 			processApi.on('stdin', (data: Uint8Array) => {
@@ -133,6 +82,7 @@ export function sandboxedSpawnHandlerFactory(
 						// @see https://github.com/wp-cli/wp-cli/issues/1102
 						SHELL_PIPE: '0',
 					},
+					cwd: options.cwd,
 				});
 
 				result.stdout.pipeTo(
@@ -150,295 +100,16 @@ export function sandboxedSpawnHandlerFactory(
 					})
 				);
 				processApi.exit(await result.exitCode);
+			} else if (binaryName === 'ls') {
+				const files = php.listFiles(args[1] ?? cwd);
+				files.forEach((file) => {
+					processApi.stdout(file + '\n');
+				});
+				await new Promise((resolve) => setTimeout(resolve, 10));
+				processApi.exit(0);
 			} else if (binaryName === 'pwd') {
-				const { flags, rest } = parseFlags(argv);
-				if (!validateAllowedFlags('pwd', flags, [])) {
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				if (rest.length) {
-					processApi.stderr('pwd: too many arguments\n');
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
 				processApi.stdout(cwd + '\n');
-				await sleep(1);
-				processApi.exit(0);
-			} else if (binaryName === 'cd') {
-				const { flags, rest } = parseFlags(argv);
-				if (!validateAllowedFlags('cd', flags, [])) {
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				const target = rest[0] ? resolvePath(rest[0], cwd) : cwd;
-				if (!php.isDir(target)) {
-					processApi.stderr(
-						`cd: no such file or directory: ${rest[0] || target}\n`
-					);
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				php.chdir(target);
-				await sleep(1);
-				processApi.exit(0);
-			} else if (binaryName === 'mkdir') {
-				const { flags, rest } = parseFlags(argv);
-				if (!validateAllowedFlags('mkdir', flags, [])) {
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				if (!rest.length) {
-					processApi.stderr('mkdir: missing operand\n');
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				let failed = false;
-				for (const p of rest) {
-					try {
-						php.mkdir(resolvePath(p, cwd));
-					} catch (e: any) {
-						failed = true;
-						processApi.stderr(`mkdir: ${e?.message || e}\n`);
-					}
-				}
-				await sleep(1);
-				processApi.exit(failed ? 1 : 0);
-			} else if (binaryName === 'touch') {
-				const { flags, rest } = parseFlags(argv);
-				if (!validateAllowedFlags('touch', flags, [])) {
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				if (!rest.length) {
-					processApi.stderr('touch: missing file operand\n');
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				let failed = false;
-				for (const p of rest) {
-					const abs = resolvePath(p, cwd);
-					try {
-						if (php.isDir(abs)) {
-							processApi.stderr(
-								`touch: not a regular file: ${p}\n`
-							);
-							failed = true;
-							continue;
-						}
-						if (!php.fileExists(abs)) {
-							php.mkdir(dirname(abs));
-							php.writeFile(abs, new Uint8Array());
-						} else if (php.isFile(abs)) {
-							// No-op: pretend timestamp updated
-						}
-					} catch (e: any) {
-						failed = true;
-						processApi.stderr(`touch: ${e?.message || e}\n`);
-					}
-				}
-				await sleep(1);
-				processApi.exit(failed ? 1 : 0);
-			} else if (binaryName === 'cp') {
-				const { flags, rest } = parseFlags(argv);
-				if (!validateAllowedFlags('cp', flags, ['r'])) {
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				if (rest.length < 2) {
-					processApi.stderr('cp: missing file operand\n');
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				const recursive = flags.has('r');
-				const dest = resolvePath(rest[rest.length - 1], cwd);
-				const sources = rest
-					.slice(0, -1)
-					.map((p) => resolvePath(p, cwd));
-				const destIsDir = php.isDir(dest);
-				if (sources.length > 1 && !destIsDir) {
-					processApi.stderr('cp: target is not a directory\n');
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				let failed = false;
-				const copyFile = (src: string, to: string) => {
-					const data = php.readFileAsBuffer(src);
-					php.mkdir(dirname(to));
-					php.writeFile(to, data);
-				};
-				const copyRecursive = (src: string, to: string) => {
-					if (php.isDir(src)) {
-						php.mkdir(to);
-						for (const name of php.listFiles(src)) {
-							copyRecursive(
-								joinPaths(src, name),
-								joinPaths(to, name)
-							);
-						}
-					} else {
-						copyFile(src, to);
-					}
-				};
-				for (const src of sources) {
-					try {
-						if (!php.fileExists(src)) {
-							throw new Error(
-								`no such file or directory: ${src}`
-							);
-						}
-						const target = destIsDir
-							? joinPaths(dest, basename(src))
-							: dest;
-						if (php.isDir(src)) {
-							if (!recursive) {
-								throw new Error('omitting directory (use -r)');
-							}
-							copyRecursive(src, target);
-						} else {
-							copyFile(src, target);
-						}
-					} catch (e: any) {
-						failed = true;
-						processApi.stderr(`cp: ${e?.message || e}\n`);
-					}
-				}
-				await sleep(1);
-				processApi.exit(failed ? 1 : 0);
-			} else if (binaryName === 'mv') {
-				const { flags, rest } = parseFlags(argv);
-				if (!validateAllowedFlags('mv', flags, [])) {
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				if (rest.length < 2) {
-					processApi.stderr('mv: missing file operand\n');
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				const dest = resolvePath(rest[rest.length - 1], cwd);
-				const sources = rest
-					.slice(0, -1)
-					.map((p) => resolvePath(p, cwd));
-				const destIsDir = php.isDir(dest);
-				if (sources.length > 1 && !destIsDir) {
-					processApi.stderr('mv: target is not a directory\n');
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				let failed = false;
-				for (const src of sources) {
-					try {
-						if (!php.fileExists(src)) {
-							throw new Error(
-								`no such file or directory: ${src}`
-							);
-						}
-						const target = destIsDir
-							? joinPaths(dest, basename(src))
-							: dest;
-						php.mv(src, target);
-					} catch (e: any) {
-						failed = true;
-						processApi.stderr(`mv: ${e?.message || e}\n`);
-					}
-				}
-				await sleep(1);
-				processApi.exit(failed ? 1 : 0);
-			} else if (binaryName === 'rm') {
-				const { flags, rest } = parseFlags(argv);
-				if (!validateAllowedFlags('rm', flags, ['r'])) {
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				if (!rest.length) {
-					processApi.stderr('rm: missing operand\n');
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				const recursive = flags.has('r');
-				let failed = false;
-				for (const p of rest) {
-					const abs = resolvePath(p, cwd);
-					try {
-						if (!php.fileExists(abs)) {
-							throw new Error(`no such file or directory: ${p}`);
-						}
-						if (php.isDir(abs)) {
-							if (!recursive) {
-								throw new Error('is a directory (use -r)');
-							}
-							php.rmdir(abs, { recursive: true });
-						} else {
-							php.unlink(abs);
-						}
-					} catch (e: any) {
-						failed = true;
-						processApi.stderr(`rm: ${e?.message || e}\n`);
-					}
-				}
-				await sleep(1);
-				processApi.exit(failed ? 1 : 0);
-			} else if (binaryName === 'ls') {
-				const { flags, rest } = parseFlags(argv);
-				if (!validateAllowedFlags('ls', flags, ['r'])) {
-					await sleep(1);
-					processApi.exit(1);
-					return;
-				}
-				const recursive = flags.has('r');
-				const targets = rest.length ? rest : [cwd];
-				const listOne = (root: string) => {
-					const items = php.listFiles(root);
-					for (const name of items) {
-						processApi.stdout(name + '\n');
-					}
-				};
-				const listRecursive = (root: string) => {
-					const walk = (dir: string, prefix = '') => {
-						for (const name of php.listFiles(dir)) {
-							const rel = prefix ? joinPaths(prefix, name) : name;
-							processApi.stdout(rel + '\n');
-							const child = joinPaths(dir, name);
-							if (php.isDir(child)) {
-								walk(child, rel);
-							}
-						}
-					};
-					walk(root, '');
-				};
-				for (const t of targets) {
-					const abs = resolvePath(t, cwd);
-					if (!php.fileExists(abs)) {
-						processApi.stderr(
-							`ls: no such file or directory: ${t}\n`
-						);
-						continue;
-					}
-					if (recursive) {
-						listRecursive(abs);
-					} else if (php.isDir(abs)) {
-						listOne(abs);
-					} else {
-						processApi.stdout(basename(abs) + '\n');
-					}
-				}
-				await sleep(10);
+				await new Promise((resolve) => setTimeout(resolve, 10));
 				processApi.exit(0);
 			} else {
 				// 127 is the exit code for command not found.
diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index 55609ddf5b..6b77f9ca21 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -1,16 +1,24 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from 'react';
 import {
 	__experimentalTreeGrid as TreeGrid,
 	__experimentalTreeGridRow as TreeGridRow,
 	__experimentalTreeGridCell as TreeGridCell,
 	Button,
-	Spinner,
 } from '@wordpress/components';
-import { Icon, chevronRight, chevronDown } from '@wordpress/icons';
+import { Icon, chevronDown, chevronRight } from '@wordpress/icons';
 import '@wordpress/components/build-style/style.css';
 import css from './style.module.css';
 import classNames from 'classnames';
-import { folder, file } from '../icons';
+import { file, folder } from '../icons';
+
+type ExpandedNodePaths = Record<string, boolean>;
 
 export type FileNode = {
 	name: string;
@@ -18,12 +26,11 @@ export type FileNode = {
 	children?: FileNode[];
 };
 
-export type FilePickerControlProps = {
+export type FilePickerTreeProps = {
 	files: FileNode[];
 	initialPath?: string;
-	onSelect?: (path: string) => void;
-	isLoading?: boolean;
 	error?: string;
+	onSelect?: (path: string) => void;
 	onLoadChildren?: (path: string) => Promise<FileNode[]>;
 	onContextMenu?: (
 		event: React.MouseEvent,
@@ -34,88 +41,79 @@ export type FilePickerControlProps = {
 	onRename?: (path: string, newName: string) => void;
 	onRenameCancel?: (path: string) => void;
 	autoFocus?: boolean;
-	// Optional: invalidate a specific folder path cache and reload its children without remounting
-	invalidatePath?: string | null;
-	// Optional: change this to force re-invalidation even if the path is the same
-	invalidateKey?: number;
-	// Optional: remap expanded paths and cached children after a directory rename
-	renameMapping?: { from: string; to: string } | null;
-	// Optional: bump to apply a new rename mapping
-	renameKey?: number;
-	// Optional: explicitly request focusing a particular node path
-	focusPathRequest?: string | null;
-	// Optional: bump to trigger a focus request
-	focusRequestKey?: number;
-	// Optional: request expanding a particular path's ancestor chain
-	expandPathRequest?: string | null;
-	// Optional: bump to trigger an expand request
-	expandRequestKey?: number;
 };
 
-type ExpandedNodePaths = Record<string, boolean>;
-
-type LoadedChildrenMap = Record<string, FileNode[]>;
+export type FilePickerTreeHandle = {
+	focusPath: (
+		path: string,
+		options?: { select?: boolean; domFocus?: boolean; notify?: boolean }
+	) => void;
+	selectPath: (path: string) => void;
+	expandToPath: (path: string) => Promise<void>;
+	refresh: (path: string) => Promise<FileNode[] | undefined>;
+	remapPath: (from: string, to: string) => void;
+};
 
-export const FilePickerTree: React.FC<FilePickerControlProps> = ({
-	isLoading = false,
-	error = undefined,
-	files,
-	initialPath,
-	onSelect = () => {},
-	onLoadChildren,
-	onContextMenu,
-	renamingPath = null,
-	onRename,
-	onRenameCancel,
-	autoFocus = true,
-	invalidatePath = null,
-	invalidateKey = 0,
-	renameMapping = null,
-	renameKey = 0,
-	focusPathRequest = null,
-	focusRequestKey = 0,
-	expandPathRequest = null,
-	expandRequestKey = 0,
-}) => {
-	function buildPathChain(path: string): string[] {
-		if (!path) return [];
-		const normalized =
-			path
-				.replaceAll(/\\+/g, '/')
-				.replace(/\/{2,}/g, '/')
-				.replace(/\/$/, '') || path;
-		const hasLeadingSlash = normalized.startsWith('/');
-		const parts = normalized.split('/').filter(Boolean);
-		const chain: string[] = [];
-		let current = hasLeadingSlash ? '/' : '';
-		if (hasLeadingSlash) chain.push('/');
-		for (const part of parts) {
-			if (!current || current === '/') {
-				current = current === '/' ? `/${part}` : part;
-			} else {
-				current = `${current}/${part}`;
-			}
-			chain.push(current);
+function buildPathChain(path: string): string[] {
+	if (!path) return [];
+	const normalized =
+		path
+			.replaceAll(/\\+/g, '/')
+			.replace(/\/{2,}/g, '/')
+			.replace(/\/$/, '') || path;
+	const hasLeadingSlash = normalized.startsWith('/');
+	const parts = normalized.split('/').filter(Boolean);
+	const chain: string[] = [];
+	let current = hasLeadingSlash ? '/' : '';
+	if (hasLeadingSlash) chain.push('/');
+	for (const part of parts) {
+		if (!current || current === '/') {
+			current = current === '/' ? `/${part}` : part;
+		} else {
+			current = `${current}/${part}`;
 		}
-		return chain;
+		chain.push(current);
 	}
+	return chain;
+}
+
+export const FilePickerTree = forwardRef<
+	FilePickerTreeHandle,
+	FilePickerTreeProps
+>(function FilePickerTree(
+	{
+		files,
+		initialPath,
+		error,
+		onSelect = () => {},
+		onLoadChildren,
+		onContextMenu,
+		renamingPath = null,
+		onRename,
+		onRenameCancel,
+		autoFocus = true,
+	},
+	ref
+) {
 	const [expanded, setExpanded] = useState<ExpandedNodePaths>(() => {
 		if (!initialPath) {
 			return {};
 		}
 		const initialExpanded: ExpandedNodePaths = {};
-		for (const p of buildPathChain(initialPath)) {
-			initialExpanded[p] = true;
+		for (const path of buildPathChain(initialPath)) {
+			initialExpanded[path] = true;
 		}
 		return initialExpanded;
 	});
-	const [selectedPath, setSelectedPath] = useState<string | null>(() =>
-		initialPath ? initialPath : null
+	const [selectedPath, setSelectedPath] = useState<string | null>(
+		() => initialPath ?? null
 	);
-	const [focusedPath, setFocusedPath] = useState<string | null>(() =>
-		initialPath ? initialPath : null
+	const [focusedPath, setFocusedPath] = useState<string | null>(
+		() => initialPath ?? null
 	);
-	const [lazyChildren, setLazyChildren] = useState<LoadedChildrenMap>({});
+	const [lazyChildren, setLazyChildren] = useState<
+		Record<string, FileNode[]>
+	>({});
 	const [loadingPaths, setLoadingPaths] = useState<Record<string, boolean>>(
 		{}
 	);
@@ -123,28 +121,23 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	const containerRef = useRef<HTMLDivElement>(null);
 	const searchBufferTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 	const loadingPathsRef = useRef(loadingPaths);
+	const lazyChildrenRef = useRef(lazyChildren);
 
 	useEffect(() => {
 		loadingPathsRef.current = loadingPaths;
 	}, [loadingPaths]);
 
-	const expandNode = useCallback((path: string, isOpen: boolean) => {
-		setExpanded((prevState) => ({
-			...prevState,
-			[path]: isOpen,
-		}));
-	}, []);
-
-	const selectPath = useCallback(
-		(path: string) => {
-			setSelectedPath(path);
-			onSelect(path);
-		},
-		[onSelect]
-	);
+	useEffect(() => {
+		lazyChildrenRef.current = lazyChildren;
+	}, [lazyChildren]);
 
-	const focusPath = useCallback((path: string) => {
-		setFocusedPath(path);
+	const focusDomNode = useCallback((path: string) => {
+		const focusTarget = containerRef.current?.querySelector(
+			`[data-path="${path}"]`
+		) as HTMLElement | null;
+		if (focusTarget && typeof focusTarget.focus === 'function') {
+			focusTarget.focus();
+		}
 	}, []);
 
 	const generatePath = useCallback(
@@ -155,26 +148,6 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		[]
 	);
 
-	// Only use initialPath for the initial mount to prevent flicker when switching directories
-	const hasInitializedRef = useRef(false);
-	useEffect(() => {
-		if (!initialPath || hasInitializedRef.current) {
-			return;
-		}
-		hasInitializedRef.current = true;
-		const chain = buildPathChain(initialPath);
-		setExpanded((prev) => {
-			const next = { ...prev } as ExpandedNodePaths;
-			for (const p of chain) {
-				next[p] = true;
-			}
-			return next;
-		});
-		const target = chain[chain.length - 1] || initialPath;
-		setFocusedPath(target);
-		setSelectedPath(target);
-	}, [initialPath]);
-
 	const getResolvedChildren = useCallback(
 		(node: FileNode, path: string): FileNode[] | undefined => {
 			if (node.children) {
@@ -188,16 +161,38 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 	const loadChildrenForPath = useCallback(
 		async (path: string, node: FileNode) => {
 			if (!onLoadChildren || node.type !== 'folder') {
-				return;
+				return node.children;
 			}
-			const existingChildren = node.children ?? lazyChildren[path];
+			const existingChildren =
+				node.children ?? lazyChildrenRef.current[path];
 			if (existingChildren || loadingPathsRef.current[path]) {
 				return existingChildren;
 			}
-			setLoadingPaths((prev) => ({
-				...prev,
-				[path]: true,
-			}));
+			setLoadingPaths((prev) => ({ ...prev, [path]: true }));
+			try {
+				const children = await onLoadChildren(path);
+				setLazyChildren((prev) => ({
+					...prev,
+					[path]: children ?? [],
+				}));
+				return children;
+			} finally {
+				setLoadingPaths((prev) => {
+					const next = { ...prev };
+					delete next[path];
+					return next;
+				});
+			}
+		},
+		[onLoadChildren]
+	);
+
+	const refreshChildren = useCallback(
+		async (path: string) => {
+			if (!onLoadChildren) {
+				return undefined;
+			}
+			setLoadingPaths((prev) => ({ ...prev, [path]: true }));
 			try {
 				const children = await onLoadChildren(path);
 				setLazyChildren((prev) => ({
@@ -216,62 +211,70 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		[onLoadChildren]
 	);
 
-	const handleToggleExpand = useCallback(
+	const toggleNode = useCallback(
 		async (path: string, node: FileNode, isOpen: boolean) => {
-			expandNode(path, isOpen);
+			setExpanded((prev) => ({
+				...prev,
+				[path]: isOpen,
+			}));
 			if (isOpen) {
 				await loadChildrenForPath(path, node);
 			} else {
-				// Clear cached children on collapse so that reopening refreshes the listing
 				setLazyChildren((prev) => {
-					if (prev[path] === undefined) return prev;
-					const next = { ...prev } as LoadedChildrenMap;
+					if (prev[path] === undefined) {
+						return prev;
+					}
+					const next = { ...prev } as Record<string, FileNode[]>;
 					delete next[path];
 					return next;
 				});
 			}
 		},
-		[expandNode, loadChildrenForPath]
+		[loadChildrenForPath]
 	);
 
-	// Invalidate a folder's children and refresh them in-place without clearing first,
-	// preventing a brief empty state (visible flicker) during rename/delete/create.
-	useEffect(() => {
-		if (!invalidatePath) {
-			return;
-		}
-		// Always reload to get updated child names after operations like rename
-		if (onLoadChildren) {
-			setLoadingPaths((prev) => ({
-				...prev,
-				[invalidatePath]: true,
-			}));
-			void onLoadChildren(invalidatePath)
-				.then((children) => {
-					setLazyChildren((prev) => ({
-						...prev,
-						[invalidatePath]: children ?? [],
-					}));
-				})
-				.finally(() => {
-					setLoadingPaths((prev) => {
-						const next = { ...prev };
-						delete next[invalidatePath as string];
-						return next;
-					});
+	const expandToPath = useCallback(
+		async (targetPath: string) => {
+			if (!targetPath) return;
+			const chain = buildPathChain(targetPath);
+			if (chain.length === 0) return;
+			setExpanded((prev) => {
+				const next = { ...prev } as ExpandedNodePaths;
+				for (const segment of chain) {
+					next[segment] = true;
+				}
+				return next;
+			});
+			if (!onLoadChildren) {
+				return;
+			}
+
+			let currentChildren: FileNode[] | undefined = files;
+			let parentPath = '';
+			for (const segmentPath of chain) {
+				const nextNode = currentChildren?.find((child) => {
+					const childPath = generatePath(child, parentPath);
+					return childPath === segmentPath;
 				});
-		}
-	}, [invalidatePath, invalidateKey, onLoadChildren]);
+				if (!nextNode || nextNode.type !== 'folder') {
+					parentPath = segmentPath;
+					currentChildren = [];
+					continue;
+				}
+				const loaded = await loadChildrenForPath(segmentPath, nextNode);
+				currentChildren =
+					loaded ?? lazyChildrenRef.current[segmentPath];
+				parentPath = segmentPath;
+			}
+		},
+		[files, generatePath, loadChildrenForPath, onLoadChildren]
+	);
 
-	// Preserve expansion and cached children across directory rename by remapping
-	// path keys from old to new. Also update selection and focus if they were inside.
-	useEffect(() => {
-		if (!renameMapping) {
+	const remapPathState = useCallback((from: string, to: string) => {
+		if (!from || !to || from === to) {
 			return;
 		}
-		const { from, to } = renameMapping;
-		const withTrailingSlash = from.endsWith('/') ? from : `${from}`;
-		const fromPrefix = withTrailingSlash + (from === '/' ? '' : '/');
+		const fromPrefix = from === '/' ? '/' : `${from}/`;
 		const remapKey = (key: string): string | null => {
 			if (key === from) return to;
 			if (key.startsWith(fromPrefix)) {
@@ -286,9 +289,7 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 			for (const key of Object.keys(prev)) {
 				const mapped = remapKey(key);
 				if (mapped && mapped !== key) {
-					if (!next[mapped]) {
-						next[mapped] = prev[key];
-					}
+					next[mapped] = prev[key];
 					delete next[key];
 					changed = true;
 				}
@@ -298,13 +299,11 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 
 		setLazyChildren((prev) => {
 			let changed = false;
-			const next: LoadedChildrenMap = { ...prev };
+			const next = { ...prev } as Record<string, FileNode[]>;
 			for (const key of Object.keys(prev)) {
 				const mapped = remapKey(key);
 				if (mapped && mapped !== key) {
-					if (next[mapped] === undefined) {
-						next[mapped] = prev[key];
-					}
+					next[mapped] = prev[key];
 					delete next[key];
 					changed = true;
 				}
@@ -322,115 +321,83 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 			const mapped = remapKey(prev);
 			return mapped ?? prev;
 		});
-	}, [renameKey, renameMapping]);
+	}, []);
 
-	// Explicit focus requests: set selection/focus and move DOM focus without relying on autoFocus
-	useEffect(() => {
-		if (!focusPathRequest) {
-			return;
-		}
-		setSelectedPath(focusPathRequest);
-		setFocusedPath(focusPathRequest);
-		const focusTarget = containerRef.current?.querySelector(
-			`[data-path="${focusPathRequest}"]`
-		) as HTMLElement | null;
-		if (focusTarget && typeof focusTarget.focus === 'function') {
-			focusTarget.focus();
-		}
-	}, [focusRequestKey, focusPathRequest, files, lazyChildren]);
+	const selectPath = useCallback(
+		(path: string, notify = true) => {
+			setSelectedPath(path);
+			if (notify) {
+				onSelect(path);
+			}
+		},
+		[onSelect]
+	);
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			focusPath: (
+				path: string,
+				options: {
+					select?: boolean;
+					domFocus?: boolean;
+					notify?: boolean;
+				} = {}
+			) => {
+				if (!path) return;
+				const {
+					select = true,
+					domFocus = true,
+					notify = false,
+				} = options;
+				if (select) {
+					selectPath(path, notify);
+				}
+				setFocusedPath(path);
+				if (domFocus) {
+					focusDomNode(path);
+				}
+			},
+			selectPath: (path: string) => {
+				if (!path) return;
+				selectPath(path);
+				setFocusedPath(path);
+				focusDomNode(path);
+			},
+			expandToPath,
+			refresh: refreshChildren,
+			remapPath: remapPathState,
+		}),
+		[
+			expandToPath,
+			focusDomNode,
+			refreshChildren,
+			remapPathState,
+			selectPath,
+		]
+	);
 
-	// Expand request: expand the path's ancestor chain and load children in-place
+	const hasInitializedRef = useRef(false);
 	useEffect(() => {
-		if (!expandPathRequest) {
+		if (!initialPath || hasInitializedRef.current) {
 			return;
 		}
-		const chain = buildPathChain(expandPathRequest);
+		hasInitializedRef.current = true;
+		const chain = buildPathChain(initialPath);
 		setExpanded((prev) => {
 			const next = { ...prev } as ExpandedNodePaths;
-			for (const p of chain) {
-				next[p] = true;
+			for (const path of chain) {
+				next[path] = true;
 			}
 			return next;
 		});
+		const target = chain[chain.length - 1] || initialPath;
+		setFocusedPath(target);
+		setSelectedPath(target);
 		if (onLoadChildren) {
-			for (const p of chain) {
-				setLoadingPaths((prev) => ({ ...prev, [p]: true }));
-				void onLoadChildren(p)
-					.then((children) => {
-						setLazyChildren((prev) => ({
-							...prev,
-							[p]: children ?? [],
-						}));
-					})
-					.finally(() => {
-						setLoadingPaths((prev) => {
-							const next = { ...prev };
-							delete next[p];
-							return next;
-						});
-					});
-			}
-		}
-	}, [expandRequestKey, expandPathRequest, onLoadChildren]);
-
-	// Auto-expand and load the root when it is '/'
-	useEffect(() => {
-		if (!onLoadChildren || files.length === 0) {
-			return;
-		}
-		const rootNode = files[0];
-		if (rootNode?.type === 'folder' && rootNode.name === '/') {
-			setExpanded((prev) => (prev['/'] ? prev : { ...prev, '/': true }));
-			if (!lazyChildren['/'] && !loadingPathsRef.current['/']) {
-				void loadChildrenForPath('/', rootNode);
-			}
-		}
-	}, [files, onLoadChildren, lazyChildren, loadChildrenForPath]);
-
-	useEffect(() => {
-		if (!initialPath || !onLoadChildren) {
-			return;
+			void expandToPath(initialPath);
 		}
-
-		let isMounted = true;
-		const loadInitialPath = async () => {
-			const chain = buildPathChain(initialPath);
-			let currentChildren = files;
-			let parentPath = '';
-			for (let i = 0; i < chain.length; i++) {
-				const segmentPath = chain[i];
-				const nextNode = currentChildren?.find((child) => {
-					const childPath = generatePath(child, parentPath);
-					return childPath === segmentPath;
-				});
-				if (!nextNode) {
-					break;
-				}
-				if (nextNode.type !== 'folder') {
-					currentChildren = [];
-					continue;
-				}
-				const existingChildren =
-					nextNode.children ?? lazyChildren[segmentPath];
-				if (!existingChildren && isMounted) {
-					const loaded = await loadChildrenForPath(
-						segmentPath,
-						nextNode
-					);
-					currentChildren = loaded ?? [];
-				} else {
-					currentChildren = existingChildren ?? [];
-				}
-				parentPath = segmentPath;
-			}
-		};
-
-		loadInitialPath();
-
-		return () => {
-			isMounted = false;
-		};
-	}, [initialPath, files, onLoadChildren, loadChildrenForPath]);
+	}, [initialPath, expandToPath, onLoadChildren]);
 
 	useEffect(() => {
 		if (!focusedPath) {
@@ -446,21 +413,30 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 		if (!autoFocus) {
 			return;
 		}
-		const focusTarget = containerRef.current?.querySelector(
-			`[data-path="${focusedPath}"]`
-		) as HTMLElement | null;
-		if (focusTarget && typeof focusTarget.focus === 'function') {
-			focusTarget.focus();
-		}
+		focusDomNode(focusedPath);
 	}, [
 		autoFocus,
 		files,
 		focusedPath,
 		generatePath,
-		lazyChildren,
 		renamingPath,
+		focusDomNode,
 	]);
 
+	useEffect(() => {
+		if (!onLoadChildren || files.length === 0) {
+			return;
+		}
+		const rootNode = files[0];
+		if (rootNode?.type !== 'folder' || rootNode.name !== '/') {
+			return;
+		}
+		setExpanded((prev) => (prev['/'] ? prev : { ...prev, '/': true }));
+		if (!lazyChildrenRef.current['/'] && !loadingPathsRef.current['/']) {
+			void loadChildrenForPath('/', rootNode);
+		}
+	}, [files, onLoadChildren, loadChildrenForPath]);
+
 	useEffect(() => {
 		return () => {
 			if (searchBufferTimeoutRef.current) {
@@ -471,7 +447,7 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 
 	const [searchBuffer, setSearchBuffer] = useState('');
 
-	function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
 		if (event.key.length === 1 && event.key.match(/\S/)) {
 			const newSearchBuffer = searchBuffer + event.key.toLowerCase();
 			setSearchBuffer(newSearchBuffer);
@@ -481,37 +457,37 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 			searchBufferTimeoutRef.current = setTimeout(() => {
 				setSearchBuffer('');
 			}, 1000);
-
-			if (containerRef.current) {
-				const buttons = Array.from(
-					containerRef.current.querySelectorAll('.file-node-button')
+			if (!containerRef.current) {
+				return;
+			}
+			const buttons = Array.from(
+				containerRef.current.querySelectorAll('.file-node-button')
+			);
+			const activeElement = document.activeElement;
+			let startIndex = 0;
+			if (
+				activeElement &&
+				buttons.includes(activeElement as HTMLButtonElement)
+			) {
+				startIndex = buttons.indexOf(
+					activeElement as HTMLButtonElement
 				);
-				const activeElement = document.activeElement;
-				let startIndex = 0;
+			}
+			for (let i = 0; i < buttons.length; i++) {
+				const index = (startIndex + i) % buttons.length;
+				const button = buttons[index] as HTMLElement;
 				if (
-					activeElement &&
-					buttons.includes(activeElement as HTMLButtonElement)
+					button.textContent
+						?.toLowerCase()
+						.trim()
+						.startsWith(newSearchBuffer)
 				) {
-					startIndex = buttons.indexOf(
-						activeElement as HTMLButtonElement
-					);
-				}
-				for (let i = 0; i < buttons.length; i++) {
-					const index = (startIndex + i) % buttons.length;
-					const button = buttons[index] as HTMLElement;
-					if (
-						button.textContent
-							?.toLowerCase()
-							.trim()
-							.startsWith(newSearchBuffer)
-					) {
-						button.focus();
-						const path = button.getAttribute('data-path');
-						if (path) {
-							focusPath(path);
-						}
-						break;
+					button.focus();
+					const path = button.getAttribute('data-path');
+					if (path) {
+						setFocusedPath(path);
 					}
+					break;
 				}
 			}
 		} else {
@@ -520,15 +496,7 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 				clearTimeout(searchBufferTimeoutRef.current);
 			}
 		}
-	}
-
-	if (isLoading) {
-		return (
-			<div className={css['loadingContainer']}>
-				<Spinner />
-			</div>
-		);
-	}
+	};
 
 	if (error) {
 		return (
@@ -550,14 +518,13 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 						position={index + 1}
 						setSize={files.length}
 						expandedNodePaths={expanded}
-						expandNode={handleToggleExpand}
+						onToggle={toggleNode}
 						selectedNode={selectedPath}
+						focusPath={(path) => setFocusedPath(path)}
 						focusedNode={focusedPath}
 						selectPath={selectPath}
-						focusPath={focusPath}
 						generatePath={generatePath}
 						getChildren={getResolvedChildren}
-						loadingPaths={loadingPaths}
 						onContextMenu={onContextMenu}
 						renamingPath={renamingPath}
 						onRename={onRename}
@@ -567,7 +534,7 @@ export const FilePickerTree: React.FC<FilePickerControlProps> = ({
 			</TreeGrid>
 		</div>
 	);
-};
+});
 
 const NodeRow: React.FC<{
 	node: FileNode;
@@ -575,18 +542,17 @@ const NodeRow: React.FC<{
 	position: number;
 	setSize: number;
 	expandedNodePaths: ExpandedNodePaths;
-	expandNode: (
+	onToggle: (
 		path: string,
 		node: FileNode,
 		isOpen: boolean
 	) => void | Promise<void>;
-	selectPath: (path: string) => void;
 	selectedNode: string | null;
 	focusPath: (path: string) => void;
 	focusedNode: string | null;
+	selectPath: (path: string, notify?: boolean) => void;
 	generatePath: (node: FileNode, parentPath?: string) => string;
 	getChildren: (node: FileNode, path: string) => FileNode[] | undefined;
-	loadingPaths: Record<string, boolean>;
 	onContextMenu?: (
 		event: React.MouseEvent,
 		node: FileNode,
@@ -602,14 +568,13 @@ const NodeRow: React.FC<{
 	position,
 	setSize,
 	expandedNodePaths,
-	expandNode,
-	selectPath,
+	onToggle,
 	selectedNode,
 	focusPath,
 	focusedNode,
+	selectPath,
 	generatePath,
 	getChildren,
-	loadingPaths,
 	onContextMenu,
 	renamingPath,
 	onRename,
@@ -643,7 +608,7 @@ const NodeRow: React.FC<{
 
 	const toggleOpen = () => {
 		if (node.type === 'folder') {
-			expandNode(path, node, !isExpanded);
+			onToggle(path, node, !isExpanded);
 		}
 	};
 
@@ -684,7 +649,7 @@ const NodeRow: React.FC<{
 			event.key === 'Spacebar'
 		) {
 			if (node.type === 'folder') {
-				expandNode(path, node, !isExpanded);
+				onToggle(path, node, !isExpanded);
 			}
 			event.preventDefault();
 		} else if (event.key === 'Enter') {
@@ -719,7 +684,6 @@ const NodeRow: React.FC<{
 			onRenameCancel?.(path);
 			return;
 		}
-		// Allow text navigation with arrow keys while renaming – prevent tree navigation
 		if (
 			event.key === 'ArrowLeft' ||
 			event.key === 'ArrowRight' ||
@@ -832,14 +796,13 @@ const NodeRow: React.FC<{
 						position={index + 1}
 						setSize={resolvedChildren.length}
 						expandedNodePaths={expandedNodePaths}
-						expandNode={expandNode}
-						selectPath={selectPath}
+						onToggle={onToggle}
 						selectedNode={selectedNode}
 						focusPath={focusPath}
 						focusedNode={focusedNode}
+						selectPath={selectPath}
 						generatePath={generatePath}
 						getChildren={getChildren}
-						loadingPaths={loadingPaths}
 						onContextMenu={onContextMenu}
 						renamingPath={renamingPath}
 						onRename={onRename}
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index ccea43c598..83d600d555 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import React, {
 	forwardRef,
 	useCallback,
@@ -8,10 +7,12 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
-import type { FileNode } from '@wp-playground/components';
+import type { FileNode, FilePickerTreeHandle } from '@wp-playground/components';
 import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
 import type { PlaygroundClient } from '@wp-playground/client';
 import styles from './layout.module.css';
+import saveAs from 'file-saver';
+import { zipDirectory } from '@wp-playground/common';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import { setCode, setCurrentPath } from '../store';
 
@@ -128,9 +129,12 @@ const PlaygroundFilePickerTree = forwardRef<
 		() => getBaseName(normalizedRoot),
 		[normalizedRoot]
 	);
+	const excludePathsKey = useMemo(
+		() => JSON.stringify(excludePaths ?? []),
+		[excludePaths]
+	);
 
 	const [files, setFiles] = useState<FileNode[]>([]);
-	const [isRootLoading, setIsRootLoading] = useState(false);
 	const [contextMenu, setContextMenu] = useState<{
 		path: string;
 		type: 'file' | 'folder';
@@ -140,31 +144,53 @@ const PlaygroundFilePickerTree = forwardRef<
 	const [localRenamingPath, setLocalRenamingPath] = useState<string | null>(
 		null
 	);
-	const [invalidatePath, setInvalidatePath] = useState<string | null>(null);
-	const [invalidateKey, setInvalidateKey] = useState(0);
-	const [renameMapping, setRenameMapping] = useState<{
-		from: string;
-		to: string;
-	} | null>(null);
-	const [renameKey, setRenameKey] = useState(0);
-	const [focusRequestPath, setFocusRequestPath] = useState<string | null>(
-		null
-	);
-	const [focusRequestKey, setFocusRequestKey] = useState(0);
-	const [expandRequestPath, setExpandRequestPath] = useState<string | null>(
-		null
-	);
-	const [expandRequestKey, setExpandRequestKey] = useState(0);
+	const treeRef = useRef<FilePickerTreeHandle>(null);
 	const pendingCreateRef = useRef<{
 		type: 'file' | 'folder';
 		tempPath: string;
 	} | null>(null);
+	const isMountedRef = useRef(true);
 	const [lastSelectedPath, setLastSelectedPath] = useState<string | null>(
 		initialPath ?? DEFAULT_WORKSPACE_DIR
 	);
 	const dispatch = useAppDispatch();
 	const currentPath = useAppSelector((state) => state.playground.currentPath);
 
+	const reloadRoot = useCallback(async () => {
+		if (normalizedRoot !== '/') {
+			if (!isMountedRef.current) return;
+			setFiles([{ name: rootName, type: 'folder' } as FileNode]);
+			return;
+		}
+		if (!playgroundClient) {
+			if (!isMountedRef.current) return;
+			setFiles([]);
+			return;
+		}
+		try {
+			const entries = await listDir(playgroundClient, '/');
+			const excludeSet = new Set(excludePaths ?? []);
+			const filtered = entries.filter((item) => {
+				const childAbs = `/${item.name}`;
+				return !excludeSet.has(childAbs);
+			});
+			const ordered = prioritizeRenaming(filtered, '/');
+			if (isMountedRef.current) {
+				setFiles(ordered as FileNode[]);
+			}
+		} catch {
+			if (isMountedRef.current) {
+				setFiles([]);
+			}
+		}
+	}, [excludePathsKey, normalizedRoot, playgroundClient, rootName]);
+
+	useEffect(() => {
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+
 	const getDirname = useCallback((path: string) => {
 		const p = normalizePath(path);
 		if (p === '/') return '/';
@@ -202,52 +228,19 @@ const PlaygroundFilePickerTree = forwardRef<
 		[renamingPath, getDirname, getBasename]
 	);
 
-	// Track when we need to refresh root files
-	const [rootRefreshKey, setRootRefreshKey] = useState(0);
+	const toCore = useCallback(
+		(path: string) => toCorePath(path, normalizedRoot),
+		[normalizedRoot]
+	);
 
 	useEffect(() => {
-		let cancelled = false;
-		async function init() {
-			if (normalizedRoot === '/') {
-				setIsRootLoading(true);
-				if (!playgroundClient) {
-					if (!cancelled) setFiles([]);
-					setIsRootLoading(false);
-					return;
-				}
-				const items = await listDir(playgroundClient, '/');
-				const filtered = items.filter((item) => {
-					const childAbs = `/${item.name}`;
-					return !excludePaths?.includes(childAbs);
-				});
-				const ordered = prioritizeRenaming(filtered, '/');
-				if (!cancelled) setFiles(ordered as FileNode[]);
-				setIsRootLoading(false);
-			} else {
-				if (!cancelled)
-					setFiles([
-						{ name: rootName, type: 'folder' },
-					] as FileNode[]);
-				setIsRootLoading(false);
-			}
-		}
-		init();
-		return () => {
-			cancelled = true;
-		};
-	}, [
-		normalizedRoot,
-		rootName,
-		playgroundClient,
-		JSON.stringify(excludePaths),
-		rootRefreshKey,
-	]);
+		void reloadRoot();
+	}, [reloadRoot]);
 
-	const coreInitialPath = useMemo(() => {
-		return initialPath
-			? toCorePath(initialPath, normalizedRoot)
-			: undefined;
-	}, [initialPath, normalizedRoot]);
+	const coreInitialPath = useMemo(
+		() => (initialPath ? toCore(initialPath) : undefined),
+		[initialPath, toCore]
+	);
 
 	// Dismiss context menu on outside interactions / ESC key
 	useEffect(() => {
@@ -287,120 +280,111 @@ const PlaygroundFilePickerTree = forwardRef<
 		[playgroundClient, normalizedRoot, excludePaths, prioritizeRenaming]
 	);
 
-	const handleSelect = useCallback(
-		(path: string) => {
-			const normalized = normalizePath(path);
-			setLastSelectedPath(normalized);
-			if (onSelect) onSelect(normalized);
-		},
-		[onSelect]
-	);
+	const handleSelect = (path: string) => {
+		const normalized = normalizePath(path);
+		setLastSelectedPath(normalized);
+		if (onSelect) onSelect(normalized);
+	};
 
 	const effectiveRenamingPath = useMemo(() => {
 		return renamingPath ?? localRenamingPath ?? undefined;
 	}, [renamingPath, localRenamingPath]);
 
-	const handleInternalContextMenu = useCallback(
-		(event: React.MouseEvent, node: FileNode, corePath: string) => {
-			event.preventDefault();
-			event.stopPropagation();
-			const absPath = corePathToAbsolute(corePath, normalizedRoot);
-			setLocalRenamingPath(null);
-			setContextMenu({
-				path: absPath,
-				type: node.type,
-				x: event.clientX,
-				y: event.clientY,
-			});
-			if (onContextMenu) {
-				onContextMenu(event, node, absPath);
-			}
-		},
-		[normalizedRoot, onContextMenu]
-	);
+	const handleInternalContextMenu = (
+		event: React.MouseEvent,
+		node: FileNode,
+		corePath: string
+	) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const absPath = corePathToAbsolute(corePath, normalizedRoot);
+		setLocalRenamingPath(null);
+		setContextMenu({
+			path: absPath,
+			type: node.type,
+			x: event.clientX,
+			y: event.clientY,
+		});
+		if (onContextMenu) {
+			onContextMenu(event, node, absPath);
+		}
+	};
 
-	const handleContextMenuRename = useCallback((targetPath: string) => {
+	const handleContextMenuRename = (targetPath: string) => {
 		setContextMenu(null);
 		setLocalRenamingPath(targetPath);
-	}, []);
+	};
 
 	// dirname helper not needed in this component
 
-	const findAvailableName = useCallback(
-		async (client: PlaygroundClient, baseDir: string, baseName: string) => {
-			let name = baseName;
-			let counter = 0;
-			const splitExt = (n: string) => {
-				const dot = n.lastIndexOf('.');
-				if (dot > 0) {
-					return { stem: n.slice(0, dot), ext: n.slice(dot) };
-				}
-				return { stem: n, ext: '' };
-			};
-			const prefix = baseDir === '/' ? '' : baseDir;
-			while (
-				(await client
-					.fileExists(`${prefix}/${name}`)
-					.catch(() => false)) ||
-				(await client.isDir(`${prefix}/${name}`).catch(() => false))
-			) {
-				counter += 1;
-				const { stem, ext } = splitExt(baseName);
-				name = `${stem} (${counter})${ext}`;
-			}
-			return name;
-		},
-		[]
-	);
-
-	const resolveBaseDir = useCallback(
-		(overridePath?: string) => {
-			const basePath = overridePath || lastSelectedPath;
-			if (!basePath) return DEFAULT_WORKSPACE_DIR;
-			// If selection is a folder, use it; otherwise use its dirname
-			return basePath;
-		},
-		[lastSelectedPath]
-	);
-
-	const handleCreateFile = useCallback(
-		async (targetDir?: string) => {
-			if (!playgroundClient) {
-				return;
+	const findAvailableName = async (
+		client: PlaygroundClient,
+		baseDir: string,
+		baseName: string
+	) => {
+		let name = baseName;
+		let counter = 0;
+		const splitExt = (n: string) => {
+			const dot = n.lastIndexOf('.');
+			if (dot > 0) {
+				return { stem: n.slice(0, dot), ext: n.slice(dot) };
 			}
-			const baseDir = resolveBaseDir(targetDir) || DEFAULT_WORKSPACE_DIR;
-			const normalizedBase = normalizePath(baseDir);
-			try {
-				const name = await findAvailableName(
-					playgroundClient,
-					normalizedBase,
-					'untitled.php'
-				);
-				const tempPath = `${
-					normalizedBase === '/' ? '' : normalizedBase
-				}/${name}`;
-				await playgroundClient.writeFile(tempPath, '');
-				pendingCreateRef.current = { type: 'file', tempPath };
-				setLocalRenamingPath(tempPath);
-				setLastSelectedPath(tempPath);
-				setInvalidatePath(normalizedBase);
-				setInvalidateKey((k) => k + 1);
-				// Ensure the base directory is expanded and focused so the form is visible
-				setExpandRequestPath(normalizedBase);
-				setExpandRequestKey((k) => k + 1);
-				setFocusRequestPath(tempPath);
-				setFocusRequestKey((k) => k + 1);
-				// Clear requests after a short delay
+			return { stem: n, ext: '' };
+		};
+		const prefix = baseDir === '/' ? '' : baseDir;
+		while (
+			(await client.fileExists(`${prefix}/${name}`).catch(() => false)) ||
+			(await client.isDir(`${prefix}/${name}`).catch(() => false))
+		) {
+			counter += 1;
+			const { stem, ext } = splitExt(baseName);
+			name = `${stem} (${counter})${ext}`;
+		}
+		return name;
+	};
+
+	const resolveBaseDir = (overridePath?: string) => {
+		const basePath = overridePath || lastSelectedPath;
+		if (!basePath) return DEFAULT_WORKSPACE_DIR;
+		// If selection is a folder, use it; otherwise use its dirname
+		return basePath;
+	};
+
+	const handleCreateFile = async (targetDir?: string) => {
+		if (!playgroundClient) {
+			return;
+		}
+		const baseDir = resolveBaseDir(targetDir) || DEFAULT_WORKSPACE_DIR;
+		const normalizedBase = normalizePath(baseDir);
+		try {
+			const name = await findAvailableName(
+				playgroundClient,
+				normalizedBase,
+				'untitled.php'
+			);
+			const tempPath = `${
+				normalizedBase === '/' ? '' : normalizedBase
+			}/${name}`;
+			await playgroundClient.writeFile(tempPath, '');
+			pendingCreateRef.current = { type: 'file', tempPath };
+			setLocalRenamingPath(tempPath);
+			setLastSelectedPath(tempPath);
+			const coreBase = toCore(normalizedBase);
+			const coreTemp = toCore(tempPath);
+			if (normalizedRoot === '/' && normalizedBase === '/') {
+				await reloadRoot();
 				setTimeout(() => {
-					setExpandRequestPath(null);
-					setFocusRequestPath(null);
-				}, 100);
-			} catch (e) {
-				void e;
+					treeRef.current?.focusPath(coreTemp, { notify: false });
+				}, 0);
+			} else if (treeRef.current) {
+				await treeRef.current.expandToPath(coreBase);
+				await treeRef.current.refresh(coreBase);
+				treeRef.current.focusPath(coreTemp, { notify: false });
 			}
-		},
-		[playgroundClient, resolveBaseDir, findAvailableName]
-	);
+		} catch (e) {
+			void e;
+		}
+	};
 
 	const handleCreateDirectory = useCallback(
 		async (targetDir?: string) => {
@@ -422,23 +406,30 @@ const PlaygroundFilePickerTree = forwardRef<
 				pendingCreateRef.current = { type: 'folder', tempPath };
 				setLocalRenamingPath(tempPath);
 				setLastSelectedPath(tempPath);
-				setInvalidatePath(normalizedBase);
-				setInvalidateKey((k) => k + 1);
-				// Ensure the base directory is expanded and focused so the form is visible
-				setExpandRequestPath(normalizedBase);
-				setExpandRequestKey((k) => k + 1);
-				setFocusRequestPath(tempPath);
-				setFocusRequestKey((k) => k + 1);
-				// Clear requests after a short delay
-				setTimeout(() => {
-					setExpandRequestPath(null);
-					setFocusRequestPath(null);
-				}, 100);
+				const coreBase = toCore(normalizedBase);
+				const coreTemp = toCore(tempPath);
+				if (normalizedRoot === '/' && normalizedBase === '/') {
+					await reloadRoot();
+					setTimeout(() => {
+						treeRef.current?.focusPath(coreTemp, { notify: false });
+					}, 0);
+				} else if (treeRef.current) {
+					await treeRef.current.expandToPath(coreBase);
+					await treeRef.current.refresh(coreBase);
+					treeRef.current.focusPath(coreTemp, { notify: false });
+				}
 			} catch (e) {
 				void e;
 			}
 		},
-		[playgroundClient, resolveBaseDir, findAvailableName]
+		[
+			findAvailableName,
+			normalizedRoot,
+			playgroundClient,
+			reloadRoot,
+			resolveBaseDir,
+			toCore,
+		]
 	);
 
 	useImperativeHandle(
@@ -470,20 +461,21 @@ const PlaygroundFilePickerTree = forwardRef<
 			} finally {
 				setLocalRenamingPath(null);
 				const parentDir = getDirname(normalized);
-				if (parentDir === normalizedRoot && normalizedRoot === '/') {
-					// Special case: deleting at root level, refresh root files
-					setRootRefreshKey((k) => k + 1);
-				} else {
-					setInvalidatePath(parentDir);
-					setInvalidateKey((k) => k + 1);
+				setLastSelectedPath(parentDir);
+				const coreParent = toCore(parentDir);
+				if (normalizedRoot === '/' && parentDir === '/') {
+					await reloadRoot();
+					if (coreParent) {
+						setTimeout(() => {
+							treeRef.current?.focusPath(coreParent, {
+								notify: false,
+							});
+						}, 0);
+					}
+				} else if (treeRef.current) {
+					await treeRef.current.refresh(coreParent);
+					treeRef.current.focusPath(coreParent, { notify: false });
 				}
-				// Focus on the parent directory after deletion
-				setFocusRequestPath(parentDir);
-				setFocusRequestKey((k) => k + 1);
-				// Clear focus request after a short delay
-				setTimeout(() => {
-					setFocusRequestPath(null);
-				}, 100);
 				// Clear editor if deleted current file or a parent directory
 				if (
 					currentPath &&
@@ -495,7 +487,15 @@ const PlaygroundFilePickerTree = forwardRef<
 				}
 			}
 		},
-		[playgroundClient, currentPath, dispatch]
+		[
+			currentPath,
+			dispatch,
+			getDirname,
+			normalizedRoot,
+			playgroundClient,
+			reloadRoot,
+			toCore,
+		]
 	);
 
 	const handleDownloadPath = useCallback(
@@ -505,21 +505,23 @@ const PlaygroundFilePickerTree = forwardRef<
 			}
 			setContextMenu(null);
 			try {
-				const content = await playgroundClient.readFileAsText(
-					targetPath
+				const normalized = normalizePath(targetPath);
+				const baseName = normalized.split('/').pop() || 'download';
+				const isDir = await playgroundClient
+					.isDir(normalized)
+					.catch(() => false);
+				if (isDir) {
+					const bytes = await zipDirectory(
+						playgroundClient as any,
+						normalized
+					);
+					saveAs(new File([bytes], `${baseName}.zip`));
+					return;
+				}
+				const data = await playgroundClient.readFileAsBuffer(
+					normalized
 				);
-				const blob = new Blob([content], {
-					type: 'text/plain;charset=utf-8',
-				});
-				const url = URL.createObjectURL(blob);
-				const link = document.createElement('a');
-				link.href = url;
-				link.download =
-					normalizePath(targetPath).split('/').pop() || 'download';
-				document.body.appendChild(link);
-				link.click();
-				link.remove();
-				URL.revokeObjectURL(url);
+				saveAs(new File([data], baseName));
 			} catch {
 				// Ignore failure
 			}
@@ -544,50 +546,17 @@ const PlaygroundFilePickerTree = forwardRef<
 	return (
 		<>
 			<CoreFilePickerTree
+				ref={treeRef}
 				files={files}
 				initialPath={coreInitialPath}
 				onSelect={handleSelect}
 				onLoadChildren={handleLoadChildren}
-				isLoading={normalizedRoot === '/' && isRootLoading}
 				autoFocus={false}
 				renamingPath={
 					effectiveRenamingPath
-						? toCorePath(effectiveRenamingPath, normalizedRoot)
-						: undefined
-				}
-				invalidatePath={
-					invalidatePath
-						? toCorePath(invalidatePath, normalizedRoot)
+						? toCore(effectiveRenamingPath)
 						: undefined
 				}
-				invalidateKey={invalidateKey}
-				renameMapping={
-					renameMapping
-						? {
-								from: toCorePath(
-									renameMapping.from,
-									normalizedRoot
-								),
-								to: toCorePath(
-									renameMapping.to,
-									normalizedRoot
-								),
-						  }
-						: undefined
-				}
-				renameKey={renameKey}
-				focusPathRequest={
-					focusRequestPath
-						? toCorePath(focusRequestPath, normalizedRoot)
-						: undefined
-				}
-				focusRequestKey={focusRequestKey}
-				expandPathRequest={
-					expandRequestPath
-						? toCorePath(expandRequestPath, normalizedRoot)
-						: undefined
-				}
-				expandRequestKey={expandRequestKey}
 				onRename={async (corePath, newName) => {
 					if (!playgroundClient) return;
 					const absPath = corePathToAbsolute(
@@ -597,6 +566,8 @@ const PlaygroundFilePickerTree = forwardRef<
 					const pending = pendingCreateRef.current;
 					const isPending = pending?.tempPath === absPath;
 					const parent = getDirname(absPath);
+					const coreParent = toCore(parent);
+					const coreOriginal = toCore(absPath);
 					const sanitized = (newName || '').trim();
 					if (!isValidNameSegment(sanitized)) {
 						if (isPending) {
@@ -619,15 +590,31 @@ const PlaygroundFilePickerTree = forwardRef<
 
 					const composePath = (name: string) =>
 						parent === '/' ? `/${name}` : `${parent}/${name}`;
-					const finalName = sanitized;
-					let candidate = composePath(finalName);
-					const candidateNormalized = normalizePath(candidate);
+					let candidate = composePath(sanitized);
+					let candidateNormalized = normalizePath(candidate);
 					if (candidateNormalized === absPath) {
 						setLocalRenamingPath(null);
 						if (isPending) {
 							pendingCreateRef.current = null;
 						}
 						setLastSelectedPath(candidateNormalized);
+						const coreCandidateSame = toCore(candidateNormalized);
+						if (coreCandidateSame) {
+							if (normalizedRoot === '/' && parent === '/') {
+								setTimeout(() => {
+									treeRef.current?.focusPath(
+										coreCandidateSame,
+										{
+											notify: false,
+										}
+									);
+								}, 0);
+							} else {
+								treeRef.current?.focusPath(coreCandidateSame, {
+									notify: false,
+								});
+							}
+						}
 						return;
 					}
 
@@ -646,9 +633,10 @@ const PlaygroundFilePickerTree = forwardRef<
 								const unique = await findAvailableName(
 									playgroundClient,
 									parent === '/' ? '/' : parent,
-									finalName
+									sanitized
 								);
 								candidate = composePath(unique);
+								candidateNormalized = normalizePath(candidate);
 							} catch (e) {
 								void e;
 							}
@@ -658,6 +646,7 @@ const PlaygroundFilePickerTree = forwardRef<
 						}
 					}
 
+					const coreCandidate = toCore(candidateNormalized);
 					let candidateIsDir = pending?.type === 'folder';
 					try {
 						await playgroundClient.mv(absPath, candidate as any);
@@ -667,26 +656,24 @@ const PlaygroundFilePickerTree = forwardRef<
 								.catch(() => false);
 							candidateIsDir = isDir;
 						}
-						setLastSelectedPath(candidate);
-						// If a directory was renamed and it was expanded, remap it to keep expanded state
-						if (candidateIsDir) {
-							setRenameMapping({
-								from: absPath,
-								to: candidateNormalized,
-							});
-							setRenameKey((k) => k + 1);
+						setLastSelectedPath(candidateNormalized);
+						if (
+							candidateIsDir &&
+							treeRef.current &&
+							coreOriginal &&
+							coreCandidate
+						) {
+							treeRef.current.remapPath(
+								coreOriginal,
+								coreCandidate
+							);
 						}
-						// Update editor state
 						if (candidateIsDir) {
 							if (currentPath === absPath) {
 								dispatch(setCurrentPath(candidate));
 							}
-							// keep focus on the renamed directory row
-							setFocusRequestPath(candidateNormalized);
-							setFocusRequestKey((k) => k + 1);
 						} else {
 							if (isPending) {
-								// Only open the file if we just created it
 								try {
 									const newContent =
 										await playgroundClient.readFileAsText(
@@ -698,12 +685,26 @@ const PlaygroundFilePickerTree = forwardRef<
 									void e;
 								}
 							} else if (currentPath === absPath) {
-								// If the renamed file was open, just update the path
 								dispatch(setCurrentPath(candidate));
 							}
-							// keep focus on the renamed file row
-							setFocusRequestPath(candidateNormalized);
-							setFocusRequestKey((k) => k + 1);
+						}
+
+						if (normalizedRoot === '/' && parent === '/') {
+							await reloadRoot();
+							if (coreCandidate) {
+								setTimeout(() => {
+									treeRef.current?.focusPath(coreCandidate, {
+										notify: false,
+									});
+								}, 0);
+							}
+						} else if (treeRef.current) {
+							await treeRef.current.refresh(coreParent);
+							if (coreCandidate) {
+								treeRef.current.focusPath(coreCandidate, {
+									notify: false,
+								});
+							}
 						}
 					} catch {
 						if (isPending) {
@@ -722,24 +723,6 @@ const PlaygroundFilePickerTree = forwardRef<
 					} finally {
 						pendingCreateRef.current = null;
 						setLocalRenamingPath(null);
-						// Always invalidate parent to update the file list with new name
-						if (
-							parent === normalizedRoot &&
-							normalizedRoot === '/'
-						) {
-							// Special case: renaming at root level, refresh root files
-							setRootRefreshKey((k) => k + 1);
-						} else {
-							setInvalidatePath(parent);
-							setInvalidateKey((k) => k + 1);
-						}
-						// focus the renamed entry
-						setFocusRequestPath(candidateNormalized);
-						setFocusRequestKey((k) => k + 1);
-						// Clear focus request after a short delay to prevent interference
-						setTimeout(() => {
-							setFocusRequestPath(null);
-						}, 100);
 					}
 				}}
 				onRenameCancel={async (corePath) => {
@@ -768,15 +751,27 @@ const PlaygroundFilePickerTree = forwardRef<
 					}
 					pendingCreateRef.current = null;
 					setLocalRenamingPath(null);
-					setInvalidatePath(getDirname(absPath));
-					setInvalidateKey((k) => k + 1);
-					// refocus the original item (if exists) or its parent
-					setFocusRequestPath(getDirname(absPath));
-					setFocusRequestKey((k) => k + 1);
-					// Clear focus request after a short delay
-					setTimeout(() => {
-						setFocusRequestPath(null);
-					}, 100);
+					const parentDir = getDirname(absPath);
+					setLastSelectedPath(parentDir);
+					const coreParent = toCore(parentDir);
+					if (normalizedRoot === '/' && parentDir === '/') {
+						await reloadRoot();
+					} else if (treeRef.current) {
+						await treeRef.current.refresh(coreParent);
+					}
+					if (coreParent) {
+						const focusLater =
+							normalizedRoot === '/' && parentDir === '/';
+						const focusAction = () =>
+							treeRef.current?.focusPath(coreParent, {
+								notify: false,
+							});
+						if (focusLater) {
+							setTimeout(focusAction, 0);
+						} else {
+							focusAction();
+						}
+					}
 				}}
 				onContextMenu={handleInternalContextMenu}
 			/>
@@ -793,9 +788,6 @@ const PlaygroundFilePickerTree = forwardRef<
 							onClick={async () => {
 								const dir = contextMenu.path;
 								setContextMenu(null);
-								// Focus and expand the directory, then create a file inside
-								setExpandRequestPath(dir);
-								setExpandRequestKey((k) => k + 1);
 								await handleCreateFile(dir);
 							}}
 						>
@@ -808,8 +800,6 @@ const PlaygroundFilePickerTree = forwardRef<
 							onClick={async () => {
 								const dir = contextMenu.path;
 								setContextMenu(null);
-								setExpandRequestPath(dir);
-								setExpandRequestKey((k) => k + 1);
 								await handleCreateDirectory(dir);
 							}}
 						>
@@ -832,14 +822,12 @@ const PlaygroundFilePickerTree = forwardRef<
 					>
 						Delete
 					</button>
-					{contextMenu.type === 'file' && (
-						<button
-							className={styles.contextMenuButton}
-							onClick={() => handleDownloadPath(contextMenu.path)}
-						>
-							Download
-						</button>
-					)}
+					<button
+						className={styles.contextMenuButton}
+						onClick={() => handleDownloadPath(contextMenu.path)}
+					>
+						Download
+					</button>
 				</div>
 			)}
 		</>
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
index 0e22e46823..4c0159272a 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
@@ -161,15 +161,11 @@ export const PlaygroundManager = () => {
 					return;
 				}
 
-				await clientInstance.mkdir('/workspace');
-				const initialPath = '/workspace/code.php';
+				await clientInstance.mkdir('/wordpress/workspace');
+				const initialPath = '/wordpress/workspace/code.php';
 				await clientInstance.writeFile(initialPath, codeRef.current);
-				await clientInstance.symlink(
-					'/workspace',
-					'/wordpress/workspace'
-				);
 				dispatch(setCurrentPath(initialPath));
-				await clientInstance.goTo('/workspace/code.php');
+				await clientInstance.goTo('/wordpress/workspace/code.php');
 
 				clientRef.current = clientInstance;
 				dispatch(setClient(clientInstance));
diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/Terminal.tsx
index 957a650f3b..05a0b2ecd4 100644
--- a/packages/playground/website/src/php-playground/components/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/Terminal.tsx
@@ -72,7 +72,7 @@ export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 	const fitAddonRef = useRef<FitAddon | null>(null);
 	const progressRef = useRef<DownloadProgress | null>(null);
 	// @TODO: Initialize this from the client, not with a hardcoded default.
-	const cwdRef = useRef<string>('/workspace');
+	const cwdRef = useRef<string>('/wordpress/workspace');
 
 	useEffect(() => {
 		const container = terminalContainerRef.current;
@@ -321,9 +321,9 @@ export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 				'https://wordpress-playground-cors-proxy.net/?https://getcomposer.org/download/2.8.12/composer.phar',
 				'Composer download'
 			);
-			await client.writeFile(`${path}.bin`, binary);
+			await client.writeFile(`${path}`, binary);
 			await client.writeFile(
-				path,
+				`/internal/shared/preload/grapheme_polyfill.php`,
 				`<?php
 // Composer assumes the grapheme_strlen function is available
 // and will crash if it's not. Symfony Polyfills somehow do
@@ -338,8 +338,6 @@ if(!function_exists('grapheme_substr')) {
 		return substr($string, $start, $length);
 	}
 }
-
-require_once __FILE__ . '.bin';
 `
 			);
 		};
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index 3f24a623ab..cc4a1065a2 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -3,11 +3,15 @@
  *
  * * Files explorer
  *    * "Refresh" button to refresh the directory tree – OR auto-refresh every ~five seconds.
- *    * Indicate the terminal and file explorer are loading
- *    * Download file / directory action
- *    * Left/right arrows/delete don't work when renaming a file.
  *    * Bug – sometimes collapsing a directory = children are not visible after reopening.
  *      It an actual bug, not a faulty vite hot reloader!
+ *    * Ability to create top-level directories
+ *    * When I click "new file" and have a file selected, create a file in the parent
+ *      directory
+ *    * After creating and opening a file, focus the editor
+ *    * ✅ Download file / directory action
+ *    * ✅ Left/right arrows/delete don't work when renaming a file.
+ *    * ✅ Indicate the terminal and file explorer are loading
  *    * ✅ Detect when a binary file is opened, show a special message "binary file. can't
  *         edit (download)"
  *    * ✅ Create and delete files and directories.
@@ -26,11 +30,16 @@
  * * Preview
  *    * ✅ Add address bar for easy navigation
  * * Terminal
+ *    * Need to click the terminal twice to focus it
  *    * ✅ Implement cwd, cd
  *    * ✅ Communicate cwd in current prompt (like fish)
  *    * ✅ Disable terminal collapsing for now
  *
  * ------- later: -------
+ * * A "World" module for triggering syscalls such as
+ *   Filesystem interactions, spawning processes, etc.
+ *   Also a global-ish state for currently edited path
+ *   with a way to track file operations.
  * * Responsive design, useful support for mobile phones
  * * Sharing
  *    * UX for sharing more involved projects, e.g. when I edit a WordPress plugin

From 1751588897c6073100af30e853947e4e40fcb661 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 01:59:31 +0200
Subject: [PATCH 28/41] ux improvements

---
 .../components/src/FilePickerTree/index.tsx   | 20 +++++++++++++++++++
 .../components/PlaygroundManager.tsx          |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index 6b77f9ca21..98dcf3b046 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -378,6 +378,17 @@ export const FilePickerTree = forwardRef<
 	);
 
 	const hasInitializedRef = useRef(false);
+	const pendingInitialExpandRef = useRef<string | null>(initialPath ?? null);
+	const previousInitialPathRef = useRef(initialPath);
+
+	useEffect(() => {
+		if (initialPath && initialPath !== previousInitialPathRef.current) {
+			pendingInitialExpandRef.current = initialPath;
+		} else if (!initialPath) {
+			pendingInitialExpandRef.current = null;
+		}
+		previousInitialPathRef.current = initialPath;
+	}, [initialPath]);
 	useEffect(() => {
 		if (!initialPath || hasInitializedRef.current) {
 			return;
@@ -399,6 +410,15 @@ export const FilePickerTree = forwardRef<
 		}
 	}, [initialPath, expandToPath, onLoadChildren]);
 
+	useEffect(() => {
+		const target = pendingInitialExpandRef.current;
+		if (!target || !onLoadChildren || files.length === 0) {
+			return;
+		}
+		pendingInitialExpandRef.current = null;
+		void expandToPath(target);
+	}, [files, expandToPath, onLoadChildren]);
+
 	useEffect(() => {
 		if (!focusedPath) {
 			if (files.length > 0) {
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
index 4c0159272a..0f5dd94248 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
@@ -165,7 +165,7 @@ export const PlaygroundManager = () => {
 				const initialPath = '/wordpress/workspace/code.php';
 				await clientInstance.writeFile(initialPath, codeRef.current);
 				dispatch(setCurrentPath(initialPath));
-				await clientInstance.goTo('/wordpress/workspace/code.php');
+				await clientInstance.goTo('/workspace/code.php');
 
 				clientRef.current = clientInstance;
 				dispatch(setClient(clientInstance));

From 71146647fbff6459df755b0d5eda71153a4f8b75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 15:45:36 +0200
Subject: [PATCH 29/41] Consistent cwd treatment across different terminal
 processes and editor UI in general

---
 .../php-wasm/universal/src/lib/php-worker.ts  | 28 ++++++++---
 packages/php-wasm/universal/src/lib/php.ts    |  8 +---
 .../lib/sandboxed-spawn-handler-factory.ts    |  2 +-
 .../components/FileExplorerSidebar.tsx        |  3 +-
 .../src/php-playground/components/Layout.tsx  |  4 +-
 .../components/PlaygroundFilePickerTree.tsx   |  3 +-
 .../components/PlaygroundManager.tsx          | 21 +++++---
 .../php-playground/components/Terminal.tsx    | 48 +++++++++++++------
 .../website/src/php-playground/constants.ts   |  4 ++
 9 files changed, 80 insertions(+), 41 deletions(-)

diff --git a/packages/php-wasm/universal/src/lib/php-worker.ts b/packages/php-wasm/universal/src/lib/php-worker.ts
index 70925e8541..3ae4bf6479 100644
--- a/packages/php-wasm/universal/src/lib/php-worker.ts
+++ b/packages/php-wasm/universal/src/lib/php-worker.ts
@@ -58,6 +58,7 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 	absoluteUrl = '';
 	/** @inheritDoc @php-wasm/universal!RequestHandler.documentRoot  */
 	documentRoot = '';
+	private chroot: string | null = null;
 
 	#eventListeners: Map<string, Set<PHPWorkerEventListener>> = new Map();
 
@@ -177,9 +178,7 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 
 	/** @inheritDoc @php-wasm/universal!/PHP.run */
 	async run(request: PHPRunOptions): Promise<PHPResponse> {
-		const { php, reap } = await _private
-			.get(this)!
-			.requestHandler!.processManager.acquirePHPInstance();
+		const { php, reap } = await this.acquirePHPInstance();
 		try {
 			return await php.run(request);
 		} finally {
@@ -192,9 +191,7 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 		argv: string[],
 		options?: { env?: Record<string, string> }
 	): Promise<StreamedPHPResponse> {
-		const { php, reap } = await _private
-			.get(this)!
-			.requestHandler!.processManager.acquirePHPInstance();
+		const { php, reap } = await this.acquirePHPInstance();
 		let response: StreamedPHPResponse;
 		try {
 			response = await php.cli(argv, options);
@@ -216,9 +213,26 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 
 	/** @inheritDoc @php-wasm/universal!/PHP.chdir */
 	chdir(path: string): void {
+		// Remember the new chroot for all PHP instances yet to be acquired.
+		this.chroot = path;
 		return _private.get(this)!.php!.chdir(path);
 	}
 
+	/** @inheritDoc @php-wasm/universal!/PHP.chdir */
+	cwd(): string {
+		return _private.get(this)!.php!.cwd();
+	}
+
+	private async acquirePHPInstance() {
+		const { php, reap } = await _private
+			.get(this)!
+			.requestHandler!.processManager.acquirePHPInstance();
+		if (this.chroot !== null) {
+			php.chdir(this.chroot);
+		}
+		return { php, reap };
+	}
+
 	/** @inheritDoc @php-wasm/universal!/PHP.setSapiName */
 	setSapiName(newName: string): void {
 		_private.get(this)!.php!.setSapiName(newName);
@@ -251,7 +265,7 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 
 	/** @inheritDoc @php-wasm/universal!/PHP.symlink */
 	symlink(target: string, path: string): void {
-		return _private.get(this)!.php!.symlink(target, path);
+		_private.get(this)!.php!.symlink(target, path);
 	}
 
 	/** @inheritDoc @php-wasm/universal!/PHP.unlink */
diff --git a/packages/php-wasm/universal/src/lib/php.ts b/packages/php-wasm/universal/src/lib/php.ts
index dd89fd2731..653ce9afbb 100644
--- a/packages/php-wasm/universal/src/lib/php.ts
+++ b/packages/php-wasm/universal/src/lib/php.ts
@@ -84,7 +84,6 @@ export class PHP implements Disposable {
 		needsRotating: boolean;
 		maxRequests: number;
 		requestsMade: number;
-		cwd?: string;
 	} = {
 		enabled: false,
 		recreateRuntime: () => 0,
@@ -1312,7 +1311,6 @@ export class PHP implements Disposable {
 			enabled: true,
 			recreateRuntime: options.recreateRuntime,
 			maxRequests: options.maxRequests ?? 400,
-			cwd: options.cwd,
 		};
 	}
 
@@ -1499,11 +1497,7 @@ export class PHP implements Disposable {
 			argv.slice(1),
 			{
 				env: options.env,
-				cwd:
-					options.cwd ??
-					this.#rotationOptions?.cwd ??
-					this.documentRoot ??
-					'/',
+				cwd: this.cwd(),
 			}
 		) as ChildProcess;
 
diff --git a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
index d7fe41fc70..574c794c4a 100644
--- a/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
+++ b/packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts
@@ -82,7 +82,7 @@ export function sandboxedSpawnHandlerFactory(
 						// @see https://github.com/wp-cli/wp-cli/issues/1102
 						SHELL_PIPE: '0',
 					},
-					cwd: options.cwd,
+					cwd,
 				});
 
 				result.stdout.pipeTo(
diff --git a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
index ce99d0c0c8..3fb4e2406d 100644
--- a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
+++ b/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
@@ -6,6 +6,7 @@ import PlaygroundFilePickerTree, {
 import type { PlaygroundClient } from '@wp-playground/client';
 import { useAppDispatch } from '../hooks';
 import { setCode, setCurrentPath } from '../store';
+import { DEFAULT_WORKSPACE_DIR } from '../constants';
 
 const MAX_INLINE_BYTES = 1024 * 1024; // 1MB
 
@@ -79,7 +80,7 @@ export default function FileExplorerSidebar({
 			forceSelectedPath ??
 				(currentPath
 					? dirnameSafe(currentPath)
-					: selectedDirPath ?? '/wordpress/workspace')
+					: selectedDirPath ?? DEFAULT_WORKSPACE_DIR)
 		);
 		// Remove selectedDirPath from dependencies to prevent unwanted updates
 		// eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index c85c068c49..5a31841c18 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -14,8 +14,7 @@ import { Terminal } from './Terminal';
 import { useAppSelector } from '../hooks';
 import AddressBar from '../../components/address-bar';
 import { Spinner } from '../../components/spinner';
-
-const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
+import { DEFAULT_WORKSPACE_DIR } from '../constants';
 
 export const Layout = () => {
 	const [isHelpOpen, setHelpOpen] = useState(false);
@@ -214,6 +213,7 @@ export const Layout = () => {
 								>
 									<div className={styles.terminalPane}>
 										<Terminal
+											playgroundClient={playgroundClient}
 											isCollapsed={isTerminalCollapsed}
 											resizeToken={terminalResizeToken}
 										/>
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 83d600d555..2fc6f4c90a 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -15,6 +15,7 @@ import saveAs from 'file-saver';
 import { zipDirectory } from '@wp-playground/common';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import { setCode, setCurrentPath } from '../store';
+import { DEFAULT_WORKSPACE_DIR } from '../constants';
 
 function normalizePath(path: string) {
 	if (!path) return '/';
@@ -96,8 +97,6 @@ export type PlaygroundFilePickerTreeProps = {
 	) => void;
 };
 
-const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
-
 const isValidNameSegment = (name: string) => {
 	if (!name) {
 		return false;
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
index 0f5dd94248..378a412883 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundManager.tsx
@@ -1,6 +1,10 @@
 import { useEffect, useRef } from 'react';
 import { startPlaygroundWeb } from '@wp-playground/client';
-import { DEFAULT_WP_REMOTE } from '../constants';
+import {
+	DEFAULT_URL_PREFIX,
+	DEFAULT_WORKSPACE_DIR,
+	DEFAULT_WP_REMOTE,
+} from '../constants';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import {
 	applyUrlState,
@@ -161,18 +165,19 @@ export const PlaygroundManager = () => {
 					return;
 				}
 
-				await clientInstance.mkdir('/wordpress/workspace');
-				const initialPath = '/wordpress/workspace/code.php';
+				await clientInstance.mkdir(DEFAULT_WORKSPACE_DIR);
+				await clientInstance.chdir(DEFAULT_WORKSPACE_DIR);
+				const initialPath = `${DEFAULT_WORKSPACE_DIR}/code.php`;
 				await clientInstance.writeFile(initialPath, codeRef.current);
 				dispatch(setCurrentPath(initialPath));
-				await clientInstance.goTo('/workspace/code.php');
+
+				await clientInstance.goTo(`${DEFAULT_URL_PREFIX}/code.php`);
 
 				clientRef.current = clientInstance;
 				dispatch(setClient(clientInstance));
 				playgroundRuntime.setClient(clientInstance);
 				dispatch(setBootStatus('ready'));
 			} catch (error: any) {
-				console.log({ error });
 				const message = error?.message ?? String(error);
 				dispatch(setBootStatus('error'));
 				dispatch(setBootError(message));
@@ -209,10 +214,12 @@ export const PlaygroundManager = () => {
 			// Saving is handled by the editor, but for the default code.php file, we also
 			// support manual save&run requests.
 			// TODO: Investigate it for race conditions. Can we ever collide with the editor autosave?
-			if (currentPath === '/wordpress/workspace/code.php') {
+			if (currentPath === `${DEFAULT_WORKSPACE_DIR}/code.php`) {
 				await currentClient.writeFile(currentPath, codeRef.current);
 				const cacheBuster = `run=${runCountRef.current}-${Date.now()}`;
-				await currentClient.goTo(`/workspace/code.php?${cacheBuster}`);
+				await currentClient.goTo(
+					`${DEFAULT_URL_PREFIX}/code.php?${cacheBuster}`
+				);
 			}
 		};
 
diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/Terminal.tsx
index 05a0b2ecd4..a8b42876f5 100644
--- a/packages/playground/website/src/php-playground/components/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/Terminal.tsx
@@ -12,6 +12,8 @@ import { playgroundRuntime } from '../runtime';
 import styles from './layout.module.css';
 import 'xterm/css/xterm.css';
 import type { StreamedPHPResponse } from '@php-wasm/universal';
+import type { PlaygroundClient } from '@wp-playground/client';
+import { DEFAULT_WORKSPACE_DIR } from '../constants';
 
 const PROGRESS_BAR_WIDTH = 28;
 const SPINNER_FRAMES = ['-', '\\', '|', '/'];
@@ -25,6 +27,7 @@ interface DownloadProgress {
 }
 
 interface TerminalProps {
+	playgroundClient: PlaygroundClient;
 	isCollapsed: boolean;
 	resizeToken?: number;
 }
@@ -67,12 +70,29 @@ const drawProgress = (term: XTerm, progress: DownloadProgress) => {
 	progress.lastRenderedLength = padLength;
 };
 
-export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
+export const Terminal = ({
+	playgroundClient,
+	isCollapsed,
+	resizeToken = 0,
+}: TerminalProps) => {
 	const terminalContainerRef = useRef<HTMLDivElement | null>(null);
 	const fitAddonRef = useRef<FitAddon | null>(null);
 	const progressRef = useRef<DownloadProgress | null>(null);
-	// @TODO: Initialize this from the client, not with a hardcoded default.
-	const cwdRef = useRef<string>('/wordpress/workspace');
+	const clientRef = useRef<PlaygroundClient | null>(null);
+
+	const cwdRef = useRef<string>(DEFAULT_WORKSPACE_DIR);
+
+	useEffect(() => {
+		clientRef.current = playgroundClient;
+		if (clientRef.current) {
+			clientRef.current
+				.isReady()
+				.then(() => clientRef.current!.cwd())
+				.then((cwd) => {
+					cwdRef.current = cwd;
+				});
+		}
+	}, [playgroundClient]);
 
 	useEffect(() => {
 		const container = terminalContainerRef.current;
@@ -286,12 +306,11 @@ export const Terminal = ({ isCollapsed, resizeToken = 0 }: TerminalProps) => {
 		};
 
 		const ensureBootReady = async () => {
-			await playgroundRuntime.getBootPromise();
-			const client = playgroundRuntime.getClient();
-			if (!client) {
+			if (!clientRef.current) {
 				throw new Error('Playground client is not ready yet.');
 			}
-			return client as any;
+			await clientRef.current.isReady();
+			return clientRef.current;
 		};
 
 		const ensureWpCliBinary = async () => {
@@ -347,10 +366,10 @@ if(!function_exists('grapheme_substr')) {
 			options: { env?: Record<string, string> } = {}
 		) => {
 			const client = await ensureBootReady();
-			const response = (await client.cli(argv, {
-				...options,
-				cwd: cwdRef.current,
-			})) as StreamedPHPResponse & {
+			const response = (await client.cli(
+				argv,
+				options
+			)) as StreamedPHPResponse & {
 				terminate?: () => Promise<void> | void;
 			};
 			const stdoutReader = response.stdout.getReader();
@@ -492,7 +511,7 @@ if(!function_exists('grapheme_substr')) {
 					const resolvedPath = resolvePath(target);
 					let isDirectory = false;
 					try {
-						isDirectory = client.isDir(resolvedPath);
+						isDirectory = await client.isDir(resolvedPath);
 					} catch {
 						isDirectory = false;
 					}
@@ -502,9 +521,10 @@ if(!function_exists('grapheme_substr')) {
 							`\r\ncd: no such file or directory: ${message}`
 						);
 						autoScroll();
-					} else {
-						cwdRef.current = resolvedPath;
+						return;
 					}
+					await client.chdir(resolvedPath);
+					cwdRef.current = resolvedPath;
 					prompt();
 					commandPrompted = true;
 				} else if (command === 'wp') {
diff --git a/packages/playground/website/src/php-playground/constants.ts b/packages/playground/website/src/php-playground/constants.ts
index 75803ff9c9..d3800462c4 100644
--- a/packages/playground/website/src/php-playground/constants.ts
+++ b/packages/playground/website/src/php-playground/constants.ts
@@ -4,6 +4,10 @@ export const DEFAULT_WP_VERSION = '6.8';
 export const DEFAULT_WP_REMOTE = 'http://127.0.0.1:5400/remote.html';
 // export const DEFAULT_WP_REMOTE = 'https://playground.wordpress.net/remote.html';
 
+// @TODO: Get rid of the hardcoded initial path, always source cwd from the client.
+export const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
+export const DEFAULT_URL_PREFIX = '/workspace';
+
 export const DEFAULT_CODE = `<?php
 echo "Hello from PHP " . phpversion();
 echo "<br>";

From a95b689cfa6d25f4c8abe5545ef7a42a0687a2c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 16:00:10 +0200
Subject: [PATCH 30/41] Simplify the logic in the file picker

---
 .../components/PlaygroundFilePickerTree.tsx   | 145 ++++++++----------
 1 file changed, 61 insertions(+), 84 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index 2fc6f4c90a..dcba1d904f 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -16,20 +16,14 @@ import { zipDirectory } from '@wp-playground/common';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import { setCode, setCurrentPath } from '../store';
 import { DEFAULT_WORKSPACE_DIR } from '../constants';
-
-function normalizePath(path: string) {
-	if (!path) return '/';
-	const normalized =
-		('/' + path).replace(/\/+/, '/').replace(/\/+$/, '') || '/';
-	return normalized;
-}
+import { basename, dirname, joinPaths, normalizePath } from '@php-wasm/util';
 
 async function listDir(client: PlaygroundClient, path: string) {
 	const names = await client.listFiles(path);
 	const results: { name: string; type: 'file' | 'folder' }[] = [];
 	for (const name of names) {
 		const childPath = path === '/' ? `/${name}` : `${path}/${name}`;
-		const isDirectory = await client.isDir(childPath).catch(() => false);
+		const isDirectory = await client.isDir(childPath);
 		results.push({ name, type: isDirectory ? 'folder' : 'file' });
 	}
 	return results.sort((a, b) => {
@@ -280,7 +274,7 @@ const PlaygroundFilePickerTree = forwardRef<
 	);
 
 	const handleSelect = (path: string) => {
-		const normalized = normalizePath(path);
+		const normalized = normalizePath('/' + path);
 		setLastSelectedPath(normalized);
 		if (onSelect) onSelect(normalized);
 	};
@@ -316,11 +310,7 @@ const PlaygroundFilePickerTree = forwardRef<
 
 	// dirname helper not needed in this component
 
-	const findAvailableName = async (
-		client: PlaygroundClient,
-		baseDir: string,
-		baseName: string
-	) => {
+	const findAvailableName = async (baseDir: string, baseName: string) => {
 		let name = baseName;
 		let counter = 0;
 		const splitExt = (n: string) => {
@@ -332,8 +322,8 @@ const PlaygroundFilePickerTree = forwardRef<
 		};
 		const prefix = baseDir === '/' ? '' : baseDir;
 		while (
-			(await client.fileExists(`${prefix}/${name}`).catch(() => false)) ||
-			(await client.isDir(`${prefix}/${name}`).catch(() => false))
+			(await playgroundClient?.fileExists(`${prefix}/${name}`)) ||
+			(await playgroundClient?.isDir(`${prefix}/${name}`))
 		) {
 			counter += 1;
 			const { stem, ext } = splitExt(baseName);
@@ -342,28 +332,34 @@ const PlaygroundFilePickerTree = forwardRef<
 		return name;
 	};
 
-	const resolveBaseDir = (overridePath?: string) => {
-		const basePath = overridePath || lastSelectedPath;
-		if (!basePath) return DEFAULT_WORKSPACE_DIR;
-		// If selection is a folder, use it; otherwise use its dirname
-		return basePath;
+	const resolveBaseDir = async (path?: string) => {
+		if (!path) {
+			path = lastSelectedPath || DEFAULT_WORKSPACE_DIR;
+		}
+		while (true) {
+			if (path === '/') {
+				break;
+			}
+			if (await playgroundClient?.isDir(path)) {
+				break;
+			}
+			path = dirname(path);
+		}
+		return path;
 	};
 
 	const handleCreateFile = async (targetDir?: string) => {
 		if (!playgroundClient) {
 			return;
 		}
-		const baseDir = resolveBaseDir(targetDir) || DEFAULT_WORKSPACE_DIR;
+		const baseDir = await resolveBaseDir(targetDir);
 		const normalizedBase = normalizePath(baseDir);
 		try {
 			const name = await findAvailableName(
-				playgroundClient,
 				normalizedBase,
 				'untitled.php'
 			);
-			const tempPath = `${
-				normalizedBase === '/' ? '' : normalizedBase
-			}/${name}`;
+			const tempPath = joinPaths(normalizedBase, name);
 			await playgroundClient.writeFile(tempPath, '');
 			pendingCreateRef.current = { type: 'file', tempPath };
 			setLocalRenamingPath(tempPath);
@@ -385,51 +381,35 @@ const PlaygroundFilePickerTree = forwardRef<
 		}
 	};
 
-	const handleCreateDirectory = useCallback(
-		async (targetDir?: string) => {
-			if (!playgroundClient) {
-				return;
-			}
-			const baseDir = resolveBaseDir(targetDir) || DEFAULT_WORKSPACE_DIR;
-			const normalizedBase = normalizePath(baseDir);
-			try {
-				const name = await findAvailableName(
-					playgroundClient,
-					normalizedBase,
-					'New Folder'
-				);
-				const tempPath = `${
-					normalizedBase === '/' ? '' : normalizedBase
-				}/${name}`;
-				await playgroundClient.mkdir(tempPath);
-				pendingCreateRef.current = { type: 'folder', tempPath };
-				setLocalRenamingPath(tempPath);
-				setLastSelectedPath(tempPath);
-				const coreBase = toCore(normalizedBase);
-				const coreTemp = toCore(tempPath);
-				if (normalizedRoot === '/' && normalizedBase === '/') {
-					await reloadRoot();
-					setTimeout(() => {
-						treeRef.current?.focusPath(coreTemp, { notify: false });
-					}, 0);
-				} else if (treeRef.current) {
-					await treeRef.current.expandToPath(coreBase);
-					await treeRef.current.refresh(coreBase);
-					treeRef.current.focusPath(coreTemp, { notify: false });
-				}
-			} catch (e) {
-				void e;
+	const handleCreateDirectory = async (targetDir?: string) => {
+		if (!playgroundClient) {
+			return;
+		}
+		const baseDir = await resolveBaseDir(targetDir);
+		const normalizedBase = normalizePath(baseDir);
+		try {
+			const name = await findAvailableName(normalizedBase, 'New Folder');
+			const tempPath = joinPaths(normalizedBase, name);
+			await playgroundClient.mkdir(tempPath);
+			pendingCreateRef.current = { type: 'folder', tempPath };
+			setLocalRenamingPath(tempPath);
+			setLastSelectedPath(tempPath);
+			const coreBase = toCore(normalizedBase);
+			const coreTemp = toCore(tempPath);
+			if (normalizedRoot === '/' && normalizedBase === '/') {
+				await reloadRoot();
+				setTimeout(() => {
+					treeRef.current?.focusPath(coreTemp, { notify: false });
+				}, 0);
+			} else if (treeRef.current) {
+				await treeRef.current.expandToPath(coreBase);
+				await treeRef.current.refresh(coreBase);
+				treeRef.current.focusPath(coreTemp, { notify: false });
 			}
-		},
-		[
-			findAvailableName,
-			normalizedRoot,
-			playgroundClient,
-			reloadRoot,
-			resolveBaseDir,
-			toCore,
-		]
-	);
+		} catch (e) {
+			void e;
+		}
+	};
 
 	useImperativeHandle(
 		ref,
@@ -505,10 +485,8 @@ const PlaygroundFilePickerTree = forwardRef<
 			setContextMenu(null);
 			try {
 				const normalized = normalizePath(targetPath);
-				const baseName = normalized.split('/').pop() || 'download';
-				const isDir = await playgroundClient
-					.isDir(normalized)
-					.catch(() => false);
+				const baseName = basename(normalized) || 'download';
+				const isDir = await playgroundClient.isDir(normalized);
 				if (isDir) {
 					const bytes = await zipDirectory(
 						playgroundClient as any,
@@ -617,12 +595,12 @@ const PlaygroundFilePickerTree = forwardRef<
 						return;
 					}
 
-					const exists = await playgroundClient
-						.fileExists(candidateNormalized)
-						.catch(() => false);
-					const existsDir = await playgroundClient
-						.isDir(candidateNormalized)
-						.catch(() => false);
+					const exists = await playgroundClient.fileExists(
+						candidateNormalized
+					);
+					const existsDir = await playgroundClient.isDir(
+						candidateNormalized
+					);
 					if (
 						(exists || existsDir) &&
 						candidateNormalized !== absPath
@@ -630,7 +608,6 @@ const PlaygroundFilePickerTree = forwardRef<
 						if (isPending) {
 							try {
 								const unique = await findAvailableName(
-									playgroundClient,
 									parent === '/' ? '/' : parent,
 									sanitized
 								);
@@ -650,9 +627,9 @@ const PlaygroundFilePickerTree = forwardRef<
 					try {
 						await playgroundClient.mv(absPath, candidate as any);
 						if (!pending) {
-							const isDir = await playgroundClient
-								.isDir(candidate as any)
-								.catch(() => false);
+							const isDir = await playgroundClient.isDir(
+								candidate as any
+							);
 							candidateIsDir = isDir;
 						}
 						setLastSelectedPath(candidateNormalized);

From c0500ed512c7a23bc8f15f0b477c2d4ce7832724 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 16:13:18 +0200
Subject: [PATCH 31/41] Reorganize code for easier maintenance

---
 .../php-playground/components/EditorHost.tsx  |  18 ++-
 .../components/Layout.module.css              |  97 ------------
 .../src/php-playground/components/Layout.tsx  | 143 ++++--------------
 .../components/PlaygroundFilePickerTree.tsx   |  97 ++++++------
 .../file-explorer/FileExplorer.module.css     |  96 ++++++++++++
 .../file-explorer/FileExplorerPlaceholder.tsx |  42 +++++
 .../FileExplorerSidebar.tsx                   |  12 +-
 .../components/terminal/Terminal.module.css   | 103 +++++++++++++
 .../components/{ => terminal}/Terminal.tsx    |   6 +-
 .../terminal/TerminalPlaceholder.tsx          |  29 ++++
 10 files changed, 379 insertions(+), 264 deletions(-)
 create mode 100644 packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
 create mode 100644 packages/playground/website/src/php-playground/components/file-explorer/FileExplorerPlaceholder.tsx
 rename packages/playground/website/src/php-playground/components/{ => file-explorer}/FileExplorerSidebar.tsx (94%)
 create mode 100644 packages/playground/website/src/php-playground/components/terminal/Terminal.module.css
 rename packages/playground/website/src/php-playground/components/{ => terminal}/Terminal.tsx (99%)
 create mode 100644 packages/playground/website/src/php-playground/components/terminal/TerminalPlaceholder.tsx

diff --git a/packages/playground/website/src/php-playground/components/EditorHost.tsx b/packages/playground/website/src/php-playground/components/EditorHost.tsx
index 35d4e05394..2f7e55bde6 100644
--- a/packages/playground/website/src/php-playground/components/EditorHost.tsx
+++ b/packages/playground/website/src/php-playground/components/EditorHost.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { Compartment, EditorState } from '@codemirror/state';
 import {
 	EditorView,
@@ -75,7 +75,11 @@ const getLanguageExtension = (filePath: string | null) => {
 	}
 };
 
-export const EditorHost = () => {
+export type EditorHostHandle = {
+	focus: () => void;
+};
+
+export const EditorHost = forwardRef<EditorHostHandle>((_, ref) => {
 	const dispatch = useAppDispatch();
 	const code = useAppSelector((state) => state.playground.code);
 	// @TODO: tricky – the parent may be renamed, moved, etc. Make
@@ -88,6 +92,12 @@ export const EditorHost = () => {
 	const languageCompartmentRef = useRef(new Compartment());
 	const saveTimeoutRef = useRef<number | null>(null);
 
+	useImperativeHandle(ref, () => ({
+		focus: () => {
+			viewRef.current?.focus();
+		},
+	}));
+
 	useEffect(() => {
 		if (viewRef.current) {
 			return;
@@ -211,4 +221,6 @@ export const EditorHost = () => {
 	}, [client, currentPath, code]);
 
 	return <div id="editor" ref={editorRef} className={styles.editor} />;
-};
+});
+
+EditorHost.displayName = 'EditorHost';
diff --git a/packages/playground/website/src/php-playground/components/Layout.module.css b/packages/playground/website/src/php-playground/components/Layout.module.css
index 7257d74dc6..1a73841e64 100644
--- a/packages/playground/website/src/php-playground/components/Layout.module.css
+++ b/packages/playground/website/src/php-playground/components/Layout.module.css
@@ -35,103 +35,6 @@
 	overflow: auto;
 }
 
-.fileExplorerContainer {
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	height: 100%;
-}
-
-.fileExplorerHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 8px 10px;
-	background: #f5f5f5;
-	border-bottom: 1px solid #e0e0e0;
-}
-
-.fileExplorerTitle {
-	text-transform: uppercase;
-	font-size: 11px;
-	font-weight: 600;
-	letter-spacing: 0.05em;
-	color: #555;
-}
-
-.fileExplorerActions {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.fileExplorerButton {
-	border: 1px solid transparent;
-	background: transparent;
-	padding: 4px 6px;
-	border-radius: 4px;
-	cursor: pointer;
-	font-size: 12px;
-	color: #444;
-	transition: background-color 0.2s ease, color 0.2s ease,
-		border-color 0.2s ease;
-}
-
-.fileExplorerButton:hover {
-	background: #e9e9e9;
-	color: #111;
-	border-color: #d0d0d0;
-}
-
-.fileExplorerButton:disabled {
-	opacity: 0.5;
-	cursor: default;
-	background: transparent;
-	border-color: transparent;
-}
-
-.fileExplorerTree {
-	flex: 1;
-	min-height: 0;
-	overflow: auto;
-	padding: 4px 0;
-}
-
-.contextMenu {
-	position: fixed;
-	z-index: 2000;
-	min-width: 180px;
-	background: #ffffff;
-	border: 1px solid #d0d0d0;
-	box-shadow: 0 12px 30px rgba(15, 15, 15, 0.18);
-	border-radius: 6px;
-	padding: 4px 0;
-}
-
-.contextMenuButton {
-	display: block;
-	width: 100%;
-	background: transparent;
-	border: none;
-	padding: 8px 16px;
-	text-align: left;
-	font-size: 13px;
-	color: #222;
-	cursor: pointer;
-}
-
-.contextMenuButton:hover {
-	background: #f0f0f5;
-}
-
-.contextMenuButtonDanger {
-	color: #c0312c;
-}
-
-.contextMenuButtonDanger:hover {
-	background: #ffecec;
-}
-
 .controls {
 	padding: 8px 12px;
 	background: #f5f5f5;
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 5a31841c18..16b7219ec9 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -5,15 +5,17 @@ import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import type { ImperativePanelHandle } from 'react-resizable-panels';
 
 import styles from './layout.module.css';
+import terminalStyles from './terminal/Terminal.module.css';
 import { Controls } from './Controls';
 import { EditorHost } from './EditorHost';
 import { HelpModal } from './HelpModal';
-import FileExplorerSidebar from './FileExplorerSidebar';
+import FileExplorerSidebar from './file-explorer/FileExplorerSidebar';
+import FileExplorerPlaceholder from './file-explorer/FileExplorerPlaceholder';
 import { PlaygroundManager } from './PlaygroundManager';
-import { Terminal } from './Terminal';
+import { Terminal } from './terminal/Terminal';
+import TerminalPlaceholder from './terminal/TerminalPlaceholder';
 import { useAppSelector } from '../hooks';
 import AddressBar from '../../components/address-bar';
-import { Spinner } from '../../components/spinner';
 import { DEFAULT_WORKSPACE_DIR } from '../constants';
 
 export const Layout = () => {
@@ -83,80 +85,7 @@ export const Layout = () => {
 								setForceSelectedPath={setForceSelectedPath}
 							/>
 						) : (
-							<div className={styles.fileExplorerContainer}>
-								<div className={styles.fileExplorerHeader}>
-									<span className={styles.fileExplorerTitle}>
-										Files
-									</span>
-									<div className={styles.fileExplorerActions}>
-										<button
-											className={
-												styles.fileExplorerButton
-											}
-											disabled
-										>
-											New File
-										</button>
-										<button
-											className={
-												styles.fileExplorerButton
-											}
-											disabled
-										>
-											New Folder
-										</button>
-									</div>
-								</div>
-								<div className={styles.fileExplorerTree}>
-									<div
-										className={styles.placeholderContainer}
-										aria-live="polite"
-									>
-										<div
-											className={
-												styles.placeholderContent
-											}
-										>
-											<div
-												className={
-													styles.placeholderHeading
-												}
-											>
-												Preparing Playground…
-											</div>
-											<div
-												className={
-													styles.placeholderSubtext
-												}
-											>
-												File explorer will be ready
-												shortly
-											</div>
-											<div
-												className={styles.skeletonList}
-												aria-hidden="true"
-											>
-												<div
-													className={
-														styles.skeletonLine
-													}
-												></div>
-												<div
-													className={
-														styles.skeletonLine
-													}
-												></div>
-												<div
-													className={clsx(
-														styles.skeletonLine,
-														styles.skeletonLineShort
-													)}
-												></div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
+							<FileExplorerPlaceholder />
 						)}
 					</div>
 				</Panel>
@@ -201,49 +130,41 @@ export const Layout = () => {
 								onResize={() =>
 									setTerminalResizeToken((token) => token + 1)
 								}
-								className={styles.terminalPanel}
+								className={terminalStyles.terminalPanel}
 							>
 								<section
 									id="terminalSection"
-									className={clsx(styles.terminalSection, {
-										[styles.terminalSectionCollapsed]:
-											isTerminalCollapsed,
-									})}
+									className={clsx(
+										terminalStyles.terminalSection,
+										{
+											[terminalStyles.terminalSectionCollapsed]:
+												isTerminalCollapsed,
+										}
+									)}
 									aria-label="Playground terminal"
 								>
-									<div className={styles.terminalPane}>
-										<Terminal
-											playgroundClient={playgroundClient}
-											isCollapsed={isTerminalCollapsed}
-											resizeToken={terminalResizeToken}
-										/>
-									</div>
-									{bootStatus !== 'ready' ||
-									!playgroundClient ? (
+									{bootStatus === 'ready' &&
+									playgroundClient ? (
 										<div
-											className={styles.terminalOverlay}
-											aria-live="polite"
-											aria-busy="true"
+											className={
+												terminalStyles.terminalPane
+											}
 										>
-											<div
-												className={
-													styles.terminalOverlayContent
+											<Terminal
+												playgroundClient={
+													playgroundClient
 												}
-											>
-												<Spinner size={36} />
-												<div>Starting Playground…</div>
-												<div
-													style={{
-														opacity: 0.8,
-														fontSize: '12px',
-													}}
-												>
-													Terminal will be available
-													shortly
-												</div>
-											</div>
+												isCollapsed={
+													isTerminalCollapsed
+												}
+												resizeToken={
+													terminalResizeToken
+												}
+											/>
 										</div>
-									) : null}
+									) : (
+										<TerminalPlaceholder />
+									)}
 								</section>
 							</Panel>
 						</PanelGroup>
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
index dcba1d904f..e01387ab6b 100644
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
@@ -9,7 +9,6 @@ import React, {
 } from 'react';
 import type { FileNode, FilePickerTreeHandle } from '@wp-playground/components';
 import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
-import type { PlaygroundClient } from '@wp-playground/client';
 import styles from './layout.module.css';
 import saveAs from 'file-saver';
 import { zipDirectory } from '@wp-playground/common';
@@ -18,12 +17,12 @@ import { setCode, setCurrentPath } from '../store';
 import { DEFAULT_WORKSPACE_DIR } from '../constants';
 import { basename, dirname, joinPaths, normalizePath } from '@php-wasm/util';
 
-async function listDir(client: PlaygroundClient, path: string) {
-	const names = await client.listFiles(path);
+async function listDir(filesystem: AsyncFilesystem, path: string) {
+	const names = await filesystem.listFiles(path);
 	const results: { name: string; type: 'file' | 'folder' }[] = [];
 	for (const name of names) {
 		const childPath = path === '/' ? `/${name}` : `${path}/${name}`;
-		const isDirectory = await client.isDir(childPath);
+		const isDirectory = await filesystem.isDir(childPath);
 		results.push({ name, type: isDirectory ? 'folder' : 'file' });
 	}
 	return results.sort((a, b) => {
@@ -75,12 +74,26 @@ export interface PlaygroundFilePickerTreeRef {
 	createFolder: () => void;
 }
 
+export interface AsyncFilesystem {
+	isDir: (path: string) => Promise<boolean>;
+	fileExists: (path: string) => Promise<boolean>;
+	readFileAsBuffer: (path: string) => Promise<Uint8Array>;
+	readFileAsText: (path: string) => Promise<string>;
+	listFiles: (path: string) => Promise<string[]>;
+	writeFile: (path: string, data: Uint8Array | string) => Promise<void>;
+	mkdir: (path: string) => Promise<void>;
+	rmdir: (path: string, options?: { recursive?: boolean }) => Promise<void>;
+	mv: (source: string, destination: string) => Promise<void>;
+	unlink: (path: string) => Promise<void>;
+}
+
 export type PlaygroundFilePickerTreeProps = {
 	root?: string;
 	initialPath?: string;
 	excludePaths?: string[];
 	onSelect?: (path: string) => void;
-	playgroundClient?: PlaygroundClient;
+	filesystem?: AsyncFilesystem;
+
 	renamingPath?: string | null;
 	onRename?: (path: string, newName: string) => void;
 	onRenameCancel?: (path: string) => void;
@@ -110,7 +123,7 @@ const PlaygroundFilePickerTree = forwardRef<
 		initialPath,
 		excludePaths,
 		onSelect,
-		playgroundClient,
+		filesystem,
 		renamingPath,
 		onRenameCancel,
 		onContextMenu,
@@ -155,13 +168,13 @@ const PlaygroundFilePickerTree = forwardRef<
 			setFiles([{ name: rootName, type: 'folder' } as FileNode]);
 			return;
 		}
-		if (!playgroundClient) {
+		if (!filesystem) {
 			if (!isMountedRef.current) return;
 			setFiles([]);
 			return;
 		}
 		try {
-			const entries = await listDir(playgroundClient, '/');
+			const entries = await listDir(filesystem, '/');
 			const excludeSet = new Set(excludePaths ?? []);
 			const filtered = entries.filter((item) => {
 				const childAbs = `/${item.name}`;
@@ -176,7 +189,7 @@ const PlaygroundFilePickerTree = forwardRef<
 				setFiles([]);
 			}
 		}
-	}, [excludePathsKey, normalizedRoot, playgroundClient, rootName]);
+	}, [excludePathsKey, normalizedRoot, filesystem, rootName]);
 
 	useEffect(() => {
 		return () => {
@@ -258,9 +271,9 @@ const PlaygroundFilePickerTree = forwardRef<
 
 	const handleLoadChildren = useCallback(
 		async (corePath: string) => {
-			if (!playgroundClient) return [] as FileNode[];
+			if (!filesystem) return [] as FileNode[];
 			const absDirPath = corePathToAbsolute(corePath, normalizedRoot);
-			const items = await listDir(playgroundClient, absDirPath);
+			const items = await listDir(filesystem, absDirPath);
 			const filtered = items.filter((item) => {
 				const childAbs =
 					absDirPath === '/'
@@ -270,7 +283,7 @@ const PlaygroundFilePickerTree = forwardRef<
 			});
 			return prioritizeRenaming(filtered, absDirPath) as FileNode[];
 		},
-		[playgroundClient, normalizedRoot, excludePaths, prioritizeRenaming]
+		[filesystem, normalizedRoot, excludePaths, prioritizeRenaming]
 	);
 
 	const handleSelect = (path: string) => {
@@ -322,8 +335,8 @@ const PlaygroundFilePickerTree = forwardRef<
 		};
 		const prefix = baseDir === '/' ? '' : baseDir;
 		while (
-			(await playgroundClient?.fileExists(`${prefix}/${name}`)) ||
-			(await playgroundClient?.isDir(`${prefix}/${name}`))
+			(await filesystem?.fileExists(`${prefix}/${name}`)) ||
+			(await filesystem?.isDir(`${prefix}/${name}`))
 		) {
 			counter += 1;
 			const { stem, ext } = splitExt(baseName);
@@ -340,7 +353,7 @@ const PlaygroundFilePickerTree = forwardRef<
 			if (path === '/') {
 				break;
 			}
-			if (await playgroundClient?.isDir(path)) {
+			if (await filesystem?.isDir(path)) {
 				break;
 			}
 			path = dirname(path);
@@ -349,7 +362,7 @@ const PlaygroundFilePickerTree = forwardRef<
 	};
 
 	const handleCreateFile = async (targetDir?: string) => {
-		if (!playgroundClient) {
+		if (!filesystem) {
 			return;
 		}
 		const baseDir = await resolveBaseDir(targetDir);
@@ -360,7 +373,7 @@ const PlaygroundFilePickerTree = forwardRef<
 				'untitled.php'
 			);
 			const tempPath = joinPaths(normalizedBase, name);
-			await playgroundClient.writeFile(tempPath, '');
+			await filesystem.writeFile(tempPath, '');
 			pendingCreateRef.current = { type: 'file', tempPath };
 			setLocalRenamingPath(tempPath);
 			setLastSelectedPath(tempPath);
@@ -382,7 +395,7 @@ const PlaygroundFilePickerTree = forwardRef<
 	};
 
 	const handleCreateDirectory = async (targetDir?: string) => {
-		if (!playgroundClient) {
+		if (!filesystem) {
 			return;
 		}
 		const baseDir = await resolveBaseDir(targetDir);
@@ -390,7 +403,7 @@ const PlaygroundFilePickerTree = forwardRef<
 		try {
 			const name = await findAvailableName(normalizedBase, 'New Folder');
 			const tempPath = joinPaths(normalizedBase, name);
-			await playgroundClient.mkdir(tempPath);
+			await filesystem.mkdir(tempPath);
 			pendingCreateRef.current = { type: 'folder', tempPath };
 			setLocalRenamingPath(tempPath);
 			setLastSelectedPath(tempPath);
@@ -422,18 +435,18 @@ const PlaygroundFilePickerTree = forwardRef<
 
 	const handleDeletePath = useCallback(
 		async (targetPath: string, type: 'file' | 'folder') => {
-			if (!playgroundClient) {
+			if (!filesystem) {
 				return;
 			}
 			const normalized = normalizePath(targetPath);
 			setContextMenu(null);
 			try {
 				if (type === 'folder') {
-					await playgroundClient.rmdir(normalized, {
+					await filesystem.rmdir(normalized, {
 						recursive: true,
 					} as any);
 				} else {
-					await playgroundClient.unlink(normalized);
+					await filesystem.unlink(normalized);
 				}
 			} catch {
 				// Ignore failure
@@ -471,7 +484,7 @@ const PlaygroundFilePickerTree = forwardRef<
 			dispatch,
 			getDirname,
 			normalizedRoot,
-			playgroundClient,
+			filesystem,
 			reloadRoot,
 			toCore,
 		]
@@ -479,31 +492,29 @@ const PlaygroundFilePickerTree = forwardRef<
 
 	const handleDownloadPath = useCallback(
 		async (targetPath: string) => {
-			if (!playgroundClient) {
+			if (!filesystem) {
 				return;
 			}
 			setContextMenu(null);
 			try {
 				const normalized = normalizePath(targetPath);
 				const baseName = basename(normalized) || 'download';
-				const isDir = await playgroundClient.isDir(normalized);
+				const isDir = await filesystem.isDir(normalized);
 				if (isDir) {
 					const bytes = await zipDirectory(
-						playgroundClient as any,
+						filesystem as any,
 						normalized
 					);
 					saveAs(new File([bytes], `${baseName}.zip`));
 					return;
 				}
-				const data = await playgroundClient.readFileAsBuffer(
-					normalized
-				);
+				const data = await filesystem.readFileAsBuffer(normalized);
 				saveAs(new File([data], baseName));
 			} catch {
 				// Ignore failure
 			}
 		},
-		[playgroundClient]
+		[filesystem]
 	);
 
 	const contextMenuStyle = useMemo(() => {
@@ -535,7 +546,7 @@ const PlaygroundFilePickerTree = forwardRef<
 						: undefined
 				}
 				onRename={async (corePath, newName) => {
-					if (!playgroundClient) return;
+					if (!filesystem) return;
 					const absPath = corePathToAbsolute(
 						corePath,
 						normalizedRoot
@@ -550,11 +561,11 @@ const PlaygroundFilePickerTree = forwardRef<
 						if (isPending) {
 							try {
 								if (pending.type === 'folder') {
-									await playgroundClient.rmdir(absPath, {
+									await filesystem.rmdir(absPath, {
 										recursive: true,
 									} as any);
 								} else {
-									await playgroundClient.unlink(absPath);
+									await filesystem.unlink(absPath);
 								}
 							} catch (e) {
 								void e;
@@ -595,10 +606,10 @@ const PlaygroundFilePickerTree = forwardRef<
 						return;
 					}
 
-					const exists = await playgroundClient.fileExists(
+					const exists = await filesystem.fileExists(
 						candidateNormalized
 					);
-					const existsDir = await playgroundClient.isDir(
+					const existsDir = await filesystem.isDir(
 						candidateNormalized
 					);
 					if (
@@ -625,9 +636,9 @@ const PlaygroundFilePickerTree = forwardRef<
 					const coreCandidate = toCore(candidateNormalized);
 					let candidateIsDir = pending?.type === 'folder';
 					try {
-						await playgroundClient.mv(absPath, candidate as any);
+						await filesystem.mv(absPath, candidate as any);
 						if (!pending) {
-							const isDir = await playgroundClient.isDir(
+							const isDir = await filesystem.isDir(
 								candidate as any
 							);
 							candidateIsDir = isDir;
@@ -652,7 +663,7 @@ const PlaygroundFilePickerTree = forwardRef<
 							if (isPending) {
 								try {
 									const newContent =
-										await playgroundClient.readFileAsText(
+										await filesystem.readFileAsText(
 											candidate
 										);
 									dispatch(setCode(newContent));
@@ -686,11 +697,11 @@ const PlaygroundFilePickerTree = forwardRef<
 						if (isPending) {
 							try {
 								if (pending?.type === 'folder') {
-									await playgroundClient.rmdir(absPath, {
+									await filesystem.rmdir(absPath, {
 										recursive: true,
 									} as any);
 								} else {
-									await playgroundClient.unlink(absPath);
+									await filesystem.unlink(absPath);
 								}
 							} catch {
 								// Ignore failure
@@ -707,7 +718,7 @@ const PlaygroundFilePickerTree = forwardRef<
 						normalizedRoot
 					);
 					const pending = pendingCreateRef.current;
-					if (!playgroundClient || pending?.tempPath !== absPath) {
+					if (!filesystem || pending?.tempPath !== absPath) {
 						onRenameCancel?.(absPath);
 						setLocalRenamingPath((prev) =>
 							prev === absPath ? null : prev
@@ -716,11 +727,11 @@ const PlaygroundFilePickerTree = forwardRef<
 					}
 					try {
 						if (pending.type === 'folder') {
-							await playgroundClient.rmdir(absPath, {
+							await filesystem.rmdir(absPath, {
 								recursive: true,
 							} as any);
 						} else {
-							await playgroundClient.unlink(absPath);
+							await filesystem.unlink(absPath);
 						}
 					} catch (e) {
 						void e;
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
new file mode 100644
index 0000000000..ffeaa28c93
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
@@ -0,0 +1,96 @@
+.fileExplorerContainer {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	height: 100%;
+}
+
+.fileExplorerHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 10px;
+	background: #f5f5f5;
+	border-bottom: 1px solid #e0e0e0;
+}
+
+.fileExplorerTitle {
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	color: #555;
+}
+
+.fileExplorerActions {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.fileExplorerButton {
+	border: 1px solid transparent;
+	background: transparent;
+	padding: 4px 6px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
+	color: #444;
+	transition: background-color 0.2s ease, color 0.2s ease,
+		border-color 0.2s ease;
+}
+
+.fileExplorerButton:hover {
+	background: #e9e9e9;
+	color: #111;
+	border-color: #d0d0d0;
+}
+
+.fileExplorerButton:disabled {
+	opacity: 0.5;
+	cursor: default;
+	background: transparent;
+	border-color: transparent;
+}
+
+.fileExplorerTree {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	padding: 4px 0;
+}
+
+.contextMenu {
+	position: fixed;
+	z-index: 2000;
+	min-width: 180px;
+	background: #ffffff;
+	border: 1px solid #d0d0d0;
+	box-shadow: 0 12px 30px rgba(15, 15, 15, 0.18);
+	border-radius: 6px;
+	padding: 4px 0;
+}
+
+.contextMenuButton {
+	display: block;
+	width: 100%;
+	background: transparent;
+	border: none;
+	padding: 8px 16px;
+	text-align: left;
+	font-size: 13px;
+	color: #222;
+	cursor: pointer;
+}
+
+.contextMenuButton:hover {
+	background: #f0f0f5;
+}
+
+.contextMenuButtonDanger {
+	color: #c0312c;
+}
+
+.contextMenuButtonDanger:hover {
+	background: #ffecec;
+}
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerPlaceholder.tsx b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerPlaceholder.tsx
new file mode 100644
index 0000000000..0ed666f02c
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerPlaceholder.tsx
@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import styles from './FileExplorer.module.css';
+
+export default function FileExplorerPlaceholder() {
+	return (
+		<div className={styles.fileExplorerContainer}>
+			<div className={styles.fileExplorerHeader}>
+				<span className={styles.fileExplorerTitle}>Files</span>
+				<div className={styles.fileExplorerActions}>
+					<button className={styles.fileExplorerButton} disabled>
+						New File
+					</button>
+					<button className={styles.fileExplorerButton} disabled>
+						New Folder
+					</button>
+				</div>
+			</div>
+			<div className={styles.fileExplorerTree}>
+				<div className={styles.placeholderContainer} aria-live="polite">
+					<div className={styles.placeholderContent}>
+						<div className={styles.placeholderHeading}>
+							Preparing Playground…
+						</div>
+						<div className={styles.placeholderSubtext}>
+							File explorer will be ready shortly
+						</div>
+						<div className={styles.skeletonList} aria-hidden="true">
+							<div className={styles.skeletonLine}></div>
+							<div className={styles.skeletonLine}></div>
+							<div
+								className={clsx(
+									styles.skeletonLine,
+									styles.skeletonLineShort
+								)}
+							></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
similarity index 94%
rename from packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
rename to packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
index 3fb4e2406d..eed71ee795 100644
--- a/packages/playground/website/src/php-playground/components/FileExplorerSidebar.tsx
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
@@ -1,12 +1,12 @@
 import React, { useMemo, useRef } from 'react';
-import styles from './layout.module.css';
+import styles from './FileExplorer.module.css';
 import PlaygroundFilePickerTree, {
 	type PlaygroundFilePickerTreeRef,
-} from './PlaygroundFilePickerTree';
+} from '../PlaygroundFilePickerTree';
 import type { PlaygroundClient } from '@wp-playground/client';
-import { useAppDispatch } from '../hooks';
-import { setCode, setCurrentPath } from '../store';
-import { DEFAULT_WORKSPACE_DIR } from '../constants';
+import { useAppDispatch } from '../../hooks';
+import { setCode, setCurrentPath } from '../../store';
+import { DEFAULT_WORKSPACE_DIR } from '../../constants';
 
 const MAX_INLINE_BYTES = 1024 * 1024; // 1MB
 
@@ -112,7 +112,7 @@ export default function FileExplorerSidebar({
 			<div className={styles.fileExplorerTree}>
 				<PlaygroundFilePickerTree
 					ref={treeRef}
-					playgroundClient={playgroundClient ?? undefined}
+					filesystem={playgroundClient ?? undefined}
 					root="/"
 					initialPath={treeInitialPath}
 					excludePaths={['/dev', '/internal', '/proc', '/request']}
diff --git a/packages/playground/website/src/php-playground/components/terminal/Terminal.module.css b/packages/playground/website/src/php-playground/components/terminal/Terminal.module.css
new file mode 100644
index 0000000000..c36b6cf21d
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/terminal/Terminal.module.css
@@ -0,0 +1,103 @@
+.terminalPanel {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.terminalSection {
+	height: 100%;
+	background: #111;
+	color: #fff;
+	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+		'Courier New', monospace;
+	display: flex;
+	flex-direction: column;
+	border-top: 1px solid #333;
+	position: relative;
+}
+
+.terminalSectionCollapsed .terminalPane {
+	display: none;
+}
+
+.terminalPane {
+	box-sizing: border-box;
+	overflow: auto;
+	padding: 8px;
+	flex: 1;
+}
+
+.terminal {
+	width: 100%;
+	height: 100%;
+}
+
+/* Placeholder UI for pre-boot states */
+.placeholderContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	padding: 12px;
+	color: #666;
+	background: #fafafa;
+	border-top: 1px solid #eee;
+}
+
+.placeholderContent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+}
+
+.placeholderHeading {
+	font-size: 13px;
+	font-weight: 600;
+	color: #333;
+}
+
+.placeholderSubtext {
+	font-size: 12px;
+	color: #666;
+}
+
+.skeletonList {
+	width: 100%;
+	max-width: 220px;
+	margin-top: 6px;
+}
+
+.skeletonLine {
+	height: 10px;
+	border-radius: 6px;
+	background: linear-gradient(90deg, #ececec, #f5f5f5, #ececec);
+	background-size: 200% 100%;
+	animation: skeletonShimmer 1.2s ease-in-out infinite;
+	margin: 8px 0;
+}
+
+.skeletonLineShort {
+	width: 70%;
+}
+
+@keyframes skeletonShimmer {
+	0% {
+		background-position: 200% 0;
+	}
+	100% {
+		background-position: -200% 0;
+	}
+}
+
+@media (max-width: 768px) {
+	.terminalPane {
+		height: 200px;
+	}
+}
+
+@media (max-width: 480px) {
+	.terminalPane {
+		height: 160px;
+	}
+}
diff --git a/packages/playground/website/src/php-playground/components/Terminal.tsx b/packages/playground/website/src/php-playground/components/terminal/Terminal.tsx
similarity index 99%
rename from packages/playground/website/src/php-playground/components/Terminal.tsx
rename to packages/playground/website/src/php-playground/components/terminal/Terminal.tsx
index a8b42876f5..5ce46bb130 100644
--- a/packages/playground/website/src/php-playground/components/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/terminal/Terminal.tsx
@@ -7,13 +7,11 @@ import {
 } from '@php-wasm/util';
 import { Terminal as XTerm } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
-
-import { playgroundRuntime } from '../runtime';
-import styles from './layout.module.css';
+import styles from './Terminal.module.css';
 import 'xterm/css/xterm.css';
 import type { StreamedPHPResponse } from '@php-wasm/universal';
 import type { PlaygroundClient } from '@wp-playground/client';
-import { DEFAULT_WORKSPACE_DIR } from '../constants';
+import { DEFAULT_WORKSPACE_DIR } from '../../constants';
 
 const PROGRESS_BAR_WIDTH = 28;
 const SPINNER_FRAMES = ['-', '\\', '|', '/'];
diff --git a/packages/playground/website/src/php-playground/components/terminal/TerminalPlaceholder.tsx b/packages/playground/website/src/php-playground/components/terminal/TerminalPlaceholder.tsx
new file mode 100644
index 0000000000..62f2beede4
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/terminal/TerminalPlaceholder.tsx
@@ -0,0 +1,29 @@
+import styles from './Terminal.module.css';
+import { Spinner } from '../../../components/spinner';
+
+export default function TerminalPlaceholder() {
+	return (
+		<div
+			className={styles.placeholderContainer}
+			aria-live="polite"
+			aria-busy="true"
+		>
+			<div className={styles.placeholderContent}>
+				<Spinner size={36} />
+				<div className={styles.placeholderHeading}>
+					Starting Playground…
+				</div>
+				<div className={styles.placeholderSubtext}>
+					Terminal will be available shortly
+				</div>
+				<div className={styles.skeletonList} aria-hidden>
+					<div className={styles.skeletonLine}></div>
+					<div
+						className={`${styles.skeletonLine} ${styles.skeletonLineShort}`}
+					></div>
+					<div className={styles.skeletonLine}></div>
+				</div>
+			</div>
+		</div>
+	);
+}

From 80d181601cc34f968f9476b481e072df914c7154 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 16:18:04 +0200
Subject: [PATCH 32/41] Wrap main terminal component in a placeholder loader

---
 .../src/php-playground/components/Layout.tsx  | 38 +++++---------
 .../components/terminal/Terminal.tsx          | 52 +++++++++++++++----
 2 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 16b7219ec9..8ce6420951 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -12,8 +12,7 @@ import { HelpModal } from './HelpModal';
 import FileExplorerSidebar from './file-explorer/FileExplorerSidebar';
 import FileExplorerPlaceholder from './file-explorer/FileExplorerPlaceholder';
 import { PlaygroundManager } from './PlaygroundManager';
-import { Terminal } from './terminal/Terminal';
-import TerminalPlaceholder from './terminal/TerminalPlaceholder';
+import { TerminalWrapper } from './terminal/Terminal';
 import { useAppSelector } from '../hooks';
 import AddressBar from '../../components/address-bar';
 import { DEFAULT_WORKSPACE_DIR } from '../constants';
@@ -23,7 +22,9 @@ export const Layout = () => {
 	const [isTerminalCollapsed, setTerminalCollapsed] = useState(false);
 	const [terminalResizeToken, setTerminalResizeToken] = useState(0);
 	const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
-	const playgroundClient = useAppSelector((state) => state.playground.client);
+	const playgroundClient = useAppSelector(
+		(state) => state.playground.client ?? undefined
+	);
 	const bootStatus = useAppSelector((state) => state.playground.bootStatus);
 	const currentPath = useAppSelector((state) => state.playground.currentPath);
 	const [previewUrl, setPreviewUrl] = useState('');
@@ -143,28 +144,15 @@ export const Layout = () => {
 									)}
 									aria-label="Playground terminal"
 								>
-									{bootStatus === 'ready' &&
-									playgroundClient ? (
-										<div
-											className={
-												terminalStyles.terminalPane
-											}
-										>
-											<Terminal
-												playgroundClient={
-													playgroundClient
-												}
-												isCollapsed={
-													isTerminalCollapsed
-												}
-												resizeToken={
-													terminalResizeToken
-												}
-											/>
-										</div>
-									) : (
-										<TerminalPlaceholder />
-									)}
+									<div
+										className={terminalStyles.terminalPane}
+									>
+										<TerminalWrapper
+											playgroundClient={playgroundClient}
+											isCollapsed={isTerminalCollapsed}
+											resizeToken={terminalResizeToken}
+										/>
+									</div>
 								</section>
 							</Panel>
 						</PanelGroup>
diff --git a/packages/playground/website/src/php-playground/components/terminal/Terminal.tsx b/packages/playground/website/src/php-playground/components/terminal/Terminal.tsx
index 5ce46bb130..333b643477 100644
--- a/packages/playground/website/src/php-playground/components/terminal/Terminal.tsx
+++ b/packages/playground/website/src/php-playground/components/terminal/Terminal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
 	basename,
 	joinPaths,
@@ -12,6 +12,7 @@ import 'xterm/css/xterm.css';
 import type { StreamedPHPResponse } from '@php-wasm/universal';
 import type { PlaygroundClient } from '@wp-playground/client';
 import { DEFAULT_WORKSPACE_DIR } from '../../constants';
+import TerminalPlaceholder from './TerminalPlaceholder';
 
 const PROGRESS_BAR_WIDTH = 28;
 const SPINNER_FRAMES = ['-', '\\', '|', '/'];
@@ -24,12 +25,6 @@ interface DownloadProgress {
 	lastRenderedLength: number;
 }
 
-interface TerminalProps {
-	playgroundClient: PlaygroundClient;
-	isCollapsed: boolean;
-	resizeToken?: number;
-}
-
 const formatBytes = (bytes: number) => {
 	if (bytes < 1024) {
 		return `${bytes} B`;
@@ -68,11 +63,50 @@ const drawProgress = (term: XTerm, progress: DownloadProgress) => {
 	progress.lastRenderedLength = padLength;
 };
 
-export const Terminal = ({
+interface TerminalWrapperProps {
+	playgroundClient?: PlaygroundClient;
+	isCollapsed: boolean;
+	resizeToken?: number;
+}
+export const TerminalWrapper = ({
+	playgroundClient,
+	isCollapsed,
+	resizeToken = 0,
+}: TerminalWrapperProps) => {
+	const [cwd, setCwd] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (playgroundClient) {
+			playgroundClient
+				.isReady()
+				.then(() => playgroundClient.cwd())
+				.then((cwd) => {
+					setCwd(cwd);
+				});
+		}
+	}, [playgroundClient]);
+
+	if (!playgroundClient || cwd === null) {
+		return <TerminalPlaceholder />;
+	}
+
+	return (
+		<TerminalComponent
+			playgroundClient={playgroundClient!}
+			isCollapsed={isCollapsed}
+			resizeToken={resizeToken}
+		/>
+	);
+};
+
+interface TerminalComponentProps extends TerminalWrapperProps {
+	playgroundClient: PlaygroundClient;
+}
+export const TerminalComponent = ({
 	playgroundClient,
 	isCollapsed,
 	resizeToken = 0,
-}: TerminalProps) => {
+}: TerminalComponentProps) => {
 	const terminalContainerRef = useRef<HTMLDivElement | null>(null);
 	const fitAddonRef = useRef<FitAddon | null>(null);
 	const progressRef = useRef<DownloadProgress | null>(null);

From 890e7e97854bd0c2daceee10769cdc3c1b0e1c05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 16:20:43 +0200
Subject: [PATCH 33/41] UX tweaks

---
 .../website/src/php-playground/components/Layout.tsx  |  5 +++--
 .../playground/website/src/php-playground/main.tsx    | 11 ++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 8ce6420951..2fd41f58a4 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -7,7 +7,7 @@ import type { ImperativePanelHandle } from 'react-resizable-panels';
 import styles from './layout.module.css';
 import terminalStyles from './terminal/Terminal.module.css';
 import { Controls } from './Controls';
-import { EditorHost } from './EditorHost';
+import { EditorHost, EditorHostHandle } from './EditorHost';
 import { HelpModal } from './HelpModal';
 import FileExplorerSidebar from './file-explorer/FileExplorerSidebar';
 import FileExplorerPlaceholder from './file-explorer/FileExplorerPlaceholder';
@@ -34,6 +34,7 @@ export const Layout = () => {
 	const [forceSelectedPath, setForceSelectedPath] = useState<string | null>(
 		null
 	);
+	const editorHostRef = useRef<EditorHostHandle | null>(null);
 
 	useEffect(() => {
 		const previousTitle = document.title;
@@ -116,7 +117,7 @@ export const Layout = () => {
 											</span>
 										</div>
 									)}
-									<EditorHost />
+									<EditorHost ref={editorHostRef} />
 								</div>
 							</Panel>
 							<PanelResizeHandle
diff --git a/packages/playground/website/src/php-playground/main.tsx b/packages/playground/website/src/php-playground/main.tsx
index cc4a1065a2..f5d41753f2 100644
--- a/packages/playground/website/src/php-playground/main.tsx
+++ b/packages/playground/website/src/php-playground/main.tsx
@@ -3,12 +3,13 @@
  *
  * * Files explorer
  *    * "Refresh" button to refresh the directory tree – OR auto-refresh every ~five seconds.
- *    * Bug – sometimes collapsing a directory = children are not visible after reopening.
- *      It an actual bug, not a faulty vite hot reloader!
  *    * Ability to create top-level directories
- *    * When I click "new file" and have a file selected, create a file in the parent
- *      directory
- *    * After creating and opening a file, focus the editor
+ *    * Single click a file -> open it
+ *    * Double click a file -> focus the code editor
+ *    * ✅ Bug – sometimes collapsing a directory = children are not visible after reopening.
+ *         It an actual bug, not a faulty vite hot reloader!
+ *    * ✅ When I click "new file" and have a file selected, create a file in the parent
+ *         directory
  *    * ✅ Download file / directory action
  *    * ✅ Left/right arrows/delete don't work when renaming a file.
  *    * ✅ Indicate the terminal and file explorer are loading

From ca67eae092b3ca78ca34bb01d039e619be020d07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 16:54:31 +0200
Subject: [PATCH 34/41] Use WordPress dropdown menu component for context menu

---
 package-lock.json                             | 622 ++++++++++---
 package.json                                  |   2 +-
 .../src/php-playground/components/Layout.tsx  |   4 +-
 .../components/PlaygroundFilePickerTree.tsx   | 824 ------------------
 .../file-explorer/FileExplorer.module.css     |  11 +
 .../file-explorer/FileExplorerSidebar.tsx     |  26 +-
 6 files changed, 504 insertions(+), 985 deletions(-)
 delete mode 100644 packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx

diff --git a/package-lock.json b/package-lock.json
index eb77b9c322..05f8183bb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -91,7 +91,7 @@
 				"@vitejs/plugin-react": "4.2.0",
 				"@wordpress/block-editor": "13.4.0",
 				"@wordpress/blocks": "13.4.0",
-				"@wordpress/components": "28.4.0",
+				"@wordpress/components": "30.4.0",
 				"@wordpress/core-data": "7.4.0",
 				"@wordpress/data": "10.4.0",
 				"@wordpress/element": "6.4.0",
@@ -3948,6 +3948,13 @@
 				"ms": "^2.1.1"
 			}
 		},
+		"node_modules/@date-fns/tz": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+			"integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@discoveryjs/json-ext": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -14939,6 +14946,12 @@
 			"integrity": "sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw==",
 			"license": "MIT"
 		},
+		"node_modules/@tannin/sprintf": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/@tannin/sprintf/-/sprintf-1.3.3.tgz",
+			"integrity": "sha512-RwARl+hFwhzy0tg9atWcchLFvoQiOh4rrP7uG2N5E4W80BPCUX0ElcUR9St43fxB9EfjsW2df9Qp+UsTbvQDjA==",
+			"license": "MIT"
+		},
 		"node_modules/@tootallnate/once": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -17397,14 +17410,14 @@
 			}
 		},
 		"node_modules/@wordpress/a11y": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/a11y/-/a11y-4.22.0.tgz",
-			"integrity": "sha512-SJfpbao8Kz2vyS7L4KADgKTMFz/U5COfSk7tmMbRVeoueWOjQWRoLP+XPfGusuTnNy+UORwSH01F7tgUdw9MTw==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/a11y/-/a11y-4.31.0.tgz",
+			"integrity": "sha512-LU2Ea+RRaqe1Q8u15Y1dBxXfGwPsOtqXLZR7Bfk7y9yMsJnKqymovR7yvoPYe/4dWXy0B9sK1jUJtPAMUFfOng==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/dom-ready": "^4.22.0",
-				"@wordpress/i18n": "^5.22.0"
+				"@wordpress/dom-ready": "^4.31.0",
+				"@wordpress/i18n": "^6.4.0"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -17423,6 +17436,27 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@wordpress/a11y/node_modules/@wordpress/i18n": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-6.4.0.tgz",
+			"integrity": "sha512-tLTjdLw8H778K4fmEo5NDLYJOAgvHxgfLU5N7lPuBy2TKi8tQl24xgmJOlDLiMzbmbSEwvUBZ/4xWJsGq9ITDQ==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@tannin/sprintf": "^1.3.2",
+				"@wordpress/hooks": "^4.31.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/api-fetch": {
 			"version": "7.22.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-7.22.0.tgz",
@@ -17569,6 +17603,47 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/block-editor/node_modules/@ariakit/core": {
+			"version": "0.4.15",
+			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.15.tgz",
+			"integrity": "sha512-vvxmZvkNhiisKM+Y1TbGMUfVVchV/sWu9F0xw0RYADXcimWPK31dd9JnIZs/OQ5pwAryAHmERHwuGQVESkSjwQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@wordpress/block-editor/node_modules/@ariakit/react": {
+			"version": "0.4.18",
+			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.18.tgz",
+			"integrity": "sha512-r38DFvdv6JzjC/8mHekTaJEXO6hmx+YPIiyjq9oL7DckLmqGkAKbFrmQd2CeKZZ1c372DDVw7lLhYjj/VYCBZQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ariakit/react-core": "0.4.18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/ariakit"
+			},
+			"peerDependencies": {
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
+		"node_modules/@wordpress/block-editor/node_modules/@ariakit/react-core": {
+			"version": "0.4.18",
+			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.18.tgz",
+			"integrity": "sha512-wHtojXF7KPRwGTSbPg50l203Qngg2aGYCzCut+mYEwe3S0ZzuYVpiY+2Yh15HssnQ/S5yiDGRL4q94UEXsyO+w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ariakit/core": "0.4.15",
+				"@floating-ui/dom": "^1.0.0",
+				"use-sync-external-store": "^1.2.0"
+			},
+			"peerDependencies": {
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/@wordpress/block-editor/node_modules/@babel/runtime": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
@@ -17582,6 +17657,68 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@wordpress/block-editor/node_modules/@wordpress/components": {
+			"version": "28.13.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/components/-/components-28.13.0.tgz",
+			"integrity": "sha512-JaGcXYtFCvHqa62dtxMAMhu6afvefFOuwfUTNiLYg60CA4UDITt6gf+qhpvKNOzVg4qQRw10o/nryrOMoMAEEg==",
+			"dev": true,
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@ariakit/react": "^0.4.10",
+				"@babel/runtime": "7.25.7",
+				"@emotion/cache": "^11.7.1",
+				"@emotion/css": "^11.7.1",
+				"@emotion/react": "^11.7.1",
+				"@emotion/serialize": "^1.0.2",
+				"@emotion/styled": "^11.6.0",
+				"@emotion/utils": "^1.0.0",
+				"@floating-ui/react-dom": "^2.0.8",
+				"@types/gradient-parser": "0.1.3",
+				"@types/highlight-words-core": "1.2.1",
+				"@use-gesture/react": "^10.3.1",
+				"@wordpress/a11y": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/date": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/escape-html": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/primitives": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/rich-text": "*",
+				"@wordpress/warning": "*",
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1",
+				"colord": "^2.7.0",
+				"date-fns": "^3.6.0",
+				"deepmerge": "^4.3.0",
+				"fast-deep-equal": "^3.1.3",
+				"framer-motion": "^11.1.9",
+				"gradient-parser": "^0.1.5",
+				"highlight-words-core": "^1.2.2",
+				"is-plain-object": "^5.0.0",
+				"memize": "^2.1.0",
+				"path-to-regexp": "^6.2.1",
+				"re-resizable": "^6.4.0",
+				"react-colorful": "^5.3.1",
+				"remove-accents": "^0.5.0",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
 		"node_modules/@wordpress/block-editor/node_modules/@wordpress/keycodes": {
 			"version": "4.22.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.22.0.tgz",
@@ -17907,57 +18044,57 @@
 			}
 		},
 		"node_modules/@wordpress/components": {
-			"version": "28.4.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/components/-/components-28.4.0.tgz",
-			"integrity": "sha512-xtsUwaiV08be90cY4ERtXCprypldKymaeDuZMsL/P8nmBLLVpslUXpVsikBYRPpAARJxp9IAKYZ7FFNiHtJI+w==",
+			"version": "30.4.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/components/-/components-30.4.0.tgz",
+			"integrity": "sha512-PrZ8+VMCciVkWna//AH55Xg+TALw/E67358B5w/qiBohZ0CaoL1z4UcltkO+Gd5BJ1E14HbD8vC/6ao8dMXEJg==",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@ariakit/react": "^0.3.12",
-				"@babel/runtime": "^7.16.0",
+				"@ariakit/react": "^0.4.15",
+				"@babel/runtime": "7.25.7",
 				"@emotion/cache": "^11.7.1",
 				"@emotion/css": "^11.7.1",
 				"@emotion/react": "^11.7.1",
 				"@emotion/serialize": "^1.0.2",
 				"@emotion/styled": "^11.6.0",
 				"@emotion/utils": "^1.0.0",
-				"@floating-ui/react-dom": "^2.0.8",
-				"@types/gradient-parser": "0.1.3",
+				"@floating-ui/react-dom": "2.0.8",
+				"@types/gradient-parser": "1.1.0",
 				"@types/highlight-words-core": "1.2.1",
 				"@use-gesture/react": "^10.3.1",
-				"@wordpress/a11y": "^4.4.0",
-				"@wordpress/compose": "^7.4.0",
-				"@wordpress/date": "^5.4.0",
-				"@wordpress/deprecated": "^4.4.0",
-				"@wordpress/dom": "^4.4.0",
-				"@wordpress/element": "^6.4.0",
-				"@wordpress/escape-html": "^3.4.0",
-				"@wordpress/hooks": "^4.4.0",
-				"@wordpress/html-entities": "^4.4.0",
-				"@wordpress/i18n": "^5.4.0",
-				"@wordpress/icons": "^10.4.0",
-				"@wordpress/is-shallow-equal": "^5.4.0",
-				"@wordpress/keycodes": "^4.4.0",
-				"@wordpress/primitives": "^4.4.0",
-				"@wordpress/private-apis": "^1.4.0",
-				"@wordpress/rich-text": "^7.4.0",
-				"@wordpress/warning": "^3.4.0",
+				"@wordpress/a11y": "^4.31.0",
+				"@wordpress/compose": "^7.31.0",
+				"@wordpress/date": "^5.31.0",
+				"@wordpress/deprecated": "^4.31.0",
+				"@wordpress/dom": "^4.31.0",
+				"@wordpress/element": "^6.31.0",
+				"@wordpress/escape-html": "^3.31.0",
+				"@wordpress/hooks": "^4.31.0",
+				"@wordpress/html-entities": "^4.31.0",
+				"@wordpress/i18n": "^6.4.0",
+				"@wordpress/icons": "^10.31.0",
+				"@wordpress/is-shallow-equal": "^5.31.0",
+				"@wordpress/keycodes": "^4.31.0",
+				"@wordpress/primitives": "^4.31.0",
+				"@wordpress/private-apis": "^1.31.0",
+				"@wordpress/rich-text": "^7.31.0",
+				"@wordpress/warning": "^3.31.0",
 				"change-case": "^4.1.2",
 				"clsx": "^2.1.1",
 				"colord": "^2.7.0",
 				"date-fns": "^3.6.0",
 				"deepmerge": "^4.3.0",
 				"fast-deep-equal": "^3.1.3",
-				"framer-motion": "^11.1.9",
-				"gradient-parser": "^0.1.5",
+				"framer-motion": "^11.15.0",
+				"gradient-parser": "1.1.1",
 				"highlight-words-core": "^1.2.2",
 				"is-plain-object": "^5.0.0",
 				"memize": "^2.1.0",
 				"path-to-regexp": "^6.2.1",
 				"re-resizable": "^6.4.0",
 				"react-colorful": "^5.3.1",
+				"react-day-picker": "^9.7.0",
 				"remove-accents": "^0.5.0",
-				"use-lilius": "^2.0.5",
 				"uuid": "^9.0.1"
 			},
 			"engines": {
@@ -17969,6 +18106,47 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/components/node_modules/@ariakit/core": {
+			"version": "0.4.15",
+			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.15.tgz",
+			"integrity": "sha512-vvxmZvkNhiisKM+Y1TbGMUfVVchV/sWu9F0xw0RYADXcimWPK31dd9JnIZs/OQ5pwAryAHmERHwuGQVESkSjwQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@wordpress/components/node_modules/@ariakit/react": {
+			"version": "0.4.18",
+			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.18.tgz",
+			"integrity": "sha512-r38DFvdv6JzjC/8mHekTaJEXO6hmx+YPIiyjq9oL7DckLmqGkAKbFrmQd2CeKZZ1c372DDVw7lLhYjj/VYCBZQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ariakit/react-core": "0.4.18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/ariakit"
+			},
+			"peerDependencies": {
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
+		"node_modules/@wordpress/components/node_modules/@ariakit/react-core": {
+			"version": "0.4.18",
+			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.18.tgz",
+			"integrity": "sha512-wHtojXF7KPRwGTSbPg50l203Qngg2aGYCzCut+mYEwe3S0ZzuYVpiY+2Yh15HssnQ/S5yiDGRL4q94UEXsyO+w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ariakit/core": "0.4.15",
+				"@floating-ui/dom": "^1.0.0",
+				"use-sync-external-store": "^1.2.0"
+			},
+			"peerDependencies": {
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/@wordpress/components/node_modules/@babel/runtime": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
@@ -17982,15 +18160,79 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@wordpress/components/node_modules/@floating-ui/react-dom": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+			"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.6.1"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
+		"node_modules/@wordpress/components/node_modules/@types/gradient-parser": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-1.1.0.tgz",
+			"integrity": "sha512-SaEcbgQscHtGJ1QL+ajgDTmmqU2f6T+00jZRcFlVHUW2Asivc84LNUev/UQFyu117AsdyrtI+qpwLvgjJXJxmw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@wordpress/components/node_modules/@wordpress/element": {
+			"version": "6.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.31.0.tgz",
+			"integrity": "sha512-KOier6Y4b4Y5yEV1GYen81R9gCEOvJT6eVbsc93w2fFEKi2FK/oI7IKzGv9GeJMkoCWvTSX6C/ZYTWk6fCUfeA==",
+			"dev": true,
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@types/react": "^18.2.79",
+				"@types/react-dom": "^18.2.25",
+				"@wordpress/escape-html": "^3.31.0",
+				"change-case": "^4.1.2",
+				"is-plain-object": "^5.0.0",
+				"react": "^18.3.0",
+				"react-dom": "^18.3.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"node_modules/@wordpress/components/node_modules/@wordpress/i18n": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-6.4.0.tgz",
+			"integrity": "sha512-tLTjdLw8H778K4fmEo5NDLYJOAgvHxgfLU5N7lPuBy2TKi8tQl24xgmJOlDLiMzbmbSEwvUBZ/4xWJsGq9ITDQ==",
+			"dev": true,
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@tannin/sprintf": "^1.3.2",
+				"@wordpress/hooks": "^4.31.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/components/node_modules/@wordpress/keycodes": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.22.0.tgz",
-			"integrity": "sha512-xdFE7ZM2MwydodJ+4sSxjQDQU4+gwnI3KyJD6cBI3ubk2856Iu67Rbs4nXPuxDiolbRKGFURX6TfNpCI7/DdWw==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.31.0.tgz",
+			"integrity": "sha512-TmweVWZKUu3DreU9SAX69h7wGNnsl5cnN5S3RTVK3aMNOGhJabC7j7rueCmBgqgOFvzNEXeIL+SuYtWpIyEVsA==",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/i18n": "^5.22.0"
+				"@wordpress/i18n": "^6.4.0"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -18007,21 +18249,30 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/@wordpress/components/node_modules/gradient-parser": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-1.1.1.tgz",
+			"integrity": "sha512-Hu0YfNU+38EsTmnUfLXUKFMXq9yz7htGYpF4x+dlbBhUCvIvzLt0yVLT/gJRmvLKFJdqNFrz4eKkIUjIXSr7Tw==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/@wordpress/compose": {
-			"version": "7.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-7.22.0.tgz",
-			"integrity": "sha512-EXaqsE8hv6sfOgcjAjcU9JCZ1SZ8+8qaI/NRsQau9zSqQ2XTP9ZTCC02UjeGtd4wjewGuksvZocvD1AfRxrwHQ==",
+			"version": "7.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-7.31.0.tgz",
+			"integrity": "sha512-kxb1qHhiFwUDifBM9r4JZ3gYC1ZUvck5tgjmaWeg8EqIEnVn+Z7C+ntNA9ySLWrmDYc4Gki7YJZbfVHzrtcDLg==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
 				"@types/mousetrap": "^1.6.8",
-				"@wordpress/deprecated": "^4.22.0",
-				"@wordpress/dom": "^4.22.0",
-				"@wordpress/element": "^6.22.0",
-				"@wordpress/is-shallow-equal": "^5.22.0",
-				"@wordpress/keycodes": "^4.22.0",
-				"@wordpress/priority-queue": "^3.22.0",
-				"@wordpress/undo-manager": "^1.22.0",
+				"@wordpress/deprecated": "^4.31.0",
+				"@wordpress/dom": "^4.31.0",
+				"@wordpress/element": "^6.31.0",
+				"@wordpress/is-shallow-equal": "^5.31.0",
+				"@wordpress/keycodes": "^4.31.0",
+				"@wordpress/priority-queue": "^3.31.0",
+				"@wordpress/undo-manager": "^1.31.0",
 				"change-case": "^4.1.2",
 				"clipboard": "^2.0.11",
 				"mousetrap": "^1.6.5",
@@ -18048,15 +18299,15 @@
 			}
 		},
 		"node_modules/@wordpress/compose/node_modules/@wordpress/element": {
-			"version": "6.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.22.0.tgz",
-			"integrity": "sha512-EX6vnRZBaJWkZU99gKPAJ77ZNZocNaFQr3FjYqVNRUBNyAfu2D8bIyBFAfuGn+YSWp+NAQxO4/j2NOBD44go2g==",
+			"version": "6.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.31.0.tgz",
+			"integrity": "sha512-KOier6Y4b4Y5yEV1GYen81R9gCEOvJT6eVbsc93w2fFEKi2FK/oI7IKzGv9GeJMkoCWvTSX6C/ZYTWk6fCUfeA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
 				"@types/react": "^18.2.79",
 				"@types/react-dom": "^18.2.25",
-				"@wordpress/escape-html": "^3.22.0",
+				"@wordpress/escape-html": "^3.31.0",
 				"change-case": "^4.1.2",
 				"is-plain-object": "^5.0.0",
 				"react": "^18.3.0",
@@ -18067,14 +18318,35 @@
 				"npm": ">=8.19.2"
 			}
 		},
+		"node_modules/@wordpress/compose/node_modules/@wordpress/i18n": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-6.4.0.tgz",
+			"integrity": "sha512-tLTjdLw8H778K4fmEo5NDLYJOAgvHxgfLU5N7lPuBy2TKi8tQl24xgmJOlDLiMzbmbSEwvUBZ/4xWJsGq9ITDQ==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@tannin/sprintf": "^1.3.2",
+				"@wordpress/hooks": "^4.31.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/compose/node_modules/@wordpress/keycodes": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.22.0.tgz",
-			"integrity": "sha512-xdFE7ZM2MwydodJ+4sSxjQDQU4+gwnI3KyJD6cBI3ubk2856Iu67Rbs4nXPuxDiolbRKGFURX6TfNpCI7/DdWw==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.31.0.tgz",
+			"integrity": "sha512-TmweVWZKUu3DreU9SAX69h7wGNnsl5cnN5S3RTVK3aMNOGhJabC7j7rueCmBgqgOFvzNEXeIL+SuYtWpIyEVsA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/i18n": "^5.22.0"
+				"@wordpress/i18n": "^6.4.0"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -18360,13 +18632,13 @@
 			}
 		},
 		"node_modules/@wordpress/date": {
-			"version": "5.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/date/-/date-5.22.0.tgz",
-			"integrity": "sha512-QxA2Mv274a2r+Bd8kgj4bWjqlRxPjwPmYH9R72WfGP4FlsVFnFNomqFq3aqSCvt3Nz1RZwBqHmBScdYJNTv0zA==",
+			"version": "5.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/date/-/date-5.31.0.tgz",
+			"integrity": "sha512-xqKytkb60N9i+ETqTI+Asgb1myZIgnUne8zsGaYQU+B7H1M3ELw4lmc+ptDXjXrpI1Yb6BGUad4EIHBGVk+mog==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/deprecated": "^4.22.0",
+				"@wordpress/deprecated": "^4.31.0",
 				"moment": "^2.29.4",
 				"moment-timezone": "^0.5.40"
 			},
@@ -18388,13 +18660,13 @@
 			}
 		},
 		"node_modules/@wordpress/deprecated": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-4.22.0.tgz",
-			"integrity": "sha512-RLPlzoz4N6JV0nYHRt4fBvlm8PhJQRyv4MZJhuky8JfQLxflYFokDdxlq6Ek/oqqkHcSKcqDdz2HnU6HUib08g==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-4.31.0.tgz",
+			"integrity": "sha512-bbDrL2lp7crFfvmJ1EYVxPDcheTIwimt3gVzqQWCDr0SSCQw4fii5NEKOrUnWhz51YCuPbfWXUBaFlbAMS2CXw==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/hooks": "^4.22.0"
+				"@wordpress/hooks": "^4.31.0"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -18414,13 +18686,13 @@
 			}
 		},
 		"node_modules/@wordpress/dom": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/dom/-/dom-4.22.0.tgz",
-			"integrity": "sha512-3m0IuoSpmXT+r9PBlWK7S0R/J1809A0eSiEF8ze/yGctMzbiLdNM/eFgFGO/qQhBDQ2QrWbo7VqcmyEa2VIOKw==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/dom/-/dom-4.31.0.tgz",
+			"integrity": "sha512-5/RBy9OreQktnBE75cB3R6Lva5c6hUlXvPo1NFfAebLeXX+7swZBmLYZnyf7dZbARRdqSwkundHZoKLcHa+20A==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/deprecated": "^4.22.0"
+				"@wordpress/deprecated": "^4.31.0"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -18428,9 +18700,9 @@
 			}
 		},
 		"node_modules/@wordpress/dom-ready": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/dom-ready/-/dom-ready-4.22.0.tgz",
-			"integrity": "sha512-rCeICNZrJ89M6q/OjmM9HgCC6WEc8KcHfkhax6qQOpEE9a0ME0Ha4fhFu07n9TJihf0+RtoPCcA8UHurfMbmxw==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/dom-ready/-/dom-ready-4.31.0.tgz",
+			"integrity": "sha512-aRM4l5wzkrqAU686s4fz1bb+/7/BOFp+sXB0kx1vkiXl3ocfmHAr3jwEYU+OH/sX6Is3Ntkfh0uZe3EJLsqHTQ==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -18486,9 +18758,9 @@
 			}
 		},
 		"node_modules/@wordpress/escape-html": {
-			"version": "3.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-3.22.0.tgz",
-			"integrity": "sha512-MFzI7ijZhxQfOuNZOueGuNJKBEIth99nvXLCRXEdKWupHScCk0fJjim7hos4mLO/9aV1NM9SwkLndYBoBrpVWw==",
+			"version": "3.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-3.31.0.tgz",
+			"integrity": "sha512-9g9qd7Q16PWDeYEa2dU+84d1SvjP4LfS7n7AuXkwl5+F7KfL2nZTmDTHWutw9jVjdDAGmjm1VNIj4ydQk9vaLA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -18511,9 +18783,9 @@
 			}
 		},
 		"node_modules/@wordpress/hooks": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-4.22.0.tgz",
-			"integrity": "sha512-FhVOqKU4yKpGUh1X1BHgcQducyNbdzFuWW0KhCXtIhiNMM9hOFYstub6Oa7jGqytu2hZaYl6/EDPx3dZ/eexLA==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-4.31.0.tgz",
+			"integrity": "sha512-8YOftWP54V4hvO46/FgXnpiB/fAC72CWD/F1JYtcfZcrWgbR96MGZxKXNvn5BgLx6juO36QQuFhJ5y2ZUEulkw==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -18536,9 +18808,9 @@
 			}
 		},
 		"node_modules/@wordpress/html-entities": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/html-entities/-/html-entities-4.22.0.tgz",
-			"integrity": "sha512-/Azt++iyBEo5G/7Wio233bYFnAcl/gruQL4xFgEmPh1CvLXVWySRlJQtHztPFeAl+PRD7EvQx9qGqS5Getg5sA==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/html-entities/-/html-entities-4.31.0.tgz",
+			"integrity": "sha512-5dk9h16jSXDTSdk0HnyXEOgZd7VSsMtr3YCSUQvzIYOFkpW2q1eB10coXHiuz0Z5ArlTuNYSfBd2J02xnG+a8g==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -18594,14 +18866,14 @@
 			}
 		},
 		"node_modules/@wordpress/icons": {
-			"version": "10.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-10.22.0.tgz",
-			"integrity": "sha512-258sp8kBFVKwpWgDGdu7fw1peO7uNNSePp4FT4WligEkHPNltVmnc2r8JQbWRs9quEvlDglqu/yjyzTeEA7U+w==",
+			"version": "10.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-10.31.0.tgz",
+			"integrity": "sha512-Bfwt3SyjqClG6mwY78zhlzVRRW/OIqej09NLOGO0CDtjfrgQqD5HAK8kk2CayQr4hWeKMoFxzPBevMxWumBMPA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/element": "^6.22.0",
-				"@wordpress/primitives": "^4.22.0"
+				"@wordpress/element": "^6.31.0",
+				"@wordpress/primitives": "^4.31.0"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -18621,15 +18893,15 @@
 			}
 		},
 		"node_modules/@wordpress/icons/node_modules/@wordpress/element": {
-			"version": "6.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.22.0.tgz",
-			"integrity": "sha512-EX6vnRZBaJWkZU99gKPAJ77ZNZocNaFQr3FjYqVNRUBNyAfu2D8bIyBFAfuGn+YSWp+NAQxO4/j2NOBD44go2g==",
+			"version": "6.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.31.0.tgz",
+			"integrity": "sha512-KOier6Y4b4Y5yEV1GYen81R9gCEOvJT6eVbsc93w2fFEKi2FK/oI7IKzGv9GeJMkoCWvTSX6C/ZYTWk6fCUfeA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
 				"@types/react": "^18.2.79",
 				"@types/react-dom": "^18.2.25",
-				"@wordpress/escape-html": "^3.22.0",
+				"@wordpress/escape-html": "^3.31.0",
 				"change-case": "^4.1.2",
 				"is-plain-object": "^5.0.0",
 				"react": "^18.3.0",
@@ -18641,9 +18913,9 @@
 			}
 		},
 		"node_modules/@wordpress/is-shallow-equal": {
-			"version": "5.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-5.22.0.tgz",
-			"integrity": "sha512-bH/MM0Jgvrv7I3VP5sNVSUiHbD1sJZL4lITYF7gf6L6spvTEPUDS3OwRKea3FnzCQe2ZIDBZOpJKW1fbWl5gew==",
+			"version": "5.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-5.31.0.tgz",
+			"integrity": "sha512-jqGEw+5DLNf2kNbjaNxIKWQGYkqxygRYDYTdhZ+f+Btw/gMKILJq0sZGRD8YjJFGG0cOC2qxtJnr9oF36Iu96Q==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -19060,13 +19332,13 @@
 			}
 		},
 		"node_modules/@wordpress/primitives": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-4.22.0.tgz",
-			"integrity": "sha512-HeZI4tP3fbxk7yRsFk/wY03ot/Mj/4wZ55+wrQbc95SHJ9O16QdmGAw0kdBwIDij9LDQUFe0HcGzOV69IAA3Og==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-4.31.0.tgz",
+			"integrity": "sha512-cY4EKYQRqHu9NZuoWchxc/KWiofwGskzxz0oCfgbdkRlfTag8yBjWMayz+fRNaenw0l5pzLyIg3rcNDN8xLezw==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/element": "^6.22.0",
+				"@wordpress/element": "^6.31.0",
 				"clsx": "^2.1.1"
 			},
 			"engines": {
@@ -19090,15 +19362,15 @@
 			}
 		},
 		"node_modules/@wordpress/primitives/node_modules/@wordpress/element": {
-			"version": "6.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.22.0.tgz",
-			"integrity": "sha512-EX6vnRZBaJWkZU99gKPAJ77ZNZocNaFQr3FjYqVNRUBNyAfu2D8bIyBFAfuGn+YSWp+NAQxO4/j2NOBD44go2g==",
+			"version": "6.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.31.0.tgz",
+			"integrity": "sha512-KOier6Y4b4Y5yEV1GYen81R9gCEOvJT6eVbsc93w2fFEKi2FK/oI7IKzGv9GeJMkoCWvTSX6C/ZYTWk6fCUfeA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
 				"@types/react": "^18.2.79",
 				"@types/react-dom": "^18.2.25",
-				"@wordpress/escape-html": "^3.22.0",
+				"@wordpress/escape-html": "^3.31.0",
 				"change-case": "^4.1.2",
 				"is-plain-object": "^5.0.0",
 				"react": "^18.3.0",
@@ -19119,9 +19391,9 @@
 			}
 		},
 		"node_modules/@wordpress/priority-queue": {
-			"version": "3.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-3.22.0.tgz",
-			"integrity": "sha512-mu6I1svNj5dYlbd92Zs/Y0JuEizerOhf/zGlJEbuZPquu+n4MFZR89zYpm+OfXvvr9ixKXSou7J8Ca1UjrZuFw==",
+			"version": "3.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-3.31.0.tgz",
+			"integrity": "sha512-OuHq9iGB8wppHfoMHs4g07Cc2yh2DyyqySDn+bpyXPbDcuqxU9s9EgjY08ZVjJEYMuFz2sjC16HlOFqv3NBYAg==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -19145,9 +19417,9 @@
 			}
 		},
 		"node_modules/@wordpress/private-apis": {
-			"version": "1.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/private-apis/-/private-apis-1.22.0.tgz",
-			"integrity": "sha512-QThSkpOPPh/62T/SBYzW+seblIT3TJlyV7sKwGszoI9FE8fARxxzRWRDT6gkOwhZR7C4KWGrNu0IgVpNy8n8sQ==",
+			"version": "1.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/private-apis/-/private-apis-1.31.0.tgz",
+			"integrity": "sha512-OS/OvnUFj2QKeAsPGwgzETLPQhN8Ek1AC3q7rpuu+kZhZxB5hOsHDF/759XxH0fGPL/n0/Xqo4ZlnVYwPwqMPg==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -19170,9 +19442,9 @@
 			}
 		},
 		"node_modules/@wordpress/redux-routine": {
-			"version": "5.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/redux-routine/-/redux-routine-5.22.0.tgz",
-			"integrity": "sha512-+FZoMNAxW4XhtefVx4o9CeEj96MrCV0/vMF/MmHu4ayadUTLLv9mRX0HCKPGogNF/8pyMWFge+eJgw4Rf8d5rg==",
+			"version": "5.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/redux-routine/-/redux-routine-5.31.0.tgz",
+			"integrity": "sha512-J16NmvIxWMU4lJMWrAshLCac5qjIs1QZnSzQXNKBXxg78ZjB7sa5Q9Qb8/aYxFVIIzTvpvDQVyHhHPcUnB4KYA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -19201,20 +19473,21 @@
 			}
 		},
 		"node_modules/@wordpress/rich-text": {
-			"version": "7.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-7.22.0.tgz",
-			"integrity": "sha512-HBlbGt2mc9e/rqEIUgXV58tI1grFf1bmK95H/tHsscrExbXKaIjumECnnCkjIzPLjRqwgA2VM7dQqag08K2Zdw==",
+			"version": "7.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-7.31.0.tgz",
+			"integrity": "sha512-s1CHb9vFYxa/fOPXSMn8GauOYb+gSVczHHx06Hj86JilGNAKmALADqzR+6D6ACKjahQypduYsF9P669PY7+PrQ==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/a11y": "^4.22.0",
-				"@wordpress/compose": "^7.22.0",
-				"@wordpress/data": "^10.22.0",
-				"@wordpress/deprecated": "^4.22.0",
-				"@wordpress/element": "^6.22.0",
-				"@wordpress/escape-html": "^3.22.0",
-				"@wordpress/i18n": "^5.22.0",
-				"@wordpress/keycodes": "^4.22.0",
+				"@wordpress/a11y": "^4.31.0",
+				"@wordpress/compose": "^7.31.0",
+				"@wordpress/data": "^10.31.0",
+				"@wordpress/deprecated": "^4.31.0",
+				"@wordpress/element": "^6.31.0",
+				"@wordpress/escape-html": "^3.31.0",
+				"@wordpress/i18n": "^6.4.0",
+				"@wordpress/keycodes": "^4.31.0",
+				"colord": "2.9.3",
 				"memize": "^2.1.0"
 			},
 			"engines": {
@@ -19238,19 +19511,19 @@
 			}
 		},
 		"node_modules/@wordpress/rich-text/node_modules/@wordpress/data": {
-			"version": "10.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/data/-/data-10.22.0.tgz",
-			"integrity": "sha512-AbPbbvdWB6X30MIAlaAQ2BEAO4+p1G5YnmLfanWNUP9sl7L30JklIm7eRgYe7nA78uC71cax6bBQSBvgBAmV+A==",
+			"version": "10.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/data/-/data-10.31.0.tgz",
+			"integrity": "sha512-iuQxrmbW55q+xy7lnXH8D6qHFAoG0/YcnjZ6jvqpDekRhdgl4kAPE+crx/kJ5RkrIIo38a+cLgVskCaKo+9E3w==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/compose": "^7.22.0",
-				"@wordpress/deprecated": "^4.22.0",
-				"@wordpress/element": "^6.22.0",
-				"@wordpress/is-shallow-equal": "^5.22.0",
-				"@wordpress/priority-queue": "^3.22.0",
-				"@wordpress/private-apis": "^1.22.0",
-				"@wordpress/redux-routine": "^5.22.0",
+				"@wordpress/compose": "^7.31.0",
+				"@wordpress/deprecated": "^4.31.0",
+				"@wordpress/element": "^6.31.0",
+				"@wordpress/is-shallow-equal": "^5.31.0",
+				"@wordpress/priority-queue": "^3.31.0",
+				"@wordpress/private-apis": "^1.31.0",
+				"@wordpress/redux-routine": "^5.31.0",
 				"deepmerge": "^4.3.0",
 				"equivalent-key-map": "^0.2.2",
 				"is-plain-object": "^5.0.0",
@@ -19268,15 +19541,15 @@
 			}
 		},
 		"node_modules/@wordpress/rich-text/node_modules/@wordpress/element": {
-			"version": "6.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.22.0.tgz",
-			"integrity": "sha512-EX6vnRZBaJWkZU99gKPAJ77ZNZocNaFQr3FjYqVNRUBNyAfu2D8bIyBFAfuGn+YSWp+NAQxO4/j2NOBD44go2g==",
+			"version": "6.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-6.31.0.tgz",
+			"integrity": "sha512-KOier6Y4b4Y5yEV1GYen81R9gCEOvJT6eVbsc93w2fFEKi2FK/oI7IKzGv9GeJMkoCWvTSX6C/ZYTWk6fCUfeA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
 				"@types/react": "^18.2.79",
 				"@types/react-dom": "^18.2.25",
-				"@wordpress/escape-html": "^3.22.0",
+				"@wordpress/escape-html": "^3.31.0",
 				"change-case": "^4.1.2",
 				"is-plain-object": "^5.0.0",
 				"react": "^18.3.0",
@@ -19287,14 +19560,35 @@
 				"npm": ">=8.19.2"
 			}
 		},
+		"node_modules/@wordpress/rich-text/node_modules/@wordpress/i18n": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-6.4.0.tgz",
+			"integrity": "sha512-tLTjdLw8H778K4fmEo5NDLYJOAgvHxgfLU5N7lPuBy2TKi8tQl24xgmJOlDLiMzbmbSEwvUBZ/4xWJsGq9ITDQ==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@tannin/sprintf": "^1.3.2",
+				"@wordpress/hooks": "^4.31.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/rich-text/node_modules/@wordpress/keycodes": {
-			"version": "4.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.22.0.tgz",
-			"integrity": "sha512-xdFE7ZM2MwydodJ+4sSxjQDQU4+gwnI3KyJD6cBI3ubk2856Iu67Rbs4nXPuxDiolbRKGFURX6TfNpCI7/DdWw==",
+			"version": "4.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.31.0.tgz",
+			"integrity": "sha512-TmweVWZKUu3DreU9SAX69h7wGNnsl5cnN5S3RTVK3aMNOGhJabC7j7rueCmBgqgOFvzNEXeIL+SuYtWpIyEVsA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/i18n": "^5.22.0"
+				"@wordpress/i18n": "^6.4.0"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -19421,13 +19715,13 @@
 			}
 		},
 		"node_modules/@wordpress/undo-manager": {
-			"version": "1.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/undo-manager/-/undo-manager-1.22.0.tgz",
-			"integrity": "sha512-Kub6w7kOyXiD5GVNQ4hq4gNZJp9hB4c3dfHVji+gvt/lKRxu7tgMM31b5nHYOkIUIcutUqkGmFc0efbD5qFaVg==",
+			"version": "1.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/undo-manager/-/undo-manager-1.31.0.tgz",
+			"integrity": "sha512-4jsvLaf+O/AMX/2m34BHS4Jz/Z+9vfxkNLP0mhuqftOWRC66XFseMqU19VszQypL7VxWKMahenYqZw4O22JNnQ==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@wordpress/is-shallow-equal": "^5.22.0"
+				"@wordpress/is-shallow-equal": "^5.31.0"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -19475,9 +19769,9 @@
 			}
 		},
 		"node_modules/@wordpress/warning": {
-			"version": "3.22.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-3.22.0.tgz",
-			"integrity": "sha512-GvL9XdnRyDfFbwtZ6X0hoRDlQr6G5kHLWhq5gnE6uJ9xqiuPR9CQgM24a8LE3Oje1ipdWvPA7Cyr6tv4y8TuMQ==",
+			"version": "3.31.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-3.31.0.tgz",
+			"integrity": "sha512-Npw1Apa6r+K+jtX40ABWAXv7J1bVnOi6h9VPiMY8l/iZoRHBXao8HTgQnIoCm+GzymaQs6NQoH4X8UAClggeXA==",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -24146,6 +24440,13 @@
 				"url": "https://github.com/sponsors/kossnocorp"
 			}
 		},
+		"node_modules/date-fns-jalali": {
+			"version": "4.1.0-0",
+			"resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+			"integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/date-format": {
 			"version": "4.0.14",
 			"resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
@@ -43250,6 +43551,39 @@
 				"react-dom": ">=16.8.0"
 			}
 		},
+		"node_modules/react-day-picker": {
+			"version": "9.11.0",
+			"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.0.tgz",
+			"integrity": "sha512-L4FYOaPrr3+AEROeP6IG2mCORZZfxJDkJI2df8mv1jyPrNYeccgmFPZDaHyAuPCBCddQFozkxbikj2NhMEYfDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@date-fns/tz": "^1.4.1",
+				"date-fns": "^4.1.0",
+				"date-fns-jalali": "^4.1.0-0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://github.com/sponsors/gpbl"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0"
+			}
+		},
+		"node_modules/react-day-picker/node_modules/date-fns": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
 		"node_modules/react-dom": {
 			"version": "18.3.1",
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
diff --git a/package.json b/package.json
index 5b3a49c54e..7494db3b48 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,7 @@
 		"@vitejs/plugin-react": "4.2.0",
 		"@wordpress/block-editor": "13.4.0",
 		"@wordpress/blocks": "13.4.0",
-		"@wordpress/components": "28.4.0",
+		"@wordpress/components": "30.4.0",
 		"@wordpress/core-data": "7.4.0",
 		"@wordpress/data": "10.4.0",
 		"@wordpress/element": "6.4.0",
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index 2fd41f58a4..cde82a7e7c 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -7,7 +7,7 @@ import type { ImperativePanelHandle } from 'react-resizable-panels';
 import styles from './layout.module.css';
 import terminalStyles from './terminal/Terminal.module.css';
 import { Controls } from './Controls';
-import { EditorHost, EditorHostHandle } from './EditorHost';
+import { EditorHost, type EditorHostHandle } from './EditorHost';
 import { HelpModal } from './HelpModal';
 import FileExplorerSidebar from './file-explorer/FileExplorerSidebar';
 import FileExplorerPlaceholder from './file-explorer/FileExplorerPlaceholder';
@@ -79,7 +79,7 @@ export const Layout = () => {
 					<div className={styles.editorPane}>
 						{bootStatus === 'ready' && playgroundClient ? (
 							<FileExplorerSidebar
-								playgroundClient={playgroundClient}
+								filesystem={playgroundClient}
 								currentPath={currentPath}
 								selectedDirPath={selectedDirPath}
 								setSelectedDirPath={setSelectedDirPath}
diff --git a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
deleted file mode 100644
index e01387ab6b..0000000000
--- a/packages/playground/website/src/php-playground/components/PlaygroundFilePickerTree.tsx
+++ /dev/null
@@ -1,824 +0,0 @@
-import React, {
-	forwardRef,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import type { FileNode, FilePickerTreeHandle } from '@wp-playground/components';
-import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
-import styles from './layout.module.css';
-import saveAs from 'file-saver';
-import { zipDirectory } from '@wp-playground/common';
-import { useAppDispatch, useAppSelector } from '../hooks';
-import { setCode, setCurrentPath } from '../store';
-import { DEFAULT_WORKSPACE_DIR } from '../constants';
-import { basename, dirname, joinPaths, normalizePath } from '@php-wasm/util';
-
-async function listDir(filesystem: AsyncFilesystem, path: string) {
-	const names = await filesystem.listFiles(path);
-	const results: { name: string; type: 'file' | 'folder' }[] = [];
-	for (const name of names) {
-		const childPath = path === '/' ? `/${name}` : `${path}/${name}`;
-		const isDirectory = await filesystem.isDir(childPath);
-		results.push({ name, type: isDirectory ? 'folder' : 'file' });
-	}
-	return results.sort((a, b) => {
-		if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
-		return a.name.localeCompare(b.name);
-	});
-}
-
-function getBaseName(path: string) {
-	const p = normalizePath(path);
-	if (p === '/') return '/';
-	const parts = p.split('/').filter(Boolean);
-	return parts[parts.length - 1] || '/';
-}
-
-function toCorePath(absPath: string, normalizedRoot: string) {
-	const abs = normalizePath(absPath);
-	const rootName = getBaseName(normalizedRoot);
-	if (abs === normalizedRoot) return rootName;
-	if (normalizedRoot === '/') {
-		// When root is '/', drop the leading '/'
-		return abs === '/' ? '' : abs.slice(1);
-	}
-	const prefix = normalizedRoot.endsWith('/')
-		? normalizedRoot
-		: normalizedRoot + '/';
-	if (abs.startsWith(prefix)) {
-		return rootName + abs.slice(normalizedRoot.length);
-	}
-	return rootName;
-}
-
-function corePathToAbsolute(corePath: string, normalizedRoot: string) {
-	const rootName = getBaseName(normalizedRoot);
-	if (corePath === rootName) return normalizedRoot;
-	if (normalizedRoot === '/') {
-		// When root is '/', the incoming core path is relative to '/'
-		return normalizePath('/' + corePath);
-	}
-	const prefix = rootName.endsWith('/') ? rootName : rootName + '/';
-	if (corePath.startsWith(prefix)) {
-		return normalizePath(normalizedRoot + corePath.slice(rootName.length));
-	}
-	return normalizedRoot;
-}
-
-export interface PlaygroundFilePickerTreeRef {
-	createFile: () => void;
-	createFolder: () => void;
-}
-
-export interface AsyncFilesystem {
-	isDir: (path: string) => Promise<boolean>;
-	fileExists: (path: string) => Promise<boolean>;
-	readFileAsBuffer: (path: string) => Promise<Uint8Array>;
-	readFileAsText: (path: string) => Promise<string>;
-	listFiles: (path: string) => Promise<string[]>;
-	writeFile: (path: string, data: Uint8Array | string) => Promise<void>;
-	mkdir: (path: string) => Promise<void>;
-	rmdir: (path: string, options?: { recursive?: boolean }) => Promise<void>;
-	mv: (source: string, destination: string) => Promise<void>;
-	unlink: (path: string) => Promise<void>;
-}
-
-export type PlaygroundFilePickerTreeProps = {
-	root?: string;
-	initialPath?: string;
-	excludePaths?: string[];
-	onSelect?: (path: string) => void;
-	filesystem?: AsyncFilesystem;
-
-	renamingPath?: string | null;
-	onRename?: (path: string, newName: string) => void;
-	onRenameCancel?: (path: string) => void;
-	onContextMenu?: (
-		event: React.MouseEvent,
-		node: FileNode,
-		path: string
-	) => void;
-};
-
-const isValidNameSegment = (name: string) => {
-	if (!name) {
-		return false;
-	}
-	if (name === '.' || name === '..') {
-		return false;
-	}
-	return !/[\\/]/.test(name);
-};
-
-const PlaygroundFilePickerTree = forwardRef<
-	PlaygroundFilePickerTreeRef,
-	PlaygroundFilePickerTreeProps
->(function PlaygroundFilePickerTree(
-	{
-		root = '/wordpress',
-		initialPath,
-		excludePaths,
-		onSelect,
-		filesystem,
-		renamingPath,
-		onRenameCancel,
-		onContextMenu,
-	},
-	ref
-) {
-	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
-	const rootName = useMemo(
-		() => getBaseName(normalizedRoot),
-		[normalizedRoot]
-	);
-	const excludePathsKey = useMemo(
-		() => JSON.stringify(excludePaths ?? []),
-		[excludePaths]
-	);
-
-	const [files, setFiles] = useState<FileNode[]>([]);
-	const [contextMenu, setContextMenu] = useState<{
-		path: string;
-		type: 'file' | 'folder';
-		x: number;
-		y: number;
-	} | null>(null);
-	const [localRenamingPath, setLocalRenamingPath] = useState<string | null>(
-		null
-	);
-	const treeRef = useRef<FilePickerTreeHandle>(null);
-	const pendingCreateRef = useRef<{
-		type: 'file' | 'folder';
-		tempPath: string;
-	} | null>(null);
-	const isMountedRef = useRef(true);
-	const [lastSelectedPath, setLastSelectedPath] = useState<string | null>(
-		initialPath ?? DEFAULT_WORKSPACE_DIR
-	);
-	const dispatch = useAppDispatch();
-	const currentPath = useAppSelector((state) => state.playground.currentPath);
-
-	const reloadRoot = useCallback(async () => {
-		if (normalizedRoot !== '/') {
-			if (!isMountedRef.current) return;
-			setFiles([{ name: rootName, type: 'folder' } as FileNode]);
-			return;
-		}
-		if (!filesystem) {
-			if (!isMountedRef.current) return;
-			setFiles([]);
-			return;
-		}
-		try {
-			const entries = await listDir(filesystem, '/');
-			const excludeSet = new Set(excludePaths ?? []);
-			const filtered = entries.filter((item) => {
-				const childAbs = `/${item.name}`;
-				return !excludeSet.has(childAbs);
-			});
-			const ordered = prioritizeRenaming(filtered, '/');
-			if (isMountedRef.current) {
-				setFiles(ordered as FileNode[]);
-			}
-		} catch {
-			if (isMountedRef.current) {
-				setFiles([]);
-			}
-		}
-	}, [excludePathsKey, normalizedRoot, filesystem, rootName]);
-
-	useEffect(() => {
-		return () => {
-			isMountedRef.current = false;
-		};
-	}, []);
-
-	const getDirname = useCallback((path: string) => {
-		const p = normalizePath(path);
-		if (p === '/') return '/';
-		const i = p.lastIndexOf('/');
-		return i <= 0 ? '/' : p.slice(0, i);
-	}, []);
-
-	const getBasename = useCallback((path: string) => {
-		const p = normalizePath(path);
-		if (p === '/') return '/';
-		const i = p.lastIndexOf('/');
-		return i < 0 ? p : p.slice(i + 1);
-	}, []);
-
-	const prioritizeRenaming = useCallback(
-		(
-			items: { name: string; type: 'file' | 'folder' }[],
-			absDirPath: string
-		) => {
-			if (!renamingPath) return items;
-			const renPath = normalizePath(renamingPath);
-			if (getDirname(renPath) !== absDirPath) return items;
-			const targetName = getBasename(renPath);
-			const idx = items.findIndex((i) => i.name === targetName);
-			if (idx === -1) return items;
-			const copy = items.slice();
-			const [entry] = copy.splice(idx, 1);
-			const dirs = copy.filter((i) => i.type === 'folder');
-			const filesOnly = copy.filter((i) => i.type === 'file');
-			if (entry.type === 'folder') {
-				return [entry, ...dirs, ...filesOnly];
-			}
-			return [...dirs, entry, ...filesOnly];
-		},
-		[renamingPath, getDirname, getBasename]
-	);
-
-	const toCore = useCallback(
-		(path: string) => toCorePath(path, normalizedRoot),
-		[normalizedRoot]
-	);
-
-	useEffect(() => {
-		void reloadRoot();
-	}, [reloadRoot]);
-
-	const coreInitialPath = useMemo(
-		() => (initialPath ? toCore(initialPath) : undefined),
-		[initialPath, toCore]
-	);
-
-	// Dismiss context menu on outside interactions / ESC key
-	useEffect(() => {
-		if (!contextMenu) {
-			return;
-		}
-		const handleClose = () => setContextMenu(null);
-		const handleKey = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') {
-				handleClose();
-			}
-		};
-		window.addEventListener('click', handleClose);
-		window.addEventListener('contextmenu', handleClose);
-		window.addEventListener('keydown', handleKey);
-		return () => {
-			window.removeEventListener('click', handleClose);
-			window.removeEventListener('contextmenu', handleClose);
-			window.removeEventListener('keydown', handleKey);
-		};
-	}, [contextMenu]);
-
-	const handleLoadChildren = useCallback(
-		async (corePath: string) => {
-			if (!filesystem) return [] as FileNode[];
-			const absDirPath = corePathToAbsolute(corePath, normalizedRoot);
-			const items = await listDir(filesystem, absDirPath);
-			const filtered = items.filter((item) => {
-				const childAbs =
-					absDirPath === '/'
-						? `/${item.name}`
-						: `${absDirPath}/${item.name}`;
-				return !excludePaths?.includes(childAbs);
-			});
-			return prioritizeRenaming(filtered, absDirPath) as FileNode[];
-		},
-		[filesystem, normalizedRoot, excludePaths, prioritizeRenaming]
-	);
-
-	const handleSelect = (path: string) => {
-		const normalized = normalizePath('/' + path);
-		setLastSelectedPath(normalized);
-		if (onSelect) onSelect(normalized);
-	};
-
-	const effectiveRenamingPath = useMemo(() => {
-		return renamingPath ?? localRenamingPath ?? undefined;
-	}, [renamingPath, localRenamingPath]);
-
-	const handleInternalContextMenu = (
-		event: React.MouseEvent,
-		node: FileNode,
-		corePath: string
-	) => {
-		event.preventDefault();
-		event.stopPropagation();
-		const absPath = corePathToAbsolute(corePath, normalizedRoot);
-		setLocalRenamingPath(null);
-		setContextMenu({
-			path: absPath,
-			type: node.type,
-			x: event.clientX,
-			y: event.clientY,
-		});
-		if (onContextMenu) {
-			onContextMenu(event, node, absPath);
-		}
-	};
-
-	const handleContextMenuRename = (targetPath: string) => {
-		setContextMenu(null);
-		setLocalRenamingPath(targetPath);
-	};
-
-	// dirname helper not needed in this component
-
-	const findAvailableName = async (baseDir: string, baseName: string) => {
-		let name = baseName;
-		let counter = 0;
-		const splitExt = (n: string) => {
-			const dot = n.lastIndexOf('.');
-			if (dot > 0) {
-				return { stem: n.slice(0, dot), ext: n.slice(dot) };
-			}
-			return { stem: n, ext: '' };
-		};
-		const prefix = baseDir === '/' ? '' : baseDir;
-		while (
-			(await filesystem?.fileExists(`${prefix}/${name}`)) ||
-			(await filesystem?.isDir(`${prefix}/${name}`))
-		) {
-			counter += 1;
-			const { stem, ext } = splitExt(baseName);
-			name = `${stem} (${counter})${ext}`;
-		}
-		return name;
-	};
-
-	const resolveBaseDir = async (path?: string) => {
-		if (!path) {
-			path = lastSelectedPath || DEFAULT_WORKSPACE_DIR;
-		}
-		while (true) {
-			if (path === '/') {
-				break;
-			}
-			if (await filesystem?.isDir(path)) {
-				break;
-			}
-			path = dirname(path);
-		}
-		return path;
-	};
-
-	const handleCreateFile = async (targetDir?: string) => {
-		if (!filesystem) {
-			return;
-		}
-		const baseDir = await resolveBaseDir(targetDir);
-		const normalizedBase = normalizePath(baseDir);
-		try {
-			const name = await findAvailableName(
-				normalizedBase,
-				'untitled.php'
-			);
-			const tempPath = joinPaths(normalizedBase, name);
-			await filesystem.writeFile(tempPath, '');
-			pendingCreateRef.current = { type: 'file', tempPath };
-			setLocalRenamingPath(tempPath);
-			setLastSelectedPath(tempPath);
-			const coreBase = toCore(normalizedBase);
-			const coreTemp = toCore(tempPath);
-			if (normalizedRoot === '/' && normalizedBase === '/') {
-				await reloadRoot();
-				setTimeout(() => {
-					treeRef.current?.focusPath(coreTemp, { notify: false });
-				}, 0);
-			} else if (treeRef.current) {
-				await treeRef.current.expandToPath(coreBase);
-				await treeRef.current.refresh(coreBase);
-				treeRef.current.focusPath(coreTemp, { notify: false });
-			}
-		} catch (e) {
-			void e;
-		}
-	};
-
-	const handleCreateDirectory = async (targetDir?: string) => {
-		if (!filesystem) {
-			return;
-		}
-		const baseDir = await resolveBaseDir(targetDir);
-		const normalizedBase = normalizePath(baseDir);
-		try {
-			const name = await findAvailableName(normalizedBase, 'New Folder');
-			const tempPath = joinPaths(normalizedBase, name);
-			await filesystem.mkdir(tempPath);
-			pendingCreateRef.current = { type: 'folder', tempPath };
-			setLocalRenamingPath(tempPath);
-			setLastSelectedPath(tempPath);
-			const coreBase = toCore(normalizedBase);
-			const coreTemp = toCore(tempPath);
-			if (normalizedRoot === '/' && normalizedBase === '/') {
-				await reloadRoot();
-				setTimeout(() => {
-					treeRef.current?.focusPath(coreTemp, { notify: false });
-				}, 0);
-			} else if (treeRef.current) {
-				await treeRef.current.expandToPath(coreBase);
-				await treeRef.current.refresh(coreBase);
-				treeRef.current.focusPath(coreTemp, { notify: false });
-			}
-		} catch (e) {
-			void e;
-		}
-	};
-
-	useImperativeHandle(
-		ref,
-		() => ({
-			createFile: handleCreateFile,
-			createFolder: handleCreateDirectory,
-		}),
-		[handleCreateFile, handleCreateDirectory]
-	);
-
-	const handleDeletePath = useCallback(
-		async (targetPath: string, type: 'file' | 'folder') => {
-			if (!filesystem) {
-				return;
-			}
-			const normalized = normalizePath(targetPath);
-			setContextMenu(null);
-			try {
-				if (type === 'folder') {
-					await filesystem.rmdir(normalized, {
-						recursive: true,
-					} as any);
-				} else {
-					await filesystem.unlink(normalized);
-				}
-			} catch {
-				// Ignore failure
-			} finally {
-				setLocalRenamingPath(null);
-				const parentDir = getDirname(normalized);
-				setLastSelectedPath(parentDir);
-				const coreParent = toCore(parentDir);
-				if (normalizedRoot === '/' && parentDir === '/') {
-					await reloadRoot();
-					if (coreParent) {
-						setTimeout(() => {
-							treeRef.current?.focusPath(coreParent, {
-								notify: false,
-							});
-						}, 0);
-					}
-				} else if (treeRef.current) {
-					await treeRef.current.refresh(coreParent);
-					treeRef.current.focusPath(coreParent, { notify: false });
-				}
-				// Clear editor if deleted current file or a parent directory
-				if (
-					currentPath &&
-					(currentPath === normalized ||
-						currentPath.startsWith(`${normalized}/`))
-				) {
-					dispatch(setCode(''));
-					dispatch(setCurrentPath(null));
-				}
-			}
-		},
-		[
-			currentPath,
-			dispatch,
-			getDirname,
-			normalizedRoot,
-			filesystem,
-			reloadRoot,
-			toCore,
-		]
-	);
-
-	const handleDownloadPath = useCallback(
-		async (targetPath: string) => {
-			if (!filesystem) {
-				return;
-			}
-			setContextMenu(null);
-			try {
-				const normalized = normalizePath(targetPath);
-				const baseName = basename(normalized) || 'download';
-				const isDir = await filesystem.isDir(normalized);
-				if (isDir) {
-					const bytes = await zipDirectory(
-						filesystem as any,
-						normalized
-					);
-					saveAs(new File([bytes], `${baseName}.zip`));
-					return;
-				}
-				const data = await filesystem.readFileAsBuffer(normalized);
-				saveAs(new File([data], baseName));
-			} catch {
-				// Ignore failure
-			}
-		},
-		[filesystem]
-	);
-
-	const contextMenuStyle = useMemo(() => {
-		if (!contextMenu)
-			return undefined as undefined | { left: number; top: number };
-		const left =
-			typeof window === 'undefined'
-				? contextMenu.x
-				: Math.min(contextMenu.x, window.innerWidth - 200);
-		const top =
-			typeof window === 'undefined'
-				? contextMenu.y
-				: Math.min(contextMenu.y, window.innerHeight - 140);
-		return { left, top };
-	}, [contextMenu]);
-
-	return (
-		<>
-			<CoreFilePickerTree
-				ref={treeRef}
-				files={files}
-				initialPath={coreInitialPath}
-				onSelect={handleSelect}
-				onLoadChildren={handleLoadChildren}
-				autoFocus={false}
-				renamingPath={
-					effectiveRenamingPath
-						? toCore(effectiveRenamingPath)
-						: undefined
-				}
-				onRename={async (corePath, newName) => {
-					if (!filesystem) return;
-					const absPath = corePathToAbsolute(
-						corePath,
-						normalizedRoot
-					);
-					const pending = pendingCreateRef.current;
-					const isPending = pending?.tempPath === absPath;
-					const parent = getDirname(absPath);
-					const coreParent = toCore(parent);
-					const coreOriginal = toCore(absPath);
-					const sanitized = (newName || '').trim();
-					if (!isValidNameSegment(sanitized)) {
-						if (isPending) {
-							try {
-								if (pending.type === 'folder') {
-									await filesystem.rmdir(absPath, {
-										recursive: true,
-									} as any);
-								} else {
-									await filesystem.unlink(absPath);
-								}
-							} catch (e) {
-								void e;
-							}
-							pendingCreateRef.current = null;
-						}
-						setLocalRenamingPath(isPending ? null : absPath);
-						return;
-					}
-
-					const composePath = (name: string) =>
-						parent === '/' ? `/${name}` : `${parent}/${name}`;
-					let candidate = composePath(sanitized);
-					let candidateNormalized = normalizePath(candidate);
-					if (candidateNormalized === absPath) {
-						setLocalRenamingPath(null);
-						if (isPending) {
-							pendingCreateRef.current = null;
-						}
-						setLastSelectedPath(candidateNormalized);
-						const coreCandidateSame = toCore(candidateNormalized);
-						if (coreCandidateSame) {
-							if (normalizedRoot === '/' && parent === '/') {
-								setTimeout(() => {
-									treeRef.current?.focusPath(
-										coreCandidateSame,
-										{
-											notify: false,
-										}
-									);
-								}, 0);
-							} else {
-								treeRef.current?.focusPath(coreCandidateSame, {
-									notify: false,
-								});
-							}
-						}
-						return;
-					}
-
-					const exists = await filesystem.fileExists(
-						candidateNormalized
-					);
-					const existsDir = await filesystem.isDir(
-						candidateNormalized
-					);
-					if (
-						(exists || existsDir) &&
-						candidateNormalized !== absPath
-					) {
-						if (isPending) {
-							try {
-								const unique = await findAvailableName(
-									parent === '/' ? '/' : parent,
-									sanitized
-								);
-								candidate = composePath(unique);
-								candidateNormalized = normalizePath(candidate);
-							} catch (e) {
-								void e;
-							}
-						} else {
-							setLocalRenamingPath(absPath);
-							return;
-						}
-					}
-
-					const coreCandidate = toCore(candidateNormalized);
-					let candidateIsDir = pending?.type === 'folder';
-					try {
-						await filesystem.mv(absPath, candidate as any);
-						if (!pending) {
-							const isDir = await filesystem.isDir(
-								candidate as any
-							);
-							candidateIsDir = isDir;
-						}
-						setLastSelectedPath(candidateNormalized);
-						if (
-							candidateIsDir &&
-							treeRef.current &&
-							coreOriginal &&
-							coreCandidate
-						) {
-							treeRef.current.remapPath(
-								coreOriginal,
-								coreCandidate
-							);
-						}
-						if (candidateIsDir) {
-							if (currentPath === absPath) {
-								dispatch(setCurrentPath(candidate));
-							}
-						} else {
-							if (isPending) {
-								try {
-									const newContent =
-										await filesystem.readFileAsText(
-											candidate
-										);
-									dispatch(setCode(newContent));
-									dispatch(setCurrentPath(candidate));
-								} catch (e) {
-									void e;
-								}
-							} else if (currentPath === absPath) {
-								dispatch(setCurrentPath(candidate));
-							}
-						}
-
-						if (normalizedRoot === '/' && parent === '/') {
-							await reloadRoot();
-							if (coreCandidate) {
-								setTimeout(() => {
-									treeRef.current?.focusPath(coreCandidate, {
-										notify: false,
-									});
-								}, 0);
-							}
-						} else if (treeRef.current) {
-							await treeRef.current.refresh(coreParent);
-							if (coreCandidate) {
-								treeRef.current.focusPath(coreCandidate, {
-									notify: false,
-								});
-							}
-						}
-					} catch {
-						if (isPending) {
-							try {
-								if (pending?.type === 'folder') {
-									await filesystem.rmdir(absPath, {
-										recursive: true,
-									} as any);
-								} else {
-									await filesystem.unlink(absPath);
-								}
-							} catch {
-								// Ignore failure
-							}
-						}
-					} finally {
-						pendingCreateRef.current = null;
-						setLocalRenamingPath(null);
-					}
-				}}
-				onRenameCancel={async (corePath) => {
-					const absPath = corePathToAbsolute(
-						corePath,
-						normalizedRoot
-					);
-					const pending = pendingCreateRef.current;
-					if (!filesystem || pending?.tempPath !== absPath) {
-						onRenameCancel?.(absPath);
-						setLocalRenamingPath((prev) =>
-							prev === absPath ? null : prev
-						);
-						return;
-					}
-					try {
-						if (pending.type === 'folder') {
-							await filesystem.rmdir(absPath, {
-								recursive: true,
-							} as any);
-						} else {
-							await filesystem.unlink(absPath);
-						}
-					} catch (e) {
-						void e;
-					}
-					pendingCreateRef.current = null;
-					setLocalRenamingPath(null);
-					const parentDir = getDirname(absPath);
-					setLastSelectedPath(parentDir);
-					const coreParent = toCore(parentDir);
-					if (normalizedRoot === '/' && parentDir === '/') {
-						await reloadRoot();
-					} else if (treeRef.current) {
-						await treeRef.current.refresh(coreParent);
-					}
-					if (coreParent) {
-						const focusLater =
-							normalizedRoot === '/' && parentDir === '/';
-						const focusAction = () =>
-							treeRef.current?.focusPath(coreParent, {
-								notify: false,
-							});
-						if (focusLater) {
-							setTimeout(focusAction, 0);
-						} else {
-							focusAction();
-						}
-					}
-				}}
-				onContextMenu={handleInternalContextMenu}
-			/>
-			{contextMenu && contextMenuStyle && (
-				<div
-					className={styles.contextMenu}
-					style={contextMenuStyle}
-					onClick={(event) => event.stopPropagation()}
-					onContextMenu={(event) => event.preventDefault()}
-				>
-					{contextMenu.type === 'folder' && (
-						<button
-							className={styles.contextMenuButton}
-							onClick={async () => {
-								const dir = contextMenu.path;
-								setContextMenu(null);
-								await handleCreateFile(dir);
-							}}
-						>
-							Create file
-						</button>
-					)}
-					{contextMenu.type === 'folder' && (
-						<button
-							className={styles.contextMenuButton}
-							onClick={async () => {
-								const dir = contextMenu.path;
-								setContextMenu(null);
-								await handleCreateDirectory(dir);
-							}}
-						>
-							Create directory
-						</button>
-					)}
-					<button
-						className={styles.contextMenuButton}
-						onClick={() =>
-							handleContextMenuRename(contextMenu.path)
-						}
-					>
-						Rename
-					</button>
-					<button
-						className={`${styles.contextMenuButton} ${styles.contextMenuButtonDanger}`}
-						onClick={() =>
-							handleDeletePath(contextMenu.path, contextMenu.type)
-						}
-					>
-						Delete
-					</button>
-					<button
-						className={styles.contextMenuButton}
-						onClick={() => handleDownloadPath(contextMenu.path)}
-					>
-						Download
-					</button>
-				</div>
-			)}
-		</>
-	);
-});
-
-export default PlaygroundFilePickerTree;
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
index ffeaa28c93..44648aac51 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
@@ -71,6 +71,17 @@
 	padding: 4px 0;
 }
 
+.contextMenuTrigger {
+	position: fixed;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	pointer-events: none;
+	opacity: 0;
+}
+
 .contextMenuButton {
 	display: block;
 	width: 100%;
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
index eed71ee795..38e87b6072 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo, useRef } from 'react';
 import styles from './FileExplorer.module.css';
 import PlaygroundFilePickerTree, {
+	type AsyncFilesystem,
 	type PlaygroundFilePickerTreeRef,
-} from '../PlaygroundFilePickerTree';
-import type { PlaygroundClient } from '@wp-playground/client';
+} from './PlaygroundFilePickerTree';
 import { useAppDispatch } from '../../hooks';
 import { setCode, setCurrentPath } from '../../store';
 import { DEFAULT_WORKSPACE_DIR } from '../../constants';
@@ -57,14 +57,14 @@ const createDownloadUrl = (data: Uint8Array, filename: string) => {
 };
 
 export default function FileExplorerSidebar({
-	playgroundClient,
+	filesystem,
 	currentPath,
 	selectedDirPath,
 	setSelectedDirPath,
 	forceSelectedPath,
 	setForceSelectedPath,
 }: {
-	playgroundClient: PlaygroundClient | null;
+	filesystem: AsyncFilesystem | null;
 	currentPath: string | null;
 	selectedDirPath: string | null;
 	setSelectedDirPath: React.Dispatch<React.SetStateAction<string | null>>;
@@ -95,7 +95,7 @@ export default function FileExplorerSidebar({
 						className={styles.fileExplorerButton}
 						onClick={() => treeRef.current?.createFile()}
 						title="Create new file"
-						disabled={!playgroundClient}
+						disabled={!filesystem}
 					>
 						New File
 					</button>
@@ -103,7 +103,7 @@ export default function FileExplorerSidebar({
 						className={styles.fileExplorerButton}
 						onClick={() => treeRef.current?.createFolder()}
 						title="Create new folder"
-						disabled={!playgroundClient}
+						disabled={!filesystem}
 					>
 						New Folder
 					</button>
@@ -112,23 +112,21 @@ export default function FileExplorerSidebar({
 			<div className={styles.fileExplorerTree}>
 				<PlaygroundFilePickerTree
 					ref={treeRef}
-					filesystem={playgroundClient ?? undefined}
+					filesystem={filesystem ?? undefined}
 					root="/"
 					initialPath={treeInitialPath}
 					excludePaths={['/dev', '/internal', '/proc', '/request']}
 					onSelect={async (path) => {
 						setForceSelectedPath(null);
-						if (
-							playgroundClient &&
-							(await playgroundClient.isDir(path))
-						) {
+						if (filesystem && (await filesystem.isDir(path))) {
 							setSelectedDirPath(path);
 							return;
 						}
-						if (!playgroundClient) return;
+						if (!filesystem) return;
 						try {
-							const data =
-								await playgroundClient.readFileAsBuffer(path);
+							const data = await filesystem.readFileAsBuffer(
+								path
+							);
 							const size = data.byteLength;
 							if (size > MAX_INLINE_BYTES) {
 								const { url, filename } = createDownloadUrl(

From f5d1f7f4ed4f5d1c4df5a832cc534b555111d9b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 16:57:30 +0200
Subject: [PATCH 35/41] UX improvements around the file epxlorer

---
 .../components/file-explorer/FileExplorer.module.css | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
index 44648aac51..346a5f907d 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorer.module.css
@@ -92,16 +92,12 @@
 	font-size: 13px;
 	color: #222;
 	cursor: pointer;
+
+	&.contextMenuButtonDanger {
+		color: #c0312c;
+	}
 }
 
 .contextMenuButton:hover {
 	background: #f0f0f5;
 }
-
-.contextMenuButtonDanger {
-	color: #c0312c;
-}
-
-.contextMenuButtonDanger:hover {
-	background: #ffecec;
-}

From 15bbba4fb35b615617a94bbb8dfa1a7927b7d74a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 22:47:48 +0200
Subject: [PATCH 36/41] Tests, cleanup code

---
 .../components/src/FilePickerTree/index.tsx   | 263 ++++---
 .../ct/file-picker-tree.ct.spec.tsx           |   0
 .../playground-file-picker-tree.ct.spec.tsx   | 636 +++++++++++++++++
 .../playwright/playwright-ct.config.ts        |   0
 .../src/php-playground/components/Layout.tsx  |   2 -
 .../file-explorer/FileExplorerSidebar.tsx     |  31 +-
 .../PlaygroundFilePickerTree.tsx              | 662 ++++++++++++++++++
 7 files changed, 1445 insertions(+), 149 deletions(-)
 create mode 100644 packages/playground/website/playwright/ct/file-picker-tree.ct.spec.tsx
 create mode 100644 packages/playground/website/playwright/ct/playground-file-picker-tree.ct.spec.tsx
 create mode 100644 packages/playground/website/playwright/playwright-ct.config.ts
 create mode 100644 packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index 98dcf3b046..44c807d1dc 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -1,6 +1,5 @@
 import React, {
 	forwardRef,
-	useCallback,
 	useEffect,
 	useImperativeHandle,
 	useRef,
@@ -131,146 +130,141 @@ export const FilePickerTree = forwardRef<
 		lazyChildrenRef.current = lazyChildren;
 	}, [lazyChildren]);
 
-	const focusDomNode = useCallback((path: string) => {
+	const focusDomNode = (path: string) => {
 		const focusTarget = containerRef.current?.querySelector(
 			`[data-path="${path}"]`
 		) as HTMLElement | null;
 		if (focusTarget && typeof focusTarget.focus === 'function') {
 			focusTarget.focus();
 		}
-	}, []);
-
-	const generatePath = useCallback(
-		(node: FileNode, parentPath = ''): string => {
-			const raw = parentPath ? `${parentPath}/${node.name}` : node.name;
-			return raw.replaceAll(/\\+/g, '/').replace(/\/{2,}/g, '/');
-		},
-		[]
-	);
+	};
 
-	const getResolvedChildren = useCallback(
-		(node: FileNode, path: string): FileNode[] | undefined => {
-			if (node.children) {
-				return node.children;
-			}
-			return lazyChildren[path];
-		},
-		[lazyChildren]
-	);
+	const generatePath = (node: FileNode, parentPath = ''): string => {
+		const raw = parentPath ? `${parentPath}/${node.name}` : node.name;
+		return raw.replaceAll(/\\+/g, '/').replace(/\/{2,}/g, '/');
+	};
 
-	const loadChildrenForPath = useCallback(
-		async (path: string, node: FileNode) => {
-			if (!onLoadChildren || node.type !== 'folder') {
-				return node.children;
-			}
-			const existingChildren =
-				node.children ?? lazyChildrenRef.current[path];
-			if (existingChildren || loadingPathsRef.current[path]) {
-				return existingChildren;
-			}
-			setLoadingPaths((prev) => ({ ...prev, [path]: true }));
-			try {
-				const children = await onLoadChildren(path);
-				setLazyChildren((prev) => ({
-					...prev,
-					[path]: children ?? [],
-				}));
-				return children;
-			} finally {
-				setLoadingPaths((prev) => {
-					const next = { ...prev };
-					delete next[path];
-					return next;
-				});
-			}
-		},
-		[onLoadChildren]
-	);
+	const getResolvedChildren = (
+		node: FileNode,
+		path: string
+	): FileNode[] | undefined => {
+		if (node.children) {
+			return node.children;
+		}
+		return lazyChildren[path];
+	};
 
-	const refreshChildren = useCallback(
-		async (path: string) => {
-			if (!onLoadChildren) {
-				return undefined;
-			}
-			setLoadingPaths((prev) => ({ ...prev, [path]: true }));
-			try {
-				const children = await onLoadChildren(path);
-				setLazyChildren((prev) => ({
-					...prev,
-					[path]: children ?? [],
-				}));
-				return children;
-			} finally {
-				setLoadingPaths((prev) => {
-					const next = { ...prev };
-					delete next[path];
-					return next;
+	const loadChildrenForPath = (path: string, node: FileNode) => {
+		if (!onLoadChildren || node.type !== 'folder') {
+			return node.children;
+		}
+		const existingChildren = node.children ?? lazyChildrenRef.current[path];
+		if (existingChildren || loadingPathsRef.current[path]) {
+			return existingChildren;
+		}
+		setLoadingPaths((prev) => ({ ...prev, [path]: true }));
+		return new Promise<FileNode[]>((resolve) => {
+			onLoadChildren(path)
+				.then((children) => {
+					setLazyChildren((prev) => ({
+						...prev,
+						[path]: children ?? [],
+					}));
+					resolve(children ?? []);
+				})
+				.catch(() => {
+					resolve([]);
+				})
+				.finally(() => {
+					setLoadingPaths((prev) => {
+						const next = { ...prev };
+						delete next[path];
+						return next;
+					});
 				});
-			}
-		},
-		[onLoadChildren]
-	);
+		});
+	};
 
-	const toggleNode = useCallback(
-		async (path: string, node: FileNode, isOpen: boolean) => {
-			setExpanded((prev) => ({
-				...prev,
-				[path]: isOpen,
-			}));
-			if (isOpen) {
-				await loadChildrenForPath(path, node);
-			} else {
-				setLazyChildren((prev) => {
-					if (prev[path] === undefined) {
-						return prev;
-					}
-					const next = { ...prev } as Record<string, FileNode[]>;
-					delete next[path];
-					return next;
+	const refreshChildren = (path: string) => {
+		if (!onLoadChildren) {
+			return Promise.resolve(undefined);
+		}
+		setLoadingPaths((prev) => ({ ...prev, [path]: true }));
+		return new Promise<FileNode[]>((resolve) => {
+			onLoadChildren(path)
+				.then((children) => {
+					setLazyChildren((prev) => ({
+						...prev,
+						[path]: children ?? [],
+					}));
+					resolve(children ?? []);
+				})
+				.catch(() => {
+					resolve([]);
+				})
+				.finally(() => {
+					setLoadingPaths((prev) => {
+						const next = { ...prev };
+						delete next[path];
+						return next;
+					});
 				});
-			}
-		},
-		[loadChildrenForPath]
-	);
+		});
+	};
 
-	const expandToPath = useCallback(
-		async (targetPath: string) => {
-			if (!targetPath) return;
-			const chain = buildPathChain(targetPath);
-			if (chain.length === 0) return;
-			setExpanded((prev) => {
-				const next = { ...prev } as ExpandedNodePaths;
-				for (const segment of chain) {
-					next[segment] = true;
+	const toggleNode = (path: string, node: FileNode, isOpen: boolean) => {
+		setExpanded((prev) => ({
+			...prev,
+			[path]: isOpen,
+		}));
+		if (isOpen) {
+			void loadChildrenForPath(path, node);
+		} else {
+			setLazyChildren((prev) => {
+				if (prev[path] === undefined) {
+					return prev;
 				}
+				const next = { ...prev } as Record<string, FileNode[]>;
+				delete next[path];
 				return next;
 			});
-			if (!onLoadChildren) {
-				return;
+		}
+	};
+
+	const expandToPath = async (targetPath: string) => {
+		if (!targetPath) return;
+		const chain = buildPathChain(targetPath);
+		if (chain.length === 0) return;
+		setExpanded((prev) => {
+			const next = { ...prev } as ExpandedNodePaths;
+			for (const segment of chain) {
+				next[segment] = true;
 			}
+			return next;
+		});
+		if (!onLoadChildren) {
+			return;
+		}
 
-			let currentChildren: FileNode[] | undefined = files;
-			let parentPath = '';
-			for (const segmentPath of chain) {
-				const nextNode = currentChildren?.find((child) => {
-					const childPath = generatePath(child, parentPath);
-					return childPath === segmentPath;
-				});
-				if (!nextNode || nextNode.type !== 'folder') {
-					parentPath = segmentPath;
-					currentChildren = [];
-					continue;
-				}
-				const loaded = await loadChildrenForPath(segmentPath, nextNode);
-				currentChildren =
-					loaded ?? lazyChildrenRef.current[segmentPath];
+		let currentChildren: FileNode[] | undefined = files;
+		let parentPath = '';
+		for (const segmentPath of chain) {
+			const nextNode = currentChildren?.find((child) => {
+				const childPath = generatePath(child, parentPath);
+				return childPath === segmentPath;
+			});
+			if (!nextNode || nextNode.type !== 'folder') {
 				parentPath = segmentPath;
+				currentChildren = [];
+				continue;
 			}
-		},
-		[files, generatePath, loadChildrenForPath, onLoadChildren]
-	);
+			const loaded = await loadChildrenForPath(segmentPath, nextNode);
+			currentChildren = loaded ?? lazyChildrenRef.current[segmentPath];
+			parentPath = segmentPath;
+		}
+	};
 
-	const remapPathState = useCallback((from: string, to: string) => {
+	const remapPathState = (from: string, to: string) => {
 		if (!from || !to || from === to) {
 			return;
 		}
@@ -321,17 +315,14 @@ export const FilePickerTree = forwardRef<
 			const mapped = remapKey(prev);
 			return mapped ?? prev;
 		});
-	}, []);
+	};
 
-	const selectPath = useCallback(
-		(path: string, notify = true) => {
-			setSelectedPath(path);
-			if (notify) {
-				onSelect(path);
-			}
-		},
-		[onSelect]
-	);
+	const selectPath = (path: string, notify = true) => {
+		setSelectedPath(path);
+		if (notify) {
+			onSelect(path);
+		}
+	};
 
 	useImperativeHandle(
 		ref,
@@ -364,17 +355,11 @@ export const FilePickerTree = forwardRef<
 				setFocusedPath(path);
 				focusDomNode(path);
 			},
-			expandToPath,
-			refresh: refreshChildren,
+			expandToPath: async (path: string) => await expandToPath(path),
+			refresh: async (path: string) => await refreshChildren(path),
 			remapPath: remapPathState,
 		}),
-		[
-			expandToPath,
-			focusDomNode,
-			refreshChildren,
-			remapPathState,
-			selectPath,
-		]
+		[]
 	);
 
 	const hasInitializedRef = useRef(false);
diff --git a/packages/playground/website/playwright/ct/file-picker-tree.ct.spec.tsx b/packages/playground/website/playwright/ct/file-picker-tree.ct.spec.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/playground/website/playwright/ct/playground-file-picker-tree.ct.spec.tsx b/packages/playground/website/playwright/ct/playground-file-picker-tree.ct.spec.tsx
new file mode 100644
index 0000000000..b4fea04b4b
--- /dev/null
+++ b/packages/playground/website/playwright/ct/playground-file-picker-tree.ct.spec.tsx
@@ -0,0 +1,636 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+
+import PlaygroundFilePickerTree, {
+	type AsyncFilesystem,
+} from '../../src/php-playground/components/file-explorer/PlaygroundFilePickerTree';
+import type { PlaygroundState } from '../../src/php-playground/store';
+import {
+	DEFAULT_CODE,
+	DEFAULT_PHP_VERSION,
+	DEFAULT_WORKSPACE_DIR,
+} from '../../src/php-playground/constants';
+import { normalizePath } from '@php-wasm/util';
+
+type DirNode = { type: 'dir'; children: Record<string, FsEntry> };
+type FileNodeEntry = { type: 'file'; content: string };
+type FsEntry = DirNode | FileNodeEntry;
+
+const basePlaygroundState: PlaygroundState = {
+	code: DEFAULT_CODE,
+	currentPath: null,
+	phpVersion: DEFAULT_PHP_VERSION,
+	wpVersion: 'latest',
+	phpVersions: [],
+	wpVersions: [],
+	bootStatus: 'ready',
+	bootError: null,
+	runRequestId: 0,
+	client: null,
+	initialized: true,
+	wpVersionsLoading: false,
+};
+
+const createStore = () =>
+	configureStore({
+		reducer: {
+			playground(
+				state = { ...basePlaygroundState },
+				action: { type: string; payload?: unknown }
+			) {
+				switch (action.type) {
+					case 'playground/setCode':
+						return {
+							...state,
+							code: action.payload as string,
+						};
+					case 'playground/setCurrentPath':
+						return {
+							...state,
+							currentPath: action.payload as string | null,
+						};
+					default:
+						return state;
+				}
+			},
+		},
+	});
+
+const baseFilesystem: DirNode = {
+	type: 'dir',
+	children: {
+		wordpress: {
+			type: 'dir',
+			children: {
+				workspace: {
+					type: 'dir',
+					children: {
+						'index.php': {
+							type: 'file',
+							content: "<?php echo 'Hello';",
+						},
+						'new-file.php': {
+							type: 'file',
+							content: "<?php echo 'Default';",
+						},
+						'notes.txt': {
+							type: 'file',
+							content: 'Workspace notes',
+						},
+						subdir: {
+							type: 'dir',
+							children: {
+								'nested.php': {
+									type: 'file',
+									content: "<?php echo 'Nested';",
+								},
+							},
+						},
+						'New Folder': {
+							type: 'dir',
+							children: {},
+						},
+					},
+				},
+				'wp-content': {
+					type: 'dir',
+					children: {
+						plugins: {
+							type: 'dir',
+							children: {
+								'akismet.php': {
+									type: 'file',
+									content: "<?php echo 'Plugin';",
+								},
+							},
+						},
+						themes: {
+							type: 'dir',
+							children: {
+								twentytwentyone: {
+									type: 'dir',
+									children: {
+										'style.css': {
+											type: 'file',
+											content:
+												'body { background: #fff; }',
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+				'readme.html': {
+					type: 'file',
+					content: '<h1>Readme</h1>',
+				},
+			},
+		},
+		'notes.txt': {
+			type: 'file',
+			content: 'Root notes',
+		},
+	},
+};
+
+const cloneStructure = <T,>(value: T): T => structuredClone(value);
+
+class InMemoryFilesystem implements AsyncFilesystem {
+	private root: DirNode;
+
+	constructor(snapshot: DirNode) {
+		this.root = snapshot;
+	}
+
+	private resolve(path: string): FsEntry | undefined {
+		const normalized = normalizePath(path);
+		if (normalized === '/') {
+			return this.root;
+		}
+		const segments = normalized.split('/').filter(Boolean);
+		let current: FsEntry = this.root;
+		for (const segment of segments) {
+			if (current.type !== 'dir') {
+				return undefined;
+			}
+			const next = current.children[segment];
+			if (!next) {
+				return undefined;
+			}
+			current = next;
+		}
+		return current;
+	}
+
+	private resolveDir(path: string): DirNode | undefined {
+		const node = this.resolve(path);
+		return node && node.type === 'dir' ? node : undefined;
+	}
+
+	private resolveParent(
+		path: string
+	): { parent: DirNode; name: string } | undefined {
+		const normalized = normalizePath(path);
+		if (normalized === '/') {
+			return undefined;
+		}
+		const segments = normalized.split('/').filter(Boolean);
+		const name = segments.pop();
+		const parentPath = segments.length ? `/${segments.join('/')}` : '/';
+		const parent = this.resolveDir(parentPath);
+		if (!parent || !name) {
+			return undefined;
+		}
+		return { parent, name };
+	}
+
+	async listFiles(path: string): Promise<string[]> {
+		const dir = this.resolveDir(path);
+		if (!dir) {
+			return [];
+		}
+		return Object.keys(dir.children);
+	}
+
+	async isDir(path: string): Promise<boolean> {
+		const normalized = normalizePath(path);
+		if (normalized === '/') {
+			return true;
+		}
+		const node = this.resolve(path);
+		return !!node && node.type === 'dir';
+	}
+
+	async fileExists(path: string): Promise<boolean> {
+		const node = this.resolve(path);
+		return !!node && node.type === 'file';
+	}
+
+	async readFileAsBuffer(path: string): Promise<Uint8Array> {
+		const text = await this.readFileAsText(path);
+		return new TextEncoder().encode(text);
+	}
+
+	async readFileAsText(path: string): Promise<string> {
+		const node = this.resolve(path);
+		if (!node || node.type !== 'file') {
+			throw new Error(`File not found: ${path}`);
+		}
+		return node.content;
+	}
+
+	async writeFile(path: string, data: Uint8Array | string): Promise<void> {
+		const parentInfo = this.resolveParent(path);
+		if (!parentInfo) {
+			throw new Error(`Parent missing for ${path}`);
+		}
+		const content =
+			typeof data === 'string' ? data : new TextDecoder().decode(data);
+		parentInfo.parent.children[parentInfo.name] = {
+			type: 'file',
+			content,
+		};
+	}
+
+	async mkdir(path: string): Promise<void> {
+		const parentInfo = this.resolveParent(path);
+		if (!parentInfo) {
+			throw new Error(`Parent missing for ${path}`);
+		}
+		if (!parentInfo.parent.children[parentInfo.name]) {
+			parentInfo.parent.children[parentInfo.name] = {
+				type: 'dir',
+				children: {},
+			};
+		}
+	}
+
+	async rmdir(path: string): Promise<void> {
+		const parentInfo = this.resolveParent(path);
+		if (!parentInfo) {
+			return;
+		}
+		const target = parentInfo.parent.children[parentInfo.name];
+		if (target && target.type === 'dir') {
+			delete parentInfo.parent.children[parentInfo.name];
+		}
+	}
+
+	async mv(source: string, destination: string): Promise<void> {
+		const normalizedSource = normalizePath(source);
+		const normalizedDestination = normalizePath(destination);
+		if (normalizedSource === normalizedDestination) {
+			return;
+		}
+		const sourceInfo = this.resolveParent(source);
+		const entry = this.resolve(source);
+		const targetInfo = this.resolveParent(destination);
+		if (!sourceInfo || !targetInfo || !entry) {
+			throw new Error('Unable to move path');
+		}
+		targetInfo.parent.children[targetInfo.name] = entry;
+		delete sourceInfo.parent.children[sourceInfo.name];
+	}
+
+	async unlink(path: string): Promise<void> {
+		const parentInfo = this.resolveParent(path);
+		if (!parentInfo) {
+			return;
+		}
+		const target = parentInfo.parent.children[parentInfo.name];
+		if (target && target.type === 'file') {
+			delete parentInfo.parent.children[parentInfo.name];
+		}
+	}
+}
+
+const createFilesystem = () =>
+	new InMemoryFilesystem(cloneStructure(baseFilesystem));
+
+type RenderOptions = {
+	initialPath?: string;
+	excludePaths?: string[];
+	root?: string;
+	filesystem?: AsyncFilesystem;
+};
+
+const renderTree = async (mount: any, options: RenderOptions = {}) => {
+	const store = createStore();
+	const filesystem = options.filesystem ?? createFilesystem();
+	const component = await mount(
+		<Provider store={store}>
+			<PlaygroundFilePickerTree
+				root={options.root ?? '/'}
+				filesystem={filesystem}
+				initialPath={options.initialPath ?? DEFAULT_WORKSPACE_DIR}
+				excludePaths={options.excludePaths}
+			/>
+		</Provider>
+	);
+	return { component, filesystem, store };
+};
+
+const nodeLocator = (component: any, path: string) =>
+	component.locator(`[data-path="${path}"]`);
+
+const nodeButton = (component: any, path: string) =>
+	component.locator(`button[data-path="${path}"]`).first();
+
+const renameInput = (component: any, path: string) =>
+	component.locator(`[data-path="${path}"] input`).first();
+
+const expandNode = async (component: any, path: string) => {
+	await nodeButton(component, path).click();
+};
+
+const expectFocused = async (component: any, path: string) => {
+	await expect(nodeButton(component, path)).toHaveClass(/focused__/);
+};
+
+const expectSelected = async (component: any, path: string) => {
+	await expect(nodeButton(component, path)).toHaveClass(/selected__/);
+};
+
+test('renders top level entries for the root filesystem', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expect(nodeButton(component, 'wordpress')).toBeVisible();
+	await expect(nodeButton(component, 'notes.txt')).toBeVisible();
+});
+test('expands a folder on click to reveal its children', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expect(nodeButton(component, 'wordpress/workspace')).toBeVisible();
+	await expect(nodeButton(component, 'wordpress/wp-content')).toBeVisible();
+});
+
+test('collapses a folder when it is toggled again', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expect(nodeButton(component, 'wordpress/workspace')).toBeVisible();
+	await expandNode(component, 'wordpress');
+	await expect(nodeLocator(component, 'wordpress/workspace')).toHaveCount(0);
+});
+
+test('arrow right expands the focused directory', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	const wpContent = nodeButton(component, 'wordpress/wp-content');
+	await wpContent.focus();
+	await wpContent.press('ArrowRight');
+	await expect(
+		nodeButton(component, 'wordpress/wp-content/plugins')
+	).toBeVisible();
+});
+
+test('arrow left collapses an expanded folder in place', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	const wpContent = nodeButton(component, 'wordpress/wp-content');
+	await wpContent.focus();
+	await wpContent.press('ArrowRight');
+	await expect(
+		nodeButton(component, 'wordpress/wp-content/plugins')
+	).toBeVisible();
+	await wpContent.press('ArrowLeft');
+	await expect(
+		nodeLocator(component, 'wordpress/wp-content/plugins')
+	).toHaveCount(0);
+});
+
+test('arrow left on a file returns focus to its parent folder', async ({
+	mount,
+}) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/wp-content');
+	const plugins = nodeButton(component, 'wordpress/wp-content/plugins');
+	await plugins.focus();
+	await plugins.press('ArrowRight');
+	const akismet = nodeButton(
+		component,
+		'wordpress/wp-content/plugins/akismet.php'
+	);
+	await akismet.focus();
+	await akismet.press('ArrowLeft');
+	await expectFocused(component, 'wordpress/wp-content/plugins');
+});
+
+test('arrow down moves focus to the next visible node', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	const root = nodeButton(component, 'wordpress');
+	await root.focus();
+	await root.press('ArrowDown');
+	await expectFocused(component, 'wordpress/workspace');
+});
+
+test('arrow up moves focus to the previous visible node', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	const workspace = nodeButton(component, 'wordpress/workspace');
+	await workspace.focus();
+	await workspace.press('ArrowUp');
+	await expectFocused(component, 'wordpress');
+});
+
+test('type-ahead search focuses the first matching node', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	const root = nodeButton(component, 'wordpress');
+	await root.focus();
+	await root.press('n');
+	await expectFocused(component, 'notes.txt');
+});
+
+test('folder context menu exposes creation actions', async ({
+	mount,
+	page,
+}) => {
+	const { component } = await renderTree(mount);
+	await nodeButton(component, 'wordpress').click({ button: 'right' });
+	await expect(component.getByRole('menu')).toBeVisible();
+	await expect(
+		component.getByRole('menuitem', { name: 'Create file' })
+	).toBeVisible();
+	await expect(
+		component.getByRole('menuitem', { name: 'Create directory' })
+	).toBeVisible();
+	await page.keyboard.press('Escape');
+});
+
+test('file context menu omits folder-only actions', async ({ mount, page }) => {
+	const { component } = await renderTree(mount);
+	await nodeButton(component, 'notes.txt').click({ button: 'right' });
+	await expect(component.getByRole('menu')).toBeVisible();
+	await expect(
+		component.getByRole('menuitem', { name: 'Create file' })
+	).toHaveCount(0);
+	await expect(
+		component.getByRole('menuitem', { name: 'Create directory' })
+	).toHaveCount(0);
+	await expect(
+		component.getByRole('menuitem', { name: 'Rename' })
+	).toBeVisible();
+	await page.keyboard.press('Escape');
+});
+
+test('renaming a file updates the label and filesystem entry', async ({
+	mount,
+}) => {
+	const { component, filesystem } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/workspace');
+	await nodeButton(component, 'wordpress/workspace/index.php').click({
+		button: 'right',
+	});
+	await component.getByRole('menuitem', { name: 'Rename' }).click();
+	const inputPath = 'wordpress/workspace/index.php';
+	const input = renameInput(component, inputPath);
+	await expect(input).toBeVisible();
+	await input.fill('main.php');
+	await input.press('Enter');
+	await expect(
+		nodeButton(component, 'wordpress/workspace/main.php')
+	).toBeVisible();
+	await expectSelected(component, 'wordpress/workspace/main.php');
+	await expect(
+		filesystem.readFileAsText('/wordpress/workspace/main.php')
+	).resolves.toContain('Hello');
+});
+
+test('renaming a directory keeps it expanded with its children', async ({
+	mount,
+}) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/wp-content');
+	await expandNode(component, 'wordpress/wp-content/themes');
+	await nodeButton(component, 'wordpress/wp-content/themes').click({
+		button: 'right',
+	});
+	await component.getByRole('menuitem', { name: 'Rename' }).click();
+	const input = renameInput(component, 'wordpress/wp-content/themes');
+	await input.fill('themes-legacy');
+	await input.press('Enter');
+	await expect(
+		nodeButton(component, 'wordpress/wp-content/themes-legacy')
+	).toBeVisible();
+	await expect(
+		nodeButton(
+			component,
+			'wordpress/wp-content/themes-legacy/twentytwentyone'
+		)
+	).toBeVisible();
+});
+
+test('escape cancels an in-progress rename', async ({ mount }) => {
+	const { component } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/workspace');
+	await nodeButton(component, 'wordpress/workspace/index.php').click({
+		button: 'right',
+	});
+	await component.getByRole('menuitem', { name: 'Rename' }).click();
+	const input = renameInput(component, 'wordpress/workspace/index.php');
+	await input.fill('temporary.php');
+	await input.press('Escape');
+	await expect(
+		nodeButton(component, 'wordpress/workspace/index.php')
+	).toBeVisible();
+});
+
+test('deleting a file removes it from the tree view', async ({ mount }) => {
+	const { component, filesystem } = await renderTree(mount);
+	await nodeButton(component, 'notes.txt').click({ button: 'right' });
+	await component.getByRole('menuitem', { name: 'Delete' }).click();
+	await expect(nodeLocator(component, 'notes.txt')).toHaveCount(0);
+	await expect(filesystem.fileExists('/notes.txt')).resolves.toBe(false);
+});
+
+test('deleting a folder moves focus to its parent directory', async ({
+	mount,
+}) => {
+	const { component, filesystem } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/wp-content');
+	await nodeButton(component, 'wordpress/wp-content/plugins').click({
+		button: 'right',
+	});
+	await component.getByRole('menuitem', { name: 'Delete' }).click();
+	await expect(
+		nodeLocator(component, 'wordpress/wp-content/plugins')
+	).toHaveCount(0);
+	await expect(
+		filesystem.isDir('/wordpress/wp-content/plugins')
+	).resolves.toBe(false);
+	await expectFocused(component, 'wordpress/wp-content');
+});
+
+test('creating a file through the context menu inserts a pending rename field', async ({
+	mount,
+}) => {
+	const { component, filesystem } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/wp-content');
+	await nodeButton(component, 'wordpress/wp-content').click({
+		button: 'right',
+	});
+	await component.getByRole('menuitem', { name: 'Create file' }).click();
+	const pendingPath = 'wordpress/wp-content/new-file.php';
+	const input = renameInput(component, pendingPath);
+	await expect(input).toBeVisible();
+	await input.fill('plugin.php');
+	await input.press('Enter');
+	await expect(
+		nodeButton(component, 'wordpress/wp-content/plugin.php')
+	).toBeVisible();
+	await expect(
+		filesystem.readFileAsText('/wordpress/wp-content/plugin.php')
+	).resolves.toBe('');
+});
+
+test('creating a file reuses an available suffixed name when needed', async ({
+	mount,
+}) => {
+	const { component, filesystem } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/workspace');
+	await nodeButton(component, 'wordpress/workspace').click({
+		button: 'right',
+	});
+	await component.getByRole('menuitem', { name: 'Create file' }).click();
+	const pendingPath = 'wordpress/workspace/new-file (1).php';
+	const input = renameInput(component, pendingPath);
+	await expect(input).toHaveValue('new-file (1).php');
+	await input.press('Enter');
+	await expect(nodeButton(component, pendingPath)).toBeVisible();
+	await expect(
+		filesystem.readFileAsText('/wordpress/workspace/new-file (1).php')
+	).resolves.toBe('');
+});
+
+test('creating a directory through the context menu adds the new folder', async ({
+	mount,
+}) => {
+	const { component, filesystem } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/workspace');
+	await nodeButton(component, 'wordpress/workspace').click({
+		button: 'right',
+	});
+	await component.getByRole('menuitem', { name: 'Create directory' }).click();
+	const pendingPath = 'wordpress/workspace/New Folder (1)';
+	const input = renameInput(component, pendingPath);
+	await expect(input).toHaveValue('New Folder (1)');
+	await input.fill('assets');
+	await input.press('Enter');
+	await expect(
+		nodeButton(component, 'wordpress/workspace/assets')
+	).toBeVisible();
+	await expect(filesystem.isDir('/wordpress/workspace/assets')).resolves.toBe(
+		true
+	);
+});
+
+test('invalid rename on a new file removes the placeholder entry', async ({
+	mount,
+}) => {
+	const { component, filesystem } = await renderTree(mount);
+	await expandNode(component, 'wordpress');
+	await expandNode(component, 'wordpress/workspace');
+	await nodeButton(component, 'wordpress/workspace').click({
+		button: 'right',
+	});
+	await component.getByRole('menuitem', { name: 'Create file' }).click();
+	const pendingPath = 'wordpress/workspace/new-file (1).php';
+	const input = renameInput(component, pendingPath);
+	await input.fill('');
+	await input.press('Enter');
+	await expect(nodeLocator(component, pendingPath)).toHaveCount(0);
+	await expect(
+		filesystem.fileExists('/wordpress/workspace/new-file (1).php')
+	).resolves.toBe(false);
+});
diff --git a/packages/playground/website/playwright/playwright-ct.config.ts b/packages/playground/website/playwright/playwright-ct.config.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/playground/website/src/php-playground/components/Layout.tsx b/packages/playground/website/src/php-playground/components/Layout.tsx
index cde82a7e7c..40864fb15c 100644
--- a/packages/playground/website/src/php-playground/components/Layout.tsx
+++ b/packages/playground/website/src/php-playground/components/Layout.tsx
@@ -69,8 +69,6 @@ export const Layout = () => {
 		};
 	}, [playgroundClient]);
 
-	// treeInitialPath is computed within FileExplorer
-
 	return (
 		<div id="php-playground-react-root" className={styles.root}>
 			<PlaygroundManager />
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
index 38e87b6072..94f51abaa2 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import styles from './FileExplorer.module.css';
 import PlaygroundFilePickerTree, {
 	type AsyncFilesystem,
@@ -64,7 +64,7 @@ export default function FileExplorerSidebar({
 	forceSelectedPath,
 	setForceSelectedPath,
 }: {
-	filesystem: AsyncFilesystem | null;
+	filesystem: AsyncFilesystem;
 	currentPath: string | null;
 	selectedDirPath: string | null;
 	setSelectedDirPath: React.Dispatch<React.SetStateAction<string | null>>;
@@ -86,16 +86,30 @@ export default function FileExplorerSidebar({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [forceSelectedPath, currentPath]);
 
+	const [root, setRoot] = useState<string>(DEFAULT_WORKSPACE_DIR);
+
 	return (
 		<div className={styles.fileExplorerContainer}>
 			<div className={styles.fileExplorerHeader}>
 				<span className={styles.fileExplorerTitle}>Files</span>
 				<div className={styles.fileExplorerActions}>
+					<button
+						className={styles.fileExplorerButton}
+						onClick={() => {
+							if (root === DEFAULT_WORKSPACE_DIR) {
+								setRoot('/wordpress');
+							} else {
+								setRoot(DEFAULT_WORKSPACE_DIR);
+							}
+						}}
+						title="Toggle WP"
+					>
+						Toggle WP
+					</button>
 					<button
 						className={styles.fileExplorerButton}
 						onClick={() => treeRef.current?.createFile()}
 						title="Create new file"
-						disabled={!filesystem}
 					>
 						New File
 					</button>
@@ -103,7 +117,6 @@ export default function FileExplorerSidebar({
 						className={styles.fileExplorerButton}
 						onClick={() => treeRef.current?.createFolder()}
 						title="Create new folder"
-						disabled={!filesystem}
 					>
 						New Folder
 					</button>
@@ -113,16 +126,16 @@ export default function FileExplorerSidebar({
 				<PlaygroundFilePickerTree
 					ref={treeRef}
 					filesystem={filesystem ?? undefined}
-					root="/"
+					root={root}
+					key={root}
 					initialPath={treeInitialPath}
-					excludePaths={['/dev', '/internal', '/proc', '/request']}
+					// excludePaths={['/dev', '/internal', '/proc', '/request']}
 					onSelect={async (path) => {
 						setForceSelectedPath(null);
 						if (filesystem && (await filesystem.isDir(path))) {
 							setSelectedDirPath(path);
 							return;
 						}
-						if (!filesystem) return;
 						try {
 							const data = await filesystem.readFileAsBuffer(
 								path
@@ -160,7 +173,9 @@ export default function FileExplorerSidebar({
 							dispatch(setCode(text));
 							dispatch(setCurrentPath(path));
 							// Don't change selectedDirPath when clicking a file
-						} catch {
+						} catch (e) {
+							console.error(e);
+							console.log({ path });
 							dispatch(setCode('Could not open file'));
 							dispatch(setCurrentPath(null));
 							// Don't change selectedDirPath when clicking a file
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
new file mode 100644
index 0000000000..1f2339ff3c
--- /dev/null
+++ b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
@@ -0,0 +1,662 @@
+import React, {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import type { FileNode, FilePickerTreeHandle } from '@wp-playground/components';
+import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
+import styles from './FileExplorer.module.css';
+import saveAs from 'file-saver';
+import { zipDirectory } from '@wp-playground/common';
+import { useAppDispatch, useAppSelector } from '../../hooks';
+import { setCode, setCurrentPath } from '../../store';
+import { DEFAULT_WORKSPACE_DIR } from '../../constants';
+import { basename, dirname, joinPaths, normalizePath } from '@php-wasm/util';
+import { Popover, NavigableMenu, MenuItem } from '@wordpress/components';
+
+async function listDir(filesystem: AsyncFilesystem, path: string) {
+	const names = await filesystem.listFiles(path);
+	const results: { name: string; type: 'file' | 'folder' }[] = [];
+	for (const name of names) {
+		const childPath = path === '/' ? `/${name}` : `${path}/${name}`;
+		const isDirectory = await filesystem.isDir(childPath);
+		results.push({ name, type: isDirectory ? 'folder' : 'file' });
+	}
+	return results.sort((a, b) => {
+		if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
+		return a.name.localeCompare(b.name);
+	});
+}
+
+export interface PlaygroundFilePickerTreeRef {
+	createFile: () => void;
+	createFolder: () => void;
+}
+
+export interface AsyncFilesystem {
+	isDir: (path: string) => Promise<boolean>;
+	fileExists: (path: string) => Promise<boolean>;
+	readFileAsBuffer: (path: string) => Promise<Uint8Array>;
+	readFileAsText: (path: string) => Promise<string>;
+	listFiles: (path: string) => Promise<string[]>;
+	writeFile: (path: string, data: Uint8Array | string) => Promise<void>;
+	mkdir: (path: string) => Promise<void>;
+	rmdir: (path: string, options?: { recursive?: boolean }) => Promise<void>;
+	mv: (source: string, destination: string) => Promise<void>;
+	unlink: (path: string) => Promise<void>;
+}
+
+export type PlaygroundFilePickerTreeProps = {
+	root?: string;
+	initialPath?: string;
+	excludePaths?: string[];
+	onSelect?: (path: string) => void;
+	filesystem: AsyncFilesystem;
+};
+
+const isValidNameSegment = (name: string) => {
+	if (!name) {
+		return false;
+	}
+	if (name === '.' || name === '..') {
+		return false;
+	}
+	return !/[\\/]/.test(name);
+};
+
+const PlaygroundFilePickerTree = forwardRef<
+	PlaygroundFilePickerTreeRef,
+	PlaygroundFilePickerTreeProps
+>(function PlaygroundFilePickerTree(
+	{ root = '/wordpress', initialPath, excludePaths, onSelect, filesystem },
+	ref
+) {
+	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
+	const [files, setFiles] = useState<FileNode[]>([]);
+	const [contextMenu, setContextMenu] = useState<{
+		path: string;
+		type: 'file' | 'folder';
+		x: number;
+		y: number;
+	} | null>(null);
+	const [renamingAbsolutePath, setRenamingAbsolutePath] = useState<
+		string | null
+	>(null);
+	const treeRef = useRef<FilePickerTreeHandle>(null);
+	const pendingCreateRef = useRef<{
+		type: 'file' | 'folder';
+		tempPath: string;
+	} | null>(null);
+	const isMountedRef = useRef(true);
+	const [lastSelectedPath, setLastSelectedPath] = useState<string | null>(
+		initialPath ?? DEFAULT_WORKSPACE_DIR
+	);
+	const dispatch = useAppDispatch();
+	const currentPath = useAppSelector((state) => state.playground.currentPath);
+
+	useEffect(() => {
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+
+	useEffect(() => {
+		async function loadFiles() {
+			try {
+				const entries = await listDir(filesystem, normalizedRoot);
+				const excludeSet = new Set(excludePaths ?? []);
+				const filtered = entries.filter((item) => {
+					const childAbs = `/${item.name}`;
+					return !excludeSet.has(childAbs);
+				});
+				const ordered = filtered;
+				if (isMountedRef.current) {
+					setFiles(ordered as FileNode[]);
+				}
+			} catch {
+				if (isMountedRef.current) {
+					setFiles([]);
+				}
+			}
+		}
+		loadFiles();
+	}, []);
+
+	const pathToRelative = (path: string) => {
+		return (
+			path.startsWith(normalizedRoot)
+				? path.slice(normalizedRoot.length)
+				: path
+		).replace(/^\//, '');
+	};
+
+	const relativeInitialPath = useMemo(
+		() => (initialPath ? pathToRelative(initialPath) : undefined),
+		[initialPath, normalizedRoot]
+	);
+
+	const pathToAbsolute = (path: string) => {
+		return joinPaths(normalizedRoot, path);
+	};
+
+	// Dismiss context menu on outside interactions / ESC key
+	useEffect(() => {
+		if (!contextMenu) {
+			return;
+		}
+		const handleClose = () => setContextMenu(null);
+		const handleKey = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				handleClose();
+			}
+		};
+		window.addEventListener('click', handleClose);
+		window.addEventListener('contextmenu', handleClose);
+		window.addEventListener('keydown', handleKey);
+		return () => {
+			window.removeEventListener('click', handleClose);
+			window.removeEventListener('contextmenu', handleClose);
+			window.removeEventListener('keydown', handleKey);
+		};
+	}, [contextMenu]);
+
+	const handleLoadChildren = async (relativePath: string) => {
+		const absDirPath = pathToAbsolute(relativePath);
+		const items = await listDir(filesystem, absDirPath);
+		const filtered = items.filter((item) => {
+			const childAbs =
+				absDirPath === '/'
+					? `/${item.name}`
+					: `${absDirPath}/${item.name}`;
+			return !excludePaths?.includes(childAbs);
+		});
+		return filtered;
+	};
+
+	const handleSelect = (path: string) => {
+		onSelect?.(pathToAbsolute(path));
+	};
+
+	const handleInternalContextMenu = (
+		event: React.MouseEvent,
+		node: FileNode,
+		path: string
+	) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const absPath = pathToAbsolute(path);
+		setRenamingAbsolutePath(null);
+		setContextMenu({
+			path: absPath,
+			type: node.type,
+			x: event.clientX,
+			y: event.clientY,
+		});
+	};
+
+	const handleContextMenuRename = (targetPath: string) => {
+		setContextMenu(null);
+		setRenamingAbsolutePath(targetPath);
+	};
+
+	// dirname helper not needed in this component
+
+	const findAvailableName = async (baseDir: string, baseName: string) => {
+		let name = baseName;
+		let counter = 0;
+		const splitExt = (n: string) => {
+			const dot = n.lastIndexOf('.');
+			if (dot > 0) {
+				return { stem: n.slice(0, dot), ext: n.slice(dot) };
+			}
+			return { stem: n, ext: '' };
+		};
+		const prefix = baseDir === '/' ? '' : baseDir;
+		while (
+			(await filesystem?.fileExists(`${prefix}/${name}`)) ||
+			(await filesystem?.isDir(`${prefix}/${name}`))
+		) {
+			counter += 1;
+			const { stem, ext } = splitExt(baseName);
+			name = `${stem} (${counter})${ext}`;
+		}
+		return name;
+	};
+
+	const resolveBaseDir = async (path?: string) => {
+		if (!path) {
+			path = lastSelectedPath || DEFAULT_WORKSPACE_DIR;
+		}
+		while (true) {
+			if (path === '/') {
+				break;
+			}
+			if (await filesystem?.isDir(path)) {
+				break;
+			}
+			path = dirname(path);
+		}
+		return path;
+	};
+
+	const handleCreateFile = async (targetDir?: string) => {
+		const baseDir = await resolveBaseDir(targetDir);
+		const normalizedBase = normalizePath(baseDir);
+		try {
+			const name = await findAvailableName(
+				normalizedBase,
+				'untitled.php'
+			);
+			const tempPath = joinPaths(normalizedBase, name);
+			await filesystem.writeFile(tempPath, '');
+			pendingCreateRef.current = { type: 'file', tempPath };
+			setRenamingAbsolutePath(tempPath);
+			setLastSelectedPath(tempPath);
+			const absoluteBasePath = pathToAbsolute(normalizedBase);
+			const absoluteTempPath = pathToAbsolute(tempPath);
+			if (treeRef.current) {
+				await treeRef.current.expandToPath(absoluteBasePath);
+				await treeRef.current.refresh(absoluteBasePath);
+				treeRef.current.focusPath(absoluteTempPath, { notify: false });
+			}
+		} catch (e) {
+			void e;
+		}
+	};
+
+	const handleCreateDirectory = async (targetDir?: string) => {
+		const baseDir = await resolveBaseDir(targetDir);
+		const normalizedBase = normalizePath(baseDir);
+		try {
+			const name = await findAvailableName(normalizedBase, 'New Folder');
+			const tempPath = joinPaths(normalizedBase, name);
+			await filesystem.mkdir(tempPath);
+			pendingCreateRef.current = { type: 'folder', tempPath };
+			setRenamingAbsolutePath(tempPath);
+			setLastSelectedPath(tempPath);
+			const absoluteBasePath = pathToAbsolute(normalizedBase);
+			const absoluteTempPath = pathToAbsolute(tempPath);
+			if (treeRef.current) {
+				await treeRef.current.expandToPath(absoluteBasePath);
+				await treeRef.current.refresh(absoluteBasePath);
+				treeRef.current.focusPath(absoluteTempPath, { notify: false });
+			}
+		} catch (e) {
+			void e;
+		}
+	};
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			createFile: handleCreateFile,
+			createFolder: handleCreateDirectory,
+		}),
+		[]
+	);
+
+	const handleDeletePath = async (
+		targetPath: string,
+		type: 'file' | 'folder'
+	) => {
+		const normalized = normalizePath(targetPath);
+		setContextMenu(null);
+		try {
+			if (type === 'folder') {
+				await filesystem.rmdir(normalized, {
+					recursive: true,
+				} as any);
+			} else {
+				await filesystem.unlink(normalized);
+			}
+		} catch {
+			// Ignore failure
+		} finally {
+			setRenamingAbsolutePath(null);
+			const parentDir = dirname(normalized);
+			setLastSelectedPath(parentDir);
+			const absoluteParentPath = pathToAbsolute(parentDir);
+			if (treeRef.current) {
+				await treeRef.current.refresh(absoluteParentPath);
+				treeRef.current.focusPath(absoluteParentPath, {
+					notify: false,
+				});
+			}
+			// Clear editor if deleted current file or a parent directory
+			if (
+				currentPath &&
+				(currentPath === normalized ||
+					currentPath.startsWith(`${normalized}/`))
+			) {
+				dispatch(setCode(''));
+				dispatch(setCurrentPath(null));
+			}
+		}
+	};
+
+	const handleDownloadPath = async (targetPath: string) => {
+		setContextMenu(null);
+		try {
+			const normalized = normalizePath(targetPath);
+			const baseName = basename(normalized) || 'download';
+			const isDir = await filesystem.isDir(normalized);
+			if (isDir) {
+				const bytes = await zipDirectory(filesystem as any, normalized);
+				saveAs(new File([bytes], `${baseName}.zip`));
+				return;
+			}
+			const data = await filesystem.readFileAsBuffer(normalized);
+			saveAs(new File([data], baseName));
+		} catch {
+			// Ignore failure
+		}
+	};
+
+	return (
+		<>
+			<CoreFilePickerTree
+				ref={treeRef}
+				files={files}
+				initialPath={relativeInitialPath}
+				onSelect={handleSelect}
+				onLoadChildren={handleLoadChildren}
+				autoFocus={false}
+				renamingPath={
+					renamingAbsolutePath
+						? pathToRelative(renamingAbsolutePath)
+						: undefined
+				}
+				onRename={async (relativePath, newName) => {
+					const absPath = pathToAbsolute(relativePath);
+					const pending = pendingCreateRef.current;
+					const isPending = pending?.tempPath === absPath;
+					const parent = dirname(absPath);
+					const absoluteParentPath = pathToAbsolute(parent);
+					const absoluteOriginalPath = pathToAbsolute(absPath);
+					const sanitized = (newName || '').trim();
+					if (!isValidNameSegment(sanitized)) {
+						if (isPending) {
+							try {
+								if (pending.type === 'folder') {
+									await filesystem.rmdir(absPath, {
+										recursive: true,
+									} as any);
+								} else {
+									await filesystem.unlink(absPath);
+								}
+							} catch (e) {
+								void e;
+							}
+							pendingCreateRef.current = null;
+						}
+						setRenamingAbsolutePath(isPending ? null : absPath);
+						return;
+					}
+
+					const composePath = (name: string) =>
+						parent === '/' ? `/${name}` : `${parent}/${name}`;
+					let candidate = composePath(sanitized);
+					let candidateNormalized = normalizePath(candidate);
+					if (candidateNormalized === absPath) {
+						setRenamingAbsolutePath(null);
+						if (isPending) {
+							pendingCreateRef.current = null;
+						}
+						setLastSelectedPath(candidateNormalized);
+						const absoluteCandidateSamePath =
+							pathToAbsolute(candidateNormalized);
+						if (absoluteCandidateSamePath) {
+							if (normalizedRoot === '/' && parent === '/') {
+								setTimeout(() => {
+									treeRef.current?.focusPath(
+										absoluteCandidateSamePath,
+										{
+											notify: false,
+										}
+									);
+								}, 0);
+							} else {
+								treeRef.current?.focusPath(
+									absoluteCandidateSamePath,
+									{
+										notify: false,
+									}
+								);
+							}
+						}
+						return;
+					}
+
+					const exists = await filesystem.fileExists(
+						candidateNormalized
+					);
+					const existsDir = await filesystem.isDir(
+						candidateNormalized
+					);
+					if (
+						(exists || existsDir) &&
+						candidateNormalized !== absPath
+					) {
+						if (isPending) {
+							try {
+								const unique = await findAvailableName(
+									parent === '/' ? '/' : parent,
+									sanitized
+								);
+								candidate = composePath(unique);
+								candidateNormalized = normalizePath(candidate);
+							} catch (e) {
+								void e;
+							}
+						} else {
+							setRenamingAbsolutePath(absPath);
+							return;
+						}
+					}
+
+					const absoluteCandidatePath =
+						pathToAbsolute(candidateNormalized);
+					let candidateIsDir = pending?.type === 'folder';
+					try {
+						await filesystem.mv(absPath, candidate as any);
+						if (!pending) {
+							const isDir = await filesystem.isDir(
+								candidate as any
+							);
+							candidateIsDir = isDir;
+						}
+						setLastSelectedPath(candidateNormalized);
+						if (
+							candidateIsDir &&
+							treeRef.current &&
+							absoluteOriginalPath &&
+							absoluteCandidatePath
+						) {
+							treeRef.current.remapPath(
+								absoluteOriginalPath,
+								absoluteCandidatePath
+							);
+						}
+						if (candidateIsDir) {
+							if (currentPath === absPath) {
+								dispatch(setCurrentPath(candidate));
+							}
+						} else {
+							if (isPending) {
+								try {
+									const newContent =
+										await filesystem.readFileAsText(
+											candidate
+										);
+									dispatch(setCode(newContent));
+									dispatch(setCurrentPath(candidate));
+								} catch (e) {
+									void e;
+								}
+							} else if (currentPath === absPath) {
+								dispatch(setCurrentPath(candidate));
+							}
+						}
+
+						if (treeRef.current) {
+							await treeRef.current.refresh(absoluteParentPath);
+							if (absoluteCandidatePath) {
+								treeRef.current.focusPath(
+									absoluteCandidatePath,
+									{
+										notify: false,
+									}
+								);
+							}
+						}
+					} catch {
+						if (isPending) {
+							try {
+								if (pending?.type === 'folder') {
+									await filesystem.rmdir(absPath, {
+										recursive: true,
+									} as any);
+								} else {
+									await filesystem.unlink(absPath);
+								}
+							} catch {
+								// Ignore failure
+							}
+						}
+					} finally {
+						pendingCreateRef.current = null;
+						setRenamingAbsolutePath(null);
+					}
+				}}
+				onRenameCancel={async (relativePath) => {
+					const absPath = pathToAbsolute(relativePath);
+					const pending = pendingCreateRef.current;
+					if (!filesystem || pending?.tempPath !== absPath) {
+						setRenamingAbsolutePath((prev) =>
+							prev === absPath ? null : prev
+						);
+						return;
+					}
+					try {
+						if (pending.type === 'folder') {
+							await filesystem.rmdir(absPath, {
+								recursive: true,
+							} as any);
+						} else {
+							await filesystem.unlink(absPath);
+						}
+					} catch (e) {
+						void e;
+					}
+					pendingCreateRef.current = null;
+					setRenamingAbsolutePath(null);
+					const parentDir = dirname(absPath);
+					setLastSelectedPath(parentDir);
+					const absoluteParentPath = pathToAbsolute(parentDir);
+					if (treeRef.current) {
+						await treeRef.current.refresh(absoluteParentPath);
+					}
+					if (absoluteParentPath) {
+						const focusLater =
+							normalizedRoot === '/' && parentDir === '/';
+						const focusAction = () =>
+							treeRef.current?.focusPath(absoluteParentPath, {
+								notify: false,
+							});
+						if (focusLater) {
+							setTimeout(focusAction, 0);
+						} else {
+							focusAction();
+						}
+					}
+				}}
+				onContextMenu={handleInternalContextMenu}
+			/>
+			{contextMenu && (
+				<Popover
+					placement="bottom-start"
+					onClose={() => setContextMenu(null)}
+					anchor={{
+						getBoundingClientRect: () => ({
+							x: contextMenu.x,
+							y: contextMenu.y,
+							width: 0,
+							height: 0,
+							top: contextMenu.y,
+							left: contextMenu.x,
+							right: contextMenu.x,
+							bottom: contextMenu.y,
+							toJSON: () => ({}),
+						}),
+						ownerDocument: document,
+					}}
+					noArrow={true}
+					resize={false}
+					focusOnMount="firstElement"
+				>
+					<NavigableMenu role="menu">
+						{contextMenu.type === 'folder' && (
+							<MenuItem
+								role="menuitem"
+								className={styles.contextMenuButton}
+								onClick={async () => {
+									const dir = contextMenu.path;
+									setContextMenu(null);
+									await handleCreateFile(dir);
+								}}
+							>
+								Create file
+							</MenuItem>
+						)}
+						{contextMenu.type === 'folder' && (
+							<MenuItem
+								role="menuitem"
+								className={styles.contextMenuButton}
+								onClick={async () => {
+									const dir = contextMenu.path;
+									setContextMenu(null);
+									await handleCreateDirectory(dir);
+								}}
+							>
+								Create directory
+							</MenuItem>
+						)}
+						<MenuItem
+							role="menuitem"
+							className={styles.contextMenuButton}
+							onClick={() =>
+								handleContextMenuRename(contextMenu.path)
+							}
+						>
+							Rename
+						</MenuItem>
+						<MenuItem
+							role="menuitem"
+							className={`${styles.contextMenuButton} ${styles.contextMenuButtonDanger}`}
+							onClick={() =>
+								handleDeletePath(
+									contextMenu.path,
+									contextMenu.type
+								)
+							}
+						>
+							Delete
+						</MenuItem>
+						<MenuItem
+							role="menuitem"
+							className={styles.contextMenuButton}
+							onClick={() => handleDownloadPath(contextMenu.path)}
+						>
+							Download
+						</MenuItem>
+					</NavigableMenu>
+				</Popover>
+			)}
+		</>
+	);
+});
+
+export default PlaygroundFilePickerTree;

From db391d836ea4ab7d57caa86af66e48e3b827525e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 29 Sep 2025 22:55:14 +0200
Subject: [PATCH 37/41] Refresh file pircker tree when a file is changed

---
 .../PlaygroundFilePickerTree.tsx              | 112 ++++++++++--------
 1 file changed, 60 insertions(+), 52 deletions(-)

diff --git a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
index 1f2339ff3c..86c71f23a2 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
@@ -34,6 +34,7 @@ async function listDir(filesystem: AsyncFilesystem, path: string) {
 export interface PlaygroundFilePickerTreeRef {
 	createFile: () => void;
 	createFolder: () => void;
+	refresh: () => Promise<void>;
 }
 
 export interface AsyncFilesystem {
@@ -103,26 +104,27 @@ const PlaygroundFilePickerTree = forwardRef<
 		};
 	}, []);
 
-	useEffect(() => {
-		async function loadFiles() {
-			try {
-				const entries = await listDir(filesystem, normalizedRoot);
-				const excludeSet = new Set(excludePaths ?? []);
-				const filtered = entries.filter((item) => {
-					const childAbs = `/${item.name}`;
-					return !excludeSet.has(childAbs);
-				});
-				const ordered = filtered;
-				if (isMountedRef.current) {
-					setFiles(ordered as FileNode[]);
-				}
-			} catch {
-				if (isMountedRef.current) {
-					setFiles([]);
-				}
+	const reloadTopLevel = async () => {
+		try {
+			const entries = await listDir(filesystem, normalizedRoot);
+			const excludeSet = new Set(excludePaths ?? []);
+			const filtered = entries.filter((item) => {
+				const childAbs = `/${item.name}`;
+				return !excludeSet.has(childAbs);
+			});
+			if (isMountedRef.current) {
+				setFiles(filtered as FileNode[]);
+			}
+		} catch {
+			if (isMountedRef.current) {
+				setFiles([]);
 			}
 		}
-		loadFiles();
+	};
+
+	useEffect(() => {
+		void reloadTopLevel();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	const pathToRelative = (path: string) => {
@@ -294,6 +296,7 @@ const PlaygroundFilePickerTree = forwardRef<
 		() => ({
 			createFile: handleCreateFile,
 			createFolder: handleCreateDirectory,
+			refresh: reloadTopLevel,
 		}),
 		[]
 	);
@@ -318,12 +321,16 @@ const PlaygroundFilePickerTree = forwardRef<
 			setRenamingAbsolutePath(null);
 			const parentDir = dirname(normalized);
 			setLastSelectedPath(parentDir);
-			const absoluteParentPath = pathToAbsolute(parentDir);
-			if (treeRef.current) {
-				await treeRef.current.refresh(absoluteParentPath);
-				treeRef.current.focusPath(absoluteParentPath, {
-					notify: false,
-				});
+			const relativeParentPath = pathToRelative(parentDir);
+			if (parentDir === normalizedRoot) {
+				await reloadTopLevel();
+			} else if (treeRef.current) {
+				await treeRef.current.refresh(relativeParentPath);
+				if (relativeParentPath) {
+					treeRef.current.focusPath(relativeParentPath, {
+						notify: false,
+					});
+				}
 			}
 			// Clear editor if deleted current file or a parent directory
 			if (
@@ -374,8 +381,8 @@ const PlaygroundFilePickerTree = forwardRef<
 					const pending = pendingCreateRef.current;
 					const isPending = pending?.tempPath === absPath;
 					const parent = dirname(absPath);
-					const absoluteParentPath = pathToAbsolute(parent);
-					const absoluteOriginalPath = pathToAbsolute(absPath);
+					const relativeParentPath = pathToRelative(parent);
+					const relativeOriginalPath = pathToRelative(absPath);
 					const sanitized = (newName || '').trim();
 					if (!isValidNameSegment(sanitized)) {
 						if (isPending) {
@@ -406,13 +413,13 @@ const PlaygroundFilePickerTree = forwardRef<
 							pendingCreateRef.current = null;
 						}
 						setLastSelectedPath(candidateNormalized);
-						const absoluteCandidateSamePath =
-							pathToAbsolute(candidateNormalized);
-						if (absoluteCandidateSamePath) {
+						const relativeCandidateSamePath =
+							pathToRelative(candidateNormalized);
+						if (relativeCandidateSamePath) {
 							if (normalizedRoot === '/' && parent === '/') {
 								setTimeout(() => {
 									treeRef.current?.focusPath(
-										absoluteCandidateSamePath,
+										relativeCandidateSamePath,
 										{
 											notify: false,
 										}
@@ -420,7 +427,7 @@ const PlaygroundFilePickerTree = forwardRef<
 								}, 0);
 							} else {
 								treeRef.current?.focusPath(
-									absoluteCandidateSamePath,
+									relativeCandidateSamePath,
 									{
 										notify: false,
 									}
@@ -457,8 +464,8 @@ const PlaygroundFilePickerTree = forwardRef<
 						}
 					}
 
-					const absoluteCandidatePath =
-						pathToAbsolute(candidateNormalized);
+					const relativeCandidatePath =
+						pathToRelative(candidateNormalized);
 					let candidateIsDir = pending?.type === 'folder';
 					try {
 						await filesystem.mv(absPath, candidate as any);
@@ -472,12 +479,12 @@ const PlaygroundFilePickerTree = forwardRef<
 						if (
 							candidateIsDir &&
 							treeRef.current &&
-							absoluteOriginalPath &&
-							absoluteCandidatePath
+							relativeOriginalPath &&
+							relativeCandidatePath
 						) {
 							treeRef.current.remapPath(
-								absoluteOriginalPath,
-								absoluteCandidatePath
+								relativeOriginalPath,
+								relativeCandidatePath
 							);
 						}
 						if (candidateIsDir) {
@@ -501,16 +508,15 @@ const PlaygroundFilePickerTree = forwardRef<
 							}
 						}
 
-						if (treeRef.current) {
-							await treeRef.current.refresh(absoluteParentPath);
-							if (absoluteCandidatePath) {
-								treeRef.current.focusPath(
-									absoluteCandidatePath,
-									{
-										notify: false,
-									}
-								);
-							}
+						if (parent === normalizedRoot) {
+							await reloadTopLevel();
+						} else if (treeRef.current) {
+							await treeRef.current.refresh(relativeParentPath);
+						}
+						if (relativeCandidatePath) {
+							treeRef.current?.focusPath(relativeCandidatePath, {
+								notify: false,
+							});
 						}
 					} catch {
 						if (isPending) {
@@ -555,15 +561,17 @@ const PlaygroundFilePickerTree = forwardRef<
 					setRenamingAbsolutePath(null);
 					const parentDir = dirname(absPath);
 					setLastSelectedPath(parentDir);
-					const absoluteParentPath = pathToAbsolute(parentDir);
-					if (treeRef.current) {
-						await treeRef.current.refresh(absoluteParentPath);
+					const relativeParentPath = pathToRelative(parentDir);
+					if (parentDir === normalizedRoot) {
+						await reloadTopLevel();
+					} else if (treeRef.current) {
+						await treeRef.current.refresh(relativeParentPath);
 					}
-					if (absoluteParentPath) {
+					if (relativeParentPath) {
 						const focusLater =
 							normalizedRoot === '/' && parentDir === '/';
 						const focusAction = () =>
-							treeRef.current?.focusPath(absoluteParentPath, {
+							treeRef.current?.focusPath(relativeParentPath, {
 								notify: false,
 							});
 						if (focusLater) {

From 82fc52f47536e4f44bfffc45bf374ca3a8294b9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 30 Sep 2025 01:12:41 +0200
Subject: [PATCH 38/41] simplifications, ux improvements

---
 package-lock.json                             | 1102 ++++++++++++-----
 package.json                                  |    1 +
 .../website/playwright/playwright.config.ts   |   10 +-
 .../PlaygroundFilePickerTree.tsx              |   99 +-
 4 files changed, 884 insertions(+), 328 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 05f8183bb9..f816826c45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
 				"@codemirror/search": "6.5.11",
 				"@codemirror/state": "6.5.2",
 				"@codemirror/view": "6.38.3",
+				"@playwright/experimental-ct-react": "1.55.1",
 				"@preact/signals-react": "1.3.6",
 				"@reduxjs/toolkit": "2.6.1",
 				"@types/xml2js": "0.4.14",
@@ -151,7 +152,6 @@
 			"version": "4.4.2",
 			"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.2.tgz",
 			"integrity": "sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true
@@ -421,20 +421,6 @@
 				"node": ">= 14.0.0"
 			}
 		},
-		"node_modules/@ampproject/remapping": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"dependencies": {
-				"@jridgewell/gen-mapping": "^0.3.5",
-				"@jridgewell/trace-mapping": "^0.3.24"
-			},
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
 		"node_modules/@ariakit/core": {
 			"version": "0.3.11",
 			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.11.tgz",
@@ -477,46 +463,44 @@
 			}
 		},
 		"node_modules/@babel/code-frame": {
-			"version": "7.26.2",
-			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-			"integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+			"integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-validator-identifier": "^7.25.9",
+				"@babel/helper-validator-identifier": "^7.27.1",
 				"js-tokens": "^4.0.0",
-				"picocolors": "^1.0.0"
+				"picocolors": "^1.1.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/compat-data": {
-			"version": "7.26.8",
-			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz",
-			"integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==",
-			"dev": true,
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.4.tgz",
+			"integrity": "sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/core": {
-			"version": "7.26.10",
-			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
-			"integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@ampproject/remapping": "^2.2.0",
-				"@babel/code-frame": "^7.26.2",
-				"@babel/generator": "^7.26.10",
-				"@babel/helper-compilation-targets": "^7.26.5",
-				"@babel/helper-module-transforms": "^7.26.0",
-				"@babel/helpers": "^7.26.10",
-				"@babel/parser": "^7.26.10",
-				"@babel/template": "^7.26.9",
-				"@babel/traverse": "^7.26.10",
-				"@babel/types": "^7.26.10",
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
+			"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.27.1",
+				"@babel/generator": "^7.28.3",
+				"@babel/helper-compilation-targets": "^7.27.2",
+				"@babel/helper-module-transforms": "^7.28.3",
+				"@babel/helpers": "^7.28.4",
+				"@babel/parser": "^7.28.4",
+				"@babel/template": "^7.27.2",
+				"@babel/traverse": "^7.28.4",
+				"@babel/types": "^7.28.4",
+				"@jridgewell/remapping": "^2.3.5",
 				"convert-source-map": "^2.0.0",
 				"debug": "^4.1.0",
 				"gensync": "^1.0.0-beta.2",
@@ -535,22 +519,21 @@
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
 			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-			"dev": true,
 			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
 			}
 		},
 		"node_modules/@babel/generator": {
-			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz",
-			"integrity": "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==",
+			"version": "7.28.3",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+			"integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/parser": "^7.27.0",
-				"@babel/types": "^7.27.0",
-				"@jridgewell/gen-mapping": "^0.3.5",
-				"@jridgewell/trace-mapping": "^0.3.25",
+				"@babel/parser": "^7.28.3",
+				"@babel/types": "^7.28.2",
+				"@jridgewell/gen-mapping": "^0.3.12",
+				"@jridgewell/trace-mapping": "^0.3.28",
 				"jsesc": "^3.0.2"
 			},
 			"engines": {
@@ -571,14 +554,13 @@
 			}
 		},
 		"node_modules/@babel/helper-compilation-targets": {
-			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.0.tgz",
-			"integrity": "sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==",
-			"dev": true,
+			"version": "7.27.2",
+			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+			"integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/compat-data": "^7.26.8",
-				"@babel/helper-validator-option": "^7.25.9",
+				"@babel/compat-data": "^7.27.2",
+				"@babel/helper-validator-option": "^7.27.1",
 				"browserslist": "^4.24.0",
 				"lru-cache": "^5.1.1",
 				"semver": "^6.3.1"
@@ -591,7 +573,6 @@
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
 			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-			"dev": true,
 			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
@@ -674,6 +655,15 @@
 				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
 			}
 		},
+		"node_modules/@babel/helper-globals": {
+			"version": "7.28.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+			"integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
 		"node_modules/@babel/helper-member-expression-to-functions": {
 			"version": "7.25.9",
 			"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz",
@@ -689,28 +679,27 @@
 			}
 		},
 		"node_modules/@babel/helper-module-imports": {
-			"version": "7.25.9",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
-			"integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+			"integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/traverse": "^7.25.9",
-				"@babel/types": "^7.25.9"
+				"@babel/traverse": "^7.27.1",
+				"@babel/types": "^7.27.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/helper-module-transforms": {
-			"version": "7.26.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
-			"integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
-			"dev": true,
+			"version": "7.28.3",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+			"integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-module-imports": "^7.25.9",
-				"@babel/helper-validator-identifier": "^7.25.9",
-				"@babel/traverse": "^7.25.9"
+				"@babel/helper-module-imports": "^7.27.1",
+				"@babel/helper-validator-identifier": "^7.27.1",
+				"@babel/traverse": "^7.28.3"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -733,10 +722,9 @@
 			}
 		},
 		"node_modules/@babel/helper-plugin-utils": {
-			"version": "7.26.5",
-			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
-			"integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
-			"dev": true,
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+			"integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -793,28 +781,27 @@
 			}
 		},
 		"node_modules/@babel/helper-string-parser": {
-			"version": "7.25.9",
-			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-			"integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+			"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/helper-validator-identifier": {
-			"version": "7.25.9",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-			"integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+			"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/helper-validator-option": {
-			"version": "7.25.9",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
-			"integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
-			"dev": true,
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+			"integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -836,26 +823,25 @@
 			}
 		},
 		"node_modules/@babel/helpers": {
-			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
-			"integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
-			"dev": true,
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+			"integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/template": "^7.27.0",
-				"@babel/types": "^7.27.0"
+				"@babel/template": "^7.27.2",
+				"@babel/types": "^7.28.4"
 			},
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/parser": {
-			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
-			"integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
+			"integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/types": "^7.27.0"
+				"@babel/types": "^7.28.4"
 			},
 			"bin": {
 				"parser": "bin/babel-parser.js"
@@ -1988,13 +1974,12 @@
 			}
 		},
 		"node_modules/@babel/plugin-transform-react-jsx-self": {
-			"version": "7.25.9",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz",
-			"integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==",
-			"dev": true,
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+			"integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.9"
+				"@babel/helper-plugin-utils": "^7.27.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -2004,13 +1989,12 @@
 			}
 		},
 		"node_modules/@babel/plugin-transform-react-jsx-source": {
-			"version": "7.25.9",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz",
-			"integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==",
-			"dev": true,
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+			"integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.9"
+				"@babel/helper-plugin-utils": "^7.27.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -2461,45 +2445,45 @@
 			}
 		},
 		"node_modules/@babel/template": {
-			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
-			"integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
+			"version": "7.27.2",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+			"integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/code-frame": "^7.26.2",
-				"@babel/parser": "^7.27.0",
-				"@babel/types": "^7.27.0"
+				"@babel/code-frame": "^7.27.1",
+				"@babel/parser": "^7.27.2",
+				"@babel/types": "^7.27.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/traverse": {
-			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz",
-			"integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==",
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
+			"integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/code-frame": "^7.26.2",
-				"@babel/generator": "^7.27.0",
-				"@babel/parser": "^7.27.0",
-				"@babel/template": "^7.27.0",
-				"@babel/types": "^7.27.0",
-				"debug": "^4.3.1",
-				"globals": "^11.1.0"
+				"@babel/code-frame": "^7.27.1",
+				"@babel/generator": "^7.28.3",
+				"@babel/helper-globals": "^7.28.0",
+				"@babel/parser": "^7.28.4",
+				"@babel/template": "^7.27.2",
+				"@babel/types": "^7.28.4",
+				"debug": "^4.3.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/types": {
-			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
-			"integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
+			"integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-string-parser": "^7.25.9",
-				"@babel/helper-validator-identifier": "^7.25.9"
+				"@babel/helper-string-parser": "^7.27.1",
+				"@babel/helper-validator-identifier": "^7.27.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -5364,7 +5348,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5646,6 +5629,22 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.10.tgz",
+			"integrity": "sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@esbuild/netbsd-x64": {
 			"version": "0.19.9",
 			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
@@ -5663,6 +5662,22 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.10.tgz",
+			"integrity": "sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@esbuild/openbsd-x64": {
 			"version": "0.19.9",
 			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
@@ -5680,6 +5695,22 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.10.tgz",
+			"integrity": "sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@esbuild/sunos-x64": {
 			"version": "0.19.9",
 			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
@@ -6831,17 +6862,23 @@
 			}
 		},
 		"node_modules/@jridgewell/gen-mapping": {
-			"version": "0.3.8",
-			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-			"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+			"version": "0.3.13",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
 			"license": "MIT",
 			"dependencies": {
-				"@jridgewell/set-array": "^1.2.1",
-				"@jridgewell/sourcemap-codec": "^1.4.10",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/remapping": {
+			"version": "2.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
 				"@jridgewell/trace-mapping": "^0.3.24"
-			},
-			"engines": {
-				"node": ">=6.0.0"
 			}
 		},
 		"node_modules/@jridgewell/resolve-uri": {
@@ -6853,20 +6890,11 @@
 				"node": ">=6.0.0"
 			}
 		},
-		"node_modules/@jridgewell/set-array": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
 		"node_modules/@jridgewell/source-map": {
 			"version": "0.3.6",
 			"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
 			"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -6880,9 +6908,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
-			"version": "0.3.25",
-			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+			"version": "0.3.31",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -12486,7 +12514,6 @@
 			"version": "2.5.1",
 			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
 			"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
 			"optional": true,
@@ -12527,7 +12554,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12549,7 +12575,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12571,7 +12596,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12593,7 +12617,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12615,7 +12638,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12637,7 +12659,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12659,7 +12680,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12681,7 +12701,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12703,7 +12722,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12725,7 +12743,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12747,7 +12764,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12769,7 +12785,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -12791,7 +12806,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13045,6 +13059,606 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@playwright/experimental-ct-core": {
+			"version": "1.55.1",
+			"resolved": "https://registry.npmjs.org/@playwright/experimental-ct-core/-/experimental-ct-core-1.55.1.tgz",
+			"integrity": "sha512-Mhdmx3CDlOYi4Nr8N4bzaqhjmdcl+SKdsKWznN6TWZCFZDMZARyZ3Vp5IIS3AAoymzMCcG6bRsKicA79eUBLKA==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright": "1.55.1",
+				"playwright-core": "1.55.1",
+				"vite": "^6.3.4"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/aix-ppc64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
+			"integrity": "sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==",
+			"cpu": [
+				"ppc64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"aix"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/android-arm": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.10.tgz",
+			"integrity": "sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/android-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.10.tgz",
+			"integrity": "sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/android-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.10.tgz",
+			"integrity": "sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/darwin-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.10.tgz",
+			"integrity": "sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/darwin-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.10.tgz",
+			"integrity": "sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.10.tgz",
+			"integrity": "sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/freebsd-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.10.tgz",
+			"integrity": "sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-arm": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.10.tgz",
+			"integrity": "sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.10.tgz",
+			"integrity": "sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-ia32": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.10.tgz",
+			"integrity": "sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==",
+			"cpu": [
+				"ia32"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-loong64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.10.tgz",
+			"integrity": "sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==",
+			"cpu": [
+				"loong64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-mips64el": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.10.tgz",
+			"integrity": "sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==",
+			"cpu": [
+				"mips64el"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-ppc64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.10.tgz",
+			"integrity": "sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==",
+			"cpu": [
+				"ppc64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-riscv64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.10.tgz",
+			"integrity": "sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==",
+			"cpu": [
+				"riscv64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-s390x": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.10.tgz",
+			"integrity": "sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==",
+			"cpu": [
+				"s390x"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/linux-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.10.tgz",
+			"integrity": "sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/netbsd-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.10.tgz",
+			"integrity": "sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/openbsd-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.10.tgz",
+			"integrity": "sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/sunos-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.10.tgz",
+			"integrity": "sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/win32-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.10.tgz",
+			"integrity": "sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/win32-ia32": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.10.tgz",
+			"integrity": "sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==",
+			"cpu": [
+				"ia32"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/@esbuild/win32-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.10.tgz",
+			"integrity": "sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/esbuild": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz",
+			"integrity": "sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"@esbuild/aix-ppc64": "0.25.10",
+				"@esbuild/android-arm": "0.25.10",
+				"@esbuild/android-arm64": "0.25.10",
+				"@esbuild/android-x64": "0.25.10",
+				"@esbuild/darwin-arm64": "0.25.10",
+				"@esbuild/darwin-x64": "0.25.10",
+				"@esbuild/freebsd-arm64": "0.25.10",
+				"@esbuild/freebsd-x64": "0.25.10",
+				"@esbuild/linux-arm": "0.25.10",
+				"@esbuild/linux-arm64": "0.25.10",
+				"@esbuild/linux-ia32": "0.25.10",
+				"@esbuild/linux-loong64": "0.25.10",
+				"@esbuild/linux-mips64el": "0.25.10",
+				"@esbuild/linux-ppc64": "0.25.10",
+				"@esbuild/linux-riscv64": "0.25.10",
+				"@esbuild/linux-s390x": "0.25.10",
+				"@esbuild/linux-x64": "0.25.10",
+				"@esbuild/netbsd-arm64": "0.25.10",
+				"@esbuild/netbsd-x64": "0.25.10",
+				"@esbuild/openbsd-arm64": "0.25.10",
+				"@esbuild/openbsd-x64": "0.25.10",
+				"@esbuild/openharmony-arm64": "0.25.10",
+				"@esbuild/sunos-x64": "0.25.10",
+				"@esbuild/win32-arm64": "0.25.10",
+				"@esbuild/win32-ia32": "0.25.10",
+				"@esbuild/win32-x64": "0.25.10"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/playwright": {
+			"version": "1.55.1",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
+			"integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright-core": "1.55.1"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"fsevents": "2.3.2"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/playwright-core": {
+			"version": "1.55.1",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
+			"integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
+			"license": "Apache-2.0",
+			"bin": {
+				"playwright-core": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/playwright/node_modules/fsevents": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/vite": {
+			"version": "6.3.6",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
+			"integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==",
+			"license": "MIT",
+			"dependencies": {
+				"esbuild": "^0.25.0",
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2",
+				"postcss": "^8.5.3",
+				"rollup": "^4.34.9",
+				"tinyglobby": "^0.2.13"
+			},
+			"bin": {
+				"vite": "bin/vite.js"
+			},
+			"engines": {
+				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/vitejs/vite?sponsor=1"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.3"
+			},
+			"peerDependencies": {
+				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+				"jiti": ">=1.21.0",
+				"less": "*",
+				"lightningcss": "^1.21.0",
+				"sass": "*",
+				"sass-embedded": "*",
+				"stylus": "*",
+				"sugarss": "*",
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				},
+				"jiti": {
+					"optional": true
+				},
+				"less": {
+					"optional": true
+				},
+				"lightningcss": {
+					"optional": true
+				},
+				"sass": {
+					"optional": true
+				},
+				"sass-embedded": {
+					"optional": true
+				},
+				"stylus": {
+					"optional": true
+				},
+				"sugarss": {
+					"optional": true
+				},
+				"terser": {
+					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@playwright/experimental-ct-core/node_modules/yaml": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+			"integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+			"license": "ISC",
+			"optional": true,
+			"peer": true,
+			"bin": {
+				"yaml": "bin.mjs"
+			},
+			"engines": {
+				"node": ">= 14.6"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-react": {
+			"version": "1.55.1",
+			"resolved": "https://registry.npmjs.org/@playwright/experimental-ct-react/-/experimental-ct-react-1.55.1.tgz",
+			"integrity": "sha512-q+qH/J99iV6+99oVT417AA8KsYp3lwxsnxZrLZjIwkEC5+G28QCkr7+UYAOZoNPzelGqHFMLhYMvc6mXuREa2w==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@playwright/experimental-ct-core": "1.55.1",
+				"@vitejs/plugin-react": "^4.2.1"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-react/node_modules/@vitejs/plugin-react": {
+			"version": "4.7.0",
+			"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+			"integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/core": "^7.28.0",
+				"@babel/plugin-transform-react-jsx-self": "^7.27.1",
+				"@babel/plugin-transform-react-jsx-source": "^7.27.1",
+				"@rolldown/pluginutils": "1.0.0-beta.27",
+				"@types/babel__core": "^7.20.5",
+				"react-refresh": "^0.17.0"
+			},
+			"engines": {
+				"node": "^14.18.0 || >=16.0.0"
+			},
+			"peerDependencies": {
+				"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@playwright/experimental-ct-react/node_modules/react-refresh": {
+			"version": "0.17.0",
+			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+			"integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/@playwright/test": {
 			"version": "1.47.1",
 			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.1.tgz",
@@ -13570,6 +14184,12 @@
 				}
 			}
 		},
+		"node_modules/@rolldown/pluginutils": {
+			"version": "1.0.0-beta.27",
+			"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+			"integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+			"license": "MIT"
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "5.1.4",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
@@ -13607,7 +14227,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13621,7 +14240,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13635,7 +14253,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13649,7 +14266,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13663,7 +14279,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13677,7 +14292,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13691,7 +14305,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13705,7 +14318,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13719,7 +14331,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13733,7 +14344,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13747,7 +14357,6 @@
 			"cpu": [
 				"loong64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13761,7 +14370,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13775,7 +14383,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13789,7 +14396,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13803,7 +14409,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13817,7 +14422,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13831,7 +14435,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13845,7 +14448,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13859,7 +14461,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -13873,7 +14474,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -15062,7 +15662,6 @@
 			"version": "7.20.5",
 			"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
 			"integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/parser": "^7.20.7",
@@ -15076,7 +15675,6 @@
 			"version": "7.27.0",
 			"resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
 			"integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/types": "^7.0.0"
@@ -15086,7 +15684,6 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
 			"integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/parser": "^7.1.0",
@@ -15097,7 +15694,6 @@
 			"version": "7.20.7",
 			"resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.7.tgz",
 			"integrity": "sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/types": "^7.20.7"
@@ -15187,7 +15783,6 @@
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
 			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/estree-jsx": {
@@ -21177,7 +21772,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/bare-events": {
@@ -21619,7 +22214,7 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
 			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"fill-range": "^7.1.1"
@@ -21632,7 +22227,6 @@
 			"version": "4.25.1",
 			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
 			"integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -21748,7 +22342,7 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
 			"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/builtins": {
@@ -22098,7 +22692,6 @@
 			"version": "1.0.30001731",
 			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz",
 			"integrity": "sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -22992,7 +23585,7 @@
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/concat-stream": {
@@ -23367,7 +23960,6 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
 			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/cookie": {
@@ -23403,7 +23995,6 @@
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
 			"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -24915,7 +25506,6 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
 			"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"optional": true,
 			"peer": true,
@@ -25381,7 +25971,6 @@
 			"version": "1.5.194",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.194.tgz",
 			"integrity": "sha512-SdnWJwSUot04UR51I2oPD8kuP2VI37/CADR1OHsFOUzZIvfWJBO6q11k5P/uKNyTT3cdOsnyjkrZ+DDShqYqJA==",
-			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/emittery": {
@@ -25552,7 +26141,6 @@
 			"version": "0.1.8",
 			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
 			"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -27153,11 +27741,13 @@
 			}
 		},
 		"node_modules/fdir": {
-			"version": "6.4.3",
-			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
-			"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
-			"dev": true,
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
 			"license": "MIT",
+			"engines": {
+				"node": ">=12.0.0"
+			},
 			"peerDependencies": {
 				"picomatch": "^3 || ^4"
 			},
@@ -27345,7 +27935,7 @@
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
 			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
@@ -27761,14 +28351,13 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
 			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC"
 		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
 			"optional": true,
@@ -27866,7 +28455,6 @@
 			"version": "1.0.0-beta.2",
 			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
 			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -28427,6 +29015,7 @@
 			"version": "11.12.0",
 			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
 			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=4"
@@ -29766,7 +30355,6 @@
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
 			"integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true
@@ -29887,7 +30475,7 @@
 			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
 			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
 			"deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"once": "^1.3.0",
@@ -30452,7 +31040,7 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -30516,7 +31104,7 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"is-extglob": "^2.1.1"
@@ -30603,7 +31191,7 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.12.0"
@@ -30903,7 +31491,6 @@
 			"version": "3.14.1",
 			"resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
 			"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true
@@ -32839,7 +33426,7 @@
 			"version": "1.21.7",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
 			"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"bin": {
 				"jiti": "bin/jiti.js"
@@ -33038,7 +33625,6 @@
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
 			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"json5": "lib/cli.js"
@@ -34131,7 +34717,6 @@
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
 			"integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"optional": true,
 			"peer": true,
@@ -34160,7 +34745,6 @@
 			"version": "0.5.5",
 			"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
 			"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -34175,7 +34759,6 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
 			"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -34191,7 +34774,6 @@
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
 			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -34206,7 +34788,6 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
 			"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -34218,7 +34799,6 @@
 			"version": "5.7.2",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
 			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-			"dev": true,
 			"license": "ISC",
 			"optional": true,
 			"peer": true,
@@ -34230,7 +34810,6 @@
 			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
 			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-			"dev": true,
 			"license": "BSD-3-Clause",
 			"optional": true,
 			"peer": true,
@@ -34981,7 +35560,6 @@
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
 			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-			"dev": true,
 			"license": "ISC",
 			"dependencies": {
 				"yallist": "^3.0.2"
@@ -38017,7 +38595,7 @@
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
 			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"braces": "^3.0.3",
@@ -38031,7 +38609,7 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8.6"
@@ -38633,7 +39211,6 @@
 			"version": "3.3.11",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
 			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -38666,7 +39243,6 @@
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
 			"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -38685,7 +39261,6 @@
 			"version": "0.6.3",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
 			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -38739,7 +39314,6 @@
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
 			"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true
@@ -38958,7 +39532,6 @@
 			"version": "2.0.19",
 			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
 			"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/node-schedule": {
@@ -40902,7 +41475,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
 			"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -41037,7 +41609,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -41156,7 +41728,6 @@
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
 			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=12"
@@ -41364,7 +41935,6 @@
 			"version": "8.5.6",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
 			"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -43212,7 +43782,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
 			"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true
@@ -45903,7 +46472,6 @@
 			"version": "4.40.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
 			"integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "1.0.7"
@@ -46123,7 +46691,6 @@
 			"version": "1.86.3",
 			"resolved": "https://registry.npmjs.org/sass/-/sass-1.86.3.tgz",
 			"integrity": "sha512-iGtg8kus4GrsGLRDLRBRHY9dNVA78ZaS7xr01cWnS7PEMQyFtTqBiyCrfpTYTZXRWM94akzckYjh8oADfFNTzw==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -46146,7 +46713,6 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
 			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -46164,7 +46730,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
 			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -47579,7 +48144,7 @@
 			"version": "0.7.4",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
 			"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">= 8"
@@ -47589,7 +48154,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-			"dev": true,
 			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
@@ -48363,7 +48927,6 @@
 			"version": "0.59.0",
 			"resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
 			"integrity": "sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -48388,7 +48951,6 @@
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"peer": true,
@@ -48402,7 +48964,6 @@
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
 			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 			"deprecated": "Glob versions prior to v9 are no longer supported",
-			"dev": true,
 			"license": "ISC",
 			"optional": true,
 			"peer": true,
@@ -48425,7 +48986,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
 			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
 			"license": "ISC",
 			"optional": true,
 			"peer": true,
@@ -48440,7 +49000,6 @@
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
 			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-			"dev": true,
 			"license": "ISC",
 			"optional": true,
 			"peer": true
@@ -48793,7 +49352,7 @@
 			"version": "5.39.0",
 			"resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
 			"integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "BSD-2-Clause",
 			"dependencies": {
 				"@jridgewell/source-map": "^0.3.3",
@@ -48862,7 +49421,7 @@
 			"version": "8.14.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
 			"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@@ -48875,14 +49434,14 @@
 			"version": "2.20.3",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
 			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/terser/node_modules/source-map": {
 			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
 			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-			"dev": true,
+			"devOptional": true,
 			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
@@ -48892,7 +49451,7 @@
 			"version": "0.5.21",
 			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
 			"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"buffer-from": "^1.0.0",
@@ -49072,14 +49631,13 @@
 			"license": "MIT"
 		},
 		"node_modules/tinyglobby": {
-			"version": "0.2.12",
-			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
-			"integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
-			"dev": true,
+			"version": "0.2.15",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+			"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
 			"license": "MIT",
 			"dependencies": {
-				"fdir": "^6.4.3",
-				"picomatch": "^4.0.2"
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.3"
 			},
 			"engines": {
 				"node": ">=12.0.0"
@@ -49088,6 +49646,18 @@
 				"url": "https://github.com/sponsors/SuperchupuDev"
 			}
 		},
+		"node_modules/tinyglobby/node_modules/picomatch": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/tinypool": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
@@ -49167,7 +49737,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"is-number": "^7.0.0"
@@ -50205,7 +50775,6 @@
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
 			"integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -50756,7 +51325,6 @@
 			"version": "5.4.18",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.18.tgz",
 			"integrity": "sha512-1oDcnEp3lVyHCuQ2YFelM4Alm2o91xNoMncRm1U7S+JdYfYOvbiGZ3/CxGttrOu2M/KcGz7cRC2DoNUA6urmMA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"esbuild": "^0.21.3",
@@ -50889,7 +51457,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -50906,7 +51473,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -50923,7 +51489,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -50940,7 +51505,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -50957,7 +51521,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -50974,7 +51537,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -50991,7 +51553,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51008,7 +51569,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51025,7 +51585,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51042,7 +51601,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51059,7 +51617,6 @@
 			"cpu": [
 				"loong64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51076,7 +51633,6 @@
 			"cpu": [
 				"mips64el"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51093,7 +51649,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51110,7 +51665,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51127,7 +51681,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51144,7 +51697,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51161,7 +51713,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51178,7 +51729,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51195,7 +51745,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51212,7 +51761,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51229,7 +51777,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51246,7 +51793,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -51260,7 +51806,6 @@
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
 			"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
 			"bin": {
@@ -52715,7 +53260,6 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
 			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/yaml": {
diff --git a/package.json b/package.json
index 7494db3b48..34e165d001 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
 		"@codemirror/search": "6.5.11",
 		"@codemirror/state": "6.5.2",
 		"@codemirror/view": "6.38.3",
+		"@playwright/experimental-ct-react": "1.55.1",
 		"@preact/signals-react": "1.3.6",
 		"@reduxjs/toolkit": "2.6.1",
 		"@types/xml2js": "0.4.14",
diff --git a/packages/playground/website/playwright/playwright.config.ts b/packages/playground/website/playwright/playwright.config.ts
index 7491a56d8c..a5a9a2742a 100644
--- a/packages/playground/website/playwright/playwright.config.ts
+++ b/packages/playground/website/playwright/playwright.config.ts
@@ -1,12 +1,16 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { defineConfig, devices } from '@playwright/test';
+import {
+	defineConfig,
+	devices,
+	type PlaywrightTestConfig,
+} from '@playwright/test';
 
 const baseURL =
 	process.env.PLAYWRIGHT_TEST_BASE_URL ||
 	'http://127.0.0.1:5400/website-server/';
 
 export const playwrightConfig: PlaywrightTestConfig = {
-	testDir: './e2e',
+	testDir: './ct',
+	// testDir: './e2e',
 	/* Run tests in files in parallel */
 	fullyParallel: false,
 	/* Fail the build on CI if you accidentally left test.only in the source code. */
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
index 86c71f23a2..4bcf04bb13 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
@@ -247,47 +247,58 @@ const PlaygroundFilePickerTree = forwardRef<
 	const handleCreateFile = async (targetDir?: string) => {
 		const baseDir = await resolveBaseDir(targetDir);
 		const normalizedBase = normalizePath(baseDir);
-		try {
-			const name = await findAvailableName(
-				normalizedBase,
-				'untitled.php'
-			);
-			const tempPath = joinPaths(normalizedBase, name);
-			await filesystem.writeFile(tempPath, '');
-			pendingCreateRef.current = { type: 'file', tempPath };
-			setRenamingAbsolutePath(tempPath);
-			setLastSelectedPath(tempPath);
-			const absoluteBasePath = pathToAbsolute(normalizedBase);
-			const absoluteTempPath = pathToAbsolute(tempPath);
-			if (treeRef.current) {
-				await treeRef.current.expandToPath(absoluteBasePath);
-				await treeRef.current.refresh(absoluteBasePath);
-				treeRef.current.focusPath(absoluteTempPath, { notify: false });
+		const name = await findAvailableName(normalizedBase, 'untitled.php');
+		const tempPath = joinPaths(normalizedBase, name);
+		await filesystem.writeFile(tempPath, '');
+		pendingCreateRef.current = { type: 'file', tempPath };
+		setRenamingAbsolutePath(tempPath);
+		setLastSelectedPath(tempPath);
+		const relativeBasePath = pathToRelative(normalizedBase);
+		const relativeTempPath = pathToRelative(tempPath);
+		if (normalizedBase === normalizedRoot) {
+			await reloadTopLevel();
+		} else if (treeRef.current) {
+			await treeRef.current.expandToPath(relativeBasePath);
+			await treeRef.current.refresh(relativeBasePath);
+		}
+		if (treeRef.current && relativeTempPath) {
+			const focusLater = normalizedRoot === '/' && normalizedBase === '/';
+			const focusAction = () =>
+				treeRef.current?.focusPath(relativeTempPath, { notify: false });
+			if (focusLater) {
+				setTimeout(focusAction, 0);
+			} else {
+				focusAction();
 			}
-		} catch (e) {
-			void e;
 		}
 	};
 
 	const handleCreateDirectory = async (targetDir?: string) => {
 		const baseDir = await resolveBaseDir(targetDir);
 		const normalizedBase = normalizePath(baseDir);
-		try {
-			const name = await findAvailableName(normalizedBase, 'New Folder');
-			const tempPath = joinPaths(normalizedBase, name);
-			await filesystem.mkdir(tempPath);
-			pendingCreateRef.current = { type: 'folder', tempPath };
-			setRenamingAbsolutePath(tempPath);
-			setLastSelectedPath(tempPath);
-			const absoluteBasePath = pathToAbsolute(normalizedBase);
-			const absoluteTempPath = pathToAbsolute(tempPath);
-			if (treeRef.current) {
-				await treeRef.current.expandToPath(absoluteBasePath);
-				await treeRef.current.refresh(absoluteBasePath);
-				treeRef.current.focusPath(absoluteTempPath, { notify: false });
+		const name = await findAvailableName(normalizedBase, 'New Folder');
+		const tempPath = joinPaths(normalizedBase, name);
+		await filesystem.mkdir(tempPath);
+		pendingCreateRef.current = { type: 'folder', tempPath };
+		setRenamingAbsolutePath(tempPath);
+		setLastSelectedPath(tempPath);
+		const relativeBasePath = pathToRelative(normalizedBase);
+		const relativeTempPath = pathToRelative(tempPath);
+		if (normalizedBase === normalizedRoot) {
+			await reloadTopLevel();
+		} else if (treeRef.current) {
+			await treeRef.current.expandToPath(relativeBasePath);
+			await treeRef.current.refresh(relativeBasePath);
+		}
+		if (treeRef.current && relativeTempPath) {
+			const focusLater = normalizedRoot === '/' && normalizedBase === '/';
+			const focusAction = () =>
+				treeRef.current?.focusPath(relativeTempPath, { notify: false });
+			if (focusLater) {
+				setTimeout(focusAction, 0);
+			} else {
+				focusAction();
 			}
-		} catch (e) {
-			void e;
 		}
 	};
 
@@ -346,20 +357,16 @@ const PlaygroundFilePickerTree = forwardRef<
 
 	const handleDownloadPath = async (targetPath: string) => {
 		setContextMenu(null);
-		try {
-			const normalized = normalizePath(targetPath);
-			const baseName = basename(normalized) || 'download';
-			const isDir = await filesystem.isDir(normalized);
-			if (isDir) {
-				const bytes = await zipDirectory(filesystem as any, normalized);
-				saveAs(new File([bytes], `${baseName}.zip`));
-				return;
-			}
-			const data = await filesystem.readFileAsBuffer(normalized);
-			saveAs(new File([data], baseName));
-		} catch {
-			// Ignore failure
+		const normalized = normalizePath(targetPath);
+		const baseName = basename(normalized) || 'download';
+		const isDir = await filesystem.isDir(normalized);
+		if (isDir) {
+			const bytes = await zipDirectory(filesystem as any, normalized);
+			saveAs(new File([bytes], `${baseName}.zip`));
+			return;
 		}
+		const data = await filesystem.readFileAsBuffer(normalized);
+		saveAs(new File([data], baseName));
 	};
 
 	return (

From 239a0bc915f6d8ac2598a1c11a54de0050fdc723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 30 Sep 2025 01:57:14 +0200
Subject: [PATCH 39/41] simplifications, ux improvements

---
 .../components/src/FilePickerTree/index.tsx   |   2 +
 .../file-explorer/FileExplorerSidebar.tsx     |  26 ++-
 .../PlaygroundFilePickerTree.tsx              | 183 +++++++-----------
 3 files changed, 90 insertions(+), 121 deletions(-)

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index 44c807d1dc..ed2063cf96 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -48,6 +48,7 @@ export type FilePickerTreeHandle = {
 		options?: { select?: boolean; domFocus?: boolean; notify?: boolean }
 	) => void;
 	selectPath: (path: string) => void;
+	getSelectedPath: () => string | null;
 	expandToPath: (path: string) => Promise<void>;
 	refresh: (path: string) => Promise<FileNode[] | undefined>;
 	remapPath: (from: string, to: string) => void;
@@ -355,6 +356,7 @@ export const FilePickerTree = forwardRef<
 				setFocusedPath(path);
 				focusDomNode(path);
 			},
+			getSelectedPath: () => selectedPath,
 			expandToPath: async (path: string) => await expandToPath(path),
 			refresh: async (path: string) => await refreshChildren(path),
 			remapPath: remapPathState,
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
index 94f51abaa2..1f847ba170 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
@@ -85,6 +85,9 @@ export default function FileExplorerSidebar({
 		// Remove selectedDirPath from dependencies to prevent unwanted updates
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [forceSelectedPath, currentPath]);
+	const [lastSelectedPath, setLastSelectedPath] = useState<string | null>(
+		null
+	);
 
 	const [root, setRoot] = useState<string>(DEFAULT_WORKSPACE_DIR);
 
@@ -108,14 +111,22 @@ export default function FileExplorerSidebar({
 					</button>
 					<button
 						className={styles.fileExplorerButton}
-						onClick={() => treeRef.current?.createFile()}
+						onClick={() =>
+							treeRef.current?.createFile(
+								lastSelectedPath ?? undefined
+							)
+						}
 						title="Create new file"
 					>
 						New File
 					</button>
 					<button
 						className={styles.fileExplorerButton}
-						onClick={() => treeRef.current?.createFolder()}
+						onClick={() => {
+							treeRef.current?.createFolder(
+								lastSelectedPath ?? undefined
+							);
+						}}
 						title="Create new folder"
 					>
 						New Folder
@@ -131,6 +142,13 @@ export default function FileExplorerSidebar({
 					initialPath={treeInitialPath}
 					// excludePaths={['/dev', '/internal', '/proc', '/request']}
 					onSelect={async (path) => {
+						setLastSelectedPath(path);
+						if (!path) {
+							setForceSelectedPath(null);
+							dispatch(setCode(''));
+							dispatch(setCurrentPath(null));
+							return;
+						}
 						setForceSelectedPath(null);
 						if (filesystem && (await filesystem.isDir(path))) {
 							setSelectedDirPath(path);
@@ -173,9 +191,7 @@ export default function FileExplorerSidebar({
 							dispatch(setCode(text));
 							dispatch(setCurrentPath(path));
 							// Don't change selectedDirPath when clicking a file
-						} catch (e) {
-							console.error(e);
-							console.log({ path });
+						} catch {
 							dispatch(setCode('Could not open file'));
 							dispatch(setCurrentPath(null));
 							// Don't change selectedDirPath when clicking a file
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
index 4bcf04bb13..deff9e5cbe 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
+++ b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
@@ -11,9 +11,6 @@ import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components'
 import styles from './FileExplorer.module.css';
 import saveAs from 'file-saver';
 import { zipDirectory } from '@wp-playground/common';
-import { useAppDispatch, useAppSelector } from '../../hooks';
-import { setCode, setCurrentPath } from '../../store';
-import { DEFAULT_WORKSPACE_DIR } from '../../constants';
 import { basename, dirname, joinPaths, normalizePath } from '@php-wasm/util';
 import { Popover, NavigableMenu, MenuItem } from '@wordpress/components';
 
@@ -32,8 +29,8 @@ async function listDir(filesystem: AsyncFilesystem, path: string) {
 }
 
 export interface PlaygroundFilePickerTreeRef {
-	createFile: () => void;
-	createFolder: () => void;
+	createFile: (absSelectedPath?: string) => void;
+	createFolder: (absSelectedPath?: string) => void;
 	refresh: () => Promise<void>;
 }
 
@@ -54,7 +51,7 @@ export type PlaygroundFilePickerTreeProps = {
 	root?: string;
 	initialPath?: string;
 	excludePaths?: string[];
-	onSelect?: (path: string) => void;
+	onSelect?: (path: string | null) => void;
 	filesystem: AsyncFilesystem;
 };
 
@@ -78,7 +75,7 @@ const PlaygroundFilePickerTree = forwardRef<
 	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
 	const [files, setFiles] = useState<FileNode[]>([]);
 	const [contextMenu, setContextMenu] = useState<{
-		path: string;
+		absPath: string;
 		type: 'file' | 'folder';
 		x: number;
 		y: number;
@@ -92,11 +89,6 @@ const PlaygroundFilePickerTree = forwardRef<
 		tempPath: string;
 	} | null>(null);
 	const isMountedRef = useRef(true);
-	const [lastSelectedPath, setLastSelectedPath] = useState<string | null>(
-		initialPath ?? DEFAULT_WORKSPACE_DIR
-	);
-	const dispatch = useAppDispatch();
-	const currentPath = useAppSelector((state) => state.playground.currentPath);
 
 	useEffect(() => {
 		return () => {
@@ -178,8 +170,13 @@ const PlaygroundFilePickerTree = forwardRef<
 		return filtered;
 	};
 
+	const getAbsoluteSelectedPath = () => {
+		const relative = treeRef.current?.getSelectedPath() || null;
+		return relative ? pathToAbsolute(relative) : null;
+	};
 	const handleSelect = (path: string) => {
-		onSelect?.(pathToAbsolute(path));
+		const abs = pathToAbsolute(path);
+		onSelect?.(abs);
 	};
 
 	const handleInternalContextMenu = (
@@ -192,7 +189,7 @@ const PlaygroundFilePickerTree = forwardRef<
 		const absPath = pathToAbsolute(path);
 		setRenamingAbsolutePath(null);
 		setContextMenu({
-			path: absPath,
+			absPath: absPath,
 			type: node.type,
 			x: event.clientX,
 			y: event.clientY,
@@ -204,8 +201,6 @@ const PlaygroundFilePickerTree = forwardRef<
 		setRenamingAbsolutePath(targetPath);
 	};
 
-	// dirname helper not needed in this component
-
 	const findAvailableName = async (baseDir: string, baseName: string) => {
 		let name = baseName;
 		let counter = 0;
@@ -228,72 +223,54 @@ const PlaygroundFilePickerTree = forwardRef<
 		return name;
 	};
 
-	const resolveBaseDir = async (path?: string) => {
-		if (!path) {
-			path = lastSelectedPath || DEFAULT_WORKSPACE_DIR;
-		}
+	const handleCreateFile = async (absSelectedPath?: string) =>
+		await handleCreateNode(absSelectedPath, 'file', 'untitled.php');
+
+	const handleCreateDirectory = async (absSelectedPath?: string) =>
+		await handleCreateNode(absSelectedPath, 'folder', 'New Folder');
+
+	const handleCreateNode = async (
+		absSelectedPath: string | undefined,
+		type: 'file' | 'folder',
+		initialName: string
+	) => {
+		absSelectedPath = absSelectedPath || getAbsoluteSelectedPath() || root;
+
+		// Resolve the parent directory of the new node – either the
+		// currently selected directory or its first existing parent.
+		let nodeParent = absSelectedPath;
 		while (true) {
-			if (path === '/') {
+			if (nodeParent === '/') {
 				break;
 			}
-			if (await filesystem?.isDir(path)) {
+			if (await filesystem?.isDir(nodeParent)) {
 				break;
 			}
-			path = dirname(path);
+			nodeParent = dirname(nodeParent);
 		}
-		return path;
-	};
 
-	const handleCreateFile = async (targetDir?: string) => {
-		const baseDir = await resolveBaseDir(targetDir);
-		const normalizedBase = normalizePath(baseDir);
-		const name = await findAvailableName(normalizedBase, 'untitled.php');
+		const normalizedBase = normalizePath(nodeParent);
+		const name = await findAvailableName(normalizedBase, initialName);
 		const tempPath = joinPaths(normalizedBase, name);
-		await filesystem.writeFile(tempPath, '');
-		pendingCreateRef.current = { type: 'file', tempPath };
-		setRenamingAbsolutePath(tempPath);
-		setLastSelectedPath(tempPath);
-		const relativeBasePath = pathToRelative(normalizedBase);
-		const relativeTempPath = pathToRelative(tempPath);
-		if (normalizedBase === normalizedRoot) {
-			await reloadTopLevel();
-		} else if (treeRef.current) {
-			await treeRef.current.expandToPath(relativeBasePath);
-			await treeRef.current.refresh(relativeBasePath);
+		if (type === 'folder') {
+			await filesystem.mkdir(tempPath);
+		} else {
+			await filesystem.writeFile(tempPath, '');
 		}
-		if (treeRef.current && relativeTempPath) {
-			const focusLater = normalizedRoot === '/' && normalizedBase === '/';
-			const focusAction = () =>
-				treeRef.current?.focusPath(relativeTempPath, { notify: false });
-			if (focusLater) {
-				setTimeout(focusAction, 0);
-			} else {
-				focusAction();
-			}
-		}
-	};
-
-	const handleCreateDirectory = async (targetDir?: string) => {
-		const baseDir = await resolveBaseDir(targetDir);
-		const normalizedBase = normalizePath(baseDir);
-		const name = await findAvailableName(normalizedBase, 'New Folder');
-		const tempPath = joinPaths(normalizedBase, name);
-		await filesystem.mkdir(tempPath);
-		pendingCreateRef.current = { type: 'folder', tempPath };
+		pendingCreateRef.current = { type, tempPath };
 		setRenamingAbsolutePath(tempPath);
-		setLastSelectedPath(tempPath);
-		const relativeBasePath = pathToRelative(normalizedBase);
-		const relativeTempPath = pathToRelative(tempPath);
 		if (normalizedBase === normalizedRoot) {
 			await reloadTopLevel();
 		} else if (treeRef.current) {
-			await treeRef.current.expandToPath(relativeBasePath);
-			await treeRef.current.refresh(relativeBasePath);
+			await treeRef.current.expandToPath(pathToRelative(normalizedBase));
+			await treeRef.current.refresh(pathToRelative(normalizedBase));
 		}
+		const relativeTempPath = pathToRelative(tempPath);
 		if (treeRef.current && relativeTempPath) {
 			const focusLater = normalizedRoot === '/' && normalizedBase === '/';
-			const focusAction = () =>
+			const focusAction = () => {
 				treeRef.current?.focusPath(relativeTempPath, { notify: false });
+			};
 			if (focusLater) {
 				setTimeout(focusAction, 0);
 			} else {
@@ -313,10 +290,10 @@ const PlaygroundFilePickerTree = forwardRef<
 	);
 
 	const handleDeletePath = async (
-		targetPath: string,
+		absSelectedPath: string,
 		type: 'file' | 'folder'
 	) => {
-		const normalized = normalizePath(targetPath);
+		const normalized = normalizePath(absSelectedPath);
 		setContextMenu(null);
 		try {
 			if (type === 'folder') {
@@ -331,7 +308,6 @@ const PlaygroundFilePickerTree = forwardRef<
 		} finally {
 			setRenamingAbsolutePath(null);
 			const parentDir = dirname(normalized);
-			setLastSelectedPath(parentDir);
 			const relativeParentPath = pathToRelative(parentDir);
 			if (parentDir === normalizedRoot) {
 				await reloadTopLevel();
@@ -343,21 +319,21 @@ const PlaygroundFilePickerTree = forwardRef<
 					});
 				}
 			}
-			// Clear editor if deleted current file or a parent directory
+			// Notify parent if deleted current file or a parent directory
+			const currentAbs = getAbsoluteSelectedPath();
 			if (
-				currentPath &&
-				(currentPath === normalized ||
-					currentPath.startsWith(`${normalized}/`))
+				currentAbs &&
+				(currentAbs === normalized ||
+					currentAbs.startsWith(`${normalized}/`))
 			) {
-				dispatch(setCode(''));
-				dispatch(setCurrentPath(null));
+				onSelect?.(null);
 			}
 		}
 	};
 
-	const handleDownloadPath = async (targetPath: string) => {
+	const handleDownloadPath = async (absSelectedPath: string) => {
 		setContextMenu(null);
-		const normalized = normalizePath(targetPath);
+		const normalized = normalizePath(absSelectedPath);
 		const baseName = basename(normalized) || 'download';
 		const isDir = await filesystem.isDir(normalized);
 		if (isDir) {
@@ -419,27 +395,17 @@ const PlaygroundFilePickerTree = forwardRef<
 						if (isPending) {
 							pendingCreateRef.current = null;
 						}
-						setLastSelectedPath(candidateNormalized);
 						const relativeCandidateSamePath =
 							pathToRelative(candidateNormalized);
 						if (relativeCandidateSamePath) {
-							if (normalizedRoot === '/' && parent === '/') {
-								setTimeout(() => {
-									treeRef.current?.focusPath(
-										relativeCandidateSamePath,
-										{
-											notify: false,
-										}
-									);
-								}, 0);
-							} else {
+							setTimeout(() => {
 								treeRef.current?.focusPath(
 									relativeCandidateSamePath,
 									{
 										notify: false,
 									}
 								);
-							}
+							}, 0);
 						}
 						return;
 					}
@@ -482,7 +448,6 @@ const PlaygroundFilePickerTree = forwardRef<
 							);
 							candidateIsDir = isDir;
 						}
-						setLastSelectedPath(candidateNormalized);
 						if (
 							candidateIsDir &&
 							treeRef.current &&
@@ -494,25 +459,10 @@ const PlaygroundFilePickerTree = forwardRef<
 								relativeCandidatePath
 							);
 						}
-						if (candidateIsDir) {
-							if (currentPath === absPath) {
-								dispatch(setCurrentPath(candidate));
-							}
-						} else {
-							if (isPending) {
-								try {
-									const newContent =
-										await filesystem.readFileAsText(
-											candidate
-										);
-									dispatch(setCode(newContent));
-									dispatch(setCurrentPath(candidate));
-								} catch (e) {
-									void e;
-								}
-							} else if (currentPath === absPath) {
-								dispatch(setCurrentPath(candidate));
-							}
+						// If the currently selected path was renamed, notify parent with the new path
+						const currentAbs = getAbsoluteSelectedPath();
+						if (currentAbs === absPath) {
+							onSelect?.(normalizePath(candidate));
 						}
 
 						if (parent === normalizedRoot) {
@@ -567,7 +517,6 @@ const PlaygroundFilePickerTree = forwardRef<
 					pendingCreateRef.current = null;
 					setRenamingAbsolutePath(null);
 					const parentDir = dirname(absPath);
-					setLastSelectedPath(parentDir);
 					const relativeParentPath = pathToRelative(parentDir);
 					if (parentDir === normalizedRoot) {
 						await reloadTopLevel();
@@ -618,9 +567,8 @@ const PlaygroundFilePickerTree = forwardRef<
 								role="menuitem"
 								className={styles.contextMenuButton}
 								onClick={async () => {
-									const dir = contextMenu.path;
 									setContextMenu(null);
-									await handleCreateFile(dir);
+									await handleCreateFile(contextMenu.absPath);
 								}}
 							>
 								Create file
@@ -631,9 +579,10 @@ const PlaygroundFilePickerTree = forwardRef<
 								role="menuitem"
 								className={styles.contextMenuButton}
 								onClick={async () => {
-									const dir = contextMenu.path;
 									setContextMenu(null);
-									await handleCreateDirectory(dir);
+									await handleCreateDirectory(
+										contextMenu.absPath
+									);
 								}}
 							>
 								Create directory
@@ -643,7 +592,7 @@ const PlaygroundFilePickerTree = forwardRef<
 							role="menuitem"
 							className={styles.contextMenuButton}
 							onClick={() =>
-								handleContextMenuRename(contextMenu.path)
+								handleContextMenuRename(contextMenu.absPath)
 							}
 						>
 							Rename
@@ -653,7 +602,7 @@ const PlaygroundFilePickerTree = forwardRef<
 							className={`${styles.contextMenuButton} ${styles.contextMenuButtonDanger}`}
 							onClick={() =>
 								handleDeletePath(
-									contextMenu.path,
+									contextMenu.absPath,
 									contextMenu.type
 								)
 							}
@@ -663,7 +612,9 @@ const PlaygroundFilePickerTree = forwardRef<
 						<MenuItem
 							role="menuitem"
 							className={styles.contextMenuButton}
-							onClick={() => handleDownloadPath(contextMenu.path)}
+							onClick={() =>
+								handleDownloadPath(contextMenu.absPath)
+							}
 						>
 							Download
 						</MenuItem>

From 80220c3a9fd418030596b506a021f0357b1f6f0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 30 Sep 2025 10:45:02 +0200
Subject: [PATCH 40/41] Merge two file tree components

---
 .../components/src/FilePickerTree/index.tsx   | 518 ++++++++++++---
 .../file-explorer/FileExplorerSidebar.tsx     |  28 +-
 .../PlaygroundFilePickerTree.tsx              | 628 ------------------
 3 files changed, 452 insertions(+), 722 deletions(-)
 delete mode 100644 packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index ed2063cf96..c33f91fc14 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -2,6 +2,7 @@ import React, {
 	forwardRef,
 	useEffect,
 	useImperativeHandle,
+	useMemo,
 	useRef,
 	useState,
 } from 'react';
@@ -10,15 +11,32 @@ import {
 	__experimentalTreeGridRow as TreeGridRow,
 	__experimentalTreeGridCell as TreeGridCell,
 	Button,
+	Popover,
+	NavigableMenu,
+	MenuItem,
 } from '@wordpress/components';
 import { Icon, chevronDown, chevronRight } from '@wordpress/icons';
 import '@wordpress/components/build-style/style.css';
 import css from './style.module.css';
 import classNames from 'classnames';
 import { file, folder } from '../icons';
+import { dirname, joinPaths } from '@php-wasm/util';
 
 type ExpandedNodePaths = Record<string, boolean>;
 
+export interface AsyncFilesystem {
+	isDir: (path: string) => Promise<boolean>;
+	fileExists: (path: string) => Promise<boolean>;
+	readFileAsBuffer: (path: string) => Promise<Uint8Array>;
+	readFileAsText: (path: string) => Promise<string>;
+	listFiles: (path: string) => Promise<string[]>;
+	writeFile: (path: string, data: Uint8Array | string) => Promise<void>;
+	mkdir: (path: string) => Promise<void>;
+	rmdir: (path: string, options?: { recursive?: boolean }) => Promise<void>;
+	mv: (source: string, destination: string) => Promise<void>;
+	unlink: (path: string) => Promise<void>;
+}
+
 export type FileNode = {
 	name: string;
 	type: 'file' | 'folder';
@@ -26,20 +44,10 @@ export type FileNode = {
 };
 
 export type FilePickerTreeProps = {
-	files: FileNode[];
-	initialPath?: string;
-	error?: string;
-	onSelect?: (path: string) => void;
-	onLoadChildren?: (path: string) => Promise<FileNode[]>;
-	onContextMenu?: (
-		event: React.MouseEvent,
-		node: FileNode,
-		path: string
-	) => void;
-	renamingPath?: string | null;
-	onRename?: (path: string, newName: string) => void;
-	onRenameCancel?: (path: string) => void;
-	autoFocus?: boolean;
+	filesystem: AsyncFilesystem;
+	root?: string; // default '/wordpress'
+	initialSelectedPath?: string;
+	onSelect?: (path: string | null) => void;
 };
 
 export type FilePickerTreeHandle = {
@@ -52,6 +60,9 @@ export type FilePickerTreeHandle = {
 	expandToPath: (path: string) => Promise<void>;
 	refresh: (path: string) => Promise<FileNode[] | undefined>;
 	remapPath: (from: string, to: string) => void;
+	// Filesystem helpers
+	createFile: (absSelectedPath?: string) => Promise<void>;
+	createFolder: (absSelectedPath?: string) => Promise<void>;
 };
 
 function buildPathChain(path: string): string[] {
@@ -82,34 +93,42 @@ export const FilePickerTree = forwardRef<
 	FilePickerTreeProps
 >(function FilePickerTree(
 	{
-		files,
-		initialPath,
-		error,
+		filesystem,
+		root = '/wordpress',
+		initialSelectedPath,
 		onSelect = () => {},
-		onLoadChildren,
-		onContextMenu,
-		renamingPath = null,
-		onRename,
-		onRenameCancel,
-		autoFocus = true,
 	},
 	ref
 ) {
+	const normalizedRoot = useMemo(() => {
+		let p = (root || '/').replace(/\\+/g, '/');
+		if (!p.startsWith('/')) p = `/${p}`;
+		p = p.replace(/\/{2,}/g, '/');
+		if (p.length > 1 && p.endsWith('/')) p = p.slice(0, -1);
+		return p || '/';
+	}, [root]);
+
+	const isValidNameSegment = (name: string) => {
+		if (!name) return false;
+		if (name === '.' || name === '..') return false;
+		return !/[\\/]/.test(name);
+	};
+
 	const [expanded, setExpanded] = useState<ExpandedNodePaths>(() => {
-		if (!initialPath) {
+		if (!initialSelectedPath) {
 			return {};
 		}
 		const initialExpanded: ExpandedNodePaths = {};
-		for (const path of buildPathChain(initialPath)) {
+		for (const path of buildPathChain(initialSelectedPath)) {
 			initialExpanded[path] = true;
 		}
 		return initialExpanded;
 	});
 	const [selectedPath, setSelectedPath] = useState<string | null>(
-		() => initialPath ?? null
+		() => initialSelectedPath ?? null
 	);
 	const [focusedPath, setFocusedPath] = useState<string | null>(
-		() => initialPath ?? null
+		() => initialSelectedPath ?? null
 	);
 	const [lazyChildren, setLazyChildren] = useState<
 		Record<string, FileNode[]>
@@ -155,8 +174,28 @@ export const FilePickerTree = forwardRef<
 		return lazyChildren[path];
 	};
 
+	const listDir = async (fs: AsyncFilesystem, basePath: string) => {
+		const names = await fs.listFiles(basePath);
+		const results: { name: string; type: 'file' | 'folder' }[] = [];
+		for (const name of names) {
+			const childPath =
+				basePath === '/' ? `/${name}` : `${basePath}/${name}`;
+			const isDirectory = await fs.isDir(childPath);
+			results.push({ name, type: isDirectory ? 'folder' : 'file' });
+		}
+		results.sort((a, b) => {
+			if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
+			return a.name.localeCompare(b.name);
+		});
+		return results as FileNode[];
+	};
+
+	const loadChildren = async (path: string): Promise<FileNode[]> => {
+		return await listDir(filesystem as AsyncFilesystem, path);
+	};
+
 	const loadChildrenForPath = (path: string, node: FileNode) => {
-		if (!onLoadChildren || node.type !== 'folder') {
+		if (node.type !== 'folder') {
 			return node.children;
 		}
 		const existingChildren = node.children ?? lazyChildrenRef.current[path];
@@ -165,7 +204,7 @@ export const FilePickerTree = forwardRef<
 		}
 		setLoadingPaths((prev) => ({ ...prev, [path]: true }));
 		return new Promise<FileNode[]>((resolve) => {
-			onLoadChildren(path)
+			loadChildren(path)
 				.then((children) => {
 					setLazyChildren((prev) => ({
 						...prev,
@@ -187,12 +226,9 @@ export const FilePickerTree = forwardRef<
 	};
 
 	const refreshChildren = (path: string) => {
-		if (!onLoadChildren) {
-			return Promise.resolve(undefined);
-		}
 		setLoadingPaths((prev) => ({ ...prev, [path]: true }));
 		return new Promise<FileNode[]>((resolve) => {
-			onLoadChildren(path)
+			loadChildren(path)
 				.then((children) => {
 					setLazyChildren((prev) => ({
 						...prev,
@@ -243,11 +279,11 @@ export const FilePickerTree = forwardRef<
 			}
 			return next;
 		});
-		if (!onLoadChildren) {
-			return;
-		}
+		// always available in filesystem mode
 
-		let currentChildren: FileNode[] | undefined = files;
+		let currentChildren: FileNode[] | undefined = [
+			{ name: normalizedRoot, type: 'folder' },
+		];
 		let parentPath = '';
 		for (const segmentPath of chain) {
 			const nextNode = currentChildren?.find((child) => {
@@ -325,6 +361,27 @@ export const FilePickerTree = forwardRef<
 		}
 	};
 
+	// Filesystem-specific state and actions (declare before exposing handle)
+	const treeFiles: FileNode[] = useMemo(() => {
+		return [{ name: normalizedRoot, type: 'folder' }];
+	}, [normalizedRoot]);
+
+	const [contextMenu, setContextMenu] = useState<{
+		absPath: string;
+		type: 'file' | 'folder';
+		x: number;
+		y: number;
+	} | null>(null);
+	const [renamingAbsolutePath, setRenamingAbsolutePath] = useState<
+		string | null
+	>(null);
+	const pendingCreateRef = useRef<{
+		type: 'file' | 'folder';
+		tempPath: string;
+	} | null>(null);
+
+	const effectiveRenamingPath = renamingAbsolutePath;
+
 	useImperativeHandle(
 		ref,
 		() => ({
@@ -360,28 +417,39 @@ export const FilePickerTree = forwardRef<
 			expandToPath: async (path: string) => await expandToPath(path),
 			refresh: async (path: string) => await refreshChildren(path),
 			remapPath: remapPathState,
+			createFile: async (absSelectedPath?: string) => {
+				await createNode(absSelectedPath, 'file', 'untitled.php');
+			},
+			createFolder: async (absSelectedPath?: string) => {
+				await createNode(absSelectedPath, 'folder', 'New Folder');
+			},
 		}),
-		[]
+		[selectedPath, refreshChildren, remapPathState, expandToPath]
 	);
 
 	const hasInitializedRef = useRef(false);
-	const pendingInitialExpandRef = useRef<string | null>(initialPath ?? null);
-	const previousInitialPathRef = useRef(initialPath);
+	const pendingInitialExpandRef = useRef<string | null>(
+		initialSelectedPath ?? null
+	);
+	const previousInitialPathRef = useRef(initialSelectedPath);
 
 	useEffect(() => {
-		if (initialPath && initialPath !== previousInitialPathRef.current) {
-			pendingInitialExpandRef.current = initialPath;
-		} else if (!initialPath) {
+		if (
+			initialSelectedPath &&
+			initialSelectedPath !== previousInitialPathRef.current
+		) {
+			pendingInitialExpandRef.current = initialSelectedPath;
+		} else if (!initialSelectedPath) {
 			pendingInitialExpandRef.current = null;
 		}
-		previousInitialPathRef.current = initialPath;
-	}, [initialPath]);
+		previousInitialPathRef.current = initialSelectedPath;
+	}, [initialSelectedPath]);
 	useEffect(() => {
-		if (!initialPath || hasInitializedRef.current) {
+		if (!initialSelectedPath || hasInitializedRef.current) {
 			return;
 		}
 		hasInitializedRef.current = true;
-		const chain = buildPathChain(initialPath);
+		const chain = buildPathChain(initialSelectedPath);
 		setExpanded((prev) => {
 			const next = { ...prev } as ExpandedNodePaths;
 			for (const path of chain) {
@@ -389,60 +457,63 @@ export const FilePickerTree = forwardRef<
 			}
 			return next;
 		});
-		const target = chain[chain.length - 1] || initialPath;
+		const target = chain[chain.length - 1] || initialSelectedPath;
 		setFocusedPath(target);
 		setSelectedPath(target);
-		if (onLoadChildren) {
-			void expandToPath(initialPath);
-		}
-	}, [initialPath, expandToPath, onLoadChildren]);
+		void expandToPath(initialSelectedPath);
+	}, [initialSelectedPath, expandToPath]);
 
 	useEffect(() => {
 		const target = pendingInitialExpandRef.current;
-		if (!target || !onLoadChildren || files.length === 0) {
+		if (!target || treeFiles.length === 0) {
 			return;
 		}
 		pendingInitialExpandRef.current = null;
 		void expandToPath(target);
-	}, [files, expandToPath, onLoadChildren]);
+	}, [treeFiles, expandToPath]);
 
 	useEffect(() => {
 		if (!focusedPath) {
-			if (files.length > 0) {
-				const firstPath = generatePath(files[0]);
+			if (treeFiles.length > 0) {
+				const firstPath = generatePath(treeFiles[0]);
 				setFocusedPath(firstPath);
 			}
 			return;
 		}
-		if (renamingPath && renamingPath === focusedPath) {
+		if (effectiveRenamingPath && effectiveRenamingPath === focusedPath) {
 			return;
 		}
-		if (!autoFocus) {
+		if (false) {
 			return;
 		}
 		focusDomNode(focusedPath);
 	}, [
-		autoFocus,
-		files,
+		treeFiles,
 		focusedPath,
 		generatePath,
-		renamingPath,
+		effectiveRenamingPath,
 		focusDomNode,
 	]);
 
 	useEffect(() => {
-		if (!onLoadChildren || files.length === 0) {
+		if (treeFiles.length === 0) {
 			return;
 		}
-		const rootNode = files[0];
-		if (rootNode?.type !== 'folder' || rootNode.name !== '/') {
+		const rootNode = treeFiles[0];
+		if (rootNode?.type !== 'folder') {
 			return;
 		}
-		setExpanded((prev) => (prev['/'] ? prev : { ...prev, '/': true }));
-		if (!lazyChildrenRef.current['/'] && !loadingPathsRef.current['/']) {
-			void loadChildrenForPath('/', rootNode);
+		const rootPath = rootNode.name;
+		setExpanded((prev) =>
+			prev[rootPath] ? prev : { ...prev, [rootPath]: true }
+		);
+		if (
+			!lazyChildrenRef.current[rootPath] &&
+			!loadingPathsRef.current[rootPath]
+		) {
+			void loadChildrenForPath(rootPath, rootNode);
 		}
-	}, [files, onLoadChildren, loadChildrenForPath]);
+	}, [treeFiles, loadChildrenForPath]);
 
 	useEffect(() => {
 		return () => {
@@ -454,6 +525,107 @@ export const FilePickerTree = forwardRef<
 
 	const [searchBuffer, setSearchBuffer] = useState('');
 
+	// remove duplicate handle; unified handle is defined above
+
+	const handleInternalContextMenu = (
+		event: React.MouseEvent,
+		node: FileNode,
+		path: string
+	) => {
+		event.preventDefault();
+		event.stopPropagation();
+		setRenamingAbsolutePath(null);
+		setContextMenu({
+			absPath: path,
+			type: node.type,
+			x: event.clientX,
+			y: event.clientY,
+		});
+	};
+
+	const findAvailableName = async (baseDir: string, baseName: string) => {
+		let name = baseName;
+		let counter = 0;
+		const splitExt = (n: string) => {
+			const dot = n.lastIndexOf('.');
+			if (dot > 0) return { stem: n.slice(0, dot), ext: n.slice(dot) };
+			return { stem: n, ext: '' };
+		};
+		const prefix = baseDir === '/' ? '' : baseDir;
+		while (
+			(await filesystem?.fileExists(`${prefix}/${name}`)) ||
+			(await filesystem?.isDir(`${prefix}/${name}`))
+		) {
+			counter += 1;
+			const { stem, ext } = splitExt(baseName);
+			name = `${stem} (${counter})${ext}`;
+		}
+		return name;
+	};
+
+	const createNode = async (
+		absSelectedPath: string | undefined,
+		type: 'file' | 'folder',
+		initialName: string
+	) => {
+		if (!filesystem) return;
+		let base = absSelectedPath || selectedPath || normalizedRoot;
+		// Ensure base is directory
+		try {
+			if (!(await filesystem.isDir(base))) {
+				base = dirname(base);
+			}
+		} catch {
+			base = dirname(base);
+		}
+		const normalizedBase = base;
+		const name = await findAvailableName(normalizedBase, initialName);
+		const tempPath = joinPaths(normalizedBase, name);
+		if (type === 'folder') {
+			await filesystem.mkdir(tempPath);
+		} else {
+			await filesystem.writeFile(tempPath, '');
+		}
+		pendingCreateRef.current = { type, tempPath };
+		setRenamingAbsolutePath(tempPath);
+		await refreshChildren(normalizedBase);
+		// Focus new node
+		setTimeout(() => {
+			setFocusedPath(tempPath);
+			focusDomNode(tempPath);
+		}, 0);
+	};
+
+	const handleDeletePath = async (
+		absSelectedPath: string,
+		type: 'file' | 'folder'
+	) => {
+		if (!filesystem) return;
+		const normalized = absSelectedPath;
+		setContextMenu(null);
+		try {
+			if (type === 'folder') {
+				await filesystem.rmdir(normalized, { recursive: true } as any);
+			} else {
+				await filesystem.unlink(normalized);
+			}
+		} catch {
+			// ignore
+		} finally {
+			setRenamingAbsolutePath(null);
+			const parentDir = dirname(normalized);
+			await refreshChildren(parentDir);
+			// If current selection was removed, notify parent
+			if (
+				selectedPath &&
+				(selectedPath === normalized ||
+					selectedPath.startsWith(`${normalized}/`))
+			) {
+				onSelect(null);
+			}
+		}
+	};
+
 	const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
 		if (event.key.length === 1 && event.key.match(/\S/)) {
 			const newSearchBuffer = searchBuffer + event.key.toLowerCase();
@@ -505,25 +677,131 @@ export const FilePickerTree = forwardRef<
 		}
 	};
 
-	if (error) {
-		return (
-			<div className={css['errorContainer']}>
-				<h2>Error loading files</h2>
-				<p>{error}</p>
-			</div>
-		);
-	}
+	// No explicit error UI; upstream can handle errors in filesystem
+
+	// Filesystem-mode rename handlers
+	const handleRename = async (path: string, newName: string) => {
+		const pending = pendingCreateRef.current;
+		const isPending = pending?.tempPath === path;
+		const parent = dirname(path);
+		const sanitized = (newName || '').trim();
+		if (!isValidNameSegment(sanitized)) {
+			if (isPending) {
+				try {
+					if (pending.type === 'folder') {
+						await filesystem.rmdir(path, {
+							recursive: true,
+						} as any);
+					} else {
+						await filesystem.unlink(path);
+					}
+				} catch {
+					/* noop */
+				}
+				pendingCreateRef.current = null;
+			}
+			setRenamingAbsolutePath(isPending ? null : path);
+			return;
+		}
+		let candidate = joinPaths(parent, sanitized);
+		let candidateNormalized = candidate;
+		if (candidateNormalized === path) {
+			setRenamingAbsolutePath(null);
+			if (isPending) pendingCreateRef.current = null;
+			setTimeout(() => {
+				setFocusedPath(candidateNormalized);
+				focusDomNode(candidateNormalized);
+			}, 0);
+			return;
+		}
+		const exists = await filesystem.fileExists(candidateNormalized);
+		const existsDir = await filesystem.isDir(candidateNormalized);
+		if ((exists || existsDir) && candidateNormalized !== path) {
+			if (isPending) {
+				try {
+					const unique = await findAvailableName(
+						parent === '/' ? '/' : parent,
+						sanitized
+					);
+					candidate = joinPaths(parent, unique);
+					candidateNormalized = candidate;
+				} catch {
+					/* noop */
+				}
+			} else {
+				setRenamingAbsolutePath(path);
+				return;
+			}
+		}
+		let candidateIsDir = pending?.type === 'folder';
+		try {
+			await filesystem.mv(path, candidate);
+			if (!pending) {
+				const isDir = await filesystem.isDir(candidate);
+				candidateIsDir = isDir;
+			}
+			if (candidateIsDir) {
+				remapPathState(path, candidateNormalized);
+			}
+			if (selectedPath === path) {
+				onSelect(candidateNormalized);
+			}
+			await refreshChildren(parent);
+			setFocusedPath(candidateNormalized);
+			focusDomNode(candidateNormalized);
+		} catch {
+			if (isPending) {
+				try {
+					if (pending?.type === 'folder') {
+						await filesystem.rmdir(path, {
+							recursive: true,
+						} as any);
+					} else {
+						await filesystem.unlink(path);
+					}
+				} catch {
+					/* noop */
+				}
+			}
+		} finally {
+			pendingCreateRef.current = null;
+			setRenamingAbsolutePath(null);
+		}
+	};
+
+	const handleRenameCancelInternal = async (path: string) => {
+		const pending = pendingCreateRef.current;
+		if (!filesystem || pending?.tempPath !== path) {
+			setRenamingAbsolutePath((prev) => (prev === path ? null : prev));
+			return;
+		}
+		try {
+			if (pending.type === 'folder') {
+				await filesystem.rmdir(path, { recursive: true } as any);
+			} else {
+				await filesystem.unlink(path);
+			}
+		} catch {
+			/* noop */
+		}
+		pendingCreateRef.current = null;
+		setRenamingAbsolutePath(null);
+		const parentDir = dirname(path);
+		await refreshChildren(parentDir);
+		setFocusedPath(parentDir);
+		focusDomNode(parentDir);
+	};
 
 	return (
 		<div onKeyDown={handleKeyDown} ref={containerRef}>
 			<TreeGrid className={css['filePickerTree']}>
-				{files.map((file, index) => (
+				{treeFiles.map((file, index) => (
 					<NodeRow
 						key={file.name}
 						node={file}
 						level={0}
 						position={index + 1}
-						setSize={files.length}
+						setSize={treeFiles.length}
 						expandedNodePaths={expanded}
 						onToggle={toggleNode}
 						selectedNode={selectedPath}
@@ -532,13 +810,89 @@ export const FilePickerTree = forwardRef<
 						selectPath={selectPath}
 						generatePath={generatePath}
 						getChildren={getResolvedChildren}
-						onContextMenu={onContextMenu}
-						renamingPath={renamingPath}
-						onRename={onRename}
-						onRenameCancel={onRenameCancel}
+						onContextMenu={handleInternalContextMenu}
+						renamingPath={effectiveRenamingPath}
+						onRename={handleRename}
+						onRenameCancel={handleRenameCancelInternal}
 					/>
 				))}
 			</TreeGrid>
+			{contextMenu && (
+				<Popover
+					placement="bottom-start"
+					onClose={() => setContextMenu(null)}
+					anchor={{
+						getBoundingClientRect: () => ({
+							x: contextMenu.x,
+							y: contextMenu.y,
+							width: 0,
+							height: 0,
+							top: contextMenu.y,
+							left: contextMenu.x,
+							right: contextMenu.x,
+							bottom: contextMenu.y,
+							toJSON: () => ({}),
+						}),
+						ownerDocument: document,
+					}}
+					noArrow={true}
+					resize={false}
+					focusOnMount="firstElement"
+				>
+					<NavigableMenu role="menu">
+						{contextMenu.type === 'folder' && (
+							<MenuItem
+								role="menuitem"
+								onClick={async () => {
+									setContextMenu(null);
+									await createNode(
+										contextMenu.absPath,
+										'file',
+										'untitled.php'
+									);
+								}}
+							>
+								Create file
+							</MenuItem>
+						)}
+						{contextMenu.type === 'folder' && (
+							<MenuItem
+								role="menuitem"
+								onClick={async () => {
+									setContextMenu(null);
+									await createNode(
+										contextMenu.absPath,
+										'folder',
+										'New Folder'
+									);
+								}}
+							>
+								Create directory
+							</MenuItem>
+						)}
+						<MenuItem
+							role="menuitem"
+							onClick={() => {
+								setContextMenu(null);
+								setRenamingAbsolutePath(contextMenu.absPath);
+							}}
+						>
+							Rename
+						</MenuItem>
+						<MenuItem
+							role="menuitem"
+							onClick={() =>
+								handleDeletePath(
+									contextMenu.absPath,
+									contextMenu.type
+								)
+							}
+						>
+							Delete
+						</MenuItem>
+					</NavigableMenu>
+				</Popover>
+			)}
 		</div>
 	);
 });
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
index 1f847ba170..3abcb60999 100644
--- a/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
+++ b/packages/playground/website/src/php-playground/components/file-explorer/FileExplorerSidebar.tsx
@@ -1,9 +1,10 @@
 import React, { useMemo, useRef, useState } from 'react';
 import styles from './FileExplorer.module.css';
-import PlaygroundFilePickerTree, {
-	type AsyncFilesystem,
-	type PlaygroundFilePickerTreeRef,
-} from './PlaygroundFilePickerTree';
+import { FilePickerTree } from '@wp-playground/components';
+import type {
+	AsyncFilesystem,
+	FilePickerTreeHandle,
+} from '@wp-playground/components';
 import { useAppDispatch } from '../../hooks';
 import { setCode, setCurrentPath } from '../../store';
 import { DEFAULT_WORKSPACE_DIR } from '../../constants';
@@ -71,7 +72,7 @@ export default function FileExplorerSidebar({
 	forceSelectedPath: string | null;
 	setForceSelectedPath: React.Dispatch<React.SetStateAction<string | null>>;
 }) {
-	const treeRef = useRef<PlaygroundFilePickerTreeRef | null>(null);
+	const treeRef = useRef<FilePickerTreeHandle | null>(null);
 	const dispatch = useAppDispatch();
 
 	// Only set initial path once to prevent jumping between directories
@@ -112,7 +113,8 @@ export default function FileExplorerSidebar({
 					<button
 						className={styles.fileExplorerButton}
 						onClick={() =>
-							treeRef.current?.createFile(
+							treeRef.current &&
+							treeRef.current.createFile(
 								lastSelectedPath ?? undefined
 							)
 						}
@@ -123,9 +125,11 @@ export default function FileExplorerSidebar({
 					<button
 						className={styles.fileExplorerButton}
 						onClick={() => {
-							treeRef.current?.createFolder(
-								lastSelectedPath ?? undefined
-							);
+							if (treeRef.current) {
+								treeRef.current.createFolder(
+									lastSelectedPath ?? undefined
+								);
+							}
 						}}
 						title="Create new folder"
 					>
@@ -134,12 +138,12 @@ export default function FileExplorerSidebar({
 				</div>
 			</div>
 			<div className={styles.fileExplorerTree}>
-				<PlaygroundFilePickerTree
+				<FilePickerTree
 					ref={treeRef}
-					filesystem={filesystem ?? undefined}
+					filesystem={filesystem}
 					root={root}
 					key={root}
-					initialPath={treeInitialPath}
+					initialSelectedPath={treeInitialPath}
 					// excludePaths={['/dev', '/internal', '/proc', '/request']}
 					onSelect={async (path) => {
 						setLastSelectedPath(path);
diff --git a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx b/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
deleted file mode 100644
index deff9e5cbe..0000000000
--- a/packages/playground/website/src/php-playground/components/file-explorer/PlaygroundFilePickerTree.tsx
+++ /dev/null
@@ -1,628 +0,0 @@
-import React, {
-	forwardRef,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import type { FileNode, FilePickerTreeHandle } from '@wp-playground/components';
-import { FilePickerTree as CoreFilePickerTree } from '@wp-playground/components';
-import styles from './FileExplorer.module.css';
-import saveAs from 'file-saver';
-import { zipDirectory } from '@wp-playground/common';
-import { basename, dirname, joinPaths, normalizePath } from '@php-wasm/util';
-import { Popover, NavigableMenu, MenuItem } from '@wordpress/components';
-
-async function listDir(filesystem: AsyncFilesystem, path: string) {
-	const names = await filesystem.listFiles(path);
-	const results: { name: string; type: 'file' | 'folder' }[] = [];
-	for (const name of names) {
-		const childPath = path === '/' ? `/${name}` : `${path}/${name}`;
-		const isDirectory = await filesystem.isDir(childPath);
-		results.push({ name, type: isDirectory ? 'folder' : 'file' });
-	}
-	return results.sort((a, b) => {
-		if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
-		return a.name.localeCompare(b.name);
-	});
-}
-
-export interface PlaygroundFilePickerTreeRef {
-	createFile: (absSelectedPath?: string) => void;
-	createFolder: (absSelectedPath?: string) => void;
-	refresh: () => Promise<void>;
-}
-
-export interface AsyncFilesystem {
-	isDir: (path: string) => Promise<boolean>;
-	fileExists: (path: string) => Promise<boolean>;
-	readFileAsBuffer: (path: string) => Promise<Uint8Array>;
-	readFileAsText: (path: string) => Promise<string>;
-	listFiles: (path: string) => Promise<string[]>;
-	writeFile: (path: string, data: Uint8Array | string) => Promise<void>;
-	mkdir: (path: string) => Promise<void>;
-	rmdir: (path: string, options?: { recursive?: boolean }) => Promise<void>;
-	mv: (source: string, destination: string) => Promise<void>;
-	unlink: (path: string) => Promise<void>;
-}
-
-export type PlaygroundFilePickerTreeProps = {
-	root?: string;
-	initialPath?: string;
-	excludePaths?: string[];
-	onSelect?: (path: string | null) => void;
-	filesystem: AsyncFilesystem;
-};
-
-const isValidNameSegment = (name: string) => {
-	if (!name) {
-		return false;
-	}
-	if (name === '.' || name === '..') {
-		return false;
-	}
-	return !/[\\/]/.test(name);
-};
-
-const PlaygroundFilePickerTree = forwardRef<
-	PlaygroundFilePickerTreeRef,
-	PlaygroundFilePickerTreeProps
->(function PlaygroundFilePickerTree(
-	{ root = '/wordpress', initialPath, excludePaths, onSelect, filesystem },
-	ref
-) {
-	const normalizedRoot = useMemo(() => normalizePath(root), [root]);
-	const [files, setFiles] = useState<FileNode[]>([]);
-	const [contextMenu, setContextMenu] = useState<{
-		absPath: string;
-		type: 'file' | 'folder';
-		x: number;
-		y: number;
-	} | null>(null);
-	const [renamingAbsolutePath, setRenamingAbsolutePath] = useState<
-		string | null
-	>(null);
-	const treeRef = useRef<FilePickerTreeHandle>(null);
-	const pendingCreateRef = useRef<{
-		type: 'file' | 'folder';
-		tempPath: string;
-	} | null>(null);
-	const isMountedRef = useRef(true);
-
-	useEffect(() => {
-		return () => {
-			isMountedRef.current = false;
-		};
-	}, []);
-
-	const reloadTopLevel = async () => {
-		try {
-			const entries = await listDir(filesystem, normalizedRoot);
-			const excludeSet = new Set(excludePaths ?? []);
-			const filtered = entries.filter((item) => {
-				const childAbs = `/${item.name}`;
-				return !excludeSet.has(childAbs);
-			});
-			if (isMountedRef.current) {
-				setFiles(filtered as FileNode[]);
-			}
-		} catch {
-			if (isMountedRef.current) {
-				setFiles([]);
-			}
-		}
-	};
-
-	useEffect(() => {
-		void reloadTopLevel();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const pathToRelative = (path: string) => {
-		return (
-			path.startsWith(normalizedRoot)
-				? path.slice(normalizedRoot.length)
-				: path
-		).replace(/^\//, '');
-	};
-
-	const relativeInitialPath = useMemo(
-		() => (initialPath ? pathToRelative(initialPath) : undefined),
-		[initialPath, normalizedRoot]
-	);
-
-	const pathToAbsolute = (path: string) => {
-		return joinPaths(normalizedRoot, path);
-	};
-
-	// Dismiss context menu on outside interactions / ESC key
-	useEffect(() => {
-		if (!contextMenu) {
-			return;
-		}
-		const handleClose = () => setContextMenu(null);
-		const handleKey = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') {
-				handleClose();
-			}
-		};
-		window.addEventListener('click', handleClose);
-		window.addEventListener('contextmenu', handleClose);
-		window.addEventListener('keydown', handleKey);
-		return () => {
-			window.removeEventListener('click', handleClose);
-			window.removeEventListener('contextmenu', handleClose);
-			window.removeEventListener('keydown', handleKey);
-		};
-	}, [contextMenu]);
-
-	const handleLoadChildren = async (relativePath: string) => {
-		const absDirPath = pathToAbsolute(relativePath);
-		const items = await listDir(filesystem, absDirPath);
-		const filtered = items.filter((item) => {
-			const childAbs =
-				absDirPath === '/'
-					? `/${item.name}`
-					: `${absDirPath}/${item.name}`;
-			return !excludePaths?.includes(childAbs);
-		});
-		return filtered;
-	};
-
-	const getAbsoluteSelectedPath = () => {
-		const relative = treeRef.current?.getSelectedPath() || null;
-		return relative ? pathToAbsolute(relative) : null;
-	};
-	const handleSelect = (path: string) => {
-		const abs = pathToAbsolute(path);
-		onSelect?.(abs);
-	};
-
-	const handleInternalContextMenu = (
-		event: React.MouseEvent,
-		node: FileNode,
-		path: string
-	) => {
-		event.preventDefault();
-		event.stopPropagation();
-		const absPath = pathToAbsolute(path);
-		setRenamingAbsolutePath(null);
-		setContextMenu({
-			absPath: absPath,
-			type: node.type,
-			x: event.clientX,
-			y: event.clientY,
-		});
-	};
-
-	const handleContextMenuRename = (targetPath: string) => {
-		setContextMenu(null);
-		setRenamingAbsolutePath(targetPath);
-	};
-
-	const findAvailableName = async (baseDir: string, baseName: string) => {
-		let name = baseName;
-		let counter = 0;
-		const splitExt = (n: string) => {
-			const dot = n.lastIndexOf('.');
-			if (dot > 0) {
-				return { stem: n.slice(0, dot), ext: n.slice(dot) };
-			}
-			return { stem: n, ext: '' };
-		};
-		const prefix = baseDir === '/' ? '' : baseDir;
-		while (
-			(await filesystem?.fileExists(`${prefix}/${name}`)) ||
-			(await filesystem?.isDir(`${prefix}/${name}`))
-		) {
-			counter += 1;
-			const { stem, ext } = splitExt(baseName);
-			name = `${stem} (${counter})${ext}`;
-		}
-		return name;
-	};
-
-	const handleCreateFile = async (absSelectedPath?: string) =>
-		await handleCreateNode(absSelectedPath, 'file', 'untitled.php');
-
-	const handleCreateDirectory = async (absSelectedPath?: string) =>
-		await handleCreateNode(absSelectedPath, 'folder', 'New Folder');
-
-	const handleCreateNode = async (
-		absSelectedPath: string | undefined,
-		type: 'file' | 'folder',
-		initialName: string
-	) => {
-		absSelectedPath = absSelectedPath || getAbsoluteSelectedPath() || root;
-
-		// Resolve the parent directory of the new node – either the
-		// currently selected directory or its first existing parent.
-		let nodeParent = absSelectedPath;
-		while (true) {
-			if (nodeParent === '/') {
-				break;
-			}
-			if (await filesystem?.isDir(nodeParent)) {
-				break;
-			}
-			nodeParent = dirname(nodeParent);
-		}
-
-		const normalizedBase = normalizePath(nodeParent);
-		const name = await findAvailableName(normalizedBase, initialName);
-		const tempPath = joinPaths(normalizedBase, name);
-		if (type === 'folder') {
-			await filesystem.mkdir(tempPath);
-		} else {
-			await filesystem.writeFile(tempPath, '');
-		}
-		pendingCreateRef.current = { type, tempPath };
-		setRenamingAbsolutePath(tempPath);
-		if (normalizedBase === normalizedRoot) {
-			await reloadTopLevel();
-		} else if (treeRef.current) {
-			await treeRef.current.expandToPath(pathToRelative(normalizedBase));
-			await treeRef.current.refresh(pathToRelative(normalizedBase));
-		}
-		const relativeTempPath = pathToRelative(tempPath);
-		if (treeRef.current && relativeTempPath) {
-			const focusLater = normalizedRoot === '/' && normalizedBase === '/';
-			const focusAction = () => {
-				treeRef.current?.focusPath(relativeTempPath, { notify: false });
-			};
-			if (focusLater) {
-				setTimeout(focusAction, 0);
-			} else {
-				focusAction();
-			}
-		}
-	};
-
-	useImperativeHandle(
-		ref,
-		() => ({
-			createFile: handleCreateFile,
-			createFolder: handleCreateDirectory,
-			refresh: reloadTopLevel,
-		}),
-		[]
-	);
-
-	const handleDeletePath = async (
-		absSelectedPath: string,
-		type: 'file' | 'folder'
-	) => {
-		const normalized = normalizePath(absSelectedPath);
-		setContextMenu(null);
-		try {
-			if (type === 'folder') {
-				await filesystem.rmdir(normalized, {
-					recursive: true,
-				} as any);
-			} else {
-				await filesystem.unlink(normalized);
-			}
-		} catch {
-			// Ignore failure
-		} finally {
-			setRenamingAbsolutePath(null);
-			const parentDir = dirname(normalized);
-			const relativeParentPath = pathToRelative(parentDir);
-			if (parentDir === normalizedRoot) {
-				await reloadTopLevel();
-			} else if (treeRef.current) {
-				await treeRef.current.refresh(relativeParentPath);
-				if (relativeParentPath) {
-					treeRef.current.focusPath(relativeParentPath, {
-						notify: false,
-					});
-				}
-			}
-			// Notify parent if deleted current file or a parent directory
-			const currentAbs = getAbsoluteSelectedPath();
-			if (
-				currentAbs &&
-				(currentAbs === normalized ||
-					currentAbs.startsWith(`${normalized}/`))
-			) {
-				onSelect?.(null);
-			}
-		}
-	};
-
-	const handleDownloadPath = async (absSelectedPath: string) => {
-		setContextMenu(null);
-		const normalized = normalizePath(absSelectedPath);
-		const baseName = basename(normalized) || 'download';
-		const isDir = await filesystem.isDir(normalized);
-		if (isDir) {
-			const bytes = await zipDirectory(filesystem as any, normalized);
-			saveAs(new File([bytes], `${baseName}.zip`));
-			return;
-		}
-		const data = await filesystem.readFileAsBuffer(normalized);
-		saveAs(new File([data], baseName));
-	};
-
-	return (
-		<>
-			<CoreFilePickerTree
-				ref={treeRef}
-				files={files}
-				initialPath={relativeInitialPath}
-				onSelect={handleSelect}
-				onLoadChildren={handleLoadChildren}
-				autoFocus={false}
-				renamingPath={
-					renamingAbsolutePath
-						? pathToRelative(renamingAbsolutePath)
-						: undefined
-				}
-				onRename={async (relativePath, newName) => {
-					const absPath = pathToAbsolute(relativePath);
-					const pending = pendingCreateRef.current;
-					const isPending = pending?.tempPath === absPath;
-					const parent = dirname(absPath);
-					const relativeParentPath = pathToRelative(parent);
-					const relativeOriginalPath = pathToRelative(absPath);
-					const sanitized = (newName || '').trim();
-					if (!isValidNameSegment(sanitized)) {
-						if (isPending) {
-							try {
-								if (pending.type === 'folder') {
-									await filesystem.rmdir(absPath, {
-										recursive: true,
-									} as any);
-								} else {
-									await filesystem.unlink(absPath);
-								}
-							} catch (e) {
-								void e;
-							}
-							pendingCreateRef.current = null;
-						}
-						setRenamingAbsolutePath(isPending ? null : absPath);
-						return;
-					}
-
-					const composePath = (name: string) =>
-						parent === '/' ? `/${name}` : `${parent}/${name}`;
-					let candidate = composePath(sanitized);
-					let candidateNormalized = normalizePath(candidate);
-					if (candidateNormalized === absPath) {
-						setRenamingAbsolutePath(null);
-						if (isPending) {
-							pendingCreateRef.current = null;
-						}
-						const relativeCandidateSamePath =
-							pathToRelative(candidateNormalized);
-						if (relativeCandidateSamePath) {
-							setTimeout(() => {
-								treeRef.current?.focusPath(
-									relativeCandidateSamePath,
-									{
-										notify: false,
-									}
-								);
-							}, 0);
-						}
-						return;
-					}
-
-					const exists = await filesystem.fileExists(
-						candidateNormalized
-					);
-					const existsDir = await filesystem.isDir(
-						candidateNormalized
-					);
-					if (
-						(exists || existsDir) &&
-						candidateNormalized !== absPath
-					) {
-						if (isPending) {
-							try {
-								const unique = await findAvailableName(
-									parent === '/' ? '/' : parent,
-									sanitized
-								);
-								candidate = composePath(unique);
-								candidateNormalized = normalizePath(candidate);
-							} catch (e) {
-								void e;
-							}
-						} else {
-							setRenamingAbsolutePath(absPath);
-							return;
-						}
-					}
-
-					const relativeCandidatePath =
-						pathToRelative(candidateNormalized);
-					let candidateIsDir = pending?.type === 'folder';
-					try {
-						await filesystem.mv(absPath, candidate as any);
-						if (!pending) {
-							const isDir = await filesystem.isDir(
-								candidate as any
-							);
-							candidateIsDir = isDir;
-						}
-						if (
-							candidateIsDir &&
-							treeRef.current &&
-							relativeOriginalPath &&
-							relativeCandidatePath
-						) {
-							treeRef.current.remapPath(
-								relativeOriginalPath,
-								relativeCandidatePath
-							);
-						}
-						// If the currently selected path was renamed, notify parent with the new path
-						const currentAbs = getAbsoluteSelectedPath();
-						if (currentAbs === absPath) {
-							onSelect?.(normalizePath(candidate));
-						}
-
-						if (parent === normalizedRoot) {
-							await reloadTopLevel();
-						} else if (treeRef.current) {
-							await treeRef.current.refresh(relativeParentPath);
-						}
-						if (relativeCandidatePath) {
-							treeRef.current?.focusPath(relativeCandidatePath, {
-								notify: false,
-							});
-						}
-					} catch {
-						if (isPending) {
-							try {
-								if (pending?.type === 'folder') {
-									await filesystem.rmdir(absPath, {
-										recursive: true,
-									} as any);
-								} else {
-									await filesystem.unlink(absPath);
-								}
-							} catch {
-								// Ignore failure
-							}
-						}
-					} finally {
-						pendingCreateRef.current = null;
-						setRenamingAbsolutePath(null);
-					}
-				}}
-				onRenameCancel={async (relativePath) => {
-					const absPath = pathToAbsolute(relativePath);
-					const pending = pendingCreateRef.current;
-					if (!filesystem || pending?.tempPath !== absPath) {
-						setRenamingAbsolutePath((prev) =>
-							prev === absPath ? null : prev
-						);
-						return;
-					}
-					try {
-						if (pending.type === 'folder') {
-							await filesystem.rmdir(absPath, {
-								recursive: true,
-							} as any);
-						} else {
-							await filesystem.unlink(absPath);
-						}
-					} catch (e) {
-						void e;
-					}
-					pendingCreateRef.current = null;
-					setRenamingAbsolutePath(null);
-					const parentDir = dirname(absPath);
-					const relativeParentPath = pathToRelative(parentDir);
-					if (parentDir === normalizedRoot) {
-						await reloadTopLevel();
-					} else if (treeRef.current) {
-						await treeRef.current.refresh(relativeParentPath);
-					}
-					if (relativeParentPath) {
-						const focusLater =
-							normalizedRoot === '/' && parentDir === '/';
-						const focusAction = () =>
-							treeRef.current?.focusPath(relativeParentPath, {
-								notify: false,
-							});
-						if (focusLater) {
-							setTimeout(focusAction, 0);
-						} else {
-							focusAction();
-						}
-					}
-				}}
-				onContextMenu={handleInternalContextMenu}
-			/>
-			{contextMenu && (
-				<Popover
-					placement="bottom-start"
-					onClose={() => setContextMenu(null)}
-					anchor={{
-						getBoundingClientRect: () => ({
-							x: contextMenu.x,
-							y: contextMenu.y,
-							width: 0,
-							height: 0,
-							top: contextMenu.y,
-							left: contextMenu.x,
-							right: contextMenu.x,
-							bottom: contextMenu.y,
-							toJSON: () => ({}),
-						}),
-						ownerDocument: document,
-					}}
-					noArrow={true}
-					resize={false}
-					focusOnMount="firstElement"
-				>
-					<NavigableMenu role="menu">
-						{contextMenu.type === 'folder' && (
-							<MenuItem
-								role="menuitem"
-								className={styles.contextMenuButton}
-								onClick={async () => {
-									setContextMenu(null);
-									await handleCreateFile(contextMenu.absPath);
-								}}
-							>
-								Create file
-							</MenuItem>
-						)}
-						{contextMenu.type === 'folder' && (
-							<MenuItem
-								role="menuitem"
-								className={styles.contextMenuButton}
-								onClick={async () => {
-									setContextMenu(null);
-									await handleCreateDirectory(
-										contextMenu.absPath
-									);
-								}}
-							>
-								Create directory
-							</MenuItem>
-						)}
-						<MenuItem
-							role="menuitem"
-							className={styles.contextMenuButton}
-							onClick={() =>
-								handleContextMenuRename(contextMenu.absPath)
-							}
-						>
-							Rename
-						</MenuItem>
-						<MenuItem
-							role="menuitem"
-							className={`${styles.contextMenuButton} ${styles.contextMenuButtonDanger}`}
-							onClick={() =>
-								handleDeletePath(
-									contextMenu.absPath,
-									contextMenu.type
-								)
-							}
-						>
-							Delete
-						</MenuItem>
-						<MenuItem
-							role="menuitem"
-							className={styles.contextMenuButton}
-							onClick={() =>
-								handleDownloadPath(contextMenu.absPath)
-							}
-						>
-							Download
-						</MenuItem>
-					</NavigableMenu>
-				</Popover>
-			)}
-		</>
-	);
-});
-
-export default PlaygroundFilePickerTree;

From 974c268b0bf1e9d0703e1e02fb61666b2ae07f1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 30 Sep 2025 11:28:59 +0200
Subject: [PATCH 41/41] Drag&drop interaction

---
 .../components/src/FilePickerTree/index.tsx   | 525 +++++++++++++++++-
 .../src/FilePickerTree/style.module.css       |  18 +
 2 files changed, 542 insertions(+), 1 deletion(-)

diff --git a/packages/playground/components/src/FilePickerTree/index.tsx b/packages/playground/components/src/FilePickerTree/index.tsx
index c33f91fc14..5c2797dcf0 100644
--- a/packages/playground/components/src/FilePickerTree/index.tsx
+++ b/packages/playground/components/src/FilePickerTree/index.tsx
@@ -20,10 +20,51 @@ import '@wordpress/components/build-style/style.css';
 import css from './style.module.css';
 import classNames from 'classnames';
 import { file, folder } from '../icons';
-import { dirname, joinPaths } from '@php-wasm/util';
+import { basename, dirname, joinPaths } from '@php-wasm/util';
 
 type ExpandedNodePaths = Record<string, boolean>;
 
+type DropIndicatorState = 'valid' | 'invalid';
+
+type DropIndicator = {
+	path: string;
+	state: DropIndicatorState;
+};
+
+type DropEvaluation = {
+	allowed: boolean;
+	state: DropIndicatorState;
+	destination: string | null;
+};
+
+interface FileSystemEntryBaseLike {
+	readonly isFile: boolean;
+	readonly isDirectory: boolean;
+	readonly name: string;
+}
+
+interface FileSystemFileEntryLike extends FileSystemEntryBaseLike {
+	file: (
+		successCallback: (file: File) => void,
+		errorCallback?: (error: DOMException) => void
+	) => void;
+}
+
+interface FileSystemDirectoryReaderLike {
+	readEntries: (
+		successCallback: (entries: FileSystemEntryLike[]) => void,
+		errorCallback?: (error: DOMException) => void
+	) => void;
+}
+
+interface FileSystemDirectoryEntryLike extends FileSystemEntryBaseLike {
+	createReader: () => FileSystemDirectoryReaderLike;
+}
+
+type FileSystemEntryLike =
+	| FileSystemFileEntryLike
+	| FileSystemDirectoryEntryLike;
+
 export interface AsyncFilesystem {
 	isDir: (path: string) => Promise<boolean>;
 	fileExists: (path: string) => Promise<boolean>;
@@ -88,6 +129,29 @@ function buildPathChain(path: string): string[] {
 	return chain;
 }
 
+function isDescendantPath(ancestor: string, candidate: string) {
+	if (!ancestor || !candidate) return false;
+	if (ancestor === candidate) return false;
+	const normalizedAncestor =
+		ancestor === '/' ? '/' : ancestor.replace(/\/{2,}/g, '/');
+	const normalizedCandidate = candidate.replace(/\/{2,}/g, '/');
+	if (normalizedAncestor === '/') {
+		return (
+			normalizedCandidate.startsWith('/') && normalizedCandidate !== '/'
+		);
+	}
+	return normalizedCandidate.startsWith(`${normalizedAncestor}/`);
+}
+
+function remapSinglePath(value: string | null, from: string, to: string) {
+	if (!value) return value;
+	if (value === from) return to;
+	if (value.startsWith(from === '/' ? '/' : `${from}/`)) {
+		return to + value.slice(from.length);
+	}
+	return value;
+}
+
 export const FilePickerTree = forwardRef<
 	FilePickerTreeHandle,
 	FilePickerTreeProps
@@ -136,11 +200,29 @@ export const FilePickerTree = forwardRef<
 	const [loadingPaths, setLoadingPaths] = useState<Record<string, boolean>>(
 		{}
 	);
+	const [draggedPath, setDraggedPath] = useState<string | null>(null);
+	const [dropIndicator, setDropIndicator] = useState<DropIndicator | null>(
+		null
+	);
+	const dragExpandTimeoutsRef = useRef<Record<string, number>>({});
 
 	const containerRef = useRef<HTMLDivElement>(null);
 	const searchBufferTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 	const loadingPathsRef = useRef(loadingPaths);
 	const lazyChildrenRef = useRef(lazyChildren);
+	const clearAllDragExpandTimeouts = () => {
+		for (const key of Object.keys(dragExpandTimeoutsRef.current)) {
+			clearTimeout(dragExpandTimeoutsRef.current[key]);
+			delete dragExpandTimeoutsRef.current[key];
+		}
+	};
+	const cancelExpandOnDrag = (path: string) => {
+		const timeoutId = dragExpandTimeoutsRef.current[path];
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			delete dragExpandTimeoutsRef.current[path];
+		}
+	};
 
 	useEffect(() => {
 		loadingPathsRef.current = loadingPaths;
@@ -225,6 +307,28 @@ export const FilePickerTree = forwardRef<
 		});
 	};
 
+	const scheduleExpandOnDrag = (path: string, node: FileNode) => {
+		if (node.type !== 'folder') {
+			return;
+		}
+		if (typeof window === 'undefined') {
+			return;
+		}
+		if (dragExpandTimeoutsRef.current[path]) {
+			return;
+		}
+		dragExpandTimeoutsRef.current[path] = window.setTimeout(() => {
+			setExpanded((prev) => {
+				if (prev[path]) {
+					return prev;
+				}
+				return { ...prev, [path]: true };
+			});
+			void loadChildrenForPath(path, node);
+			delete dragExpandTimeoutsRef.current[path];
+		}, 600);
+	};
+
 	const refreshChildren = (path: string) => {
 		setLoadingPaths((prev) => ({ ...prev, [path]: true }));
 		return new Promise<FileNode[]>((resolve) => {
@@ -354,6 +458,12 @@ export const FilePickerTree = forwardRef<
 		});
 	};
 
+	const resetDragState = () => {
+		setDraggedPath(null);
+		setDropIndicator(null);
+		clearAllDragExpandTimeouts();
+	};
+
 	const selectPath = (path: string, notify = true) => {
 		setSelectedPath(path);
 		if (notify) {
@@ -520,6 +630,7 @@ export const FilePickerTree = forwardRef<
 			if (searchBufferTimeoutRef.current) {
 				clearTimeout(searchBufferTimeoutRef.current);
 			}
+			clearAllDragExpandTimeouts();
 		};
 	}, []);
 
@@ -527,6 +638,153 @@ export const FilePickerTree = forwardRef<
 
 	// remove duplicate handle; unified handle is defined above
 
+	const getDropDestinationDir = (node: FileNode, path: string) => {
+		if (node.type === 'folder') {
+			return path;
+		}
+		const parent = dirname(path);
+		if (!parent) {
+			return '/';
+		}
+		return parent || '/';
+	};
+
+	const evaluateDropTarget = (
+		node: FileNode,
+		path: string,
+		sourcePath: string | null
+	): DropEvaluation => {
+		const destinationDir = getDropDestinationDir(node, path);
+		if (!destinationDir) {
+			return { allowed: false, state: 'invalid', destination: null };
+		}
+		if (sourcePath) {
+			if (destinationDir === sourcePath) {
+				return { allowed: false, state: 'invalid', destination: null };
+			}
+			if (isDescendantPath(sourcePath, destinationDir)) {
+				return { allowed: false, state: 'invalid', destination: null };
+			}
+		}
+		return { allowed: true, state: 'valid', destination: destinationDir };
+	};
+
+	const handleNodeDragStart = (
+		event: React.DragEvent,
+		node: FileNode,
+		path: string
+	) => {
+		if (node.type !== 'folder' && node.type !== 'file') {
+			return;
+		}
+		setDraggedPath(path);
+		setDropIndicator(null);
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = 'move';
+			event.dataTransfer.setData(
+				'application/x-wp-playground-path',
+				path
+			);
+			event.dataTransfer.setData('text/plain', path);
+		}
+	};
+
+	const handleNodeDragEnd = () => {
+		resetDragState();
+	};
+
+	const handleNodeDragEnter = (
+		event: React.DragEvent,
+		node: FileNode,
+		path: string
+	) => {
+		const evaluation = evaluateDropTarget(node, path, draggedPath);
+		if (evaluation.allowed) {
+			if (node.type === 'folder') {
+				scheduleExpandOnDrag(path, node);
+			}
+		}
+		setDropIndicator((prev) => {
+			if (prev?.path === path && prev.state === evaluation.state) {
+				return prev;
+			}
+			return { path, state: evaluation.state };
+		});
+	};
+
+	const handleNodeDragOver = (
+		event: React.DragEvent,
+		node: FileNode,
+		path: string
+	) => {
+		const evaluation = evaluateDropTarget(node, path, draggedPath);
+		if (evaluation.allowed && evaluation.destination) {
+			event.preventDefault();
+			if (event.dataTransfer) {
+				event.dataTransfer.dropEffect = draggedPath ? 'move' : 'copy';
+			}
+			if (node.type === 'folder') {
+				scheduleExpandOnDrag(path, node);
+			}
+			setDropIndicator((prev) => {
+				if (prev?.path === path && prev.state === evaluation.state) {
+					return prev;
+				}
+				return { path, state: evaluation.state };
+			});
+		} else {
+			if (event.dataTransfer) {
+				event.dataTransfer.dropEffect = 'none';
+			}
+			cancelExpandOnDrag(path);
+			setDropIndicator((prev) => {
+				if (prev?.path === path && prev.state === 'invalid') {
+					return prev;
+				}
+				return { path, state: 'invalid' };
+			});
+		}
+	};
+
+	const handleNodeDragLeave = (
+		event: React.DragEvent,
+		node: FileNode,
+		path: string
+	) => {
+		cancelExpandOnDrag(path);
+		const related = event.relatedTarget as Node | null;
+		if (related && event.currentTarget.contains(related)) {
+			return;
+		}
+		setDropIndicator((prev) => (prev?.path === path ? null : prev));
+	};
+
+	const handleNodeDrop = async (
+		event: React.DragEvent,
+		node: FileNode,
+		path: string
+	) => {
+		const sourcePath = draggedPath;
+		const evaluation = evaluateDropTarget(node, path, sourcePath);
+		if (!evaluation.allowed || !evaluation.destination) {
+			resetDragState();
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		cancelExpandOnDrag(path);
+		setDropIndicator(null);
+		try {
+			if (sourcePath) {
+				await moveNode(sourcePath, evaluation.destination);
+			} else {
+				await importExternalItems(event, evaluation.destination);
+			}
+		} finally {
+			resetDragState();
+		}
+	};
+
 	const handleInternalContextMenu = (
 		event: React.MouseEvent,
 		node: FileNode,
@@ -596,6 +854,196 @@ export const FilePickerTree = forwardRef<
 		}, 0);
 	};
 
+	const pathExists = async (path: string) => {
+		if (!filesystem) return false;
+		try {
+			if (await filesystem.fileExists(path)) {
+				return true;
+			}
+		} catch {
+			// ignore
+		}
+		try {
+			if (await filesystem.isDir(path)) {
+				return true;
+			}
+		} catch {
+			// ignore
+		}
+		return false;
+	};
+
+	const ensureDirectory = async (path: string) => {
+		if (!filesystem) return;
+		try {
+			await filesystem.mkdir(path);
+		} catch (error) {
+			const exists = await filesystem.isDir(path).catch(() => false);
+			if (!exists) {
+				throw error;
+			}
+		}
+	};
+
+	const moveNode = async (sourcePath: string, destinationDir: string) => {
+		if (!filesystem) return;
+		const fileName = basename(sourcePath);
+		const destinationPath = joinPaths(destinationDir, fileName);
+		if (destinationPath === sourcePath) {
+			return;
+		}
+		if (await pathExists(destinationPath)) {
+			return;
+		}
+		const sourceParent = dirname(sourcePath);
+		try {
+			await filesystem.mv(sourcePath, destinationPath);
+			remapPathState(sourcePath, destinationPath);
+			const mappedSelected = remapSinglePath(
+				selectedPath,
+				sourcePath,
+				destinationPath
+			);
+			if (
+				selectedPath &&
+				(selectedPath === sourcePath ||
+					selectedPath.startsWith(`${sourcePath}/`))
+			) {
+				onSelect(mappedSelected);
+			}
+			setFocusedPath((prev) =>
+				remapSinglePath(prev, sourcePath, destinationPath)
+			);
+			setExpanded((prev) => ({
+				...prev,
+				[destinationDir]: true,
+			}));
+			await Promise.all([
+				refreshChildren(sourceParent),
+				refreshChildren(destinationDir),
+			]);
+			setSelectedPath((prev) =>
+				remapSinglePath(prev, sourcePath, destinationPath)
+			);
+			focusDomNode(destinationPath);
+		} catch {
+			// ignore move errors
+		}
+	};
+
+	const getEntryFromItem = (item: DataTransferItem) => {
+		const maybeItem = item as DataTransferItem & {
+			webkitGetAsEntry?: () => FileSystemEntryLike | null;
+		};
+		if (maybeItem.webkitGetAsEntry) {
+			return maybeItem.webkitGetAsEntry() as FileSystemEntryLike | null;
+		}
+		return null;
+	};
+
+	const fileFromEntry = (entry: FileSystemFileEntryLike) => {
+		return new Promise<File>((resolve, reject) => {
+			entry.file(resolve, reject);
+		});
+	};
+
+	const importFileBlob = async (file: File, destinationDir: string) => {
+		if (!filesystem) return;
+		const safeName = file.name || 'untitled';
+		const targetName = await findAvailableName(destinationDir, safeName);
+		const targetPath = joinPaths(destinationDir, targetName);
+		const buffer = new Uint8Array(await file.arrayBuffer());
+		await filesystem.writeFile(targetPath, buffer);
+	};
+
+	const importFileEntry = async (
+		entry: FileSystemFileEntryLike,
+		destinationDir: string
+	) => {
+		const file = await fileFromEntry(entry);
+		await importFileBlob(file, destinationDir);
+	};
+
+	const importDirectoryEntry = async (
+		entry: FileSystemDirectoryEntryLike,
+		destinationDir: string
+	) => {
+		const folderName = await findAvailableName(
+			destinationDir,
+			entry.name || 'New Folder'
+		);
+		const folderPath = joinPaths(destinationDir, folderName);
+		await ensureDirectory(folderPath);
+		const reader = entry.createReader();
+		const readEntries = () =>
+			new Promise<FileSystemEntryLike[]>((resolve, reject) => {
+				reader.readEntries(
+					(entries) => resolve(Array.from(entries)),
+					reject
+				);
+			});
+		while (true) {
+			const batch = await readEntries();
+			if (!batch.length) {
+				break;
+			}
+			for (const child of batch) {
+				if (child.isFile) {
+					await importFileEntry(
+						child as FileSystemFileEntryLike,
+						folderPath
+					);
+				} else if (child.isDirectory) {
+					await importDirectoryEntry(
+						child as FileSystemDirectoryEntryLike,
+						folderPath
+					);
+				}
+			}
+		}
+	};
+
+	const importExternalItems = async (
+		event: React.DragEvent,
+		destinationDir: string
+	) => {
+		if (!filesystem) return;
+		const items = event.dataTransfer?.items
+			? Array.from(event.dataTransfer.items)
+			: [];
+		const entries = items
+			.filter((item) => item.kind === 'file')
+			.map((item) => getEntryFromItem(item))
+			.filter((entry): entry is FileSystemEntryLike => Boolean(entry));
+		if (entries.length > 0) {
+			for (const entry of entries) {
+				if (entry.isFile) {
+					await importFileEntry(
+						entry as FileSystemFileEntryLike,
+						destinationDir
+					);
+				} else if (entry.isDirectory) {
+					await importDirectoryEntry(
+						entry as FileSystemDirectoryEntryLike,
+						destinationDir
+					);
+				}
+			}
+		} else {
+			const files = event.dataTransfer?.files
+				? Array.from(event.dataTransfer.files)
+				: [];
+			for (const file of files) {
+				await importFileBlob(file, destinationDir);
+			}
+		}
+		await refreshChildren(destinationDir);
+		setExpanded((prev) => ({
+			...prev,
+			[destinationDir]: true,
+		}));
+	};
+
 	const handleDeletePath = async (
 		absSelectedPath: string,
 		type: 'file' | 'folder'
@@ -814,6 +1262,14 @@ export const FilePickerTree = forwardRef<
 						renamingPath={effectiveRenamingPath}
 						onRename={handleRename}
 						onRenameCancel={handleRenameCancelInternal}
+						dropIndicator={dropIndicator}
+						onDragStart={handleNodeDragStart}
+						onDragEnd={handleNodeDragEnd}
+						onDragEnter={handleNodeDragEnter}
+						onDragOver={handleNodeDragOver}
+						onDragLeave={handleNodeDragLeave}
+						onDrop={handleNodeDrop}
+						rootPath={normalizedRoot}
 					/>
 				))}
 			</TreeGrid>
@@ -923,6 +1379,26 @@ const NodeRow: React.FC<{
 	onRename?: (path: string, newName: string) => void;
 	onRenameCancel?: (path: string) => void;
 	parentPath?: string;
+	dropIndicator: DropIndicator | null;
+	onDragStart?: (
+		event: React.DragEvent,
+		node: FileNode,
+		path: string
+	) => void;
+	onDragEnd?: (event: React.DragEvent, node: FileNode, path: string) => void;
+	onDragEnter?: (
+		event: React.DragEvent,
+		node: FileNode,
+		path: string
+	) => void;
+	onDragOver?: (event: React.DragEvent, node: FileNode, path: string) => void;
+	onDragLeave?: (
+		event: React.DragEvent,
+		node: FileNode,
+		path: string
+	) => void;
+	onDrop?: (event: React.DragEvent, node: FileNode, path: string) => void;
+	rootPath: string;
 }> = ({
 	node,
 	level,
@@ -941,6 +1417,14 @@ const NodeRow: React.FC<{
 	onRename,
 	onRenameCancel,
 	parentPath = '',
+	dropIndicator,
+	onDragStart,
+	onDragEnd,
+	onDragEnter,
+	onDragOver,
+	onDragLeave,
+	onDrop,
+	rootPath,
 }) => {
 	const path = generatePath(node, parentPath);
 	const isExpanded = expandedNodePaths[path];
@@ -948,6 +1432,20 @@ const NodeRow: React.FC<{
 	const renameInputRef = useRef<HTMLInputElement>(null);
 	const [renameValue, setRenameValue] = useState(node.name);
 	const renameHandledRef = useRef(false);
+	const isDropTarget = dropIndicator?.path === path;
+	const isDropTargetValid = isDropTarget && dropIndicator?.state === 'valid';
+	const isDropTargetInvalid =
+		isDropTarget && dropIndicator?.state === 'invalid';
+	const isDraggable = !isRenaming && path !== rootPath;
+
+	const dragHandlers = {
+		onDragEnter: (event: React.DragEvent) =>
+			onDragEnter?.(event, node, path),
+		onDragOver: (event: React.DragEvent) => onDragOver?.(event, node, path),
+		onDragLeave: (event: React.DragEvent) =>
+			onDragLeave?.(event, node, path),
+		onDrop: (event: React.DragEvent) => onDrop?.(event, node, path),
+	};
 
 	const resolvedChildren = getChildren(node, path) ?? [];
 
@@ -1084,10 +1582,15 @@ const NodeRow: React.FC<{
 												selectedNode === path,
 											[css['focused']]:
 												focusedNode === path,
+											[css['dropTarget']]:
+												isDropTargetValid,
+											[css['dropTargetInvalid']]:
+												isDropTargetInvalid,
 										}
 									)}
 									data-path={path}
 									onContextMenu={handleContextMenu}
+									{...dragHandlers}
 								>
 									<FileName
 										node={node}
@@ -1111,6 +1614,14 @@ const NodeRow: React.FC<{
 								</form>
 							) : (
 								<Button
+									{...dragHandlers}
+									draggable={isDraggable}
+									onDragStart={(event: any) =>
+										onDragStart?.(event, node, path)
+									}
+									onDragEnd={(event: any) =>
+										onDragEnd?.(event, node, path)
+									}
 									onClick={() => {
 										if (node.type === 'folder') {
 											toggleOpen();
@@ -1130,6 +1641,10 @@ const NodeRow: React.FC<{
 												selectedNode === path,
 											[css['focused']]:
 												focusedNode === path,
+											[css['dropTarget']]:
+												isDropTargetValid,
+											[css['dropTargetInvalid']]:
+												isDropTargetInvalid,
 										}
 									)}
 									data-path={path}
@@ -1169,6 +1684,14 @@ const NodeRow: React.FC<{
 						onRename={onRename}
 						onRenameCancel={onRenameCancel}
 						parentPath={path}
+						dropIndicator={dropIndicator}
+						onDragStart={onDragStart}
+						onDragEnd={onDragEnd}
+						onDragEnter={onDragEnter}
+						onDragOver={onDragOver}
+						onDragLeave={onDragLeave}
+						onDrop={onDrop}
+						rootPath={rootPath}
 					/>
 				))}
 		</>
diff --git a/packages/playground/components/src/FilePickerTree/style.module.css b/packages/playground/components/src/FilePickerTree/style.module.css
index d77df2acc6..aae9451a77 100644
--- a/packages/playground/components/src/FilePickerTree/style.module.css
+++ b/packages/playground/components/src/FilePickerTree/style.module.css
@@ -67,6 +67,24 @@
 	border-radius: 2px;
 }
 
+.dropTarget {
+	box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+}
+
+.dropTarget:not(.selected) {
+	background-color: rgba(0, 112, 201, 0.12);
+	color: var(--wp-components-color-foreground, #1e1e1e);
+}
+
+.dropTargetInvalid {
+	box-shadow: inset 0 0 0 2px #d63638;
+}
+
+.dropTargetInvalid:not(.selected) {
+	background-color: rgba(214, 54, 56, 0.12);
+	color: var(--wp-components-color-foreground, #1e1e1e);
+}
+
 .renaming {
 	align-items: center;
 }