adamziel · Sep 9, 2026 · Sep 6, 2026 · Sep 7, 2026 · Sep 8, 2026 · Sep 8, 2026
diff --git a/AGENTS.md b/AGENTS.md
@@ -176,6 +176,11 @@ Version-specific builds: `@php-wasm/web-7-4` through `@php-wasm/web-8-5` (and co
   when an operation leaves the surrounding pane visible. Keep progress inside an action button only
   when the button is the sole progress surface; do not show a second spinner or invent another loading
   container for the same operation.
+- **Dock tools:** Register destinations in `packages/playground/website/src/components/dock/tool-registry.tsx`.
+  Each entry owns its group, navigation labels/icon, pane copy/layout, and optional site-tool panel.
+  Developer tools use `group: 'developer'` and the shared `SiteToolPanelProps` interface; adapters for
+  existing tools live in `site-info-panel/site-tool-renderers.tsx`. The host mounts panels on first use
+  and retains them until the site changes. Do not add parallel navigation or routing lists.
 - **Path manipulation**: Never use ad-hoc string operations for file paths. Use
   the POSIX path utilities from `@php-wasm/util` (`joinPaths`, `dirname`,
   `basename`, `normalizePath`, `ensureAbsolutePath`, `resolvePathUnder`, etc.)

diff --git a/packages/playground/website/playwright/e2e/website-ui.spec.ts b/packages/playground/website/playwright/e2e/website-ui.spec.ts
@@ -245,6 +245,35 @@ test('should navigate from the address bar suggestions', async ({
 	await expect(address).toHaveValue('/wp-admin/');
 });
 
+test('should retain developer drafts and remember toolbar visibility', async ({
+	website,
+}) => {
+	await website.goto('./?storage=temp');
+	const dock = website.page.getByRole('navigation', {
+		name: 'Playground tools',
+	});
+	const toggle = dock.getByRole('button', {
+		name: 'Dev Tools',
+		exact: true,
+	});
+	await toggle.click();
+	await website.openDockPane('Terminal');
+	const pane = website.page.getByRole('dialog', { name: 'Terminal pane' });
+	const command = pane.getByRole('textbox', { name: 'PHP code' });
+	await command.fill('echo "draft retained";');
+	await toggle.click();
+	await expect(pane).not.toBeVisible();
+	await expect(toggle).toBeFocused();
+	await toggle.click();
+	await website.openDockPane('Terminal');
+	await expect(command).toHaveText('echo "draft retained";');
+	await website.page.reload();
+	await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+	await toggle.click();
+	await website.page.reload();
+	await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+});
+
 test('should route tools through one Dock pane', async ({ website }) => {
 	await website.goto('./?storage=temp');
 	const dock = website.page.getByRole('navigation', {

diff --git a/packages/playground/website/playwright/website-page.ts b/packages/playground/website/playwright/website-page.ts
@@ -117,6 +117,22 @@ export class WebsitePage {
 		const dock = this.page.getByRole('navigation', {
 			name: 'Playground tools',
 		});
+		const developerTools = dock.getByRole('group', {
+			name: 'Developer tools',
+			includeHidden: true,
+		});
+		if (
+			await developerTools
+				.getByRole('button', { name: toolName, includeHidden: true })
+				.count()
+		) {
+			const toggle = dock.getByRole('button', {
+				name: 'Dev Tools',
+				exact: true,
+			});
+			if ((await toggle.getAttribute('aria-expanded')) !== 'true')
+				await toggle.click();
+		}
 		const tool = dock.getByRole('button', { name: toolName });
 		if ((await tool.getAttribute('aria-pressed')) !== 'true') {
 			await tool.click();