diff --git a/e2e/fixtures.ts b/e2e/fixtures.ts
new file mode 100644
index 000000000..15511badd
--- /dev/null
+++ b/e2e/fixtures.ts
@@ -0,0 +1,59 @@
+import { type APIRequestContext, test as base } from '@playwright/test';
+import { WikiFactory } from './helpers/factory';
+
+const AUTH_FILE = 'e2e/.auth/user.json';
+
+/**
+ * `test` with wiki fixtures that clean up after themselves.
+ *
+ * Import this instead of `@playwright/test` in any spec that needs a space:
+ *
+ * ```ts
+ * import { expect, test } from '../fixtures';
+ *
+ * test('…', async ({ page, wiki }) => {
+ *   const space = await wiki.space({ pages: [{ title: 'Alpha' }] });
+ *   await page.goto(space.url());
+ * });
+ * ```
+ *
+ * Teardown runs in the fixture's own epilogue, so there is no `afterAll` to
+ * forget and a failing test cannot skip it.
+ */
+export const test = base.extend<
+	{ wiki: WikiFactory },
+	{ wikiSuite: WikiFactory }
+>({
+	// Per-test: seeded in the test, gone when it ends. The default.
+	wiki: async ({ request }, use) => {
+		const factory = new WikiFactory(request);
+		try {
+			await use(factory);
+		} finally {
+			await factory.destroyAll();
+		}
+	},
+
+	// Per-worker, for a describe whose tests share one seed. It builds its own
+	// API context: the built-in `request` fixture is test-scoped, and a worker
+	// fixture may not depend on one — nor would it still be alive by the time
+	// this epilogue runs.
+	wikiSuite: [
+		async ({ playwright }, use, workerInfo) => {
+			const context: APIRequestContext = await playwright.request.newContext({
+				baseURL: workerInfo.project.use.baseURL,
+				storageState: AUTH_FILE,
+			});
+			const factory = new WikiFactory(context);
+			try {
+				await use(factory);
+			} finally {
+				await factory.destroyAll();
+				await context.dispose();
+			}
+		},
+		{ scope: 'worker' },
+	],
+});
+
+export { expect } from '@playwright/test';
diff --git a/e2e/helpers/factory.ts b/e2e/helpers/factory.ts
new file mode 100644
index 000000000..98fc82111
--- /dev/null
+++ b/e2e/helpers/factory.ts
@@ -0,0 +1,244 @@
+import type { APIRequestContext } from '@playwright/test';
+import { callMethod, createDoc, deleteDoc, getList } from './frappe';
+import { appUrl } from './routes';
+import type { WikiDocument, WikiSpace } from './wiki';
+
+/**
+ * Every space this factory creates is routed under this prefix, so the sweeper
+ * in `global.teardown.ts` can delete leftovers from a killed run without any
+ * chance of touching a real space.
+ */
+export const E2E_ROUTE_PREFIX = 'e2e';
+
+/** A page to seed. Unknown keys are passed through to the Wiki Document. */
+export interface PageSpec {
+	title: string;
+	content?: string;
+	is_group?: boolean;
+	is_published?: boolean;
+	children?: PageSpec[];
+	[field: string]: unknown;
+}
+
+/** A space to seed. Unknown keys are passed through to the Wiki Space. */
+export interface SpaceSpec {
+	route?: string;
+	space_name?: string;
+	is_published?: boolean;
+	pages?: PageSpec[];
+	[field: string]: unknown;
+}
+
+export interface SeededPage extends WikiDocument {
+	children: SeededPage[];
+}
+
+export interface SeededSpace extends WikiSpace {
+	/** The root group the Wiki Space created for itself, never a replacement. */
+	rootGroup: string;
+	/** Seeded pages, in spec order, each with its own `children`. */
+	pages: SeededPage[];
+	/** Look up a seeded page at any depth by title. Throws if absent. */
+	page(title: string): SeededPage;
+	/** `/wiki-app/spaces/<name>`, plus any deeper segments. */
+	url(...segments: string[]): string;
+}
+
+let counter = 0;
+
+/** A route no other spec (or parallel run) can collide with. */
+export function uniqueRoute(slug = 'space'): string {
+	counter += 1;
+	return `${E2E_ROUTE_PREFIX}-${slug}-${counter}-${Date.now().toString(36)}`;
+}
+
+/** Flatten a page tree into breadth-first levels, keeping each node's parent. */
+function levelsOf(
+	pages: PageSpec[],
+): { spec: PageSpec; parent: PageSpec | null }[][] {
+	const levels: { spec: PageSpec; parent: PageSpec | null }[][] = [];
+	let current = pages.map((spec) => ({
+		spec,
+		parent: null as PageSpec | null,
+	}));
+	while (current.length) {
+		levels.push(current);
+		current = current.flatMap(({ spec }) =>
+			(spec.children ?? []).map((child) => ({ spec: child, parent: spec })),
+		);
+	}
+	return levels;
+}
+
+/**
+ * Creates wiki fixtures and remembers them so they can all be destroyed at once.
+ *
+ * Seeding costs `1 + depth + 1` requests — one to create the space, one bulk
+ * insert per level of the page tree, and one read-back — rather than one per
+ * document. Deeper levels cannot join the same bulk call: Wiki Document has no
+ * `autoname`, and `set_new_name` discards any name we supply, so a child's
+ * parent name is unknowable until its parent's insert returns.
+ */
+export class WikiFactory {
+	private routes: string[] = [];
+	private adopted: string[] = [];
+
+	constructor(private request: APIRequestContext) {}
+
+	/**
+	 * Seed a space and its page tree.
+	 *
+	 * Routes are left for the server to derive from the title and the ancestor
+	 * chain, so seeded pages carry the same routes the UI would have produced.
+	 */
+	async space(spec: SpaceSpec = {}): Promise<SeededSpace> {
+		const { pages = [], route, space_name, ...spaceFields } = spec;
+		const spaceRoute = route ?? uniqueRoute();
+
+		// Remembered before the create, so a request that times out server-side
+		// still leaves us able to find and delete what it made.
+		this.routes.push(spaceRoute);
+
+		const space = await createDoc<WikiSpace & { root_group: string }>(
+			this.request,
+			'Wiki Space',
+			{
+				route: spaceRoute,
+				space_name: space_name ?? spaceRoute,
+				is_published: spec.is_published ?? true,
+				...spaceFields,
+			},
+		);
+
+		const namesBySpec = new Map<PageSpec, string>();
+		for (const level of levelsOf(pages)) {
+			const docs = level.map(({ spec: pageSpec, parent }) => {
+				const { children, ...fields } = pageSpec;
+				return {
+					doctype: 'Wiki Document',
+					is_published: true,
+					content: `Content for ${pageSpec.title}`,
+					...fields,
+					parent_wiki_document: parent
+						? namesBySpec.get(parent)
+						: space.root_group,
+				};
+			});
+			const names = await callMethod<string[]>(
+				this.request,
+				'frappe.client.insert_many',
+				{ docs },
+			);
+			for (const [i, { spec: pageSpec }] of level.entries()) {
+				namesBySpec.set(pageSpec, names[i]);
+			}
+		}
+
+		const seeded = await this.readBack(namesBySpec, pages);
+		const byTitle = new Map<string, SeededPage>();
+		const index = (nodes: SeededPage[]) => {
+			for (const node of nodes) {
+				if (!byTitle.has(node.title)) byTitle.set(node.title, node);
+				index(node.children);
+			}
+		};
+		index(seeded);
+
+		return {
+			...space,
+			route: spaceRoute,
+			rootGroup: space.root_group,
+			pages: seeded,
+			page(title: string) {
+				const found = byTitle.get(title);
+				if (!found) {
+					throw new Error(
+						`No seeded page titled "${title}" in space ${spaceRoute}. ` +
+							`Seeded: ${[...byTitle.keys()].join(', ') || '(none)'}`,
+					);
+				}
+				return found;
+			},
+			url: (...segments: string[]) => appUrl('spaces', space.name, ...segments),
+		};
+	}
+
+	/**
+	 * One read to pick up what the server derived — routes, slugs, doc keys and
+	 * auto-assigned sort orders — then rebuilt into the shape of the spec.
+	 */
+	private async readBack(
+		namesBySpec: Map<PageSpec, string>,
+		pages: PageSpec[],
+	): Promise<SeededPage[]> {
+		const names = [...namesBySpec.values()];
+		if (!names.length) return [];
+
+		const rows = await getList<WikiDocument>(this.request, 'Wiki Document', {
+			fields: [
+				'name',
+				'title',
+				'route',
+				'slug',
+				'doc_key',
+				'is_group',
+				'is_published',
+				'sort_order',
+				'parent_wiki_document',
+			],
+			filters: { name: ['in', names] },
+			limit: 0,
+		});
+		const byName = new Map(rows.map((row) => [row.name, row]));
+
+		const build = (specs: PageSpec[]): SeededPage[] =>
+			specs.map((spec) => ({
+				...(byName.get(namesBySpec.get(spec) as string) as WikiDocument),
+				children: build(spec.children ?? []),
+			}));
+		return build(pages);
+	}
+
+	/**
+	 * Take ownership of a space this factory did not create — one a test made
+	 * through the UI — so it is destroyed along with the rest. Give the space an
+	 * `uniqueRoute()` when creating it, and the global sweeper becomes a backstop
+	 * for it too.
+	 */
+	adopt(spaceName: string): void {
+		this.adopted.push(spaceName);
+	}
+
+	/**
+	 * Destroy everything seeded through this factory.
+	 *
+	 * Spaces are resolved by route rather than by the create response, so a space
+	 * the server made but whose response we never saw — a timed-out create, or a
+	 * retry that seeded twice — is swept too. `Wiki Space.on_trash` cascades the
+	 * document tree, revisions, sync logs and change requests, so a page a test
+	 * created through the UI goes with it.
+	 */
+	async destroyAll(): Promise<void> {
+		for (const name of this.adopted.splice(0)) {
+			await deleteDoc(this.request, 'Wiki Space', name).catch(() => {});
+		}
+		for (const route of this.routes.splice(0)) {
+			await destroySpacesByRoute(this.request, route);
+		}
+	}
+}
+
+/** Delete every Wiki Space on `route`. Safe to call for a route that has none. */
+export async function destroySpacesByRoute(
+	request: APIRequestContext,
+	route: string,
+): Promise<void> {
+	const found = await getList<{ name: string }>(request, 'Wiki Space', {
+		fields: ['name'],
+		filters: { route },
+		limit: 0,
+	}).catch(() => []);
+	for (const space of found) {
+		await deleteDoc(request, 'Wiki Space', space.name);
+	}
+}
diff --git a/e2e/helpers/routes.ts b/e2e/helpers/routes.ts
index 480484773..e3233a108 100644
--- a/e2e/helpers/routes.ts
+++ b/e2e/helpers/routes.ts
@@ -6,7 +6,7 @@
  * test side.
  *
  * Kept in sync with the two other definitions of this route — there is no
- * automatic mechanism, same as GENERAL_KEY / WIKI_HOME_TAB_KEY:
+ * automatic mechanism:
  *   - `createWebHistory()` in frontend/src/router.js
  *   - `APP_ROUTE` in wiki/frappe_wiki/doctype/wiki_document/wiki_document.py
  */
diff --git a/e2e/helpers/wiki.ts b/e2e/helpers/wiki.ts
index 03cc010ba..c837db951 100644
--- a/e2e/helpers/wiki.ts
+++ b/e2e/helpers/wiki.ts
@@ -1,5 +1,7 @@
 import { type APIRequestContext, type Page, expect } from '@playwright/test';
+import { uniqueRoute } from './factory';
 import { createDoc, deleteDoc, getDoc, getList } from './frappe';
+import { SPACE_URL_RE, appUrl } from './routes';
 
 /**
  * Tear down every Wiki Space with the given (test-unique) route.
@@ -45,29 +47,124 @@ export async function publishChangeRequestFromReview(page: Page) {
 }
 
 /**
- * The sidebar create actions live behind a single plus button ("Add") that
- * opens a dropdown of New Page / New Group / External Link. Opens the menu
- * and clicks the given option.
+ * The sidebar footer creates a page directly; the rarer kinds (group, external
+ * link, tab) sit behind the chevron beside it. Opens the right one either way.
  */
 export async function clickSidebarAddOption(
 	page: Page,
 	option: 'New Page' | 'New Group' | 'External Link',
 ) {
-	await page.locator('button[title="Add"]').click();
+	if (option === 'New Page') {
+		await newPageButton(page).click();
+		return;
+	}
+	await page.locator('button[title="Add a group or link"]').click();
 	await page.getByRole('menuitem', { name: option }).click();
 }
 
 /**
- * Start creating a page from the sidebar, handling both the empty-space CTA
- * ("Create First Page") and the Add dropdown. Leaves the create dialog open.
+ * The sidebar's own "New page" button, which renders whether or not the space
+ * already has pages. Scoped to the sidebar: an empty space draws a second
+ * "New page" in the content column (spec 02 phase 5), so the name alone is
+ * ambiguous there. The mobile tree lives in a drawer that is an aside too.
+ */
+export function newPageButton(page: Page) {
+	return page
+		.getByRole('complementary')
+		.getByRole('button', { name: 'New page', exact: true })
+		.first();
+}
+
+/**
+ * Start creating a page from the sidebar. Leaves the create dialog open.
  */
 export async function openNewPageDialog(page: Page) {
-	const createFirstPage = page.locator('button:has-text("Create First Page")');
-	if (await createFirstPage.isVisible({ timeout: 2000 }).catch(() => false)) {
-		await createFirstPage.click();
-	} else {
-		await clickSidebarAddOption(page, 'New Page');
+	await newPageButton(page).click();
+}
+
+/**
+ * Build a space through the app's own New Space dialog, and hand it to the
+ * factory so it is torn down with the test.
+ *
+ * Most specs should take a space from the factory instead — it is a couple of
+ * requests rather than a browser round-trip. This exists for the specs whose
+ * subject *is* the app's own create path, or which need the draft store
+ * hydrated exactly the way the app hydrates it.
+ */
+export async function createSpaceViaDialog(
+	page: Page,
+	wiki: { adopt(spaceName: string): void },
+	label = 'space',
+) {
+	const route = uniqueRoute(label);
+
+	await page.goto(appUrl('spaces'));
+	await page.waitForLoadState('networkidle');
+	await page.getByRole('button', { name: 'New Space' }).click();
+	await page.waitForSelector('[role="dialog"]', { state: 'visible' });
+	await page.getByLabel('Space Name').fill(route);
+	await page.getByLabel('Route').fill(route);
+	await page
+		.getByRole('dialog')
+		.getByRole('button', { name: 'Create' })
+		.click();
+	await page.waitForLoadState('networkidle');
+	await expect(page).toHaveURL(SPACE_URL_RE);
+
+	const spaceUrl = page.url();
+	const spaceId = spaceUrl.split('/spaces/')[1].split(/[/?#]/)[0];
+	wiki.adopt(spaceId);
+	return { spaceId, spaceUrl, route };
+}
+
+/**
+ * Create a page in `space` through the sidebar and open it in the editor.
+ *
+ * Every editor spec used to open with "click whatever space is listed first",
+ * which grew that space's tree on every run and left the pages behind. Seeding
+ * a space from the factory and authoring into it keeps the tree at one item and
+ * lets one space delete take the draft away again.
+ *
+ * A created page lands on the draft route, which can render before the
+ * change-request overlay is readable — locally that is queue lag rather than a
+ * product bug, and one reload settles it.
+ */
+export async function createDraftAndOpenEditor(
+	page: Page,
+	space: { url(...segments: string[]): string },
+	title: string,
+	options: { waitForEditorApi?: boolean } = {},
+) {
+	await page.goto(space.url());
+	await page.waitForLoadState('networkidle');
+
+	await openNewPageDialog(page);
+	await page.getByLabel('Title').fill(title);
+	await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
+	await page.waitForLoadState('networkidle');
+
+	const editor = page.locator('.ProseMirror').first();
+	for (let attempt = 0; attempt < 3; attempt++) {
+		if (await editor.isVisible({ timeout: 5000 }).catch(() => false)) break;
+		await page.reload();
+		await page.waitForLoadState('networkidle');
+		await page
+			.locator('aside')
+			.getByText(title, { exact: false })
+			.first()
+			.click();
 	}
+	await expect(editor).toBeVisible({ timeout: 10000 });
+
+	// The editor publishes its command API on the window once mounted; specs
+	// that drive it through page.evaluate need that to have happened.
+	if (options.waitForEditorApi !== false) {
+		await page.waitForFunction(
+			() => (window as { wikiEditor?: unknown }).wikiEditor !== undefined,
+			{ timeout: 10000 },
+		);
+	}
+	return editor;
 }
 
 /**
@@ -234,3 +331,31 @@ export async function cleanupTestWikiDocuments(
 		}
 	}
 }
+
+/**
+ * The doc key of the draft currently open in the editor.
+ *
+ * A page created through the sidebar first lands on a temp key
+ * (`/draft/tmp_…`) and is promoted to its real doc key once the create
+ * round-trips. Reading the segment straight after the create therefore yields a
+ * key no Wiki Document will ever carry — this waits for the promotion instead.
+ */
+export async function currentDraftDocKey(page: Page): Promise<string> {
+	await page.waitForURL(/\/draft\/(?!tmp_)[^/?#]+/, { timeout: 15000 });
+	const match = page.url().match(/\/draft\/([^/?#]+)/);
+	return decodeURIComponent(match?.[1] ?? '');
+}
+
+/**
+ * Flush the open editor's buffer.
+ *
+ * The editor header has no Save button — autosave owns the save path and the
+ * dirty dot on the title reports it — so a spec that needs the buffer on the
+ * server presses the manual-flush shortcut instead of waiting out the ten
+ * second autosave. Clicking the body first puts focus inside the editor, which
+ * is where the shortcut is bound.
+ */
+export async function saveEditor(page: Page) {
+	await page.locator('.ProseMirror').first().click();
+	await page.keyboard.press('ControlOrMeta+s');
+}
diff --git a/e2e/tests/accept-contributions.spec.ts b/e2e/tests/accept-contributions.spec.ts
index 790c6ee6e..6583cb6ac 100644
--- a/e2e/tests/accept-contributions.spec.ts
+++ b/e2e/tests/accept-contributions.spec.ts
@@ -1,11 +1,6 @@
-import { expect, test } from '@playwright/test';
-import { createDoc, getDoc } from '../helpers/frappe';
-import {
-	type WikiSpace,
-	cleanupWikiSpacesByRoute,
-	createTestWikiDocument,
-	generateWikiTitle,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import type { WikiFactory } from '../helpers/factory';
+import { generateWikiTitle } from '../helpers/wiki';
 
 /**
  * Per-space "Accept Contributions" toggle — reader-side behavior.
@@ -22,54 +17,26 @@ import {
  * (Administrator) auth state.
  */
 test.describe('Accept Contributions toggle (reader)', () => {
-	let route: string;
-
-	test.afterEach(async ({ request }) => {
-		if (route) await cleanupWikiSpacesByRoute(request, route);
-		route = '';
-	});
-
 	async function seedPublicPage(
-		request: Parameters<typeof createDoc>[0],
+		wiki: WikiFactory,
 		allowContributions: boolean,
 	): Promise<string> {
-		route = `accept-contrib-${Date.now()}`;
-		const space = await createDoc<WikiSpace & { root_group: string }>(
-			request,
-			'Wiki Space',
-			{
-				route,
-				space_name: route,
-				is_published: true,
-				allow_contributions: allowContributions ? 1 : 0,
-				// Guest Read makes the space publicly readable (anonymous reader path).
-				roles: [{ role: 'Guest', permission_level: 'Read' }],
-			},
-		);
-
-		const doc = await createTestWikiDocument(request, {
-			title: generateWikiTitle('Accept Contrib'),
-			content: '# Heading\n\nReader body content.',
-			wiki_space: space.name,
-			parent_wiki_document: space.root_group,
-			is_published: true,
+		const title = generateWikiTitle('Accept Contrib');
+		const space = await wiki.space({
+			allow_contributions: allowContributions ? 1 : 0,
+			// Guest Read makes the space publicly readable (anonymous reader path).
+			roles: [{ role: 'Guest', permission_level: 'Read' }],
+			pages: [{ title, content: '# Heading\n\nReader body content.' }],
 		});
-
-		// The controller computes the final stored route; read it back.
-		const stored = await getDoc<{ route: string }>(
-			request,
-			'Wiki Document',
-			doc.name,
-		);
-		return `/${stored.route}`;
+		return `/${space.page(title).route}`;
 	}
 
 	test('shows Edit to a public reader when contributions are on', async ({
-		request,
+		wiki,
 		browser,
 		baseURL,
 	}) => {
-		const url = await seedPublicPage(request, true);
+		const url = await seedPublicPage(wiki, true);
 
 		// Explicitly logged-out context (the project default carries the admin
 		// auth state) pointed at the same server.
@@ -92,11 +59,11 @@ test.describe('Accept Contributions toggle (reader)', () => {
 
 	test('hides Edit (Copy becomes primary) when contributions are off; other actions remain', async ({
 		page,
-		request,
+		wiki,
 		browser,
 		baseURL,
 	}) => {
-		const url = await seedPublicPage(request, false);
+		const url = await seedPublicPage(wiki, false);
 
 		// --- Read-only viewer (Guest) ---
 		const guest = await browser.newContext({
diff --git a/e2e/tests/bubble-menu.spec.ts b/e2e/tests/bubble-menu.spec.ts
index df048d4c5..65687d91a 100644
--- a/e2e/tests/bubble-menu.spec.ts
+++ b/e2e/tests/bubble-menu.spec.ts
@@ -1,6 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
-import { openNewPageDialog } from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import { createDraftAndOpenEditor } from '../helpers/wiki';
 
 /**
  * Regression: the selection bubble menu must never render on top of the sticky
@@ -9,38 +8,15 @@ import { openNewPageDialog } from '../helpers/wiki';
  * instead of overlapping the toolbar. See WikiBubbleMenu.vue.
  */
 test.describe('Editor bubble menu placement', () => {
-	async function createPageAndOpenEditor(
-		page: import('@playwright/test').Page,
-		pageTitle: string,
-	) {
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
-		await page.waitForLoadState('networkidle');
-
-		await openNewPageDialog(page);
-
-		await page.getByLabel('Title').fill(pageTitle);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Save' })
-			.click();
-		await page.waitForLoadState('networkidle');
-
-		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
-
-		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-		await expect(editor).toBeVisible({ timeout: 10000 });
-		return editor;
-	}
-
 	test('bubble menu flips below a first-line selection instead of covering the toolbar', async ({
 		page,
+		wiki,
 	}) => {
-		await createPageAndOpenEditor(page, `bubble-menu-${Date.now()}`);
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`bubble-menu-${Date.now()}`,
+		);
 
 		// Put text on the very first line and select it — this sits directly under
 		// the sticky toolbar, the exact case that used to overlap.
diff --git a/e2e/tests/callout-rich-text.spec.ts b/e2e/tests/callout-rich-text.spec.ts
index 0fb6b84cc..24960a71d 100644
--- a/e2e/tests/callout-rich-text.spec.ts
+++ b/e2e/tests/callout-rich-text.spec.ts
@@ -1,166 +1,336 @@
-import { expect, test } from '@playwright/test';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
-import { openNewPageDialog } from '../helpers/wiki';
-
-test.describe('Callout Rich Text Editing', () => {
-	/**
-	 * Helper: navigate to a space and create a new page, returning the editor locator.
-	 */
-	async function createPageAndOpenEditor(
-		page: import('@playwright/test').Page,
-		pageTitle: string,
-	) {
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
-		await page.waitForLoadState('networkidle');
-
-		await openNewPageDialog(page);
-
-		await page.getByLabel('Title').fill(pageTitle);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Save' })
-			.click();
-		await page.waitForLoadState('networkidle');
+import { expect, test } from '../fixtures';
+import { createDraftAndOpenEditor } from '../helpers/wiki';
 
-		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
+/**
+ * Covers the callout as a *container* node: its body is content in the main
+ * document (`content: 'block+'` + NodeViewContent), not a markdown string in an
+ * attribute edited by a nested editor. So the assertions here are that the main
+ * editor's own formatting reaches inside a callout, and that block children —
+ * lists, code blocks, headings — survive the markdown round-trip.
+ */
 
-		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-		await expect(editor).toBeVisible({ timeout: 10000 });
-		return editor;
+declare global {
+	interface Window {
+		wikiEditor: {
+			commands: {
+				setContent: (
+					content: string,
+					options?: { contentType?: string },
+				) => void;
+				focus: () => void;
+			};
+			getMarkdown: () => string;
+			getJSON: () => {
+				type: string;
+				content?: {
+					type: string;
+					attrs?: Record<string, unknown>;
+					content?: { type: string }[];
+				}[];
+			};
+		};
 	}
+}
 
-	test('callout should round-trip inline markdown (bold, italic, links)', async ({
+const BOLD = process.platform === 'darwin' ? 'Meta+b' : 'Control+b';
+const MOD_ENTER =
+	process.platform === 'darwin' ? 'Meta+Enter' : 'Control+Enter';
+const SELECT_ALL = process.platform === 'darwin' ? 'Meta+a' : 'Control+a';
+
+test.describe('Callout rich text', () => {
+	test('a callout body parses into block children and round-trips', async ({
 		page,
+		wiki,
 	}) => {
-		const pageTitle = `callout-rt-${Date.now()}`;
-		await createPageAndOpenEditor(page, pageTitle);
+		await createDraftAndOpenEditor(page, await wiki.space(), 'Callout rt');
 
 		const result = await page.evaluate(() => {
-			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
-				editor?: {
-					commands: {
-						setContent: (c: string, o?: object) => void;
-					};
-					getMarkdown: () => string;
-					getHTML: () => string;
-					getJSON: () => {
-						type: string;
-						content: { type: string; attrs?: Record<string, unknown> }[];
-					};
-				};
-			};
-			const editor = ed?.editor;
-			if (!editor) return { error: 'editor not found' };
+			const source = [
+				':::note[Test]',
+				'This has **bold** and *italic* and [a link](https://example.com)',
+				'',
+				'- one',
+				'- two',
+				':::',
+			].join('\n');
 
-			// Set content with a callout using markdown syntax
-			const calloutContent =
-				'This has **bold** and *italic* and [a link](https://example.com)';
-			editor.commands.setContent(`:::note[Test]\n${calloutContent}\n:::`, {
+			window.wikiEditor.commands.setContent(source, {
 				contentType: 'markdown',
 			});
+			const md1 = window.wikiEditor.getMarkdown();
 
-			const md1 = editor.getMarkdown();
+			window.wikiEditor.commands.setContent(md1, { contentType: 'markdown' });
+			const md2 = window.wikiEditor.getMarkdown();
 
-			// Round-trip: parse the output back
-			editor.commands.setContent(md1, { contentType: 'markdown' });
-			const md2 = editor.getMarkdown();
-			const json = editor.getJSON();
-
-			// Find the callout block in the JSON
-			const calloutNode = json.content?.find(
-				(n: { type: string }) => n.type === 'calloutBlock',
-			);
+			const callout = window.wikiEditor
+				.getJSON()
+				.content?.find((n) => n.type === 'calloutBlock');
 
 			return {
 				md1,
-				md2,
 				roundTrip: md1 === md2,
-				calloutContent: calloutNode?.attrs?.content,
-				hasCallout: !!calloutNode,
+				title: callout?.attrs?.title,
+				childTypes: callout?.content?.map((child) => child.type),
 			};
 		});
 
-		expect(result).not.toHaveProperty('error');
-		expect(result.hasCallout).toBe(true);
+		// The body is child nodes, not a string attribute.
+		expect(result.childTypes).toEqual(['paragraph', 'bulletList']);
+		expect(result.title).toBe('Test');
 
-		// Content should preserve inline markdown
-		expect(result.calloutContent).toContain('**bold**');
-		expect(result.calloutContent).toContain('*italic*');
-		expect(result.calloutContent).toContain('[a link](https://example.com)');
+		// Every mark and the list survive serialization back to the fence.
+		expect(result.md1).toContain('**bold**');
+		expect(result.md1).toContain('*italic*');
+		expect(result.md1).toContain('[a link](https://example.com)');
+		expect(result.md1).toContain('- one');
+		expect(result.md1).toMatch(/:::note\[Test\][\s\S]*:::/);
 
-		// Round-trip should be stable
 		expect(result.roundTrip).toBe(true);
 	});
 
-	test('callout view mode should render formatted HTML preview', async ({
+	test('the main editor formats text typed inside a callout', async ({
 		page,
+		wiki,
 	}) => {
-		const pageTitle = `callout-preview-${Date.now()}`;
-		await createPageAndOpenEditor(page, pageTitle);
+		await createDraftAndOpenEditor(page, await wiki.space(), 'Callout typing');
 
-		// Set content with a callout using markdown syntax
 		await page.evaluate(() => {
-			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
-				editor?: {
-					commands: { setContent: (c: string, o?: object) => void };
-				};
-			};
-			ed?.editor?.commands.setContent(
-				':::tip\nUse **bold** for emphasis and *italic* for style\n:::',
-				{ contentType: 'markdown' },
-			);
+			window.wikiEditor.commands.setContent(':::tip\nlead\n:::', {
+				contentType: 'markdown',
+			});
 		});
 
-		// The callout should render in view mode (not editing) with formatted text
-		const calloutContent = page.locator(
-			'.callout-block-wrapper .callout-content-text',
+		// Type into the callout body the way an author would — no double-click,
+		// no sub-editor: it is ordinary editable content.
+		const body = page.locator('.callout-content p').first();
+		await expect(body).toBeVisible({ timeout: 5000 });
+		await body.click();
+		await page.keyboard.press('End');
+		await page.keyboard.type(' ');
+
+		// Toggle the editor's own bold shortcut, then type: the mark has to apply
+		// to input inside the callout, which is only true if the body belongs to
+		// the main editor.
+		await page.keyboard.press(BOLD);
+		await page.keyboard.type('emphasis');
+
+		await expect(page.locator('.callout-content strong')).toHaveText(
+			'emphasis',
 		);
-		await expect(calloutContent).toBeVisible({ timeout: 5000 });
 
-		// Check that bold and italic are rendered as HTML
-		const html = await calloutContent.innerHTML();
-		expect(html).toContain('<strong>bold</strong>');
-		expect(html).toContain('<em>italic</em>');
+		const markdown = await page.evaluate(() => window.wikiEditor.getMarkdown());
+		expect(markdown).toContain(':::tip');
+		expect(markdown).toContain('**emphasis**');
 	});
 
-	test('callout sub-editor should appear on double-click', async ({ page }) => {
-		const pageTitle = `callout-edit-${Date.now()}`;
-		await createPageAndOpenEditor(page, pageTitle);
+	test('the slash menu inserts a callout you can type straight into', async ({
+		page,
+		wiki,
+	}) => {
+		const editor = await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			'Callout slash',
+		);
+
+		await editor.click();
+		await page.keyboard.type('/tip');
+		await expect(
+			page.locator('.slash-commands-list').getByText('Tip', { exact: true }),
+		).toBeVisible({ timeout: 5000 });
+		await page.keyboard.press('Enter');
+
+		// setCallout seeds an empty paragraph, so the body is immediately
+		// writable — no placeholder to double-click first.
+		await expect(page.locator('.callout-content')).toBeVisible({
+			timeout: 5000,
+		});
+		await page.locator('.callout-content p').first().click();
+		await page.keyboard.type('written in place');
+
+		const markdown = await page.evaluate(() => window.wikiEditor.getMarkdown());
+		expect(markdown).toContain(':::tip\nwritten in place\n:::');
+	});
+
+	test('the title is editable in place', async ({ page, wiki }) => {
+		await createDraftAndOpenEditor(page, await wiki.space(), 'Callout title');
 
-		// Set content with a callout using markdown syntax
 		await page.evaluate(() => {
-			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
-				editor?: {
-					commands: { setContent: (c: string, o?: object) => void };
-				};
-			};
-			ed?.editor?.commands.setContent(':::note\nSome content here\n:::', {
+			window.wikiEditor.commands.setContent(':::note\nbody\n:::', {
 				contentType: 'markdown',
 			});
 		});
 
-		// Double-click the callout content area to enter edit mode
-		const calloutContent = page
-			.locator('.callout-block-wrapper .callout-content-text')
-			.first();
-		await expect(calloutContent).toBeVisible({ timeout: 5000 });
-		await calloutContent.dblclick();
+		const title = page.locator('input.callout-title');
+		await expect(title).toBeVisible({ timeout: 5000 });
+		// A real value, not a placeholder: the author can select and delete it.
+		await expect(title).toHaveValue('Note');
+
+		await title.click();
+		await page.keyboard.press(SELECT_ALL);
+		await page.keyboard.type('Heads up');
 
-		// The sub-editor (a nested ProseMirror instance) and toolbar should appear
-		const subEditor = page.locator(
-			'.callout-block-wrapper .callout-sub-editor-content',
+		const markdown = await page.evaluate(() => window.wikiEditor.getMarkdown());
+		expect(markdown).toContain(':::note[Heads up]');
+	});
+
+	test('an emptied title falls back to the type default', async ({
+		page,
+		wiki,
+	}) => {
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			'Callout emptytitle',
 		);
-		await expect(subEditor).toBeVisible({ timeout: 5000 });
 
-		// Toolbar buttons (B, I, Link) should be visible
-		const toolbar = page.locator(
-			'.callout-block-wrapper .flex.items-center.gap-0\\.5',
+		await page.evaluate(() => {
+			window.wikiEditor.commands.setContent(':::danger[Boom]\nbody\n:::', {
+				contentType: 'markdown',
+			});
+		});
+
+		const title = page.locator('input.callout-title');
+		await expect(title).toHaveValue('Boom');
+
+		await title.click();
+		await page.keyboard.press(SELECT_ALL);
+		await page.keyboard.press('Backspace');
+		await page.locator('.callout-content p').first().click();
+
+		// The published page always prints a title, so an emptied one means the
+		// default rather than no header at all.
+		await expect(title).toHaveValue('Danger');
+		const markdown = await page.evaluate(() => window.wikiEditor.getMarkdown());
+		// Back to the default means back to a bare fence.
+		expect(markdown).toContain(':::danger\n');
+		expect(markdown).not.toContain('[Danger]');
+	});
+
+	test('the cursor can leave a callout that ends the document', async ({
+		page,
+		wiki,
+	}) => {
+		await createDraftAndOpenEditor(page, await wiki.space(), 'Callout exit');
+
+		await page.evaluate(() => {
+			window.wikiEditor.commands.setContent(':::note\nbody\n:::', {
+				contentType: 'markdown',
+			});
+		});
+
+		await page.locator('.callout-content p').first().click();
+		await page.keyboard.press('End');
+		await page.keyboard.press(MOD_ENTER);
+		await page.keyboard.type('outside');
+
+		const markdown = await page.evaluate(() => window.wikiEditor.getMarkdown());
+		// The typed text landed after the closing fence, not inside it.
+		expect(markdown).toMatch(/:::\n\noutside/);
+	});
+
+	test('backspace removes an empty callout', async ({ page, wiki }) => {
+		const editor = await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			'Callout backspace',
+		);
+
+		await editor.click();
+		await page.keyboard.type('/note');
+		await expect(
+			page.locator('.slash-commands-list').getByText('Note', { exact: true }),
+		).toBeVisible({ timeout: 5000 });
+		await page.keyboard.press('Enter');
+		await expect(page.locator('.callout-content')).toBeVisible({
+			timeout: 5000,
+		});
+
+		await page.locator('.callout-content p').first().click();
+		await page.keyboard.press('Backspace');
+
+		await expect(page.locator('.callout-content')).toHaveCount(0);
+		const markdown = await page.evaluate(() => window.wikiEditor.getMarkdown());
+		expect(markdown).not.toContain(':::');
+	});
+
+	test('block nodes are reachable inside a callout', async ({ page, wiki }) => {
+		await createDraftAndOpenEditor(page, await wiki.space(), 'Callout blocks');
+
+		const childTypes = await page.evaluate(() => {
+			const source = [
+				':::caution',
+				'## Heading',
+				'',
+				'```js',
+				'const a = 1;',
+				'```',
+				':::',
+			].join('\n');
+
+			window.wikiEditor.commands.setContent(source, {
+				contentType: 'markdown',
+			});
+
+			const callout = window.wikiEditor
+				.getJSON()
+				.content?.find((n) => n.type === 'calloutBlock');
+			return callout?.content?.map((child) => child.type);
+		});
+
+		// A heading and a fenced block inside a callout were unreachable while
+		// the body was a string; degrading either to a bare paragraph is the
+		// regression this guards.
+		expect(childTypes).toEqual(['heading', 'codeBlock']);
+	});
+
+	test('the published page renders the callout body as real markup', async ({
+		page,
+		wiki,
+	}) => {
+		const space = await wiki.space({
+			pages: [
+				{
+					title: 'Callout Page',
+					content: [
+						':::tip[Careful]',
+						'Body with **bold** text.',
+						'',
+						'- first item',
+						'- second item',
+						':::',
+						'',
+					].join('\n'),
+				},
+			],
+		});
+		const doc = space.page('Callout Page');
+
+		await page.goto(`/${doc.route}`);
+		await page.waitForLoadState('networkidle');
+
+		const callout = page.locator('#wiki-content aside.callout.callout-tip');
+		await expect(callout).toBeVisible({ timeout: 10000 });
+
+		// Alert's banner structure: header row, then a full-width body. The old
+		// markup nested the body beside the title in a .callout-body cell.
+		await expect(callout.locator('.callout-header .callout-title')).toHaveText(
+			'Careful',
+		);
+		await expect(callout.locator('.callout-body')).toHaveCount(0);
+		await expect(callout.locator('.callout-header svg')).toBeVisible();
+
+		// The body is rendered markdown, not escaped text.
+		await expect(callout.locator('.callout-content strong')).toHaveText('bold');
+		await expect(callout.locator('.callout-content li')).toHaveCount(2);
+
+		// Neutral surface — the type shows only in the icon's colour.
+		const surface = await callout.evaluate(
+			(el) => getComputedStyle(el).backgroundColor,
 		);
-		await expect(toolbar).toBeVisible();
+		const iconColor = await callout
+			.locator('.callout-icon')
+			.evaluate((el) => getComputedStyle(el).color);
+		expect(surface).not.toBe(iconColor);
 	});
 });
diff --git a/e2e/tests/change-request-flow.spec.ts b/e2e/tests/change-request-flow.spec.ts
index 253d4b352..2d63169cf 100644
--- a/e2e/tests/change-request-flow.spec.ts
+++ b/e2e/tests/change-request-flow.spec.ts
@@ -1,4 +1,6 @@
-import { type Page, expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import type { WikiFactory } from '../helpers/factory';
 import { callMethod, getList } from '../helpers/frappe';
 import {
 	APP_BASE,
@@ -6,7 +8,13 @@ import {
 	SPACE_URL_RE,
 	appUrl,
 } from '../helpers/routes';
-import { clickSidebarAddOption, openNewPageDialog } from '../helpers/wiki';
+import {
+	clickSidebarAddOption,
+	createSpaceViaDialog,
+	currentDraftDocKey,
+	openNewPageDialog,
+	saveEditor,
+} from '../helpers/wiki';
 
 interface WikiDocumentRoute {
 	route: string;
@@ -50,30 +58,16 @@ async function clickReviewMenuItem(page: Page, name: string) {
  * Create a fresh space with a single draft page. Returns identifiers the
  * caller needs to navigate back to the space and address the page.
  */
-async function createSpaceWithDraftPage(page: Page, label: string) {
-	await page.goto(appUrl('spaces'));
-	await page.waitForLoadState('networkidle');
-
-	await page.getByRole('button', { name: 'New Space' }).click();
-	await page.waitForSelector('[role="dialog"]', { state: 'visible' });
+async function createSpaceWithDraftPage(
+	page: Page,
+	wiki: WikiFactory,
+	label: string,
+) {
+	const { spaceUrl } = await createSpaceViaDialog(page, wiki, label);
 
-	const timestamp = Date.now();
-	const spaceName = `${label} ${timestamp}`;
-	const spaceRoute = `${label.toLowerCase().replace(/\s+/g, '-')}-${timestamp}`;
 	const pageTitle = `${label
 		.toLowerCase()
-		.replace(/\s+/g, '-')}-page-${timestamp}`;
-
-	await page.getByLabel('Space Name').fill(spaceName);
-	await page.getByLabel('Route').fill(spaceRoute);
-	await page
-		.getByRole('dialog')
-		.getByRole('button', { name: 'Create' })
-		.click();
-	await page.waitForLoadState('networkidle');
-	await expect(page).toHaveURL(SPACE_URL_RE);
-	const spaceUrl = page.url();
-
+		.replace(/\s+/g, '-')}-page-${Date.now()}`;
 	await openNewPageDialog(page);
 	await page.getByLabel('Title').fill(pageTitle);
 	await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
@@ -82,7 +76,7 @@ async function createSpaceWithDraftPage(page: Page, label: string) {
 	await page.locator('aside').getByText(pageTitle, { exact: true }).click();
 	await page.waitForURL(/\/draft\/[^/?#]+/);
 
-	return { spaceUrl, spaceName, pageTitle };
+	return { spaceUrl, pageTitle };
 }
 
 /** Set the open editor's content via the exposed wikiEditor and save. */
@@ -95,8 +89,7 @@ async function setEditorContentAndSave(page: Page, content: string) {
 	await page.evaluate((c) => {
 		window.wikiEditor.commands.setContent(c, { contentType: 'markdown' });
 	}, content);
-	await editor.click();
-	await page.getByRole('button', { name: 'Save' }).click();
+	await saveEditor(page);
 	await page.waitForTimeout(500);
 }
 
@@ -117,32 +110,17 @@ test.describe('Change Request Flow', () => {
 	test('should add a page, edit existing page, merge, and verify live content', async ({
 		page,
 		request,
+		wiki,
 	}) => {
-		await page.goto(appUrl('spaces'));
-		await page.waitForLoadState('networkidle');
-
-		// Create a new space
-		await page.getByRole('button', { name: 'New Space' }).click();
-		await page.waitForSelector('[role="dialog"]', { state: 'visible' });
-
 		const timestamp = Date.now();
-		const spaceName = `CR Flow Space ${timestamp}`;
-		const spaceRoute = `cr-flow-space-${timestamp}`;
 		const pageTitle = `cr-flow-page-${timestamp}`;
 		const initialContent = `Initial content ${timestamp}`;
 		const updatedContent = `Updated content ${timestamp}`;
-
-		await page.getByLabel('Space Name').fill(spaceName);
-		const routeInput = page.getByLabel('Route');
-		await routeInput.fill(spaceRoute);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Create' })
-			.click();
-		await page.waitForLoadState('networkidle');
-		await expect(page).toHaveURL(SPACE_URL_RE);
-
-		const spaceUrl = page.url();
+		const { spaceUrl } = await createSpaceViaDialog(
+			page,
+			wiki,
+			'cr-flow-space',
+		);
 
 		// Create a new page draft
 
@@ -158,9 +136,7 @@ test.describe('Change Request Flow', () => {
 		// Open the new draft page from the tree
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
 		await page.waitForURL(/\/draft\/[^/?#]+/);
-		const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-		expect(draftMatch).toBeTruthy();
-		const docKey = decodeURIComponent(draftMatch?.[1] ?? '');
+		const docKey = await currentDraftDocKey(page);
 		const editor = page
 			.locator('.ProseMirror, [contenteditable="true"]')
 			.first();
@@ -174,8 +150,7 @@ test.describe('Change Request Flow', () => {
 				contentType: 'markdown',
 			});
 		}, initialContent);
-		await editor.click();
-		await page.getByRole('button', { name: 'Save' }).click();
+		await saveEditor(page);
 		await page.waitForTimeout(500);
 
 		// Submit for review and merge
@@ -215,8 +190,7 @@ test.describe('Change Request Flow', () => {
 				contentType: 'markdown',
 			});
 		}, `${initialContent}\n\n${updatedContent}`);
-		await editor.click();
-		await page.getByRole('button', { name: 'Save' }).click();
+		await saveEditor(page);
 		await page.waitForTimeout(500);
 
 		await page.getByRole('button', { name: 'Submit for Review' }).click();
@@ -249,28 +223,14 @@ test.describe('Change Request Flow', () => {
 	test('should merge multiple change requests with added folders and pages', async ({
 		page,
 		request,
+		wiki,
 	}) => {
-		await page.goto(appUrl('spaces'));
-		await page.waitForLoadState('networkidle');
-
-		// Create a new space
-		await page.getByRole('button', { name: 'New Space' }).click();
-		await page.waitForSelector('[role="dialog"]', { state: 'visible' });
-
 		const timestamp = Date.now();
-		const spaceName = `CR Multi Space ${timestamp}`;
-		const spaceRoute = `cr-multi-space-${timestamp}`;
-
-		await page.getByLabel('Space Name').fill(spaceName);
-		await page.getByLabel('Route').fill(spaceRoute);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Create' })
-			.click();
-		await page.waitForLoadState('networkidle');
-		await expect(page).toHaveURL(SPACE_URL_RE);
-
-		const spaceUrl = page.url();
+		const { spaceUrl } = await createSpaceViaDialog(
+			page,
+			wiki,
+			'cr-multi-space',
+		);
 		const spaceId = spaceUrl.split(`${appUrl('spaces')}/`)[1];
 
 		const createGroup = async (title: string) => {
@@ -348,10 +308,10 @@ test.describe('Change Request Flow', () => {
 
 		const cr1Url = await submitChangeRequestForSpace();
 
-		// Change request 2 (created after CR1 is submitted)
-		await page.goto(appUrl('spaces'));
-		await page.waitForLoadState('networkidle');
-		await page.getByText(spaceName, { exact: true }).click();
+		// Change request 2 (created after CR1 is submitted). Navigate by id:
+		// a space's name is on the page twice now -- the sidebar lists it and
+		// the overview row repeats it -- so clicking by text is ambiguous.
+		await page.goto(appUrl('spaces', spaceId));
 		await page.waitForLoadState('networkidle');
 
 		const cr2GroupA = `CR2 Folder A ${timestamp}`;
@@ -406,24 +366,14 @@ test.describe('Change Request Flow', () => {
 	test('should label reordered pages when reordering within a group', async ({
 		page,
 		request,
+		wiki,
 	}) => {
-		await page.goto(appUrl('spaces'));
-		await page.waitForLoadState('networkidle');
-
 		const timestamp = Date.now();
-		const spaceName = `CR Reorder Space ${timestamp}`;
-		const spaceRoute = `cr-reorder-space-${timestamp}`;
-
-		await page.getByRole('button', { name: 'New Space' }).click();
-		await page.waitForSelector('[role="dialog"]', { state: 'visible' });
-		await page.getByLabel('Space Name').fill(spaceName);
-		await page.getByLabel('Route').fill(spaceRoute);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Create' })
-			.click();
-		await page.waitForLoadState('networkidle');
-		await expect(page).toHaveURL(SPACE_URL_RE);
+		const { spaceUrl } = await createSpaceViaDialog(
+			page,
+			wiki,
+			'cr-reorder-space',
+		);
 
 		const spaceId = page.url().split(`${appUrl('spaces')}/`)[1];
 
@@ -584,10 +534,12 @@ test.describe('Change Request Flow', () => {
 			.locator('aside [data-slot="row"]')
 			.filter({ has: page.getByText(movedTitle, { exact: true }) })
 			.first();
+		// The tree marks a change with a dot, not a word, so the state is read
+		// off the dot's label.
 		await expect(
-			movedRow.getByText('Reordered', { exact: true }),
+			movedRow.getByLabel('Reordered', { exact: true }),
 		).toBeVisible();
-		await expect(movedRow.getByText('Modified', { exact: true })).toHaveCount(
+		await expect(movedRow.getByLabel('Modified', { exact: true })).toHaveCount(
 			0,
 		);
 
@@ -599,7 +551,7 @@ test.describe('Change Request Flow', () => {
 		await page.waitForLoadState('networkidle');
 
 		const changeCard = page
-			.locator('div.border.border-outline-gray-2.rounded-lg.overflow-hidden')
+			.locator('div.border.border-outline-gray-2.rounded-6.overflow-hidden')
 			.filter({ has: page.getByText(movedTitle, { exact: true }) })
 			.first();
 		await expect(
@@ -623,27 +575,16 @@ test.describe('Change Request Flow', () => {
 	test('should navigate to published page after merging from space editor', async ({
 		page,
 		request,
+		wiki,
 	}) => {
-		await page.goto(appUrl('spaces'));
-		await page.waitForLoadState('networkidle');
-
 		const timestamp = Date.now();
-		const spaceName = `CR Merge Nav Space ${timestamp}`;
-		const spaceRoute = `cr-merge-nav-${timestamp}`;
 		const pageTitle = `merge-nav-page-${timestamp}`;
 		const pageContent = `Merge nav content ${timestamp}`;
-
-		// Create a new space
-		await page.getByRole('button', { name: 'New Space' }).click();
-		await page.waitForSelector('[role="dialog"]', { state: 'visible' });
-		await page.getByLabel('Space Name').fill(spaceName);
-		await page.getByLabel('Route').fill(spaceRoute);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Create' })
-			.click();
-		await page.waitForLoadState('networkidle');
-		await expect(page).toHaveURL(SPACE_URL_RE);
+		const { spaceUrl } = await createSpaceViaDialog(
+			page,
+			wiki,
+			'cr-merge-nav-space',
+		);
 
 		// Create a new page draft
 
@@ -673,8 +614,7 @@ test.describe('Change Request Flow', () => {
 				contentType: 'markdown',
 			});
 		}, pageContent);
-		await editor.click();
-		await page.getByRole('button', { name: 'Save' }).click();
+		await saveEditor(page);
 		await page.waitForTimeout(500);
 
 		// One-click self-serve publish from the editor: the Merge button walks
@@ -702,9 +642,10 @@ test.describe('Change Request Flow', () => {
 	test('two-person path: submit -> assign -> approve -> merge', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		const content = `Two-person content ${Date.now()}`;
-		await createSpaceWithDraftPage(page, 'CR Two Person');
+		await createSpaceWithDraftPage(page, wiki, 'CR Two Person');
 		await setEditorContentAndSave(page, content);
 		const crName = await submitForReviewFromEditor(page);
 
@@ -754,11 +695,12 @@ test.describe('Change Request Flow', () => {
 		expect(merged[0]?.status).toBe('Merged');
 	});
 
-	test('request changes -> revise -> resubmit', async ({ page }) => {
+	test('request changes -> revise -> resubmit', async ({ page, wiki }) => {
 		const content = `Request-changes content ${Date.now()}`;
 		const feedback = `Please expand the intro ${Date.now()}`;
 		const { spaceUrl, pageTitle } = await createSpaceWithDraftPage(
 			page,
+			wiki,
 			'CR Request Changes',
 		);
 		await setEditorContentAndSave(page, content);
@@ -792,10 +734,10 @@ test.describe('Change Request Flow', () => {
 		});
 	});
 
-	test('reject is terminal', async ({ page, request }) => {
+	test('reject is terminal', async ({ page, request, wiki }) => {
 		const content = `Reject content ${Date.now()}`;
 		const reason = `Out of scope ${Date.now()}`;
-		await createSpaceWithDraftPage(page, 'CR Reject');
+		await createSpaceWithDraftPage(page, wiki, 'CR Reject');
 		await setEditorContentAndSave(page, content);
 		const crName = await submitForReviewFromEditor(page);
 
@@ -834,9 +776,10 @@ test.describe('Change Request Flow', () => {
 
 	test('assigning from the list opens the dialog without navigating', async ({
 		page,
+		wiki,
 	}) => {
 		const content = `Assign nav content ${Date.now()}`;
-		await createSpaceWithDraftPage(page, 'CR Assign Nav');
+		await createSpaceWithDraftPage(page, wiki, 'CR Assign Nav');
 		await setEditorContentAndSave(page, content);
 		await submitForReviewFromEditor(page);
 
@@ -862,9 +805,10 @@ test.describe('Change Request Flow', () => {
 	test('assigned-to-me tab lists CRs assigned to the current user', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		const content = `Assigned inbox content ${Date.now()}`;
-		await createSpaceWithDraftPage(page, 'CR Assigned Inbox');
+		await createSpaceWithDraftPage(page, wiki, 'CR Assigned Inbox');
 		await setEditorContentAndSave(page, content);
 		const crName = await submitForReviewFromEditor(page);
 
@@ -898,11 +842,12 @@ test.describe('Change Request Flow', () => {
 
 	test('my-change-requests tab renders draft rows without a router param error', async ({
 		page,
+		wiki,
 	}) => {
 		const content = `My-tab draft content ${Date.now()}`;
 		// A Draft CR owned by the current user — no submit, so it stays Draft and
 		// lands in the "My Change Requests" tab.
-		await createSpaceWithDraftPage(page, 'CR My Tab');
+		await createSpaceWithDraftPage(page, wiki, 'CR My Tab');
 		await setEditorContentAndSave(page, content);
 
 		// A Draft row routes to the space editor, which needs the `wiki_space`
@@ -932,12 +877,14 @@ test.describe('Change Request Flow', () => {
 
 	test('inline preview renders code blocks with syntax highlighting (TipTap viewer)', async ({
 		page,
+		wiki,
 	}) => {
 		// A fenced Python block — the inline Preview must render it through the same
 		// read-only TipTap viewer the editor uses, which highlights via lowlight.
 		const code = '```python\nimport os\nprint(os.getcwd())\n```';
 		const { pageTitle } = await createSpaceWithDraftPage(
 			page,
+			wiki,
 			'CR Preview Highlight',
 		);
 		await setEditorContentAndSave(page, code);
@@ -962,9 +909,12 @@ test.describe('Change Request Flow', () => {
 		await expect(page.getByText('auto', { exact: true })).toHaveCount(0);
 	});
 
-	test('back from review returns to the originating tab', async ({ page }) => {
+	test('back from review returns to the originating tab', async ({
+		page,
+		wiki,
+	}) => {
 		const content = `Nav back content ${Date.now()}`;
-		await createSpaceWithDraftPage(page, 'CR Nav Back');
+		await createSpaceWithDraftPage(page, wiki, 'CR Nav Back');
 		await setEditorContentAndSave(page, content);
 		const crName = await submitForReviewFromEditor(page);
 
@@ -985,9 +935,14 @@ test.describe('Change Request Flow', () => {
 
 	test('merging from the editor keeps the tree up and the banner steady', async ({
 		page,
+		wiki,
 	}) => {
 		const content = `Merge UX content ${Date.now()}`;
-		const { pageTitle } = await createSpaceWithDraftPage(page, 'CR Merge UX');
+		const { pageTitle } = await createSpaceWithDraftPage(
+			page,
+			wiki,
+			'CR Merge UX',
+		);
 		await setEditorContentAndSave(page, content);
 
 		const treeItem = page
@@ -1033,9 +988,10 @@ test.describe('Change Request Flow', () => {
 
 	test('author can withdraw an in-review CR back to Draft from the menu', async ({
 		page,
+		wiki,
 	}) => {
 		const content = `Withdraw content ${Date.now()}`;
-		await createSpaceWithDraftPage(page, 'CR Withdraw');
+		await createSpaceWithDraftPage(page, wiki, 'CR Withdraw');
 		await setEditorContentAndSave(page, content);
 		await submitForReviewFromEditor(page);
 
diff --git a/e2e/tests/editor-toc.spec.ts b/e2e/tests/editor-toc.spec.ts
index 6f8a799b3..d2115f92b 100644
--- a/e2e/tests/editor-toc.spec.ts
+++ b/e2e/tests/editor-toc.spec.ts
@@ -1,9 +1,7 @@
-import { type Page, expect, test } from '@playwright/test';
-import { SPACE_URL_RE, appUrl } from '../helpers/routes';
-import {
-	cleanupWikiSpacesByRoute,
-	clickSidebarAddOption,
-} from '../helpers/wiki';
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import type { WikiFactory } from '../helpers/factory';
+import { createDraftAndOpenEditor } from '../helpers/wiki';
 
 /**
  * The editor's "On this page" rail mirrors the public reader's TOC, but is
@@ -11,14 +9,17 @@ import {
  * specs cover the two things that makes possible: entries that track the
  * document as it is typed, and click-to-scroll inside the editor.
  *
- * The rail collapses to a strip below 900px of editor width, so the narrow
- * case is exercised by resizing the viewport rather than by a phone project —
- * the breakpoint is on the editor element, not the device.
+ * The rail collapses to a strip below 1008px of editor width — the 768px prose
+ * column plus the gutter the rail is given — so the narrow case is exercised by
+ * resizing the viewport rather than by a phone project: the breakpoint is on
+ * the editor element, not the device.
  */
 
-// The breakpoint is on the editor element, which loses ~520px to the app nav
-// and the page tree — hence the gap between these two viewports.
+// The breakpoint is on the editor element, which loses ~260px to the space
+// sidebar — hence the gap between these viewports. LAPTOP is the tightest
+// window that still earns the rail (1280 - 261 = 1019 >= 1008).
 const WIDE = { width: 1440, height: 900 };
+const LAPTOP = { width: 1280, height: 800 };
 const NARROW = { width: 1000, height: 900 };
 const PHONE = { width: 375, height: 667 };
 
@@ -47,74 +48,22 @@ async function seedEditor(page: Page, html: string) {
 	expect(applied).toBe(true);
 }
 
-async function createSpaceWithPage(page: Page, stamp: number) {
-	const spaceRoute = `editor-toc-${stamp}`;
-
+/** A space of its own, with one page open in the editor. */
+async function createSpaceWithPage(page: Page, wiki: WikiFactory) {
 	await page.setViewportSize(WIDE);
-	await page.goto(appUrl('spaces'));
-	await page.waitForLoadState('networkidle');
-
-	await page.getByRole('button', { name: 'New Space' }).click();
-	await page.waitForSelector('[role="dialog"]', { state: 'visible' });
-	await page.getByLabel('Space Name').fill(spaceRoute);
-	await page.getByLabel('Route').fill(spaceRoute);
-	await page
-		.getByRole('dialog')
-		.getByRole('button', { name: 'Create' })
-		.click();
-	await expect(page).toHaveURL(SPACE_URL_RE);
-	await page.waitForLoadState('networkidle');
-
-	const createFirstPage = page.locator('button:has-text("Create First Page")');
-	if (await createFirstPage.isVisible({ timeout: 2000 }).catch(() => false)) {
-		await createFirstPage.click();
-	} else {
-		await clickSidebarAddOption(page, 'New Page');
-	}
-	const pageTitle = `TOC Page ${stamp}`;
-	await page.getByLabel('Title').fill(pageTitle);
-	await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
-	await page.waitForLoadState('networkidle');
-
-	await openPageFromTree(page, pageTitle);
-	return spaceRoute;
-}
-
-/**
- * Open a page from the tree and wait for the editor.
- *
- * Creating a page can land on the draft route before the change-request
- * overlay is readable ("Draft not found"), which locally is a queue-lag
- * artefact rather than a product bug — one reload settles it.
- */
-async function openPageFromTree(page: Page, pageTitle: string) {
-	const treeItem = page.locator('aside').getByText(pageTitle, { exact: false });
-	const editor = page.locator('.ProseMirror');
-
-	for (let attempt = 0; attempt < 3; attempt++) {
-		if (await editor.isVisible({ timeout: 5000 }).catch(() => false)) return;
-		await page.reload();
-		await page.waitForLoadState('networkidle');
-		await treeItem.first().click();
-	}
-
-	await expect(editor).toBeVisible({ timeout: 10000 });
+	await createDraftAndOpenEditor(
+		page,
+		await wiki.space(),
+		`TOC Page ${Date.now()}`,
+	);
 }
 
 test.describe('Editor table of contents', () => {
-	const createdRoutes: string[] = [];
-
-	test.afterEach(async ({ request }) => {
-		while (createdRoutes.length) {
-			const route = createdRoutes.pop() as string;
-			await cleanupWikiSpacesByRoute(request, route).catch(() => {});
-		}
-	});
-
 	test('lists h2/h3 headings and follows the document as it is typed', async ({
 		page,
+		wiki,
 	}) => {
-		createdRoutes.push(await createSpaceWithPage(page, Date.now()));
+		await createSpaceWithPage(page, wiki);
 		await seedEditor(page, SEED_HTML);
 
 		const rail = page.locator('[data-testid="editor-toc-rail"]');
@@ -144,8 +93,11 @@ test.describe('Editor table of contents', () => {
 		]);
 	});
 
-	test('clicking an entry scrolls that heading into view', async ({ page }) => {
-		createdRoutes.push(await createSpaceWithPage(page, Date.now()));
+	test('clicking an entry scrolls that heading into view', async ({
+		page,
+		wiki,
+	}) => {
+		await createSpaceWithPage(page, wiki);
 		await seedEditor(page, SEED_HTML);
 
 		const rail = page.locator('[data-testid="editor-toc-rail"]');
@@ -174,10 +126,31 @@ test.describe('Editor table of contents', () => {
 		await expect(usage).toHaveClass(/text-ink-gray-9/);
 	});
 
+	test('keeps the rail on a 1280px laptop', async ({ page, wiki }) => {
+		await createSpaceWithPage(page, wiki);
+		await seedEditor(page, SEED_HTML);
+
+		await page.setViewportSize(LAPTOP);
+
+		const rail = page.locator('[data-testid="editor-toc-rail"]');
+		await expect(rail).toBeVisible();
+		await expect(page.locator('[data-testid="editor-toc-strip"]')).toHaveCount(
+			0,
+		);
+
+		// The rail is given its own gutter, so it must not sit over the prose.
+		const railBox = await rail.boundingBox();
+		const proseBox = await page.locator('.ProseMirror').boundingBox();
+		expect(railBox).not.toBeNull();
+		expect(proseBox).not.toBeNull();
+		expect(proseBox.x + proseBox.width).toBeLessThanOrEqual(railBox.x);
+	});
+
 	test('falls back to a collapsible strip when the editor is too narrow', async ({
 		page,
+		wiki,
 	}) => {
-		createdRoutes.push(await createSpaceWithPage(page, Date.now()));
+		await createSpaceWithPage(page, wiki);
 		await seedEditor(page, SEED_HTML);
 
 		await expect(page.locator('[data-testid="editor-toc-rail"]')).toBeVisible();
@@ -206,8 +179,9 @@ test.describe('Editor table of contents', () => {
 
 	test('the strip works on a phone without widening the page', async ({
 		page,
+		wiki,
 	}) => {
-		createdRoutes.push(await createSpaceWithPage(page, Date.now()));
+		await createSpaceWithPage(page, wiki);
 		await seedEditor(page, SEED_HTML);
 
 		await page.setViewportSize(PHONE);
diff --git a/e2e/tests/external-link.spec.ts b/e2e/tests/external-link.spec.ts
index 9bc03da3c..6ee067a51 100644
--- a/e2e/tests/external-link.spec.ts
+++ b/e2e/tests/external-link.spec.ts
@@ -1,12 +1,8 @@
-import { expect, test } from '@playwright/test';
-import {
-	APP_BASE,
-	CHANGE_REQUEST_URL_RE,
-	spaceLinkSelector,
-} from '../helpers/routes';
+import { expect, test } from '../fixtures';
 import {
 	clickSidebarAddOption,
-	publishChangeRequestFromReview,
+	createDraftAndOpenEditor,
+	saveEditor,
 } from '../helpers/wiki';
 
 /**
@@ -17,16 +13,12 @@ import {
 test.describe('External Links', () => {
 	test('should create an external link and verify it appears with link icon', async ({
 		page,
+		wiki,
 	}) => {
 		await page.setViewportSize({ width: 1100, height: 900 });
 
-		// Navigate to wiki and click first space
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Click the External Link button in the toolbar
@@ -57,17 +49,12 @@ test.describe('External Links', () => {
 
 	test('should show external link with link icon after merge and open edit dialog on click', async ({
 		page,
+		wiki,
 	}) => {
 		await page.setViewportSize({ width: 1100, height: 900 });
 
-		// Navigate to wiki and click first space
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		const spaceHref = await spaceLink.getAttribute('href');
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Create an external link
@@ -85,17 +72,19 @@ test.describe('External Links', () => {
 		await page.waitForLoadState('networkidle');
 
 		// Submit for review and merge
-		await page.getByRole('button', { name: 'Submit for Review' }).click();
-		await page.getByRole('button', { name: 'Submit' }).click();
-		await expect(page).toHaveURL(CHANGE_REQUEST_URL_RE, {
-			timeout: 10000,
+		// Submit for Review lives in the editor header, and adding an external
+		// link opens no editor. The sidebar's Merge is the manager's one-click
+		// path -- it walks the CR through submit, approve and merge.
+		const mergeButton = page.getByRole('button', {
+			name: 'Merge',
+			exact: true,
 		});
-		await publishChangeRequestFromReview(page);
-
-		// Navigate back to space to verify the external link is in the tree after merge
-		if (spaceHref) {
-			await page.goto(spaceHref);
-		}
+		await expect(mergeButton).toBeVisible({ timeout: 10000 });
+		await mergeButton.click();
+		await expect(
+			page.locator('text=Change request merged').first(),
+		).toBeVisible({ timeout: 15000 });
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Verify the external link appears in the sidebar after merge
@@ -131,17 +120,12 @@ test.describe('External Links', () => {
 
 	test('should show external link in public sidebar with link icon', async ({
 		page,
+		wiki,
 	}) => {
 		await page.setViewportSize({ width: 1100, height: 900 });
 
-		// Navigate to wiki and click first space
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		const spaceHref = await spaceLink.getAttribute('href');
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Create an external link
@@ -158,40 +142,33 @@ test.describe('External Links', () => {
 			.click();
 		await page.waitForLoadState('networkidle');
 
-		// Also create a regular page so we can access the public view
-		await clickSidebarAddOption(page, 'New Page');
-
+		// Also create a regular page so the space has a public page to open.
+		// The shared helper is what settles the draft route: creating a second
+		// item back to back can leave the tree click landing before the first
+		// draft has finished mounting.
 		const pageTitle = `test-page-${Date.now()}`;
-		await page.getByLabel('Title').fill(pageTitle);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Save' })
-			.click();
-		await page.waitForLoadState('networkidle');
-
-		// Open the page and add content
-		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
-		await page.waitForURL(/\/draft\/[^/?#]+/);
-
-		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-		await expect(editor).toBeVisible({ timeout: 10000 });
+		const editor = await createDraftAndOpenEditor(page, space, pageTitle, {
+			waitForEditorApi: false,
+		});
 		await editor.click();
 		await page.keyboard.type('Test page content.');
-		await page.click('button:has-text("Save")');
+		await saveEditor(page);
 		await page.waitForLoadState('networkidle');
 
 		// Submit and merge both items
-		await page.getByRole('button', { name: 'Submit for Review' }).click();
-		await page.getByRole('button', { name: 'Submit' }).click();
-		await expect(page).toHaveURL(CHANGE_REQUEST_URL_RE, {
-			timeout: 10000,
+		// Submit for Review lives in the editor header, and adding an external
+		// link opens no editor. The sidebar's Merge is the manager's one-click
+		// path -- it walks the CR through submit, approve and merge.
+		const mergeButton = page.getByRole('button', {
+			name: 'Merge',
+			exact: true,
 		});
-		await publishChangeRequestFromReview(page);
-
-		// Navigate back to space and click on the page to get public view
-		if (spaceHref) {
-			await page.goto(spaceHref);
-		}
+		await expect(mergeButton).toBeVisible({ timeout: 10000 });
+		await mergeButton.click();
+		await expect(
+			page.locator('text=Change request merged').first(),
+		).toBeVisible({ timeout: 15000 });
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Click on the page
diff --git a/e2e/tests/generated-og-image.spec.ts b/e2e/tests/generated-og-image.spec.ts
index 190d5edfe..871cf5421 100644
--- a/e2e/tests/generated-og-image.spec.ts
+++ b/e2e/tests/generated-og-image.spec.ts
@@ -1,10 +1,4 @@
-import { expect, test } from '@playwright/test';
-import { createDoc, getDoc } from '../helpers/frappe';
-import {
-	type WikiSpace,
-	cleanupWikiSpacesByRoute,
-	createTestWikiDocument,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
 
 /**
  * Auto-generated OG (meta) images.
@@ -22,41 +16,20 @@ import {
  * template work and must never regress.
  */
 test.describe('Generated OG image', () => {
-	const route = `generated-og-${Date.now()}`;
 	let pageUrl: string;
 
-	test.beforeAll(async ({ request }) => {
-		const space = await createDoc<WikiSpace & { root_group: string }>(
-			request,
-			'Wiki Space',
-			{
-				route,
-				space_name: route,
-				is_published: true,
-				// Guest Read makes the card reachable by an anonymous scraper.
-				roles: [{ role: 'Guest', permission_level: 'Read' }],
-			},
-		);
-
-		const doc = await createTestWikiDocument(request, {
-			title: 'Generated OG Page',
-			content: '# Heading\n\nReader body content.',
-			is_published: true,
-			wiki_space: space.name,
-			parent_wiki_document: space.root_group,
+	test.beforeAll(async ({ wikiSuite }) => {
+		const space = await wikiSuite.space({
+			// Guest Read makes the card reachable by an anonymous scraper.
+			roles: [{ role: 'Guest', permission_level: 'Read' }],
+			pages: [
+				{
+					title: 'Generated OG Page',
+					content: '# Heading\n\nReader body content.',
+				},
+			],
 		});
-
-		// The controller computes the final stored route; read it back.
-		const stored = await getDoc<{ route: string }>(
-			request,
-			'Wiki Document',
-			doc.name,
-		);
-		pageUrl = `/${stored.route}`;
-	});
-
-	test.afterAll(async ({ request }) => {
-		await cleanupWikiSpacesByRoute(request, route);
+		pageUrl = `/${space.page('Generated OG Page').route}`;
 	});
 
 	test('the public page advertises a card the endpoint can actually serve', async ({
diff --git a/e2e/tests/git-sync-edit-on-github.spec.ts b/e2e/tests/git-sync-edit-on-github.spec.ts
index 22aeed376..47fa6752a 100644
--- a/e2e/tests/git-sync-edit-on-github.spec.ts
+++ b/e2e/tests/git-sync-edit-on-github.spec.ts
@@ -1,11 +1,4 @@
-import { expect, test } from '@playwright/test';
-import { createDoc } from '../helpers/frappe';
-import { appUrl } from '../helpers/routes';
-import {
-	type WikiDocument,
-	type WikiSpace,
-	cleanupWikiSpacesByRoute,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
 
 /**
  * TB2 — "Edit on GitHub" on a synced page.
@@ -20,47 +13,31 @@ test.describe('Git-synced space — Edit on GitHub (TB2)', () => {
 	const REPO = 'frappe/wiki';
 	const BRANCH = 'main';
 
-	let route: string;
-
-	test.afterEach(async ({ request }) => {
-		if (route) await cleanupWikiSpacesByRoute(request, route);
-		route = '';
-	});
-
 	test('menu item opens the source file in GitHub editor', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		route = `git-sync-edit-${Date.now()}`;
-		const space = await createDoc<WikiSpace & { root_group: string }>(
-			request,
-			'Wiki Space',
-			{
-				route,
-				space_name: route,
-				is_published: true,
-				git_synced: 1,
-				repo_full_name: REPO,
-				branch: BRANCH,
-				last_sync_status: 'Success',
-				last_sync_time: '2026-01-01 00:00:00',
-			},
-		);
-
-		// A nested leaf page with a repo-relative source_path.
+		// last_sync_time is set so SpaceDetails treats the space as already
+		// synced and skips the auto initial-sync (which would hit GitHub).
+		// The leaf carries a repo-relative source_path — the GitHub trip's input.
 		const leafSourcePath = 'docs/guides/setup.md';
 		const leafTitle = `Setup ${Date.now()}`;
-		await createDoc<WikiDocument>(request, 'Wiki Document', {
-			title: leafTitle,
-			route: `${route}/setup`,
-			content: '# Setup\n\nFrom the repo.',
-			wiki_space: space.name,
-			parent_wiki_document: space.root_group,
-			is_published: true,
-			source_path: leafSourcePath,
+		const space = await wiki.space({
+			git_synced: 1,
+			repo_full_name: REPO,
+			branch: BRANCH,
+			last_sync_status: 'Success',
+			last_sync_time: '2026-01-01 00:00:00',
+			pages: [
+				{
+					title: leafTitle,
+					content: '# Setup\n\nFrom the repo.',
+					source_path: leafSourcePath,
+				},
+			],
 		});
 
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Open the synced page.
@@ -79,10 +56,11 @@ test.describe('Git-synced space — Edit on GitHub (TB2)', () => {
 			};
 		});
 
-		await page.getByRole('button', { name: 'More actions' }).click();
-		const editItem = page.getByRole('menuitem', { name: 'Edit on GitHub' });
-		await expect(editItem).toBeVisible();
-		await editItem.click();
+		// A synced page carries the GitHub trip in its header, not behind the
+		// page menu — the menu holds only edit actions the page cannot offer.
+		const editButton = page.getByRole('button', { name: 'Edit on GitHub' });
+		await expect(editButton).toBeVisible();
+		await editButton.click();
 
 		const opened = await page.evaluate(
 			// @ts-expect-error test-only hook
diff --git a/e2e/tests/git-sync-readonly.spec.ts b/e2e/tests/git-sync-readonly.spec.ts
index 40e04948b..e919c0e36 100644
--- a/e2e/tests/git-sync-readonly.spec.ts
+++ b/e2e/tests/git-sync-readonly.spec.ts
@@ -1,11 +1,4 @@
-import { expect, test } from '@playwright/test';
-import { createDoc } from '../helpers/frappe';
-import { appUrl } from '../helpers/routes';
-import {
-	type WikiSpace,
-	cleanupWikiSpacesByRoute,
-	createTestWikiDocument,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
 
 /**
  * TB1b-ii — a git-synced Wiki Space renders read-only in the authoring SPA.
@@ -20,45 +13,28 @@ test.describe('Git-synced space (read-only)', () => {
 	const REPO = 'frappe/wiki';
 	const BRANCH = 'main';
 
-	let route: string;
-
-	test.afterEach(async ({ request }) => {
-		if (route) await cleanupWikiSpacesByRoute(request, route);
-		route = '';
-	});
-
 	test('renders read-only with no editing affordances', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		route = `git-sync-ro-${Date.now()}`;
 		// last_sync_time is set so SpaceDetails treats the space as already
 		// synced and skips the auto initial-sync (which would hit GitHub).
-		const space = await createDoc<WikiSpace & { root_group: string }>(
-			request,
-			'Wiki Space',
-			{
-				route,
-				space_name: route,
-				is_published: true,
-				git_synced: 1,
-				repo_full_name: REPO,
-				branch: BRANCH,
-				last_sync_status: 'Success',
-				last_sync_time: '2026-01-01 00:00:00',
-			},
-		);
-
 		const pageTitle = `Synced Page ${Date.now()}`;
-		await createTestWikiDocument(request, {
-			title: pageTitle,
-			content: '# Synced Heading\n\nThis content comes from the repo.',
-			wiki_space: space.name,
-			parent_wiki_document: space.root_group,
-			is_published: true,
+		const space = await wiki.space({
+			git_synced: 1,
+			repo_full_name: REPO,
+			branch: BRANCH,
+			last_sync_status: 'Success',
+			last_sync_time: '2026-01-01 00:00:00',
+			pages: [
+				{
+					title: pageTitle,
+					content: '# Synced Heading\n\nThis content comes from the repo.',
+				},
+			],
 		});
 
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Synced banner (shared SpaceChromeBar): the repo link marks it as synced
@@ -69,7 +45,9 @@ test.describe('Git-synced space (read-only)', () => {
 		await expect(page.getByRole('button', { name: 'Sync now' })).toBeVisible();
 
 		// No create / mutation affordances in the sidebar.
-		await expect(page.locator('button[title="Add"]')).toHaveCount(0);
+		await expect(
+			page.getByRole('button', { name: 'New page', exact: true }),
+		).toHaveCount(0);
 
 		// Open the synced page and confirm the viewer is non-editable.
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
diff --git a/e2e/tests/global.teardown.ts b/e2e/tests/global.teardown.ts
new file mode 100644
index 000000000..55645e838
--- /dev/null
+++ b/e2e/tests/global.teardown.ts
@@ -0,0 +1,31 @@
+import { test as teardown } from '@playwright/test';
+import { E2E_ROUTE_PREFIX } from '../helpers/factory';
+import { deleteDoc, getList } from '../helpers/frappe';
+
+/**
+ * Sweep spaces a killed or crashed run left behind.
+ *
+ * The factory destroys what it seeds, so this only ever has work to do when a
+ * run died between seeding and teardown. Scoped to the `e2e-` route prefix, so
+ * it cannot reach a real space.
+ */
+teardown('sweep leftover e2e spaces', async ({ request }) => {
+	const leftovers = await getList<{ name: string; route: string }>(
+		request,
+		'Wiki Space',
+		{
+			fields: ['name', 'route'],
+			filters: { route: ['like', `${E2E_ROUTE_PREFIX}-%`] },
+			limit: 0,
+		},
+	).catch(() => []);
+
+	for (const space of leftovers) {
+		try {
+			await deleteDoc(request, 'Wiki Space', space.name);
+			console.log(`swept leftover space ${space.route}`);
+		} catch (error) {
+			console.warn(`failed to sweep ${space.route}:`, error);
+		}
+	}
+});
diff --git a/e2e/tests/iframe-embed.spec.ts b/e2e/tests/iframe-embed.spec.ts
index 4f2c7c492..e9f4f963e 100644
--- a/e2e/tests/iframe-embed.spec.ts
+++ b/e2e/tests/iframe-embed.spec.ts
@@ -1,6 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
-import { openNewPageDialog } from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import { createDraftAndOpenEditor } from '../helpers/wiki';
 
 /**
  * Covers the iframe embed extension added for frappe/wiki#599.
@@ -45,45 +44,16 @@ declare global {
 	}
 }
 
-/**
- * Create a draft page and open the editor. Mirrors the helper in
- * image-viewer.spec.ts — duplicated here rather than exported so changes
- * to one test don't ripple into others.
- */
-async function createDraftAndOpenEditor(
-	page: import('@playwright/test').Page,
-	title: string,
-) {
-	await page.goto(APP_BASE);
-	await page.waitForLoadState('networkidle');
-
-	const spaceLink = page.locator(spaceLinkSelector()).first();
-	await expect(spaceLink).toBeVisible({ timeout: 5000 });
-	await spaceLink.click();
-	await page.waitForLoadState('networkidle');
-
-	await openNewPageDialog(page);
-
-	await page.getByLabel('Title').fill(title);
-	await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
-	await page.waitForLoadState('networkidle');
-
-	await page.locator('aside').getByText(title, { exact: true }).click();
-
-	const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-	await expect(editor).toBeVisible({ timeout: 10000 });
-
-	await page.waitForFunction(() => window.wikiEditor !== undefined, {
-		timeout: 10000,
-	});
-	return editor;
-}
-
 test.describe('Iframe embed extension', () => {
 	test('parses a YouTube iframe HTML block from markdown into a node', async ({
 		page,
+		wiki,
 	}) => {
-		await createDraftAndOpenEditor(page, `iframe-parse-${Date.now()}`);
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`iframe-parse-${Date.now()}`,
+		);
 
 		const result = await page.evaluate((html) => {
 			window.wikiEditor.commands.setContent(html, { contentType: 'markdown' });
@@ -107,8 +77,15 @@ test.describe('Iframe embed extension', () => {
 		expect(result.height).toBe('315');
 	});
 
-	test('renders the iframe preview inside the editor', async ({ page }) => {
-		await createDraftAndOpenEditor(page, `iframe-preview-${Date.now()}`);
+	test('renders the iframe preview inside the editor', async ({
+		page,
+		wiki,
+	}) => {
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`iframe-preview-${Date.now()}`,
+		);
 
 		await page.evaluate((html) => {
 			window.wikiEditor.commands.setContent(html, { contentType: 'markdown' });
@@ -123,8 +100,13 @@ test.describe('Iframe embed extension', () => {
 
 	test('round-trips iframe markdown without mutating the src', async ({
 		page,
+		wiki,
 	}) => {
-		await createDraftAndOpenEditor(page, `iframe-roundtrip-${Date.now()}`);
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`iframe-roundtrip-${Date.now()}`,
+		);
 
 		const { md1, md2 } = await page.evaluate((html) => {
 			window.wikiEditor.commands.setContent(html, { contentType: 'markdown' });
@@ -172,8 +154,12 @@ test.describe('Iframe embed extension', () => {
 		}, text);
 	}
 
-	test('turns a pasted YouTube link into an embed', async ({ page }) => {
-		await createDraftAndOpenEditor(page, `iframe-paste-${Date.now()}`);
+	test('turns a pasted YouTube link into an embed', async ({ page, wiki }) => {
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`iframe-paste-${Date.now()}`,
+		);
 
 		await pasteText(page, 'https://www.youtube.com/watch?v=QDia3e12czc');
 
@@ -195,8 +181,13 @@ test.describe('Iframe embed extension', () => {
 	// entire payload is the URL should embed.
 	test('leaves a pasted sentence containing a link as text', async ({
 		page,
+		wiki,
 	}) => {
-		await createDraftAndOpenEditor(page, `iframe-paste-inline-${Date.now()}`);
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`iframe-paste-inline-${Date.now()}`,
+		);
 
 		await pasteText(
 			page,
@@ -216,8 +207,13 @@ test.describe('Iframe embed extension', () => {
 
 	test('accepts the full iframe tag in the /embed URL input', async ({
 		page,
+		wiki,
 	}) => {
-		await createDraftAndOpenEditor(page, `iframe-slash-${Date.now()}`);
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`iframe-slash-${Date.now()}`,
+		);
 
 		// Insert an empty placeholder via the extension command (skips the
 		// slash-menu fuzzy-find noise and tests the URL input directly).
diff --git a/e2e/tests/image-viewer.spec.ts b/e2e/tests/image-viewer.spec.ts
index b3b8c3b08..d0d36fb08 100644
--- a/e2e/tests/image-viewer.spec.ts
+++ b/e2e/tests/image-viewer.spec.ts
@@ -1,13 +1,12 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import type { SeededSpace } from '../helpers/factory';
 import { getList } from '../helpers/frappe';
+import { CHANGE_REQUEST_URL_RE } from '../helpers/routes';
 import {
-	APP_BASE,
-	CHANGE_REQUEST_URL_RE,
-	spaceLinkSelector,
-} from '../helpers/routes';
-import {
+	currentDraftDocKey,
 	openNewPageDialog,
 	publishChangeRequestFromReview,
+	saveEditor,
 } from '../helpers/wiki';
 
 interface WikiDocumentRoute {
@@ -34,16 +33,12 @@ declare global {
 async function createAndPublishPage(
 	page: import('@playwright/test').Page,
 	request: import('@playwright/test').APIRequestContext,
+	space: SeededSpace,
 	title: string,
 	markdownContent: string,
 ): Promise<string> {
 	await page.setViewportSize({ width: 1100, height: 900 });
-	await page.goto(APP_BASE);
-	await page.waitForLoadState('networkidle');
-
-	const spaceLink = page.locator(spaceLinkSelector()).first();
-	await expect(spaceLink).toBeVisible({ timeout: 5000 });
-	await spaceLink.click();
+	await page.goto(space.url());
 	await page.waitForLoadState('networkidle');
 
 	await openNewPageDialog(page);
@@ -68,9 +63,7 @@ async function createAndPublishPage(
 		const match = window.location.pathname.match(/\/draft\/([^/?#]+)/);
 		return match && !decodeURIComponent(match[1]).startsWith('tmp_');
 	});
-	const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-	expect(draftMatch).toBeTruthy();
-	const docKey = decodeURIComponent(draftMatch?.[1] ?? '');
+	const docKey = await currentDraftDocKey(page);
 
 	const editor = page.locator('.ProseMirror, [contenteditable="true"]');
 	await expect(editor).toBeVisible({ timeout: 10000 });
@@ -87,7 +80,7 @@ async function createAndPublishPage(
 	await editor.click();
 	await page.waitForTimeout(500);
 
-	await page.getByRole('button', { name: 'Save', exact: true }).click();
+	await saveEditor(page);
 	await page.waitForLoadState('networkidle');
 
 	const submitButton = page.getByRole('button', { name: 'Submit for Review' });
@@ -112,6 +105,7 @@ test.describe('Image Viewer / Lightbox', () => {
 	test('should open lightbox when clicking a prose image and close on overlay click', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		const pageTitle = `lightbox-test-${Date.now()}`;
 		const markdown = `## Image Test
@@ -125,6 +119,7 @@ Some text after the image.`;
 		const publicUrl = await createAndPublishPage(
 			page,
 			request,
+			await wiki.space(),
 			pageTitle,
 			markdown,
 		);
@@ -174,7 +169,11 @@ Some text after the image.`;
 		await publicPage.close();
 	});
 
-	test('should close lightbox on Escape key', async ({ page, request }) => {
+	test('should close lightbox on Escape key', async ({
+		page,
+		request,
+		wiki,
+	}) => {
 		const pageTitle = `lightbox-esc-test-${Date.now()}`;
 		const markdown = `## Escape Key Test
 
@@ -183,6 +182,7 @@ Some text after the image.`;
 		const publicUrl = await createAndPublishPage(
 			page,
 			request,
+			await wiki.space(),
 			pageTitle,
 			markdown,
 		);
@@ -211,6 +211,7 @@ Some text after the image.`;
 	test('should wire up images loaded via SPA navigation', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		// Create two pages — one with an image, one without
 		const pageTitle1 = `lightbox-spa-1-${Date.now()}`;
@@ -224,15 +225,20 @@ Just some text, no images here.`;
 
 ![SPA test image](https://placehold.co/600x400/png)`;
 
+		// A space each: both are reached by URL, never through prev/next, and
+		// publishing twice into one space leaves the second editor holding a
+		// change request the first merge has already moved past.
 		const publicUrl1 = await createAndPublishPage(
 			page,
 			request,
+			await wiki.space(),
 			pageTitle1,
 			markdown1,
 		);
 		const publicUrl2 = await createAndPublishPage(
 			page,
 			request,
+			await wiki.space(),
 			pageTitle2,
 			markdown2,
 		);
diff --git a/e2e/tests/link-persistence.spec.ts b/e2e/tests/link-persistence.spec.ts
index 944b12de9..129200aa5 100644
--- a/e2e/tests/link-persistence.spec.ts
+++ b/e2e/tests/link-persistence.spec.ts
@@ -1,13 +1,10 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
 import { getList } from '../helpers/frappe';
-import {
-	APP_BASE,
-	CHANGE_REQUEST_URL_RE,
-	spaceLinkSelector,
-} from '../helpers/routes';
+import { APP_BASE, CHANGE_REQUEST_URL_RE } from '../helpers/routes';
 import {
 	openNewPageDialog,
 	publishChangeRequestFromReview,
+	saveEditor,
 } from '../helpers/wiki';
 
 interface WikiDocument {
@@ -22,14 +19,10 @@ test.describe('Link Persistence Tests', () => {
 	test('should save links as markdown to the database', async ({
 		page,
 		request,
+		wiki,
 	}) => {
-		// Navigate to wiki and click first space
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Create a new page
@@ -83,8 +76,7 @@ test.describe('Link Persistence Tests', () => {
 		await expect(editorLink).toHaveText('Example Website');
 
 		// Save the draft
-		const saveButton = page.locator('button:has-text("Save")');
-		await saveButton.click();
+		await saveEditor(page);
 		await page.waitForLoadState('networkidle');
 		await page.waitForTimeout(3000); // Wait for DB commit
 
diff --git a/e2e/tests/local-first-store.spec.ts b/e2e/tests/local-first-store.spec.ts
index af7c26fdb..451343d0b 100644
--- a/e2e/tests/local-first-store.spec.ts
+++ b/e2e/tests/local-first-store.spec.ts
@@ -1,8 +1,19 @@
-import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import { type WikiFactory, uniqueRoute } from '../helpers/factory';
 import { callMethod } from '../helpers/frappe';
 import { delayMethod, failMethod } from '../helpers/mock';
 import { SPACE_URL_RE, appUrl } from '../helpers/routes';
-import { openNewPageDialog } from '../helpers/wiki';
+import { openNewPageDialog, saveEditor } from '../helpers/wiki';
+
+/**
+ * The sidebar's sync alert only speaks when something is in flight or wrong;
+ * a settled draft shows nothing at all. "Saved" is therefore the absence of
+ * the alert, not a label to wait for.
+ */
+async function expectSyncSettled(page: Page, timeout = 5000) {
+	await expect(page.getByTestId('sync-state-alert')).toBeHidden({ timeout });
+}
 
 interface DraftNode {
 	docKey: string;
@@ -43,10 +54,16 @@ declare global {
 const CR_METHOD_PREFIX =
 	'wiki.frappe_wiki.doctype.wiki_change_request.wiki_change_request';
 
-async function createSpaceViaUI(
-	page: import('@playwright/test').Page,
-	{ name, route }: { name: string; route: string },
-) {
+/**
+ * Build a space through the New Space dialog.
+ *
+ * These specs need the store hydrated exactly the way the app hydrates it, so
+ * the dialog is load-bearing here and the API factory cannot stand in. The
+ * factory still adopts the result, so the space is torn down with the test.
+ */
+async function createSpaceViaUI(page: Page, wiki: WikiFactory) {
+	const route = uniqueRoute('local-first');
+	const name = route;
 	await page.goto(appUrl('spaces'));
 	await page.waitForLoadState('networkidle');
 	await page.getByRole('button', { name: 'New Space' }).click();
@@ -67,13 +84,11 @@ async function createSpaceViaUI(
 		timeout: 10000,
 	});
 	const spaceId = page.url().split(`${appUrl('spaces')}/`)[1];
+	wiki.adopt(spaceId);
 	return { spaceId };
 }
 
-async function createPageViaUI(
-	page: import('@playwright/test').Page,
-	title: string,
-) {
+async function createPageViaUI(page: Page, title: string) {
 	await openNewPageDialog(page);
 	await page.getByLabel('Title').fill(title);
 	await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
@@ -82,14 +97,13 @@ async function createPageViaUI(
 test.describe('Local-first draft workspace', () => {
 	test('delayed apply_cr_operations create: page appears immediately and content survives promotion', async ({
 		page,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Delay Create Space ${timestamp}`;
-		const spaceRoute = `delay-create-space-${timestamp}`;
 		const pageTitle = `delay-create-page-${timestamp}`;
 		const typedContent = `Typed before backend confirmed ${timestamp}`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 
 		// Inject 2.5s of latency on apply_cr_operations so the optimistic UI
 		// is observable for the full duration before the temp key is promoted.
@@ -140,22 +154,19 @@ test.describe('Local-first draft workspace', () => {
 
 		// Promotion triggers a save against the real key. Let that intercepted
 		// request finish before unregistering its delayed route handler.
-		await expect(page.getByText('All changes saved')).toBeVisible({
-			timeout: 6000,
-		});
+		await expectSyncSettled(page, 6000);
 		await unroute();
 	});
 
 	test('failed apply_cr_operations save: content stays visible and submit is blocked', async ({
 		page,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Fail Update Space ${timestamp}`;
-		const spaceRoute = `fail-update-space-${timestamp}`;
 		const pageTitle = `fail-update-page-${timestamp}`;
 		const typedContent = `Should survive failed save ${timestamp}`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 		await createPageViaUI(page, pageTitle);
 
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
@@ -193,8 +204,7 @@ test.describe('Local-first draft workspace', () => {
 				contentType: 'markdown',
 			});
 		}, typedContent);
-		await editor.click();
-		await page.getByRole('button', { name: 'Save' }).click();
+		await saveEditor(page);
 
 		// Sync-state badge should report failure.
 		await expect(page.getByText('Sync failed')).toBeVisible({
@@ -214,14 +224,13 @@ test.describe('Local-first draft workspace', () => {
 
 	test('Reload latest after a failed save clears the conflict and re-enables Submit', async ({
 		page,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Reload Latest Space ${timestamp}`;
-		const spaceRoute = `reload-latest-space-${timestamp}`;
 		const pageTitle = `reload-latest-page-${timestamp}`;
 		const typedContent = `Will fail to save ${timestamp}`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 		await createPageViaUI(page, pageTitle);
 
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
@@ -252,8 +261,7 @@ test.describe('Local-first draft workspace', () => {
 				contentType: 'markdown',
 			});
 		}, typedContent);
-		await editor.click();
-		await page.getByRole('button', { name: 'Save' }).click();
+		await saveEditor(page);
 
 		// The save fails; banner surfaces it and Reload latest appears.
 		await expect(page.getByText('Sync failed')).toBeVisible({ timeout: 5000 });
@@ -271,34 +279,33 @@ test.describe('Local-first draft workspace', () => {
 		await unroute();
 		await reloadButton.click();
 
-		// Sync-failed banner clears and the recovery button hides — but
-		// Submit MUST stay disabled because the editor's DOM still holds
-		// the user's unsaved typed content. Unblocking here would let the
-		// user submit a CR that doesn't contain what they see on screen.
+		// Sync-failed banner clears and the recovery button hides — but the
+		// editor's DOM still holds the user's unsaved typed content, so the
+		// workspace must keep reporting it. Submitting from here flushes it
+		// first; what must never happen is the state going quiet while the
+		// screen holds text the CR does not.
 		await expect(page.getByText('Sync failed')).toBeHidden({ timeout: 5000 });
 		await expect(reloadButton).toBeHidden();
-		await expect(submitButton).toBeDisabled();
-
-		// Resolving the typed content (Save now succeeds because the
-		// mock is gone and operation_version is fresh) is what finally
-		// re-enables Submit.
-		await page.getByRole('button', { name: 'Save' }).click();
-		await expect(page.getByText('All changes saved')).toBeVisible({
+		await expect(page.getByText('Unsaved changes')).toBeVisible({
 			timeout: 5000,
 		});
+
+		// Resolving the typed content (Save now succeeds because the
+		// mock is gone and operation_version is fresh) settles the state.
+		await saveEditor(page);
+		await expectSyncSettled(page, 5000);
 		await expect(submitButton).toBeEnabled();
 	});
 
-	test('typing in editor disables Submit until the change is flushed to the CR', async ({
+	test('typing in editor reports unsaved content until the change is flushed to the CR', async ({
 		page,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Dirty Editor Space ${timestamp}`;
-		const spaceRoute = `dirty-editor-space-${timestamp}`;
 		const pageTitle = `dirty-editor-page-${timestamp}`;
 		const typedContent = `Must not be dropped by submit ${timestamp}`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 		await createPageViaUI(page, pageTitle);
 
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
@@ -335,34 +342,30 @@ test.describe('Local-first draft workspace', () => {
 		}, typedContent);
 		await editor.click();
 
-		// The fix: Submit must be disabled while the editor has unsaved
-		// typed content the store hasn't received yet. Without it, the user
-		// can submit a stale backend CR and silently lose the latest text.
-		await expect(submitButton).toBeDisabled();
-
-		// Flushing via manual Save lands the content and re-enables Submit.
-		await page.getByRole('button', { name: 'Save' }).click();
-		await expect(page.getByText('All changes saved')).toBeVisible({
+		// The fix: the workspace must report unsaved editor content the store
+		// hasn't received yet. Submitting flushes it first — what must never
+		// happen is a submit that silently loses the latest text.
+		await expect(page.getByText('Unsaved changes')).toBeVisible({
 			timeout: 5000,
 		});
+
+		// Flushing by hand lands the content and settles the sync state.
+		await saveEditor(page);
+		await expectSyncSettled(page, 5000);
 		await expect(submitButton).toBeEnabled();
 	});
 
-	test('navigating away from dirty content auto-saves it and re-enables Submit', async ({
+	test('navigating away from dirty content auto-saves it', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Navigate Dirty Space ${timestamp}`;
-		const spaceRoute = `navigate-dirty-space-${timestamp}`;
 		const firstTitle = `navigate-first-page-${timestamp}`;
 		const secondTitle = `navigate-second-page-${timestamp}`;
 		const typedContent = `Must survive document navigation ${timestamp}`;
 
-		const { spaceId } = await createSpaceViaUI(page, {
-			name: spaceName,
-			route: spaceRoute,
-		});
+		const { spaceId } = await createSpaceViaUI(page, wiki);
 		const draft = await callMethod<{ name: string }>(
 			request,
 			`${CR_METHOD_PREFIX}.get_or_create_draft_change_request`,
@@ -415,13 +418,13 @@ test.describe('Local-first draft workspace', () => {
 			});
 		}, typedContent);
 		await editor.click();
-		await expect(submitButton).toBeDisabled();
+		await expect(page.getByText('Unsaved changes')).toBeVisible({
+			timeout: 5000,
+		});
 
 		// Navigating away flushes the dirty buffer to the server.
 		await page.locator('aside').getByText(secondTitle, { exact: true }).click();
-		await expect(page.getByText('All changes saved')).toBeVisible({
-			timeout: 5000,
-		});
+		await expectSyncSettled(page, 5000);
 		await expect(submitButton).toBeEnabled();
 
 		await page.locator('aside').getByText(firstTitle, { exact: true }).click();
@@ -429,17 +432,16 @@ test.describe('Local-first draft workspace', () => {
 		await expect(submitButton).toBeEnabled();
 	});
 
-	test('typing then undoing back to saved content re-enables Submit without a redundant save', async ({
+	test('typing then undoing back to saved content clears the unsaved state without a redundant save', async ({
 		page,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Undo Editor Space ${timestamp}`;
-		const spaceRoute = `undo-editor-space-${timestamp}`;
 		const pageTitle = `undo-editor-page-${timestamp}`;
 		const baselineContent = `Baseline ${timestamp}`;
 		const transientContent = `Transient typing ${timestamp}`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 		await createPageViaUI(page, pageTitle);
 
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
@@ -466,52 +468,42 @@ test.describe('Local-first draft workspace', () => {
 				contentType: 'markdown',
 			});
 		}, baselineContent);
-		await editor.click();
-		await page.getByRole('button', { name: 'Save' }).click();
-		await expect(page.getByText('All changes saved')).toBeVisible({
-			timeout: 5000,
-		});
+		await saveEditor(page);
+		await expectSyncSettled(page, 5000);
 
-		const submitButton = page.getByRole('button', {
-			name: 'Submit for Review',
-		});
-		await expect(submitButton).toBeEnabled();
-
-		// Type something new — Submit should go disabled.
+		// Type something new — the buffer diverges from the last saved snapshot.
 		await page.evaluate((content) => {
 			window.wikiEditor.commands.setContent(content, {
 				contentType: 'markdown',
 			});
 		}, transientContent);
 		await editor.click();
-		await expect(submitButton).toBeDisabled();
+		await expect(page.getByText('Unsaved changes')).toBeVisible({
+			timeout: 5000,
+		});
 
 		// Revert back to the saved content. No save is issued; the derived
-		// local snapshot converges with the baseline and the banner gate
-		// releases on its own.
+		// local snapshot converges with the baseline and the unsaved state
+		// clears on its own.
 		await page.evaluate((content) => {
 			window.wikiEditor.commands.setContent(content, {
 				contentType: 'markdown',
 			});
 		}, baselineContent);
 		await editor.click();
-		await expect(submitButton).toBeEnabled();
+		await expectSyncSettled(page, 5000);
 	});
 
 	test('dirty content on an existing published page survives browser refresh', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Published Persist Space ${timestamp}`;
-		const spaceRoute = `published-persist-space-${timestamp}`;
 		const pageTitle = `published-persist-page-${timestamp}`;
 		const typedContent = `Existing page survives refresh ${timestamp}`;
 
-		const { spaceId } = await createSpaceViaUI(page, {
-			name: spaceName,
-			route: spaceRoute,
-		});
+		const { spaceId } = await createSpaceViaUI(page, wiki);
 		const initialDraft = await callMethod<{ name: string }>(
 			request,
 			`${CR_METHOD_PREFIX}.get_or_create_draft_change_request`,
@@ -569,10 +561,8 @@ test.describe('Local-first draft workspace', () => {
 			timeout: 5000,
 		});
 
-		await page.getByRole('button', { name: 'Save' }).click();
-		await expect(page.getByText('All changes saved')).toBeVisible({
-			timeout: 5000,
-		});
+		await saveEditor(page);
+		await expectSyncSettled(page, 5000);
 		const submitButton = page.getByRole('button', {
 			name: 'Submit for Review',
 		});
@@ -581,14 +571,13 @@ test.describe('Local-first draft workspace', () => {
 
 	test('dirty editor content survives a browser refresh via IndexedDB', async ({
 		page,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Persist Space ${timestamp}`;
-		const spaceRoute = `persist-space-${timestamp}`;
 		const pageTitle = `persist-page-${timestamp}`;
 		const typedContent = `Survives a refresh ${timestamp}`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 		await createPageViaUI(page, pageTitle);
 
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
@@ -627,7 +616,7 @@ test.describe('Local-first draft workspace', () => {
 
 		// Navigate back to the draft page. The editor should reopen on the
 		// same content the user last typed, and the banner should report
-		// "Unsaved changes" with Submit still gated.
+		// "Unsaved changes".
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
 		const restoredEditor = page
 			.locator('.ProseMirror, [contenteditable="true"]')
@@ -638,30 +627,24 @@ test.describe('Local-first draft workspace', () => {
 			timeout: 5000,
 		});
 
-		const submitButton = page.getByRole('button', {
-			name: 'Submit for Review',
-		});
-		await expect(submitButton).toBeDisabled();
-
-		// Saving the restored draft clears the IDB entry and re-enables
-		// Submit, just like a normal first-save.
-		await page.getByRole('button', { name: 'Save' }).click();
-		await expect(page.getByText('All changes saved')).toBeVisible({
-			timeout: 5000,
-		});
-		await expect(submitButton).toBeEnabled();
+		// Saving the restored draft clears the IDB entry and settles the sync
+		// state, just like a normal first-save.
+		await saveEditor(page);
+		await expectSyncSettled(page, 5000);
+		await expect(
+			page.getByRole('button', { name: 'Submit for Review' }),
+		).toBeEnabled();
 	});
 
 	test('a persisted draft identical to the server self-heals instead of gating Submit', async ({
 		page,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Phantom Draft Space ${timestamp}`;
-		const spaceRoute = `phantom-draft-space-${timestamp}`;
 		const pageTitle = `phantom-draft-page-${timestamp}`;
 		const savedContent = `Already on the server ${timestamp}`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 		await createPageViaUI(page, pageTitle);
 
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
@@ -688,11 +671,8 @@ test.describe('Local-first draft workspace', () => {
 				contentType: 'markdown',
 			});
 		}, savedContent);
-		await editor.click();
-		await page.getByRole('button', { name: 'Save' }).click();
-		await expect(page.getByText('All changes saved')).toBeVisible({
-			timeout: 5000,
-		});
+		await saveEditor(page);
+		await expectSyncSettled(page, 5000);
 
 		// Plant a persisted IndexedDB draft whose content is byte-identical to
 		// what the server already holds — a phantom with no real unsaved
@@ -776,14 +756,13 @@ test.describe('Local-first draft workspace', () => {
 	test('a restored draft matching normalized server markdown self-heals after editor mount', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Normalized Draft Space ${timestamp}`;
-		const spaceRoute = `normalized-draft-space-${timestamp}`;
 		const pageTitle = `normalized-draft-page-${timestamp}`;
 		const rawServerContent = `Line A ${timestamp}\nLine B`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 		await createPageViaUI(page, pageTitle);
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
 		await page.waitForFunction(
@@ -858,15 +837,14 @@ test.describe('Local-first draft workspace', () => {
 	test('saving again while the first save is in flight persists the latest content', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Queued Save Space ${timestamp}`;
-		const spaceRoute = `queued-save-space-${timestamp}`;
 		const pageTitle = `queued-save-page-${timestamp}`;
 		const firstContent = `First save ${timestamp}`;
 		const latestContent = `Latest save ${timestamp}`;
 
-		await createSpaceViaUI(page, { name: spaceName, route: spaceRoute });
+		await createSpaceViaUI(page, wiki);
 		await createPageViaUI(page, pageTitle);
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
 		await page.waitForFunction(
@@ -891,7 +869,7 @@ test.describe('Local-first draft workspace', () => {
 				contentType: 'markdown',
 			});
 		}, firstContent);
-		await page.getByRole('button', { name: 'Save' }).click();
+		await saveEditor(page);
 		await expect(page.getByText('Saving…')).toBeVisible();
 
 		await page.evaluate((content) => {
@@ -901,9 +879,7 @@ test.describe('Local-first draft workspace', () => {
 		}, latestContent);
 		await page.keyboard.press('Control+s');
 
-		await expect(page.getByText('All changes saved')).toBeVisible({
-			timeout: 8000,
-		});
+		await expectSyncSettled(page, 8000);
 		await unroute();
 
 		const { crName, docKey } = await page.evaluate(() => {
@@ -925,19 +901,15 @@ test.describe('Local-first draft workspace', () => {
 	test('delayed reorder: visual order stays stable across slow sync', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		const timestamp = Date.now();
-		const spaceName = `Delay Reorder Space ${timestamp}`;
-		const spaceRoute = `delay-reorder-space-${timestamp}`;
 		const groupTitle = `Reorder Group ${timestamp}`;
 		const pageTitles = ['1', '2', '3', '4'].map(
 			(n) => `Reorder Page ${n} ${timestamp}`,
 		);
 
-		const { spaceId } = await createSpaceViaUI(page, {
-			name: spaceName,
-			route: spaceRoute,
-		});
+		const { spaceId } = await createSpaceViaUI(page, wiki);
 
 		// Seed a group with 4 pages directly via the existing CR APIs so the
 		// test focuses on the reorder behaviour, not creation.
diff --git a/e2e/tests/markdown-breaks.spec.ts b/e2e/tests/markdown-breaks.spec.ts
index 7872af9ed..4aa59a6be 100644
--- a/e2e/tests/markdown-breaks.spec.ts
+++ b/e2e/tests/markdown-breaks.spec.ts
@@ -1,7 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
 import { getList } from '../helpers/frappe';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
-import { openNewPageDialog } from '../helpers/wiki';
+import { createDraftAndOpenEditor, saveEditor } from '../helpers/wiki';
 
 interface WikiDocument {
 	name: string;
@@ -12,50 +11,16 @@ interface WikiDocument {
 }
 
 test.describe('Markdown Line Breaks', () => {
-	/**
-	 * Helper: navigate to a space and create a new page, returning the editor locator.
-	 */
-	async function createPageAndOpenEditor(
-		page: import('@playwright/test').Page,
-		pageTitle: string,
-	) {
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
-		await page.waitForLoadState('networkidle');
-
-		await openNewPageDialog(page);
-
-		await page.getByLabel('Title').fill(pageTitle);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Save' })
-			.click();
-		await page.waitForLoadState('networkidle');
-
-		const pageTitleInput = page.getByRole('textbox', { name: 'Page title' });
-		const openedCreatedPage = await pageTitleInput
-			.inputValue({ timeout: 2000 })
-			.then((value) => value === pageTitle)
-			.catch(() => false);
-		if (!openedCreatedPage) {
-			await page.locator('aside').getByText(pageTitle, { exact: true }).click();
-		}
-		await expect(pageTitleInput).toHaveValue(pageTitle, { timeout: 10000 });
-
-		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-		await expect(editor).toBeVisible({ timeout: 10000 });
-		return editor;
-	}
-
 	test('editor should round-trip single line breaks (soft breaks)', async ({
 		page,
+		wiki,
 	}) => {
 		const pageTitle = `md-breaks-soft-${Date.now()}`;
-		const editor = await createPageAndOpenEditor(page, pageTitle);
+		const editor = await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			pageTitle,
+		);
 
 		// Use the Tiptap editor API to set markdown content with single newlines
 		const result = await page.evaluate(() => {
@@ -91,9 +56,16 @@ test.describe('Markdown Line Breaks', () => {
 		expect(result.roundTrip).toBe(true);
 	});
 
-	test('editor should round-trip consecutive blank lines', async ({ page }) => {
+	test('editor should round-trip consecutive blank lines', async ({
+		page,
+		wiki,
+	}) => {
 		const pageTitle = `md-breaks-blank-${Date.now()}`;
-		const editor = await createPageAndOpenEditor(page, pageTitle);
+		const editor = await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			pageTitle,
+		);
 
 		const result = await page.evaluate(() => {
 			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
@@ -129,9 +101,14 @@ test.describe('Markdown Line Breaks', () => {
 
 	test('editor should round-trip multiple consecutive blank lines', async ({
 		page,
+		wiki,
 	}) => {
 		const pageTitle = `md-breaks-multi-${Date.now()}`;
-		const editor = await createPageAndOpenEditor(page, pageTitle);
+		const editor = await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			pageTitle,
+		);
 
 		const result = await page.evaluate(() => {
 			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
@@ -164,9 +141,14 @@ test.describe('Markdown Line Breaks', () => {
 
 	test('editor should round-trip mixed content: headings, breaks, and soft breaks', async ({
 		page,
+		wiki,
 	}) => {
 		const pageTitle = `md-breaks-mixed-${Date.now()}`;
-		const editor = await createPageAndOpenEditor(page, pageTitle);
+		const editor = await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			pageTitle,
+		);
 
 		const result = await page.evaluate(() => {
 			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
@@ -201,9 +183,14 @@ test.describe('Markdown Line Breaks', () => {
 
 	test('standard paragraph breaks should not create empty paragraphs', async ({
 		page,
+		wiki,
 	}) => {
 		const pageTitle = `md-breaks-standard-${Date.now()}`;
-		const editor = await createPageAndOpenEditor(page, pageTitle);
+		const editor = await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			pageTitle,
+		);
 
 		const result = await page.evaluate(() => {
 			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
@@ -232,9 +219,14 @@ test.describe('Markdown Line Breaks', () => {
 
 	test('blank lines should persist through save and reload', async ({
 		page,
+		wiki,
 	}) => {
 		const pageTitle = `md-breaks-persist-${Date.now()}`;
-		const editor = await createPageAndOpenEditor(page, pageTitle);
+		const editor = await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			pageTitle,
+		);
 
 		const inputMarkdown =
 			'First paragraph\n\n\n\nSecond paragraph\n\nLine A\nLine B';
@@ -252,7 +244,7 @@ test.describe('Markdown Line Breaks', () => {
 		}, inputMarkdown);
 
 		// Save the draft
-		await page.click('button:has-text("Save")');
+		await saveEditor(page);
 		await page.waitForLoadState('networkidle');
 		await page.waitForTimeout(2000);
 
diff --git a/e2e/tests/markdown-paste.spec.ts b/e2e/tests/markdown-paste.spec.ts
index 0637c971b..163d7888d 100644
--- a/e2e/tests/markdown-paste.spec.ts
+++ b/e2e/tests/markdown-paste.spec.ts
@@ -1,6 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
-import { openNewPageDialog } from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import { createDraftAndOpenEditor } from '../helpers/wiki';
 
 /**
  * Regression coverage for frappe/wiki#609:
@@ -12,46 +11,6 @@ import { openNewPageDialog } from '../helpers/wiki';
  * pages) the default ProseMirror handler keeps the rich formatting untouched.
  */
 test.describe('Markdown Paste (#609)', () => {
-	/**
-	 * Navigate to a space and create a new page, returning the editor locator.
-	 * Mirrors the harness used by markdown-breaks.spec.ts.
-	 */
-	async function createPageAndOpenEditor(
-		page: import('@playwright/test').Page,
-		pageTitle: string,
-	) {
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
-		await page.waitForLoadState('networkidle');
-
-		await openNewPageDialog(page);
-
-		await page.getByLabel('Title').fill(pageTitle);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Save' })
-			.click();
-		await page.waitForLoadState('networkidle');
-
-		const pageTitleInput = page.getByRole('textbox', { name: 'Page title' });
-		const openedCreatedPage = await pageTitleInput
-			.inputValue({ timeout: 2000 })
-			.then((value) => value === pageTitle)
-			.catch(() => false);
-		if (!openedCreatedPage) {
-			await page.locator('aside').getByText(pageTitle, { exact: true }).click();
-		}
-		await expect(pageTitleInput).toHaveValue(pageTitle, { timeout: 10000 });
-
-		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-		await expect(editor).toBeVisible({ timeout: 10000 });
-		return editor;
-	}
-
 	/**
 	 * Fire a real `paste` ClipboardEvent at the ProseMirror DOM node so the
 	 * editor's own `handlePaste` runs — exactly the path a user's Cmd+V takes.
@@ -91,9 +50,11 @@ test.describe('Markdown Paste (#609)', () => {
 
 	test('pasting plain-text markdown renders it (headings, bold, list)', async ({
 		page,
+		wiki,
 	}) => {
-		const editor = await createPageAndOpenEditor(
+		const editor = await createDraftAndOpenEditor(
 			page,
+			await wiki.space(),
 			`md-paste-${Date.now()}`,
 		);
 		await editor.click();
@@ -117,9 +78,11 @@ test.describe('Markdown Paste (#609)', () => {
 
 	test('pasting rich HTML keeps its formatting (does not re-parse as markdown)', async ({
 		page,
+		wiki,
 	}) => {
-		const editor = await createPageAndOpenEditor(
+		const editor = await createDraftAndOpenEditor(
 			page,
+			await wiki.space(),
 			`md-paste-html-${Date.now()}`,
 		);
 		await editor.click();
diff --git a/e2e/tests/mermaid.spec.ts b/e2e/tests/mermaid.spec.ts
index c2ae155ce..b670b8327 100644
--- a/e2e/tests/mermaid.spec.ts
+++ b/e2e/tests/mermaid.spec.ts
@@ -1,13 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { updateDoc } from '../helpers/frappe';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
-import {
-	createTestWikiDocument,
-	createTestWikiSpace,
-	deleteTestWikiDocument,
-	deleteTestWikiSpace,
-	openNewPageDialog,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import { createDraftAndOpenEditor } from '../helpers/wiki';
 
 /**
  * Covers the Mermaid diagram feature: the editor node (parse + live preview +
@@ -35,45 +27,16 @@ declare global {
 	}
 }
 
-/**
- * Create a draft page and open the editor. Mirrors the helper in
- * iframe-embed.spec.ts — duplicated here rather than exported so changes to one
- * test don't ripple into others.
- */
-async function createDraftAndOpenEditor(
-	page: import('@playwright/test').Page,
-	title: string,
-) {
-	await page.goto(APP_BASE);
-	await page.waitForLoadState('networkidle');
-
-	const spaceLink = page.locator(spaceLinkSelector()).first();
-	await expect(spaceLink).toBeVisible({ timeout: 5000 });
-	await spaceLink.click();
-	await page.waitForLoadState('networkidle');
-
-	await openNewPageDialog(page);
-
-	await page.getByLabel('Title').fill(title);
-	await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
-	await page.waitForLoadState('networkidle');
-
-	await page.locator('aside').getByText(title, { exact: true }).click();
-
-	const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-	await expect(editor).toBeVisible({ timeout: 10000 });
-
-	await page.waitForFunction(() => window.wikiEditor !== undefined, {
-		timeout: 10000,
-	});
-	return editor;
-}
-
 test.describe('Mermaid diagrams', () => {
 	test('parses a ```mermaid fence into a node and previews it as SVG', async ({
 		page,
+		wiki,
 	}) => {
-		await createDraftAndOpenEditor(page, `mermaid-edit-${Date.now()}`);
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`mermaid-edit-${Date.now()}`,
+		);
 
 		const code = await page.evaluate((md) => {
 			window.wikiEditor.commands.setContent(md, { contentType: 'markdown' });
@@ -91,8 +54,15 @@ test.describe('Mermaid diagrams', () => {
 		});
 	});
 
-	test('round-trips the mermaid fence without drift', async ({ page }) => {
-		await createDraftAndOpenEditor(page, `mermaid-roundtrip-${Date.now()}`);
+	test('round-trips the mermaid fence without drift', async ({
+		page,
+		wiki,
+	}) => {
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`mermaid-roundtrip-${Date.now()}`,
+		);
 
 		const { md1, md2 } = await page.evaluate((md) => {
 			window.wikiEditor.commands.setContent(md, { contentType: 'markdown' });
@@ -112,8 +82,13 @@ test.describe('Mermaid diagrams', () => {
 
 	test('renders multiple diagrams independently without colliding', async ({
 		page,
+		wiki,
 	}) => {
-		await createDraftAndOpenEditor(page, `mermaid-multi-${Date.now()}`);
+		await createDraftAndOpenEditor(
+			page,
+			await wiki.space(),
+			`mermaid-multi-${Date.now()}`,
+		);
 
 		const twoDiagrams =
 			'```mermaid\nflowchart TD\n  A[Start] --> B[End]\n```\n\n' +
@@ -135,46 +110,23 @@ test.describe('Mermaid diagrams', () => {
 
 	test('renders the diagram as inline SVG on the public page', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		const spaceRoute = `mermaid-space-${Date.now()}`;
-		const space = await createTestWikiSpace(request, {
-			route: spaceRoute,
-			is_published: true,
-		});
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceRoute}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-		const doc = await createTestWikiDocument(request, {
-			title: 'Mermaid Page',
-			route: `${spaceRoute}/diagram`,
-			content: MERMAID_MARKDOWN,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
+		const space = await wiki.space({
+			pages: [{ title: 'Mermaid Page', content: MERMAID_MARKDOWN }],
 		});
+		const doc = space.page('Mermaid Page');
+
+		await page.goto(`/${doc.route}`);
+		await page.waitForLoadState('networkidle');
+
+		// Server emits the fence as <pre class="mermaid">, not a code block.
+		const container = page.locator('#wiki-content .mermaid').first();
+		await expect(container).toBeAttached({ timeout: 10000 });
 
-		try {
-			await page.goto(`/${doc.route}`);
-			await page.waitForLoadState('networkidle');
-
-			// Server emits the fence as <pre class="mermaid">, not a code block.
-			const container = page.locator('#wiki-content .mermaid').first();
-			await expect(container).toBeAttached({ timeout: 10000 });
-
-			// mermaid-renderer.js lazy-loads Mermaid and hydrates it into an SVG.
-			await expect(
-				page.locator('#wiki-content .mermaid svg').first(),
-			).toBeVisible({ timeout: 15000 });
-		} finally {
-			await deleteTestWikiDocument(request, doc.name).catch(() => {});
-			await deleteTestWikiDocument(request, rootGroup.name).catch(() => {});
-			await deleteTestWikiSpace(request, space.name).catch(() => {});
-		}
+		// mermaid-renderer.js lazy-loads Mermaid and hydrates it into an SVG.
+		await expect(
+			page.locator('#wiki-content .mermaid svg').first(),
+		).toBeVisible({ timeout: 15000 });
 	});
 });
diff --git a/e2e/tests/mobile-view.spec.ts b/e2e/tests/mobile-view.spec.ts
index 7b1c8fd6b..149d61f71 100644
--- a/e2e/tests/mobile-view.spec.ts
+++ b/e2e/tests/mobile-view.spec.ts
@@ -1,17 +1,13 @@
-import {
-	type APIRequestContext,
-	type Page,
-	expect,
-	test,
-} from '@playwright/test';
+import type { APIRequestContext, Page } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import type { WikiFactory } from '../helpers/factory';
 import { callMethod, getList } from '../helpers/frappe';
+import { APP_BASE, CHANGE_REQUEST_URL_RE } from '../helpers/routes';
 import {
-	APP_BASE,
-	CHANGE_REQUEST_URL_RE,
-	SPACE_URL_RE,
-	appUrl,
-} from '../helpers/routes';
-import { openNewPageDialog } from '../helpers/wiki';
+	createDraftAndOpenEditor,
+	currentDraftDocKey,
+	saveEditor,
+} from '../helpers/wiki';
 
 interface WikiDocumentRoute {
 	route: string;
@@ -34,48 +30,17 @@ const mobileViewport = { width: 375, height: 667 };
 async function createPublishedTestPage(
 	page: Page,
 	request: APIRequestContext,
+	wiki: WikiFactory,
 	title: string,
 	content?: string,
 ): Promise<string> {
-	// Create a dedicated space for this test
-	await page.goto(appUrl('spaces'));
-	await page.waitForLoadState('networkidle');
-
-	const timestamp = Date.now();
-	const spaceName = `mobile-view-space-${timestamp}`;
-	const spaceRoute = `mobile-view-space-${timestamp}`;
-
-	await page.getByRole('button', { name: 'New Space' }).click();
-	await page.waitForSelector('[role="dialog"]', { state: 'visible' });
-	await page.getByLabel('Space Name').fill(spaceName);
-	await page.getByLabel('Route').fill(spaceRoute);
-	await page
-		.getByRole('dialog')
-		.getByRole('button', { name: 'Create' })
-		.click();
-	await page.waitForLoadState('networkidle');
-	await expect(page).toHaveURL(SPACE_URL_RE);
-
-	// Create a new page
-
-	await openNewPageDialog(page);
-
-	await page.getByLabel('Title').fill(title);
-	await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
-	await page.waitForLoadState('networkidle');
-
-	// Open the newly created page from the sidebar tree
-	await page.locator('aside').getByText(title, { exact: true }).click();
-	await page.waitForURL(/\/draft\/[^/?#]+/);
-	const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-	if (!draftMatch) {
-		throw new Error('Draft doc key not found in URL');
-	}
-	const docKey = decodeURIComponent(draftMatch[1]);
-
-	// Wait for editor
-	const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-	await expect(editor).toBeVisible({ timeout: 10000 });
+	const editor = await createDraftAndOpenEditor(
+		page,
+		await wiki.space(),
+		title,
+		{ waitForEditorApi: false },
+	);
+	const docKey = await currentDraftDocKey(page);
 
 	// Add content if provided
 	if (content) {
@@ -91,7 +56,7 @@ async function createPublishedTestPage(
 	}
 
 	// Save the draft
-	await page.click('button:has-text("Save")');
+	await saveEditor(page);
 	await page.waitForLoadState('networkidle');
 
 	// Submit for review and merge the page
@@ -143,11 +108,17 @@ test.describe('Mobile View', () => {
 		test('should display mobile header on small viewport', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first (at desktop size for admin)
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `mobile-header-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Now switch to mobile and visit the public page
 			await page.setViewportSize(mobileViewport);
@@ -176,11 +147,17 @@ test.describe('Mobile View', () => {
 		test('should display wiki space name in mobile header', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `mobile-space-name-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile and visit public page
 			await page.setViewportSize(mobileViewport);
@@ -200,11 +177,17 @@ test.describe('Mobile View', () => {
 		test('should open bottom sheet when menu button is clicked', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `bottom-sheet-open-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile and visit the public page
 			await page.setViewportSize(mobileViewport);
@@ -226,11 +209,17 @@ test.describe('Mobile View', () => {
 		test('should close bottom sheet when overlay is clicked', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `bottom-sheet-overlay-close-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile
 			await page.setViewportSize(mobileViewport);
@@ -253,11 +242,17 @@ test.describe('Mobile View', () => {
 		test('should close bottom sheet when close button is clicked', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `bottom-sheet-close-button-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile
 			await page.setViewportSize(mobileViewport);
@@ -283,11 +278,17 @@ test.describe('Mobile View', () => {
 		test('should display sidebar navigation in bottom sheet', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `bottom-sheet-nav-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile
 			await page.setViewportSize(mobileViewport);
@@ -312,11 +313,17 @@ test.describe('Mobile View', () => {
 		test('should close bottom sheet when navigation link is clicked', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `bottom-sheet-nav-click-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile
 			await page.setViewportSize(mobileViewport);
@@ -344,11 +351,17 @@ test.describe('Mobile View', () => {
 		test('should have drag handle for swipe-to-dismiss', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `bottom-sheet-drag-handle-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile
 			await page.setViewportSize(mobileViewport);
@@ -371,6 +384,7 @@ test.describe('Mobile View', () => {
 		test('should have TOC container in mobile header structure', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page with headings at desktop viewport
 			await page.setViewportSize({ width: 1100, height: 900 });
@@ -386,6 +400,7 @@ Content for second section.`;
 			const publicUrl = await createPublishedTestPage(
 				page,
 				request,
+				wiki,
 				pageTitle,
 				tocContent,
 			);
@@ -410,6 +425,7 @@ Content for second section.`;
 		test('should render headings with anchor links on mobile', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page with headings
 			await page.setViewportSize({ width: 1100, height: 900 });
@@ -425,6 +441,7 @@ Getting started content.`;
 			const publicUrl = await createPublishedTestPage(
 				page,
 				request,
+				wiki,
 				pageTitle,
 				tocContent,
 			);
@@ -454,11 +471,17 @@ Getting started content.`;
 		test('should have theme toggle button in mobile header', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `theme-toggle-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile
 			await page.setViewportSize(mobileViewport);
@@ -475,11 +498,17 @@ Getting started content.`;
 		test('should open search when search button is clicked', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `search-button-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Switch to mobile
 			await page.setViewportSize(mobileViewport);
@@ -501,11 +530,17 @@ Getting started content.`;
 		test('should hide mobile header on desktop viewport', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first (at desktop)
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `responsive-breakpoints-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Start at mobile viewport
 			await page.setViewportSize(mobileViewport);
@@ -531,11 +566,17 @@ Getting started content.`;
 		test('should show mobile header on tablet viewport', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Create a test page first
 			await page.setViewportSize({ width: 1100, height: 900 });
 			const pageTitle = `tablet-viewport-test-${Date.now()}`;
-			const publicUrl = await createPublishedTestPage(page, request, pageTitle);
+			const publicUrl = await createPublishedTestPage(
+				page,
+				request,
+				wiki,
+				pageTitle,
+			);
 
 			// Tablet viewport (below lg breakpoint of 1024px)
 			await page.setViewportSize({ width: 768, height: 1024 });
diff --git a/e2e/tests/ordering.spec.ts b/e2e/tests/ordering.spec.ts
index 5aa86a770..6decb8bf3 100644
--- a/e2e/tests/ordering.spec.ts
+++ b/e2e/tests/ordering.spec.ts
@@ -1,11 +1,8 @@
-import { expect, test } from '@playwright/test';
-import { callMethod, updateDoc } from '../helpers/frappe';
-import { appUrl } from '../helpers/routes';
-import {
-	clickSidebarAddOption,
-	createTestWikiDocument,
-	createTestWikiSpace,
-} from '../helpers/wiki';
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import type { PageSpec, SeededSpace } from '../helpers/factory';
+import { callMethod } from '../helpers/frappe';
+import { clickSidebarAddOption } from '../helpers/wiki';
 
 /**
  * E2E tests for wiki document ordering functionality.
@@ -14,185 +11,95 @@ import {
  * 2. Reordering documents persists after page refresh
  * 3. Order is consistent between admin and public-facing views
  */
+
+/**
+ * A group per name, each holding one published page — a bare group is hidden
+ * from the public sidebar, so the child is what makes the order observable
+ * there.
+ */
+function groupsWithAPageEach(names: string[]): PageSpec[] {
+	return names.map((name) => ({
+		title: name,
+		is_group: true,
+		children: [{ title: `${name} Page` }],
+	}));
+}
+
+/** The order the named groups appear in, read off rendered text. */
+async function orderIn(page: Page, selector: string, names: string[]) {
+	const text = await page.locator(selector).innerText();
+	return names
+		.filter((name) => text.includes(name))
+		.sort((a, b) => text.indexOf(a) - text.indexOf(b));
+}
+
+/** Move `names[from]` to the head of its siblings, through the reorder API. */
+async function moveToFront(
+	request: Parameters<typeof callMethod>[0],
+	space: SeededSpace,
+	names: string[],
+	from: number,
+) {
+	const siblings = names.map((name) => space.page(name).name);
+	const [moved] = siblings.splice(from, 1);
+	await callMethod(request, 'wiki.api.wiki_space.reorder_wiki_documents', {
+		doc_name: moved,
+		new_parent: space.rootGroup,
+		new_index: 0,
+		siblings: JSON.stringify([moved, ...siblings]),
+	});
+}
+
 test.describe('Wiki Document Ordering', () => {
 	test('new document should appear at bottom of sidebar', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		// Create a test space with 5 folders via API
-		const spaceName = `ordering-test-${Date.now()}`;
-		const space = await createTestWikiSpace(request, {
-			route: spaceName,
-			is_published: true,
-		});
-
-		// Create root group for the space
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceName}/root`,
-			is_group: true,
-			is_published: true,
-		});
+		const names = ['Q1', 'Q2', 'Q3', 'Q4', 'Q5'];
+		const space = await wiki.space({ pages: groupsWithAPageEach(names) });
 
-		// Update space with root_group
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-
-		// Create 5 folders (Q1-Q5) under root
-		const folders: string[] = [];
-		for (let i = 1; i <= 5; i++) {
-			const folder = await createTestWikiDocument(request, {
-				title: `Q${i}`,
-				route: `${spaceName}/q${i}`,
-				is_group: true,
-				is_published: true,
-				parent_wiki_document: rootGroup.name,
-			});
-			folders.push(folder.name);
-
-			// Create a child page so folder shows in public view
-			await createTestWikiDocument(request, {
-				title: `Page in Q${i}`,
-				route: `${spaceName}/q${i}/page`,
-				is_group: false,
-				is_published: true,
-				parent_wiki_document: folder.name,
-			});
-		}
-
-		// Navigate to the wiki space admin
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
-
-		// Get initial order from sidebar - wait for tree to load
 		await page.waitForSelector('aside >> text=Q1', { timeout: 10000 });
 
-		const getSidebarOrder = async () => {
-			// Get all text from the sidebar tree area
-			const sidebarText = await page.locator('aside').innerText();
-			// Extract Q1, Q2, etc. from the text in order they appear
-			const matches = sidebarText.match(/Q\d+/g) || [];
-			// Remove duplicates while preserving order
-			return [...new Set(matches)];
-		};
-
-		const initialOrder = await getSidebarOrder();
+		expect(await orderIn(page, 'aside', names)).toEqual(names);
 
-		// Verify Q1-Q5 are in order
-		expect(initialOrder).toEqual(['Q1', 'Q2', 'Q3', 'Q4', 'Q5']);
-
-		// Create a new folder Q6 via UI
 		await clickSidebarAddOption(page, 'New Group');
-
-		// Fill in the title
 		await page.getByLabel('Title').fill('Q6');
 		await page
 			.getByRole('dialog')
 			.getByRole('button', { name: 'Save' })
 			.click();
 		await page.waitForLoadState('networkidle');
+		await expect(page.locator('aside').getByText('Q6')).toBeVisible({
+			timeout: 10000,
+		});
 
-		// Wait a moment for the tree to update
-		await page.waitForTimeout(1000);
-
-		// Get the new order - Q6 should be at the bottom
-		const orderAfterCreate = await getSidebarOrder();
-
-		// Q6 should appear at the end, not at the beginning
-		expect(orderAfterCreate[orderAfterCreate.length - 1]).toBe('Q6');
-		expect(orderAfterCreate).toEqual(['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6']);
+		// Q6 lands at the end, not the beginning.
+		expect(await orderIn(page, 'aside', [...names, 'Q6'])).toEqual([
+			...names,
+			'Q6',
+		]);
 	});
 
 	test('reorder should persist after page refresh', async ({
 		page,
+		wiki,
 		request,
 	}) => {
-		// Create a test space with folders via API
-		const spaceName = `reorder-test-${Date.now()}`;
-		const space = await createTestWikiSpace(request, {
-			route: spaceName,
-			is_published: true,
-		});
-
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceName}/root`,
-			is_group: true,
-			is_published: true,
-		});
-
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
+		const names = ['Folder1', 'Folder2', 'Folder3', 'Folder4', 'Folder5'];
+		const space = await wiki.space({ pages: groupsWithAPageEach(names) });
 
-		// Create 5 folders
-		const folders: string[] = [];
-		for (let i = 1; i <= 5; i++) {
-			const folder = await createTestWikiDocument(request, {
-				title: `Folder${i}`,
-				route: `${spaceName}/folder${i}`,
-				is_group: true,
-				is_published: true,
-				parent_wiki_document: rootGroup.name,
-			});
-			folders.push(folder.name);
-
-			await createTestWikiDocument(request, {
-				title: `Page in Folder${i}`,
-				route: `${spaceName}/folder${i}/page`,
-				is_group: false,
-				is_published: true,
-				parent_wiki_document: folder.name,
-			});
-		}
-
-		// Navigate to the wiki space admin
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
-
-		// Wait for tree to load and get folder order from sidebar
 		await page.waitForSelector('aside >> text=Folder1', { timeout: 10000 });
+		expect(await orderIn(page, 'aside', names)).toEqual(names);
 
-		const getSidebarFolderOrder = async () => {
-			const sidebarText = await page.locator('aside').innerText();
-			const matches = sidebarText.match(/Folder\d+/g) || [];
-			return [...new Set(matches)];
-		};
-
-		const initialOrder = await getSidebarFolderOrder();
-		expect(initialOrder).toEqual([
-			'Folder1',
-			'Folder2',
-			'Folder3',
-			'Folder4',
-			'Folder5',
-		]);
-
-		// Reorder via API: Move Folder5 to first position
-		const newSiblingsOrder = [
-			folders[4],
-			folders[0],
-			folders[1],
-			folders[2],
-			folders[3],
-		]; // Folder5, Folder1, Folder2, Folder3, Folder4
-
-		await callMethod(request, 'wiki.api.wiki_space.reorder_wiki_documents', {
-			doc_name: folders[4], // Folder5
-			new_parent: rootGroup.name,
-			new_index: 0,
-			siblings: JSON.stringify(newSiblingsOrder),
-		});
+		await moveToFront(request, space, names, 4);
 
-		// Refresh the page
 		await page.reload();
 		await page.waitForLoadState('networkidle');
-
-		// Verify the order persisted
-		const orderAfterRefresh = await getSidebarFolderOrder();
-
-		expect(orderAfterRefresh).toEqual([
+		expect(await orderIn(page, 'aside', names)).toEqual([
 			'Folder5',
 			'Folder1',
 			'Folder2',
@@ -203,197 +110,47 @@ test.describe('Wiki Document Ordering', () => {
 
 	test('order should be consistent between admin and public views', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		// Create a test space
-		const spaceName = `consistency-test-${Date.now()}`;
-		const space = await createTestWikiSpace(request, {
-			route: spaceName,
-			is_published: true,
-		});
+		const names = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon'];
+		const space = await wiki.space({ pages: groupsWithAPageEach(names) });
 
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceName}/root`,
-			is_group: true,
-			is_published: true,
-		});
-
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-
-		// Create 5 folders with specific order
-		const folderNames = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon'];
-		const folders: string[] = [];
-
-		for (const name of folderNames) {
-			const folder = await createTestWikiDocument(request, {
-				title: name,
-				route: `${spaceName}/${name.toLowerCase()}`,
-				is_group: true,
-				is_published: true,
-				parent_wiki_document: rootGroup.name,
-			});
-			folders.push(folder.name);
-
-			// Create a published page inside each folder
-			await createTestWikiDocument(request, {
-				title: `${name} Page`,
-				route: `${spaceName}/${name.toLowerCase()}/page`,
-				is_group: false,
-				is_published: true,
-				parent_wiki_document: folder.name,
-			});
-		}
-
-		// Check admin view order
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 		await page.waitForSelector('aside >> text=Alpha', { timeout: 10000 });
+		const adminOrder = await orderIn(page, 'aside', names);
 
-		const getAdminOrder = async () => {
-			const sidebarText = await page.locator('aside').innerText();
-			// Extract folder names in order they appear
-			const order: string[] = [];
-			for (const name of folderNames) {
-				if (sidebarText.includes(name) && !order.includes(name)) {
-					order.push(name);
-				}
-			}
-			// Sort by position in sidebarText
-			order.sort((a, b) => sidebarText.indexOf(a) - sidebarText.indexOf(b));
-			return order;
-		};
-
-		const adminOrder = await getAdminOrder();
-
-		// Navigate to public view
-		await page.goto(`/${spaceName}/alpha/page`);
+		await page.goto(`/${space.page('Alpha Page').route}`);
 		await page.waitForLoadState('networkidle');
-		// Wait for sidebar to render
-		await page.waitForTimeout(1000);
-
-		// Get order from public sidebar - get full page text and parse it
-		const getPublicOrder = async () => {
-			// The sidebar is on the left, get text from the whole page
-			const pageText = await page.locator('body').innerText();
-			const order: string[] = [];
-			for (const name of folderNames) {
-				if (pageText.includes(name) && !order.includes(name)) {
-					order.push(name);
-				}
-			}
-			order.sort((a, b) => pageText.indexOf(a) - pageText.indexOf(b));
-			return order;
-		};
-
-		const publicOrder = await getPublicOrder();
+		await expect(page.locator('.wiki-sidebar')).toBeVisible();
+		const publicOrder = await orderIn(page, 'body', names);
 
-		// Both orders should match
 		expect(publicOrder).toEqual(adminOrder);
-		expect(publicOrder).toEqual(folderNames);
+		expect(publicOrder).toEqual(names);
 	});
 
 	test('drag and drop reorder should update public view', async ({
 		page,
+		wiki,
 		request,
 	}) => {
-		// Create a test space
-		const spaceName = `dragdrop-test-${Date.now()}`;
-		const space = await createTestWikiSpace(request, {
-			route: spaceName,
-			is_published: true,
-		});
-
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceName}/root`,
-			is_group: true,
-			is_published: true,
-		});
-
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-
-		// Create 3 folders for simpler drag test
-		const folderNames = ['First', 'Second', 'Third'];
-		const folders: string[] = [];
+		const names = ['First', 'Second', 'Third'];
+		const reordered = ['Third', 'First', 'Second'];
+		const space = await wiki.space({ pages: groupsWithAPageEach(names) });
 
-		for (const name of folderNames) {
-			const folder = await createTestWikiDocument(request, {
-				title: name,
-				route: `${spaceName}/${name.toLowerCase()}`,
-				is_group: true,
-				is_published: true,
-				parent_wiki_document: rootGroup.name,
-			});
-			folders.push(folder.name);
-
-			await createTestWikiDocument(request, {
-				title: `${name} Content`,
-				route: `${spaceName}/${name.toLowerCase()}/content`,
-				is_group: false,
-				is_published: true,
-				parent_wiki_document: folder.name,
-			});
-		}
-
-		// Navigate to admin view
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 		await page.waitForSelector('aside >> text=First', { timeout: 10000 });
 
-		// Get initial order
-		const getOrder = async () => {
-			const sidebarText = await page.locator('aside').innerText();
-			const order: string[] = [];
-			for (const name of folderNames) {
-				if (sidebarText.includes(name) && !order.includes(name)) {
-					order.push(name);
-				}
-			}
-			order.sort((a, b) => sidebarText.indexOf(a) - sidebarText.indexOf(b));
-			return order;
-		};
-
-		// Reorder via API: Move "Third" to first position
-		const newOrder = [folders[2], folders[0], folders[1]]; // Third, First, Second
-
-		await callMethod(request, 'wiki.api.wiki_space.reorder_wiki_documents', {
-			doc_name: folders[2],
-			new_parent: rootGroup.name,
-			new_index: 0,
-			siblings: JSON.stringify(newOrder),
-		});
+		await moveToFront(request, space, names, 2);
 
-		// Refresh admin view
 		await page.reload();
 		await page.waitForLoadState('networkidle');
+		expect(await orderIn(page, 'aside', names)).toEqual(reordered);
 
-		const adminOrderAfter = await getOrder();
-		expect(adminOrderAfter).toEqual(['Third', 'First', 'Second']);
-
-		// Check public view
-		await page.goto(`/${spaceName}/third/content`);
+		await page.goto(`/${space.page('Third Page').route}`);
 		await page.waitForLoadState('networkidle');
-		// Wait for sidebar to render
-		await page.waitForTimeout(1000);
-
-		const getPublicOrder = async () => {
-			const pageText = await page.locator('body').innerText();
-			const order: string[] = [];
-			for (const name of folderNames) {
-				if (pageText.includes(name) && !order.includes(name)) {
-					order.push(name);
-				}
-			}
-			order.sort((a, b) => pageText.indexOf(a) - pageText.indexOf(b));
-			return order;
-		};
-
-		const publicOrder = await getPublicOrder();
-		expect(publicOrder).toEqual(['Third', 'First', 'Second']);
+		await expect(page.locator('.wiki-sidebar')).toBeVisible();
+		expect(await orderIn(page, 'body', names)).toEqual(reordered);
 	});
 });
diff --git a/e2e/tests/page-actions-ai-url.spec.ts b/e2e/tests/page-actions-ai-url.spec.ts
index 39615577e..7124f0fe1 100644
--- a/e2e/tests/page-actions-ai-url.spec.ts
+++ b/e2e/tests/page-actions-ai-url.spec.ts
@@ -1,13 +1,12 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
 import { getList } from '../helpers/frappe';
-import {
-	APP_BASE,
-	CHANGE_REQUEST_URL_RE,
-	spaceLinkSelector,
-} from '../helpers/routes';
+import { CHANGE_REQUEST_URL_RE } from '../helpers/routes';
 import {
 	clickSidebarAddOption,
+	currentDraftDocKey,
+	openNewPageDialog,
 	publishChangeRequestFromReview,
+	saveEditor,
 } from '../helpers/wiki';
 
 interface WikiDocumentRoute {
@@ -43,29 +42,19 @@ test.describe('Page actions – AI link URL', () => {
 	test('Open in ChatGPT uses the current page URL after sidebar navigation', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		await page.setViewportSize({ width: 1100, height: 900 });
 
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
 
 		// --- Create and fill the first page ---
 		const firstPageTitle = `ai-url-first-${Date.now()}`;
-		const createFirstPage = page.locator(
-			'button:has-text("Create First Page")',
-		);
-		if (await createFirstPage.isVisible({ timeout: 2000 }).catch(() => false)) {
-			await createFirstPage.click();
-		} else {
-			await clickSidebarAddOption(page, 'New Page');
-		}
+		await openNewPageDialog(page);
 		await page.getByLabel('Title').fill(firstPageTitle);
 		await page
 			.getByRole('dialog')
@@ -77,10 +66,7 @@ test.describe('Page actions – AI link URL', () => {
 			.locator('aside')
 			.getByText(firstPageTitle, { exact: true })
 			.click();
-		await page.waitForURL(/\/draft\/[^/?#]+/);
-		const firstDocKey = decodeURIComponent(
-			page.url().match(/\/draft\/([^/?#]+)/)?.[1] ?? '',
-		);
+		const firstDocKey = await currentDraftDocKey(page);
 		expect(firstDocKey).not.toBe('');
 
 		await expect(editor).toBeVisible({ timeout: 10000 });
@@ -94,7 +80,7 @@ test.describe('Page actions – AI link URL', () => {
 		});
 		await editor.click();
 		await page.waitForTimeout(500);
-		await page.click('button:has-text("Save")');
+		await saveEditor(page);
 		await page.waitForLoadState('networkidle');
 		await page.waitForTimeout(2000);
 
@@ -112,10 +98,7 @@ test.describe('Page actions – AI link URL', () => {
 			.locator('aside')
 			.getByText(secondPageTitle, { exact: true })
 			.click();
-		await page.waitForURL(/\/draft\/[^/?#]+/);
-		const secondDocKey = decodeURIComponent(
-			page.url().match(/\/draft\/([^/?#]+)/)?.[1] ?? '',
-		);
+		const secondDocKey = await currentDraftDocKey(page);
 		expect(secondDocKey).not.toBe('');
 
 		await expect(editor).toBeVisible({ timeout: 10000 });
@@ -131,7 +114,7 @@ test.describe('Page actions – AI link URL', () => {
 		});
 		await editor.click();
 		await page.waitForTimeout(500);
-		await page.click('button:has-text("Save")');
+		await saveEditor(page);
 		await page.waitForLoadState('networkidle');
 		await page.waitForTimeout(2000);
 
diff --git a/e2e/tests/page-route-editable.spec.ts b/e2e/tests/page-route-editable.spec.ts
index e7611bf24..76d203d95 100644
--- a/e2e/tests/page-route-editable.spec.ts
+++ b/e2e/tests/page-route-editable.spec.ts
@@ -1,5 +1,4 @@
-import { expect, test } from '@playwright/test';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
+import { expect, test } from '../fixtures';
 import { openNewPageDialog } from '../helpers/wiki';
 
 /**
@@ -9,15 +8,12 @@ import { openNewPageDialog } from '../helpers/wiki';
 test.describe('Editable page route', () => {
 	test('prefills the route from the title, then lets the author take it over', async ({
 		page,
+		wiki,
 	}) => {
 		await page.setViewportSize({ width: 1100, height: 900 });
 
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		await openNewPageDialog(page);
@@ -40,11 +36,17 @@ test.describe('Editable page route', () => {
 		await expect(routeField).toHaveValue(customRoute);
 
 		await dialog.getByRole('button', { name: 'Save' }).click();
-		await page.waitForLoadState('networkidle');
-
-		// The draft panel reports the route the author chose, not a derived one.
-		await expect(page.locator(`text=/${customRoute}`).first()).toBeVisible({
-			timeout: 10000,
-		});
+		await page.waitForURL(/\/draft\//, { timeout: 15000 });
+
+		// The draft carries the route the author chose, not one derived from the
+		// title they typed last. A draft lives only in the local-first store
+		// until it is merged, so there is no document to query — the tree's
+		// search, which matches a page's route as well as its title, is what
+		// can see it.
+		const search = page.getByPlaceholder('Search pages...');
+		await search.fill(customRoute);
+		await expect(
+			page.locator('aside').getByText('Route Gamma', { exact: true }),
+		).toBeVisible({ timeout: 10000 });
 	});
 });
diff --git a/e2e/tests/page-settings-meta.spec.ts b/e2e/tests/page-settings-meta.spec.ts
index a814b3c6e..d3c095f56 100644
--- a/e2e/tests/page-settings-meta.spec.ts
+++ b/e2e/tests/page-settings-meta.spec.ts
@@ -1,85 +1,56 @@
-import { expect, test } from '@playwright/test';
-import { getDoc } from '../helpers/frappe';
-import { appUrl } from '../helpers/routes';
-import {
-	type WikiDocument,
-	type WikiSpace,
-	cleanupWikiSpacesByRoute,
-	createTestWikiDocument,
-	createTestWikiSpace,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import type { SeededPage, SeededSpace } from '../helpers/factory';
 
 /**
- * Page Settings dialog (per-page SEO meta fields).
+ * Page settings panel (per-page SEO meta fields).
  *
- * The dialog lives behind the page-header "More actions" dropdown in the
- * editor SPA and saves `meta_title` / `meta_description` (+ `meta_image`,
- * not covered here — see spec) directly on the Wiki Document. This spec
- * covers the tracer path end to end: open the dialog, save, reopen to
- * confirm persistence, then verify the public page head actually emits the
- * og/description/canonical tags — and falls back to the page title when the
- * fields are cleared.
+ * The panel is toggled from the page header in the editor SPA and saves
+ * `meta_title` / `meta_description` (+ `meta_image`, not covered here — see
+ * spec) directly on the Wiki Document. This spec covers the tracer path end
+ * to end: open the panel, save, reopen to confirm persistence, then verify
+ * the public page head actually emits the og/description/canonical tags —
+ * and falls back to the page title when the fields are cleared.
  */
-test.describe('Page Settings meta fields', () => {
-	const route = `meta-fields-${Date.now()}`;
-	let space: WikiSpace;
-	let doc: WikiDocument;
+test.describe('Page settings meta fields', () => {
+	let space: SeededSpace;
+	let doc: SeededPage;
 
-	test.beforeAll(async ({ request }) => {
-		// createTestWikiSpace auto-creates a root_group document
-		// (Wiki Space.before_insert) when one isn't supplied — reuse it as the
-		// page's parent instead of creating a second one. Wiki_space on a
-		// document gets re-stamped from the tree (walking parent_wiki_document
-		// up to the space's root_group), so a page parented outside that tree
-		// would end up with a stale wiki_space and get orphaned by the space's
-		// on_trash cascade delete.
-		space = await createTestWikiSpace(request, { route, is_published: true });
-		const spaceDoc = await getDoc<{ root_group: string }>(
-			request,
-			'Wiki Space',
-			space.name,
-		);
-		doc = await createTestWikiDocument(request, {
-			title: 'Meta Fields Page',
-			route: `${route}/meta-page`,
-			is_published: true,
-			wiki_space: space.name,
-			parent_wiki_document: spaceDoc.root_group,
-		});
-	});
-
-	test.afterAll(async ({ request }) => {
-		await cleanupWikiSpacesByRoute(request, route);
+	test.beforeAll(async ({ wikiSuite }) => {
+		space = await wikiSuite.space({ pages: [{ title: 'Meta Fields Page' }] });
+		doc = space.page('Meta Fields Page');
 	});
 
-	test('saves meta fields from the dialog, persists them, and reflects on the public page', async ({
+	test('saves meta fields from the panel, persists them, and reflects on the public page', async ({
 		page,
 	}) => {
 		const metaTitle = `Meta Title ${Date.now()}`;
 		const metaDescription = 'A hand-written meta description for e2e coverage.';
 
 		await page.setViewportSize({ width: 1200, height: 900 });
-		await page.goto(appUrl('spaces', space.name, 'page', doc.name));
+		await page.goto(space.url('page', doc.name));
 		await expect(page.getByPlaceholder('Page title')).toHaveValue(doc.title, {
 			timeout: 15000,
 		});
 
-		// Open the dialog from the page-header "More actions" dropdown.
-		await page.getByRole('button', { name: 'More actions' }).click();
-		await page.getByRole('menuitem', { name: 'Page settings' }).click();
-
-		const dialog = page.getByRole('dialog');
-		await expect(dialog).toBeVisible({ timeout: 10000 });
-		await expect(dialog.getByText('Page Settings')).toBeVisible();
+		// The panel is a header toggle, not a menu item.
+		const panel = page.getByTestId('page-settings-panel');
+		// `exact` matters: the panel's own close button is "Close page settings",
+		// which a substring match would pick up too.
+		const settingsToggle = page.getByRole('button', {
+			name: 'Page settings',
+			exact: true,
+		});
+		await settingsToggle.click();
+		await expect(panel).toBeVisible({ timeout: 10000 });
 
-		const saveButton = dialog.getByRole('button', {
+		const saveButton = panel.getByRole('button', {
 			name: 'Save',
 			exact: true,
 		});
-		const metaTitleInput = dialog.getByLabel('Meta Title');
-		const metaDescriptionInput = dialog.getByLabel('Meta Description');
+		const metaTitleInput = panel.getByLabel('Meta title');
+		const metaDescriptionInput = panel.getByLabel('Meta description');
 
-		// Clean, freshly-opened dialog: nothing to save yet.
+		// Clean, freshly-opened panel: nothing to save yet.
 		await expect(saveButton).toBeDisabled();
 
 		await metaTitleInput.fill(metaTitle);
@@ -87,24 +58,22 @@ test.describe('Page Settings meta fields', () => {
 		await expect(saveButton).toBeEnabled();
 
 		await saveButton.click();
-		// The dialog deliberately stays open on save: saving is what regenerates
-		// the social preview, so closing would hide the thing that just changed.
-		// Save disabling itself is the signal the write landed.
+		// Save disabling itself is the signal the write landed: the panel is a
+		// form measured against the saved values, so a clean form is a saved one.
 		await expect(saveButton).toBeDisabled({ timeout: 10000 });
-		await expect(dialog).toBeVisible();
-		await dialog.getByRole('button', { name: 'Cancel' }).click();
-		await expect(dialog).not.toBeVisible({ timeout: 10000 });
+		await expect(panel).toBeVisible();
+		await panel.getByRole('button', { name: 'Close page settings' }).click();
+		await expect(panel).not.toBeVisible({ timeout: 10000 });
 
 		// Reopen — values must have persisted to the Wiki Document.
-		await page.getByRole('button', { name: 'More actions' }).click();
-		await page.getByRole('menuitem', { name: 'Page settings' }).click();
-		await expect(dialog).toBeVisible({ timeout: 10000 });
-		await expect(dialog.getByLabel('Meta Title')).toHaveValue(metaTitle);
-		await expect(dialog.getByLabel('Meta Description')).toHaveValue(
+		await settingsToggle.click();
+		await expect(panel).toBeVisible({ timeout: 10000 });
+		await expect(panel.getByLabel('Meta title')).toHaveValue(metaTitle);
+		await expect(panel.getByLabel('Meta description')).toHaveValue(
 			metaDescription,
 		);
-		await dialog.getByRole('button', { name: 'Cancel' }).click();
-		await expect(dialog).not.toBeVisible({ timeout: 10000 });
+		await panel.getByRole('button', { name: 'Close page settings' }).click();
+		await expect(panel).not.toBeVisible({ timeout: 10000 });
 
 		// Public page head: og:title carries the meta title, a plain
 		// description meta tag is present, and the canonical link is emitted.
@@ -125,20 +94,19 @@ test.describe('Page Settings meta fields', () => {
 		// Clear both fields — the public page must fall back to the page
 		// title in og:title, and drop the now-empty description tag rather
 		// than emit an empty one.
-		await page.goto(appUrl('spaces', space.name, 'page', doc.name));
+		await page.goto(space.url('page', doc.name));
 		await expect(page.getByPlaceholder('Page title')).toHaveValue(doc.title, {
 			timeout: 15000,
 		});
-		await page.getByRole('button', { name: 'More actions' }).click();
-		await page.getByRole('menuitem', { name: 'Page settings' }).click();
-		await expect(dialog).toBeVisible({ timeout: 10000 });
-		await dialog.getByLabel('Meta Title').fill('');
-		await dialog.getByLabel('Meta Description').fill('');
+		await settingsToggle.click();
+		await expect(panel).toBeVisible({ timeout: 10000 });
+		await panel.getByLabel('Meta title').fill('');
+		await panel.getByLabel('Meta description').fill('');
 		await expect(saveButton).toBeEnabled();
 		await saveButton.click();
 		await expect(saveButton).toBeDisabled({ timeout: 10000 });
-		await dialog.getByRole('button', { name: 'Cancel' }).click();
-		await expect(dialog).not.toBeVisible({ timeout: 10000 });
+		await panel.getByRole('button', { name: 'Close page settings' }).click();
+		await expect(panel).not.toBeVisible({ timeout: 10000 });
 
 		await page.goto(`/${doc.route}`);
 		await expect(page.locator('meta[property="og:title"]')).toHaveAttribute(
diff --git a/e2e/tests/public-blank-lines.spec.ts b/e2e/tests/public-blank-lines.spec.ts
index ee8b7bbcf..a691b7c7a 100644
--- a/e2e/tests/public-blank-lines.spec.ts
+++ b/e2e/tests/public-blank-lines.spec.ts
@@ -1,11 +1,4 @@
-import { expect, test } from '@playwright/test';
-import { updateDoc } from '../helpers/frappe';
-import {
-	createTestWikiDocument,
-	createTestWikiSpace,
-	deleteTestWikiDocument,
-	deleteTestWikiSpace,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
 
 /**
  * prose-v3 zeroes paragraph margins: blank lines the author typed are the only
@@ -18,59 +11,36 @@ const CONTENT = 'First paragraph\n\n\n\n\n\nSecond paragraph';
 test.describe('Public page blank lines', () => {
 	test('renders author blank lines as gaps with real height', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		const spaceRoute = `blank-lines-space-${Date.now()}`;
-		const space = await createTestWikiSpace(request, {
-			route: spaceRoute,
-			is_published: true,
-		});
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceRoute}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-		const doc = await createTestWikiDocument(request, {
-			title: 'Blank Lines Page',
-			route: `${spaceRoute}/blank-lines`,
-			content: CONTENT,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
+		const space = await wiki.space({
+			pages: [{ title: 'Blank Lines Page', content: CONTENT }],
 		});
+		const doc = space.page('Blank Lines Page');
 
-		try {
-			await page.goto(`/${doc.route}`);
-			await page.waitForLoadState('networkidle');
+		await page.goto(`/${doc.route}`);
+		await page.waitForLoadState('networkidle');
 
-			// Two extra blank lines in the markdown => two blank paragraphs.
-			const blanks = page.locator('#wiki-content .wiki-blank-line');
-			await expect(blanks).toHaveCount(2);
+		// Two extra blank lines in the markdown => two blank paragraphs.
+		const blanks = page.locator('#wiki-content .wiki-blank-line');
+		await expect(blanks).toHaveCount(2);
 
-			for (const blank of await blanks.all()) {
-				const box = await blank.boundingBox();
-				expect(box?.height ?? 0).toBeGreaterThan(0);
-			}
+		for (const blank of await blanks.all()) {
+			const box = await blank.boundingBox();
+			expect(box?.height ?? 0).toBeGreaterThan(0);
+		}
 
-			const first = await page
-				.locator('#wiki-content p', { hasText: 'First paragraph' })
-				.first()
-				.boundingBox();
-			const second = await page
-				.locator('#wiki-content p', { hasText: 'Second paragraph' })
-				.first()
-				.boundingBox();
+		const first = await page
+			.locator('#wiki-content p', { hasText: 'First paragraph' })
+			.first()
+			.boundingBox();
+		const second = await page
+			.locator('#wiki-content p', { hasText: 'Second paragraph' })
+			.first()
+			.boundingBox();
 
-			// Without the blank paragraphs the two would sit flush (~one line apart).
-			const delta = (second?.y ?? 0) - ((first?.y ?? 0) + (first?.height ?? 0));
-			expect(delta).toBeGreaterThan(30);
-		} finally {
-			await deleteTestWikiDocument(request, doc.name).catch(() => {});
-			await deleteTestWikiDocument(request, rootGroup.name).catch(() => {});
-			await deleteTestWikiSpace(request, space.name).catch(() => {});
-		}
+		// Without the blank paragraphs the two would sit flush (~one line apart).
+		const delta = (second?.y ?? 0) - ((first?.y ?? 0) + (first?.height ?? 0));
+		expect(delta).toBeGreaterThan(30);
 	});
 });
diff --git a/e2e/tests/public-embed-layout.spec.ts b/e2e/tests/public-embed-layout.spec.ts
index 7af523fbd..a1a563e7d 100644
--- a/e2e/tests/public-embed-layout.spec.ts
+++ b/e2e/tests/public-embed-layout.spec.ts
@@ -1,11 +1,4 @@
-import { expect, test } from '@playwright/test';
-import { updateDoc } from '../helpers/frappe';
-import {
-	createTestWikiDocument,
-	createTestWikiSpace,
-	deleteTestWikiDocument,
-	deleteTestWikiSpace,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
 
 /**
  * Authors paste whatever dimensions the provider's share dialog hands them, and
@@ -25,60 +18,37 @@ const CONTENT =
 test.describe('Public reader embed layout', () => {
 	test('renders a mis-sized embed as a centered 16:9 box', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		const spaceRoute = `embed-layout-space-${Date.now()}`;
-		const space = await createTestWikiSpace(request, {
-			route: spaceRoute,
-			is_published: true,
-		});
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceRoute}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-		const doc = await createTestWikiDocument(request, {
-			title: 'Embed Page',
-			route: `${spaceRoute}/embed`,
-			content: CONTENT,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
+		const space = await wiki.space({
+			pages: [{ title: 'Embed Page', content: CONTENT }],
 		});
+		const doc = space.page('Embed Page');
 
-		try {
-			// Wide enough that the 720px cap leaves visible slack on both sides,
-			// so the centering assertion below is actually measuring something.
-			await page.setViewportSize({ width: 1600, height: 900 });
-			await page.goto(`/${doc.route}`);
-			await page.waitForLoadState('networkidle');
+		// Wide enough that the 720px cap leaves visible slack on both sides,
+		// so the centering assertion below is actually measuring something.
+		await page.setViewportSize({ width: 1600, height: 900 });
+		await page.goto(`/${doc.route}`);
+		await page.waitForLoadState('networkidle');
 
-			const frame = page.locator('#wiki-content iframe');
-			await expect(frame).toBeVisible();
+		const frame = page.locator('#wiki-content iframe');
+		await expect(frame).toBeVisible();
 
-			const box = await frame.boundingBox();
-			const column = await page.locator('#wiki-content').boundingBox();
-			expect(box).not.toBeNull();
-			expect(column).not.toBeNull();
-			if (!box || !column) return;
+		const box = await frame.boundingBox();
+		const column = await page.locator('#wiki-content').boundingBox();
+		expect(box).not.toBeNull();
+		expect(column).not.toBeNull();
+		if (!box || !column) return;
 
-			// The authored 800px must not win over the column.
-			expect(box.width).toBeLessThanOrEqual(720);
+		// The authored 800px must not win over the column.
+		expect(box.width).toBeLessThanOrEqual(720);
 
-			// The bars are gone only if the box is exactly 16:9.
-			expect(Math.abs(box.width / box.height - 16 / 9)).toBeLessThan(0.02);
+		// The bars are gone only if the box is exactly 16:9.
+		expect(Math.abs(box.width / box.height - 16 / 9)).toBeLessThan(0.02);
 
-			const leftGap = box.x - column.x;
-			const rightGap = column.x + column.width - (box.x + box.width);
-			expect(leftGap).toBeGreaterThan(0);
-			expect(Math.abs(leftGap - rightGap)).toBeLessThan(2);
-		} finally {
-			await deleteTestWikiDocument(request, doc.name).catch(() => {});
-			await deleteTestWikiDocument(request, rootGroup.name).catch(() => {});
-			await deleteTestWikiSpace(request, space.name).catch(() => {});
-		}
+		const leftGap = box.x - column.x;
+		const rightGap = column.x + column.width - (box.x + box.width);
+		expect(leftGap).toBeGreaterThan(0);
+		expect(Math.abs(leftGap - rightGap)).toBeLessThan(2);
 	});
 });
diff --git a/e2e/tests/public-pages.spec.ts b/e2e/tests/public-pages.spec.ts
index 82962cf9d..7ef043109 100644
--- a/e2e/tests/public-pages.spec.ts
+++ b/e2e/tests/public-pages.spec.ts
@@ -1,13 +1,11 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
 import { getList } from '../helpers/frappe';
+import { CHANGE_REQUEST_URL_RE } from '../helpers/routes';
 import {
-	APP_BASE,
-	CHANGE_REQUEST_URL_RE,
-	spaceLinkSelector,
-} from '../helpers/routes';
-import {
+	currentDraftDocKey,
 	openNewPageDialog,
 	publishChangeRequestFromReview,
+	saveEditor,
 } from '../helpers/wiki';
 interface WikiDocumentRoute {
 	route: string;
@@ -38,17 +36,13 @@ test.describe('Public Wiki Pages', () => {
 		test('should render TOC with correct headings on published page', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			// Use wider viewport to see TOC (lg breakpoint = 1024px)
 			await page.setViewportSize({ width: 1100, height: 900 });
 
-			// Navigate to wiki and click first space
-			await page.goto(APP_BASE);
-			await page.waitForLoadState('networkidle');
-
-			const spaceLink = page.locator(spaceLinkSelector()).first();
-			await expect(spaceLink).toBeVisible({ timeout: 5000 });
-			await spaceLink.click();
+			const space = await wiki.space();
+			await page.goto(space.url());
 			await page.waitForLoadState('networkidle');
 			// Create a new page with multiple headings
 
@@ -68,9 +62,7 @@ test.describe('Public Wiki Pages', () => {
 			// Open the newly created page from the tree
 			await page.locator('aside').getByText(pageTitle, { exact: true }).click();
 			await page.waitForURL(/\/draft\/[^/?#]+/);
-			const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-			expect(draftMatch).toBeTruthy();
-			const docKey = decodeURIComponent(draftMatch?.[1] ?? '');
+			const docKey = await currentDraftDocKey(page);
 
 			// Wait for editor to be visible and ready
 			const editor = page.locator('.ProseMirror, [contenteditable="true"]');
@@ -124,7 +116,7 @@ That is all.`;
 			await page.waitForTimeout(500);
 
 			// Save the draft
-			await page.click('button:has-text("Save")');
+			await saveEditor(page);
 			await page.waitForLoadState('networkidle');
 			// Wait for save to complete in database
 			await page.waitForTimeout(2000);
@@ -194,37 +186,24 @@ That is all.`;
 			await publicPage.close();
 		});
 
-		test('should hide TOC on mobile viewport', async ({ page }) => {
-			// Navigate to an existing published page at mobile viewport
+		test('should hide TOC on mobile viewport', async ({ page, wiki }) => {
 			await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE
 
-			await page.goto(APP_BASE);
+			// A published page of our own: the reader chrome under test only
+			// renders on a real page, and an ambient one may not exist.
+			const space = await wiki.space({
+				pages: [{ title: 'Reader Page', content: '## Section\n\nBody text.' }],
+			});
+			await page.goto(`/${space.page('Reader Page').route}`);
 			await page.waitForLoadState('networkidle');
 
-			const spaceLink = page.locator(spaceLinkSelector()).first();
-			if (await spaceLink.isVisible({ timeout: 3000 }).catch(() => false)) {
-				await spaceLink.click();
-				await page.waitForLoadState('networkidle');
-
-				// Try to find a published page link in sidebar
-				const pageLink = page.locator('aside a[href^="/"]').first();
-				if (await pageLink.isVisible({ timeout: 3000 }).catch(() => false)) {
-					const href = await pageLink.getAttribute('href');
-					if (href) {
-						// Navigate to the public page directly
-						await page.goto(href);
-						await page.waitForLoadState('networkidle');
-
-						// TOC aside should NOT be visible on mobile
-						const tocAside = page.locator('aside').filter({
-							has: page.locator('text=On this page'),
-						});
-
-						// Should be hidden (lg:block means hidden below lg)
-						await expect(tocAside).not.toBeVisible();
-					}
-				}
-			}
+			// TOC aside should NOT be visible on mobile
+			const tocAside = page.locator('aside').filter({
+				has: page.locator('text=On this page'),
+			});
+
+			// Should be hidden (lg:block means hidden below lg)
+			await expect(tocAside).not.toBeVisible();
 		});
 	});
 
@@ -232,15 +211,12 @@ That is all.`;
 		test('should show hash link on heading hover in public page', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			await page.setViewportSize({ width: 1100, height: 900 });
 
-			await page.goto(APP_BASE);
-			await page.waitForLoadState('networkidle');
-
-			const spaceLink = page.locator(spaceLinkSelector()).first();
-			await expect(spaceLink).toBeVisible({ timeout: 5000 });
-			await spaceLink.click();
+			const space = await wiki.space();
+			await page.goto(space.url());
 			await page.waitForLoadState('networkidle');
 
 			const pageTitle = `anchor-test-page-${Date.now()}`;
@@ -256,9 +232,7 @@ That is all.`;
 
 			await page.locator('aside').getByText(pageTitle, { exact: true }).click();
 			await page.waitForURL(/\/draft\/[^/?#]+/);
-			const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-			expect(draftMatch).toBeTruthy();
-			const docKey = decodeURIComponent(draftMatch?.[1] ?? '');
+			const docKey = await currentDraftDocKey(page);
 
 			const editor = page.locator('.ProseMirror, [contenteditable="true"]');
 			await expect(editor).toBeVisible({ timeout: 10000 });
@@ -291,7 +265,7 @@ End.`;
 			await editor.click();
 			await page.waitForTimeout(500);
 
-			await page.click('button:has-text("Save")');
+			await saveEditor(page);
 			await page.waitForLoadState('networkidle');
 			await page.waitForTimeout(2000);
 
@@ -337,57 +311,36 @@ End.`;
 	});
 
 	test.describe('Sidebar', () => {
-		test('should show sidebar on desktop viewport', async ({ page }) => {
+		test('should show sidebar on desktop viewport', async ({ page, wiki }) => {
 			await page.setViewportSize({ width: 1100, height: 900 });
 
-			await page.goto(APP_BASE);
+			// A published page of our own: the reader chrome under test only
+			// renders on a real page, and an ambient one may not exist.
+			const space = await wiki.space({
+				pages: [{ title: 'Reader Page', content: '## Section\n\nBody text.' }],
+			});
+			await page.goto(`/${space.page('Reader Page').route}`);
 			await page.waitForLoadState('networkidle');
 
-			const spaceLink = page.locator(spaceLinkSelector()).first();
-			if (await spaceLink.isVisible({ timeout: 3000 }).catch(() => false)) {
-				await spaceLink.click();
-				await page.waitForLoadState('networkidle');
-
-				// Find a published page and navigate to it
-				const pageLink = page.locator('aside a[href^="/"]').first();
-				if (await pageLink.isVisible({ timeout: 3000 }).catch(() => false)) {
-					const href = await pageLink.getAttribute('href');
-					if (href) {
-						await page.goto(href);
-						await page.waitForLoadState('networkidle');
-
-						// Sidebar should be visible on desktop
-						const sidebar = page.locator('.wiki-sidebar, aside nav').first();
-						await expect(sidebar).toBeVisible();
-					}
-				}
-			}
+			// Sidebar should be visible on desktop
+			const sidebar = page.locator('.wiki-sidebar, aside nav').first();
+			await expect(sidebar).toBeVisible();
 		});
 
-		test('should hide sidebar on mobile viewport', async ({ page }) => {
+		test('should hide sidebar on mobile viewport', async ({ page, wiki }) => {
 			await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE
 
-			await page.goto(APP_BASE);
+			// A published page of our own: the reader chrome under test only
+			// renders on a real page, and an ambient one may not exist.
+			const space = await wiki.space({
+				pages: [{ title: 'Reader Page', content: '## Section\n\nBody text.' }],
+			});
+			await page.goto(`/${space.page('Reader Page').route}`);
 			await page.waitForLoadState('networkidle');
 
-			const spaceLink = page.locator(spaceLinkSelector()).first();
-			if (await spaceLink.isVisible({ timeout: 3000 }).catch(() => false)) {
-				await spaceLink.click();
-				await page.waitForLoadState('networkidle');
-
-				const pageLink = page.locator('aside a[href^="/"]').first();
-				if (await pageLink.isVisible({ timeout: 3000 }).catch(() => false)) {
-					const href = await pageLink.getAttribute('href');
-					if (href) {
-						await page.goto(href);
-						await page.waitForLoadState('networkidle');
-
-						// Desktop sidebar should be hidden on mobile
-						const desktopSidebar = page.locator('.wiki-sidebar');
-						await expect(desktopSidebar).not.toBeVisible();
-					}
-				}
-			}
+			// Desktop sidebar should be hidden on mobile
+			const desktopSidebar = page.locator('.wiki-sidebar');
+			await expect(desktopSidebar).not.toBeVisible();
 		});
 	});
 });
diff --git a/e2e/tests/search-modal.spec.ts b/e2e/tests/search-modal.spec.ts
index f620bc16c..1ae22f12f 100644
--- a/e2e/tests/search-modal.spec.ts
+++ b/e2e/tests/search-modal.spec.ts
@@ -1,11 +1,4 @@
-import { expect, test } from '@playwright/test';
-import { updateDoc } from '../helpers/frappe';
-import {
-	createTestWikiDocument,
-	createTestWikiSpace,
-	deleteTestWikiDocument,
-	deleteTestWikiSpace,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
 
 /**
  * Tests for the public reader search modal (search_modal.html).
@@ -28,38 +21,22 @@ const SEARCH_INPUT = 'input[placeholder="Search documentation"]';
 test.describe('Search Modal', () => {
 	test('keyboard navigation moves one result per keypress across reopens', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		const timestamp = Date.now();
-		const spaceRoute = `search-modal-space-${timestamp}`;
-
-		const space = await createTestWikiSpace(request, {
-			route: spaceRoute,
-			is_published: true,
-		});
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceRoute}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-		const hostPage = await createTestWikiDocument(request, {
-			title: `Search Host ${timestamp}`,
-			route: `${spaceRoute}/search-host`,
-			content: 'Host page for the search modal test.',
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-		const targetPage = await createTestWikiDocument(request, {
-			title: `Search Target ${timestamp}`,
-			route: `${spaceRoute}/search-target`,
-			content: 'Target page the second result points at.',
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
+		const space = await wiki.space({
+			pages: [
+				{
+					title: 'Search Host',
+					content: 'Host page for the search modal test.',
+				},
+				{
+					title: 'Search Target',
+					content: 'Target page the second result points at.',
+				},
+			],
 		});
+		const hostPage = space.page('Search Host');
+		const targetPage = space.page('Search Target');
 
 		await page.route(SEARCH_API, (route) =>
 			route.fulfill({
@@ -69,21 +46,21 @@ test.describe('Search Modal', () => {
 							{
 								name: 'stub-1',
 								title: 'First <mark>stub</mark> result',
-								route: `${spaceRoute}/search-host`,
+								route: hostPage.route,
 								content: 'Snippet for the first <mark>stub</mark>.',
 								score: 3,
 							},
 							{
 								name: 'stub-2',
 								title: 'Second <mark>stub</mark> result',
-								route: `${spaceRoute}/search-target`,
+								route: targetPage.route,
 								content: 'Snippet for the second <mark>stub</mark>.',
 								score: 2,
 							},
 							{
 								name: 'stub-3',
 								title: 'Third <mark>stub</mark> result',
-								route: `${spaceRoute}/search-host`,
+								route: hostPage.route,
 								content: 'Snippet for the third <mark>stub</mark>.',
 								score: 1,
 							},
@@ -94,42 +71,35 @@ test.describe('Search Modal', () => {
 			}),
 		);
 
-		try {
-			await page.setViewportSize({ width: 1280, height: 800 });
-			await page.goto(`/${hostPage.route}`);
-			await page.waitForLoadState('networkidle');
+		await page.setViewportSize({ width: 1280, height: 800 });
+		await page.goto(`/${hostPage.route}`);
+		await page.waitForLoadState('networkidle');
 
-			const searchInput = page.locator(SEARCH_INPUT);
-			const results = page.getByTestId('search-result');
+		const searchInput = page.locator(SEARCH_INPUT);
+		const results = page.getByTestId('search-result');
 
-			// First open: results render for the query
-			await page.getByRole('button', { name: 'Open search' }).click();
-			await expect(searchInput).toBeVisible();
-			await searchInput.fill('stub');
-			await expect(results).toHaveCount(3);
+		// First open: results render for the query
+		await page.getByRole('button', { name: 'Open search' }).click();
+		await expect(searchInput).toBeVisible();
+		await searchInput.fill('stub');
+		await expect(results).toHaveCount(3);
 
-			// Close and reopen — a leaked keydown listener from the first open
-			// would now double every arrow-key step
-			await page.keyboard.press('Escape');
-			await expect(searchInput).toBeHidden();
-			await page.getByRole('button', { name: 'Open search' }).click();
-			await searchInput.fill('stub');
-			await expect(results).toHaveCount(3);
+		// Close and reopen — a leaked keydown listener from the first open
+		// would now double every arrow-key step
+		await page.keyboard.press('Escape');
+		await expect(searchInput).toBeHidden();
+		await page.getByRole('button', { name: 'Open search' }).click();
+		await searchInput.fill('stub');
+		await expect(results).toHaveCount(3);
 
-			// One ArrowDown must move the highlight exactly one row
-			await page.keyboard.press('ArrowDown');
-			await expect(results.nth(1)).toHaveClass(/surface-gray-3/);
-			await expect(results.nth(0)).not.toHaveClass(/surface-gray-3/);
-			await expect(results.nth(2)).not.toHaveClass(/surface-gray-3/);
+		// One ArrowDown must move the highlight exactly one row
+		await page.keyboard.press('ArrowDown');
+		await expect(results.nth(1)).toHaveClass(/surface-gray-3/);
+		await expect(results.nth(0)).not.toHaveClass(/surface-gray-3/);
+		await expect(results.nth(2)).not.toHaveClass(/surface-gray-3/);
 
-			// Enter navigates to the highlighted (second) result
-			await page.keyboard.press('Enter');
-			await page.waitForURL(`**/${targetPage.route}`, { timeout: 10000 });
-		} finally {
-			await deleteTestWikiDocument(request, targetPage.name).catch(() => {});
-			await deleteTestWikiDocument(request, hostPage.name).catch(() => {});
-			await deleteTestWikiDocument(request, rootGroup.name).catch(() => {});
-			await deleteTestWikiSpace(request, space.name).catch(() => {});
-		}
+		// Enter navigates to the highlighted (second) result
+		await page.keyboard.press('Enter');
+		await page.waitForURL(`**/${targetPage.route}`, { timeout: 10000 });
 	});
 });
diff --git a/e2e/tests/sidebar-drill-in.spec.ts b/e2e/tests/sidebar-drill-in.spec.ts
new file mode 100644
index 000000000..8c31f6f4f
--- /dev/null
+++ b/e2e/tests/sidebar-drill-in.spec.ts
@@ -0,0 +1,91 @@
+import { expect, test } from '../fixtures';
+import { APP_BASE, appUrl } from '../helpers/routes';
+
+/**
+ * The IA refactor left the app with exactly one navigation column that drills.
+ * At the top level it is the library (every space); entering a space *replaces*
+ * that column with the space's own sidebar, and the back button restores it.
+ *
+ * Two spaces are built below because the load-bearing assertion is a negative
+ * one: inside space A, space B's row must be gone. A single-space fixture would
+ * pass even if the library list were merely appended to rather than replaced.
+ */
+
+const SPACE_A_NAME = 'Drill In Alpha';
+const SPACE_B_NAME = 'Drill In Beta';
+const PAGE_TITLE = 'Alpha First Page';
+
+test.describe('Sidebar drill-in navigation', () => {
+	let spaceA = '';
+	let spaceB = '';
+	let pageName = '';
+
+	test.beforeAll(async ({ wikiSuite }) => {
+		const a = await wikiSuite.space({
+			space_name: SPACE_A_NAME,
+			pages: [{ title: PAGE_TITLE, content: 'Drill-in fixture content.' }],
+		});
+		spaceA = a.name;
+		pageName = a.page(PAGE_TITLE).name;
+
+		spaceB = (await wikiSuite.space({ space_name: SPACE_B_NAME })).name;
+	});
+
+	test('library lists spaces, entering one replaces the column, back restores it', async ({
+		page,
+	}) => {
+		await page.setViewportSize({ width: 1440, height: 900 });
+
+		// Every assertion is scoped to the nav column. The Overview page in the
+		// content column lists the same spaces, so an unscoped href locator
+		// matches twice and proves nothing about which column holds the row.
+		const sidebar = page.locator('[data-slot="sidebar"]');
+
+		// Level 0: the library. Both spaces are rows; nothing is drilled into.
+		await page.goto(APP_BASE);
+		const alphaRow = sidebar.locator(`a[href="${appUrl('spaces', spaceA)}"]`);
+		const betaRow = sidebar.locator(`a[href="${appUrl('spaces', spaceB)}"]`);
+		await expect(alphaRow).toBeVisible();
+		await expect(betaRow).toBeVisible();
+		await expect(sidebar.locator('[title="Back to Overview"]')).toHaveCount(0);
+
+		// Level 1: the sidebar *becomes* space A.
+		await alphaRow.click();
+		await expect(page).toHaveURL(new RegExp(`${APP_BASE}/spaces/${spaceA}`));
+		await expect(sidebar.locator('[title="Back to Overview"]')).toBeVisible();
+		await expect(
+			sidebar.getByText(SPACE_A_NAME, { exact: true }).first(),
+		).toBeVisible();
+		// The replacement, not an addition: the sibling space is no longer
+		// reachable from this column.
+		await expect(betaRow).toHaveCount(0);
+
+		// Level 2: the tree in that column opens a page in the content column.
+		await sidebar.getByText(PAGE_TITLE, { exact: true }).first().click();
+		await expect(page).toHaveURL(
+			new RegExp(`${APP_BASE}/spaces/${spaceA}/page/${pageName}`),
+		);
+		// Drilling to a page keeps the space column — it does not drill again.
+		await expect(sidebar.locator('[title="Back to Overview"]')).toBeVisible();
+
+		// Back out: the library returns whole, with both spaces.
+		await sidebar.locator('[title="Back to Overview"]').first().click();
+		await expect(page).toHaveURL(new RegExp(`${APP_BASE}/?$`));
+		await expect(alphaRow).toBeVisible();
+		await expect(betaRow).toBeVisible();
+		await expect(sidebar.locator('[title="Back to Overview"]')).toHaveCount(0);
+	});
+
+	test('the retired /spaces list page redirects to the library', async ({
+		page,
+	}) => {
+		// Old deep links have to keep working: the list page retired in phase 1
+		// and its path now redirects rather than 404ing.
+		await page.goto(appUrl('spaces'));
+		await expect(page).toHaveURL(new RegExp(`${APP_BASE}/?$`));
+		const sidebar = page.locator('[data-slot="sidebar"]');
+		await expect(
+			sidebar.locator(`a[href="${appUrl('spaces', spaceA)}"]`),
+		).toBeVisible();
+	});
+});
diff --git a/e2e/tests/sidebar-reveal.spec.ts b/e2e/tests/sidebar-reveal.spec.ts
index 95e104bd9..97d1a0573 100644
--- a/e2e/tests/sidebar-reveal.spec.ts
+++ b/e2e/tests/sidebar-reveal.spec.ts
@@ -1,12 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { updateDoc } from '../helpers/frappe';
-import {
-	type WikiDocument,
-	type WikiSpace,
-	cleanupWikiSpacesByRoute,
-	createTestWikiDocument,
-	createTestWikiSpace,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import type { SeededPage } from '../helpers/factory';
 
 /**
  * The reader sidebar must always reveal the current page: expand its ancestor
@@ -15,71 +8,39 @@ import {
  * prev/next buttons (see issue #685).
  */
 test.describe('Reader sidebar reveals current page', () => {
-	const spaceRoute = `sidebar-reveal-${Date.now()}`;
-	let space: WikiSpace;
-	let topPage: WikiDocument;
-	let deepPage: WikiDocument;
-	let lastFiller: WikiDocument;
+	let topPage: SeededPage;
+	let deepPage: SeededPage;
+	let lastFiller: SeededPage;
 
 	const FILLER_COUNT = 30;
 
-	test.beforeAll(async ({ request }) => {
-		space = await createTestWikiSpace(request, {
-			route: spaceRoute,
-			is_published: true,
+	test.beforeAll(async ({ wikiSuite }) => {
+		const fillerTitles = Array.from(
+			{ length: FILLER_COUNT },
+			(_, i) => `Filler Page ${String(i).padStart(2, '0')}`,
+		);
+		const space = await wikiSuite.space({
+			pages: [
+				{ title: 'Top Page' },
+				// Two collapsed levels above the page the sidebar has to reveal.
+				{
+					title: 'Outer Group',
+					is_group: true,
+					children: [
+						{
+							title: 'Inner Group',
+							is_group: true,
+							children: [{ title: 'Deep Page' }],
+						},
+					],
+				},
+				// Enough siblings after the deep page to overflow the viewport.
+				...fillerTitles.map((title) => ({ title })),
+			],
 		});
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceRoute}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-
-		topPage = await createTestWikiDocument(request, {
-			title: 'Top Page',
-			route: `${spaceRoute}/top`,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-
-		// Group > Sub Group > Deep Page — two collapsed levels above the page
-		const group = await createTestWikiDocument(request, {
-			title: 'Outer Group',
-			route: `${spaceRoute}/outer`,
-			is_group: true,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-		const subGroup = await createTestWikiDocument(request, {
-			title: 'Inner Group',
-			route: `${spaceRoute}/outer/inner`,
-			is_group: true,
-			is_published: true,
-			parent_wiki_document: group.name,
-		});
-		deepPage = await createTestWikiDocument(request, {
-			title: 'Deep Page',
-			route: `${spaceRoute}/outer/inner/deep`,
-			is_published: true,
-			parent_wiki_document: subGroup.name,
-		});
-
-		// Enough siblings after the deep page to overflow the sidebar viewport
-		for (let i = 0; i < FILLER_COUNT; i++) {
-			lastFiller = await createTestWikiDocument(request, {
-				title: `Filler Page ${String(i).padStart(2, '0')}`,
-				route: `${spaceRoute}/filler-${String(i).padStart(2, '0')}`,
-				is_published: true,
-				parent_wiki_document: rootGroup.name,
-			});
-		}
-	});
-
-	test.afterAll(async ({ request }) => {
-		await cleanupWikiSpacesByRoute(request, spaceRoute);
+		topPage = space.page('Top Page');
+		deepPage = space.page('Deep Page');
+		lastFiller = space.page(fillerTitles[fillerTitles.length - 1]);
 	});
 
 	function sidebarLink(page: import('@playwright/test').Page, route: string) {
diff --git a/e2e/tests/sidebar.spec.ts b/e2e/tests/sidebar.spec.ts
index 791aa39a6..a4d02556b 100644
--- a/e2e/tests/sidebar.spec.ts
+++ b/e2e/tests/sidebar.spec.ts
@@ -1,14 +1,12 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
 import { getList } from '../helpers/frappe';
-import {
-	APP_BASE,
-	CHANGE_REQUEST_URL_RE,
-	spaceLinkSelector,
-} from '../helpers/routes';
+import { CHANGE_REQUEST_URL_RE } from '../helpers/routes';
 import {
 	clickSidebarAddOption,
+	currentDraftDocKey,
 	openNewPageDialog,
 	publishChangeRequestFromReview,
+	saveEditor,
 } from '../helpers/wiki';
 
 interface WikiDocumentRoute {
@@ -26,20 +24,14 @@ test.describe('Public Sidebar', () => {
 		test('should only display published pages in the public sidebar', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			await page.setViewportSize({ width: 1100, height: 900 });
 
-			// Navigate to wiki and click first space
-			await page.goto(APP_BASE);
-			await page.waitForLoadState('networkidle');
-
-			const spaceLink = page.locator(spaceLinkSelector()).first();
-			await expect(spaceLink).toBeVisible({ timeout: 5000 });
-			const spaceHref = await spaceLink.getAttribute('href');
-			expect(spaceHref).toBeTruthy();
-			await spaceLink.click();
+			const space = await wiki.space();
+			const spaceUrl = space.url();
+			await page.goto(spaceUrl);
 			await page.waitForLoadState('networkidle');
-			const spaceUrl = spaceHref as string;
 
 			// Create a published page inside the space
 
@@ -60,9 +52,7 @@ test.describe('Public Sidebar', () => {
 				.getByText(publishedPageTitle, { exact: true })
 				.click();
 			await page.waitForURL(/\/draft\/[^/?#]+/);
-			const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-			expect(draftMatch).toBeTruthy();
-			const docKey = decodeURIComponent(draftMatch?.[1] ?? '');
+			const docKey = await currentDraftDocKey(page);
 
 			// Wait for editor and add content
 			const editor = page.locator('.ProseMirror, [contenteditable="true"]');
@@ -71,7 +61,7 @@ test.describe('Public Sidebar', () => {
 			await page.keyboard.type('This is published content.');
 
 			// Save the draft
-			await page.click('button:has-text("Save")');
+			await saveEditor(page);
 			await page.waitForLoadState('networkidle');
 
 			// Submit for review and merge the page
@@ -104,7 +94,7 @@ test.describe('Public Sidebar', () => {
 			await expect(editor).toBeVisible({ timeout: 10000 });
 			await editor.click();
 			await page.keyboard.type('This is unpublished content.');
-			await page.click('button:has-text("Save")');
+			await saveEditor(page);
 			await page.waitForLoadState('networkidle');
 
 			// Open public page for published content
@@ -147,16 +137,12 @@ test.describe('Public Sidebar', () => {
 		test('should use client-side navigation without full page refresh when clicking sidebar links', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			await page.setViewportSize({ width: 1100, height: 900 });
 
-			// Navigate to wiki and click first space
-			await page.goto(APP_BASE);
-			await page.waitForLoadState('networkidle');
-
-			const spaceLink = page.locator(spaceLinkSelector()).first();
-			await expect(spaceLink).toBeVisible({ timeout: 5000 });
-			await spaceLink.click();
+			const space = await wiki.space();
+			await page.goto(space.url());
 			await page.waitForLoadState('networkidle');
 
 			// Create two pages so we can navigate between them
@@ -176,14 +162,12 @@ test.describe('Public Sidebar', () => {
 				.getByText(firstPageTitle, { exact: true })
 				.click();
 			await page.waitForURL(/\/draft\/[^/?#]+/);
-			const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-			expect(draftMatch).toBeTruthy();
-			const firstDocKey = decodeURIComponent(draftMatch?.[1] ?? '');
+			const firstDocKey = await currentDraftDocKey(page);
 			const editor = page.locator('.ProseMirror, [contenteditable="true"]');
 			await expect(editor).toBeVisible({ timeout: 10000 });
 			await editor.click();
 			await page.keyboard.type('First SPA nav test page.');
-			await page.click('button:has-text("Save")');
+			await saveEditor(page);
 			await page.waitForLoadState('networkidle');
 
 			const secondPageTitle = `spa-nav-second-${Date.now()}`;
@@ -202,7 +186,7 @@ test.describe('Public Sidebar', () => {
 			await expect(editor).toBeVisible({ timeout: 10000 });
 			await editor.click();
 			await page.keyboard.type('Second SPA nav test page.');
-			await page.click('button:has-text("Save")');
+			await saveEditor(page);
 			await page.waitForLoadState('networkidle');
 
 			// Merge both pages
@@ -272,16 +256,12 @@ test.describe('Public Sidebar', () => {
 		test('should update content, URL, active state, and metadata when clicking sidebar links', async ({
 			page,
 			request,
+			wiki,
 		}) => {
 			await page.setViewportSize({ width: 1100, height: 900 });
 
-			// Navigate to wiki and click first space
-			await page.goto(APP_BASE);
-			await page.waitForLoadState('networkidle');
-
-			const spaceLink = page.locator(spaceLinkSelector()).first();
-			await expect(spaceLink).toBeVisible({ timeout: 5000 });
-			await spaceLink.click();
+			const space = await wiki.space();
+			await page.goto(space.url());
 			await page.waitForLoadState('networkidle');
 			// Create first page
 			const firstPageTitle = `first-nav-page-${Date.now()}`;
@@ -301,14 +281,12 @@ test.describe('Public Sidebar', () => {
 				.getByText(firstPageTitle, { exact: true })
 				.click();
 			await page.waitForURL(/\/draft\/[^/?#]+/);
-			const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-			expect(draftMatch).toBeTruthy();
-			const firstDocKey = decodeURIComponent(draftMatch?.[1] ?? '');
+			const firstDocKey = await currentDraftDocKey(page);
 			const editor = page.locator('.ProseMirror, [contenteditable="true"]');
 			await expect(editor).toBeVisible({ timeout: 10000 });
 			await editor.click();
 			await page.keyboard.type('First page content here.');
-			await page.click('button:has-text("Save")');
+			await saveEditor(page);
 			await page.waitForLoadState('networkidle');
 
 			// Create second page in the same change request
@@ -329,7 +307,7 @@ test.describe('Public Sidebar', () => {
 			await expect(editor).toBeVisible({ timeout: 10000 });
 			await editor.click();
 			await page.keyboard.type('Second page different content.');
-			await page.click('button:has-text("Save")');
+			await saveEditor(page);
 			await page.waitForLoadState('networkidle');
 
 			// Submit for review and merge both pages
diff --git a/e2e/tests/slash-menu.spec.ts b/e2e/tests/slash-menu.spec.ts
index 6a307a817..7b13f551b 100644
--- a/e2e/tests/slash-menu.spec.ts
+++ b/e2e/tests/slash-menu.spec.ts
@@ -1,6 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
-import { openNewPageDialog } from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import { createDraftAndOpenEditor } from '../helpers/wiki';
 
 /**
  * Covers the editor's "/" command menu.
@@ -11,48 +10,11 @@ import { openNewPageDialog } from '../helpers/wiki';
  * "No commands found" until a character was typed.
  */
 
-/**
- * Create a draft page and open the editor. Mirrors the helper in
- * iframe-embed.spec.ts — duplicated here rather than exported so changes
- * to one test don't ripple into others.
- */
-async function createDraftAndOpenEditor(
-	page: import('@playwright/test').Page,
-	title: string,
-) {
-	await page.goto(APP_BASE);
-	await page.waitForLoadState('networkidle');
-
-	const spaceLink = page.locator(spaceLinkSelector()).first();
-	await expect(spaceLink).toBeVisible({ timeout: 5000 });
-	await spaceLink.click();
-	await page.waitForLoadState('networkidle');
-
-	await openNewPageDialog(page);
-
-	await page.getByLabel('Title').fill(title);
-	await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
-	await page.waitForLoadState('networkidle');
-
-	// Saving usually auto-opens the new page; fall back to the sidebar entry.
-	const titleBox = page.getByPlaceholder('Page title');
-	const alreadyOpen = await titleBox
-		.inputValue()
-		.then((v) => v === title)
-		.catch(() => false);
-	if (!alreadyOpen) {
-		await page.locator('aside').getByText(title, { exact: true }).click();
-	}
-
-	const editor = page.locator('.ProseMirror, [contenteditable="true"]');
-	await expect(editor).toBeVisible({ timeout: 10000 });
-	return editor;
-}
-
 test.describe('Slash command menu', () => {
-	test('bare "/" opens the full command list', async ({ page }) => {
+	test('bare "/" opens the full command list', async ({ page, wiki }) => {
 		const editor = await createDraftAndOpenEditor(
 			page,
+			await wiki.space(),
 			`slash-menu-${Date.now()}`,
 		);
 
@@ -74,9 +36,11 @@ test.describe('Slash command menu', () => {
 
 	test('typing filters the list and Enter inserts the block', async ({
 		page,
+		wiki,
 	}) => {
 		const editor = await createDraftAndOpenEditor(
 			page,
+			await wiki.space(),
 			`slash-filter-${Date.now()}`,
 		);
 
diff --git a/e2e/tests/spa-editor.mobile.spec.ts b/e2e/tests/spa-editor.mobile.spec.ts
index 96a2e2210..1b3bbc630 100644
--- a/e2e/tests/spa-editor.mobile.spec.ts
+++ b/e2e/tests/spa-editor.mobile.spec.ts
@@ -1,10 +1,7 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import { uniqueRoute } from '../helpers/factory';
 import { SPACE_URL_RE, appUrl } from '../helpers/routes';
-import {
-	cleanupWikiSpacesByRoute,
-	clickSidebarAddOption,
-	createTestWikiSpace,
-} from '../helpers/wiki';
+import { openNewPageDialog } from '../helpers/wiki';
 
 /**
  * Mobile-friendly SPA (Phases 1-2) tracer + regression guards, on a phone
@@ -25,25 +22,15 @@ async function pageOverflow(page: import('@playwright/test').Page) {
 }
 
 test.describe('Mobile SPA', () => {
-	const createdRoutes: string[] = [];
-
-	test.afterEach(async ({ request }) => {
-		while (createdRoutes.length) {
-			const route = createdRoutes.pop() as string;
-			await cleanupWikiSpacesByRoute(request, route).catch(() => {});
-		}
-	});
-
 	// Phase 1: the bug we guard against is the editor collapsing to a sliver
 	// because the desktop sidebars ate the screen. The tree must live in a
 	// drawer and the editor must fill the width.
 	test('tree opens in a drawer and the editor fills the screen at 375px', async ({
 		page,
+		wiki,
 	}) => {
-		const stamp = Date.now();
-		const spaceRoute = `mobile-spa-${stamp}`;
-		createdRoutes.push(spaceRoute);
-		const pageTitle = `Mobile Page ${stamp}`;
+		const spaceRoute = uniqueRoute('mobile-spa');
+		const pageTitle = `Mobile Page ${Date.now()}`;
 
 		// --- Setup at desktop: create a space with one page ---
 		await page.setViewportSize(DESKTOP);
@@ -61,15 +48,9 @@ test.describe('Mobile SPA', () => {
 		await expect(page).toHaveURL(SPACE_URL_RE);
 		await page.waitForLoadState('networkidle');
 		const spaceUrl = page.url();
+		wiki.adopt(spaceUrl.split('/spaces/')[1].split(/[/?#]/)[0]);
 
-		const createFirstPage = page.locator(
-			'button:has-text("Create First Page")',
-		);
-		if (await createFirstPage.isVisible({ timeout: 2000 }).catch(() => false)) {
-			await createFirstPage.click();
-		} else {
-			await clickSidebarAddOption(page, 'New Page');
-		}
+		await openNewPageDialog(page);
 		await page.getByLabel('Title').fill(pageTitle);
 		await page
 			.getByRole('dialog')
@@ -126,18 +107,16 @@ test.describe('Mobile SPA', () => {
 	// and rows still navigate.
 	test('Spaces and Change Requests render without page overflow; rows navigate', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		const spaceRoute = `mobile-list-${Date.now()}`;
-		createdRoutes.push(spaceRoute);
-		await createTestWikiSpace(request, { route: spaceRoute });
+		const { route: spaceRoute } = await wiki.space();
 
 		await page.setViewportSize(PHONE);
 		await page.goto(appUrl('spaces'));
 		await page.waitForLoadState('networkidle');
 
 		await expect(
-			page.getByRole('heading', { name: 'Wiki Spaces' }),
+			page.getByRole('heading', { name: 'Spaces', exact: true }),
 		).toBeVisible();
 		// The header stacks and the table scrolls inside its container, so the
 		// page itself must not gain a horizontal scrollbar.
@@ -162,14 +141,12 @@ test.describe('Mobile SPA', () => {
 	// backdrop swallows the dialog's outside-click.
 	test('Settings opens on top of the tree drawer, not behind it', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		const spaceRoute = `mobile-settings-${Date.now()}`;
-		createdRoutes.push(spaceRoute);
-		const space = await createTestWikiSpace(request, { route: spaceRoute });
+		const space = await wiki.space();
 
 		await page.setViewportSize(PHONE);
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Open the tree drawer, then Settings from inside it.
@@ -180,6 +157,6 @@ test.describe('Mobile SPA', () => {
 
 		// Drawer closes; the settings dialog is the only modal left.
 		await expect(drawer).toBeHidden();
-		await expect(page.getByText('Permissions', { exact: true })).toBeVisible();
+		await expect(page.getByText('Access', { exact: true })).toBeVisible();
 	});
 });
diff --git a/e2e/tests/space-permissions-role-search.spec.ts b/e2e/tests/space-access-role-search.spec.ts
similarity index 75%
rename from e2e/tests/space-permissions-role-search.spec.ts
rename to e2e/tests/space-access-role-search.spec.ts
index baf14231a..1498e9fa0 100644
--- a/e2e/tests/space-permissions-role-search.spec.ts
+++ b/e2e/tests/space-access-role-search.spec.ts
@@ -1,10 +1,8 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
 import { createDoc, deleteDoc, getDoc, getList } from '../helpers/frappe';
-import { appUrl } from '../helpers/routes';
-import { createTestWikiSpace, deleteTestWikiSpace } from '../helpers/wiki';
 
 /**
- * Space Settings -> Permissions role picker searches on the server.
+ * Space Settings -> Access role picker searches on the server.
  *
  * Regression for #709: the picker used to load a single page of roles and
  * filter it in the browser, so on any site with more roles than fit in that
@@ -12,21 +10,21 @@ import { createTestWikiSpace, deleteTestWikiSpace } from '../helpers/wiki';
  * alphabetically, so it can only be found if the typed query actually reaches
  * the server.
  */
-test.describe('Space Settings -> Permissions role search', () => {
+test.describe('Space Settings -> Access role search', () => {
 	let roleName = '';
-	let spaceName = '';
 
-	test.afterEach(async ({ request }) => {
-		// The space's child row links the role, so the space goes first.
-		if (spaceName) await deleteTestWikiSpace(request, spaceName);
+	test.afterEach(async ({ request, wiki }) => {
+		// The space's child row links the role, so the space goes first — the
+		// fixture's own teardown runs after this hook, which would be too late.
+		await wiki.destroyAll();
 		if (roleName) await deleteDoc(request, 'Role', roleName);
-		spaceName = '';
 		roleName = '';
 	});
 
 	test('finds and adds a role that sorts past the first page', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		// The bug only bites once there are more roles than one page holds.
 		const enabledRoles = await getList(request, 'Role', {
@@ -41,19 +39,18 @@ test.describe('Space Settings -> Permissions role search', () => {
 		roleName = `ZZZ Wiki Role ${Date.now()}`;
 		await createDoc(request, 'Role', { role_name: roleName });
 
-		const space = await createTestWikiSpace(request, {
-			route: `role-search-${Date.now()}`,
-		});
-		spaceName = space.name;
+		const space = await wiki.space();
 
 		await page.setViewportSize({ width: 1280, height: 900 });
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
-		await page.getByTitle('Settings').first().click();
+		// The sidebar's Settings button became a "Space actions" menu (spec 01).
+		await page.getByRole('button', { name: 'Space actions' }).click();
+		await page.getByRole('menuitem', { name: 'Space settings' }).click();
 		const dialog = page.getByRole('dialog');
 		await expect(dialog).toBeVisible();
-		await dialog.getByRole('tab', { name: 'Permissions', exact: true }).click();
+		await dialog.getByRole('tab', { name: 'Access', exact: true }).click();
 
 		// Type a fragment that no role from the first page matches.
 		const picker = dialog.getByPlaceholder('Search role to add');
diff --git a/e2e/tests/space-default-page.spec.ts b/e2e/tests/space-default-page.spec.ts
index e2cc8725d..577d1454c 100644
--- a/e2e/tests/space-default-page.spec.ts
+++ b/e2e/tests/space-default-page.spec.ts
@@ -1,13 +1,6 @@
-import { type APIRequestContext, expect, test } from '@playwright/test';
-import { updateDoc } from '../helpers/frappe';
-import { appUrl, spaceLinkSelector } from '../helpers/routes';
-import {
-	type WikiDocument,
-	type WikiSpace,
-	cleanupWikiSpacesByRoute,
-	createTestWikiDocument,
-	createTestWikiSpace,
-} from '../helpers/wiki';
+import { expect, test } from '../fixtures';
+import type { SeededSpace } from '../helpers/factory';
+import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
 
 /**
  * Opening a space in the editor should never strand the user on the "Select a
@@ -15,67 +8,26 @@ import {
  * whichever page the user last had open (persisted per-space in localStorage).
  */
 test.describe('Space default page', () => {
-	const populatedRoute = `default-page-${Date.now()}`;
-	const emptyRoute = `default-page-empty-${Date.now()}`;
-	let space: WikiSpace;
-	let alpha: WikiDocument;
-	let beta: WikiDocument;
-	let emptySpace: WikiSpace;
+	let space: SeededSpace;
+	let emptySpace: SeededSpace;
 
-	test.beforeAll(async ({ request }) => {
+	test.beforeAll(async ({ wikiSuite }) => {
 		// A space with two published pages, Alpha before Beta.
-		space = await createTestWikiSpace(request, {
-			route: populatedRoute,
-			is_published: true,
+		space = await wikiSuite.space({
+			pages: [{ title: 'Alpha Page' }, { title: 'Beta Page' }],
 		});
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${populatedRoute}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-		alpha = await createTestWikiDocument(request, {
-			title: 'Alpha Page',
-			route: `${populatedRoute}/alpha`,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-		beta = await createTestWikiDocument(request, {
-			title: 'Beta Page',
-			route: `${populatedRoute}/beta`,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-
 		// A space with no pages, to exercise the empty-tree fallback.
-		emptySpace = await createTestWikiSpace(request, {
-			route: emptyRoute,
-			is_published: true,
-		});
-		const emptyRoot = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${emptyRoute}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', emptySpace.name, {
-			root_group: emptyRoot.name,
-		});
-	});
-
-	test.afterAll(async ({ request }) => {
-		await cleanupWikiSpacesByRoute(request, populatedRoute);
-		await cleanupWikiSpacesByRoute(request, emptyRoute);
+		emptySpace = await wikiSuite.space();
 	});
 
 	test('auto-opens the first page, then reopens the last opened page', async ({
 		page,
 	}) => {
+		const alpha = space.page('Alpha Page');
+		const beta = space.page('Beta Page');
+
 		// Entering at the bare space route opens the first page (Alpha).
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForURL(`**/spaces/${space.name}/page/${alpha.name}`, {
 			timeout: 15000,
 		});
@@ -84,13 +36,13 @@ test.describe('Space default page', () => {
 		// the rendered title (the page-title input) rather than networkidle: it's
 		// the "page mounted" signal the persist watcher rides on, and avoids
 		// networkidle's flaky 500ms-quiet wait on slow CI.
-		await page.goto(appUrl('spaces', space.name, 'page', beta.name));
+		await page.goto(space.url('page', beta.name));
 		await expect(page.getByPlaceholder('Page title')).toHaveValue('Beta Page', {
 			timeout: 15000,
 		});
 
 		// Re-entering the bare space route now reopens Beta, not Alpha.
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForURL(`**/spaces/${space.name}/page/${beta.name}`, {
 			timeout: 15000,
 		});
@@ -99,7 +51,7 @@ test.describe('Space default page', () => {
 	test('stays on the welcome screen when the space has no pages', async ({
 		page,
 	}) => {
-		await page.goto(appUrl('spaces', emptySpace.name));
+		await page.goto(emptySpace.url());
 		// Wait for the tree to resolve (sidebar reports it's empty), so any
 		// redirect would already have happened.
 		await expect(page.locator('aside >> text=No pages yet')).toBeVisible({
@@ -107,7 +59,12 @@ test.describe('Space default page', () => {
 		});
 		// No page was opened — URL is still the bare space route.
 		await expect(page).toHaveURL(new RegExp(`/spaces/${emptySpace.name}$`));
-		await expect(page.locator('text=Select a page')).toBeVisible();
+		// The tree states the fact; the content column carries the action.
+		const content = page.locator('main');
+		await expect(content.getByText('Create your first page')).toBeVisible();
+		await expect(
+			content.getByRole('button', { name: 'New page', exact: true }),
+		).toBeVisible();
 	});
 });
 
@@ -120,86 +77,32 @@ test.describe('Space default page', () => {
  * each space with a fresh page.goto().
  */
 test.describe('Space default page — in-app space switch', () => {
-	const ts = Date.now();
-	const routeA = `switch-a-${ts}`;
-	const routeB = `switch-b-${ts}`;
-	const nameB = `Bravo Space ${ts}`;
-	let spaceA: WikiSpace;
-	let spaceB: WikiSpace;
-	let aFirst: WikiDocument;
-	let bFirst: WikiDocument;
-
-	async function buildSpace(
-		request: APIRequestContext,
-		route: string,
-		spaceName: string,
-		pagePrefix: string,
-	): Promise<{ space: WikiSpace; firstPage: WikiDocument }> {
-		const space = await createTestWikiSpace(request, {
-			route,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			space_name: spaceName,
-		});
-		const rootGroup = await createTestWikiDocument(request, {
-			title: `${pagePrefix} Root`,
-			route: `${route}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-		const firstPage = await createTestWikiDocument(request, {
-			title: `${pagePrefix} One`,
-			route: `${route}/one`,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-		await createTestWikiDocument(request, {
-			title: `${pagePrefix} Two`,
-			route: `${route}/two`,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-		return { space, firstPage };
-	}
-
-	test.beforeAll(async ({ request }) => {
-		({ space: spaceA, firstPage: aFirst } = await buildSpace(
-			request,
-			routeA,
-			`Alpha Space ${ts}`,
-			'Alpha',
-		));
-		({ space: spaceB, firstPage: bFirst } = await buildSpace(
-			request,
-			routeB,
-			nameB,
-			'Bravo',
-		));
-	});
-
-	test.afterAll(async ({ request }) => {
-		await cleanupWikiSpacesByRoute(request, routeA);
-		await cleanupWikiSpacesByRoute(request, routeB);
-	});
-
 	test('opens the switched-to space page, not the previous space page', async ({
 		page,
+		wiki,
 	}) => {
+		const spaceA = await wiki.space({
+			space_name: 'Alpha Space',
+			pages: [{ title: 'Alpha One' }, { title: 'Alpha Two' }],
+		});
+		const spaceB = await wiki.space({
+			space_name: 'Bravo Space',
+			pages: [{ title: 'Bravo One' }, { title: 'Bravo Two' }],
+		});
+		const aFirst = spaceA.page('Alpha One');
+		const bFirst = spaceB.page('Bravo One');
+
 		// Enter space A — it auto-opens A's first page and hydrates the singleton
 		// draft store for A.
-		await page.goto(appUrl('spaces', spaceA.name));
+		await page.goto(spaceA.url());
 		await page.waitForURL(`**/spaces/${spaceA.name}/page/${aFirst.name}`, {
 			timeout: 15000,
 		});
 
-		// Switch to space B entirely in-app: back to the list, then into B. No
-		// full reload, so the store still holds A's tree at the moment B mounts.
-		await page.locator('[title="Back to Spaces"]').click();
-		await page.waitForURL(/\/spaces$/, { timeout: 15000 });
+		// Switch to space B entirely in-app: back out to the library, then into B.
+		// No full reload, so the store still holds A's tree at the moment B mounts.
+		await page.locator('[title="Back to Overview"]').first().click();
+		await page.waitForURL(new RegExp(`${APP_BASE}/?$`), { timeout: 15000 });
 		// Target the row by its href (router-link) — robust to how the row text
 		// is rendered — and click it for a client-side nav into B.
 		await page.locator(spaceLinkSelector(spaceB.name)).first().click();
diff --git a/e2e/tests/space-empty-new-page.spec.ts b/e2e/tests/space-empty-new-page.spec.ts
new file mode 100644
index 000000000..3143118e8
--- /dev/null
+++ b/e2e/tests/space-empty-new-page.spec.ts
@@ -0,0 +1,50 @@
+import { expect, test } from '../fixtures';
+
+/**
+ * An empty space's content column offers "New page". The dialog that creates
+ * one lives in the tree, in the sidebar — a sibling column, not an ancestor —
+ * so the button hands its request to a module-scoped flag the tree consumes.
+ * This exercises that hand-off end to end: press the button in <main>, get the
+ * tree's dialog, and land in the editor on the page it made.
+ */
+test.describe('Empty space — New page from the content column', () => {
+	test('creates the first page and opens it in the editor', async ({
+		page,
+		wiki,
+	}) => {
+		const space = await wiki.space();
+		await page.goto(space.url());
+
+		// The sidebar reporting an empty tree is the signal that any auto-open
+		// would already have happened.
+		await expect(page.locator('aside >> text=No pages yet')).toBeVisible({
+			timeout: 15000,
+		});
+
+		const content = page.locator('main');
+		await content
+			.getByRole('button', { name: 'New page', exact: true })
+			.click();
+
+		const title = `First Page ${Date.now()}`;
+		const dialog = page.getByRole('dialog');
+		await expect(dialog).toBeVisible();
+		await dialog.getByLabel('Title').fill(title);
+		await dialog.getByRole('button', { name: 'Save' }).click();
+
+		// A created page is a change request entry until it merges, so it opens
+		// on the draft route rather than /page/.
+		await page.waitForURL(/\/draft\//, { timeout: 15000 });
+		await expect(
+			page.locator('aside').getByText(title, { exact: false }),
+		).toBeVisible({ timeout: 15000 });
+
+		// No reload allowance here on purpose. The panel used to strand on
+		// "Draft not found" when the create resolved before it mounted — the
+		// temp key it was navigated to had already been promoted away. This
+		// asserts the editor arrives first time.
+		await expect(page.getByPlaceholder('Page title')).toHaveValue(title, {
+			timeout: 15000,
+		});
+	});
+});
diff --git a/e2e/tests/space-list.spec.ts b/e2e/tests/space-list.spec.ts
deleted file mode 100644
index 5eb855cfb..000000000
--- a/e2e/tests/space-list.spec.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { SPACE_URL_RE, appUrl, spaceLinkSelector } from '../helpers/routes';
-
-test.describe('Wiki Space list', () => {
-	test('View opens the public-facing space in a new tab without navigating the row', async ({
-		page,
-	}) => {
-		const timestamp = Date.now();
-		const spaceName = `View Btn Space ${timestamp}`;
-		const route = `view-btn-space-${timestamp}`;
-
-		await page.goto(appUrl('spaces'));
-		await page.waitForLoadState('networkidle');
-
-		await page.getByRole('button', { name: 'New Space' }).click();
-		await page.waitForSelector('[role="dialog"]', { state: 'visible' });
-		await page.getByLabel('Space Name').fill(spaceName);
-		await page.getByLabel('Route').fill(route);
-		await page
-			.getByRole('dialog')
-			.getByRole('button', { name: 'Create' })
-			.click();
-		await expect(page).toHaveURL(SPACE_URL_RE);
-
-		// Back to the list and find the new (published) space row.
-		await page.goto(appUrl('spaces'));
-		await page.waitForLoadState('networkidle');
-		const row = page
-			.locator(spaceLinkSelector())
-			.filter({ hasText: spaceName })
-			.first();
-		await expect(row).toBeVisible({ timeout: 10000 });
-
-		// View opens the reader at the site root (/<route>) in a new tab, and the
-		// row must not navigate into the editor (router-link .stop.prevent guard).
-		const listUrl = page.url();
-		const [popup] = await Promise.all([
-			page.waitForEvent('popup'),
-			row.getByRole('button', { name: 'View' }).click(),
-		]);
-		expect(page.url()).toBe(listUrl);
-		await popup.waitForLoadState('domcontentloaded').catch(() => {});
-		expect(popup.url()).toContain(route);
-		await popup.close();
-	});
-});
diff --git a/e2e/tests/space-logo-picker.spec.ts b/e2e/tests/space-logo-picker.spec.ts
new file mode 100644
index 000000000..c085f2c87
--- /dev/null
+++ b/e2e/tests/space-logo-picker.spec.ts
@@ -0,0 +1,136 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import { uniqueRoute } from '../helpers/factory';
+import { getDoc } from '../helpers/frappe';
+import { appUrl } from '../helpers/routes';
+
+/**
+ * Space Settings -> General: the Space Logo tile.
+ *
+ * The tile is the control -- there is no Upload button beside it any more --
+ * and every choice writes straight to the document, so what the browser shows
+ * and what the row holds must never disagree. The generated mark is the case
+ * worth an e2e: it is produced by a lazily-imported DiceBear chunk, so a
+ * broken chunk boundary fails here and nowhere else.
+ */
+test.describe('Space Settings -> Space Logo', () => {
+	async function openPicker(page: Page) {
+		await page.getByRole('button', { name: 'Space actions' }).click();
+		await page.getByRole('menuitem', { name: 'Space settings' }).click();
+		const dialog = page.getByRole('dialog');
+		await expect(dialog).toBeVisible();
+		await dialog.getByTestId('space-identity-trigger').click();
+		// The popover is portaled out of the dialog, so it lives on the page.
+		return page.getByTestId('space-identity-tabs');
+	}
+
+	test('picking an icon and a colour stores both and survives a reload', async ({
+		page,
+		request,
+		wiki,
+	}) => {
+		const space = await wiki.space();
+
+		await page.setViewportSize({ width: 1280, height: 900 });
+		await page.goto(space.url());
+		await page.waitForLoadState('networkidle');
+
+		await openPicker(page);
+		await page.getByRole('button', { name: 'green', exact: true }).click();
+		await page.getByRole('option', { name: 'Knowledge', exact: true }).click();
+
+		await expect
+			.poll(async () => {
+				const doc = await getDoc(request, 'Wiki Space', space.name);
+				return [doc.space_icon, doc.space_color];
+			})
+			.toEqual(['lucide-book-open-text', 'green']);
+
+		// The mark the sidebar header draws comes from the same fields, so a
+		// reload proves the whole round trip and not just the write.
+		await page.reload();
+		await page.waitForLoadState('networkidle');
+		await expect(
+			page.locator('span.lucide-book-open-text').first(),
+		).toBeVisible();
+	});
+
+	test('shuffle generates a mark, stores its seed, and keeps it on reload', async ({
+		page,
+		request,
+		wiki,
+	}) => {
+		const space = await wiki.space();
+
+		await page.setViewportSize({ width: 1280, height: 900 });
+		await page.goto(space.url());
+		await page.waitForLoadState('networkidle');
+
+		await openPicker(page);
+		await page.getByTestId('space-identity-shuffle').click();
+
+		const rolled = await expect
+			.poll(
+				async () => {
+					const doc = await getDoc(request, 'Wiki Space', space.name);
+					return doc.avatar_seed || '';
+				},
+				{ timeout: 15000 },
+			)
+			.not.toEqual('')
+			.then(() => getDoc(request, 'Wiki Space', space.name));
+
+		expect(rolled.avatar_style).toBeTruthy();
+		expect(rolled.avatar).toMatch(/^data:image\/svg\+xml[;,]/);
+
+		await page.reload();
+		await page.waitForLoadState('networkidle');
+		const mark = page.locator(`img[src^="data:image/svg+xml"]`).first();
+		await expect(mark).toBeVisible();
+
+		// Rolling again has to change the art, or Shuffle is a no-op button.
+		await openPicker(page);
+		await page.getByTestId('space-identity-shuffle').click();
+		await expect
+			.poll(
+				async () => {
+					const doc = await getDoc(request, 'Wiki Space', space.name);
+					return doc.avatar_seed;
+				},
+				{ timeout: 15000 },
+			)
+			.not.toEqual(rolled.avatar_seed);
+	});
+
+	test('a new space is created with a mark rather than a bare initial', async ({
+		page,
+		request,
+		wiki,
+	}) => {
+		await page.setViewportSize({ width: 1280, height: 900 });
+		await page.goto(appUrl());
+		await page.waitForLoadState('networkidle');
+
+		const route = uniqueRoute('logo-created');
+		await page.getByRole('button', { name: 'New Space' }).click();
+		const dialog = page.getByRole('dialog');
+		await expect(dialog).toBeVisible();
+
+		// The roll happens as the dialog opens, so the tile is already a mark
+		// before anything is typed.
+		await expect(
+			dialog.locator('img[src^="data:image/svg+xml"]').first(),
+		).toBeVisible({ timeout: 15000 });
+
+		await dialog.getByPlaceholder('My Wiki Space').fill(route);
+		await dialog.getByRole('button', { name: 'Create', exact: true }).click();
+		await page.waitForURL(/\/spaces\//, { timeout: 15000 });
+
+		const spaceName = page.url().split('/spaces/')[1].split(/[/?#]/)[0];
+		wiki.adopt(spaceName);
+
+		const doc = await getDoc(request, 'Wiki Space', spaceName);
+		expect(doc.avatar).toMatch(/^data:image\/svg\+xml[;,]/);
+		expect(doc.avatar_seed).toBeTruthy();
+	});
+});
diff --git a/e2e/tests/stale-tab-flags.spec.ts b/e2e/tests/stale-tab-flags.spec.ts
new file mode 100644
index 000000000..829006221
--- /dev/null
+++ b/e2e/tests/stale-tab-flags.spec.ts
@@ -0,0 +1,201 @@
+import type { Locator } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import type { SeededSpace } from '../helpers/factory';
+
+/**
+ * Horizontal tabs were removed. `Wiki Space.enable_tabs` and the node-level
+ * `is_tab` / `tab_icon` flags stay in the schema so old revisions and change
+ * requests still apply, but nothing may read them as navigation any more.
+ *
+ * The space below is built through the API carrying every one of those legacy
+ * flags — the exact shape that used to produce a tab bar. Both surfaces have to
+ * render it as one plain tree.
+ */
+
+const SPACE_NAME = 'Stale Tabs E2E';
+
+// Layout assertions compare row positions, so a missing box is a real failure
+// rather than something to silently skip.
+async function box(locator: Locator) {
+	const rect = await locator.boundingBox();
+	if (!rect) throw new Error('element has no bounding box');
+	return rect;
+}
+
+test.describe('A space carrying legacy tab flags', () => {
+	let space: SeededSpace;
+	// The page every test enters on, addressed by the route the server derived.
+	let salesInvoiceRoute = '';
+
+	test.beforeAll(async ({ wikiSuite }) => {
+		space = await wikiSuite.space({
+			space_name: SPACE_NAME,
+			// The switch that used to raise the tab bar. Nothing reads it now.
+			enable_tabs: 1,
+			pages: [
+				{
+					title: 'Accounting',
+					is_group: true,
+					is_tab: 1,
+					tab_icon: 'lucide-wallet',
+					children: [
+						{
+							title: 'Receivables',
+							is_group: true,
+							children: [{ title: 'Sales Invoice' }, { title: 'Credit Note' }],
+						},
+					],
+				},
+				{
+					title: 'Manufacturing',
+					is_group: true,
+					is_tab: 1,
+					tab_icon: 'lucide-factory',
+					children: [
+						{
+							title: 'Production',
+							is_group: true,
+							children: [{ title: 'Work Order' }],
+						},
+					],
+				},
+				// Never flagged — used to live behind the synthetic Home tab.
+				{
+					title: 'Release Notes',
+					is_group: true,
+					children: [{ title: 'v15 Changelog' }],
+				},
+			],
+		});
+		salesInvoiceRoute = space.page('Sales Invoice').route;
+	});
+
+	test('reader shows one tree with every top-level group, and no tab bar', async ({
+		page,
+	}) => {
+		await page.setViewportSize({ width: 1440, height: 900 });
+		await page.goto(`/${salesInvoiceRoute}`);
+		await page.waitForLoadState('networkidle');
+
+		const sidebar = page.locator('.wiki-sidebar');
+		await expect(page.getByRole('tablist')).toHaveCount(0);
+
+		// Flagged and unflagged groups sit side by side; nothing is gated.
+		await expect(
+			sidebar.getByText('Accounting', { exact: true }),
+		).toBeVisible();
+		await expect(
+			sidebar.getByText('Manufacturing', { exact: true }),
+		).toBeVisible();
+		await expect(
+			sidebar.getByText('Release Notes', { exact: true }),
+		).toBeVisible();
+
+		// The subtree of the open page is expanded, as for any other group.
+		await expect(
+			sidebar.getByText('Receivables', { exact: true }),
+		).toBeVisible();
+	});
+
+	test('reader SPA navigation across former tabs keeps the whole tree', async ({
+		page,
+	}) => {
+		await page.setViewportSize({ width: 1440, height: 900 });
+		await page.goto(`/${salesInvoiceRoute}`);
+		await page.waitForLoadState('networkidle');
+
+		const sidebar = page.locator('.wiki-sidebar');
+		await sidebar.getByText('Manufacturing', { exact: true }).click();
+		await expect(
+			sidebar.getByText('Production', { exact: true }),
+		).toBeVisible();
+
+		await sidebar.getByText('Production', { exact: true }).click();
+		await sidebar.getByText('Work Order', { exact: true }).click();
+		await expect(page).toHaveURL(
+			new RegExp(`/${space.page('Work Order').route}`),
+		);
+
+		// The former Home content is still there after the SPA hop.
+		await expect(
+			sidebar.getByText('Release Notes', { exact: true }),
+		).toBeVisible();
+	});
+
+	test('reader chrome is the navbar alone, sitting directly above the tree', async ({
+		page,
+	}) => {
+		await page.setViewportSize({ width: 1440, height: 900 });
+		await page.goto(`/${salesInvoiceRoute}`);
+		await page.waitForLoadState('networkidle');
+
+		// `banner` picks the page-level header; the mobile one and the article's
+		// own <header> are both plain <header> elements.
+		const navbar = page.getByRole('banner');
+		const sidebar = page.locator('.wiki-sidebar');
+
+		const navbarBox = await box(navbar);
+		const sidebarBox = await box(sidebar);
+
+		// The tab row used to sit between these two — the sidebar now starts
+		// immediately below the navbar, with no 44px gap left behind.
+		expect(sidebarBox.y).toBeGreaterThanOrEqual(
+			navbarBox.y + navbarBox.height - 1,
+		);
+		expect(sidebarBox.y).toBeLessThan(navbarBox.y + navbarBox.height + 4);
+		expect(navbarBox.width).toBeGreaterThan(sidebarBox.width);
+
+		await expect(
+			navbar.getByText(SPACE_NAME, { exact: true }).first(),
+		).toBeVisible();
+	});
+
+	test('reader mobile drawer shows one tree with no tab picker', async ({
+		page,
+	}) => {
+		await page.setViewportSize({ width: 390, height: 844 });
+		await page.goto(`/${salesInvoiceRoute}`);
+		await page.waitForLoadState('networkidle');
+
+		await page.getByTestId('mobile-menu-toggle').click();
+
+		const sheet = page.getByTestId('mobile-bottom-sheet');
+		await expect(sheet).toBeVisible();
+
+		// The tab picker was a combobox listing the space's tabs. Gone entirely.
+		await expect(sheet.getByRole('listbox')).toHaveCount(0);
+
+		await expect(
+			sheet.getByText('Release Notes', { exact: true }),
+		).toBeVisible();
+		await expect(
+			sheet.getByText('Manufacturing', { exact: true }),
+		).toBeVisible();
+	});
+
+	test('app sidebar renders flagged groups as plain top-level groups', async ({
+		page,
+	}) => {
+		await page.setViewportSize({ width: 1440, height: 900 });
+		await page.goto(space.url());
+		await page.waitForLoadState('networkidle');
+
+		const tree = page.locator('aside');
+		await expect(tree.getByText('Accounting', { exact: true })).toBeVisible({
+			timeout: 15000,
+		});
+
+		// All three top-level groups at once — no subtree hidden behind a tab.
+		await expect(
+			tree.getByText('Manufacturing', { exact: true }),
+		).toBeVisible();
+		await expect(
+			tree.getByText('Release Notes', { exact: true }),
+		).toBeVisible();
+		await expect(page.getByRole('tablist')).toHaveCount(0);
+
+		// And they expand like any other group.
+		await tree.getByText('Accounting', { exact: true }).click();
+		await expect(tree.getByText('Receivables', { exact: true })).toBeVisible();
+	});
+});
diff --git a/e2e/tests/tab-navigation.spec.ts b/e2e/tests/tab-navigation.spec.ts
deleted file mode 100644
index d97fe62e8..000000000
--- a/e2e/tests/tab-navigation.spec.ts
+++ /dev/null
@@ -1,524 +0,0 @@
-import {
-	type APIRequestContext,
-	type Locator,
-	expect,
-	test,
-} from '@playwright/test';
-import { createDoc } from '../helpers/frappe';
-import { APP_BASE } from '../helpers/routes';
-import { cleanupWikiSpacesByRoute } from '../helpers/wiki';
-
-/**
- * Horizontal tab navigation: top-level groups flagged `is_tab` render in a bar
- * above the tree, and clicking one swaps the tree to that tab's subtree.
- *
- * The space is built through the API rather than reusing an existing one, so
- * the tab layout under test is exactly the one asserted against.
- */
-
-const ROUTE = `tabs-e2e-${Date.now()}`;
-
-type Doc = { name: string };
-
-// Layout assertions compare row positions, so a missing box is a real failure
-// rather than something to silently skip.
-async function box(locator: Locator) {
-	const rect = await locator.boundingBox();
-	if (!rect) throw new Error('element has no bounding box');
-	return rect;
-}
-
-async function group(
-	request: APIRequestContext,
-	title: string,
-	parent: string,
-	sortOrder: number,
-	tabIcon?: string,
-) {
-	return createDoc<Doc>(request, 'Wiki Document', {
-		title,
-		is_group: 1,
-		is_published: 1,
-		parent_wiki_document: parent,
-		sort_order: sortOrder,
-		...(tabIcon ? { is_tab: 1, tab_icon: tabIcon } : {}),
-	});
-}
-
-async function page_(
-	request: APIRequestContext,
-	title: string,
-	parent: string,
-	sortOrder: number,
-) {
-	return createDoc<Doc>(request, 'Wiki Document', {
-		title,
-		is_group: 0,
-		is_published: 1,
-		parent_wiki_document: parent,
-		sort_order: sortOrder,
-		content: `Documentation for ${title}.`,
-	});
-}
-
-test.describe('Horizontal tab navigation', () => {
-	test.beforeAll(async ({ request }) => {
-		const root = await createDoc<Doc>(request, 'Wiki Document', {
-			title: `Tabs Root ${Date.now()}`,
-			is_group: 1,
-			is_published: 1,
-		});
-		await createDoc(request, 'Wiki Space', {
-			space_name: 'Tabs E2E',
-			route: ROUTE,
-			root_group: root.name,
-			is_published: 1,
-			// Tabs are opt-in per space; every test below needs the bar.
-			enable_tabs: 1,
-		});
-
-		const accounting = await group(
-			request,
-			'Accounting',
-			root.name,
-			0,
-			'lucide-wallet',
-		);
-		const receivables = await group(request, 'Receivables', accounting.name, 0);
-		await page_(request, 'Sales Invoice', receivables.name, 0);
-		await page_(request, 'Credit Note', receivables.name, 1);
-
-		const manufacturing = await group(
-			request,
-			'Manufacturing',
-			root.name,
-			1,
-			'lucide-factory',
-		);
-		const production = await group(
-			request,
-			'Production',
-			manufacturing.name,
-			0,
-		);
-		await page_(request, 'Work Order', production.name, 0);
-
-		// Non-tab top-level content must keep working alongside tabs.
-		const misc = await group(request, 'Release Notes', root.name, 2);
-		await page_(request, 'v15 Changelog', misc.name, 0);
-	});
-
-	test.afterAll(async ({ request }) => {
-		await cleanupWikiSpacesByRoute(request, ROUTE);
-	});
-
-	test('reader shows the bar, swaps subtrees on SPA nav, and keeps non-tab content', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(`/${ROUTE}/accounting/receivables/sales-invoice`);
-		await page.waitForLoadState('networkidle');
-
-		const tabBar = page.getByRole('tablist');
-		const sidebar = page.locator('.wiki-sidebar');
-		await expect(tabBar.getByRole('tab', { name: 'Accounting' })).toBeVisible();
-		await expect(
-			tabBar.getByRole('tab', { name: 'Manufacturing' }),
-		).toBeVisible();
-
-		// Hard load: the tab owning the current page is the active one.
-		await expect(
-			tabBar.getByRole('tab', { name: 'Accounting' }),
-		).toHaveAttribute('aria-selected', 'true');
-		await expect(
-			sidebar.getByText('Receivables', { exact: true }),
-		).toBeVisible();
-		await expect(sidebar.getByText('Production', { exact: true })).toBeHidden();
-
-		// SPA navigation must move the bar with it, not leave it stale.
-		await tabBar.getByRole('tab', { name: 'Manufacturing' }).click();
-		await expect(
-			tabBar.getByRole('tab', { name: 'Manufacturing' }),
-		).toHaveAttribute('aria-selected', 'true');
-		await expect(
-			tabBar.getByRole('tab', { name: 'Accounting' }),
-		).toHaveAttribute('aria-selected', 'false');
-		await expect(
-			sidebar.getByText('Production', { exact: true }),
-		).toBeVisible();
-		await expect(
-			sidebar.getByText('Receivables', { exact: true }),
-		).toBeHidden();
-
-		// With multiple tabs, non-tab top-level content lives under Home, so it's
-		// hidden while a tab is active (see the Home test below).
-		await expect(
-			sidebar.getByText('Release Notes', { exact: true }),
-		).toBeHidden();
-	});
-
-	test('reader Home tab lands on untabbed content and gates it behind itself', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(`/${ROUTE}/accounting/receivables/sales-invoice`);
-		await page.waitForLoadState('networkidle');
-
-		const tabBar = page.getByRole('tablist');
-		const sidebar = page.locator('.wiki-sidebar');
-		const home = tabBar.getByRole('tab', { name: 'Home' });
-
-		// Home leads the bar (≥2 tabs + untabbed content), inactive on a tab page.
-		await expect(home).toBeVisible();
-		await expect(home).toHaveAttribute('aria-selected', 'false');
-		await expect(
-			sidebar.getByText('Release Notes', { exact: true }),
-		).toBeHidden();
-
-		// Clicking Home surfaces the untabbed subtree and deselects the tabs.
-		await home.click();
-		await expect(home).toHaveAttribute('aria-selected', 'true');
-		await expect(
-			sidebar.getByText('Release Notes', { exact: true }),
-		).toBeVisible();
-		await expect(
-			tabBar.getByRole('tab', { name: 'Accounting' }),
-		).toHaveAttribute('aria-selected', 'false');
-	});
-
-	test('reader deep link into a tab subtree highlights that tab on hard load', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(`/${ROUTE}/manufacturing/production/work-order`);
-		await page.waitForLoadState('networkidle');
-
-		const tabBar = page.getByRole('tablist');
-		const sidebar = page.locator('.wiki-sidebar');
-		await expect(
-			tabBar.getByRole('tab', { name: 'Manufacturing' }),
-		).toHaveAttribute('aria-selected', 'true');
-		await expect(
-			sidebar.getByText('Production', { exact: true }),
-		).toBeVisible();
-	});
-
-	test('editor shows the bar and swaps the sidebar subtree', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-		await page.getByText('Tabs E2E', { exact: true }).first().click();
-		await page.waitForLoadState('networkidle');
-
-		const aside = page.locator('aside').first();
-		// The bar sits above the sidebar+content row now, so it's page-level, not
-		// scoped to <main>.
-		const tabBar = page.getByRole('tablist');
-		await expect(tabBar.getByRole('tab', { name: 'Accounting' })).toBeVisible({
-			timeout: 15000,
-		});
-		await expect(aside.getByText('Receivables', { exact: true })).toBeVisible();
-
-		await tabBar.getByRole('tab', { name: 'Manufacturing' }).click();
-		await expect(aside.getByText('Production', { exact: true })).toBeVisible();
-		await expect(aside.getByText('Receivables', { exact: true })).toHaveCount(
-			0,
-		);
-	});
-
-	test('editor creates a tab with an icon and it appears in the bar immediately', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-		await page.getByText('Tabs E2E', { exact: true }).first().click();
-		await page.waitForLoadState('networkidle');
-
-		const aside = page.locator('aside').first();
-		const tabBar = page.getByRole('tablist');
-		await expect(tabBar.getByRole('tab', { name: 'Accounting' })).toBeVisible({
-			timeout: 15000,
-		});
-
-		await aside.getByTitle('Add').click();
-		await page.getByRole('menuitem', { name: 'New Tab' }).click();
-
-		const dialog = page.getByRole('dialog');
-		await expect(dialog.getByText('Create New Tab')).toBeVisible();
-		await dialog.getByLabel('Title').fill('Projects');
-		// Curated icon list, so a known-present label must be offered.
-		await dialog.getByRole('option', { name: 'Launch' }).click();
-		await dialog.getByRole('button', { name: 'Save' }).click();
-
-		// Comes from the draft tree, so it shows before the CR is merged.
-		await expect(
-			tabBar.getByRole('tab', { name: 'Projects', exact: true }),
-		).toBeVisible({
-			timeout: 15000,
-		});
-	});
-
-	test('reader stacks navbar, tabs, then the tree, and renders tab icons', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(`/${ROUTE}/accounting/receivables/sales-invoice`);
-		await page.waitForLoadState('networkidle');
-
-		// `banner` picks the page-level header; the mobile one and the article's
-		// own <header> are both plain <header> elements.
-		const navbar = page.getByRole('banner');
-		const tabBar = page.getByRole('tablist');
-		const sidebar = page.locator('.wiki-sidebar');
-
-		// The hierarchy is the point of this layout: each row starts below the
-		// previous one, and both chrome rows span past the sidebar's width.
-		const navbarBox = await box(navbar);
-		const tabsBox = await box(tabBar);
-		const sidebarBox = await box(sidebar);
-		expect(tabsBox.y).toBeGreaterThanOrEqual(
-			navbarBox.y + navbarBox.height - 1,
-		);
-		expect(sidebarBox.y).toBeGreaterThanOrEqual(tabsBox.y + tabsBox.height - 1);
-		expect(navbarBox.width).toBeGreaterThan(sidebarBox.width);
-
-		// The space name moved out of the sidebar and into the navbar. `.first()`
-		// is the switcher's own label — the rest are its (hidden) menu entries.
-		await expect(
-			navbar.getByText('Tabs E2E', { exact: true }).first(),
-		).toBeVisible();
-
-		// Icons are inlined server-side (wiki.utils.lucide_svg) because the
-		// reader's Tailwind build has no lucide plugin.
-		await expect(
-			tabBar.getByRole('tab', { name: 'Accounting' }).locator('svg'),
-		).toBeVisible();
-	});
-
-	test('editor bar creates a tab from its own add button, above the draft banner', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-		await page.getByText('Tabs E2E', { exact: true }).first().click();
-		await page.waitForLoadState('networkidle');
-
-		// Banner and bar both sit above the sidebar+content row now, so they're
-		// page-level, not scoped to <main>.
-		const tabBar = page.getByRole('tablist');
-		await expect(tabBar.getByRole('tab', { name: 'Accounting' })).toBeVisible({
-			timeout: 15000,
-		});
-
-		// The change-request banner is about the whole draft, so it outranks the
-		// tab being browsed.
-		const bannerBox = await box(page.locator('.contribution-banner'));
-		const tabsBox = await box(tabBar);
-		expect(bannerBox.y).toBeLessThan(tabsBox.y);
-
-		await page.getByTestId('new-tab-button').click();
-		const dialog = page.getByRole('dialog');
-		await expect(dialog.getByText('Create New Tab')).toBeVisible();
-		// The dialog only asks for a title now — a default icon is applied and
-		// changed inline from the bar afterwards.
-		await dialog.getByLabel('Title').fill('Support');
-		await dialog.getByRole('button', { name: 'Create' }).click();
-
-		await expect(
-			tabBar.getByRole('tab', { name: 'Support', exact: true }),
-		).toBeVisible({ timeout: 15000 });
-	});
-
-	test('editor reorders tabs by dragging them in the bar', async ({ page }) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-		await page.getByText('Tabs E2E', { exact: true }).first().click();
-		await page.waitForLoadState('networkidle');
-
-		const tabBar = page.getByRole('tablist');
-		const accounting = tabBar.getByRole('tab', { name: 'Accounting' });
-		const manufacturing = tabBar.getByRole('tab', { name: 'Manufacturing' });
-		await expect(accounting).toBeVisible({ timeout: 15000 });
-
-		// Home leads the bar (synthetic, non-draggable), so compare the real tabs
-		// that follow it.
-		const order = async () =>
-			(await tabBar.getByRole('tab').allInnerTexts())
-				.map((t) => t.trim())
-				.filter((t) => t !== 'Home');
-		expect((await order()).slice(0, 2)).toEqual([
-			'Accounting',
-			'Manufacturing',
-		]);
-
-		// SortableJS runs in pointer-fallback mode, so drive real mouse moves in
-		// steps rather than Playwright's HTML5-drag `dragTo` (which it ignores).
-		// Drop past the target's midpoint to land the dragged tab after it.
-		const src = await box(accounting);
-		const dst = await box(manufacturing);
-		await page.mouse.move(src.x + src.width / 2, src.y + src.height / 2);
-		await page.mouse.down();
-		await page.mouse.move(dst.x + dst.width - 4, dst.y + dst.height / 2, {
-			steps: 12,
-		});
-		await page.mouse.move(dst.x + dst.width - 4, dst.y + dst.height / 2);
-		await page.mouse.up();
-
-		await expect
-			.poll(async () => (await order()).slice(0, 2))
-			.toEqual(['Manufacturing', 'Accounting']);
-	});
-});
-
-/**
- * A single-tab space still gates its untabbed top-level content behind Home —
- * regression for the sidebar leaking untabbed pages into the one tab's subtree
- * (it took a no-Home inline branch when there were fewer than two tabs).
- */
-test.describe('Reader sidebar with a single tab', () => {
-	const SOLO_ROUTE = `tabs-solo-e2e-${Date.now()}`;
-
-	test.beforeAll(async ({ request }) => {
-		const root = await createDoc<Doc>(request, 'Wiki Document', {
-			title: `Solo Tab Root ${Date.now()}`,
-			is_group: 1,
-			is_published: 1,
-		});
-		await createDoc(request, 'Wiki Space', {
-			space_name: 'Solo Tab E2E',
-			route: SOLO_ROUTE,
-			root_group: root.name,
-			is_published: 1,
-			enable_tabs: 1,
-		});
-
-		const accounting = await group(
-			request,
-			'Accounting',
-			root.name,
-			0,
-			'lucide-wallet',
-		);
-		const receivables = await group(request, 'Receivables', accounting.name, 0);
-		await page_(request, 'Payment Entry', receivables.name, 0);
-
-		// Untabbed top-level page — must NOT show while the tab is active.
-		await page_(request, 'Bold Heading Check', root.name, 1);
-	});
-
-	test.afterAll(async ({ request }) => {
-		await cleanupWikiSpacesByRoute(request, SOLO_ROUTE);
-	});
-
-	test('untabbed content stays behind Home, out of the tab subtree', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(`/${SOLO_ROUTE}/accounting/receivables/payment-entry`);
-		await page.waitForLoadState('networkidle');
-
-		const tabBar = page.getByRole('tablist');
-		const sidebar = page.locator('.wiki-sidebar');
-		const home = tabBar.getByRole('tab', { name: 'Home' });
-
-		// One tab + untabbed content => Home leads, inactive on the tab page, and
-		// the untabbed page is hidden rather than leaking into the tab's sidebar.
-		await expect(home).toBeVisible();
-		await expect(
-			sidebar.getByText('Bold Heading Check', { exact: true }),
-		).toBeHidden();
-
-		await home.click();
-		await expect(
-			sidebar.getByText('Bold Heading Check', { exact: true }),
-		).toBeVisible();
-	});
-});
-
-/**
- * Tabs are opt-in per space (Wiki Space.enable_tabs). A space with tab groups
- * but the switch off must show no bar anywhere, and none of its content may
- * become unreachable because a tab was hiding it.
- */
-test.describe('Tab navigation disabled', () => {
-	const OFF_ROUTE = `tabs-off-e2e-${Date.now()}`;
-
-	test.beforeAll(async ({ request }) => {
-		const root = await createDoc<Doc>(request, 'Wiki Document', {
-			title: `Tabs Off Root ${Date.now()}`,
-			is_group: 1,
-			is_published: 1,
-		});
-		await createDoc(request, 'Wiki Space', {
-			space_name: 'Tabs Off E2E',
-			route: OFF_ROUTE,
-			root_group: root.name,
-			is_published: 1,
-		});
-
-		// Flagged as a tab, but the space never opts in — so it stays an ordinary
-		// top-level group everywhere.
-		const accounting = await group(
-			request,
-			'Accounting',
-			root.name,
-			0,
-			'lucide-wallet',
-		);
-		await page_(request, 'Sales Invoice', accounting.name, 0);
-		await page_(request, 'Release Notes', root.name, 1);
-	});
-
-	test.afterAll(async ({ request }) => {
-		await cleanupWikiSpacesByRoute(request, OFF_ROUTE);
-	});
-
-	test('reader shows no bar and keeps every top-level node in the sidebar', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(`/${OFF_ROUTE}/accounting/sales-invoice`);
-		await page.waitForLoadState('networkidle');
-
-		await expect(page.getByRole('tablist')).toHaveCount(0);
-
-		const sidebar = page.locator('.wiki-sidebar');
-		await expect(
-			sidebar.getByText('Accounting', { exact: true }),
-		).toBeVisible();
-		await expect(
-			sidebar.getByText('Release Notes', { exact: true }),
-		).toBeVisible();
-	});
-
-	test('editor shows no bar, the whole tree, and the page actions row', async ({
-		page,
-	}) => {
-		await page.setViewportSize({ width: 1440, height: 900 });
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-		await page.getByText('Tabs Off E2E', { exact: true }).first().click();
-		await page.waitForLoadState('networkidle');
-
-		const aside = page.locator('aside').first();
-		await expect(aside.getByText('Accounting', { exact: true })).toBeVisible({
-			timeout: 15000,
-		});
-		await expect(
-			aside.getByText('Release Notes', { exact: true }),
-		).toBeVisible();
-		await expect(page.getByRole('tablist')).toHaveCount(0);
-
-		// Page actions live in the content column, so they survive the missing bar.
-		await aside.getByText('Accounting', { exact: true }).click();
-		await aside.getByText('Sales Invoice', { exact: true }).click();
-		await expect(page.getByRole('button', { name: 'Save' })).toBeVisible({
-			timeout: 15000,
-		});
-	});
-});
diff --git a/e2e/tests/toc-navigation.spec.ts b/e2e/tests/toc-navigation.spec.ts
index e8efc59ac..a825241b3 100644
--- a/e2e/tests/toc-navigation.spec.ts
+++ b/e2e/tests/toc-navigation.spec.ts
@@ -1,14 +1,12 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
 import { getList } from '../helpers/frappe';
-import {
-	APP_BASE,
-	CHANGE_REQUEST_URL_RE,
-	spaceLinkSelector,
-} from '../helpers/routes';
+import { CHANGE_REQUEST_URL_RE } from '../helpers/routes';
 import {
 	clickSidebarAddOption,
+	currentDraftDocKey,
 	openNewPageDialog,
 	publishChangeRequestFromReview,
+	saveEditor,
 } from '../helpers/wiki';
 
 interface WikiDocumentRoute {
@@ -37,16 +35,12 @@ test.describe('TOC Navigation', () => {
 	test('should update TOC headings when navigating between pages via sidebar', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		await page.setViewportSize({ width: 1100, height: 900 });
 
-		// Navigate to wiki and click first space
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Create first page with specific headings
@@ -67,9 +61,7 @@ test.describe('TOC Navigation', () => {
 			.getByText(firstPageTitle, { exact: true })
 			.click();
 		await page.waitForURL(/\/draft\/[^/?#]+/);
-		const draftMatch1 = page.url().match(/\/draft\/([^/?#]+)/);
-		expect(draftMatch1).toBeTruthy();
-		const firstDocKey = decodeURIComponent(draftMatch1?.[1] ?? '');
+		const firstDocKey = await currentDraftDocKey(page);
 
 		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
 		await expect(editor).toBeVisible({ timeout: 10000 });
@@ -101,7 +93,7 @@ Beta sub content.`;
 		await editor.click();
 		await page.waitForTimeout(500);
 
-		await page.click('button:has-text("Save")');
+		await saveEditor(page);
 		await page.waitForLoadState('networkidle');
 		await page.waitForTimeout(2000);
 
@@ -156,7 +148,7 @@ Epsilon content here.`;
 		await editor.click();
 		await page.waitForTimeout(500);
 
-		await page.click('button:has-text("Save")');
+		await saveEditor(page);
 		await page.waitForLoadState('networkidle');
 		await page.waitForTimeout(2000);
 
diff --git a/e2e/tests/tree-search.spec.ts b/e2e/tests/tree-search.spec.ts
index cdc4d307b..aca475455 100644
--- a/e2e/tests/tree-search.spec.ts
+++ b/e2e/tests/tree-search.spec.ts
@@ -1,72 +1,38 @@
-import { expect, test } from '@playwright/test';
-import { updateDoc } from '../helpers/frappe';
-import { appUrl } from '../helpers/routes';
-import { createTestWikiDocument, createTestWikiSpace } from '../helpers/wiki';
+import { expect, test } from '../fixtures';
 
 /**
  * E2E tests for the editor tree fuzzy search box.
- * Verifies that typing filters the in-memory tree in place: matches stay,
- * non-matches are pruned, ancestor groups auto-expand, route-only matches
- * surface, and clearing the query restores the full tree.
+ * Verifies that typing swaps the tree for a flat result list: only the matches
+ * themselves render (no ancestor groups), route-only matches surface, a matched
+ * group drops the query and opens where it lives, and clearing restores the
+ * tree.
  */
 test.describe('Editor Tree Search', () => {
-	test('filters the tree by title and route, then restores on clear', async ({
+	test('lists matches flat by title and route, then restores on clear', async ({
 		page,
-		request,
+		wiki,
 	}) => {
-		const spaceName = `tree-search-${Date.now()}`;
-		const space = await createTestWikiSpace(request, {
-			route: spaceName,
-			is_published: true,
+		// Group "Guides" with two pages; one matches only by route. A sibling
+		// "Reference" group should be pruned away on a "Guides" search.
+		const space = await wiki.space({
+			pages: [
+				{
+					title: 'Guides',
+					is_group: true,
+					children: [
+						{ title: 'Getting Started' },
+						{ title: 'Authentication', slug: 'auth-tokens' },
+					],
+				},
+				{
+					title: 'Reference',
+					is_group: true,
+					children: [{ title: 'API Keys' }],
+				},
+			],
 		});
 
-		const rootGroup = await createTestWikiDocument(request, {
-			title: 'Root',
-			route: `${spaceName}/root`,
-			is_group: true,
-			is_published: true,
-		});
-		await updateDoc(request, 'Wiki Space', space.name, {
-			root_group: rootGroup.name,
-		});
-
-		// Group "Guides" with two pages; one page matches only by route.
-		const guides = await createTestWikiDocument(request, {
-			title: 'Guides',
-			route: `${spaceName}/guides`,
-			is_group: true,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-		await createTestWikiDocument(request, {
-			title: 'Getting Started',
-			route: `${spaceName}/guides/getting-started`,
-			is_published: true,
-			parent_wiki_document: guides.name,
-		});
-		await createTestWikiDocument(request, {
-			title: 'Authentication',
-			route: `${spaceName}/guides/auth-tokens`,
-			is_published: true,
-			parent_wiki_document: guides.name,
-		});
-
-		// A sibling group that should be pruned away on a "Guides" search.
-		const reference = await createTestWikiDocument(request, {
-			title: 'Reference',
-			route: `${spaceName}/reference`,
-			is_group: true,
-			is_published: true,
-			parent_wiki_document: rootGroup.name,
-		});
-		await createTestWikiDocument(request, {
-			title: 'API Keys',
-			route: `${spaceName}/reference/api-keys`,
-			is_published: true,
-			parent_wiki_document: reference.name,
-		});
-
-		await page.goto(appUrl('spaces', space.name));
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		const tree = page.locator('aside');
@@ -77,11 +43,11 @@ test.describe('Editor Tree Search', () => {
 		const search = page.getByPlaceholder('Search pages...');
 		await expect(search).toBeVisible();
 
-		// Title match: keeps the page + its ancestor group (auto-expanded),
-		// prunes the unrelated branch.
+		// Title match: the page is its own row, with no ancestor group dragged
+		// along and nothing from the unrelated branch.
 		await search.fill('getting');
 		await expect(tree.getByText('Getting Started')).toBeVisible();
-		await expect(tree.getByText('Guides', { exact: true })).toBeVisible();
+		await expect(tree.getByText('Guides', { exact: true })).toHaveCount(0);
 		await expect(tree.getByText('Reference', { exact: true })).toHaveCount(0);
 		await expect(tree.getByText('API Keys')).toHaveCount(0);
 		await expect(tree.getByText('Authentication')).toHaveCount(0);
@@ -91,11 +57,20 @@ test.describe('Editor Tree Search', () => {
 		await expect(tree.getByText('Authentication')).toBeVisible();
 		await expect(tree.getByText('Getting Started')).toHaveCount(0);
 
-		// No matches: the empty state shows.
+		// No matches: the empty line shows.
 		await search.fill('zzzznomatch');
-		await expect(tree.getByText('No matches')).toBeVisible();
+		await expect(tree.getByText('No pages match "zzzznomatch"')).toBeVisible();
+
+		// A matched group has nothing to open in place, so picking it clears the
+		// search and expands the group back in the tree.
+		await search.fill('Guides');
+		await expect(tree.getByText('Getting Started')).toHaveCount(0);
+		await tree.getByText('Guides', { exact: true }).click();
+		await expect(search).toHaveValue('');
+		await expect(tree.getByText('Getting Started')).toBeVisible();
 
 		// Clearing restores the full tree.
+		await search.fill('auth');
 		await search.fill('');
 		await expect(tree.getByText('Guides', { exact: true })).toBeVisible();
 		await expect(tree.getByText('Reference', { exact: true })).toBeVisible();
diff --git a/e2e/tests/webp-conversion.spec.ts b/e2e/tests/webp-conversion.spec.ts
index 5bca8ab1e..5e04c929a 100644
--- a/e2e/tests/webp-conversion.spec.ts
+++ b/e2e/tests/webp-conversion.spec.ts
@@ -1,8 +1,9 @@
 import { randomUUID } from 'node:crypto';
 import { deflateSync } from 'node:zlib';
-import { type Page, expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import type { SeededSpace } from '../helpers/factory';
 import { deleteDoc, getList, updateDoc } from '../helpers/frappe';
-import { APP_BASE, spaceLinkSelector } from '../helpers/routes';
 import { openNewPageDialog } from '../helpers/wiki';
 
 /**
@@ -83,14 +84,13 @@ async function setWebpConversion(
  * until the editor is mounted on its draft. Mirrors the setup used by other
  * editor e2e tests (image-viewer.spec.ts) but stops at the editable draft.
  */
-async function openNewPageInEditor(page: Page, title: string): Promise<void> {
+async function openNewPageInEditor(
+	page: Page,
+	space: SeededSpace,
+	title: string,
+): Promise<void> {
 	await page.setViewportSize({ width: 1100, height: 900 });
-	await page.goto(APP_BASE);
-	await page.waitForLoadState('networkidle');
-
-	const spaceLink = page.locator(spaceLinkSelector()).first();
-	await expect(spaceLink).toBeVisible({ timeout: 5000 });
-	await spaceLink.click();
+	await page.goto(space.url());
 	await page.waitForLoadState('networkidle');
 
 	await openNewPageDialog(page);
@@ -151,12 +151,13 @@ test.describe('Automatic WebP image optimization', () => {
 	test('converts an uploaded PNG to WebP when the setting is enabled', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		await setWebpConversion(request, true);
 
 		const stamp = Date.now();
 		const fileName = `e2e-webp-on-${stamp}.png`;
-		await openNewPageInEditor(page, `webp-on-${stamp}`);
+		await openNewPageInEditor(page, await wiki.space(), `webp-on-${stamp}`);
 		await uploadImage(page, fileName);
 
 		// The node first shows a base64 preview (loading), then swaps to the
@@ -187,12 +188,13 @@ test.describe('Automatic WebP image optimization', () => {
 	test('keeps the original format when the setting is disabled', async ({
 		page,
 		request,
+		wiki,
 	}) => {
 		await setWebpConversion(request, false);
 
 		const stamp = Date.now();
 		const fileName = `e2e-webp-off-${stamp}.png`;
-		await openNewPageInEditor(page, `webp-off-${stamp}`);
+		await openNewPageInEditor(page, await wiki.space(), `webp-off-${stamp}`);
 		await uploadImage(page, fileName);
 
 		// With conversion off, the image stays a .png served from /files.
diff --git a/e2e/tests/wiki.spec.ts b/e2e/tests/wiki.spec.ts
index 96da5c828..2c8ccd7c8 100644
--- a/e2e/tests/wiki.spec.ts
+++ b/e2e/tests/wiki.spec.ts
@@ -1,4 +1,5 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../fixtures';
+import { uniqueRoute } from '../helpers/factory';
 import { getList } from '../helpers/frappe';
 import {
 	APP_BASE,
@@ -8,10 +9,11 @@ import {
 	spaceLinkSelector,
 } from '../helpers/routes';
 import {
-	cleanupWikiSpacesByRoute,
-	createTestWikiSpace,
+	currentDraftDocKey,
+	newPageButton,
 	openNewPageDialog,
 	publishChangeRequestFromReview,
+	saveEditor,
 } from '../helpers/wiki';
 
 interface WikiDocumentRoute {
@@ -24,15 +26,6 @@ interface WikiDocumentRoute {
  * For public-facing page tests (TOC, sidebar), see public-pages.spec.ts
  */
 test.describe('Wiki Editor', () => {
-	// Spaces created via API for tests that need a clean, isolated space rather
-	// than reusing whatever "first available space" happens to exist.
-	const createdRoutes: string[] = [];
-	test.afterAll(async ({ request }) => {
-		for (const route of createdRoutes) {
-			await cleanupWikiSpacesByRoute(request, route);
-		}
-	});
-
 	test('should display wiki spaces list', async ({ page }) => {
 		await page.goto(APP_BASE);
 		await page.waitForLoadState('networkidle');
@@ -47,7 +40,7 @@ test.describe('Wiki Editor', () => {
 		await expect(spacesContainer.first()).toBeVisible();
 	});
 
-	test('should create a new wiki space via UI', async ({ page }) => {
+	test('should create a new wiki space via UI', async ({ page, wiki }) => {
 		await page.goto(APP_BASE);
 		await page.waitForLoadState('networkidle');
 
@@ -58,7 +51,7 @@ test.describe('Wiki Editor', () => {
 		const dialog = page.locator('[role="dialog"]').first();
 		await dialog.waitFor({ state: 'visible' });
 
-		const spaceName = `Test Space ${Date.now()}`;
+		const spaceName = uniqueRoute('test-space');
 		await dialog.locator('input[type="text"]').first().fill(spaceName);
 
 		// Wait for route to auto-populate from space name
@@ -74,6 +67,7 @@ test.describe('Wiki Editor', () => {
 		// In change-request mode the name lives in the top banner rather than the
 		// tree aside; the timestamped name is unique, so match it page-wide.
 		await expect(page).toHaveURL(SPACE_URL_RE, { timeout: 10000 });
+		wiki.adopt(page.url().split('/spaces/')[1].split(/[/?#]/)[0]);
 		await expect(
 			page.getByText(spaceName, { exact: true }).first(),
 		).toBeVisible();
@@ -82,15 +76,11 @@ test.describe('Wiki Editor', () => {
 	test('should navigate to space and create a wiki page', async ({
 		page,
 		request,
+		wiki,
 	}) => {
-		// Create a dedicated, empty space rather than reusing whatever space
-		// happens to be first — that shared space can carry an in-progress draft
-		// from another test, which made this flaky.
-		const spaceRoute = `create-page-${Date.now()}`;
-		createdRoutes.push(spaceRoute);
-		const space = await createTestWikiSpace(request, { route: spaceRoute });
-
-		await page.goto(appUrl('spaces', space.name));
+		const space = await wiki.space();
+
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 		await expect(page.locator('aside')).toBeVisible();
 
@@ -126,52 +116,32 @@ test.describe('Wiki Editor', () => {
 		await expect(page.getByText(pageTitle).first()).toBeVisible();
 	});
 
-	test('should have New Page button in space sidebar', async ({ page }) => {
-		// Navigate to wiki and click first space
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
+	test('should have New Page button in space sidebar', async ({
+		page,
+		wiki,
+	}) => {
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Should have sidebar with space management buttons
 		await expect(page.locator('aside')).toBeVisible();
 
-		// Wait for the tree to load (CR mode requires async init).
-		// On an empty space the empty-state "Create First Page" CTA renders
-		// instead of the sidebar Add dropdown — `.or().first()` tolerates
-		// either without tripping strict-mode on two matches.
-		const createFirstPage = page.locator(
-			'button:has-text("Create First Page")',
-		);
-		const addButton = page.locator('button[title="Add"]');
-		await expect(createFirstPage.or(addButton).first()).toBeVisible({
-			timeout: 10000,
-		});
+		// Wait for the tree to load (CR mode requires async init). The sidebar
+		// footer's New page button is there whether or not the space has pages.
+		await expect(newPageButton(page)).toBeVisible({ timeout: 10000 });
 	});
 
 	test('should open wiki editor when clicking page in sidebar', async ({
 		page,
+		wiki,
 	}) => {
-		// Navigate to wiki and click first space
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
-		// Wait for sidebar to load - either the empty-state CTA or the Add menu
-		const createFirstPage = page.locator(
-			'button:has-text("Create First Page")',
-		);
-		const addButton = page.locator('button[title="Add"]');
-		await expect(createFirstPage.or(addButton).first()).toBeVisible({
-			timeout: 10000,
-		});
+		// Wait for the sidebar to load.
+		await expect(newPageButton(page)).toBeVisible({ timeout: 10000 });
 
 		// Always create a new page so we know exactly what to click
 		const pageTitle = `Test Page ${Date.now()}`;
@@ -193,28 +163,25 @@ test.describe('Wiki Editor', () => {
 			page.locator('.ProseMirror, [contenteditable="true"]'),
 		).toBeVisible({ timeout: 10000 });
 
-		// Verify save draft button is present (indicates edit mode)
-		await expect(page.locator('button:has-text("Save")')).toBeVisible();
+		// The editor autosaves, so its own header action is what marks edit mode.
+		await expect(
+			page.getByRole('button', { name: 'Submit for Review' }),
+		).toBeVisible();
 	});
 
 	test('should publish page and view it on public route', async ({
 		page,
 		request,
+		wiki,
 	}) => {
-		// Navigate to wiki and click first space
-		await page.goto(APP_BASE);
-		await page.waitForLoadState('networkidle');
-
-		const spaceLink = page.locator(spaceLinkSelector()).first();
-		await expect(spaceLink).toBeVisible({ timeout: 5000 });
-		await spaceLink.click();
+		const space = await wiki.space();
+		await page.goto(space.url());
 		await page.waitForLoadState('networkidle');
 
 		// Create a new page with specific title and content
 		const pageTitle = `e2e-cr-page-${Date.now()}`;
 		const pageContent = `This is test content created by E2E tests at ${new Date().toISOString()}`;
 
-		// Click create button (either "Create First Page" or "New Page")
 		await openNewPageDialog(page);
 
 		// Fill in page title
@@ -228,9 +195,7 @@ test.describe('Wiki Editor', () => {
 		// Open the newly created page from the tree
 		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
 		await page.waitForURL(/\/draft\/[^/?#]+/);
-		const draftMatch = page.url().match(/\/draft\/([^/?#]+)/);
-		expect(draftMatch).toBeTruthy();
-		const docKey = decodeURIComponent(draftMatch?.[1] ?? '');
+		const docKey = await currentDraftDocKey(page);
 
 		// Wait for editor to be visible
 		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
@@ -242,7 +207,7 @@ test.describe('Wiki Editor', () => {
 		await page.keyboard.type(pageContent);
 
 		// Save the draft
-		await page.click('button:has-text("Save")');
+		await saveEditor(page);
 		await page.waitForLoadState('networkidle');
 
 		// Submit for review and merge
diff --git a/frontend/package.json b/frontend/package.json
index 5a4a4797e..c190faccc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,22 +12,24 @@
 		"copy-html-entry": "cp ../wiki/public/frontend/index.html ../wiki/www/wiki-app.html"
 	},
 	"dependencies": {
+		"@dicebear/core": "10.7.0",
+		"@dicebear/styles": "10.6.0",
 		"@floating-ui/dom": "^1.6.0",
 		"@pierre/diffs": "^1.2.11",
-		"@tiptap/core": "^3.26.0",
-		"@tiptap/extension-image": "^3.26.0",
-		"@tiptap/extension-list": "^3.26.0",
-		"@tiptap/extension-table": "^3.26.0",
-		"@tiptap/extensions": "^3.26.0",
-		"@tiptap/markdown": "^3.26.0",
-		"@tiptap/pm": "^3.26.0",
-		"@tiptap/starter-kit": "^3.26.0",
-		"@tiptap/suggestion": "^3.26.0",
-		"@tiptap/vue-3": "^3.26.0",
+		"@tiptap/core": "^3.29.2",
+		"@tiptap/extension-image": "^3.29.2",
+		"@tiptap/extension-list": "^3.29.2",
+		"@tiptap/extension-table": "^3.29.2",
+		"@tiptap/extensions": "^3.29.2",
+		"@tiptap/markdown": "^3.29.2",
+		"@tiptap/pm": "^3.29.2",
+		"@tiptap/starter-kit": "^3.29.2",
+		"@tiptap/suggestion": "^3.29.2",
+		"@tiptap/vue-3": "^3.29.2",
 		"@vueuse/core": "^14.1.0",
 		"@vueuse/integrations": "^14.3.0",
 		"@vueuse/router": "^14.2.1",
-		"frappe-ui": "1.0.0-beta.25",
+		"frappe-ui": "1.0.0-beta.55",
 		"fuzzysort": "^3.1.0",
 		"highlight.js": "~11.11.0",
 		"idb-keyval": "^6.2.0",
@@ -49,6 +51,49 @@
 		"vite": "^5.4.10"
 	},
 	"resolutions": {
+		"@tiptap/core": "3.29.2",
+		"@tiptap/extension-blockquote": "3.29.2",
+		"@tiptap/extension-bold": "3.29.2",
+		"@tiptap/extension-bubble-menu": "3.29.2",
+		"@tiptap/extension-bullet-list": "3.29.2",
+		"@tiptap/extension-code": "3.29.2",
+		"@tiptap/extension-code-block": "3.29.2",
+		"@tiptap/extension-code-block-lowlight": "3.29.2",
+		"@tiptap/extension-color": "3.29.2",
+		"@tiptap/extension-document": "3.29.2",
+		"@tiptap/extension-dropcursor": "3.29.2",
+		"@tiptap/extension-floating-menu": "3.29.2",
+		"@tiptap/extension-gapcursor": "3.29.2",
+		"@tiptap/extension-hard-break": "3.29.2",
+		"@tiptap/extension-heading": "3.29.2",
+		"@tiptap/extension-highlight": "3.29.2",
+		"@tiptap/extension-horizontal-rule": "3.29.2",
+		"@tiptap/extension-image": "3.29.2",
+		"@tiptap/extension-italic": "3.29.2",
+		"@tiptap/extension-link": "3.29.2",
+		"@tiptap/extension-list": "3.29.2",
+		"@tiptap/extension-list-item": "3.29.2",
+		"@tiptap/extension-list-keymap": "3.29.2",
+		"@tiptap/extension-mention": "3.29.2",
+		"@tiptap/extension-node-range": "3.29.2",
+		"@tiptap/extension-ordered-list": "3.29.2",
+		"@tiptap/extension-paragraph": "3.29.2",
+		"@tiptap/extension-placeholder": "3.29.2",
+		"@tiptap/extension-strike": "3.29.2",
+		"@tiptap/extension-table": "3.29.2",
+		"@tiptap/extension-task-item": "3.29.2",
+		"@tiptap/extension-task-list": "3.29.2",
+		"@tiptap/extension-text": "3.29.2",
+		"@tiptap/extension-text-align": "3.29.2",
+		"@tiptap/extension-text-style": "3.29.2",
+		"@tiptap/extension-typography": "3.29.2",
+		"@tiptap/extension-underline": "3.29.2",
+		"@tiptap/extensions": "3.29.2",
+		"@tiptap/markdown": "3.29.2",
+		"@tiptap/pm": "3.29.2",
+		"@tiptap/starter-kit": "3.29.2",
+		"@tiptap/suggestion": "3.29.2",
+		"@tiptap/vue-3": "3.29.2",
 		"shiki": "^3.23.0",
 		"@shikijs/themes": "^3.23.0",
 		"prosemirror-model": "^1.25.9",
diff --git a/frontend/src/.tokens-v2-ink-shift b/frontend/src/.tokens-v2-ink-shift
new file mode 100644
index 000000000..408f64cb3
--- /dev/null
+++ b/frontend/src/.tokens-v2-ink-shift
@@ -0,0 +1,3 @@
+The ink scale shift (tokens-v2 --ink-shift, #1016) ran here on 2026-08-11T09:28:35.436Z.
+A second run would double-shift every chromatic ink token.
+Delete this file only to re-run the shift on purpose.
diff --git a/frontend/src/components/AssignDialog.vue b/frontend/src/components/AssignDialog.vue
index b5f37080e..75c6bbef2 100644
--- a/frontend/src/components/AssignDialog.vue
+++ b/frontend/src/components/AssignDialog.vue
@@ -8,11 +8,10 @@
 				<p class="text-ink-gray-7">
 					{{ __('Assign this change request to a reviewer. They will be notified and it will appear in their "Assigned to me" list.') }}
 				</p>
-				<Autocomplete
+				<MultiSelect
 					v-model="selected"
 					:options="userOptions"
 					:placeholder="__('Search people...')"
-					multiple
 				/>
 			</div>
 		</template>
@@ -34,9 +33,9 @@
 
 <script setup>
 import {
-	Autocomplete,
 	Button,
 	Dialog,
+	MultiSelect,
 	createListResource,
 	createResource,
 	toast,
@@ -77,7 +76,7 @@ const assignResource = createResource({
 });
 
 async function handleAssign(close) {
-	const assignTo = selected.value.map((o) => o.value || o);
+	const assignTo = selected.value;
 	if (!assignTo.length) return;
 	try {
 		await assignResource.submit({
diff --git a/frontend/src/components/Autocomplete.vue b/frontend/src/components/Autocomplete.vue
index c990e7104..c9c2acd57 100644
--- a/frontend/src/components/Autocomplete.vue
+++ b/frontend/src/components/Autocomplete.vue
@@ -11,6 +11,10 @@
   - local  (default): filters `options` client-side as the user types.
   - remote (`remote`): leaves filtering to the parent — emits `search` (debounced)
     and `load-more` (on scroll) so the parent can page a server-side list.
+
+  `allow-custom` lets the typed text stand as the value when it matches no
+  option (branch names the picker can't list), committed on Enter or on leaving
+  the field.
 -->
 <template>
   <div class="flex flex-col gap-1" ref="root">
@@ -23,11 +27,12 @@
         :placeholder="placeholder"
         :disabled="disabled"
         autocomplete="off"
-        class="form-input w-full rounded bg-surface-gray-2 pr-8 text-base text-ink-gray-8 disabled:cursor-not-allowed disabled:opacity-60"
+        class="form-input w-full rounded-4 bg-surface-gray-2 pr-8 text-base text-ink-gray-8 disabled:cursor-not-allowed disabled:opacity-60"
         @focus="open"
         @input="onInput"
         @keydown.down.prevent="move(1)"
         @keydown.up.prevent="move(-1)"
+        @blur="onBlur"
         @keydown.enter.prevent="selectHighlighted"
         @keydown.esc.prevent="close"
       />
@@ -43,7 +48,7 @@
         <div
           v-if="isOpen"
           ref="list"
-          class="fixed z-[9999] max-h-56 overflow-auto rounded border border-outline-gray-2 bg-surface-base py-1 shadow-lg"
+          class="fixed z-[9999] max-h-56 overflow-auto rounded-4 border border-outline-gray-2 bg-surface-base py-1 shadow-lg"
           :style="menuStyle"
           @scroll="onScroll"
           @pointerdown.stop
@@ -97,6 +102,8 @@ const props = defineProps({
 	hasMore: { type: Boolean, default: false },
 	// remote: parent owns filtering (server-side search + paging).
 	remote: { type: Boolean, default: false },
+	// allowCustom: a typed value that matches no option is kept as-is.
+	allowCustom: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['update:modelValue', 'search', 'load-more']);
@@ -159,6 +166,23 @@ function close() {
 	query.value = '';
 }
 
+// Keep what the user typed when it matches no option. Runs on Enter and on
+// leaving the field, so clicking straight through to a dialog action still
+// commits the branch name.
+function commitCustom() {
+	if (!props.allowCustom) return;
+	const typed = query.value.trim();
+	if (typed && typed !== props.modelValue) {
+		emit('update:modelValue', typed);
+	}
+}
+
+function onBlur() {
+	if (!isOpen.value) return;
+	commitCustom();
+	close();
+}
+
 let searchTimer = null;
 function onInput(event) {
 	query.value = event.target.value;
@@ -189,7 +213,13 @@ function move(delta) {
 
 function selectHighlighted() {
 	const opt = displayedOptions.value[highlighted.value];
-	if (opt) select(opt);
+	if (opt) {
+		select(opt);
+		return;
+	}
+	commitCustom();
+	close();
+	input.value?.blur();
 }
 
 function onScroll() {
@@ -201,7 +231,10 @@ function onScroll() {
 }
 
 function onClickOutside(event) {
-	if (root.value && !root.value.contains(event.target)) close();
+	if (root.value && !root.value.contains(event.target)) {
+		commitCustom();
+		close();
+	}
 }
 document.addEventListener('mousedown', onClickOutside);
 // Capture phase so scrolling *inside* the dialog body (not just the window)
diff --git a/frontend/src/components/CollapsibleSection.vue b/frontend/src/components/CollapsibleSection.vue
index a726ae1d4..1be35ed44 100644
--- a/frontend/src/components/CollapsibleSection.vue
+++ b/frontend/src/components/CollapsibleSection.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="rounded-lg border border-outline-gray-2 bg-surface-gray-1">
+	<div class="rounded-6 border border-outline-gray-2 bg-surface-gray-1">
 		<button
 			type="button"
 			class="flex w-full items-center justify-between gap-2 p-3 text-left"
diff --git a/frontend/src/components/ContributionBanner.vue b/frontend/src/components/ContributionBanner.vue
deleted file mode 100644
index 6a2f0a339..000000000
--- a/frontend/src/components/ContributionBanner.vue
+++ /dev/null
@@ -1,489 +0,0 @@
-<template>
-	<SpaceChromeBar
-		v-if="crStore.isChangeRequestMode"
-		class="contribution-banner"
-		:space-name="spaceName"
-		:space-route="spaceRoute"
-		:bar-class="bannerClass"
-		@open-settings="emit('open-settings')"
-	>
-		<template #badge>
-			<Badge variant="subtle" :theme="statusBadgeTheme" size="sm">
-				{{ bannerTitle }}
-			</Badge>
-		</template>
-		<template #meta>
-			<span
-				v-if="reviewFeedback"
-				class="truncate text-xs text-ink-red-8 min-w-0"
-				:title="reviewFeedback"
-			>
-				{{ reviewFeedback }}
-			</span>
-		</template>
-		<template #actions>
-			<Badge
-				v-if="syncStateLabel"
-				variant="subtle"
-				:theme="syncStateTheme"
-				size="md"
-				:title="syncStateTitle"
-			>
-				{{ syncStateLabel }}
-			</Badge>
-
-			<Button
-				v-if="showReloadLatest"
-				variant="outline"
-				size="sm"
-				:loading="reloading"
-				:title="__('Discard local failed changes and adopt server state')"
-				@click="onReloadLatest"
-			>
-				{{ __('Reload latest') }}
-			</Button>
-
-			<!-- One stable button for the whole merge/withdraw round trip. The
-			     status branches below churn through In Review and Approved on
-			     the way, and the summary they read belongs to a change request
-			     that is being retired. -->
-			<template v-if="crStore.finalizing">
-				<Button size="sm" loading disabled>
-					{{ crStore.finalizing === 'withdrawing' ? __('Withdraw') : __('Merge') }}
-				</Button>
-			</template>
-
-			<template v-else-if="changeRequestStatus === 'Draft' || changeRequestStatus === 'Changes Requested'">
-				<Button
-					v-if="canShowMerge"
-					size="sm"
-					:loading="crStore.isMerging"
-					:disabled="mergeDisabledComputed"
-					:title="mergeButtonTitle"
-					@click="$emit('merge')"
-				>
-					{{ __('Merge') }}
-				</Button>
-				<Button
-					v-if="crStore.changeCount > 0"
-					size="sm"
-					:loading="crStore.isSubmitting"
-					:disabled="submitDisabled"
-					:title="submitButtonTitle"
-					@click="showSubmitConfirmDialog = true"
-				>
-					{{ __('Submit for Review') }}
-				</Button>
-			</template>
-
-			<template v-else-if="changeRequestStatus === 'Approved'">
-				<span class="text-sm-medium text-ink-green-7">
-					{{ __('Approved! Ready to merge.') }}
-				</span>
-				<Button
-					v-if="canShowMerge"
-					size="sm"
-					:loading="crStore.isMerging"
-					:disabled="mergeDisabledComputed"
-					:title="mergeButtonTitle"
-					@click="$emit('merge')"
-				>
-					{{ __('Merge') }}
-				</Button>
-			</template>
-
-			<Dropdown v-if="menuOptions.length > 0" :options="menuOptions">
-				<Button variant="outline" size="sm" :title="__('More actions')">
-					<span class="lucide-more-vertical size-4" aria-hidden="true" />
-				</Button>
-			</Dropdown>
-		</template>
-	</SpaceChromeBar>
-
-	<Dialog v-model:open="showChangesDialog" size="lg">
-			<template #title>
-				<div class="flex items-center gap-2">
-					<span class="lucide-git-branch size-5 text-ink-gray-5" aria-hidden="true" />
-					<h3 class="text-2xl-semibold text-ink-gray-9">
-						{{ __('Pending Changes') }}
-					</h3>
-				</div>
-			</template>
-			<template #default>
-				<div class="space-y-3 max-h-[60vh] overflow-y-auto">
-					<div
-						v-for="change in crStore.changes"
-						:key="change.doc_key"
-						class="flex items-start gap-3 p-3 rounded-lg border border-outline-gray-2 hover:bg-surface-gray-1"
-					>
-						<div
-							class="flex items-center justify-center size-8 rounded-full shrink-0"
-							:class="getChangeIconClass(change.change_type)"
-						>
-							<span :class="getChangeIcon(change.change_type)" class="size-4" aria-hidden="true" />
-						</div>
-
-						<div class="flex-1 min-w-0">
-							<div class="flex items-center gap-2">
-								<span class="font-medium text-ink-gray-9 truncate">
-									{{ change.title || __('Untitled') }}
-								</span>
-								<Badge variant="subtle" :theme="getChangeTheme(change.change_type)" size="sm">
-									{{ getChangeLabel(change.change_type) }}
-								</Badge>
-							</div>
-							<p class="text-sm text-ink-gray-5 mt-0.5">
-								{{ getChangeDescription(change.change_type, change.is_group, change.is_external_link) }}
-							</p>
-							<p v-if="change.is_external_link && change.external_url" class="text-sm text-ink-gray-5 mt-0.5 truncate">
-								<a :href="change.external_url" target="_blank" rel="noopener noreferrer" class="text-ink-blue-link hover:underline">
-									{{ change.external_url }}
-								</a>
-							</p>
-						</div>
-
-						<div class="flex items-center gap-1 text-ink-gray-4 shrink-0">
-							<span v-if="change.is_group" class="lucide-folder size-4" aria-hidden="true" />
-							<span v-else-if="change.is_external_link" class="lucide-link size-4" aria-hidden="true" />
-							<span v-else class="lucide-file-text size-4" aria-hidden="true" />
-						</div>
-					</div>
-
-					<div v-if="crStore.changes.length === 0" class="text-center py-8 text-ink-gray-5">
-						{{ __('No pending changes') }}
-					</div>
-				</div>
-			</template>
-			<template #actions="{ close }">
-				<div class="flex justify-end">
-					<Button variant="outline" @click="close">{{ __('Close') }}</Button>
-				</div>
-			</template>
-		</Dialog>
-
-		<Dialog v-model:open="showSubmitConfirmDialog" size="sm">
-			<template #title>
-				<div class="flex items-center gap-2">
-					<span class="lucide-git-branch size-5 text-ink-gray-5" aria-hidden="true" />
-					<h3 class="text-2xl-semibold text-ink-gray-9">
-						{{ __('Submit for Review') }}
-					</h3>
-				</div>
-			</template>
-			<template #default>
-				<p class="text-ink-gray-7">
-					{{ __('Are you sure you want to submit your changes for review?') }}
-				</p>
-				<p class="text-sm text-ink-gray-5 mt-2">
-					{{ __('You have {0} pending {1}.', [crStore.changeCount, crStore.changeCount === 1 ? __('change') : __('changes')]) }}
-				</p>
-			</template>
-			<template #actions="{ close }">
-				<div class="flex justify-end gap-2">
-					<Button variant="outline" @click="close">{{ __('Cancel') }}</Button>
-					<Button
-						variant="solid"
-						:loading="crStore.isSubmitting"
-						@click="confirmSubmit(close)"
-					>
-						{{ __('Submit') }}
-					</Button>
-				</div>
-			</template>
-		</Dialog>
-</template>
-
-<script setup>
-import { useChangeTypeDisplay } from '@/composables/useChangeTypeDisplay';
-import { useChangeRequestStore } from '@/stores/changeRequest';
-import { useDraftWorkspaceStore } from '@/stores/draftWorkspace';
-import { useUserStore } from '@/stores/user';
-import { Badge, Button, Dialog, Dropdown, toast } from 'frappe-ui';
-import { computed, ref, watch } from 'vue';
-import SpaceChromeBar from './SpaceChromeBar.vue';
-
-const {
-	getChangeIcon,
-	getChangeIconClass,
-	getChangeTheme,
-	getChangeLabel,
-	getChangeDescription,
-} = useChangeTypeDisplay();
-const crStore = useChangeRequestStore();
-const draftStore = useDraftWorkspaceStore();
-const userStore = useUserStore();
-
-// Submit / merge are blocked while local mutations are still syncing or
-// failed — submitting a stale backend CR would silently drop the user's
-// in-flight edits. Unsaved editor content (debounced autosave hasn't fired
-// yet) also counts: without this guard a user could type and submit
-// within the 10s autosave window, sending the previous content. Reorder
-// counts as pending too via mergeDisabled.
-const hasUnsyncedWork = computed(() => Boolean(draftStore.finalizationBlocker));
-const submitDisabled = computed(() => hasUnsyncedWork.value);
-const submitButtonTitle = computed(() => {
-	if (draftStore.finalizationBlocker === 'conflict') {
-		return __('Reload latest before submitting');
-	}
-	if (draftStore.finalizationBlocker === 'failed') {
-		return __('Resolve failed changes before submitting');
-	}
-	if (draftStore.finalizationBlocker === 'pending') {
-		return __('Wait for pending changes to sync before submitting');
-	}
-	if (draftStore.finalizationBlocker === 'unsaved') {
-		return __('Save your changes before submitting');
-	}
-	return '';
-});
-
-// Durable sync indicator. Replaces per-edit success toasts: while the
-// store is mid-flight or has failures, this pill is the source of truth.
-// "Unsaved changes" is a distinct state from "Saving…" — the latter
-// implies an in-flight RPC, while the former covers the autosave
-// debounce window where no save has even started. Conflating them
-// reads as dishonest UI per specs/local_first_editor_migration_step_1.md.
-const syncStateLabel = computed(() => {
-	if (draftStore.hasFailedMutations || draftStore.sync.status === 'failed') {
-		return __('Sync failed');
-	}
-	if (draftStore.hasPendingMutations || draftStore.sync.status === 'saving') {
-		return __('Saving…');
-	}
-	if (draftStore.hasUnsavedEditorContent) {
-		return __('Unsaved changes');
-	}
-	if (draftStore.sync.lastSavedAt) {
-		return __('All changes saved');
-	}
-	return '';
-});
-const syncStateTheme = computed(() => {
-	if (draftStore.hasFailedMutations || draftStore.sync.status === 'failed') {
-		return 'red';
-	}
-	if (draftStore.hasPendingMutations || draftStore.sync.status === 'saving') {
-		return 'orange';
-	}
-	if (draftStore.hasUnsavedEditorContent) {
-		return 'gray';
-	}
-	return 'green';
-});
-const syncStateTitle = computed(() => {
-	if (draftStore.sync.error) return draftStore.sync.error;
-	const failed = draftStore.pending.find((m) => m.status === 'failed');
-	if (failed?.error) return failed.error;
-	return '';
-});
-
-// `Reload latest` is the first-line recovery for conflicts and sync
-// failures (specs/local_first_editor_migration_step_2.md). It appears
-// only when there is something to recover from — otherwise the action
-// would be a noisy noop next to a healthy sync pill.
-const showReloadLatest = computed(
-	() =>
-		draftStore.sync.conflict ||
-		draftStore.hasFailedMutations ||
-		draftStore.sync.status === 'failed',
-);
-const reloading = ref(false);
-async function onReloadLatest() {
-	reloading.value = true;
-	try {
-		await draftStore.reloadFromServer();
-	} catch (error) {
-		toast.error(
-			error.messages?.[0] ||
-				error.message ||
-				__('Could not reload from server'),
-		);
-	} finally {
-		reloading.value = false;
-	}
-}
-
-const props = defineProps({
-	mergeDisabled: {
-		type: Boolean,
-		default: false,
-	},
-	spaceName: {
-		type: String,
-		default: '',
-	},
-	spaceRoute: {
-		type: String,
-		default: '',
-	},
-});
-
-const STATUS_BADGE_THEME = {
-	Draft: 'gray',
-	'In Review': 'orange',
-	'Changes Requested': 'red',
-	Approved: 'green',
-	Merged: 'green',
-	Rejected: 'red',
-};
-const statusBadgeTheme = computed(
-	() => STATUS_BADGE_THEME[changeRequestStatus.value] || 'gray',
-);
-
-const emit = defineEmits(['submit', 'withdraw', 'merge', 'open-settings']);
-
-// Frozen while the CR is being finalized: the server walks it through In Review
-// and Approved on the way to a merge, and every one of those states is a badge,
-// a banner colour and a different action row. The user asked for one thing, so
-// they see one state until it lands.
-const changeRequestStatus = computed(() => {
-	if (crStore.finalizing) return finalizingStatus.value;
-	return crStore.currentChangeRequest?.status || 'Draft';
-});
-
-// The status as it was when finalizing began, held for the duration.
-const finalizingStatus = ref('Draft');
-watch(
-	() => crStore.finalizing,
-	(state, previous) => {
-		if (state && !previous) {
-			finalizingStatus.value = crStore.currentChangeRequest?.status || 'Draft';
-		}
-	},
-);
-
-const showChangesDialog = ref(false);
-const showSubmitConfirmDialog = ref(false);
-
-function confirmSubmit(closeDialog) {
-	closeDialog();
-	emit('submit');
-}
-
-const canShowMerge = computed(() => {
-	return userStore.isWikiManager && crStore.changeCount > 0;
-});
-
-const mergeButtonTitle = computed(() => {
-	if (draftStore.finalizationBlocker === 'conflict') {
-		return __('Reload latest before merging');
-	}
-	if (draftStore.finalizationBlocker === 'failed') {
-		return __('Resolve failed changes before merging');
-	}
-	if (draftStore.finalizationBlocker === 'pending') {
-		return __('Wait for pending changes to sync before merging');
-	}
-	if (draftStore.finalizationBlocker === 'unsaved') {
-		return __('Save your changes before merging');
-	}
-	if (props.mergeDisabled) {
-		return __('Please wait for reordering to finish before merging');
-	}
-	return '';
-});
-
-const mergeDisabledComputed = computed(
-	() => props.mergeDisabled || hasUnsyncedWork.value,
-);
-
-const canShowArchive = computed(() => {
-	return (
-		crStore.changeCount > 0 &&
-		(changeRequestStatus.value === 'Draft' ||
-			changeRequestStatus.value === 'In Review' ||
-			changeRequestStatus.value === 'Changes Requested')
-	);
-});
-
-const menuOptions = computed(() => {
-	const options = [];
-	if (crStore.changeCount > 0) {
-		options.push({
-			label: __('View changes ({0})', [crStore.changeCount]),
-			icon: 'list',
-			onClick: () => {
-				showChangesDialog.value = true;
-			},
-		});
-	}
-	if (canShowArchive.value) {
-		options.push({
-			label: __('Discard Changes'),
-			icon: 'archive',
-			onClick: () => emit('withdraw'),
-		});
-	}
-	return options;
-});
-
-const BANNER_CONFIG = {
-	Draft: {
-		class: 'bg-surface-gray-1 border-b border-outline-gray-2 text-ink-gray-8',
-		icon: 'lucide-git-branch',
-		title: __('Drafting Changes'),
-		description: '',
-	},
-	'In Review': {
-		class:
-			'bg-surface-amber-2 border-b border-outline-amber-2 text-ink-amber-8',
-		icon: 'lucide-clock',
-		title: __('In Review'),
-		description: __('Your change request is being reviewed'),
-	},
-	'Changes Requested': {
-		class: 'bg-surface-red-2 border-b border-outline-red-2 text-ink-red-8',
-		icon: 'lucide-x-circle',
-		title: __('Changes Requested'),
-		description: __('Please review the feedback and update your changes'),
-	},
-	Approved: {
-		class:
-			'bg-surface-green-2 border-b border-outline-green-2 text-ink-green-8',
-		icon: 'lucide-check-circle',
-		title: __('Approved'),
-		description: __('Approved and ready to merge'),
-	},
-	Merged: {
-		class:
-			'bg-surface-green-2 border-b border-outline-green-2 text-ink-green-8',
-		icon: 'lucide-check-circle',
-		title: __('Merged'),
-		description: __('Your changes have been merged'),
-	},
-	Rejected: {
-		class: 'bg-surface-red-2 border-b border-outline-red-2 text-ink-red-8',
-		icon: 'lucide-x-circle',
-		title: __('Rejected'),
-		description: __('This change request was rejected and will not be merged'),
-	},
-};
-
-const DEFAULT_BANNER = {
-	class: 'bg-surface-gray-1 border-b border-outline-gray-2 text-ink-gray-8',
-	icon: 'lucide-alert-circle',
-	title: __('Change Request'),
-	description: '',
-};
-
-const bannerConfig = computed(
-	() => BANNER_CONFIG[changeRequestStatus.value] || DEFAULT_BANNER,
-);
-const bannerClass = computed(() => bannerConfig.value.class);
-const bannerTitle = computed(() => bannerConfig.value.title);
-
-// The only place the author sees why a CR bounced back; the status badge covers
-// the generic states, so those blurbs are dropped.
-const reviewFeedback = computed(() => {
-	const cr = crStore.currentChangeRequest;
-	const showsReviewComment = ['Changes Requested', 'Rejected'].includes(
-		changeRequestStatus.value,
-	);
-	if (showsReviewComment && cr?.review_comment) {
-		return cr.reviewed_by
-			? __('{0} — {1}', [cr.review_comment, cr.reviewed_by])
-			: cr.review_comment;
-	}
-	return '';
-});
-</script>
diff --git a/frontend/src/components/ContributionsPanel.vue b/frontend/src/components/ContributionsPanel.vue
index c3a024b72..5a434c3c0 100644
--- a/frontend/src/components/ContributionsPanel.vue
+++ b/frontend/src/components/ContributionsPanel.vue
@@ -1,132 +1,132 @@
 <template>
 	<div class="flex-1 overflow-auto px-3 pt-4 pb-4 sm:px-5 sm:pb-5">
-		<!-- First load: skeleton rows in the real List chrome, so the table's
-		     columns and row height don't shift when the data lands. -->
+		<!-- The List family owns geometry only; empty states are app-authored. -->
 		<div
-			v-if="resource.list.loading && !resource.data?.length"
-			class="min-w-[720px] sm:min-w-0"
+			v-if="!isFirstLoad && !rows.length"
+			class="flex flex-col items-center justify-center py-16 text-center"
 		>
-			<List :columns="tracks" :row-height="40">
-				<ListHeader>
-					<ListHeaderCell
-						v-for="col in columns"
-						:key="col.key"
-						:class="col.align === 'right' ? 'justify-end' : ''"
-					>
-						{{ col.label }}
-					</ListHeaderCell>
-				</ListHeader>
+			<p class="text-lg-medium text-ink-gray-7">
+				{{ options.emptyState?.title }}
+			</p>
+			<p class="mt-1 max-w-sm text-p-sm text-ink-gray-5">
+				{{ options.emptyState?.description }}
+			</p>
+		</div>
+
+		<!-- One List spans both states: cold-load skeletons render inside the real
+		     chrome, so the track list is declared once and columns can't shift when
+		     the data lands. `list-row-px-3` sets the content inset on the List so
+		     header and rows share it instead of drifting.
+		     Mobile collapses the table to a feed via a --list-columns override
+		     rather than scrolling sideways -- the track count here must stay in
+		     step with MOBILE_KEYS below. -->
+		<List
+			v-else
+			:columns="tracks"
+			:row-height="40"
+			class="list-row-px-3 max-sm:list-cols-[minmax(0,1fr)_auto]"
+		>
+			<!-- `!hidden`: the family sets `display: grid` at attribute specificity
+			     (to survive preflight resets), which a plain `hidden` utility ties
+			     with and loses to on order. -->
+			<ListHeader class="max-sm:!hidden">
+				<ListHeaderCell
+					v-for="col in columns"
+					:key="col.key"
+					:class="col.align === 'right' ? 'justify-end' : ''"
+				>
+					{{ col.label }}
+				</ListHeaderCell>
+			</ListHeader>
+
+			<template v-if="isFirstLoad">
 				<ListRow v-for="i in SKELETON_ROWS" :key="i">
 					<ListCell
 						v-for="col in columns"
 						:key="col.key"
-						:class="col.align === 'right' ? 'justify-end' : ''"
+						:class="[
+							col.align === 'right' ? 'justify-end' : '',
+							hiddenOnMobile(col) && 'max-sm:hidden',
+						]"
 					>
 						<Skeleton
-							class="h-4 rounded"
+							class="h-4 rounded-4"
 							:class="skeletonWidth(col)"
 							:style="{ animationDelay: `${i * 60}ms` }"
 						/>
 					</ListCell>
 				</ListRow>
-			</List>
-		</div>
-		<template v-else>
-			<!-- The List family owns geometry only; empty states are app-authored. -->
-			<div
-				v-if="!rows.length"
-				class="flex flex-col items-center justify-center py-16 text-center"
-			>
-				<p class="text-lg-medium text-ink-gray-7">
-					{{ options.emptyState?.title }}
-				</p>
-				<p class="mt-1 max-w-sm text-p-sm text-ink-gray-5">
-					{{ options.emptyState?.description }}
-				</p>
-			</div>
-			<template v-else>
-				<!-- Keep the table a table on mobile; scroll it sideways so the
-				     wider review columns stay readable. -->
-				<div class="min-w-[720px] sm:min-w-0">
-					<List :columns="tracks" :row-height="40">
-						<ListHeader>
-							<ListHeaderCell
-								v-for="col in columns"
-								:key="col.key"
-								:class="col.align === 'right' ? 'justify-end' : ''"
-							>
-								{{ col.label }}
-							</ListHeaderCell>
-						</ListHeader>
-						<ListRows :items="rows" row-key="name" v-slot="{ item: row }">
-							<ListRow :to="options.getRowRoute?.(row)">
-								<ListCell
-									v-for="col in columns"
-									:key="col.key"
-									:class="col.align === 'right' ? 'justify-end' : ''"
-								>
-									<Badge
-										v-if="col.key === 'status'"
-										variant="subtle"
-										:theme="getStatusTheme(row.status)"
-										size="sm"
-									>
-										{{ row.status }}
-									</Badge>
-									<div v-else-if="col.key === 'owner'" class="truncate text-ink-gray-6">
-										{{ row.owner }}
-									</div>
-									<div
-										v-else-if="col.key === 'modified'"
-										class="flex items-center gap-1.5 text-sm text-ink-gray-5"
-										:title="formatDateTime(row.modified)"
-									>
-										<span class="lucide-clock size-3.5 shrink-0 text-ink-gray-4" aria-hidden="true" />
-										<span class="truncate">{{ formatDate(row.modified) }}</span>
-									</div>
-									<div
-										v-else-if="col.key === 'assign'"
-										class="flex items-center gap-2"
-									>
-										<AssigneeAvatars v-if="row._assign" :assign="row._assign" />
-										<!-- Rows are router-links (an <a>); .stop halts JS bubbling but the
-										     browser still follows the anchor href, so .prevent is required
-										     to keep the Assign click from navigating to the CR. -->
-										<Button
-											variant="ghost"
-											size="sm"
-											icon-left="user-plus"
-											@click.stop.prevent="emit('assign', row)"
-										>
-											{{ __('Assign') }}
-										</Button>
-									</div>
-									<!-- Cells don't inherit an ink color from the List family, so an
-									     explicit token is required or the text goes black in dark mode. -->
-									<div
-										v-else
-										class="truncate"
-										:class="col.key === 'title' ? 'text-ink-gray-9' : 'text-ink-gray-7'"
-										:title="row[col.key]"
-									>
-										{{ row[col.key] }}
-									</div>
-								</ListCell>
-							</ListRow>
-						</ListRows>
-					</List>
-				</div>
-
-				<div v-if="resource.hasNextPage" class="flex pt-3">
-					<Button
-						@click="() => resource.next()"
-						:loading="resource.list.loading"
-						:label="__('Load more')"
-						icon-left="refresh-cw"
-					/>
-				</div>
 			</template>
-		</template>
+
+			<ListRows v-else :items="rows" v-slot="{ item: row }">
+				<ListRow :to="options.getRowRoute?.(row)">
+					<ListCell
+						v-for="col in columns"
+						:key="col.key"
+						:class="[
+							col.align === 'right' ? 'justify-end' : '',
+							hiddenOnMobile(col) && 'max-sm:hidden',
+						]"
+					>
+						<Badge
+							v-if="col.key === 'status'"
+							variant="subtle"
+							:theme="getStatusTheme(row.status)"
+							size="sm"
+						>
+							{{ row.status }}
+						</Badge>
+						<div v-else-if="col.key === 'owner'" class="truncate text-ink-gray-6">
+							{{ row.owner }}
+						</div>
+						<div
+							v-else-if="col.key === 'modified'"
+							class="flex items-center gap-1.5 text-sm text-ink-gray-5"
+							:title="formatDateTime(row.modified)"
+						>
+							<span class="lucide-clock size-3.5 shrink-0 text-ink-gray-4" aria-hidden="true" />
+							<span class="truncate">{{ formatDate(row.modified) }}</span>
+						</div>
+						<div
+							v-else-if="col.key === 'assign'"
+							class="flex items-center gap-2"
+						>
+							<AssigneeAvatars v-if="row._assign" :assign="row._assign" />
+							<!-- Rows are router-links (an <a>); .stop halts JS bubbling but the
+							     browser still follows the anchor href, so .prevent is required
+							     to keep the Assign click from navigating to the CR. -->
+							<Button
+								variant="ghost"
+								size="sm"
+								icon-left="lucide-user-plus"
+								@click.stop.prevent="emit('assign', row)"
+							>
+								{{ __('Assign') }}
+							</Button>
+						</div>
+						<!-- Cells don't inherit an ink color from the List family, so an
+						     explicit token is required or the text goes black in dark mode. -->
+						<div
+							v-else
+							class="truncate"
+							:class="col.key === 'title' ? 'text-ink-gray-9' : 'text-ink-gray-7'"
+							:title="row[col.key]"
+						>
+							{{ row[col.key] }}
+						</div>
+					</ListCell>
+				</ListRow>
+			</ListRows>
+		</List>
+
+		<div v-if="resource.hasNextPage" class="flex pt-3">
+			<Button
+				@click="() => resource.next()"
+				:loading="resource.list.loading"
+				:label="__('Load more')"
+				icon-left="lucide-refresh-cw"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -155,6 +155,21 @@ const rows = computed(() => props.resource.data || []);
 
 const SKELETON_ROWS = 6;
 
+// Cold load only: once a page has landed, refetches keep the rows on screen
+// instead of flashing back to skeletons.
+const isFirstLoad = computed(
+	() => props.resource.list.loading && !props.resource.data?.length,
+);
+
+// Columns that survive the mobile feed, in order: the title grows, the status
+// badge trails. Every column set this panel is handed carries both. Adding a
+// key here means editing the max-sm track list on the List too.
+const MOBILE_KEYS = ['title', 'status'];
+
+function hiddenOnMobile(col) {
+	return !MOBILE_KEYS.includes(col.key);
+}
+
 // Placeholder bars are sized per column kind so the loading table reads like
 // the real one rather than a block of identical grey lines.
 function skeletonWidth(col) {
@@ -184,7 +199,7 @@ function getStatusTheme(status) {
 		case 'Draft':
 			return 'blue';
 		case 'In Review':
-			return 'orange';
+			return 'amber';
 		case 'Changes Requested':
 			return 'red';
 		case 'Approved':
diff --git a/frontend/src/components/DiffViewer.vue b/frontend/src/components/DiffViewer.vue
index dafe7ea89..1a467003d 100644
--- a/frontend/src/components/DiffViewer.vue
+++ b/frontend/src/components/DiffViewer.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script setup>
+import { useTheme } from '@/composables/useTheme';
 import { FileDiff } from '@pierre/diffs';
-import { useStorage } from '@vueuse/core';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 const THEMES = {
@@ -12,10 +12,8 @@ const THEMES = {
 	light: 'github-light',
 };
 
-const userTheme = useStorage('wiki-theme', 'dark');
-const themeType = computed(() =>
-	userTheme.value === 'dark' ? 'dark' : 'light',
-);
+const { resolvedTheme } = useTheme();
+const themeType = computed(() => resolvedTheme.value);
 
 const props = defineProps({
 	oldContent: {
diff --git a/frontend/src/components/DraftContributionPanel.vue b/frontend/src/components/DraftContributionPanel.vue
index e840e21eb..0178baefb 100644
--- a/frontend/src/components/DraftContributionPanel.vue
+++ b/frontend/src/components/DraftContributionPanel.vue
@@ -1,29 +1,30 @@
 <template>
 	<div class="h-full flex flex-col">
 		<div v-if="crPage && crPage.doc_key === props.docKey" class="h-full flex flex-col">
-			<div class="flex min-h-12 shrink-0 items-center gap-2 border-b border-outline-gray-2 bg-surface-base px-3 sm:px-5">
+			<div class="flex h-12 shrink-0 items-center gap-2 border-b border-outline-gray-2 bg-surface-base px-3 sm:px-5">
 				<Breadcrumbs :items="breadcrumbs" class="min-w-0 flex-1" />
 
 				<div class="flex shrink-0 items-center gap-2">
-					<Button
-						variant="solid"
-						:loading="isSaving"
-						@click="saveFromHeader"
-					>
-						{{ __('Save') }}
-					</Button>
+					<SubmitForReviewButton />
 					<Dropdown :options="menuOptions">
-						<Button variant="ghost" :title="__('More actions')">
-							<span class="lucide-more-vertical size-4" aria-hidden="true" />
+						<Button
+							variant="ghost"
+							:title="__('Page actions')"
+							:aria-label="__('Page actions')"
+						>
+							<span class="lucide-more-horizontal size-4" aria-hidden="true" />
 						</Button>
 					</Dropdown>
 				</div>
 			</div>
 
-			<div v-if="!crPage.is_group" class="flex-1 overflow-auto pb-10">
+			<!-- The one scroller on this page: the editor body scrolls under
+			     the sticky toolbar, and the bubble menu and the outline rail
+			     both measure against it. -->
+			<ScrollArea v-if="!crPage.is_group" class="min-h-0 flex-1" viewport-class="pb-10">
 				<WikiEditor v-if="editorKey" :key="editorKey" ref="editorRef" :content="editorContent" :document-key="props.docKey" :saved-content="savedContent" @save="saveContent" @save-all="flushOtherDirtyPages" @content-change="onEditorContentChange" @content-ready="onEditorContentReady">
 					<template #title>
-						<div class="pt-8">
+						<div class="pt-10">
 							<div class="flex items-start gap-3">
 								<input
 									type="text"
@@ -34,27 +35,25 @@
 									@keydown.enter="$event.target.blur()"
 								/>
 								<div class="flex shrink-0 items-center gap-2 pt-2">
+									<span
+										v-if="isPageDirty"
+										class="size-2 rounded-full bg-surface-amber-4"
+										:title="__('Unsaved changes')"
+										:aria-label="__('Unsaved changes')"
+										role="status"
+									/>
 									<Badge variant="subtle" theme="blue" size="sm">
 										{{ __('Draft') }}
 									</Badge>
 								</div>
 							</div>
-
-							<!-- Route under the title, where an already-merged page keeps it. -->
-							<div
-								class="mt-2 flex w-fit cursor-pointer items-center gap-1 text-sm text-ink-gray-5 hover:text-ink-gray-7 group/route"
-								@click="openRouteDialog"
-							>
-								<span class="font-mono truncate">/{{ crPage.route || '' }}</span>
-								<span class="lucide-pencil size-3 shrink-0 opacity-0 group-hover/route:opacity-100" aria-hidden="true" />
-							</div>
 						</div>
 					</template>
 				</WikiEditor>
-			</div>
+			</ScrollArea>
 
 			<div v-else class="flex-1 flex flex-col overflow-auto">
-				<div class="mx-auto w-full max-w-[770px] px-6 pt-8">
+				<div class="mx-auto w-full max-w-3xl px-8 pt-10">
 					<div class="flex items-start gap-3">
 						<input
 							type="text"
@@ -69,14 +68,6 @@
 							<Badge variant="subtle" theme="gray" size="sm">{{ __('Group') }}</Badge>
 						</div>
 					</div>
-
-					<div
-						class="mt-2 flex w-fit cursor-pointer items-center gap-1 text-sm text-ink-gray-5 hover:text-ink-gray-7 group/route"
-						@click="openRouteDialog"
-					>
-						<span class="font-mono truncate">/{{ crPage.route || '' }}</span>
-						<span class="lucide-pencil size-3 shrink-0 opacity-0 group-hover/route:opacity-100" aria-hidden="true" />
-					</div>
 				</div>
 				<div class="flex-1 flex items-center justify-center text-ink-gray-5">
 					<div class="text-center">
@@ -89,24 +80,24 @@
 		</div>
 
 		<div v-else-if="!loadFailed" class="h-full flex flex-col">
-			<div class="flex min-h-12 shrink-0 items-center justify-between border-b border-outline-gray-2 px-3 sm:px-5">
-				<Skeleton class="h-4 w-40 rounded" />
+			<div class="flex h-12 shrink-0 items-center justify-between border-b border-outline-gray-2 px-3 sm:px-5">
+				<Skeleton class="h-4 w-40 rounded-4" />
 				<div class="flex items-center gap-2">
-					<Skeleton class="h-8 w-16 rounded" />
-					<Skeleton class="size-8 rounded" />
+					<Skeleton class="h-8 w-16 rounded-4" />
+					<Skeleton class="size-8 rounded-4" />
 				</div>
 			</div>
-			<div class="mx-auto w-full max-w-[770px] flex-1 px-6 pb-6 pt-8 space-y-4">
-				<Skeleton class="h-8 w-64 rounded" />
+			<div class="mx-auto w-full max-w-3xl flex-1 px-8 pb-10 pt-10 space-y-4">
+				<Skeleton class="h-8 w-64 rounded-4" />
 				<Skeleton class="h-5 w-14 rounded-full" />
-				<Skeleton class="h-4 w-3/4 rounded" />
-				<Skeleton class="h-4 w-full rounded" />
-				<Skeleton class="h-4 w-5/6 rounded" />
-				<Skeleton class="h-4 w-full rounded" />
-				<Skeleton class="h-4 w-2/3 rounded" />
-				<Skeleton class="h-4 w-full rounded mt-6" />
-				<Skeleton class="h-4 w-4/5 rounded" />
-				<Skeleton class="h-4 w-full rounded" />
+				<Skeleton class="h-4 w-3/4 rounded-4" />
+				<Skeleton class="h-4 w-full rounded-4" />
+				<Skeleton class="h-4 w-5/6 rounded-4" />
+				<Skeleton class="h-4 w-full rounded-4" />
+				<Skeleton class="h-4 w-2/3 rounded-4" />
+				<Skeleton class="h-4 w-full rounded-4 mt-6" />
+				<Skeleton class="h-4 w-4/5 rounded-4" />
+				<Skeleton class="h-4 w-full rounded-4" />
 			</div>
 		</div>
 
@@ -152,6 +143,7 @@ import {
 	Dropdown,
 	FormControl,
 	LoadingIndicator,
+	ScrollArea,
 	Skeleton,
 	getCachedDocumentResource,
 	toast,
@@ -159,6 +151,7 @@ import {
 } from 'frappe-ui';
 import { computed, inject, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import SubmitForReviewButton from './SubmitForReviewButton.vue';
 import WikiEditor from './WikiEditor.vue';
 
 const props = defineProps({
@@ -344,6 +337,11 @@ watch(
 // Once the create syncs, swap the URL from /draft/tmp_* to /draft/realKey.
 // Without this the panel would stay on a temp key after sync, and any
 // reload would 404 on get_cr_page.
+//
+// Immediate, because the create can resolve before this panel mounts — the
+// navigation to /draft/tmp_* and the create race each other, and on a fast
+// bench the create wins. A lazy watcher then never fires for a key that was
+// promoted moments earlier, stranding the page on "Draft not found".
 watch(
 	() => draftStore.tempKeyResolutions[props.docKey],
 	(realKey) => {
@@ -370,6 +368,7 @@ watch(
 			});
 		}
 	},
+	{ immediate: true },
 );
 
 watch(
@@ -394,11 +393,13 @@ const editorContent = computed(() => {
 	return crPage.value?.content || '';
 });
 
-// Save state is owned by the workspace store.
-const pageSaveStatus = computed(
-	() => draftStore.pagesByKey[props.docKey]?.saveStatus || 'idle',
-);
-const isSaving = computed(() => pageSaveStatus.value === 'saving');
+// Same divergence test the store's finalization gate uses, for this page.
+const isPageDirty = computed(() => {
+	const page = draftStore.pagesByKey[props.docKey];
+	return Boolean(
+		page?.localContent != null && page.localContent !== page.content,
+	);
+});
 // The editor normalizes this confirmed snapshot before handing it back to
 // the store for comparison.
 const savedContent = computed(
@@ -414,9 +415,14 @@ const editorKey = computed(() => {
 
 const menuOptions = computed(() => {
 	return [
+		{
+			label: __('Change route'),
+			icon: 'lucide-link',
+			onClick: openRouteDialog,
+		},
 		{
 			label: __('Delete Draft'),
-			icon: 'trash-2',
+			icon: 'lucide-trash-2',
 			onClick: deleteDraft,
 		},
 	];
@@ -458,10 +464,6 @@ async function saveRoute(close) {
 	}
 }
 
-function saveFromHeader() {
-	editorRef.value?.saveToDB();
-}
-
 async function saveContent(content) {
 	if (!crPage.value?.doc_key) return;
 	try {
diff --git a/frontend/src/components/EditorTableOfContents.vue b/frontend/src/components/EditorTableOfContents.vue
index 910085a72..bfe449148 100644
--- a/frontend/src/components/EditorTableOfContents.vue
+++ b/frontend/src/components/EditorTableOfContents.vue
@@ -1,19 +1,22 @@
 <template>
-	<!-- The rail keeps its width even with nothing to list, so the content column
-	     doesn't slide sideways the moment the author types their first `##`. -->
-	<aside
+	<!-- Sits in the gutter reserved for it on the right of the prose column.
+	     The wrapper spans the full content height so its nav can stick inside
+	     the scroller; pointer events are handed back to the rows alone, so the
+	     gutter above and below the list still belongs to the page. A plain div,
+	     not an aside: the nav inside is already the landmark, and a second
+	     complementary region here competes with the space sidebar. -->
+	<div
 		v-if="variant === 'rail'"
 		ref="rootRef"
-		class="w-[220px] shrink-0 py-6 pr-6"
+		class="pointer-events-none absolute inset-y-0 right-0 w-[208px] py-6 pr-4"
 		data-testid="editor-toc-rail"
 	>
 		<nav
 			v-if="outline.length"
-			class="hide-scrollbar sticky flex flex-col overflow-y-auto text-sm leading-relaxed"
-			:style="{ top: `${railTop}px`, maxHeight: `calc(100vh - ${railTop}px - 4rem)` }"
+			class="hide-scrollbar pointer-events-auto sticky flex flex-col overflow-y-auto text-sm leading-relaxed"
+			:style="{ top: `${railTop}px`, maxHeight: `${railMaxHeight}px` }"
 		>
-			<!-- Transparent border keeps the label on the same left edge as the links. -->
-			<span class="whitespace-nowrap border-l border-transparent pl-4 pb-1 font-medium text-ink-gray-8">
+			<span class="whitespace-nowrap px-2 pb-1 font-medium text-ink-gray-8">
 				{{ __('On this page') }}
 			</span>
 			<button
@@ -21,19 +24,19 @@
 				:key="entry.pos"
 				type="button"
 				data-testid="editor-toc-link"
-				class="truncate border-l py-1 text-left"
+				class="truncate rounded-4 py-1 pr-2 text-left"
 				:class="[
-					entry.level >= 3 && hasH2 ? 'pl-7' : 'pl-4',
+					entry.level >= 3 && hasH2 ? 'pl-5' : 'pl-2',
 					index === activeIndex
-						? 'border-outline-gray-4 text-ink-gray-9'
-						: 'border-outline-gray-2 text-ink-gray-6 hover:text-ink-gray-9',
+						? 'bg-surface-gray-2 text-ink-gray-9'
+						: 'text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8',
 				]"
-				@click="goTo(entry)"
+				@click="goTo(entry, { index })"
 			>
 				{{ entry.text }}
 			</button>
 		</nav>
-	</aside>
+	</div>
 
 	<!-- Narrow layouts get the reader's collapsed strip instead: one row that
 	     names the section you're in, expanding to the full list on tap. -->
@@ -79,7 +82,7 @@
 						? 'bg-surface-gray-2 font-medium text-ink-gray-9'
 						: 'text-ink-gray-6'"
 					:style="{ paddingLeft: `${1 + (entry.level - 2) * 0.75}rem` }"
-					@click="goTo(entry, { collapse: true })"
+					@click="goTo(entry, { index, collapse: true })"
 				>
 					<span
 						class="size-1.5 shrink-0 rounded-full"
@@ -132,6 +135,14 @@ const activeText = computed(() => outline.value[activeIndex.value]?.text || '');
 
 const railTop = computed(() => toolbarHeight.value + 24);
 
+// The rail is sticky inside the editor's scroller, not the window, so its
+// height budget is that container's — `100vh` overshoots by the app header and
+// the page's own header row, and the list runs off the bottom.
+const containerHeight = ref(0);
+const railMaxHeight = computed(() =>
+	Math.max(containerHeight.value - railTop.value - 32, 0),
+);
+
 // The editor's nearest scrollable ancestor owns both the scroll position we
 // spy on and the sticky context the rail lives in.
 let scrollContainer = null;
@@ -149,6 +160,7 @@ function findScrollContainer(element) {
 function measureToolbar() {
 	toolbarHeight.value =
 		scrollContainer?.querySelector('.wiki-toolbar')?.offsetHeight || 0;
+	containerHeight.value = scrollContainer?.clientHeight || 0;
 }
 
 function headingElement(pos) {
@@ -163,9 +175,9 @@ function headingElement(pos) {
 
 function updateActive() {
 	if (!scrollContainer || !outline.value.length) return;
+	const box = scrollContainer.getBoundingClientRect();
 	// Anything above the toolbar's lower edge has already scrolled out of sight.
-	const threshold =
-		scrollContainer.getBoundingClientRect().top + toolbarHeight.value + 16;
+	const threshold = box.top + toolbarHeight.value + 16;
 
 	let next = 0;
 	for (const [index, entry] of outline.value.entries()) {
@@ -174,6 +186,25 @@ function updateActive() {
 		if (element.getBoundingClientRect().top > threshold) break;
 		next = index;
 	}
+
+	// The last headings in a document can never reach the threshold — there is
+	// not enough content below them to scroll that far — so at the bottom of
+	// the scroller the rule changes to "the deepest heading you can actually
+	// see". Without this, clicking the final entry scrolls to it and then
+	// leaves the entry above it marked as the one you are on.
+	const atBottom =
+		scrollContainer.scrollHeight -
+			scrollContainer.scrollTop -
+			scrollContainer.clientHeight <=
+		1;
+	if (atBottom) {
+		for (const [index, entry] of outline.value.entries()) {
+			const element = headingElement(entry.pos);
+			if (!element) continue;
+			if (element.getBoundingClientRect().top < box.bottom) next = index;
+		}
+	}
+
 	activeIndex.value = next;
 }
 
@@ -186,9 +217,14 @@ function scheduleUpdateActive() {
 	});
 }
 
-function goTo(entry, { collapse = false } = {}) {
+function goTo(entry, { index, collapse = false } = {}) {
 	const element = headingElement(entry.pos);
 	if (!element || !scrollContainer) return;
+	// Clicking an entry is a choice, so it goes active straight away rather
+	// than waiting for the smooth scroll to settle. The scroll lands the
+	// heading exactly on the scrollspy's threshold, and a sub-pixel overshoot
+	// there reads as "not reached yet" — which left the previous entry marked.
+	if (index !== undefined) activeIndex.value = index;
 	// scrollIntoView would tuck the heading under the sticky toolbar, so scroll
 	// the container by hand and leave room for it.
 	const top =
diff --git a/frontend/src/components/IconGrid.vue b/frontend/src/components/IconGrid.vue
index 53528f5a6..342a3b7a7 100644
--- a/frontend/src/components/IconGrid.vue
+++ b/frontend/src/components/IconGrid.vue
@@ -11,7 +11,7 @@
 					:key="icon.class"
 					type="button"
 					role="option"
-					class="flex size-8 items-center justify-center rounded text-ink-gray-7 hover:bg-surface-gray-2"
+					class="flex size-8 items-center justify-center rounded-4 text-ink-gray-7 hover:bg-surface-gray-2"
 					:class="icon.class === modelValue ? 'bg-surface-gray-3 text-ink-gray-9' : ''"
 					:title="icon.label"
 					:aria-label="icon.label"
diff --git a/frontend/src/components/IconPicker.vue b/frontend/src/components/IconPicker.vue
index 2efab9d07..68bc5428b 100644
--- a/frontend/src/components/IconPicker.vue
+++ b/frontend/src/components/IconPicker.vue
@@ -3,7 +3,7 @@
 	     swallows a nested popover's interactions. -->
 	<div
 		v-if="inline"
-		class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-elevation-1"
+		class="overflow-hidden rounded-6 border border-outline-gray-2 bg-surface-elevation-1"
 	>
 		<IconGrid :model-value="modelValue" @select="selectIcon($event)" />
 	</div>
@@ -29,7 +29,7 @@
 				@open-auto-focus.prevent
 			>
 				<div
-					class="max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg bg-surface-elevation-2 text-base shadow-2xl ring-1 ring-black ring-opacity-5"
+					class="max-w-[calc(100vw-2rem)] overflow-hidden rounded-6 bg-surface-elevation-2 text-base shadow-2xl ring-1 ring-black ring-opacity-5"
 				 	style="transform-origin: var(--reka-popover-content-transform-origin)"
 				>
 					<IconGrid
diff --git a/frontend/src/components/LibrarySidebar.vue b/frontend/src/components/LibrarySidebar.vue
new file mode 100644
index 000000000..8209b4135
--- /dev/null
+++ b/frontend/src/components/LibrarySidebar.vue
@@ -0,0 +1,257 @@
+<template>
+	<!-- Level 0 of the drill-in model: the wiki's library. Entering a space
+	     replaces this whole column with SpaceSidebar, so this is the only place
+	     that lists what a wiki contains.
+
+	     SidebarHeader owns its own gutter and a fixed 48px height that lines up
+	     with PageHeader, so it goes straight into Sidebar. Padding belongs on the
+	     scroll region and the footer instead. -->
+	<Sidebar>
+		<SidebarHeader
+			:title="__('Frappe Wiki')"
+			:subtitle="userStore.data?.full_name"
+			logo="/assets/wiki/images/wiki-logo.png"
+			:menu-items="headerMenuItems"
+		/>
+		<ScrollArea class="min-h-0 flex-1" viewport-class="px-2 pt-1">
+			<div class="flex flex-col gap-0.5">
+				<SidebarItem
+					v-for="item in navItems"
+					:key="item.label"
+					:label="item.label"
+					:icon="item.icon"
+					:to="item.to"
+					:active="item.routeNames.includes(route.name)"
+					:suffix="item.suffix?.value"
+				/>
+
+				<SidebarSection :label="__('Spaces')">
+					<!-- One menu for the whole list: the row writes its own options as it
+					     is right-clicked, before the menu opens, so there is no
+					     ContextMenu instance per space. The trigger is `as-child`, so the
+					     rows need the one wrapping root. -->
+					<ContextMenu :options="spaceMenu">
+						<div class="flex flex-col gap-0.5">
+							<SidebarItem
+								v-for="space in orderedSpaces"
+								:key="space.name"
+								:label="space.space_name || space.name"
+								:to="{ name: 'SpaceDetails', params: { spaceId: space.name } }"
+								@contextmenu="openSpaceMenu(space)"
+							>
+								<template #prefix>
+									<SpaceAvatar
+										:space="space"
+										:label="space.space_name || space.name"
+										size="sm"
+									/>
+								</template>
+								<!-- Access and publish state are independent fields, so each
+								     gets its own icon. One merged badge would hide the case
+								     that matters most: a restricted space that is also
+								     unpublished. -->
+								<template #suffix>
+									<span class="mr-2 flex items-center gap-1">
+										<Tooltip v-if="isPinned(space.name)" :text="__('Pinned to top')">
+											<span class="lucide-pin size-3.5 text-ink-gray-5" aria-hidden="true" />
+										</Tooltip>
+										<Tooltip v-if="space.git_synced" :text="__('Synced from GitHub')">
+											<span class="lucide-folder-git-2 size-3.5 text-ink-gray-4" aria-hidden="true" />
+										</Tooltip>
+										<Tooltip v-if="restrictedSpaces.has(space.name)" :text="__('Restricted access')">
+											<span class="lucide-lock size-3.5 text-ink-gray-4" aria-hidden="true" />
+										</Tooltip>
+										<Tooltip v-if="!space.is_published" :text="__('Unpublished')">
+											<span class="lucide-eye-off size-3.5 text-ink-gray-4" aria-hidden="true" />
+										</Tooltip>
+									</span>
+								</template>
+							</SidebarItem>
+						</div>
+					</ContextMenu>
+
+					<p
+						v-if="!spaces.loading && !orderedSpaces.length"
+						class="px-2 py-2 text-p-sm text-ink-gray-5"
+					>
+						{{ __('No Wiki Spaces') }}
+					</p>
+
+					<!-- Most wikis hold a dozen spaces and fit here whole. When one
+					     does not, the column stays short and hands the rest to the
+					     Overview, which is the full directory with its own search. -->
+					<SidebarItem
+						v-if="spaces.hasNextPage"
+						:label="__('Show all spaces')"
+						icon="lucide-ellipsis"
+						:to="{ name: 'Overview' }"
+					/>
+				</SidebarSection>
+			</div>
+		</ScrollArea>
+		<div
+			v-if="userStore.isWikiManager"
+			class="flex flex-col gap-1 border-t border-outline-gray-2 p-2"
+		>
+			<Button
+				class="w-full"
+				variant="subtle"
+				:label="__('New Space')"
+				@click="showCreateDialog = true"
+			>
+				<template #prefix>
+					<span class="lucide-plus size-4" aria-hidden="true" />
+				</template>
+			</Button>
+		</div>
+	</Sidebar>
+
+	<NewSpaceDialog v-model="showCreateDialog" @created="spaces.reload()" />
+</template>
+
+<script setup>
+import {
+	Button,
+	ContextMenu,
+	ScrollArea,
+	Sidebar,
+	SidebarHeader,
+	SidebarItem,
+	SidebarSection,
+	Tooltip,
+	createResource,
+	toast,
+} from 'frappe-ui';
+
+import NewSpaceDialog from '@/components/NewSpaceDialog.vue';
+import SpaceAvatar from '@/components/SpaceAvatar.vue';
+import { useSessionStore } from '@/stores/session';
+import { useUserStore } from '@/stores/user';
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useSpaceLibrary } from '../composables/useSpaceLibrary';
+import { useSpaceSettings } from '../composables/useSpaceSettings';
+import { useTheme } from '../composables/useTheme';
+import { useWikiSettings } from '../composables/useWikiSettings';
+
+const route = useRoute();
+const router = useRouter();
+const sessionStore = useSessionStore();
+const userStore = useUserStore();
+const { open: openWikiSettings } = useWikiSettings();
+const { open: openSpaceSettings } = useSpaceSettings();
+
+const { themeIcon, toggleTheme } = useTheme();
+
+const showCreateDialog = ref(false);
+
+// The sidebar is a nav column, not a directory: it lists what fits at a glance
+// and defers the long tail to the Overview.
+const SIDEBAR_LIMIT = 15;
+
+const { spaces, orderedSpaces, restrictedSpaces, isPinned, togglePin } =
+	useSpaceLibrary({
+		limit: SIDEBAR_LIMIT,
+		// A manager's own unpublished drafts have to stay in the column they work
+		// in; for everyone else an unpublished space is not part of the wiki yet.
+		publishedOnly: computed(() => !userStore.isWikiManager),
+	});
+
+// Merged, rejected and archived requests are done, so they do not belong in
+// the sidebar count. `get_count` runs through the same permission query as the
+// list, so this is the user's own count, not the wiki's.
+const openChangeRequests = createResource({
+	url: 'frappe.client.get_count',
+	params: {
+		doctype: 'Wiki Change Request',
+		filters: { status: ['not in', ['Merged', 'Rejected', 'Archived']] },
+	},
+	auto: true,
+});
+
+const spaceMenu = ref([]);
+
+function openSpaceMenu(space) {
+	const pinned = isPinned(space.name);
+	spaceMenu.value = [
+		{
+			label: pinned ? __('Unpin from top') : __('Pin to top'),
+			icon: pinned ? 'lucide-pin-off' : 'lucide-pin',
+			onClick: () => pinSpace(space),
+		},
+		{
+			label: __('Space settings'),
+			icon: 'lucide-settings',
+			onClick: () => goToSpaceSettings(space),
+		},
+		{
+			label: __('Copy link'),
+			icon: 'lucide-link',
+			onClick: () => copySpaceLink(space),
+		},
+	];
+}
+
+function pinSpace(space) {
+	const label = space.space_name || space.name;
+	const pinned = togglePin(space.name);
+	toast.success(
+		pinned ? __('{0} pinned', [label]) : __('{0} unpinned', [label]),
+	);
+}
+
+// The settings dialog is mounted by SpaceDetails, so opening it from the
+// library means going there first.
+async function goToSpaceSettings(space) {
+	await router.push({
+		name: 'SpaceDetails',
+		params: { spaceId: space.name },
+	});
+	openSpaceSettings();
+}
+
+async function copySpaceLink(space) {
+	const { href } = router.resolve({
+		name: 'SpaceDetails',
+		params: { spaceId: space.name },
+	});
+	await navigator.clipboard.writeText(`${window.location.origin}${href}`);
+	toast.success(__('Link copied'));
+}
+
+const headerMenuItems = computed(() => [
+	...(userStore.isWikiManager
+		? [
+				{
+					label: __('Settings'),
+					icon: 'lucide-settings',
+					onClick: () => openWikiSettings(),
+				},
+			]
+		: []),
+	{ label: __('Toggle Theme'), icon: themeIcon.value, onClick: toggleTheme },
+	{ label: __('Log out'), icon: 'lucide-log-out', onClick: logout },
+]);
+
+const navItems = [
+	{
+		label: __('Overview'),
+		icon: 'lucide-layout-dashboard',
+		to: { name: 'Overview' },
+		routeNames: ['Overview'],
+	},
+	{
+		label: __('Change Requests'),
+		icon: 'lucide-git-branch',
+		to: { name: 'ChangeRequests' },
+		routeNames: ['ChangeRequests', 'ChangeRequestReview'],
+		suffix: computed(() =>
+			openChangeRequests.data ? String(openChangeRequests.data) : '',
+		),
+	},
+];
+
+function logout() {
+	sessionStore.logout.submit();
+}
+</script>
diff --git a/frontend/src/components/MobileAppMenu.vue b/frontend/src/components/MobileAppMenu.vue
index 988057ad8..568c32e51 100644
--- a/frontend/src/components/MobileAppMenu.vue
+++ b/frontend/src/components/MobileAppMenu.vue
@@ -1,5 +1,5 @@
 <template>
-	<Dropdown :options="menuOptions" placement="right">
+	<Dropdown :options="menuOptions" align="end">
 		<Button variant="ghost" :label="__('Menu')">
 			<template #icon>
 				<span class="lucide-menu size-4" aria-hidden="true" />
diff --git a/frontend/src/components/NewSpaceDialog.vue b/frontend/src/components/NewSpaceDialog.vue
new file mode 100644
index 000000000..77cc1fdb5
--- /dev/null
+++ b/frontend/src/components/NewSpaceDialog.vue
@@ -0,0 +1,607 @@
+<template>
+	<!-- Extracted whole from the retired space list page: this dialog, not the
+	     list around it, was the page's real job. It owns its own insert so any
+	     surface can open it — the sidebar footer, the Overview empty state —
+	     and tell its own list to refresh through `created`. -->
+	<Dialog
+		v-model:open="isOpen"
+		:title="__('Create Wiki Space')"
+		size="lg"
+		:actions="[
+			{
+				label: __('Create'),
+				variant: 'solid',
+				loading: creating,
+				onClick: handleCreateSpace,
+			},
+		]"
+	>
+		<template #default>
+			<div class="flex flex-col gap-4">
+				<!-- A mark is rolled the moment the dialog opens, so no space is
+				     ever created as a bare initial. The tile opens the same
+				     picker the settings panel uses. -->
+				<div class="flex items-end gap-3">
+					<SpaceIdentityPicker
+						:identity="identity"
+						:label="newSpace.space_name"
+						@update="applyIdentity"
+					/>
+					<FormControl
+						class="flex-1"
+						type="text"
+						:label="__('Space Name')"
+						v-model="newSpace.space_name"
+						:placeholder="__('My Wiki Space')"
+					/>
+				</div>
+				<FormControl
+					type="text"
+					:label="__('Route')"
+					required
+					:modelValue="newSpace.route"
+					@update:modelValue="handleRouteInput"
+					:placeholder="__('my-wiki-space')"
+					:description="__('The URL path for this wiki space (e.g., /my-wiki-space)')"
+				/>
+
+				<FormControl
+					type="checkbox"
+					:label="__('Synced from GitHub?')"
+					v-model="newSpace.git_synced"
+				/>
+
+				<template v-if="newSpace.git_synced">
+					<!-- Checking the connection + loading the account list right after the
+					     box is ticked: keep the user informed instead of flashing UI. -->
+					<div
+						v-if="githubConnected.loading || installationsResource.loading"
+						class="flex items-center gap-2 rounded-4 border border-outline-gray-2 p-3"
+					>
+						<span class="lucide-loader-2 h-4 w-4 animate-spin text-ink-gray-5" aria-hidden="true" />
+						<span class="text-p-sm text-ink-gray-6">{{ __('Connecting to GitHub…') }}</span>
+					</div>
+
+					<template v-else>
+						<!-- Not connected yet: kick off the GitHub App connect-account flow. -->
+						<div
+							v-if="!githubConnected.data"
+							class="flex flex-col items-start gap-2 rounded-4 border border-outline-gray-2 p-3"
+						>
+							<p class="text-p-sm text-ink-gray-6">
+								{{ __('Connect your GitHub account to pick a repository (private repos supported).') }}
+							</p>
+							<Button variant="subtle" :loading="githubConnected.loading" @click="connectGithub">
+								<template #prefix>
+									<!-- lucide-static dropped brand icons, so no `lucide-github`. -->
+									<span class="lucide-git-branch h-4 w-4" aria-hidden="true" />
+								</template>
+								{{ __('Connect GitHub') }}
+							</Button>
+							<ErrorMessage :message="githubConnected.error" />
+						</div>
+
+						<!-- Connected but the App isn't installed anywhere yet: offer install. -->
+						<div
+							v-else-if="installationOptions.length === 0"
+							class="flex flex-col items-start gap-2 rounded-4 border border-outline-gray-2 p-3"
+						>
+							<p class="text-p-sm text-ink-gray-6">
+								{{ __('The GitHub App is not installed on any account yet. Install it on the account and repositories you want to sync.') }}
+							</p>
+							<Button variant="subtle" :loading="installationsResource.loading" @click="installApp">
+								<template #prefix>
+									<!-- lucide-static dropped brand icons, so no `lucide-github`. -->
+									<span class="lucide-git-branch h-4 w-4" aria-hidden="true" />
+								</template>
+								{{ __('Install GitHub App') }}
+							</Button>
+							<ErrorMessage :message="appInstallUrl.error" />
+						</div>
+
+						<template v-else>
+							<!-- Reveal one step at a time: account → repo → branch → folder.
+							     The account picker always shows, even with a single (auto-
+							     selected) installation: an org the App isn't installed on
+							     yet is invisible otherwise, and "Add" is the way to get it. -->
+							<div class="flex items-end gap-2">
+								<Autocomplete
+									class="flex-1"
+									:label="__('GitHub Account or Organization')"
+									:options="installationOptions"
+									v-model="newSpace.github_installation_id"
+									:placeholder="__('Select an account or organization')"
+								/>
+								<Button
+									variant="subtle"
+									:loading="installationsResource.loading"
+									:tooltip="__('Install the GitHub App on another account or organization')"
+									@click="installApp"
+								>
+									<template #prefix>
+										<span class="lucide-plus h-4 w-4" aria-hidden="true" />
+									</template>
+									{{ __('Add') }}
+								</Button>
+							</div>
+
+							<!-- First repo page after an account is chosen: spinner so the repo
+							     field never appears empty with no hint that it's loading. -->
+							<div
+								v-if="reposInitialLoading"
+								class="flex items-center gap-2 rounded-4 border border-outline-gray-2 p-3"
+							>
+								<span class="lucide-loader-2 h-4 w-4 animate-spin text-ink-gray-5" aria-hidden="true" />
+								<span class="text-p-sm text-ink-gray-6">{{ __('Loading repositories…') }}</span>
+							</div>
+
+							<template v-else-if="newSpace.github_installation_id">
+								<Autocomplete
+									:label="__('Repository')"
+									remote
+									:options="repoOptions"
+									v-model="newSpace.repo_full_name"
+									:loading="repos.loading"
+									:has-more="repos.hasMore"
+									:placeholder="__('Search repositories…')"
+									@search="(q) => loadRepos({ search: q, reset: true })"
+									@load-more="loadRepos()"
+								/>
+
+								<Autocomplete
+									v-if="newSpace.repo_full_name"
+									allow-custom
+									:label="__('Branch')"
+									:options="branchOptions"
+									v-model="newSpace.branch"
+									:loading="branches.loading"
+									:placeholder="__('main')"
+								/>
+
+								<FormControl
+									v-if="newSpace.branch"
+									type="text"
+									:label="__('Docs folder')"
+									v-model="newSpace.docs_subdir"
+									:placeholder="__('docs')"
+									:description="__('Folder in the repo to sync. Supports nested paths like docs/guide.')"
+								/>
+							</template>
+							<ErrorMessage :message="installationsResource.error || repos.error || branches.error" />
+						</template>
+					</template>
+				</template>
+
+				<ErrorMessage :message="formError || spaces.insert.error" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script setup>
+import Autocomplete from '@/components/Autocomplete.vue';
+import SpaceIdentityPicker from '@/components/SpaceIdentityPicker.vue';
+import {
+	Button,
+	Dialog,
+	ErrorMessage,
+	FormControl,
+	createListResource,
+	createResource,
+	toast,
+} from 'frappe-ui';
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { rollSpaceAvatar } from '@/lib/spaceAvatar.js';
+import { generatedIdentityPatch } from '@/lib/spaceIdentity.js';
+
+const emit = defineEmits(['created']);
+const isOpen = defineModel({ type: Boolean });
+
+const router = useRouter();
+
+const creating = ref(false);
+const routeManuallyEdited = ref(false);
+const formError = ref('');
+
+// The identity fields, held here until the space exists rather than saved as
+// they are picked — the only difference between this picker and the settings
+// panel's.
+const identity = reactive(emptyIdentity());
+
+function emptyIdentity() {
+	return {
+		space_icon: '',
+		space_color: '',
+		avatar: '',
+		avatar_style: '',
+		avatar_seed: '',
+		app_switcher_logo: '',
+	};
+}
+
+function applyIdentity(patch) {
+	Object.assign(identity, patch);
+}
+
+// Rolled on open, not on create: the user sees the mark they are about to get
+// and can shuffle past it. A failed roll leaves the initial, which is what the
+// space would have had anyway.
+watch(isOpen, async (open) => {
+	if (!open || identity.avatar || identity.space_icon) return;
+	try {
+		applyIdentity(generatedIdentityPatch({ avatar: await rollSpaceAvatar() }));
+	} catch (error) {
+		console.error('Could not generate a space mark', error);
+	}
+});
+
+const newSpace = reactive({
+	space_name: '',
+	route: '',
+	git_synced: false,
+	github_installation_id: '',
+	repo_full_name: '',
+	branch: '',
+	docs_subdir: 'docs',
+});
+
+// GitHub App connect + repo picker. The connect-account OAuth round-trip runs
+// in a popup against `/github/authorize`; we poll `is_connected` until the
+// user's token is cached server-side, then list their installations and repos.
+const githubConnected = createResource({ url: 'wiki.api.github.is_connected' });
+const installationsResource = createResource({
+	url: 'wiki.api.github.my_installations',
+	// A single account is the common case — pick it automatically so the form
+	// collapses to repo-first (the account step hides when there's nothing to choose).
+	onSuccess: (data) => {
+		if ((data || []).length === 1) {
+			// Bridge the gap to the first repo page so the spinner stays up instead of
+			// flashing an empty repo field before loadRepos() (via the watch) kicks in.
+			repos.loadedOnce = false;
+			repos.loading = true;
+			newSpace.github_installation_id = String(data[0].id);
+		}
+	},
+});
+const repositoriesResource = createResource({
+	url: 'wiki.api.github.my_repositories',
+});
+const branchesResource = createResource({
+	url: 'wiki.api.github.my_repo_branches',
+});
+const branchExistsResource = createResource({
+	url: 'wiki.api.github.my_branch_exists',
+});
+const appInstallUrl = createResource({
+	url: 'wiki.api.github.app_install_url',
+});
+
+const installationOptions = computed(() =>
+	(installationsResource.data || []).map((i) => ({
+		label: i.account_type ? `${i.account} (${i.account_type})` : i.account,
+		value: String(i.id),
+	})),
+);
+
+// Repos are paged from the server (a search/load-more list, not loaded all at
+// once) so big orgs don't stall the dialog. `loadRepos` accumulates pages and
+// resets when the search term changes.
+const repos = reactive({
+	list: [],
+	page: 1,
+	search: '',
+	hasMore: false,
+	loading: false,
+	loadedOnce: false,
+	error: null,
+});
+
+// Show the big "Loading repositories…" spinner only on the first load for an
+// account — later searches keep the field visible and use its in-dropdown hint.
+const reposInitialLoading = computed(
+	() => !!newSpace.github_installation_id && repos.loading && !repos.loadedOnce,
+);
+
+async function loadRepos({ search, reset = false } = {}) {
+	if (!newSpace.github_installation_id) return;
+	if (search !== undefined) repos.search = search;
+	if (reset) {
+		repos.page = 1;
+		repos.list = [];
+	}
+	repos.loading = true;
+	repos.error = null;
+	try {
+		const res = await repositoriesResource.submit({
+			installation_id: newSpace.github_installation_id,
+			search: repos.search,
+			page: repos.page,
+		});
+		const batch = res?.repositories || [];
+		repos.list = repos.page === 1 ? batch : [...repos.list, ...batch];
+		repos.hasMore = !!res?.has_more;
+		if (repos.hasMore) repos.page += 1;
+	} catch (error) {
+		repos.error = error;
+	} finally {
+		repos.loading = false;
+		repos.loadedOnce = true;
+	}
+}
+
+const repoOptions = computed(() =>
+	repos.list.map((r) => ({
+		label: r.private ? `${r.full_name} 🔒` : r.full_name,
+		value: r.full_name,
+		default_branch: r.default_branch,
+	})),
+);
+
+const branches = reactive({ list: [], loading: false, error: null });
+
+async function loadBranches(fullName) {
+	branches.list = [];
+	if (!fullName) return;
+	branches.loading = true;
+	branches.error = null;
+	try {
+		branches.list =
+			(await branchesResource.submit({ repo_full_name: fullName })) || [];
+	} catch (error) {
+		branches.error = error;
+	} finally {
+		branches.loading = false;
+	}
+}
+
+const branchOptions = computed(() =>
+	branches.list.map((b) => ({ label: b, value: b })),
+);
+
+// When the dialog reveals the Git-sync section, learn whether we're already
+// connected (and if so, load the account list straight away).
+watch(
+	() => newSpace.git_synced,
+	(synced) => {
+		if (synced) {
+			appInstallUrl.fetch();
+			githubConnected.fetch().then(() => {
+				if (githubConnected.data) installationsResource.fetch();
+			});
+		}
+	},
+);
+
+// The App install also happens in a popup; poll installations until the new one
+// appears, then select it — installing on an org is how that org shows up in
+// the picker at all, so landing on it is the point of the trip.
+function installApp() {
+	const url = appInstallUrl.data;
+	if (!url) {
+		appInstallUrl.fetch();
+		return;
+	}
+	const known = new Set(
+		(installationsResource.data || []).map((i) => String(i.id)),
+	);
+	const popup = window.open(
+		url,
+		'github-install',
+		'popup,width=720,height=760',
+	);
+	stopConnectPoll();
+	connectPoll = setInterval(async () => {
+		const closed = popup?.closed;
+		await installationsResource.reload();
+		const added = (installationsResource.data || []).find(
+			(i) => !known.has(String(i.id)),
+		);
+		if (added) {
+			stopConnectPoll();
+			newSpace.github_installation_id = String(added.id);
+			popup?.close();
+			return;
+		}
+		if (closed) stopConnectPoll();
+	}, 1500);
+}
+
+let connectPoll = null;
+function stopConnectPoll() {
+	if (connectPoll) {
+		clearInterval(connectPoll);
+		connectPoll = null;
+	}
+}
+
+// The dialog now unmounts with whatever opened it, so the poll has to be torn
+// down here rather than relying on a page that outlived it.
+onBeforeUnmount(stopConnectPoll);
+
+function connectGithub() {
+	const popup = window.open(
+		'/github/authorize',
+		'github-connect',
+		'popup,width=720,height=760',
+	);
+	githubConnected.loading = true;
+	stopConnectPoll();
+	connectPoll = setInterval(async () => {
+		if (popup?.closed && !githubConnected.data) {
+			stopConnectPoll();
+			githubConnected.loading = false;
+			return;
+		}
+		await githubConnected.reload();
+		if (githubConnected.data) {
+			stopConnectPoll();
+			popup?.close();
+			installationsResource.fetch();
+		}
+	}, 1500);
+}
+
+// Picking an account resets the downstream choices and loads its first repo page.
+watch(
+	() => newSpace.github_installation_id,
+	(installationId) => {
+		newSpace.repo_full_name = '';
+		newSpace.branch = '';
+		repos.loadedOnce = false;
+		if (installationId) loadRepos({ search: '', reset: true });
+	},
+);
+
+// Picking a repo defaults the branch to that repo's default branch and loads
+// the rest of its branches for the selector.
+watch(
+	() => newSpace.repo_full_name,
+	(fullName) => {
+		const repo = repoOptions.value.find((r) => r.value === fullName);
+		newSpace.branch = repo?.default_branch || '';
+		loadBranches(fullName);
+		if (fullName) formError.value = '';
+	},
+);
+
+function slugify(text) {
+	return text
+		.toLowerCase()
+		.trim()
+		.replace(/[^\w\s-]/g, '')
+		.replace(/[\s_-]+/g, '-')
+		.replace(/^-+|-+$/g, '');
+}
+
+watch(
+	() => newSpace.space_name,
+	(newName) => {
+		if (!routeManuallyEdited.value) {
+			newSpace.route = slugify(newName);
+		}
+	},
+);
+
+function handleRouteInput(value) {
+	if (value !== slugify(newSpace.space_name)) {
+		routeManuallyEdited.value = true;
+	}
+	newSpace.route = value;
+	if (value) formError.value = '';
+}
+
+// Insert-only: the dialog never lists spaces, it just needs the doctype's
+// insert. Whoever opened it refreshes their own list off `created`.
+const spaces = createListResource({
+	doctype: 'Wiki Space',
+	auto: false,
+	insert: {
+		onSuccess: (doc) => {
+			isOpen.value = false;
+			resetForm();
+			toast.success(
+				__('Wiki Space "{0}" created successfully.', [doc.space_name]),
+			);
+			emit('created', doc);
+			// Synced spaces kick off their first sync automatically on the space
+			// detail page (see SpaceDetails), so just navigate there.
+			router.push({ name: 'SpaceDetails', params: { spaceId: doc.name } });
+		},
+	},
+});
+
+function resetForm() {
+	Object.assign(identity, emptyIdentity());
+	newSpace.space_name = '';
+	newSpace.route = '';
+	newSpace.git_synced = false;
+	newSpace.github_installation_id = '';
+	newSpace.repo_full_name = '';
+	newSpace.branch = '';
+	newSpace.docs_subdir = 'docs';
+	repos.list = [];
+	repos.loadedOnce = false;
+	branches.list = [];
+	formError.value = '';
+	routeManuallyEdited.value = false;
+}
+
+// The branch field takes free text, so the name is only known to be real once
+// GitHub says so — check it here rather than letting the first sync fail.
+async function branchIsValid(repoFullName, branch) {
+	try {
+		return await branchExistsResource.submit({
+			repo_full_name: repoFullName,
+			branch,
+		});
+	} catch (error) {
+		formError.value =
+			error?.messages?.[0] ||
+			error?.message ||
+			__('Could not verify the branch on GitHub.');
+		return false;
+	}
+}
+
+const handleCreateSpace = async () => {
+	// Surface validation through the dialog's ErrorMessage rather than a rejected
+	// promise (which only ends up in the console). The dialog stays open either
+	// way — it closes only on insert success.
+	formError.value = '';
+	if (!newSpace.route) {
+		formError.value = __('Route is required.');
+		return;
+	}
+	if (newSpace.git_synced && !newSpace.repo_full_name.trim()) {
+		formError.value = __('Please pick a GitHub repository');
+		return;
+	}
+	if (newSpace.git_synced && !newSpace.branch.trim()) {
+		formError.value = __('Please pick or enter a branch');
+		return;
+	}
+
+	const payload = {
+		...identity,
+		space_name: newSpace.space_name,
+		route: newSpace.route,
+		// New spaces are published by default, so start them as public read.
+		// Guest covers everyone (anonymous + logged-in); admins can refine this
+		// in Space Settings → Permissions.
+		roles: [{ role: 'Guest', permission_level: 'Read' }],
+	};
+
+	if (newSpace.git_synced) {
+		payload.git_synced = 1;
+		payload.repo_full_name = newSpace.repo_full_name.trim();
+		payload.branch = newSpace.branch.trim();
+		if (newSpace.docs_subdir.trim()) {
+			payload.docs_subdir = newSpace.docs_subdir.trim();
+		}
+		if (newSpace.github_installation_id) {
+			payload.github_installation_id = newSpace.github_installation_id;
+		}
+	}
+
+	creating.value = true;
+	try {
+		if (payload.git_synced) {
+			const valid = await branchIsValid(payload.repo_full_name, payload.branch);
+			if (!valid) {
+				if (!formError.value) {
+					formError.value = __('Branch "{0}" does not exist in {1}.', [
+						payload.branch,
+						payload.repo_full_name,
+					]);
+				}
+				return;
+			}
+		}
+		return await spaces.insert.submit(payload);
+	} finally {
+		creating.value = false;
+	}
+};
+</script>
diff --git a/frontend/src/components/PageSettings.vue b/frontend/src/components/PageSettings.vue
deleted file mode 100644
index 30c591ee0..000000000
--- a/frontend/src/components/PageSettings.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
-	<Dialog v-model:open="show" size="2xl">
-		<template #title>
-			<h3 class="text-2xl-semibold text-ink-gray-9">
-				{{ __('Page Settings') }}
-			</h3>
-		</template>
-		<template #default>
-			<div class="flex flex-col gap-5 sm:flex-row">
-				<div class="flex flex-1 flex-col gap-4">
-					<FormControl
-						type="text"
-						:label="__('Meta Title')"
-						v-model="metaTitle"
-						:placeholder="currentTitle"
-						:description="__('Leave empty to use the page title')"
-					/>
-					<FormControl
-						type="textarea"
-						:label="__('Meta Description')"
-						v-model="metaDescription"
-						:placeholder="__('A short summary shown in search results and link previews')"
-						:rows="3"
-						:description="descriptionHint"
-					/>
-					<div class="flex flex-col gap-1.5">
-						<label class="text-sm text-ink-gray-5">
-							{{ __('Meta Image') }}
-						</label>
-						<div
-							v-if="metaImage"
-							class="group relative overflow-hidden rounded-md border border-outline-gray-2"
-						>
-							<img :src="metaImage" alt="" class="h-32 w-full object-cover" />
-							<div
-								class="absolute inset-0 flex items-center justify-center gap-2 bg-black-overlay-400 opacity-0 transition-opacity group-hover:opacity-100"
-							>
-								<span
-									v-if="isUploadingImage"
-									class="lucide-loader-2 h-5 w-5 animate-spin text-white" aria-hidden="true" />
-								<template v-else>
-									<Button size="sm" variant="solid" @click="pickImage">
-										{{ __('Replace') }}
-									</Button>
-									<Button
-										size="sm"
-										variant="subtle"
-										theme="red"
-										@click="removeImage"
-									>
-										{{ __('Remove') }}
-									</Button>
-								</template>
-							</div>
-						</div>
-						<button
-							v-else
-							type="button"
-							class="flex flex-col items-center justify-center gap-1.5 rounded-md border border-dashed border-outline-gray-3 bg-surface-gray-1 py-6 text-sm text-ink-gray-5 hover:bg-surface-gray-2"
-							:disabled="isUploadingImage"
-							@click="pickImage"
-						>
-							<span
-								v-if="isUploadingImage"
-								class="lucide-loader-2 h-5 w-5 animate-spin" aria-hidden="true" />
-							<span v-else class="lucide-image-plus h-5 w-5" aria-hidden="true" />
-							<span>{{ isUploadingImage ? __('Uploading...') : __('Upload image') }}</span>
-						</button>
-						<p class="text-xs text-ink-gray-4">
-							{{ __('Recommended size: 1200×630px') }}
-						</p>
-						<input
-							ref="imageInput"
-							type="file"
-							accept="image/*"
-							class="hidden"
-							@change="handleImageChange"
-						/>
-					</div>
-				</div>
-				<div class="flex w-full flex-shrink-0 flex-col gap-2 sm:w-56">
-					<span class="text-sm text-ink-gray-5">{{ __('Social Preview') }}</span>
-					<div
-						class="flex flex-col self-start w-full overflow-hidden rounded-md border border-outline-gray-2"
-					>
-						<div
-							class="relative flex h-28 w-full flex-shrink-0 items-center justify-center bg-surface-gray-2"
-						>
-							<img
-								v-if="previewImage"
-								:src="previewImage"
-								alt=""
-								class="h-full w-full object-cover"
-								:class="{ 'opacity-0': previewImageLoading }"
-								@load="previewImageLoading = false"
-								@error="previewImageFailed = true"
-							/>
-							<span
-								v-else
-								class="lucide-image h-7 w-7 text-ink-gray-3"
-								aria-hidden="true"
-							/>
-							<!-- A cold card takes a Chromium launch to render, so the
-							     placeholder icon would otherwise sit there looking like
-							     "no image" for seconds. -->
-							<div
-								v-if="previewImage && previewImageLoading"
-								class="absolute inset-0 animate-pulse bg-surface-gray-3"
-							/>
-						</div>
-						<div class="flex flex-col gap-1 border-t border-outline-gray-2 p-3">
-							<span class="truncate text-xs text-ink-gray-4">
-								{{ previewRoute }}
-							</span>
-							<span class="line-clamp-1 text-sm-medium text-ink-gray-9">
-								{{ previewTitle }}
-							</span>
-							<span
-								v-if="previewDescription"
-								class="line-clamp-3 text-xs leading-4 text-ink-gray-6"
-							>
-								{{ previewDescription }}
-							</span>
-							<span v-else class="text-xs italic leading-4 text-ink-gray-3">
-								{{ __('No description set') }}
-							</span>
-						</div>
-					</div>
-					<p v-if="isGeneratedPreview" class="text-xs text-ink-gray-4">
-						{{ __('Auto-generated from the page metadata. Upload an image to override it.') }}
-					</p>
-				</div>
-			</div>
-		</template>
-		<template #actions="{ close }">
-			<div class="flex justify-end gap-2">
-				<Button variant="outline" @click="close">
-					{{ __('Cancel') }}
-				</Button>
-				<Button
-					variant="solid"
-					:disabled="!isDirty || docResource.setValue.loading"
-					:loading="docResource.setValue.loading"
-					@click="saveSettings"
-				>
-					{{ __('Save') }}
-				</Button>
-			</div>
-		</template>
-	</Dialog>
-</template>
-
-<script setup>
-import { Button, Dialog, FormControl, toast, useFileUpload } from 'frappe-ui';
-import { computed, ref, watch } from 'vue';
-
-const props = defineProps({
-	// The document resource from createDocumentResource({ doctype: 'Wiki
-	// Document', name }) — already loaded by WikiDocumentPanel, reused here
-	// so opening Page Settings doesn't trigger a second fetch of the doc.
-	docResource: {
-		type: Object,
-		required: true,
-	},
-});
-
-const show = defineModel({ type: Boolean, default: false });
-
-const metaTitle = ref('');
-const metaDescription = ref('');
-const metaImage = ref('');
-const isUploadingImage = ref(false);
-const imageInput = ref(null);
-
-const fileUploader = useFileUpload();
-
-const currentTitle = computed(() => props.docResource.doc?.title || '');
-
-const descriptionHint = computed(() => {
-	return __('Recommended: 150-160 characters ({0} so far)', [
-		metaDescription.value.length,
-	]);
-});
-
-const previewRoute = computed(() => props.docResource.doc?.route || '');
-const previewTitle = computed(() => metaTitle.value || currentTitle.value);
-const previewDescription = computed(() => metaDescription.value);
-
-// With no uploaded image the page still ships an og:image — the generated card
-// from wiki/api/og_image.py. Preview the real endpoint rather than a mock, so
-// what this box shows is literally what a scraper will fetch. The endpoint 404s
-// for every case that emits no card (setting off, unpublished, group, external
-// link, no space, render failure), which is what the @error fallback catches —
-// no need to duplicate those conditions here.
-// Bumped on each successful save. `v` is ignored server-side (the endpoint
-// always recomputes the fingerprint) and exists only to force the browser to
-// refetch — the img otherwise keeps whatever bytes it got, and a request that
-// raced the save would leave a stale card on screen for the rest of the
-// session. Bumping per *save* rather than per keystroke keeps it to one extra
-// render, instead of launching Chromium on every character typed.
-const previewVersion = ref(0);
-
-const generatedPreview = computed(() => {
-	const doc = props.docResource.doc;
-	if (!doc?.route) return '';
-	return `/api/method/wiki.api.og_image.og_image?route=${encodeURIComponent(
-		doc.route,
-	)}&v=${previewVersion.value}`;
-});
-
-const previewImageFailed = ref(false);
-const previewImageLoading = ref(true);
-const previewImage = computed(() => {
-	if (metaImage.value) return metaImage.value;
-	return previewImageFailed.value ? '' : generatedPreview.value;
-});
-
-// Every new URL is a fresh load, so the skeleton comes back until it decodes.
-watch(previewImage, (url) => {
-	previewImageLoading.value = Boolean(url);
-});
-const isGeneratedPreview = computed(
-	() => !metaImage.value && Boolean(previewImage.value),
-);
-
-const isDirty = computed(() => {
-	const doc = props.docResource.doc;
-	if (!doc) return false;
-	return (
-		metaTitle.value !== (doc.meta_title || '') ||
-		metaDescription.value !== (doc.meta_description || '') ||
-		metaImage.value !== (doc.meta_image || '')
-	);
-});
-
-// Reset form from the doc every time the dialog opens, so stale edits from a
-// cancelled session never leak into the next open.
-watch(show, (isOpen) => {
-	if (!isOpen) return;
-	const doc = props.docResource.doc;
-	metaTitle.value = doc?.meta_title || '';
-	metaDescription.value = doc?.meta_description || '';
-	metaImage.value = doc?.meta_image || '';
-	// Retry the generated card on each open; a render that failed once (cold
-	// Chromium, another worker holding the lock) usually succeeds next time.
-	previewImageFailed.value = false;
-	previewImageLoading.value = true;
-});
-
-function pickImage() {
-	imageInput.value?.click();
-}
-
-function removeImage() {
-	metaImage.value = '';
-}
-
-async function handleImageChange(event) {
-	const file = event.target.files?.[0];
-	// Reset the input so re-selecting the same file still fires `change`.
-	event.target.value = '';
-	if (!file) return;
-
-	isUploadingImage.value = true;
-	try {
-		const result = await fileUploader.upload(file, {
-			private: false,
-			// Hit our handler directly (not via upload_file's `method`
-			// delegation, which would recurse). It converts PNG/JPEG to WebP
-			// when the Wiki Setting is enabled, returning the optimized
-			// file_url.
-			upload_endpoint: '/api/method/wiki.api.upload_wiki_asset',
-		});
-		metaImage.value = result.file_url;
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Failed to upload image'));
-	} finally {
-		isUploadingImage.value = false;
-	}
-}
-
-async function saveSettings() {
-	try {
-		await props.docResource.setValue.submit({
-			meta_title: metaTitle.value,
-			meta_description: metaDescription.value,
-			meta_image: metaImage.value,
-		});
-		toast.success(__('Page settings saved'));
-		// Retry a preview that failed before this save fixed its inputs.
-		previewImageFailed.value = false;
-		previewVersion.value += 1;
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Error saving page settings'));
-	}
-}
-</script>
diff --git a/frontend/src/components/PageSettingsPanel.vue b/frontend/src/components/PageSettingsPanel.vue
new file mode 100644
index 000000000..4f09131e4
--- /dev/null
+++ b/frontend/src/components/PageSettingsPanel.vue
@@ -0,0 +1,495 @@
+<template>
+	<!-- The page's own settings, alongside the page rather than on top of it:
+	     the fields here describe what is on screen, and the social preview is
+	     worth watching while the meta fields change. -->
+	<aside
+		class="flex h-full w-[352px] shrink-0 flex-col border-l border-outline-gray-2"
+		data-testid="page-settings-panel"
+	>
+		<div
+			class="flex h-12 shrink-0 items-center justify-between gap-2 border-b border-outline-gray-2 px-3"
+		>
+			<span class="truncate text-base-medium text-ink-gray-8">
+				{{ __('Page settings') }}
+			</span>
+			<Button
+				variant="ghost"
+				:title="__('Close page settings')"
+				:aria-label="__('Close page settings')"
+				@click="emit('close')"
+			>
+				<span class="lucide-x size-4" aria-hidden="true" />
+			</Button>
+		</div>
+
+		<ScrollArea class="min-h-0 flex-1" viewport-class="p-3">
+			<div class="flex flex-col gap-6">
+				<!-- On a git-synced page the repo owns the title, the slug, the
+				     route and whether the page ships: the next sync rewrites
+				     anything typed here. The social preview below is wiki-side
+				     data the repo never carries, so it stays editable. -->
+				<section class="flex flex-col gap-3">
+					<div class="flex items-baseline justify-between gap-2">
+						<h4 class="text-xs text-ink-gray-5">{{ __('General') }}</h4>
+						<Badge v-if="readonly" variant="subtle" theme="gray" size="sm">
+							{{ __('From the repo') }}
+						</Badge>
+					</div>
+					<FormControl
+						v-model="form.title"
+						type="text"
+						:label="__('Title')"
+						:placeholder="__('Untitled')"
+						:disabled="readonly"
+					/>
+					<FormControl
+						v-model="form.slug"
+						type="text"
+						:label="__('Slug')"
+						:placeholder="__('page-slug')"
+						:disabled="readonly"
+					/>
+					<FormControl
+						v-model="form.route"
+						type="text"
+						:label="__('Route')"
+						:placeholder="__('space/section/page')"
+						:description="publicUrl"
+						:disabled="readonly"
+					/>
+					<div class="flex items-center justify-between gap-3">
+						<div class="flex flex-col">
+							<span class="text-sm text-ink-gray-7">{{ __('Published') }}</span>
+							<span class="text-xs text-ink-gray-5">
+								{{ __('Visible on the public site') }}
+							</span>
+						</div>
+						<Switch v-model="form.isPublished" :disabled="readonly" />
+					</div>
+				</section>
+
+				<section class="flex flex-col gap-3">
+					<h4 class="text-xs text-ink-gray-5">{{ __('Social preview') }}</h4>
+					<FormControl
+						v-model="form.metaTitle"
+						type="text"
+						:label="__('Meta title')"
+						:placeholder="title"
+						:description="__('Leave empty to use the page title')"
+					/>
+					<FormControl
+						v-model="form.metaDescription"
+						type="textarea"
+						:label="__('Meta description')"
+						:rows="3"
+						:placeholder="__('A short summary shown in search results and link previews')"
+						:description="descriptionHint"
+					/>
+					<div class="flex flex-col gap-1.5">
+						<label class="text-sm text-ink-gray-5">{{ __('Meta image') }}</label>
+						<div
+							v-if="form.metaImage"
+							class="group relative overflow-hidden rounded-5 border border-outline-gray-2"
+						>
+							<img :src="form.metaImage" alt="" class="aspect-[1200/630] w-full object-cover" />
+							<div
+								class="absolute inset-0 flex items-center justify-center gap-2 bg-black-overlay-400 opacity-0 transition-opacity group-hover:opacity-100"
+							>
+								<span
+									v-if="isUploadingImage"
+									class="lucide-loader-2 size-5 animate-spin text-white"
+									aria-hidden="true"
+								/>
+								<template v-else>
+									<Button size="sm" variant="solid" @click="pickImage">
+										{{ __('Replace') }}
+									</Button>
+									<Button size="sm" variant="subtle" theme="red" @click="removeImage">
+										{{ __('Remove') }}
+									</Button>
+								</template>
+							</div>
+						</div>
+						<button
+							v-else
+							type="button"
+							class="flex aspect-[1200/630] w-full flex-col items-center justify-center gap-1.5 rounded-5 border border-dashed border-outline-gray-3 bg-surface-gray-1 text-sm text-ink-gray-5 hover:bg-surface-gray-2"
+							:disabled="isUploadingImage"
+							@click="pickImage"
+						>
+							<span
+								v-if="isUploadingImage"
+								class="lucide-loader-2 size-5 animate-spin"
+								aria-hidden="true"
+							/>
+							<span v-else class="lucide-image-plus size-5" aria-hidden="true" />
+							<span>
+								{{ isUploadingImage ? __('Uploading...') : __('Upload image') }}
+							</span>
+							<span class="text-xs text-ink-gray-4">
+								{{ __('Recommended 1200×630') }}
+							</span>
+						</button>
+						<input
+							ref="imageInput"
+							type="file"
+							accept="image/*"
+							class="hidden"
+							@change="handleImageChange"
+						/>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<span class="text-sm text-ink-gray-5">{{ __('Preview') }}</span>
+						<div class="flex flex-col overflow-hidden rounded-5 border border-outline-gray-2">
+							<div
+								class="relative flex aspect-[1200/630] w-full shrink-0 items-center justify-center bg-surface-gray-2"
+							>
+								<img
+									v-if="previewImage"
+									:src="previewImage"
+									alt=""
+									class="h-full w-full object-cover"
+									:class="{ 'opacity-0': previewImageLoading }"
+									@load="previewImageLoading = false"
+									@error="previewImageFailed = true"
+								/>
+								<span v-else class="lucide-image size-7 text-ink-gray-3" aria-hidden="true" />
+								<!-- A cold card takes a Chromium launch to render, so the
+								     placeholder icon would otherwise sit there looking like
+								     "no image" for seconds. -->
+								<div
+									v-if="previewImage && previewImageLoading"
+									class="absolute inset-0 animate-pulse bg-surface-gray-3"
+								/>
+							</div>
+							<div class="flex flex-col gap-1 border-t border-outline-gray-2 p-3">
+								<span class="truncate text-xs text-ink-gray-4">{{ route }}</span>
+								<span class="line-clamp-1 text-sm-medium text-ink-gray-9">
+									{{ form.metaTitle || title }}
+								</span>
+								<span
+									v-if="form.metaDescription"
+									class="line-clamp-3 text-xs leading-4 text-ink-gray-6"
+								>
+									{{ form.metaDescription }}
+								</span>
+								<span v-else class="text-xs italic leading-4 text-ink-gray-3">
+									{{ __('No description set') }}
+								</span>
+							</div>
+						</div>
+						<p v-if="isGeneratedPreview" class="text-xs text-ink-gray-4">
+							{{ __('Auto-generated from the page metadata. Upload an image to override it.') }}
+						</p>
+					</div>
+				</section>
+
+				<section class="flex flex-col gap-2">
+					<h4 class="text-xs text-ink-gray-5">{{ __('Details') }}</h4>
+					<dl class="flex flex-col gap-2 text-sm">
+						<div class="flex justify-between gap-3">
+							<dt class="text-ink-gray-6">{{ __('Words') }}</dt>
+							<dd class="text-ink-gray-8">{{ words }}</dd>
+						</div>
+						<div class="flex justify-between gap-3">
+							<dt class="text-ink-gray-6">{{ __('Reading time') }}</dt>
+							<dd class="text-ink-gray-8">
+								{{ __('{0} min', [readingTime]) }}
+							</dd>
+						</div>
+						<div v-if="lastEdited" class="flex justify-between gap-3">
+							<dt class="text-ink-gray-6">{{ __('Last edited') }}</dt>
+							<dd class="text-ink-gray-8">{{ lastEdited }}</dd>
+						</div>
+						<div v-if="lastEditedBy" class="flex min-w-0 justify-between gap-3">
+							<dt class="shrink-0 text-ink-gray-6">{{ __('Edited by') }}</dt>
+							<dd class="truncate text-ink-gray-8">{{ lastEditedBy }}</dd>
+						</div>
+					</dl>
+				</section>
+			</div>
+		</ScrollArea>
+
+		<div class="shrink-0 border-t border-outline-gray-2 p-3">
+			<Button
+				class="w-full"
+				variant="solid"
+				:disabled="!isDirty || isSaving"
+				:loading="isSaving"
+				@click="save"
+			>
+				{{ __('Save') }}
+			</Button>
+		</div>
+	</aside>
+</template>
+
+<script setup>
+import { countWords, readingMinutes } from '@/lib/readingStats';
+import { useDraftWorkspaceStore } from '@/stores/draftWorkspace';
+import {
+	Badge,
+	Button,
+	FormControl,
+	ScrollArea,
+	Switch,
+	dayjsLocal,
+	toast,
+	useFileUpload,
+} from 'frappe-ui';
+import { computed, reactive, ref, watch } from 'vue';
+
+const props = defineProps({
+	// The document resource WikiDocumentPanel already loaded. Meta fields are
+	// written straight to the document (they carry no reader-visible content,
+	// so they don't travel through a change request); the rest of the fields
+	// go through the draft workspace.
+	docResource: {
+		type: Object,
+		required: true,
+	},
+	docKey: {
+		type: String,
+		default: null,
+	},
+	// A git-synced page: the repo owns everything the change request would
+	// carry, so only the meta fields are the wiki's to write.
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
+	// The effective values for the open page: the draft's, where it has one.
+	title: {
+		type: String,
+		default: '',
+	},
+	slug: {
+		type: String,
+		default: '',
+	},
+	route: {
+		type: String,
+		default: '',
+	},
+	published: {
+		type: Boolean,
+		default: false,
+	},
+	// The editor's buffer, so the counts track what is on screen.
+	content: {
+		type: String,
+		default: '',
+	},
+});
+
+const emit = defineEmits(['close', 'node-updated']);
+
+const draftStore = useDraftWorkspaceStore();
+const fileUploader = useFileUpload();
+
+const isSaving = ref(false);
+const isUploadingImage = ref(false);
+const imageInput = ref(null);
+
+const form = reactive({
+	title: '',
+	slug: '',
+	route: '',
+	isPublished: false,
+	metaTitle: '',
+	metaDescription: '',
+	metaImage: '',
+});
+
+// The saved values every field is measured against — the panel is a form, not
+// a set of live controls, so nothing lands until Save.
+const saved = computed(() => ({
+	title: props.title || '',
+	slug: props.slug || '',
+	route: props.route || '',
+	isPublished: Boolean(props.published),
+	metaTitle: props.docResource.doc?.meta_title || '',
+	metaDescription: props.docResource.doc?.meta_description || '',
+	metaImage: props.docResource.doc?.meta_image || '',
+}));
+
+// The title is also edited in the prose column, and the tree renames pages
+// behind the panel's back. Adopt an outside change only for a field the user
+// has not touched: a field that already diverges from the old saved value is
+// theirs until they save or the page changes.
+watch(
+	saved,
+	(next, previous) => {
+		for (const [field, value] of Object.entries(next)) {
+			if (!previous || form[field] === previous[field]) form[field] = value;
+		}
+	},
+	{ immediate: true },
+);
+
+const META_FIELDS = ['metaTitle', 'metaDescription', 'metaImage'];
+
+const isDirty = computed(() =>
+	Object.entries(saved.value).some(
+		([field, value]) =>
+			(!props.readonly || META_FIELDS.includes(field)) && form[field] !== value,
+	),
+);
+
+const publicUrl = computed(() =>
+	form.route ? `${window.location.origin}/${form.route}` : '',
+);
+
+const descriptionHint = computed(() =>
+	__('Recommended: 150-160 characters ({0} so far)', [
+		form.metaDescription.length,
+	]),
+);
+
+const words = computed(() => countWords(props.content));
+const readingTime = computed(() => readingMinutes(words.value));
+
+const lastEdited = computed(() => {
+	const modified = props.docResource.doc?.modified;
+	return modified ? dayjsLocal(modified).fromNow() : '';
+});
+const lastEditedBy = computed(() => props.docResource.doc?.modified_by || '');
+
+// With no uploaded image the page still ships an og:image — the generated card
+// from wiki/api/og_image.py. Preview the real endpoint rather than a mock, so
+// what this box shows is literally what a scraper will fetch. The endpoint 404s
+// for every case that emits no card (setting off, unpublished, group, external
+// link, no space, render failure), which is what the @error fallback catches.
+// `v` is ignored server-side and exists only to force a refetch after a save
+// that changed the card's inputs — bumping per save rather than per keystroke
+// keeps it to one extra render instead of one per character typed.
+const previewVersion = ref(0);
+const previewImageFailed = ref(false);
+const previewImageLoading = ref(true);
+
+const generatedPreview = computed(() => {
+	const route = props.docResource.doc?.route;
+	if (!route) return '';
+	return `/api/method/wiki.api.og_image.og_image?route=${encodeURIComponent(
+		route,
+	)}&v=${previewVersion.value}`;
+});
+
+const previewImage = computed(() => {
+	if (form.metaImage) return form.metaImage;
+	return previewImageFailed.value ? '' : generatedPreview.value;
+});
+
+// Every new URL is a fresh load, so the skeleton comes back until it decodes.
+watch(previewImage, (url) => {
+	previewImageLoading.value = Boolean(url);
+});
+
+const isGeneratedPreview = computed(
+	() => !form.metaImage && Boolean(previewImage.value),
+);
+
+// A page switch discards whatever was typed: the fields describe a page, and
+// carrying them across would rename the one you just opened. Declared after
+// the `saved` watcher so it wins the same flush.
+watch(
+	() => props.docKey,
+	() => {
+		Object.assign(form, saved.value);
+		previewImageFailed.value = false;
+		previewImageLoading.value = true;
+	},
+);
+
+function pickImage() {
+	imageInput.value?.click();
+}
+
+function removeImage() {
+	form.metaImage = '';
+}
+
+async function handleImageChange(event) {
+	const file = event.target.files?.[0];
+	// Reset the input so re-selecting the same file still fires `change`.
+	event.target.value = '';
+	if (!file) return;
+
+	isUploadingImage.value = true;
+	try {
+		const result = await fileUploader.upload(file, {
+			private: false,
+			// Hit our handler directly (not via upload_file's `method`
+			// delegation, which would recurse). It converts PNG/JPEG to WebP
+			// when the Wiki Setting is enabled, returning the optimized
+			// file_url.
+			upload_endpoint: '/api/method/wiki.api.upload_wiki_asset',
+		});
+		form.metaImage = result.file_url;
+	} catch (error) {
+		toast.error(error.messages?.[0] || __('Failed to upload image'));
+	} finally {
+		isUploadingImage.value = false;
+	}
+}
+
+// The identifying fields are only ever changed, never cleared: an empty title
+// or route would leave the page unreachable, and the backend would take it.
+function nodeChanges() {
+	const changes = {};
+	// The repo is the source for all of these; a change request cannot carry
+	// them, and the panel's inputs are disabled anyway.
+	if (props.readonly) return changes;
+	const current = saved.value;
+	if (form.title.trim() && form.title !== current.title) {
+		changes.title = form.title.trim();
+	}
+	if (form.slug.trim() && form.slug !== current.slug) {
+		changes.slug = form.slug.trim();
+	}
+	const route = form.route.trim().replace(/^\/+/, '');
+	if (route && route !== current.route) changes.route = route;
+	if (form.isPublished !== current.isPublished) {
+		changes.is_published = form.isPublished ? 1 : 0;
+	}
+	return changes;
+}
+
+function metaChanges() {
+	const changes = {};
+	const current = saved.value;
+	if (form.metaTitle !== current.metaTitle) changes.meta_title = form.metaTitle;
+	if (form.metaDescription !== current.metaDescription) {
+		changes.meta_description = form.metaDescription;
+	}
+	if (form.metaImage !== current.metaImage) changes.meta_image = form.metaImage;
+	return changes;
+}
+
+async function save() {
+	const node = nodeChanges();
+	const meta = metaChanges();
+	isSaving.value = true;
+	try {
+		if (Object.keys(node).length) {
+			if (!props.docKey) throw new Error(__('No active change request'));
+			await draftStore.updateNode(props.docKey, node);
+			emit('node-updated');
+		}
+		if (Object.keys(meta).length) {
+			await props.docResource.setValue.submit(meta);
+		}
+		toast.success(__('Page settings saved'));
+		// Retry a preview that failed before this save fixed its inputs.
+		previewImageFailed.value = false;
+		previewVersion.value += 1;
+	} catch (error) {
+		toast.error(
+			error.messages?.[0] || error.message || __('Error saving page settings'),
+		);
+	} finally {
+		isSaving.value = false;
+	}
+}
+</script>
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
deleted file mode 100644
index e378c971b..000000000
--- a/frontend/src/components/Sidebar.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-	<Sidebar v-model:collapsed="isSidebarCollapsed">
-		<div class="flex h-full flex-col p-2">
-			<SidebarHeader
-				:title="__('Frappe Wiki')"
-				:subtitle="userStore.data?.full_name"
-				logo="/assets/wiki/images/wiki-logo.png"
-				:menu-items="headerMenuItems"
-			/>
-			<nav class="mt-2 flex flex-1 flex-col gap-0.5 overflow-y-auto">
-				<SidebarItem
-					v-for="item in navItems"
-					:key="item.label"
-					:label="item.label"
-					:icon="item.icon"
-					:to="item.to"
-					:active="route.path.startsWith(router.resolve(item.to).path)"
-				/>
-			</nav>
-			<SidebarCollapseToggle class="mt-auto" />
-		</div>
-	</Sidebar>
-</template>
-
-<script setup>
-import {
-	Sidebar,
-	SidebarCollapseToggle,
-	SidebarHeader,
-	SidebarItem,
-} from 'frappe-ui';
-
-import { useSessionStore } from '@/stores/session';
-import { useUserStore } from '@/stores/user';
-import { useStorage } from '@vueuse/core';
-import { computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useTheme } from '../composables/useTheme';
-import { useWikiSettings } from '../composables/useWikiSettings';
-
-const route = useRoute();
-const router = useRouter();
-const sessionStore = useSessionStore();
-const userStore = useUserStore();
-const { open: openWikiSettings } = useWikiSettings();
-
-const { themeIcon, toggleTheme } = useTheme();
-
-const isSidebarCollapsed = useStorage('is-sidebar-collapsed', false);
-
-const headerMenuItems = computed(() => [
-	...(userStore.isWikiManager
-		? [
-				{
-					label: __('Settings'),
-					icon: 'lucide-settings',
-					onClick: () => openWikiSettings(),
-				},
-			]
-		: []),
-	{ label: __('Toggle Theme'), icon: themeIcon.value, onClick: toggleTheme },
-	{ label: __('Log out'), icon: 'lucide-log-out', onClick: logout },
-]);
-
-const navItems = [
-	{ label: __('Spaces'), icon: 'lucide-rocket', to: { name: 'SpaceList' } },
-	{
-		label: __('Change Requests'),
-		icon: 'lucide-git-branch',
-		to: { name: 'ChangeRequests' },
-	},
-];
-
-function logout() {
-	sessionStore.logout.submit();
-}
-</script>
diff --git a/frontend/src/components/SpaceAvatar.vue b/frontend/src/components/SpaceAvatar.vue
new file mode 100644
index 000000000..22ebad7c8
--- /dev/null
+++ b/frontend/src/components/SpaceAvatar.vue
@@ -0,0 +1,41 @@
+<template>
+	<!-- One Avatar, three identities. frappe-ui draws `image` when it has one
+	     and the default slot when it does not, so the icon is both the
+	     no-image case and the fallback if a stored data URI ever fails to
+	     decode — a space is never left as an empty tile.
+	     The branch is real, not a `v-if` inside one Avatar: Vue hands a child
+	     a default slot function whether or not it renders anything, and
+	     Avatar's `$slots.default` check would then swallow the initial. -->
+	<Avatar v-if="identity.icon" v-bind="avatarProps">
+		<span :class="[identity.icon, 'size-full']" aria-hidden="true" />
+	</Avatar>
+	<Avatar v-else v-bind="avatarProps" />
+</template>
+
+<script setup>
+import { Avatar } from 'frappe-ui';
+import { computed } from 'vue';
+
+import { resolveSpaceIdentity } from '../lib/spaceIdentity.js';
+
+const props = defineProps({
+	// The space row or document: `name`, `space_icon`, `space_color`, `avatar`
+	// and `app_switcher_logo`. Flat rather than a document resource so the
+	// sidebar and overview lists, which carry these as plain fields, can pass
+	// what they already fetched.
+	space: { type: Object, default: () => ({}) },
+	label: { type: String, default: '' },
+	// Avatar sizes the slot wrapper per size, so the glyph just fills it.
+	size: { type: String, default: 'sm' },
+});
+
+const identity = computed(() => resolveSpaceIdentity(props.space));
+
+const avatarProps = computed(() => ({
+	size: props.size,
+	shape: 'square',
+	theme: identity.value.color,
+	image: identity.value.image || undefined,
+	label: props.label,
+}));
+</script>
diff --git a/frontend/src/components/SpaceChromeBar.vue b/frontend/src/components/SpaceChromeBar.vue
deleted file mode 100644
index 18b23de4d..000000000
--- a/frontend/src/components/SpaceChromeBar.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-	<!-- Full-width chrome bar above the tab row: space identity (back + name +
-	     view/settings) on the left, contextual actions on the right. Shared by
-	     the change-request banner and the git-sync banner so both surfaces get
-	     the same layout. -->
-	<div
-		class="min-h-10 px-2 py-1 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
-		:class="barClass"
-	>
-		<div class="flex items-center gap-1 min-w-0">
-			<Button
-				class="-ml-2"
-				variant="ghost"
-				icon="arrow-left"
-				:title="__('Back to Spaces')"
-				:route="{ name: 'SpaceList' }"
-			/>
-			<div class="min-w-0 px-1 flex items-center gap-2">
-				<span class="truncate text-base-medium leading-none text-ink-gray-8">
-					{{ spaceName || __('Space') }}
-				</span>
-				<slot name="badge" />
-			</div>
-			<Button
-				v-if="spaceRoute"
-				variant="ghost"
-				icon="external-link"
-				:title="__('View Space')"
-				:link="'/' + spaceRoute"
-			/>
-			<Button
-				variant="ghost"
-				icon="settings"
-				:title="__('Settings')"
-				@click="emit('open-settings')"
-			/>
-			<slot name="meta" />
-		</div>
-
-		<div class="flex items-center gap-2 flex-wrap">
-			<slot name="actions" />
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { Button } from 'frappe-ui';
-
-defineProps({
-	spaceName: { type: String, default: '' },
-	// Drives the "View Space" external link; hidden when empty.
-	spaceRoute: { type: String, default: '' },
-	// Colour/border classes for the bar surface (e.g. the CR status colour).
-	barClass: {
-		type: String,
-		default: 'bg-surface-gray-1 border-b border-outline-gray-2 text-ink-gray-8',
-	},
-});
-
-const emit = defineEmits(['open-settings']);
-</script>
diff --git a/frontend/src/components/SpaceIdentityPicker.vue b/frontend/src/components/SpaceIdentityPicker.vue
new file mode 100644
index 000000000..d217665e2
--- /dev/null
+++ b/frontend/src/components/SpaceIdentityPicker.vue
@@ -0,0 +1,271 @@
+<template>
+	<Popover v-model:open="open" align="end">
+		<!-- reka's PopoverTrigger wires the click, keyboard and aria itself, so
+		     the button carries no handler of its own. -->
+		<template #trigger>
+			<!-- `flex`, not the default block: Avatar is inline-block, so a block
+			     button wraps it in a line box and the tile's ring comes out
+			     taller than it is wide. -->
+			<button
+				type="button"
+				class="flex rounded-[6px] ring-outline-gray-3 hover:ring-2"
+				:aria-label="__('Change space logo')"
+				data-testid="space-identity-trigger"
+			>
+				<SpaceAvatar :space="chosen" :label="label" :size="size" />
+			</button>
+		</template>
+
+		<template #default>
+			<div class="w-64 space-y-3 p-3">
+				<!-- An upload and a generated mark are alternatives, not layers,
+				     so the control that picks between them is a value control
+				     and the panels follow — hence TabButtons rather than Tabs.
+				     TabButtons declares `inheritAttrs: false`, so the testid
+				     sits on a wrapper. -->
+				<div data-testid="space-identity-tabs">
+					<TabButtons v-model="mode" :options="MODE_OPTIONS" fluid />
+				</div>
+
+				<template v-if="mode === 'icon'">
+					<!-- Swatches are the tile itself in each tint, so the row
+					     doubles as a preview of the icon currently selected. -->
+					<div class="flex items-center justify-between">
+						<button
+							v-for="swatch in SPACE_COLORS"
+							:key="swatch"
+							type="button"
+							class="rounded-4 p-1 ring-inset hover:bg-surface-gray-2"
+							:class="swatch === color ? 'ring-2 ring-outline-gray-3' : ''"
+							:aria-label="swatch"
+							:aria-pressed="swatch === color"
+							@click="pickColor(swatch)"
+						>
+							<SpaceAvatar
+								:space="{ space_icon: icon, space_color: swatch }"
+								:label="label"
+								size="lg"
+							/>
+						</button>
+					</div>
+
+					<!-- No wrapper surface: the grid's own bottom fade is drawn
+					     `from-surface-elevation-2`, which is the panel. -->
+					<div class="-mx-3">
+						<IconGrid :model-value="icon" @select="pickIcon" />
+					</div>
+
+					<Button
+						class="w-full"
+						icon-left="lucide-shuffle"
+						:label="__('Shuffle')"
+						:loading="rolling"
+						data-testid="space-identity-shuffle"
+						@click="shuffle"
+					/>
+				</template>
+
+				<template v-else>
+					<div class="flex items-center gap-3">
+						<SpaceAvatar
+							:space="{ app_switcher_logo: logo }"
+							:label="label"
+							size="2xl"
+						/>
+						<Button
+							class="flex-1"
+							:label="logo ? __('Replace') : __('Upload')"
+							:loading="uploading"
+							data-testid="space-identity-upload"
+							@click="pickFile"
+						/>
+					</div>
+
+					<!-- A stored logo that some other mark is currently hiding is
+					     still there; this is how it comes back without a
+					     re-upload. -->
+					<Button
+						v-if="logo && mark.mode !== 'logo'"
+						class="w-full"
+						:label="__('Use this image')"
+						@click="useLogo"
+					/>
+					<Button
+						v-if="logo"
+						class="w-full"
+						theme="red"
+						variant="ghost"
+						:label="__('Remove')"
+						@click="removeLogo"
+					/>
+					<p v-else class="text-p-sm text-ink-gray-5">
+						{{ __('PNG or SVG, shown at a small size.') }}
+					</p>
+
+					<input
+						ref="fileInput"
+						type="file"
+						accept="image/*"
+						class="hidden"
+						@change="handleFileChange"
+					/>
+				</template>
+			</div>
+		</template>
+	</Popover>
+</template>
+
+<script setup>
+import { Button, Popover, TabButtons, toast, useFileUpload } from 'frappe-ui';
+import { computed, ref, watch } from 'vue';
+
+import { rollSpaceAvatar } from '../lib/spaceAvatar.js';
+import {
+	generatedIdentityPatch,
+	resolveSpaceIdentity,
+	SPACE_COLORS,
+} from '../lib/spaceIdentity.js';
+import IconGrid from './IconGrid.vue';
+import SpaceAvatar from './SpaceAvatar.vue';
+
+/**
+ * A space's whole visual identity behind one square tile: an uploaded image,
+ * or a curated lucide icon on a tinted square, or a generated abstract mark.
+ *
+ * The picker never writes anything itself. It emits the fields a choice
+ * implies and the caller decides what that means — the settings panel saves
+ * them at once, because a panel with no Save button must not hold an identity
+ * hostage until the dialog closes, while the create dialog holds them until
+ * the space exists.
+ */
+const props = defineProps({
+	// The five identity fields as a space stores them, flat. A `useDoc` doc or
+	// a plain object from a form both work.
+	identity: { type: Object, default: () => ({}) },
+	label: { type: String, default: '' },
+	// The trigger tile's size. The settings row wants a big square — big
+	// enough to read the mark it is there to change; the space header wants
+	// the same tile the sidebar rows draw.
+	size: { type: String, default: '3xl' },
+});
+
+const emit = defineEmits(['update']);
+
+const MODE_OPTIONS = [
+	{ label: __('Icon'), value: 'icon' },
+	{ label: __('Upload'), value: 'upload' },
+];
+
+const open = ref(false);
+const rolling = ref(false);
+const uploading = ref(false);
+const fileInput = ref(null);
+const fileUploader = useFileUpload();
+
+/**
+ * What the user has chosen since the popover opened, over what the caller has.
+ * Every patch is built from this rather than from `identity`: a caller that
+ * saves asynchronously has not echoed the last choice back yet, so picking a
+ * colour and then an icon would otherwise send an icon patch carrying the old
+ * colour — and the colour patch, built when there was no icon, carries an
+ * empty `space_icon` that lands last and wipes the icon.
+ *
+ * Dropped when the popover closes, so a change made anywhere else shows up.
+ */
+const pending = ref({});
+
+const chosen = computed(() => ({ ...props.identity, ...pending.value }));
+const mark = computed(() => resolveSpaceIdentity(chosen.value));
+const logo = computed(() => chosen.value.app_switcher_logo || '');
+const icon = computed(() => chosen.value.space_icon || '');
+const color = computed(() => mark.value.color);
+
+function choose(patch) {
+	pending.value = { ...pending.value, ...patch };
+	emit('update', patch);
+}
+
+watch(open, (isOpen) => {
+	if (!isOpen) pending.value = {};
+});
+
+// The tile that is showing is the tab you land on. A space that has never been
+// given a mark opens on Icon, which is the one that can produce one in a click.
+const mode = ref(mark.value.mode === 'logo' ? 'upload' : 'icon');
+
+watch(
+	() => mark.value.mode,
+	(next) => {
+		mode.value = next === 'logo' ? 'upload' : 'icon';
+	},
+);
+
+// Colour is a one-click tweak you may want to repeat, so only the icon — the
+// choice that finishes the job — closes the popover.
+function pickColor(swatch) {
+	choose(generatedIdentityPatch({ icon: icon.value, color: swatch }));
+}
+
+function pickIcon(next) {
+	choose(generatedIdentityPatch({ icon: next, color: color.value }));
+	open.value = false;
+}
+
+/**
+ * A failed roll — a style chunk that would not download, say — leaves whatever
+ * mark is already on screen rather than clearing it, so a flaky network costs
+ * the user a shuffle and not their choice.
+ */
+async function shuffle() {
+	rolling.value = true;
+	try {
+		choose(generatedIdentityPatch({ avatar: await rollSpaceAvatar() }));
+	} catch (error) {
+		console.error('Could not generate a space mark', error);
+		toast.error(__('Could not generate a logo'));
+	} finally {
+		rolling.value = false;
+	}
+}
+
+function useLogo() {
+	choose(generatedIdentityPatch({}));
+	open.value = false;
+}
+
+function removeLogo() {
+	choose({ app_switcher_logo: '' });
+}
+
+function pickFile() {
+	fileInput.value?.click();
+}
+
+async function handleFileChange(event) {
+	const file = event.target.files?.[0];
+	// Reset the input so re-selecting the same file still fires `change`.
+	event.target.value = '';
+	if (!file) return;
+
+	uploading.value = true;
+	try {
+		const result = await fileUploader.upload(file, {
+			// Public: the reader header and the OG card are both anonymous
+			// surfaces, and the card renderer cannot read /private/files.
+			private: false,
+			upload_endpoint: '/api/method/wiki.api.upload_wiki_asset',
+		});
+		// An upload is the one direction that clears: it is an explicit choice
+		// of this image over whatever mark was generated before.
+		choose({
+			...generatedIdentityPatch({}),
+			app_switcher_logo: result.file_url,
+		});
+		open.value = false;
+	} catch (error) {
+		toast.error(error.messages?.[0] || __('Failed to upload logo'));
+	} finally {
+		uploading.value = false;
+	}
+}
+</script>
diff --git a/frontend/src/components/SpaceList.vue b/frontend/src/components/SpaceList.vue
deleted file mode 100644
index b264258a0..000000000
--- a/frontend/src/components/SpaceList.vue
+++ /dev/null
@@ -1,707 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4 p-3 sm:p-4 h-full">
-    <!-- Header renders into the shell's PageHeaderTarget (pinned above the
-         page): centered-title mobile variant with the app menu, or the
-         desktop strip with search + New Space. -->
-    <PageHeaderMobile v-if="isMobile" :title="__('Wiki Spaces')">
-      <template #right>
-        <div class="flex items-center gap-1">
-          <Button
-            v-if="isManager"
-            variant="ghost"
-            icon="lucide-plus"
-            :label="__('New Space')"
-            @click="showCreateDialog = true"
-          />
-          <MobileAppMenu />
-        </div>
-      </template>
-    </PageHeaderMobile>
-    <PageHeader v-else>
-      <h2 class="text-lg-semibold text-ink-gray-9">{{ __('Wiki Spaces') }}</h2>
-      <div class="flex items-center gap-2">
-        <FormControl
-          class="w-64"
-          type="text"
-          v-model="searchQuery"
-          :placeholder="__('Search spaces...')"
-        >
-          <template #prefix>
-            <span class="lucide-search h-4 w-4 text-ink-gray-4" aria-hidden="true" />
-          </template>
-        </FormControl>
-        <Button
-          v-if="isManager"
-          variant="solid"
-          @click="showCreateDialog = true"
-        >
-          <template #prefix>
-            <span class="lucide-plus h-4 w-4" aria-hidden="true" />
-          </template>
-          {{ __('New Space') }}
-        </Button>
-      </div>
-    </PageHeader>
-    <!-- Mobile keeps an inline search row (the centered header has no room). -->
-    <FormControl
-      v-if="isMobile"
-      type="text"
-      v-model="searchQuery"
-      :placeholder="__('Search spaces...')"
-    >
-      <template #prefix>
-        <span class="lucide-search h-4 w-4 text-ink-gray-4" aria-hidden="true" />
-      </template>
-    </FormControl>
-
-    <div class="flex-1 overflow-auto">
-      <!-- Skeleton on cold load so the empty state never flashes before the
-           first page of spaces arrives. -->
-      <div v-if="spaces.list.loading && !spaces.data?.length" class="flex flex-col">
-        <div
-          v-for="n in 8"
-          :key="n"
-          class="grid grid-cols-[2fr_1fr_2fr_3fr] items-center gap-4 px-2 h-12 border-b border-outline-gray-1"
-        >
-          <Skeleton class="h-3.5 w-2/3 rounded" />
-          <Skeleton class="h-5 w-20 rounded-full" />
-          <Skeleton class="h-3.5 w-1/2 rounded" />
-          <Skeleton class="h-7 w-16 rounded" />
-        </div>
-      </div>
-
-      <!-- The List family owns geometry only; empty states are app-authored. -->
-      <div
-        v-else-if="!(spaces.data || []).length"
-        class="flex flex-col items-center justify-center py-16 text-center"
-      >
-        <p class="text-lg-medium text-ink-gray-7">
-          {{ searchQuery ? __('No spaces found') : __('No Wiki Spaces') }}
-        </p>
-        <p class="mt-1 max-w-sm text-p-sm text-ink-gray-5">
-          {{
-            searchQuery
-              ? __('No wiki spaces matched your search')
-              : isManager
-                ? __('Create your first wiki space to get started')
-                : __('No wiki spaces available')
-          }}
-        </p>
-        <Button
-          v-if="isManager && !searchQuery"
-          class="mt-4"
-          variant="solid"
-          :label="__('New Space')"
-          @click="showCreateDialog = true"
-        />
-      </div>
-
-      <!-- Tables stay tables on mobile and scroll horizontally: the min-width
-           keeps columns readable instead of compressing to mush. -->
-      <div v-else class="min-w-[600px] sm:min-w-0">
-        <List :columns="tracks" :row-height="40">
-          <ListHeader>
-            <ListHeaderCell v-for="col in columns" :key="col.key">
-              {{ col.label }}
-            </ListHeaderCell>
-          </ListHeader>
-          <ListRows :items="spaces.data || []" row-key="name" v-slot="{ item: row }">
-            <ListRow :to="{ name: 'SpaceDetails', params: { spaceId: row.name } }">
-              <ListCell v-for="col in columns" :key="col.key">
-                <Badge
-                  v-if="col.key === 'is_published'"
-                  variant="subtle"
-                  :theme="row.is_published ? 'green' : 'orange'"
-                  size="sm"
-                  :label="row.is_published ? __('Published') : __('Unpublished')"
-                />
-                <div v-else-if="col.key === 'view'" class="flex items-center">
-                  <!-- Rows are router-links (an <a>); .stop alone won't stop the browser
-                       from following the row href, so .prevent is required too. -->
-                  <Button
-                    v-if="row.is_published"
-                    variant="ghost"
-                    size="sm"
-                    icon-left="external-link"
-                    @click.stop.prevent="viewSpace(row)"
-                  >
-                    {{ __('View') }}
-                  </Button>
-                </div>
-                <!-- Cells don't inherit an ink color from the List family, so an
-                     explicit token is required or the text goes black in dark mode. -->
-                <span
-                  v-else
-                  class="truncate"
-                  :class="col.key === 'space_name' ? 'text-ink-gray-9' : 'text-ink-gray-7'"
-                  :title="row[col.key]"
-                  >{{ row[col.key] }}</span
-                >
-              </ListCell>
-            </ListRow>
-          </ListRows>
-        </List>
-      </div>
-
-      <div v-if="spaces.hasNextPage" class="flex px-2 py-2">
-        <Button
-          @click="() => spaces.next()"
-          :loading="spaces.list.loading"
-          :label="__('Load more')"
-          icon-left="refresh-cw"
-        />
-      </div>
-    </div>
-
-    <Dialog
-      v-model:open="showCreateDialog"
-      :title="__('Create Wiki Space')"
-      size="lg"
-      :actions="[
-        {
-          label: __('Create'),
-          variant: 'solid',
-          onClick: handleCreateSpace,
-        },
-      ]"
-    >
-      <template #default>
-        <div class="flex flex-col gap-4">
-          <FormControl
-            type="text"
-            :label="__('Space Name')"
-            v-model="newSpace.space_name"
-            :placeholder="__('My Wiki Space')"
-          />
-          <FormControl
-            type="text"
-            :label="__('Route')"
-            required
-            :modelValue="newSpace.route"
-            @update:modelValue="handleRouteInput"
-            :placeholder="__('my-wiki-space')"
-            :description="__('The URL path for this wiki space (e.g., /my-wiki-space)')"
-          />
-
-          <FormControl
-            type="checkbox"
-            :label="__('Synced from GitHub?')"
-            v-model="newSpace.git_synced"
-          />
-
-          <template v-if="newSpace.git_synced">
-            <!-- Checking the connection + loading the account list right after the
-                 box is ticked: keep the user informed instead of flashing UI. -->
-            <div
-              v-if="githubConnected.loading || installationsResource.loading"
-              class="flex items-center gap-2 rounded border border-outline-gray-2 p-3"
-            >
-              <span class="lucide-loader-2 h-4 w-4 animate-spin text-ink-gray-5" aria-hidden="true" />
-              <span class="text-p-sm text-ink-gray-6">{{ __('Connecting to GitHub…') }}</span>
-            </div>
-
-            <template v-else>
-              <!-- Not connected yet: kick off the GitHub App connect-account flow. -->
-              <div
-                v-if="!githubConnected.data"
-                class="flex flex-col items-start gap-2 rounded border border-outline-gray-2 p-3"
-              >
-                <p class="text-p-sm text-ink-gray-6">
-                  {{ __('Connect your GitHub account to pick a repository (private repos supported).') }}
-                </p>
-                <Button variant="subtle" :loading="githubConnected.loading" @click="connectGithub">
-                  <template #prefix>
-                    <span class="lucide-github h-4 w-4" aria-hidden="true" />
-                  </template>
-                  {{ __('Connect GitHub') }}
-                </Button>
-                <ErrorMessage :message="githubConnected.error" />
-              </div>
-
-              <!-- Connected but the App isn't installed anywhere yet: offer install. -->
-              <div
-                v-else-if="installationOptions.length === 0"
-                class="flex flex-col items-start gap-2 rounded border border-outline-gray-2 p-3"
-              >
-                <p class="text-p-sm text-ink-gray-6">
-                  {{ __('The GitHub App is not installed on any account yet. Install it on the account and repositories you want to sync.') }}
-                </p>
-                <Button variant="subtle" :loading="installationsResource.loading" @click="installApp">
-                  <template #prefix>
-                    <span class="lucide-github h-4 w-4" aria-hidden="true" />
-                  </template>
-                  {{ __('Install GitHub App') }}
-                </Button>
-                <ErrorMessage :message="appInstallUrl.error" />
-              </div>
-
-              <template v-else>
-                <!-- Reveal one step at a time: account → repo → branch → folder.
-                     A single account is auto-selected, so the picker collapses to
-                     repo-first in the common case. -->
-                <Autocomplete
-                  v-if="installationOptions.length > 1"
-                  :label="__('GitHub Account')"
-                  :options="installationOptions"
-                  v-model="newSpace.github_installation_id"
-                  :placeholder="__('Select an account or organization')"
-                />
-
-                <!-- First repo page after an account is chosen: spinner so the repo
-                     field never appears empty with no hint that it's loading. -->
-                <div
-                  v-if="reposInitialLoading"
-                  class="flex items-center gap-2 rounded border border-outline-gray-2 p-3"
-                >
-                  <span class="lucide-loader-2 h-4 w-4 animate-spin text-ink-gray-5" aria-hidden="true" />
-                  <span class="text-p-sm text-ink-gray-6">{{ __('Loading repositories…') }}</span>
-                </div>
-
-                <template v-else-if="newSpace.github_installation_id">
-                  <Autocomplete
-                    :label="__('Repository')"
-                    remote
-                    :options="repoOptions"
-                    v-model="newSpace.repo_full_name"
-                    :loading="repos.loading"
-                    :has-more="repos.hasMore"
-                    :placeholder="__('Search repositories…')"
-                    @search="(q) => loadRepos({ search: q, reset: true })"
-                    @load-more="loadRepos()"
-                  />
-
-                  <Autocomplete
-                    v-if="newSpace.repo_full_name"
-                    :label="__('Branch')"
-                    :options="branchOptions"
-                    v-model="newSpace.branch"
-                    :loading="branches.loading"
-                    :placeholder="__('main')"
-                  />
-
-                  <FormControl
-                    v-if="newSpace.branch"
-                    type="text"
-                    :label="__('Docs folder')"
-                    v-model="newSpace.docs_subdir"
-                    :placeholder="__('docs')"
-                    :description="__('Folder in the repo to sync. Supports nested paths like docs/guide.')"
-                  />
-                </template>
-                <ErrorMessage :message="installationsResource.error || repos.error || branches.error" />
-              </template>
-            </template>
-          </template>
-
-          <ErrorMessage :message="formError || spaces.insert.error" />
-        </div>
-      </template>
-    </Dialog>
-  </div>
-</template>
-
-<script setup>
-import Autocomplete from '@/components/Autocomplete.vue';
-import MobileAppMenu from '@/components/MobileAppMenu.vue';
-import { useMobile } from '@/composables/useMobile';
-import { useUserStore } from '@/stores/user';
-import {
-	Badge,
-	Button,
-	Dialog,
-	ErrorMessage,
-	FormControl,
-	PageHeader,
-	PageHeaderMobile,
-	Skeleton,
-	createListResource,
-	createResource,
-	toast,
-} from 'frappe-ui';
-import {
-	List,
-	ListCell,
-	ListHeader,
-	ListHeaderCell,
-	ListRow,
-	ListRows,
-} from 'frappe-ui/list';
-import { computed, reactive, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-const userStore = useUserStore();
-const { isMobile } = useMobile();
-const isManager = computed(() => userStore.isWikiManager);
-
-const showCreateDialog = ref(false);
-const routeManuallyEdited = ref(false);
-const searchQuery = ref('');
-const formError = ref('');
-
-const newSpace = reactive({
-	space_name: '',
-	route: '',
-	git_synced: false,
-	github_installation_id: '',
-	repo_full_name: '',
-	branch: '',
-	docs_subdir: 'docs',
-});
-
-// GitHub App connect + repo picker (TB4b). The connect-account OAuth round-trip
-// runs in a popup against `/github/authorize`; we poll `is_connected` until the
-// user's token is cached server-side, then list their installations and repos.
-const githubConnected = createResource({ url: 'wiki.api.github.is_connected' });
-const installationsResource = createResource({
-	url: 'wiki.api.github.my_installations',
-	// A single account is the common case — pick it automatically so the form
-	// collapses to repo-first (the account step hides when there's nothing to choose).
-	onSuccess: (data) => {
-		if ((data || []).length === 1) {
-			// Bridge the gap to the first repo page so the spinner stays up instead of
-			// flashing an empty repo field before loadRepos() (via the watch) kicks in.
-			repos.loadedOnce = false;
-			repos.loading = true;
-			newSpace.github_installation_id = String(data[0].id);
-		}
-	},
-});
-const repositoriesResource = createResource({
-	url: 'wiki.api.github.my_repositories',
-});
-const branchesResource = createResource({
-	url: 'wiki.api.github.my_repo_branches',
-});
-const appInstallUrl = createResource({
-	url: 'wiki.api.github.app_install_url',
-});
-
-const installationOptions = computed(() =>
-	(installationsResource.data || []).map((i) => ({
-		label: i.account_type ? `${i.account} (${i.account_type})` : i.account,
-		value: String(i.id),
-	})),
-);
-
-// Repos are paged from the server (a search/load-more list, not loaded all at
-// once) so big orgs don't stall the dialog. `loadRepos` accumulates pages and
-// resets when the search term changes.
-const repos = reactive({
-	list: [],
-	page: 1,
-	search: '',
-	hasMore: false,
-	loading: false,
-	loadedOnce: false,
-	error: null,
-});
-
-// Show the big "Loading repositories…" spinner only on the first load for an
-// account — later searches keep the field visible and use its in-dropdown hint.
-const reposInitialLoading = computed(
-	() => !!newSpace.github_installation_id && repos.loading && !repos.loadedOnce,
-);
-
-async function loadRepos({ search, reset = false } = {}) {
-	if (!newSpace.github_installation_id) return;
-	if (search !== undefined) repos.search = search;
-	if (reset) {
-		repos.page = 1;
-		repos.list = [];
-	}
-	repos.loading = true;
-	repos.error = null;
-	try {
-		const res = await repositoriesResource.submit({
-			installation_id: newSpace.github_installation_id,
-			search: repos.search,
-			page: repos.page,
-		});
-		const batch = res?.repositories || [];
-		repos.list = repos.page === 1 ? batch : [...repos.list, ...batch];
-		repos.hasMore = !!res?.has_more;
-		if (repos.hasMore) repos.page += 1;
-	} catch (error) {
-		repos.error = error;
-	} finally {
-		repos.loading = false;
-		repos.loadedOnce = true;
-	}
-}
-
-const repoOptions = computed(() =>
-	repos.list.map((r) => ({
-		label: r.private ? `${r.full_name} 🔒` : r.full_name,
-		value: r.full_name,
-		default_branch: r.default_branch,
-	})),
-);
-
-const branches = reactive({ list: [], loading: false, error: null });
-
-async function loadBranches(fullName) {
-	branches.list = [];
-	if (!fullName) return;
-	branches.loading = true;
-	branches.error = null;
-	try {
-		branches.list =
-			(await branchesResource.submit({ repo_full_name: fullName })) || [];
-	} catch (error) {
-		branches.error = error;
-	} finally {
-		branches.loading = false;
-	}
-}
-
-const branchOptions = computed(() =>
-	branches.list.map((b) => ({ label: b, value: b })),
-);
-
-// When the dialog reveals the Git-sync section, learn whether we're already
-// connected (and if so, load the account list straight away).
-watch(
-	() => newSpace.git_synced,
-	(synced) => {
-		if (synced) {
-			appInstallUrl.fetch();
-			githubConnected.fetch().then(() => {
-				if (githubConnected.data) installationsResource.fetch();
-			});
-		}
-	},
-);
-
-// The App install also happens in a popup; poll installations until it appears.
-function installApp() {
-	const url = appInstallUrl.data;
-	if (!url) {
-		appInstallUrl.fetch();
-		return;
-	}
-	const popup = window.open(
-		url,
-		'github-install',
-		'popup,width=720,height=760',
-	);
-	stopConnectPoll();
-	connectPoll = setInterval(async () => {
-		if (popup && popup.closed) {
-			stopConnectPoll();
-			installationsResource.reload();
-			return;
-		}
-		await installationsResource.reload();
-		if ((installationsResource.data || []).length > 0) {
-			stopConnectPoll();
-			popup?.close();
-		}
-	}, 1500);
-}
-
-let connectPoll = null;
-function stopConnectPoll() {
-	if (connectPoll) {
-		clearInterval(connectPoll);
-		connectPoll = null;
-	}
-}
-
-function connectGithub() {
-	const popup = window.open(
-		'/github/authorize',
-		'github-connect',
-		'popup,width=720,height=760',
-	);
-	githubConnected.loading = true;
-	stopConnectPoll();
-	connectPoll = setInterval(async () => {
-		if (popup && popup.closed && !githubConnected.data) {
-			stopConnectPoll();
-			githubConnected.loading = false;
-			return;
-		}
-		await githubConnected.reload();
-		if (githubConnected.data) {
-			stopConnectPoll();
-			popup?.close();
-			installationsResource.fetch();
-		}
-	}, 1500);
-}
-
-// Picking an account resets the downstream choices and loads its first repo page.
-watch(
-	() => newSpace.github_installation_id,
-	(installationId) => {
-		newSpace.repo_full_name = '';
-		newSpace.branch = '';
-		repos.loadedOnce = false;
-		if (installationId) loadRepos({ search: '', reset: true });
-	},
-);
-
-// Picking a repo defaults the branch to that repo's default branch and loads
-// the rest of its branches for the selector.
-watch(
-	() => newSpace.repo_full_name,
-	(fullName) => {
-		const repo = repoOptions.value.find((r) => r.value === fullName);
-		newSpace.branch = repo?.default_branch || '';
-		loadBranches(fullName);
-		if (fullName) formError.value = '';
-	},
-);
-
-function slugify(text) {
-	return text
-		.toLowerCase()
-		.trim()
-		.replace(/[^\w\s-]/g, '')
-		.replace(/[\s_-]+/g, '-')
-		.replace(/^-+|-+$/g, '');
-}
-
-watch(
-	() => newSpace.space_name,
-	(newName) => {
-		if (!routeManuallyEdited.value) {
-			newSpace.route = slugify(newName);
-		}
-	},
-);
-
-function handleRouteInput(value) {
-	if (value !== slugify(newSpace.space_name)) {
-		routeManuallyEdited.value = true;
-	}
-	newSpace.route = value;
-	if (value) formError.value = '';
-}
-
-const columns = [
-	{
-		label: __('Name'),
-		key: 'space_name',
-		width: 2,
-	},
-	{
-		label: __('Status'),
-		key: 'is_published',
-		width: 1,
-	},
-	{
-		label: __('Route'),
-		key: 'route',
-		width: 2,
-	},
-	{
-		// Wide last column, left-aligned: keeps the View buttons in one straight
-		// column that starts right after the route rather than hugging the far edge.
-		label: '',
-		key: 'view',
-		width: 3,
-		align: 'left',
-	},
-];
-
-// Numeric width = fr weight, translated into the List grid template.
-const tracks = columns.map((col) =>
-	typeof col.width === 'number' ? `minmax(0,${col.width}fr)` : col.width,
-);
-
-// Open the space's public-facing reader. The reader lives at the site root
-// (`/<route>`), outside the `/wiki-app` editor SPA, so it can't go through the
-// router — a new tab keeps the editor session intact.
-function viewSpace(row) {
-	window.open(`/${row.route}`, '_blank', 'noopener');
-}
-
-const spaces = createListResource({
-	doctype: 'Wiki Space',
-	fields: ['name', 'space_name', 'route', 'root_group', 'is_published'],
-	orderBy: 'creation desc',
-	pageLength: 25,
-	auto: true,
-	insert: {
-		onSuccess: (doc) => {
-			showCreateDialog.value = false;
-			newSpace.space_name = '';
-			newSpace.route = '';
-			newSpace.git_synced = false;
-			newSpace.github_installation_id = '';
-			newSpace.repo_full_name = '';
-			newSpace.branch = '';
-			newSpace.docs_subdir = 'docs';
-			repos.list = [];
-			repos.loadedOnce = false;
-			branches.list = [];
-			formError.value = '';
-			routeManuallyEdited.value = false;
-			toast.success(
-				__('Wiki Space "{0}" created successfully.', [doc.space_name]),
-			);
-			// Synced spaces kick off their first sync automatically on the space
-			// detail page (see SpaceDetails), so just navigate there.
-			router.push({ name: 'SpaceDetails', params: { spaceId: doc.name } });
-		},
-	},
-});
-
-let searchDebounceTimer = null;
-watch(searchQuery, (value) => {
-	clearTimeout(searchDebounceTimer);
-	searchDebounceTimer = setTimeout(() => {
-		spaces.update({
-			filters: {},
-			orFilters: value
-				? [
-						['space_name', 'like', `%${value}%`],
-						['route', 'like', `%${value}%`],
-					]
-				: [],
-			start: 0,
-		});
-		spaces.reload();
-	}, 300);
-});
-
-const handleCreateSpace = () => {
-	// Surface validation through the dialog's ErrorMessage rather than a rejected
-	// promise (which only ends up in the console). The dialog stays open either
-	// way — it closes only on insert success.
-	formError.value = '';
-	if (!newSpace.route) {
-		formError.value = __('Route is required.');
-		return;
-	}
-	if (newSpace.git_synced && !newSpace.repo_full_name.trim()) {
-		formError.value = __('Please pick a GitHub repository');
-		return;
-	}
-
-	const payload = {
-		space_name: newSpace.space_name,
-		route: newSpace.route,
-		// New spaces are published by default, so start them as public read.
-		// Guest covers everyone (anonymous + logged-in); admins can refine this
-		// in Space Settings → Permissions.
-		roles: [{ role: 'Guest', permission_level: 'Read' }],
-	};
-
-	if (newSpace.git_synced) {
-		payload.git_synced = 1;
-		payload.repo_full_name = newSpace.repo_full_name.trim();
-		payload.branch = newSpace.branch.trim() || 'main';
-		if (newSpace.docs_subdir.trim()) {
-			payload.docs_subdir = newSpace.docs_subdir.trim();
-		}
-		if (newSpace.github_installation_id) {
-			payload.github_installation_id = newSpace.github_installation_id;
-		}
-	}
-
-	return spaces.insert.submit(payload);
-};
-</script>
diff --git a/frontend/src/components/SpaceModeStrip.vue b/frontend/src/components/SpaceModeStrip.vue
new file mode 100644
index 000000000..230de9411
--- /dev/null
+++ b/frontend/src/components/SpaceModeStrip.vue
@@ -0,0 +1,489 @@
+<template>
+	<!-- The mode strip sits directly under the space header in the sidebar. A
+	     git-synced space and a space with an open draft are read and edited in
+	     different ways, and the strip says which one you are in before you click
+	     anything. The two states are mutually exclusive: a synced space never
+	     opens a change request. -->
+	<div v-if="spaceStore.isGitSynced" class="shrink-0 px-2 pt-2">
+		<div
+			class="flex items-center gap-1.5 rounded-4 bg-surface-gray-2 px-2 py-1.5"
+		>
+			<a
+				v-if="spaceStore.doc?.repo_full_name"
+				:href="`https://github.com/${spaceStore.doc.repo_full_name}`"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="flex min-w-0 flex-1 items-center gap-1.5 text-ink-gray-7 hover:text-ink-gray-8"
+				:title="spaceStore.doc.repo_full_name"
+			>
+				<span
+					class="lucide-folder-git-2 size-3.5 shrink-0"
+					aria-hidden="true"
+				/>
+				<!-- Owner dropped, branch kept: 260px minus the badge and the sync
+				     button leaves no room for both, and the branch is the part that
+				     changes. The link's title carries the full name. -->
+				<span class="truncate text-xs">
+					{{ repoShortName
+					}}<span v-if="spaceStore.doc?.branch"
+						>@{{ spaceStore.doc.branch }}</span
+					>
+				</span>
+			</a>
+			<span v-else class="min-w-0 flex-1 truncate text-xs text-ink-gray-7">
+				{{ __('Synced from GitHub') }}
+			</span>
+			<Badge size="sm" variant="subtle" :theme="syncStatusTheme">
+				{{ spaceStore.syncStatusLabel(spaceStore.doc?.last_sync_status) }}
+			</Badge>
+			<Button
+				variant="ghost"
+				size="sm"
+				icon="lucide-refresh-cw"
+				:label="__('Sync now')"
+				:loading="spaceStore.syncing"
+				@click="() => spaceStore.syncNow()"
+			/>
+		</div>
+		<p class="px-2 pt-1 text-xs text-ink-gray-5">{{ readonlyLine }}</p>
+	</div>
+
+	<div
+		v-else-if="crStore.isChangeRequestMode"
+		class="contribution-strip shrink-0 px-2 pt-2"
+	>
+		<!-- 260px does not fit a label and two buttons on one line, so the meta
+		     line and the actions stack. -->
+		<div class="rounded-4 px-2 py-2" :class="stripClass">
+			<div class="flex items-start gap-1.5">
+				<!-- The card's own tint carries the status, so a subtle badge on top
+				     of it would be one grey box inside another. -->
+				<span class="min-w-0 flex-1 truncate text-xs-medium">
+					{{ stripTitle }}
+				</span>
+				<Dropdown
+					v-if="menuOptions.length > 0"
+					:options="menuOptions"
+					placement="right"
+				>
+					<Button
+						variant="ghost"
+						size="sm"
+						icon="lucide-more-horizontal"
+						:label="__('More actions')"
+					/>
+				</Dropdown>
+			</div>
+
+			<p v-if="changeCountLabel" class="mt-1 truncate text-xs text-ink-gray-6">
+				{{ changeCountLabel }}
+			</p>
+
+			<p
+				v-if="reviewFeedback"
+				class="mt-1 text-xs text-ink-red-7"
+				:title="reviewFeedback"
+			>
+				{{ reviewFeedback }}
+			</p>
+
+			<!-- Only the mobile strip carries the sync notice. On desktop it
+			     floats over the sidebar tree instead: in flow here it shoves the
+			     whole tree down every time it appears. Mobile has no sidebar to
+			     float in, and the strip sits above the content anyway. -->
+			<SyncStateAlert v-if="showSyncState" class="mt-2" />
+
+			<Button
+				v-if="showReloadLatest"
+				class="mt-2 w-full"
+				variant="outline"
+				size="sm"
+				:loading="reloading"
+				:title="__('Discard local failed changes and adopt server state')"
+				@click="onReloadLatest"
+			>
+				{{ __('Reload latest') }}
+			</Button>
+
+			<!-- One stable button for the whole merge/withdraw round trip. The
+			     status branches below churn through In Review and Approved on the
+			     way, and the summary they read belongs to a change request that is
+			     being retired.
+
+			     Outline, not subtle: a subtle gray button is drawn on
+			     surface-gray-2, which is this card's own tint in the Draft state,
+			     so it vanished into it. Outline puts it on surface-base, which
+			     reads off the card without taking solid — the page header's
+			     Submit for review is the one primary action on this screen. -->
+			<template v-if="crStore.finalizing">
+				<Button class="mt-2 w-full" variant="outline" size="sm" loading disabled>
+					{{
+						crStore.finalizing === 'withdrawing' ? __('Discard') : __('Merge')
+					}}
+				</Button>
+			</template>
+
+			<template
+				v-else-if="
+					changeRequestStatus === 'Draft' ||
+					changeRequestStatus === 'Changes Requested'
+				"
+			>
+				<Button
+					v-if="canShowMerge"
+					class="mt-2 w-full"
+					variant="outline"
+					size="sm"
+					:loading="crStore.isMerging"
+					:disabled="mergeDisabled"
+					:title="mergeButtonTitle"
+					@click="crActions.mergeChangeRequest"
+				>
+					{{ __('Merge') }}
+				</Button>
+			</template>
+
+			<template v-else-if="changeRequestStatus === 'Approved'">
+				<p class="mt-1 text-xs-medium text-ink-green-6">
+					{{ __('Approved! Ready to merge.') }}
+				</p>
+				<Button
+					v-if="canShowMerge"
+					class="mt-2 w-full"
+					variant="outline"
+					size="sm"
+					:loading="crStore.isMerging"
+					:disabled="mergeDisabled"
+					:title="mergeButtonTitle"
+					@click="crActions.mergeChangeRequest"
+				>
+					{{ __('Merge') }}
+				</Button>
+			</template>
+		</div>
+	</div>
+
+	<Dialog v-model:open="showChangesDialog" size="lg">
+		<template #title>
+			<div class="flex items-center gap-2">
+				<span
+					class="lucide-git-branch size-5 text-ink-gray-5"
+					aria-hidden="true"
+				/>
+				<h3 class="text-2xl-semibold text-ink-gray-9">
+					{{ __('Pending Changes') }}
+				</h3>
+			</div>
+		</template>
+		<template #default>
+			<div class="space-y-3 max-h-[60vh] overflow-y-auto">
+				<div
+					v-for="change in crStore.changes"
+					:key="change.doc_key"
+					class="flex items-start gap-3 p-3 rounded-6 border border-outline-gray-2 hover:bg-surface-gray-1"
+				>
+					<div
+						class="flex items-center justify-center size-8 rounded-full shrink-0"
+						:class="getChangeIconClass(change.change_type)"
+					>
+						<span
+							:class="getChangeIcon(change.change_type)"
+							class="size-4"
+							aria-hidden="true"
+						/>
+					</div>
+
+					<div class="flex-1 min-w-0">
+						<div class="flex items-center gap-2">
+							<span class="font-medium text-ink-gray-9 truncate">
+								{{ change.title || __('Untitled') }}
+							</span>
+							<Badge
+								variant="subtle"
+								:theme="getChangeTheme(change.change_type)"
+								size="sm"
+							>
+								{{ getChangeLabel(change.change_type) }}
+							</Badge>
+						</div>
+						<p class="text-sm text-ink-gray-5 mt-0.5">
+							{{
+								getChangeDescription(
+									change.change_type,
+									change.is_group,
+									change.is_external_link,
+								)
+							}}
+						</p>
+						<p
+							v-if="change.is_external_link && change.external_url"
+							class="text-sm text-ink-gray-5 mt-0.5 truncate"
+						>
+							<a
+								:href="change.external_url"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="text-ink-blue-link hover:underline"
+							>
+								{{ change.external_url }}
+							</a>
+						</p>
+					</div>
+
+					<div class="flex items-center gap-1 text-ink-gray-4 shrink-0">
+						<span
+							v-if="change.is_group"
+							class="lucide-folder size-4"
+							aria-hidden="true"
+						/>
+						<span
+							v-else-if="change.is_external_link"
+							class="lucide-link size-4"
+							aria-hidden="true"
+						/>
+						<span v-else class="lucide-file-text size-4" aria-hidden="true" />
+					</div>
+				</div>
+
+				<div
+					v-if="crStore.changes.length === 0"
+					class="text-center py-8 text-ink-gray-5"
+				>
+					{{ __('No pending changes') }}
+				</div>
+			</div>
+		</template>
+		<template #actions="{ close }">
+			<div class="flex justify-end">
+				<Button variant="outline" @click="close">{{ __('Close') }}</Button>
+			</div>
+		</template>
+	</Dialog>
+
+</template>
+
+<script setup>
+import { Badge, Button, Dialog, Dropdown, dayjsLocal, toast } from 'frappe-ui';
+import { computed, ref, watch } from 'vue';
+
+import { useChangeRequestActions } from '../composables/useChangeRequestActions';
+import { useChangeTypeDisplay } from '../composables/useChangeTypeDisplay';
+// TEMPORARY — remove with SyncAlertPlacementSwitcher.
+import { useChangeRequestStore } from '../stores/changeRequest';
+import { useDraftWorkspaceStore } from '../stores/draftWorkspace';
+import { useSpaceStore } from '../stores/space';
+import { useUserStore } from '../stores/user';
+import SyncStateAlert from './SyncStateAlert.vue';
+
+defineProps({
+	// The mobile strip renders inline above the content and is the only place
+	// the sync notice has to live there; the desktop sidebar floats its own.
+	showSyncState: { type: Boolean, default: false },
+});
+
+const {
+	getChangeIcon,
+	getChangeIconClass,
+	getChangeTheme,
+	getChangeLabel,
+	getChangeDescription,
+} = useChangeTypeDisplay();
+const crStore = useChangeRequestStore();
+const draftStore = useDraftWorkspaceStore();
+const spaceStore = useSpaceStore();
+const userStore = useUserStore();
+const crActions = useChangeRequestActions();
+
+// `owner/repo` — only the repo half survives the sidebar's width.
+const repoShortName = computed(() => {
+	const full = spaceStore.doc?.repo_full_name || '';
+	return full.split('/').pop() || full;
+});
+
+const SYNC_STATUS_THEME = {
+	Success: 'green',
+	Error: 'red',
+	Partial: 'amber',
+};
+const syncStatusTheme = computed(
+	() => SYNC_STATUS_THEME[spaceStore.doc?.last_sync_status] || 'gray',
+);
+
+// The strip's own line about what "synced" costs you: the space is read-only,
+// and here is how stale it is.
+const readonlyLine = computed(() => {
+	const lastSync = spaceStore.doc?.last_sync_time;
+	if (!lastSync) return __('Read-only · never synced');
+	return __('Read-only · last synced {0}', [dayjsLocal(lastSync).fromNow()]);
+});
+
+// Submit / merge are blocked while local mutations are still syncing or
+// failed — submitting a stale backend CR would silently drop the user's
+// in-flight edits. Unsaved editor content (debounced autosave hasn't fired
+// yet) also counts: without this guard a user could type and submit
+// within the 10s autosave window, sending the previous content. Reorder
+// counts as pending too via isTreeReordering.
+const hasUnsyncedWork = computed(() => Boolean(draftStore.finalizationBlocker));
+// `Reload latest` is the first-line recovery for conflicts and sync
+// failures (specs/local_first_editor_migration_step_2.md). It appears
+// only when there is something to recover from — otherwise the action
+// would be a noisy noop next to a healthy sync pill.
+const showReloadLatest = computed(
+	() =>
+		draftStore.sync.conflict ||
+		draftStore.hasFailedMutations ||
+		draftStore.sync.status === 'failed',
+);
+const reloading = ref(false);
+async function onReloadLatest() {
+	reloading.value = true;
+	try {
+		await draftStore.reloadFromServer();
+	} catch (error) {
+		toast.error(
+			error.messages?.[0] ||
+				error.message ||
+				__('Could not reload from server'),
+		);
+	} finally {
+		reloading.value = false;
+	}
+}
+
+// Frozen while the CR is being finalized: the server walks it through In Review
+// and Approved on the way to a merge, and every one of those states is a badge,
+// a strip colour and a different action row. The user asked for one thing, so
+// they see one state until it lands.
+const changeRequestStatus = computed(() => {
+	if (crStore.finalizing) return finalizingStatus.value;
+	return crStore.currentChangeRequest?.status || 'Draft';
+});
+
+// The status as it was when finalizing began, held for the duration.
+const finalizingStatus = ref('Draft');
+watch(
+	() => crStore.finalizing,
+	(state, previous) => {
+		if (state && !previous) {
+			finalizingStatus.value = crStore.currentChangeRequest?.status || 'Draft';
+		}
+	},
+);
+
+const showChangesDialog = ref(false);
+
+const canShowMerge = computed(
+	() => userStore.isWikiManager && crStore.changeCount > 0,
+);
+
+const mergeButtonTitle = computed(() => {
+	if (draftStore.finalizationBlocker === 'conflict') {
+		return __('Reload latest before merging');
+	}
+	if (draftStore.finalizationBlocker === 'failed') {
+		return __('Resolve failed changes before merging');
+	}
+	if (draftStore.finalizationBlocker === 'pending') {
+		return __('Wait for pending changes to sync before merging');
+	}
+	if (draftStore.finalizationBlocker === 'unsaved') {
+		return __('Save your changes before merging');
+	}
+	if (spaceStore.isTreeReordering) {
+		return __('Please wait for reordering to finish before merging');
+	}
+	return '';
+});
+
+const mergeDisabled = computed(
+	() => spaceStore.isTreeReordering || hasUnsyncedWork.value,
+);
+
+const canShowDiscard = computed(
+	() =>
+		crStore.changeCount > 0 &&
+		['Draft', 'In Review', 'Changes Requested'].includes(
+			changeRequestStatus.value,
+		),
+);
+
+const menuOptions = computed(() => {
+	const options = [];
+	if (crStore.changeCount > 0) {
+		options.push({
+			label: __('View changes ({0})', [crStore.changeCount]),
+			icon: 'lucide-list',
+			onClick: () => {
+				showChangesDialog.value = true;
+			},
+		});
+	}
+	if (canShowDiscard.value) {
+		options.push({
+			label: __('Discard Changes'),
+			icon: 'lucide-archive',
+			onClick: crActions.discardChangeRequest,
+		});
+	}
+	return options;
+});
+
+const STRIP_CONFIG = {
+	Draft: {
+		class: 'bg-surface-gray-2 text-ink-gray-8',
+		title: __('Drafting Changes'),
+	},
+	'In Review': {
+		class: 'bg-surface-amber-2 text-ink-amber-7',
+		title: __('In Review'),
+	},
+	'Changes Requested': {
+		class: 'bg-surface-red-2 text-ink-red-7',
+		title: __('Changes Requested'),
+	},
+	Approved: {
+		class: 'bg-surface-green-2 text-ink-green-7',
+		title: __('Approved'),
+	},
+	Merged: {
+		class: 'bg-surface-green-2 text-ink-green-7',
+		title: __('Merged'),
+	},
+	Rejected: {
+		class: 'bg-surface-red-2 text-ink-red-7',
+		title: __('Rejected'),
+	},
+};
+
+const DEFAULT_STRIP = {
+	class: 'bg-surface-gray-2 text-ink-gray-8',
+	title: __('Change Request'),
+};
+
+const stripConfig = computed(
+	() => STRIP_CONFIG[changeRequestStatus.value] || DEFAULT_STRIP,
+);
+const stripClass = computed(() => stripConfig.value.class);
+const stripTitle = computed(() => stripConfig.value.title);
+
+const changeCountLabel = computed(() => {
+	const count = crStore.changeCount;
+	if (!count) return '';
+	return __('{0} {1} changed', [count, count === 1 ? __('page') : __('pages')]);
+});
+
+// The only place the author sees why a CR bounced back; the status badge covers
+// the generic states, so those blurbs are dropped.
+const reviewFeedback = computed(() => {
+	const cr = crStore.currentChangeRequest;
+	const showsReviewComment = ['Changes Requested', 'Rejected'].includes(
+		changeRequestStatus.value,
+	);
+	if (showsReviewComment && cr?.review_comment) {
+		return cr.reviewed_by
+			? __('{0} — {1}', [cr.review_comment, cr.reviewed_by])
+			: cr.review_comment;
+	}
+	return '';
+});
+</script>
diff --git a/frontend/src/components/SpaceSettings/PermissionsPanel.vue b/frontend/src/components/SpaceSettings/AccessPanel.vue
similarity index 84%
rename from frontend/src/components/SpaceSettings/PermissionsPanel.vue
rename to frontend/src/components/SpaceSettings/AccessPanel.vue
index 49ed1c7ed..9e9b4d70e 100644
--- a/frontend/src/components/SpaceSettings/PermissionsPanel.vue
+++ b/frontend/src/components/SpaceSettings/AccessPanel.vue
@@ -24,7 +24,7 @@
 		</div>
 
 		<!-- Roles table -->
-		<div class="overflow-hidden rounded-lg border border-outline-gray-2">
+		<div class="overflow-hidden rounded-6 border border-outline-gray-2">
 			<table class="w-full table-fixed text-sm">
 				<thead>
 					<tr class="bg-surface-gray-2 text-ink-gray-5">
@@ -63,7 +63,7 @@
 								variant="ghost"
 								theme="red"
 								size="sm"
-								icon="trash-2"
+								icon="lucide-trash-2"
 								@click="removeRole(idx)"
 							/>
 						</td>
@@ -88,18 +88,32 @@
 			{{ __('Only space admins can change access control.') }}
 		</p>
 
-		<!-- Accept contributions -->
-		<SettingsRow
-			class="border-t border-outline-gray-1"
-			:title="__('Accept Contributions')"
-			:description="contributionsDescription"
-		>
-			<Switch
-				v-model="allowContributions"
-				:disabled="!canManageAccess || savingContributions || isGitSynced"
-				@update:modelValue="updateContributions"
-			/>
-		</SettingsRow>
+		<!-- What a reader may do here, under who may see it -->
+		<div class="divide-y divide-outline-gray-1 border-t border-outline-gray-1">
+			<SettingsRow
+				:title="__('Accept Contributions')"
+				:description="contributionsDescription"
+			>
+				<Switch
+					v-model="allowContributions"
+					:disabled="!canManageAccess || savingContributions || isGitSynced"
+					@update:modelValue="updateContributions"
+				/>
+			</SettingsRow>
+
+			<SettingsRow
+				:title="__('Collect Feedback')"
+				:description="
+					__('Show a feedback widget on wiki pages to collect user reactions')
+				"
+			>
+				<Switch
+					v-model="enableFeedbackCollection"
+					:disabled="!canManageAccess || savingFeedback"
+					@update:modelValue="updateFeedbackSetting"
+				/>
+			</SettingsRow>
+		</div>
 
 		<!-- Primary Save, below the message, aligned right -->
 		<div v-if="canManageAccess" class="flex justify-end">
@@ -150,6 +164,8 @@ const savingRoles = ref(false);
 // Legacy spaces (created before this toggle) have a null column; treat as on.
 const allowContributions = ref(true);
 const savingContributions = ref(false);
+const enableFeedbackCollection = ref(false);
+const savingFeedback = ref(false);
 // Git-synced spaces are read-only; the toggle is moot and the server rejects it.
 const isGitSynced = computed(() => Boolean(props.space.doc?.git_synced));
 
@@ -192,6 +208,7 @@ watch(
 				doc.allow_contributions == null
 					? true
 					: Boolean(doc.allow_contributions);
+			enableFeedbackCollection.value = Boolean(doc.enable_feedback_collection);
 			spaceCapabilities.submit({ space: props.spaceId });
 		}
 	},
@@ -257,10 +274,10 @@ function addRole() {
 	const role = selectedRole.value;
 	if (!role) return;
 	roleRows.value.push({ role, permission_level: 'Read' });
-	// Combobox parks the picked label in its own input; reset() clears both the
+	// Combobox parks the picked label in its own input; clear() clears both the
 	// query and the selection, and re-emits an empty query so the next open
 	// starts from the unfiltered list.
-	roleCombobox.value?.reset();
+	roleCombobox.value?.clear();
 }
 
 onBeforeUnmount(() => clearTimeout(roleSearchTimer));
@@ -301,6 +318,22 @@ async function updateContributions(value) {
 	}
 }
 
+async function updateFeedbackSetting(value) {
+	savingFeedback.value = true;
+	try {
+		await props.space.setValue.submit({
+			enable_feedback_collection: value ? 1 : 0,
+		});
+	} catch (error) {
+		enableFeedbackCollection.value = !value;
+		toast.error(
+			error.messages?.[0] || __('Failed to update the feedback setting'),
+		);
+	} finally {
+		savingFeedback.value = false;
+	}
+}
+
 async function saveRoles() {
 	savingRoles.value = true;
 	try {
diff --git a/frontend/src/components/SpaceSettings/GeneralPanel.vue b/frontend/src/components/SpaceSettings/GeneralPanel.vue
index d487a995d..a3c8f1802 100644
--- a/frontend/src/components/SpaceSettings/GeneralPanel.vue
+++ b/frontend/src/components/SpaceSettings/GeneralPanel.vue
@@ -1,41 +1,37 @@
 <template>
 	<div class="divide-y divide-outline-gray-1">
 		<SettingsRow
-			:title="__('Published')"
-			:description="__('Make this wiki space publicly accessible')"
+			:title="__('Space Name')"
+			:description="__('Shown in the sidebar, the switcher and the reader header')"
 		>
-			<Switch
-				v-model="isPublished"
-				:disabled="updatingPublishSetting"
-				@update:modelValue="updatePublishSetting"
+			<FormControl
+				v-model="spaceName"
+				class="w-64"
+				type="text"
+				:disabled="savingName"
+				:placeholder="__('Space name')"
+				@blur="saveSpaceName"
+				@keydown.enter="$event.target.blur()"
 			/>
 		</SettingsRow>
 
 		<SettingsRow
-			:title="__('Enable Feedback Collection')"
-			:description="
-				__('Show a feedback widget on wiki pages to collect user reactions')
-			"
+			:title="__('Route Prefix')"
+			:description="routeDescription"
 		>
-			<Switch
-				v-model="enableFeedbackCollection"
-				:disabled="updatingFeedbackSetting"
-				@update:modelValue="updateFeedbackSetting"
-			/>
+			<Button variant="outline" @click="$emit('open-update-routes')">
+				{{ __('Update') }}
+			</Button>
 		</SettingsRow>
 
 		<SettingsRow
-			:title="__('Tabbed Navigation')"
-			:description="
-				__(
-					'Show a horizontal tab bar above the sidebar, with top-level groups as tabs',
-				)
-			"
+			:title="__('Published')"
+			:description="__('Make this wiki space publicly accessible')"
 		>
 			<Switch
-				v-model="enableTabs"
-				:disabled="updatingTabsSetting"
-				@update:modelValue="updateTabsSetting"
+				v-model="isPublished"
+				:disabled="updatingPublishSetting"
+				@update:modelValue="updatePublishSetting"
 			/>
 		</SettingsRow>
 
@@ -45,45 +41,11 @@
 				__('Shown in the reader header and on generated social preview images')
 			"
 		>
-			<div class="flex items-center gap-3">
-				<div
-					class="flex h-10 w-16 shrink-0 items-center justify-center overflow-hidden rounded border border-outline-gray-2 bg-surface-gray-1"
-				>
-					<img
-						v-if="logo"
-						:src="logo"
-						alt=""
-						class="h-full w-full object-contain"
-					/>
-					<span
-						v-else
-						class="lucide-image size-4 text-ink-gray-4"
-						aria-hidden="true"
-					/>
-				</div>
-				<Button variant="outline" :loading="uploadingLogo" @click="pickLogo">
-					{{ logo ? __('Replace') : __('Upload') }}
-				</Button>
-				<Button v-if="logo" variant="ghost" theme="red" @click="removeLogo">
-					{{ __('Remove') }}
-				</Button>
-				<input
-					ref="logoInput"
-					type="file"
-					accept="image/*"
-					class="hidden"
-					@change="handleLogoChange"
-				/>
-			</div>
-		</SettingsRow>
-
-		<SettingsRow
-			:title="__('Bulk Update Routes')"
-			:description="__('Change the base route for this space and all its pages')"
-		>
-			<Button variant="outline" @click="$emit('open-update-routes')">
-				{{ __('Update') }}
-			</Button>
+			<SpaceIdentityPicker
+				:identity="space.doc || {}"
+				:label="spaceName"
+				@update="saveIdentity"
+			/>
 		</SettingsRow>
 
 		<SettingsRow
@@ -98,8 +60,11 @@
 </template>
 
 <script setup>
-import { Button, SettingsRow, Switch, toast, useFileUpload } from 'frappe-ui';
-import { ref, watch } from 'vue';
+import { Button, FormControl, SettingsRow, Switch, toast } from 'frappe-ui';
+import { computed, ref, watch } from 'vue';
+
+import { useSpaceIdentitySaver } from '../../composables/useSpaceIdentitySaver.js';
+import SpaceIdentityPicker from '../SpaceIdentityPicker.vue';
 
 const props = defineProps({
 	space: {
@@ -110,31 +75,32 @@ const props = defineProps({
 
 defineEmits(['open-update-routes', 'open-clone']);
 
+const spaceName = ref('');
+const savingName = ref(false);
 const isPublished = ref(true);
-const enableFeedbackCollection = ref(false);
-const enableTabs = ref(false);
 const updatingPublishSetting = ref(false);
-const updatingFeedbackSetting = ref(false);
-const updatingTabsSetting = ref(false);
 
-const logo = ref('');
-const uploadingLogo = ref(false);
-const logoInput = ref(null);
-const fileUploader = useFileUpload();
+// Renaming the space never moves its pages — the route is changed on purpose,
+// through the flow next to it, because every published URL depends on it.
+const routeDescription = computed(() =>
+	__('Pages live under /{0}/…', [props.space.doc?.route || '']),
+);
 
 watch(
 	() => props.space.doc,
 	(doc) => {
 		if (doc) {
+			spaceName.value = doc.space_name || '';
 			isPublished.value = Boolean(doc.is_published);
-			enableFeedbackCollection.value = Boolean(doc.enable_feedback_collection);
-			enableTabs.value = Boolean(doc.enable_tabs);
-			logo.value = doc.app_switcher_logo || '';
 		}
 	},
 	{ immediate: true },
 );
 
+// The picker only says what was chosen; a settings panel has no Save button,
+// so the choice is written the moment it is made.
+const saveIdentity = useSpaceIdentitySaver(() => props.space);
+
 async function updatePublishSetting(value) {
 	updatingPublishSetting.value = true;
 	try {
@@ -147,70 +113,23 @@ async function updatePublishSetting(value) {
 	}
 }
 
-function pickLogo() {
-	logoInput.value?.click();
-}
-
-async function saveLogo(fileUrl) {
-	const previous = logo.value;
-	logo.value = fileUrl;
-	try {
-		await props.space.setValue.submit({ app_switcher_logo: fileUrl });
-	} catch (error) {
-		logo.value = previous;
-		toast.error(error.messages?.[0] || __('Failed to update logo'));
-	}
-}
-
-function removeLogo() {
-	saveLogo('');
-}
-
-async function handleLogoChange(event) {
-	const file = event.target.files?.[0];
-	// Reset the input so re-selecting the same file still fires `change`.
-	event.target.value = '';
-	if (!file) return;
-
-	uploadingLogo.value = true;
-	try {
-		const result = await fileUploader.upload(file, {
-			// Public: the reader header and the OG card are both anonymous
-			// surfaces, and the card renderer cannot read /private/files.
-			private: false,
-			upload_endpoint: '/api/method/wiki.api.upload_wiki_asset',
-		});
-		await saveLogo(result.file_url);
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Failed to upload logo'));
-	} finally {
-		uploadingLogo.value = false;
-	}
-}
-
-async function updateTabsSetting(value) {
-	updatingTabsSetting.value = true;
-	try {
-		await props.space.setValue.submit({ enable_tabs: value ? 1 : 0 });
-	} catch (error) {
-		console.error('Failed to update tabbed navigation setting:', error);
-		enableTabs.value = !value;
-	} finally {
-		updatingTabsSetting.value = false;
+async function saveSpaceName() {
+	const saved = props.space.doc?.space_name || '';
+	const next = spaceName.value.trim();
+	// An empty name would leave the space unnamed everywhere it is listed.
+	if (!next || next === saved) {
+		spaceName.value = saved;
+		return;
 	}
-}
-
-async function updateFeedbackSetting(value) {
-	updatingFeedbackSetting.value = true;
+	savingName.value = true;
 	try {
-		await props.space.setValue.submit({
-			enable_feedback_collection: value ? 1 : 0,
-		});
+		await props.space.setValue.submit({ space_name: next });
+		spaceName.value = next;
 	} catch (error) {
-		console.error('Failed to update feedback setting:', error);
-		enableFeedbackCollection.value = !value;
+		spaceName.value = saved;
+		toast.error(error.messages?.[0] || __('Failed to rename the space'));
 	} finally {
-		updatingFeedbackSetting.value = false;
+		savingName.value = false;
 	}
 }
 </script>
diff --git a/frontend/src/components/SpaceSettings/GitSyncPanel.vue b/frontend/src/components/SpaceSettings/GitSyncPanel.vue
index 682e9da21..e4197f1b4 100644
--- a/frontend/src/components/SpaceSettings/GitSyncPanel.vue
+++ b/frontend/src/components/SpaceSettings/GitSyncPanel.vue
@@ -31,11 +31,36 @@
 				</div>
 			</div>
 
-			<!-- Last sync time -->
+			<!-- Where in the repo the pages come from -->
+			<SettingsRow
+				:title="__('Docs Folder')"
+				:description="
+					docsSubdir
+						? __('Pages are read from this folder in the repository')
+						: __('Pages are read from the repository root')
+				"
+			>
+				<code class="truncate text-xs text-ink-gray-7">
+					{{ docsSubdir || '/' }}
+				</code>
+			</SettingsRow>
+
+			<!-- Last sync time, and the commit it landed on -->
 			<SettingsRow
 				:title="__('Last Synced')"
 				:description="lastSyncTime ? formatDateTime(lastSyncTime) : __('Never')"
-			/>
+			>
+				<a
+					v-if="lastSyncedCommit && repoFullName"
+					:href="`https://github.com/${repoFullName}/commit/${lastSyncedCommit}`"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-xs text-ink-gray-5 underline hover:text-ink-gray-7"
+					:title="__('View commit on GitHub')"
+				>
+					<code>{{ lastSyncedCommit.slice(0, 7) }}</code>
+				</a>
+			</SettingsRow>
 
 			<!-- Webhook: real-time push sync -->
 			<div class="py-3.5">
@@ -47,14 +72,14 @@
 				</div>
 				<div class="mt-2 flex items-center gap-2">
 					<code
-						class="flex-1 min-w-0 truncate rounded bg-surface-gray-2 px-2 py-1 text-xs text-ink-gray-7"
+						class="flex-1 min-w-0 truncate rounded-4 bg-surface-gray-2 px-2 py-1 text-xs text-ink-gray-7"
 					>
 						{{ webhookUrl }}
 					</code>
 					<Button
 						size="sm"
 						variant="subtle"
-						icon="copy"
+						icon="lucide-copy"
 						:title="__('Copy webhook URL')"
 						@click="copyWebhookUrl"
 					/>
@@ -70,7 +95,7 @@
 				</h3>
 				<Button
 					variant="ghost"
-					icon="refresh-cw"
+					icon="lucide-refresh-cw"
 					:loading="logs.loading"
 					@click="logs.reload()"
 				/>
@@ -107,7 +132,7 @@
 						</p>
 						<p
 							v-else-if="row.status === 'Error' && row.error"
-							class="mt-1 truncate text-sm text-ink-red-8"
+							class="mt-1 truncate text-sm text-ink-red-7"
 							:title="row.error"
 						>
 							{{ firstLine(row.error) }}
@@ -140,7 +165,7 @@
 		<CollapsibleSection :title="__('Configuration (.wiki.json)')">
 			<pre
 				v-if="wikiConfig"
-				class="max-h-80 overflow-auto whitespace-pre rounded bg-surface-gray-2 p-3 font-mono text-xs leading-relaxed text-ink-gray-8"
+				class="max-h-80 overflow-auto whitespace-pre rounded-4 bg-surface-gray-2 p-3 font-mono text-xs leading-relaxed text-ink-gray-8"
 			>{{ wikiConfig }}</pre>
 			<p v-else class="text-xs text-ink-gray-5">
 				{{ __('No .wiki.json in the repo — the page tree is inferred from the docs folder.') }}
@@ -176,6 +201,10 @@ const branch = computed(() => props.space.doc?.branch || '');
 const lastSyncStatus = computed(() => props.space.doc?.last_sync_status || '');
 const lastSyncTime = computed(() => props.space.doc?.last_sync_time || '');
 const wikiConfig = computed(() => props.space.doc?.wiki_config || '');
+const docsSubdir = computed(() => props.space.doc?.docs_subdir || '');
+const lastSyncedCommit = computed(
+	() => props.space.doc?.last_synced_commit_sha || '',
+);
 
 const webhookUrl = computed(
 	() => `${window.location.origin}/api/method/wiki.api.github.webhook`,
diff --git a/frontend/src/components/SpaceSettings/NavigationPanel.vue b/frontend/src/components/SpaceSettings/NavigationPanel.vue
new file mode 100644
index 000000000..258afc10a
--- /dev/null
+++ b/frontend/src/components/SpaceSettings/NavigationPanel.vue
@@ -0,0 +1,92 @@
+<template>
+	<div class="divide-y divide-outline-gray-1">
+		<SettingsRow
+			:title="__('Show in Space Switcher')"
+			:description="
+				__('List this space in the switcher and on the overview page')
+			"
+		>
+			<Switch
+				v-model="showInSwitcher"
+				:disabled="savingSwitcher"
+				@update:modelValue="updateShowInSwitcher"
+			/>
+		</SettingsRow>
+
+		<SettingsRow
+			:title="__('Order')"
+			:description="
+				__('Lower numbers come first; spaces that tie are ordered by name')
+			"
+		>
+			<FormControl
+				v-model="switcherOrder"
+				class="w-20"
+				type="number"
+				:disabled="savingOrder"
+				@blur="updateSwitcherOrder"
+				@keydown.enter="$event.target.blur()"
+			/>
+		</SettingsRow>
+	</div>
+</template>
+
+<script setup>
+import { FormControl, SettingsRow, Switch, toast } from 'frappe-ui';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+	space: {
+		type: Object,
+		required: true,
+	},
+});
+
+const showInSwitcher = ref(true);
+const switcherOrder = ref(0);
+const savingSwitcher = ref(false);
+const savingOrder = ref(false);
+
+watch(
+	() => props.space.doc,
+	(doc) => {
+		if (!doc) return;
+		showInSwitcher.value = Boolean(doc.show_in_switcher);
+		switcherOrder.value = doc.switcher_order ?? 0;
+	},
+	{ immediate: true },
+);
+
+async function updateShowInSwitcher(value) {
+	savingSwitcher.value = true;
+	try {
+		await props.space.setValue.submit({ show_in_switcher: value ? 1 : 0 });
+	} catch (error) {
+		showInSwitcher.value = !value;
+		toast.error(error.messages?.[0] || __('Failed to update the switcher'));
+	} finally {
+		savingSwitcher.value = false;
+	}
+}
+
+// The field is a number input, so an emptied box reads as 0 rather than as a
+// request to unset the order.
+async function updateSwitcherOrder() {
+	const saved = props.space.doc?.switcher_order ?? 0;
+	const next = Number(switcherOrder.value) || 0;
+	if (next === saved) {
+		switcherOrder.value = saved;
+		return;
+	}
+	savingOrder.value = true;
+	try {
+		await props.space.setValue.submit({ switcher_order: next });
+		switcherOrder.value = next;
+	} catch (error) {
+		switcherOrder.value = saved;
+		toast.error(error.messages?.[0] || __('Failed to update the order'));
+	} finally {
+		savingOrder.value = false;
+	}
+}
+</script>
diff --git a/frontend/src/components/SpaceSettings/SpaceSettings.vue b/frontend/src/components/SpaceSettings/SpaceSettings.vue
index 0b877d1d8..099cd2d53 100644
--- a/frontend/src/components/SpaceSettings/SpaceSettings.vue
+++ b/frontend/src/components/SpaceSettings/SpaceSettings.vue
@@ -1,9 +1,11 @@
 <template>
-	<SettingsDialog v-model="open" v-model:tab="selectedTab">
+	<SettingsDialog v-model:open="open" v-model:tab="selectedTab">
 		<SettingsSidebar>
 			<div>
-				<span class="block px-2 pt-1 pb-3 text-lg-semibold text-ink-gray-9">
-					{{ __('Settings') }}
+				<span
+					class="block truncate px-2 pt-1 pb-3 text-lg-semibold text-ink-gray-9"
+				>
+					{{ space.doc?.space_name || __('Space') }}
 				</span>
 				<div class="flex flex-col gap-1">
 					<SettingsNavItem
@@ -31,33 +33,66 @@
 					/>
 				</SettingsBody>
 			</SettingsPanel>
-			<SettingsPanel value="permissions">
+			<SettingsPanel value="navigation">
+				<SettingsHeader :title="__('Navigation')" />
+				<SettingsBody>
+					<NavigationPanel class="pt-6" :space="space" />
+				</SettingsBody>
+			</SettingsPanel>
+			<SettingsPanel value="access">
 				<SettingsHeader>
 					<div class="flex items-center gap-2">
 						<h2 class="text-lg font-semibold text-ink-gray-8">
-							{{ __('Permissions') }}
+							{{ __('Access') }}
 						</h2>
 						<Badge theme="violet" size="sm">
 							{{ __('Beta') }}
 						</Badge>
-						<Badge v-if="permissionsDirty" theme="orange" size="sm">
+						<Badge v-if="accessDirty" theme="amber" size="sm">
 							{{ __('Unsaved changes') }}
 						</Badge>
 					</div>
 				</SettingsHeader>
 				<SettingsBody>
-					<PermissionsPanel
+					<AccessPanel
 						class="pt-6"
 						:space="space"
 						:space-id="spaceId"
-						@update:dirty="permissionsDirty = $event"
+						@update:dirty="accessDirty = $event"
 					/>
 				</SettingsBody>
 			</SettingsPanel>
-			<SettingsPanel v-if="space.doc?.git_synced" value="git-sync">
-				<SettingsHeader :title="__('GitHub Sync')" />
+			<SettingsPanel value="git-sync">
+				<SettingsHeader :title="__('Git Sync')" />
 				<SettingsBody>
-					<GitSyncPanel class="pt-6" :space="space" :space-id="spaceId" />
+					<GitSyncPanel
+						v-if="isGitSynced"
+						class="pt-6"
+						:space="space"
+						:space-id="spaceId"
+					/>
+					<!-- A space is bound to a repository when it is created, so there
+					     is nothing to connect from here — say so rather than offer a
+					     button that leads nowhere. -->
+					<div
+						v-else
+						class="flex flex-col items-center justify-center py-16 text-center"
+					>
+						<span
+							class="lucide-git-branch size-8 text-ink-gray-4"
+							aria-hidden="true"
+						/>
+						<p class="mt-3 text-base-medium text-ink-gray-8">
+							{{ __('Not connected to a repository') }}
+						</p>
+						<p class="mt-1 max-w-sm text-sm text-ink-gray-5">
+							{{
+								__(
+									'A space is connected to GitHub when it is created. A connected space is read-only in the editor — its pages come from the repository.',
+								)
+							}}
+						</p>
+					</div>
 				</SettingsBody>
 			</SettingsPanel>
 		</SettingsContent>
@@ -76,9 +111,10 @@ import {
 	SettingsSidebar,
 } from 'frappe-ui';
 import { computed, ref } from 'vue';
+import AccessPanel from './AccessPanel.vue';
 import GeneralPanel from './GeneralPanel.vue';
 import GitSyncPanel from './GitSyncPanel.vue';
-import PermissionsPanel from './PermissionsPanel.vue';
+import NavigationPanel from './NavigationPanel.vue';
 
 const props = defineProps({
 	modelValue: {
@@ -106,23 +142,18 @@ const open = computed({
 	set: (value) => emit('update:modelValue', value),
 });
 
-const tabs = computed(() => {
-	const items = [
-		{ label: __('General'), value: 'general', icon: 'lucide-settings' },
-		{ label: __('Permissions'), value: 'permissions', icon: 'lucide-lock' },
-	];
-	// GitHub Sync settings only apply to git-synced spaces.
-	if (props.space.doc?.git_synced) {
-		items.push({
-			label: __('GitHub Sync'),
-			value: 'git-sync',
-			// lucide-static dropped brand icons, so no `lucide-github`.
-			icon: 'lucide-git-branch',
-		});
-	}
-	return items;
-});
+const isGitSynced = computed(() => Boolean(props.space.doc?.git_synced));
+
+// The tab set does not depend on the space: a tab that appears only for some
+// spaces teaches people the settings move around.
+const tabs = computed(() => [
+	{ label: __('General'), value: 'general', icon: 'lucide-settings' },
+	{ label: __('Navigation'), value: 'navigation', icon: 'lucide-list-tree' },
+	{ label: __('Access'), value: 'access', icon: 'lucide-lock' },
+	// lucide-static dropped brand icons, so no `lucide-github`.
+	{ label: __('Git Sync'), value: 'git-sync', icon: 'lucide-git-branch' },
+]);
 
 const selectedTab = ref('general');
-const permissionsDirty = ref(false);
+const accessDirty = ref(false);
 </script>
diff --git a/frontend/src/components/SpaceSidebar.vue b/frontend/src/components/SpaceSidebar.vue
new file mode 100644
index 000000000..3ac8d7f16
--- /dev/null
+++ b/frontend/src/components/SpaceSidebar.vue
@@ -0,0 +1,133 @@
+<template>
+	<!-- Level 1 of the drill-in model: the sidebar becomes the space. Fixed
+	     width and no collapse toggle — the tree is the navigation here, so
+	     collapsing it would leave the space with no way around.
+
+	     `aside` is what this region is; `contents` keeps the wrapper out of the
+	     shell's flex row so Sidebar still sizes itself. -->
+	<aside class="contents">
+		<Sidebar width="260px" disable-collapse>
+			<div
+				class="flex h-12 shrink-0 items-center gap-1.5 border-b border-outline-gray-2 px-2"
+			>
+				<Button
+					variant="ghost"
+					icon="lucide-chevron-left"
+					:title="__('Back to Overview')"
+					:route="{ name: 'Overview' }"
+				/>
+				<!-- The header tile is the same control as the settings row: a
+				     space's mark is worth changing from where you look at it.
+				     A space you cannot write still shows its mark, unclickable. -->
+				<SpaceIdentityPicker
+					v-if="spaceStore.canWriteSpace"
+					:identity="spaceStore.doc || {}"
+					:label="spaceName"
+					size="lg"
+					@update="saveIdentity"
+				/>
+				<SpaceAvatar
+					v-else
+					:space="spaceStore.doc || {}"
+					:label="spaceName"
+					size="lg"
+				/>
+				<span class="min-w-0 flex-1 truncate text-base-medium text-ink-gray-8">
+					{{ spaceName }}
+				</span>
+				<Dropdown :options="spaceActions" placement="right">
+					<Button
+						variant="ghost"
+						icon="lucide-more-horizontal"
+						:title="__('Space actions')"
+					/>
+				</Dropdown>
+			</div>
+
+			<SpaceModeStrip />
+
+			<!-- Sidebar is a flex column, so the tree needs a sized track to scroll
+			     inside rather than the sidebar's full height. -->
+			<div class="flex min-h-0 flex-1 flex-col">
+				<SpaceTreePanel
+					:space-id="spaceId"
+					:space-name="spaceStore.doc?.space_name"
+					:space-route="spaceStore.doc?.route"
+					:space-loaded="spaceStore.isLoaded"
+					:tree-data="spaceStore.treeData"
+					:space-root-node="spaceStore.treeData?.root_group || ''"
+					:change-type-map="spaceStore.changeTypeMap"
+					:readonly="spaceStore.isGitSynced"
+					:selected-page-id="spaceStore.selectedPageId"
+					:selected-draft-key="spaceStore.selectedDraftKey"
+					compact-header
+					@refresh="spaceStore.refreshTree"
+					@reorder-state-change="spaceStore.setTreeReordering"
+				>
+					<!-- The sync notice floats over the bottom of the tree rather
+					     than taking a row of its own. The sidebar is one vertical
+					     stack, so anything in flow above the tree shoves it down
+					     every time the notice comes and goes — a jump on every
+					     save, for a message usually gone in a second. -->
+					<template #above-footer>
+						<SyncStateAlert class="shadow-md" />
+					</template>
+				</SpaceTreePanel>
+			</div>
+		</Sidebar>
+	</aside>
+</template>
+
+<script setup>
+import { Button, Dropdown, Sidebar } from 'frappe-ui';
+import { computed } from 'vue';
+
+import { useSpaceIdentitySaver } from '../composables/useSpaceIdentitySaver.js';
+import { useSpaceSettings } from '../composables/useSpaceSettings';
+import { useSpaceStore } from '../stores/space';
+import SpaceAvatar from './SpaceAvatar.vue';
+import SpaceIdentityPicker from './SpaceIdentityPicker.vue';
+import SpaceModeStrip from './SpaceModeStrip.vue';
+import SpaceTreePanel from './SpaceTreePanel.vue';
+import SyncStateAlert from './SyncStateAlert.vue';
+
+const props = defineProps({
+	spaceId: { type: String, required: true },
+});
+
+const spaceStore = useSpaceStore();
+const { open: openSpaceSettings } = useSpaceSettings();
+
+const spaceName = computed(
+	() => spaceStore.doc?.space_name || spaceStore.doc?.name || props.spaceId,
+);
+
+// The store's document resource is replaced when the route moves to another
+// space, so the saver reads it each time rather than closing over one.
+const saveIdentity = useSpaceIdentitySaver(() => spaceStore.space);
+
+const spaceActions = computed(() => {
+	const options = [
+		{
+			label: __('Space settings'),
+			icon: 'lucide-settings',
+			onClick: openSpaceSettings,
+		},
+	];
+	if (spaceStore.doc?.route) {
+		options.push({
+			label: __('View live site'),
+			icon: 'lucide-external-link',
+			onClick: () => window.open(`/${spaceStore.doc.route}`, '_blank'),
+		});
+	}
+	if (spaceStore.isGitSynced) {
+		options.push({
+			label: __('Sync now'),
+			icon: 'lucide-refresh-cw',
+			onClick: () => spaceStore.syncNow(),
+		});
+	}
+	return options;
+});
+</script>
diff --git a/frontend/src/components/SpaceTreePanel.vue b/frontend/src/components/SpaceTreePanel.vue
index 37383f384..baddff26a 100644
--- a/frontend/src/components/SpaceTreePanel.vue
+++ b/frontend/src/components/SpaceTreePanel.vue
@@ -8,9 +8,9 @@
 		>
 			<Button
 				variant="ghost"
-				icon="arrow-left"
-				:title="__('Back to Spaces')"
-				:route="{ name: 'SpaceList' }"
+				icon="lucide-arrow-left"
+				:title="__('Back to Overview')"
+				:route="{ name: 'Overview' }"
 			/>
 			<div class="min-w-0 flex-1">
 				<div class="truncate text-base-medium leading-none text-ink-gray-8">
@@ -23,20 +23,23 @@
 			<Button
 				v-if="spaceRoute"
 				variant="ghost"
-				icon="external-link"
+				icon="lucide-external-link"
 				:title="__('View Space')"
 				:link="'/' + spaceRoute"
 			/>
 			<Button
 				variant="ghost"
-				icon="settings"
+				icon="lucide-settings"
 				:title="__('Settings')"
 				@click="emit('open-settings')"
 			/>
 		</div>
 
-		<div v-if="spaceLoaded && treeData" class="flex-1 overflow-auto px-2 pt-2 pb-10">
+		<!-- The list owns the scroller: its search row and New page footer have
+		     to stay put while the tree between them scrolls. -->
+		<div v-if="spaceLoaded && treeData" class="flex min-h-0 flex-1 flex-col pt-2">
 			<WikiDocumentList
+				class="min-h-0 flex-1"
 				:tree-data="treeData"
 				:change-type-map="changeTypeMap"
 				:space-id="spaceId"
@@ -44,12 +47,14 @@
 				:root-node="treeData.root_group || ''"
 				:selected-page-id="selectedPageId"
 				:selected-draft-key="selectedDraftKey"
-				:can-manage-tabs="canManageTabs"
-				:space-root-node="spaceRootNode"
 				:space-route="spaceRoute"
 				@refresh="emit('refresh')"
 				@reorder-state-change="emit('reorder-state-change', $event)"
-			/>
+			>
+				<template v-if="$slots['above-footer']" #above-footer>
+					<slot name="above-footer" />
+				</template>
+			</WikiDocumentList>
 		</div>
 		<div v-else class="flex-1 overflow-auto p-2">
 			<!-- Sidebar tree skeleton -->
@@ -57,22 +62,22 @@
 				<div
 					v-for="i in 8"
 					:key="i"
-					class="flex items-center gap-2 px-2 py-1.5 rounded"
+					class="flex items-center gap-2 px-2 py-1.5 rounded-4"
 				>
-					<Skeleton class="size-4 rounded shrink-0" />
+					<Skeleton class="size-4 rounded-4 shrink-0" />
 					<Skeleton
-						class="h-3.5 rounded"
+						class="h-3.5 rounded-4"
 						:style="{ width: `${60 + (i % 3) * 25}%` }"
 					/>
 				</div>
 				<div
 					v-for="i in 4"
 					:key="'nested-' + i"
-					class="flex items-center gap-2 px-2 py-1.5 rounded ml-6"
+					class="flex items-center gap-2 px-2 py-1.5 rounded-4 ml-6"
 				>
-					<Skeleton class="size-4 rounded shrink-0" />
+					<Skeleton class="size-4 rounded-4 shrink-0" />
 					<Skeleton
-						class="h-3.5 rounded"
+						class="h-3.5 rounded-4"
 						:style="{ width: `${50 + (i % 2) * 30}%` }"
 					/>
 				</div>
@@ -91,17 +96,11 @@ defineProps({
 	spaceName: { type: String, default: '' },
 	spaceRoute: { type: String, default: '' },
 	spaceLoaded: { type: Boolean, default: false },
-	// Already narrowed to the active tab's subtree by useSpaceTabs; `root_group`
-	// is that tab, so top-level drops reparent into it.
 	treeData: { type: Object, default: null },
 	changeTypeMap: { type: Map, default: () => new Map() },
 	readonly: { type: Boolean, default: false },
 	selectedPageId: { type: String, default: null },
 	selectedDraftKey: { type: String, default: null },
-	canManageTabs: { type: Boolean, default: false },
-	// The space root, where a new tab must be parented regardless of which tab
-	// is currently being browsed.
-	spaceRootNode: { type: String, default: '' },
 	compactHeader: { type: Boolean, default: false },
 });
 
diff --git a/frontend/src/components/SpaceWelcome.vue b/frontend/src/components/SpaceWelcome.vue
index 97c51c100..7e22ebc56 100644
--- a/frontend/src/components/SpaceWelcome.vue
+++ b/frontend/src/components/SpaceWelcome.vue
@@ -1,52 +1,97 @@
 <template>
     <!-- A git-synced space pulls its pages from GitHub on first open, so until
          that sync lands there's nothing to select — show progress instead of
-         the "Select a page" empty state. -->
-    <div v-if="isSyncing" class="flex flex-col items-center justify-center h-full py-16">
-        <span class="lucide-loader-2 size-12 text-ink-gray-4 mb-6 animate-spin" aria-hidden="true" />
-        <h2 class="text-2xl-medium text-ink-gray-7 mb-2">
+         an empty state that invites a page the repo would overwrite. -->
+    <div v-if="isSyncing" class="flex h-full flex-col items-center justify-center px-8 text-center">
+        <span class="lucide-loader-2 size-8 animate-spin text-ink-gray-4" aria-hidden="true" />
+        <p class="mt-3 text-base-medium text-ink-gray-8">
             {{ __('Sync in progress') }}
-        </h2>
-        <p class="text-ink-gray-5 text-center max-w-md">
+        </p>
+        <p class="mt-1 max-w-md text-sm text-ink-gray-5">
             {{ __('Pulling the latest pages from GitHub. This will only take a moment.') }}
         </p>
     </div>
 
-    <div v-else class="flex flex-col items-center justify-center h-full py-16">
-        <span class="lucide-file-text size-16 text-ink-gray-3 mb-6" aria-hidden="true" />
-        <h2 class="text-2xl-medium text-ink-gray-7 mb-2">
-            {{ __('Select a page') }}
-        </h2>
-        <p class="text-ink-gray-5 text-center max-w-md">
-            {{ __('Choose a page from the sidebar to view and edit, or create a new page to get started.') }}
+    <!-- Nothing at all while the tree is still in flight: an unloaded tree looks
+         exactly like an empty one, and guessing wrong flashes "create your first
+         page" at a space that has hundreds. Same trap the sidebar's
+         hasLoadedTree gate exists for. -->
+    <div v-else-if="!isTreeLoaded" />
+
+    <!-- The sidebar states the fact ("No pages yet") in the tree, where the
+         pages would be. This column carries the action, so the two columns read
+         as one message instead of the same message twice. -->
+    <div v-else class="flex h-full flex-col items-center justify-center px-8 text-center">
+        <span class="lucide-file-text size-8 text-ink-gray-4" aria-hidden="true" />
+        <p class="mt-3 text-base-medium text-ink-gray-8">
+            {{ hasPages ? __('Pick a page to edit') : emptyHeading }}
+        </p>
+        <p class="mt-1 max-w-md text-sm text-ink-gray-5">
+            {{ hasPages ? __('Choose a page from the tree on the left.') : emptyHint }}
         </p>
+        <Button
+            v-if="!readonly && !hasPages"
+            class="mt-4"
+            variant="subtle"
+            :label="__('New page')"
+            @click="requestNewPage"
+        >
+            <template #prefix>
+                <span class="lucide-plus size-4" aria-hidden="true" />
+            </template>
+        </Button>
     </div>
 </template>
 
 <script setup>
-import { getCachedDocumentResource, usePageMeta } from 'frappe-ui';
+import { useNewPageRequest } from '@/composables/useNewPageRequest';
+import { useSpaceStore } from '@/stores/space';
+import { Button, usePageMeta } from 'frappe-ui';
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 
-const route = useRoute();
+// Passed down by SpaceDetails' router-view, which reads it off the space store.
+defineProps({
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
+});
 
-// SpaceDetails (the parent layout) creates the Wiki Space document resource,
-// so this is always a cache read — never a fetch.
-const space = computed(() =>
-	getCachedDocumentResource('Wiki Space', route.params.spaceId),
-);
+const spaceStore = useSpaceStore();
+const { requestNewPage } = useNewPageRequest();
 
 // In progress while the first sync is queued/running — or for a synced space
 // that hasn't recorded a status yet (the auto first-sync is about to kick).
 const isSyncing = computed(() => {
-	const doc = space.value?.doc;
+	const doc = spaceStore.doc;
 	if (!doc?.git_synced) return false;
 	const status = doc.last_sync_status;
 	return status === 'Pending' || status === 'Running' || !status;
 });
 
+// treeData stays null until the tree lands, on both the CR and read-only paths.
+const isTreeLoaded = computed(() => spaceStore.treeData != null);
+
+// Same test the sidebar's own empty state uses, so the two columns never
+// disagree about whether the space has anything in it.
+const hasPages = computed(
+	() => (spaceStore.treeData?.children?.length || 0) > 0,
+);
+
+const emptyHeading = computed(() =>
+	spaceStore.isGitSynced
+		? __('Nothing synced yet')
+		: __('Create your first page'),
+);
+
+const emptyHint = computed(() =>
+	spaceStore.isGitSynced
+		? __('No pages have come across from the repository.')
+		: __("This space doesn't have any pages yet."),
+);
+
 usePageMeta(() => {
-	if (!space.value?.doc) return;
-	return { title: `${space.value.doc.space_name} | Frappe Wiki` };
+	if (!spaceStore.doc) return;
+	return { title: `${spaceStore.doc.space_name} | Frappe Wiki` };
 });
 </script>
diff --git a/frontend/src/components/SubmitForReviewButton.vue b/frontend/src/components/SubmitForReviewButton.vue
new file mode 100644
index 000000000..c923e6b15
--- /dev/null
+++ b/frontend/src/components/SubmitForReviewButton.vue
@@ -0,0 +1,130 @@
+<template>
+	<!-- One submit trigger, two placements: the sidebar mode strip and the
+	     editor header (spec 02, decision 2). The confirm dialog travels with
+	     the button so neither placement depends on the other being mounted. -->
+	<Button
+		v-if="visible"
+		v-bind="$attrs"
+		:variant="variant"
+		:theme="theme"
+		:size="size"
+		:loading="crStore.isSubmitting"
+		:disabled="submitDisabled"
+		:title="submitButtonTitle"
+		@click="showConfirmDialog = true"
+	>
+		{{ __('Submit for review') }}
+	</Button>
+
+	<!-- Dialog's own title/message/icon/actions, not hand-rolled slots: the
+	     component already lays out a confirm, down to the themed icon disc and
+	     the action row, and the slot version was a narrower, plainer copy of
+	     it. `lg` is the component's default width; `sm` squeezed one sentence
+	     onto three lines. -->
+	<Dialog
+		v-model:open="showConfirmDialog"
+		:title="__('Submit for review')"
+		:message="confirmMessage"
+		:icon="{ name: 'lucide-git-branch', theme: 'blue' }"
+		:actions="confirmActions"
+	/>
+</template>
+
+<script setup>
+import { Button, Dialog } from 'frappe-ui';
+import { computed, ref } from 'vue';
+import { useChangeRequestActions } from '../composables/useChangeRequestActions';
+import { useChangeRequestStore } from '../stores/changeRequest';
+import { useDraftWorkspaceStore } from '../stores/draftWorkspace';
+import { useSpaceStore } from '../stores/space';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps({
+	variant: {
+		type: String,
+		default: 'solid',
+	},
+	theme: {
+		type: String,
+		default: 'gray',
+	},
+	size: {
+		type: String,
+		default: 'md',
+	},
+});
+
+const crStore = useChangeRequestStore();
+const draftStore = useDraftWorkspaceStore();
+const spaceStore = useSpaceStore();
+const crActions = useChangeRequestActions();
+
+const showConfirmDialog = ref(false);
+
+// A submitted or merging change request has nothing left to submit, and a
+// synced space never opens one at all.
+const visible = computed(() => {
+	if (spaceStore.isGitSynced) return false;
+	if (!crStore.isChangeRequestMode) return false;
+	if (crStore.finalizing) return false;
+	// Autosave takes ten seconds to turn typing into a change row. Counting an
+	// unsaved buffer as submittable work keeps the button from disappearing in
+	// that window — there is no Save button left to fill it.
+	if (crStore.changeCount === 0 && !draftStore.hasUnsavedEditorContent) {
+		return false;
+	}
+	const status = crStore.currentChangeRequest?.status || 'Draft';
+	return status === 'Draft' || status === 'Changes Requested';
+});
+
+// Submitting is blocked while local mutations are still syncing or failed:
+// a stale backend CR would silently drop the user's in-flight edits.
+// An unsaved editor buffer is not a blocker: the action flushes it first.
+const submitDisabled = computed(() => {
+	const blocker = draftStore.finalizationBlocker;
+	return Boolean(blocker) && blocker !== 'unsaved';
+});
+
+const submitButtonTitle = computed(() => {
+	if (draftStore.finalizationBlocker === 'conflict') {
+		return __('Reload latest before submitting');
+	}
+	if (draftStore.finalizationBlocker === 'failed') {
+		return __('Resolve failed changes before submitting');
+	}
+	if (draftStore.finalizationBlocker === 'pending') {
+		return __('Wait for pending changes to sync before submitting');
+	}
+	return '';
+});
+
+// The count is the whole point of the confirmation: what is about to leave
+// your hands. Phrased as the consequence rather than "are you sure", which
+// asks the user to re-derive it.
+const confirmMessage = computed(() =>
+	__('{0} pending {1} will be sent for review.', [
+		crStore.changeCount,
+		crStore.changeCount === 1 ? __('change') : __('changes'),
+	]),
+);
+
+const confirmActions = computed(() => [
+	{
+		label: __('Cancel'),
+		variant: 'outline',
+		onClick: ({ close }) => close(),
+	},
+	{
+		label: __('Submit'),
+		variant: 'solid',
+		loading: crStore.isSubmitting,
+		onClick: ({ close }) => confirmSubmit(close),
+	},
+]);
+
+function confirmSubmit(closeDialog) {
+	closeDialog();
+	crActions.submitForReview();
+}
+</script>
diff --git a/frontend/src/components/SyncStateAlert.vue b/frontend/src/components/SyncStateAlert.vue
new file mode 100644
index 000000000..4424c17fc
--- /dev/null
+++ b/frontend/src/components/SyncStateAlert.vue
@@ -0,0 +1,17 @@
+<template>
+	<Alert
+		v-if="label"
+		data-testid="sync-state-alert"
+		:title="label"
+		:description="description || undefined"
+		:theme="theme"
+	/>
+</template>
+
+<script setup>
+import { Alert } from 'frappe-ui';
+
+import { useSyncState } from '../composables/useSyncState';
+
+const { label, theme, description } = useSyncState();
+</script>
diff --git a/frontend/src/components/WikiBreadcrumbs.vue b/frontend/src/components/WikiBreadcrumbs.vue
deleted file mode 100644
index e8fea6781..000000000
--- a/frontend/src/components/WikiBreadcrumbs.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-    <Breadcrumbs :items="breadcrumbItems" />
-</template>
-
-<script setup>
-import { Breadcrumbs, createResource } from 'frappe-ui';
-import { computed, onMounted, ref } from 'vue';
-
-const props = defineProps({
-	pageId: {
-		type: String,
-		required: true,
-	},
-});
-
-const breadcrumbData = ref(null);
-
-const breadcrumbResource = createResource({
-	url: 'wiki.frappe_wiki.doctype.wiki_document.wiki_document.get_breadcrumbs',
-	makeParams() {
-		return {
-			name: props.pageId,
-		};
-	},
-	onSuccess(data) {
-		breadcrumbData.value = data;
-	},
-});
-
-onMounted(() => {
-	breadcrumbResource.fetch();
-});
-
-const breadcrumbItems = computed(() => {
-	const items = [
-		{
-			label: __('Spaces'),
-			route: { name: 'SpaceList' },
-		},
-	];
-
-	// Add space if available
-	if (breadcrumbData.value?.space) {
-		items.push({
-			label:
-				breadcrumbData.value.space.space_name ||
-				breadcrumbData.value.space.name,
-			route: {
-				name: 'SpaceDetails',
-				params: { spaceId: breadcrumbData.value.space.name },
-			},
-		});
-	}
-
-	// Add ancestor groups (skip the root group since that's the space)
-	if (breadcrumbData.value?.ancestors) {
-		for (const ancestor of breadcrumbData.value.ancestors) {
-			// Skip root groups (they're represented by the space)
-			if (
-				ancestor.is_group &&
-				breadcrumbData.value.ancestors.indexOf(ancestor) === 0
-			) {
-				continue;
-			}
-			items.push({
-				label: ancestor.title,
-				route: ancestor.is_group
-					? {
-							name: 'SpaceDetails',
-							params: { spaceId: breadcrumbData.value.space?.name },
-						}
-					: { name: 'WikiDocument', params: { pageId: ancestor.name } },
-			});
-		}
-	}
-
-	// Add current document title if available
-	if (breadcrumbData.value?.current) {
-		items.push({
-			label: breadcrumbData.value.current.title,
-			route: { name: 'WikiDocument', params: { pageId: props.pageId } },
-		});
-	}
-
-	return items;
-});
-</script>
diff --git a/frontend/src/components/WikiDocumentList.vue b/frontend/src/components/WikiDocumentList.vue
index f2cca650f..600ad67a3 100644
--- a/frontend/src/components/WikiDocumentList.vue
+++ b/frontend/src/components/WikiDocumentList.vue
@@ -1,8 +1,15 @@
 <template>
-	<div>
-		<div class="flex items-center gap-2 mb-3">
-			<FormControl v-if="treeData.children && treeData.children.length > 0" class="flex-1" type="text"
-				v-model="searchQuery" :placeholder="__('Search pages...')" @keydown.esc="searchQuery = ''">
+	<div class="flex h-full min-h-0 flex-col">
+		<!-- Search sits above the scroller, so it stays put while results move. -->
+		<div v-if="hasPages" class="shrink-0 px-2 pb-2">
+			<TextInput
+				v-model="searchQuery"
+				class="w-full"
+				size="sm"
+				type="text"
+				:placeholder="__('Search pages...')"
+				@keydown.esc="searchQuery = ''"
+			>
 				<template #prefix>
 					<span class="lucide-search size-4 text-ink-gray-4" aria-hidden="true" />
 				</template>
@@ -11,57 +18,85 @@
 						<span class="lucide-x size-4 text-ink-gray-5 hover:text-ink-gray-7" aria-hidden="true" />
 					</button>
 				</template>
-			</FormControl>
-			<Dropdown v-if="!readonly" class="ml-auto" :options="addOptionsWithTab">
-				<Button :title="__('Add')" icon="plus" variant="subtle" />
-			</Dropdown>
+			</TextInput>
 		</div>
 
-		<div v-if="isSearching && !hasResults"
-			class="flex flex-col items-center justify-center py-16 border border-dashed border-outline-gray-2 rounded-lg">
-			<span class="lucide-search size-12 text-ink-gray-4 mb-4" aria-hidden="true" />
-			<h3 class="text-lg-medium text-ink-gray-7 mb-2">{{ __('No matches') }}</h3>
-			<p class="text-sm text-ink-gray-5">{{ __('No pages or groups match "{0}"', [searchQuery]) }}</p>
-		</div>
+		<ScrollArea class="min-h-0 flex-1" viewport-class="px-2 pb-2">
+			<p
+				v-if="isSearching && !hasResults"
+				class="px-1.5 py-3 text-sm text-ink-gray-5"
+			>
+				{{ __('No pages match "{0}"', [searchQuery]) }}
+			</p>
 
-		<div v-else-if="!treeData.children || treeData.children.length === 0"
-			class="flex flex-col items-center justify-center py-16 border border-dashed border-outline-gray-2 rounded-lg">
-			<span class="lucide-file-text size-12 text-ink-gray-4 mb-4" aria-hidden="true" />
-			<h3 class="text-lg-medium text-ink-gray-7 mb-2">{{ __('No pages yet') }}</h3>
-			<template v-if="!readonly">
-				<p class="text-sm text-ink-gray-5 mb-6">{{ __('Create your first page to get started') }}</p>
-				<Button variant="solid" @click="openCreateDialog(rootNode, false)">
-					<template #prefix>
-						<span class="lucide-file-plus size-4" aria-hidden="true" />
-					</template>
-					{{ __('Create First Page') }}
-				</Button>
-			</template>
-			<p v-else class="text-sm text-ink-gray-5">{{ __('No pages have synced from the repository yet') }}</p>
-		</div>
+			<div
+				v-else-if="!hasPages"
+				class="flex flex-col items-center justify-center px-2 py-10 text-center"
+			>
+				<span class="lucide-file-text size-8 text-ink-gray-4 mb-3" aria-hidden="true" />
+				<h3 class="text-base-medium text-ink-gray-7 mb-1">{{ __('No pages yet') }}</h3>
+				<p class="text-sm text-ink-gray-5">
+					{{ readonly
+						? __('No pages have synced from the repository yet')
+						: __('Create your first page to get started') }}
+				</p>
+			</div>
 
-		<div v-else>
+			<!-- Searching swaps the tree for the ranked flat list; the rows are
+			     the same component, so selection, badges and row actions hold. -->
 			<WikiTree
-				:items="treeForRender.children"
+				v-else
+				:items="isSearching ? matches : treeData.children"
 				:change-type-map="changeTypeMap"
 				:parent-name="rootNode"
 				:space-id="spaceId"
 				:readonly="readonly"
 				:search-active="isSearching"
-				:expanded-override="expandedOverride"
 				:score-map="scoreMap"
 				:selected-page-id="selectedPageId"
 				:selected-draft-key="selectedDraftKey"
-				:can-manage-tabs="canManageTabs"
 				@create="openCreateDialog"
 				@delete="openDeleteDialog"
 				@rename="openRenameDialog"
 				@external-link="openExternalLinkDialog"
 				@edit-external-link="openEditExternalLinkDialog"
-				@tab-settings="openTabSettingsDialog"
-				@convert-to-tab="openConvertTabDialog"
+				@reveal-group="revealGroup"
 				@drag-state-change="handleDragStateChange"
 			/>
+		</ScrollArea>
+
+		<!-- New page is the one thing this column is asked for constantly, so it
+		     gets a fixed footer; the rarer kinds live behind the overflow menu.
+		     A chevron would read as "more of the same button"; these are other
+		     kinds of thing, so it takes the three-dot mark every other overflow
+		     menu in the app uses. -->
+		<div
+			v-if="!readonly"
+			class="relative flex shrink-0 items-center gap-1.5 border-t border-outline-gray-2 p-2"
+		>
+			<!-- Anything the sidebar wants to show above the footer without
+			     moving the tree. Out of flow, and `bottom-full` pins it to the
+			     footer's top edge whatever height the footer happens to be. -->
+			<div
+				v-if="$slots['above-footer']"
+				class="pointer-events-none absolute inset-x-2 bottom-full z-10 mb-2"
+			>
+				<div class="pointer-events-auto">
+					<slot name="above-footer" />
+				</div>
+			</div>
+			<Button class="flex-1" variant="subtle" :label="__('New page')" @click="openCreateDialog(rootNode, false)">
+				<template #prefix>
+					<span class="lucide-plus size-4" aria-hidden="true" />
+				</template>
+			</Button>
+			<Dropdown :options="addOptions" placement="right">
+				<Button variant="subtle" :title="__('Add a group or link')">
+					<template #icon>
+						<span class="lucide-more-horizontal size-4" aria-hidden="true" />
+					</template>
+				</Button>
+			</Dropdown>
 		</div>
 
 		<Dialog v-model:open="showCreateDialog">
@@ -80,10 +115,6 @@
 							@update:model-value="handleCreateRouteInput" />
 						<ErrorMessage class="mt-1.5" :message="createRouteError" />
 					</div>
-					<div v-if="createIsTab">
-						<label class="block text-xs text-ink-gray-5 mb-1.5">{{ __('Icon') }}</label>
-						<IconPicker v-model="createTabIcon" inline />
-					</div>
 				</div>
 			</template>
 			<template #actions="{ close }">
@@ -96,58 +127,6 @@
 			</template>
 		</Dialog>
 
-		<Dialog v-model:open="showTabSettingsDialog">
-			<template #title>
-				<h3 class="text-2xl-semibold text-ink-gray-9">
-					{{ __('Tab settings') }}
-				</h3>
-			</template>
-			<template #default>
-				<div class="space-y-4">
-					<p class="text-sm text-ink-gray-6">
-						{{ __('Tabs appear in the horizontal bar above the page tree. Only top-level groups can be tabs.') }}
-					</p>
-					<FormControl v-model="tabSettingsIsTab" type="checkbox" :label="__('Show as a tab')" />
-					<div v-if="tabSettingsIsTab">
-						<label class="block text-xs text-ink-gray-5 mb-1.5">{{ __('Icon') }}</label>
-						<IconPicker v-model="tabSettingsIcon" inline />
-					</div>
-				</div>
-			</template>
-			<template #actions="{ close }">
-				<div class="flex justify-end gap-2">
-					<Button variant="outline" @click="close">{{ __('Cancel') }}</Button>
-					<Button variant="solid" :loading="isUpdatingTab" @click="saveTabSettings(close)">
-						{{ __('Save') }}
-					</Button>
-				</div>
-			</template>
-		</Dialog>
-
-		<Dialog v-model:open="showConvertTabDialog">
-			<template #title>
-				<h3 class="text-2xl-semibold text-ink-gray-9">
-					{{ __('Convert to tab') }}
-				</h3>
-			</template>
-			<template #default>
-				<p class="text-ink-gray-7">
-					{{ __('Convert "{0}" into a tab?', [convertTabNode?.title || __('this group')]) }}
-				</p>
-				<p class="text-sm text-ink-gray-5 mt-2">
-					{{ __('It will appear in the horizontal tab bar. You can change its icon and name afterwards.') }}
-				</p>
-			</template>
-			<template #actions="{ close }">
-				<div class="flex justify-end gap-2">
-					<Button variant="outline" @click="close">{{ __('Cancel') }}</Button>
-					<Button variant="solid" :loading="isUpdatingTab" @click="confirmConvertTab(close)">
-						{{ __('Convert') }}
-					</Button>
-				</div>
-			</template>
-		</Dialog>
-
 		<Dialog v-model:open="showDeleteDialog">
 			<template #title>
 				<h3 class="text-2xl-semibold text-ink-gray-9">
@@ -161,12 +140,12 @@
 						{{ deleteNode?.is_group ? __('group') : __('page') }}?
 					</p>
 					<div v-if="deleteNode?.is_group && deleteChildCount > 0"
-						class="bg-surface-orange-1 border border-outline-orange-2 rounded-lg p-4">
+						class="bg-surface-orange-1 border border-outline-orange-2 rounded-6 p-4">
 						<div class="flex items-start gap-3">
-							<span class="lucide-alert-triangle size-5 text-ink-orange-4 flex-shrink-0 mt-0.5" aria-hidden="true" />
+							<span class="lucide-alert-triangle size-5 text-ink-orange-3 flex-shrink-0 mt-0.5" aria-hidden="true" />
 							<div>
-								<p class="font-medium text-ink-orange-4">{{ __('Warning') }}</p>
-								<p class="text-sm text-ink-orange-3 mt-1">
+								<p class="font-medium text-ink-orange-3">{{ __('Warning') }}</p>
+								<p class="text-sm text-ink-orange-2 mt-1">
 									{{ __('This group contains') }} {{ deleteChildCount }}
 									{{ deleteChildCount === 1 ? __('child document') : __('child documents') }}
 									{{ __('that will also be deleted.') }}
@@ -261,13 +240,19 @@
 </template>
 
 <script setup>
+import { useNewPageRequest } from '@/composables/useNewPageRequest';
 import { useTreeDialogs } from '@/composables/useTreeDialogs';
 import { useTreeSearch } from '@/composables/useTreeSearch';
 import { useDraftWorkspaceStore } from '@/stores/draftWorkspace';
 import { useStorage } from '@vueuse/core';
-import { Dropdown, ErrorMessage, FormControl } from 'frappe-ui';
+import {
+	Dropdown,
+	ErrorMessage,
+	FormControl,
+	ScrollArea,
+	TextInput,
+} from 'frappe-ui';
 import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue';
-import IconPicker from './IconPicker.vue';
 import SpaceIcon from './SpaceIcon.vue';
 import WikiTree from './WikiTree.vue';
 
@@ -291,14 +276,8 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
-	// Mirrors the backend's can_manage_tabs gate (space write access).
-	canManageTabs: { type: Boolean, default: false },
 	// Base route of the space, the prefix for pages created at the space root.
 	spaceRoute: { type: String, default: '' },
-	// The space's root group, which is where a tab must be created. This is not
-	// `rootNode`: while a tab is being browsed, `rootNode` is that tab, and
-	// creating there would nest a tab.
-	spaceRootNode: { type: String, default: '' },
 	// Git-synced spaces render the tree read-only — no create/reorder/row
 	// actions. The dialogs below stay mounted but are never opened.
 	readonly: {
@@ -325,36 +304,32 @@ const expandedNodes = useStorage(
 	{},
 );
 
-// Client-side fuzzy filter over the in-memory tree (title + route).
+const hasPages = computed(() => (props.treeData?.children?.length || 0) > 0);
+
+// Client-side fuzzy filter over the in-memory tree (title + route). Results
+// render as a flat ranked list, not a pruned tree.
 const {
 	query: searchQuery,
 	isSearching,
-	treeForRender,
+	matches,
 	hasResults,
-	expandedOverride,
 	scoreMap,
 } = useTreeSearch(toRef(props, 'treeData'));
 
+// A group in the result list has no children to open in place, so picking one
+// drops the search and opens it where it actually lives.
+function revealGroup(node) {
+	expandedNodes.value[node.doc_key] = true;
+	searchQuery.value = '';
+}
+
 const {
 	showCreateDialog,
 	createTitle,
 	createIsGroup,
-	createIsTab,
-	createTabIcon,
 	createRoute,
 	createRouteError,
 	handleCreateRouteInput,
-	showTabSettingsDialog,
-	tabSettingsNode,
-	tabSettingsIsTab,
-	tabSettingsIcon,
-	isUpdatingTab,
-	openTabSettingsDialog,
-	saveTabSettings,
-	showConvertTabDialog,
-	convertTabNode,
-	openConvertTabDialog,
-	confirmConvertTab,
 	showDeleteDialog,
 	deleteNode,
 	deleteChildCount,
@@ -385,53 +360,46 @@ const {
 	toRef(props, 'spaceId'),
 	expandedNodes,
 	toRef(props, 'spaceRoute'),
-	toRef(props, 'spaceRootNode'),
+	toRef(props, 'rootNode'),
 );
 
-const addOptions = [
-	{
-		label: __('New Page'),
-		icon: 'file-plus',
-		onClick: () => openCreateDialog(props.rootNode, false),
+// The empty content column offers "New page" too, but the dialog that makes one
+// lives here, with the route-computation it needs. Immediate, so a request made
+// while this tree was still unmounted (the mobile drawer) is picked up on mount.
+// A read-only tree consumes nothing: nothing should reach around the gate on
+// the footer.
+const { pending: newPageRequested, consumeNewPageRequest } =
+	useNewPageRequest();
+watch(
+	newPageRequested,
+	(requested) => {
+		if (!requested || props.readonly) return;
+		if (consumeNewPageRequest()) openCreateDialog(props.rootNode, false);
 	},
+	{ immediate: true },
+);
+
+// New Page is the footer's own button, so it is not repeated here.
+const addOptions = [
 	{
 		label: __('New Group'),
-		icon: 'folder-plus',
+		icon: 'lucide-folder-plus',
 		onClick: () => openCreateDialog(props.rootNode, true),
 	},
 	{
 		label: __('External Link'),
-		icon: 'link',
+		icon: 'lucide-link',
 		onClick: () => openExternalLinkDialog(props.rootNode),
 	},
 ];
 
-// A tab restructures top-level navigation for the whole space, so it is
-// editor-only (mirrors the backend's can_manage_tabs gate) and only offered at
-// the space root, where a tab is allowed to live.
-const addOptionsWithTab = computed(() => {
-	if (!props.canManageTabs) return addOptions;
-	return [
-		...addOptions,
-		{
-			label: __('New Tab'),
-			icon: 'columns',
-			// Always parented to the space root, whichever tab is being browsed.
-			onClick: () =>
-				openCreateDialog(props.spaceRootNode || props.rootNode, true, true),
-		},
-	];
-});
-
-const createDialogTitle = computed(() => {
-	if (createIsTab.value) return __('Create New Tab');
-	return createIsGroup.value ? __('Create New Group') : __('Create New Page');
-});
+const createDialogTitle = computed(() =>
+	createIsGroup.value ? __('Create New Group') : __('Create New Page'),
+);
 
-const createPlaceholder = computed(() => {
-	if (createIsTab.value) return __('Enter tab name');
-	return createIsGroup.value ? __('Enter group name') : __('Enter page title');
-});
+const createPlaceholder = computed(() =>
+	createIsGroup.value ? __('Enter group name') : __('Enter page title'),
+);
 
 // Reorder is owned by the draft workspace store: drag events mutate the
 // store's tree synchronously and the store debounces the backend sync. We
diff --git a/frontend/src/components/WikiDocumentPanel.vue b/frontend/src/components/WikiDocumentPanel.vue
index fd1ac5d9f..c37abe87b 100644
--- a/frontend/src/components/WikiDocumentPanel.vue
+++ b/frontend/src/components/WikiDocumentPanel.vue
@@ -1,152 +1,210 @@
 <template>
 	<div class="h-full flex flex-col">
-		<!-- Page actions row. Owned by the page rather than teleported into the
-		     space's tab row, so it sits in the same place whether or not the
-		     space uses tabs. -->
-		<DefineActions>
-			<Button
-				v-if="wikiDoc.doc?.is_published"
-				variant="ghost"
-				@click="openPage"
-			>
-				<template #prefix>
-					<span class="lucide-external-link size-4" aria-hidden="true" />
-				</template>
-				{{ __('View Page') }}
-			</Button>
-			<Button
-				v-if="!readonly"
-				variant="solid"
-				:loading="isSaving"
-				:title="isMac ? '⌘S' : 'Ctrl+S'"
-				@click="saveFromHeader"
-			>
-				{{ __('Save') }}
-			</Button>
-			<Dropdown :options="menuOptions">
-				<Button variant="ghost" :title="__('More actions')">
-					<span class="lucide-more-vertical size-4" aria-hidden="true" />
-				</Button>
-			</Dropdown>
-		</DefineActions>
-
 		<div v-if="wikiDoc.doc" class="h-full flex flex-col">
-			<div class="flex min-h-12 shrink-0 items-center gap-2 border-b border-outline-gray-2 px-3 sm:px-5">
+			<!-- The page's one action row: where it sits in the tree on the
+			     left, what you can do with it on the right. A synced page is
+			     owned by the repo, so it offers the round trip to GitHub
+			     instead of an edit flow. -->
+			<div class="flex h-12 shrink-0 items-center gap-2 border-b border-outline-gray-2 px-3 sm:px-5">
 				<Breadcrumbs :items="breadcrumbs" class="min-w-0 flex-1" />
 				<div class="flex shrink-0 items-center gap-2">
-					<ReuseActions />
+					<Badge v-if="readonly" variant="subtle" theme="gray" size="sm">
+						{{ __('Read-only') }}
+					</Badge>
+					<Button
+						v-if="displayPublished"
+						variant="ghost"
+						:title="__('View live')"
+						:aria-label="__('View live')"
+						@click="openPage"
+					>
+						<span class="lucide-eye size-4" aria-hidden="true" />
+					</Button>
+					<!-- Shown for a synced page too: its meta title, description and
+					     social card are wiki-side fields the repo never carries, so
+					     they are still this app's to edit. -->
+					<Button
+						:variant="showPageSettings ? 'subtle' : 'ghost'"
+						:title="__('Page settings')"
+						:aria-label="__('Page settings')"
+						:aria-pressed="showPageSettings"
+						@click="togglePageSettings"
+					>
+						<span class="lucide-panel-right size-4" aria-hidden="true" />
+					</Button>
+					<Button
+						v-if="readonly && githubEditUrl"
+						variant="outline"
+						@click="openGithubEdit"
+					>
+						<template #prefix>
+							<span class="lucide-pencil size-4" aria-hidden="true" />
+						</template>
+						{{ __('Edit on GitHub') }}
+					</Button>
+					<SubmitForReviewButton v-if="!readonly" />
+					<Dropdown v-if="menuOptions.length" :options="menuOptions">
+						<Button
+							variant="ghost"
+							:title="__('Page actions')"
+							:aria-label="__('Page actions')"
+						>
+							<span class="lucide-more-horizontal size-4" aria-hidden="true" />
+						</Button>
+					</Dropdown>
 				</div>
 			</div>
-			<div class="flex-1 overflow-auto pb-10">
-				<WikiEditor v-if="editorKey" :key="editorKey" ref="editorRef" :content="editorContent" :document-key="wikiDoc.doc?.doc_key" :saved-content="savedContent" :readonly="readonly" @save="saveContent" @save-all="flushOtherDirtyPages" @content-change="onEditorContentChange" @content-ready="onEditorContentReady">
-					<template #title>
-						<div class="pt-8">
-							<div class="flex items-start gap-3">
-								<input
-									type="text"
-									v-model="editableTitle"
-									:readonly="readonly"
-									class="text-3xl-semibold text-ink-gray-9 bg-transparent border-none outline-none w-full min-w-0 flex-1 focus:ring-0 p-0 placeholder:text-ink-gray-4"
-									:placeholder="__('Page title')"
-									@blur="saveTitleIfChanged"
-									@keydown.enter="$event.target.blur()"
-								/>
-								<div class="flex shrink-0 items-center gap-2 pt-2">
-									<Badge v-if="displayPublished" variant="subtle" theme="green" size="sm">
-										{{ __('Published') }}
-									</Badge>
-									<Badge v-else variant="subtle" theme="orange" size="sm">
-										{{ __('Not Published') }}
-									</Badge>
-									<Badge v-if="!readonly && hasChangeForCurrentPage" variant="subtle" theme="blue" size="sm">
-										{{ __('Has Draft Changes') }}
-									</Badge>
+			<!-- The panel takes the right edge of the row, so the scroller it
+			     sits beside is narrower than the window — which is what the
+			     editor measures to decide between the outline's two variants. -->
+			<div class="flex min-h-0 flex-1">
+				<!-- The one scroller on this page: the editor body scrolls under
+				     the sticky toolbar, and the bubble menu and the outline rail
+				     both measure against it. -->
+				<ScrollArea class="min-h-0 flex-1" viewport-class="pb-10">
+					<WikiEditor v-if="editorKey" :key="editorKey" :content="editorContent" :document-key="wikiDoc.doc?.doc_key" :saved-content="savedContent" :readonly="readonly" :show-outline="!showPageSettings" @save="saveContent" @save-all="flushOtherDirtyPages" @content-change="onEditorContentChange" @content-ready="onEditorContentReady">
+						<template #title>
+							<div class="pt-10">
+								<div class="flex items-start gap-3">
+									<input
+										type="text"
+										v-model="editableTitle"
+										:readonly="readonly"
+										class="text-3xl-semibold text-ink-gray-9 bg-transparent border-none outline-none w-full min-w-0 flex-1 focus:ring-0 p-0 placeholder:text-ink-gray-4"
+										:placeholder="__('Page title')"
+										@blur="saveTitleIfChanged"
+										@keydown.enter="$event.target.blur()"
+									/>
+									<!-- The only mark on the title: content has diverged from
+									     the last confirmed save and autosave has yet to catch
+									     up. Publish state and route are the settings panel's to
+									     report, next to the fields that change them. -->
+									<div class="flex shrink-0 items-center gap-2 pt-2">
+										<span
+											v-if="isPageDirty"
+											class="size-2 rounded-full bg-surface-amber-4"
+											:title="__('Unsaved changes')"
+											:aria-label="__('Unsaved changes')"
+											role="status"
+										/>
+									</div>
 								</div>
 							</div>
-
-							<!-- Route under the title; click-to-edit unless read-only. -->
-							<div
-								class="mt-2 flex items-center gap-1 text-sm text-ink-gray-5"
-								:class="readonly ? '' : 'cursor-pointer hover:text-ink-gray-7 group/route w-fit'"
-								@click="readonly ? null : openRouteDialog()"
-							>
-								<span class="font-mono truncate">/{{ displayRoute }}</span>
-								<span v-if="!readonly" class="lucide-pencil size-3 shrink-0 opacity-0 group-hover/route:opacity-100" aria-hidden="true" />
-							</div>
-						</div>
-					</template>
-				</WikiEditor>
-				<!-- Editor body skeleton while the CR page overlay loads -->
-				<div v-else class="mx-auto w-full max-w-[770px] space-y-4 px-6 pt-8">
-					<Skeleton class="h-4 w-3/4 rounded" />
-					<Skeleton class="h-4 w-full rounded" />
-					<Skeleton class="h-4 w-5/6 rounded" />
-					<Skeleton class="h-4 w-full rounded" />
-					<Skeleton class="h-4 w-2/3 rounded" />
-					<Skeleton class="h-4 w-full rounded mt-6" />
-					<Skeleton class="h-4 w-4/5 rounded" />
-					<Skeleton class="h-4 w-full rounded" />
-					<Skeleton class="h-4 w-3/4 rounded" />
-				</div>
+						</template>
+					</WikiEditor>
+					<!-- Editor body skeleton while the CR page overlay loads -->
+					<div v-else class="mx-auto w-full max-w-3xl space-y-4 px-8 pt-10">
+						<Skeleton class="h-4 w-3/4 rounded-4" />
+						<Skeleton class="h-4 w-full rounded-4" />
+						<Skeleton class="h-4 w-5/6 rounded-4" />
+						<Skeleton class="h-4 w-full rounded-4" />
+						<Skeleton class="h-4 w-2/3 rounded-4" />
+						<Skeleton class="h-4 w-full rounded-4 mt-6" />
+						<Skeleton class="h-4 w-4/5 rounded-4" />
+						<Skeleton class="h-4 w-full rounded-4" />
+						<Skeleton class="h-4 w-3/4 rounded-4" />
+					</div>
+				</ScrollArea>
+				<PageSettingsPanel
+					v-if="showPageSettings"
+					:doc-resource="wikiDoc"
+					:doc-key="wikiDoc.doc?.doc_key"
+					:readonly="readonly"
+					:title="displayTitle"
+					:slug="displaySlug"
+					:route="displayRoute"
+					:published="displayPublished"
+					:content="editorContent"
+					@close="closePageSettings"
+					@node-updated="loadCrPage"
+				/>
 			</div>
 		</div>
 
 		<!-- Content skeleton -->
 		<div v-else class="h-full flex flex-col">
-			<div class="flex min-h-12 shrink-0 items-center gap-2 border-b border-outline-gray-2 px-3 sm:px-5">
-				<Skeleton class="h-4 w-40 rounded" />
+			<div class="flex h-12 shrink-0 items-center gap-2 border-b border-outline-gray-2 px-3 sm:px-5">
+				<Skeleton class="h-4 w-40 rounded-4" />
 				<div class="ml-auto flex shrink-0 items-center gap-2">
-					<Skeleton class="h-8 w-24 rounded" />
-					<Skeleton class="h-8 w-16 rounded" />
-					<Skeleton class="size-8 rounded" />
+					<Skeleton class="h-8 w-24 rounded-4" />
+					<Skeleton class="h-8 w-16 rounded-4" />
+					<Skeleton class="size-8 rounded-4" />
 				</div>
 			</div>
-			<div class="mx-auto w-full max-w-[770px] flex-1 px-6 pb-6 pt-8 space-y-4">
-				<Skeleton class="h-8 w-64 rounded" />
+			<div class="mx-auto w-full max-w-3xl flex-1 px-8 pb-10 pt-10 space-y-4">
+				<Skeleton class="h-8 w-64 rounded-4" />
 				<Skeleton class="h-5 w-24 rounded-full" />
-				<Skeleton class="h-4 w-3/4 rounded" />
-				<Skeleton class="h-4 w-full rounded" />
-				<Skeleton class="h-4 w-5/6 rounded" />
-				<Skeleton class="h-4 w-full rounded" />
-				<Skeleton class="h-4 w-2/3 rounded" />
-				<Skeleton class="h-4 w-full rounded mt-6" />
-				<Skeleton class="h-4 w-4/5 rounded" />
-				<Skeleton class="h-4 w-full rounded" />
-				<Skeleton class="h-4 w-3/4 rounded" />
+				<Skeleton class="h-4 w-3/4 rounded-4" />
+				<Skeleton class="h-4 w-full rounded-4" />
+				<Skeleton class="h-4 w-5/6 rounded-4" />
+				<Skeleton class="h-4 w-full rounded-4" />
+				<Skeleton class="h-4 w-2/3 rounded-4" />
+				<Skeleton class="h-4 w-full rounded-4 mt-6" />
+				<Skeleton class="h-4 w-4/5 rounded-4" />
+				<Skeleton class="h-4 w-full rounded-4" />
+				<Skeleton class="h-4 w-3/4 rounded-4" />
 			</div>
 		</div>
-		<Dialog v-model:open="showRouteDialog" size="sm">
+		<Dialog v-model:open="showRenameDialog" size="sm">
 			<template #title>
-				<h3 class="text-2xl-semibold text-ink-gray-9">{{ __('Edit Route') }}</h3>
+				<h3 class="text-2xl-semibold text-ink-gray-9">{{ __('Rename Page') }}</h3>
 			</template>
 			<template #default>
 				<FormControl
-					v-model="editableRoute"
-					:label="__('Route')"
+					v-model="editableRenameTitle"
+					:label="__('Title')"
 					type="text"
-					:placeholder="__('page-route')"
+					:placeholder="__('Page title')"
 				/>
 			</template>
 			<template #actions="{ close }">
 				<div class="flex justify-end gap-2">
 					<Button variant="outline" @click="close">{{ __('Cancel') }}</Button>
-					<Button variant="solid" :loading="isSavingRoute" @click="saveRoute(close)">
-						{{ __('Update') }}
+					<Button variant="solid" :loading="isRenaming" @click="renamePage(close)">
+						{{ __('Rename') }}
+					</Button>
+				</div>
+			</template>
+		</Dialog>
+		<Dialog v-model:open="showDeleteDialog" size="sm">
+			<template #title>
+				<h3 class="text-2xl-semibold text-ink-gray-9">
+					{{ __('Delete') }} "{{ displayTitle || __('Untitled') }}"
+				</h3>
+			</template>
+			<template #default>
+				<p class="text-ink-gray-7">
+					{{
+						__(
+							'The page is removed from the space when this change request is merged.',
+						)
+					}}
+				</p>
+			</template>
+			<template #actions="{ close }">
+				<div class="flex justify-end gap-2">
+					<Button variant="outline" @click="close">{{ __('Cancel') }}</Button>
+					<Button
+						variant="solid"
+						theme="red"
+						:loading="isDeleting"
+						@click="deletePage(close)"
+					>
+						{{ __('Save Delete Draft') }}
 					</Button>
 				</div>
 			</template>
 		</Dialog>
-		<PageSettings v-if="wikiDoc.doc" v-model="showPageSettingsDialog" :doc-resource="wikiDoc" />
 	</div>
 </template>
 
 <script setup>
+import { usePageSettingsPanel } from '@/composables/usePageSettingsPanel';
 import { buildGithubEditUrl } from '@/lib/github';
 import { SPACE_TREE_KEY, crumbRoute, trailToNode } from '@/lib/spaceTree';
 import { useChangeRequestStore } from '@/stores/changeRequest';
 import { useDraftWorkspaceStore } from '@/stores/draftWorkspace';
 import { useUserStore } from '@/stores/user';
-import { createReusableTemplate } from '@vueuse/core';
 import {
 	Badge,
 	Breadcrumbs,
@@ -154,6 +212,7 @@ import {
 	Dialog,
 	Dropdown,
 	FormControl,
+	ScrollArea,
 	Skeleton,
 	createDocumentResource,
 	getCachedDocumentResource,
@@ -161,13 +220,11 @@ import {
 	usePageMeta,
 } from 'frappe-ui';
 import { computed, inject, ref, shallowRef, watch } from 'vue';
-import PageSettings from './PageSettings.vue';
+import { useRouter } from 'vue-router';
+import PageSettingsPanel from './PageSettingsPanel.vue';
+import SubmitForReviewButton from './SubmitForReviewButton.vue';
 import WikiEditor from './WikiEditor.vue';
 
-const isMac = computed(() => /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent));
-
-const [DefineActions, ReuseActions] = createReusableTemplate();
-
 const props = defineProps({
 	pageId: {
 		type: String,
@@ -187,13 +244,14 @@ const props = defineProps({
 
 const emit = defineEmits(['refresh']);
 
-const editorRef = ref(null);
 const editableTitle = ref('');
-const editableRoute = ref('');
-const showRouteDialog = ref(false);
-const isSavingRoute = ref(false);
-const showPageSettingsDialog = ref(false);
+const showRenameDialog = ref(false);
+const editableRenameTitle = ref('');
+const isRenaming = ref(false);
+const showDeleteDialog = ref(false);
+const isDeleting = ref(false);
 
+const router = useRouter();
 const crStore = useChangeRequestStore();
 const draftStore = useDraftWorkspaceStore();
 const userStore = useUserStore();
@@ -281,7 +339,10 @@ async function loadCrPage() {
 		loadedDocKey.value = null;
 		return;
 	}
+	// A git-synced space has no change request to hydrate — asking for one
+	// answers 403, once per page opened.
 	if (
+		!props.readonly &&
 		props.spaceId &&
 		draftStore.isEnabled &&
 		(draftStore.spaceId !== props.spaceId ||
@@ -304,12 +365,6 @@ const activePage = computed(() => {
 	return docKey ? draftStore.pagesByKey[docKey] : null;
 });
 
-const hasChangeForCurrentPage = computed(() => {
-	const docKey = wikiDoc.value.doc?.doc_key;
-	if (!docKey) return false;
-	return Boolean(crStore.changes.some((change) => change.doc_key === docKey));
-});
-
 const editorContent = computed(() => {
 	if (activePage.value?.localContent != null) {
 		return activePage.value.localContent;
@@ -351,6 +406,20 @@ const displayRoute = computed(() => {
 	);
 });
 
+// The panel is module-scoped state: it stays open across page switches, and
+// the toggle that owns it lives in this header.
+const {
+	isOpen: showPageSettings,
+	close: closePageSettings,
+	toggle: togglePageSettings,
+} = usePageSettingsPanel();
+
+// Slug has no draft buffer — nothing but the settings panel edits it — so the
+// CR overlay is the newest copy until the request merges.
+const displaySlug = computed(
+	() => currentCrPage.value?.slug || wikiDoc.value.doc?.slug || '',
+);
+
 const spaceTree = inject(SPACE_TREE_KEY, null);
 
 // Where the open page sits in the tree. The last crumb reads the title input
@@ -396,15 +465,14 @@ watch(
 	{ immediate: true },
 );
 
-// Save state lives on the workspace store entry keyed by
-// the published doc's CR overlay key. Until the user saves once, no entry
-// exists and we report 'idle'.
-const pageSaveStatus = computed(() => {
-	const docKey = wikiDoc.value.doc?.doc_key;
-	if (!docKey) return 'idle';
-	return draftStore.pagesByKey[docKey]?.saveStatus || 'idle';
+// Divergence between the editor buffer and the last confirmed save — the same
+// test the store's finalization gate uses, read for this page alone.
+const isPageDirty = computed(() => {
+	const page = activePage.value;
+	return Boolean(
+		page?.localContent != null && page.localContent !== page.content,
+	);
 });
-const isSaving = computed(() => pageSaveStatus.value === 'saving');
 // Confirmed content the editor normalizes before handing both snapshots back
 // to the store. Falls back to editorContent before an overlay entry exists.
 const savedContent = computed(() => {
@@ -451,34 +519,27 @@ const githubEditUrl = computed(() => {
 });
 
 const menuOptions = computed(() => {
-	// Read-only spaces can't change publish state — only offer the desk link.
-	const options = props.readonly
-		? []
-		: [
-				{
-					label: displayPublished.value ? __('Unpublish') : __('Publish'),
-					icon: 'upload-cloud',
-					onClick: togglePublish,
-				},
-				{
-					label: __('Page settings'),
-					icon: 'settings',
-					onClick: () => {
-						showPageSettingsDialog.value = true;
-					},
-				},
-			];
-	if (githubEditUrl.value) {
-		options.push({
-			label: __('Edit on GitHub'),
-			icon: 'github',
-			onClick: () => window.open(githubEditUrl.value, '_blank', 'noopener'),
-		});
+	const options = [];
+	// A synced page has no editable state here — the repo owns it, and the
+	// header already offers the trip to GitHub.
+	if (!props.readonly) {
+		options.push(
+			{
+				label: __('Rename'),
+				icon: 'lucide-pencil',
+				onClick: openRenameDialog,
+			},
+			{
+				label: displayPublished.value ? __('Unpublish') : __('Publish'),
+				icon: 'lucide-upload-cloud',
+				onClick: togglePublish,
+			},
+		);
 	}
 	if (userStore.isWikiManager && wikiDoc.value.doc?.name) {
 		options.push({
 			label: __('View in Desk'),
-			icon: 'external-link',
+			icon: 'lucide-external-link',
 			onClick: () =>
 				window.open(
 					`/app/wiki-document/${encodeURIComponent(wikiDoc.value.doc.name)}`,
@@ -486,43 +547,79 @@ const menuOptions = computed(() => {
 				),
 		});
 	}
+	if (!props.readonly) {
+		options.push({
+			label: __('Delete'),
+			icon: 'lucide-trash-2',
+			onClick: () => {
+				showDeleteDialog.value = true;
+			},
+		});
+	}
 	return options;
 });
 
-async function saveTitleIfChanged() {
-	if (props.readonly) return;
-	const newTitle = editableTitle.value.trim();
-	if (!newTitle || newTitle === displayTitle.value) return;
+function openRenameDialog() {
+	editableRenameTitle.value = displayTitle.value;
+	showRenameDialog.value = true;
+}
+
+async function renamePage(close) {
+	const newTitle = editableRenameTitle.value.trim();
+	if (!newTitle || newTitle === displayTitle.value) {
+		close();
+		return;
+	}
 	if (!wikiDoc.value.doc?.doc_key) return;
+	isRenaming.value = true;
 	try {
 		await draftStore.updateNode(wikiDoc.value.doc.doc_key, { title: newTitle });
 		await loadCrPage();
+		close();
 	} catch (error) {
 		toast.error(error.messages?.[0] || __('Error updating title'));
+	} finally {
+		isRenaming.value = false;
 	}
 }
 
-function openRouteDialog() {
-	editableRoute.value = displayRoute.value;
-	showRouteDialog.value = true;
+function openGithubEdit() {
+	if (!githubEditUrl.value) return;
+	window.open(githubEditUrl.value, '_blank', 'noopener');
 }
 
-async function saveRoute(close) {
-	const newRoute = editableRoute.value.trim().replace(/^\/+/, '');
-	if (!newRoute || newRoute === displayRoute.value) {
+// Deleting the open page leaves the editor pointing at nothing, so hand the
+// route back to the space, which reopens the next page it can find.
+async function deletePage(close) {
+	const docKey = wikiDoc.value.doc?.doc_key;
+	if (!docKey) {
 		close();
 		return;
 	}
+	close();
+	isDeleting.value = true;
+	try {
+		await draftStore.deleteNode(docKey);
+		if (props.spaceId) {
+			router.push({ name: 'SpaceDetails', params: { spaceId: props.spaceId } });
+		}
+	} catch (error) {
+		toast.error(error.messages?.[0] || __('Error creating draft'));
+	} finally {
+		isDeleting.value = false;
+	}
+}
+
+async function saveTitleIfChanged() {
+	if (props.readonly) return;
+	const newTitle = editableTitle.value.trim();
+	if (!newTitle || newTitle === displayTitle.value) return;
 	if (!wikiDoc.value.doc?.doc_key) return;
-	isSavingRoute.value = true;
 	try {
-		await draftStore.updateNode(wikiDoc.value.doc.doc_key, { route: newRoute });
+		await draftStore.updateNode(wikiDoc.value.doc.doc_key, { title: newTitle });
 		await loadCrPage();
-		close();
 	} catch (error) {
-		toast.error(error.messages?.[0] || __('Error updating route'));
-	} finally {
-		isSavingRoute.value = false;
+		toast.error(error.messages?.[0] || __('Error updating title'));
 	}
 }
 
@@ -543,10 +640,6 @@ function openPage() {
 	window.open(`/${wikiDoc.value.doc.route}`, '_blank');
 }
 
-function saveFromHeader() {
-	editorRef.value?.saveToDB();
-}
-
 // Drain dirty buffers for pages other than the one on screen; the open
 // page's saves go through the editor instead.
 async function flushOtherDirtyPages() {
diff --git a/frontend/src/components/WikiEditor.vue b/frontend/src/components/WikiEditor.vue
index a12ebd04b..ebea5dd58 100644
--- a/frontend/src/components/WikiEditor.vue
+++ b/frontend/src/components/WikiEditor.vue
@@ -5,12 +5,15 @@
                  making it a flex child would strand it above one column. -->
             <WikiToolbar v-if="!readonly" :editor="editor" @uploadImage="handleImageUpload" />
             <EditorTableOfContents v-if="showTocStrip" :editor="editor" variant="strip" />
-            <div class="flex">
-                <div class="min-w-0 flex-1 flex justify-center">
-                    <div class="w-full max-w-[770px] px-6">
-                        <slot name="title" />
-                        <EditorContent :editor="editor" :class="contentClass" />
-                    </div>
+            <!-- The outline gets a gutter of its own rather than floating over
+                 a centred column's leftovers: the padding reserves it, and the
+                 column re-centres in what remains. The column shifts when the
+                 outline appears, which is what buys it back on a 1280px
+                 screen — floating over both gutters needed 1400. -->
+            <div class="relative" :class="showTocRail ? 'pr-60' : ''">
+                <div class="mx-auto w-full max-w-3xl px-8">
+                    <slot name="title" />
+                    <EditorContent :editor="editor" :class="contentClass" />
                 </div>
                 <EditorTableOfContents v-if="showTocRail" :editor="editor" variant="rail" />
             </div>
@@ -126,6 +129,13 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	// The outline stands down when something wider has claimed the right of
+	// the page — the page settings panel. Two lists of the page at once is one
+	// too many.
+	showOutline: {
+		type: Boolean,
+		default: true,
+	},
 });
 
 const emit = defineEmits([
@@ -648,7 +658,12 @@ const editor = useEditor({
 			nested: true,
 		}),
 		Placeholder.configure({
-			placeholder: 'Type "/" for commands, or start writing...',
+			// A freshly inserted callout starts with an empty paragraph, and the
+			// top-level hint reads as if the document itself were empty there.
+			placeholder: ({ editor, pos }) =>
+				editor.state.doc.resolve(pos).parent.type.name === 'calloutBlock'
+					? 'Write the callout…'
+					: 'Type "/" for commands, or start writing...',
 		}),
 		CodeBlock,
 		// Custom extensions
@@ -682,18 +697,22 @@ const contentClass = [
 	props.readonly ? '' : 'is-editable',
 ];
 
-// The editor's width is the viewport minus the app nav and the resizable tree,
-// so a viewport media query would measure the wrong box — watch the element
-// instead. On a 1440px laptop with both open the editor gets ~920px, which is
-// the width this threshold is picked to serve: below it the content column
-// would have to give up too much to seat a rail, so the strip takes over.
-const TOC_RAIL_MIN_WIDTH = 900;
+// The editor's width is the viewport minus the app nav, so a viewport media
+// query would measure the wrong box — watch the element instead. The rail is
+// given its gutter rather than floating over whatever the centred column
+// leaves behind, so the threshold is the 768px prose column plus that one
+// reserve — not a rail's width on each side, which needed a 1400px window.
+// Below it the strip takes over.
+const TOC_RAIL_RESERVE = 240;
+const TOC_RAIL_MIN_WIDTH = 768 + TOC_RAIL_RESERVE;
 const { width: containerWidth } = useElementSize(containerRef);
-const showTocRail = computed(() => containerWidth.value >= TOC_RAIL_MIN_WIDTH);
+const showTocRail = computed(
+	() => props.showOutline && containerWidth.value >= TOC_RAIL_MIN_WIDTH,
+);
 // Width reads 0 until the first ResizeObserver callback; rendering neither
 // variant until then avoids flashing the narrow strip on a wide screen.
 const showTocStrip = computed(
-	() => containerWidth.value > 0 && !showTocRail.value,
+	() => props.showOutline && containerWidth.value > 0 && !showTocRail.value,
 );
 
 function normalizeMarkdown(content) {
diff --git a/frontend/src/components/WikiSettings/CodePanel.vue b/frontend/src/components/WikiSettings/CodePanel.vue
index 51d143902..9365c92af 100644
--- a/frontend/src/components/WikiSettings/CodePanel.vue
+++ b/frontend/src/components/WikiSettings/CodePanel.vue
@@ -10,7 +10,7 @@
 		/>
 
 		<div class="flex items-center justify-end gap-2">
-			<Badge v-if="isDirty" theme="orange" size="sm">
+			<Badge v-if="isDirty" theme="amber" size="sm">
 				{{ __('Unsaved changes') }}
 			</Badge>
 			<Button
diff --git a/frontend/src/components/WikiSettings/GitHubAppPanel.vue b/frontend/src/components/WikiSettings/GitHubAppPanel.vue
index 9af16f25e..c5557d381 100644
--- a/frontend/src/components/WikiSettings/GitHubAppPanel.vue
+++ b/frontend/src/components/WikiSettings/GitHubAppPanel.vue
@@ -8,7 +8,7 @@
 				__('Configure a GitHub App so Wiki Spaces can sync from GitHub repositories, including private ones. Access tokens are minted on demand from the App private key — no per-space secrets are stored.')
 			"
 		>
-			<Button variant="solid" icon-left="github" @click="createApp">
+			<Button variant="solid" icon-left="lucide-git-branch" @click="createApp">
 				{{ __('Create GitHub App') }}
 			</Button>
 		</SettingsRow>
@@ -31,7 +31,7 @@
 					"
 				/>
 				<div class="flex items-center justify-end gap-2">
-					<Badge v-if="configDirty" theme="orange" size="sm">
+					<Badge v-if="configDirty" theme="amber" size="sm">
 						{{ __('Unsaved changes') }}
 					</Badge>
 					<Button
diff --git a/frontend/src/components/WikiSettings/WikiSettings.vue b/frontend/src/components/WikiSettings/WikiSettings.vue
index efb0911c7..b20319c5b 100644
--- a/frontend/src/components/WikiSettings/WikiSettings.vue
+++ b/frontend/src/components/WikiSettings/WikiSettings.vue
@@ -1,5 +1,5 @@
 <template>
-	<SettingsDialog v-model="open" v-model:tab="selectedTab">
+	<SettingsDialog v-model:open="open" v-model:tab="selectedTab">
 		<SettingsSidebar>
 			<div>
 				<span class="block px-2 pt-1 pb-3 text-lg-semibold text-ink-gray-9">
diff --git a/frontend/src/components/WikiTab.vue b/frontend/src/components/WikiTab.vue
deleted file mode 100644
index 9403498b2..000000000
--- a/frontend/src/components/WikiTab.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-	<div
-		role="tab"
-		:aria-selected="active"
-		:aria-label="tab.title"
-		:data-tab-key="tab.key"
-		:title="tab.title"
-		class="relative flex shrink-0 items-center gap-1.5 whitespace-nowrap py-2.5 text-base duration-300 ease-in-out"
-		:class="[
-			active ? 'text-ink-gray-9' : 'text-ink-gray-5 hover:text-ink-gray-9',
-			draggable && !editing ? 'cursor-grab active:cursor-grabbing' : '',
-		]"
-		@click="!editing && emit('select')"
-	>
-		<!-- Icon opens the picker inline; falls back to a static icon when the
-		     user can't manage tabs. -->
-		<IconPicker
-			v-if="canManage"
-			:model-value="tab.icon"
-			@update:model-value="emit('update-icon', $event)"
-		>
-			<template #default="{ togglePopover }">
-				<button
-					type="button"
-					class="flex shrink-0 rounded hover:bg-surface-gray-3"
-					:title="__('Change icon')"
-					@click.stop="togglePopover()"
-				>
-					<SpaceIcon v-if="tab.icon" :icon="tab.icon" />
-					<span v-else class="lucide-plus size-4 text-ink-gray-4" aria-hidden="true" />
-				</button>
-			</template>
-		</IconPicker>
-		<SpaceIcon v-else-if="tab.icon" :icon="tab.icon" class="shrink-0" />
-
-		<!-- Double-click the label to rename. -->
-		<input
-			v-if="editing"
-			ref="titleInput"
-			v-model="draftTitle"
-			class="min-w-0 bg-transparent p-0 text-base text-ink-gray-9 outline-none focus:ring-0"
-			:size="Math.max(draftTitle.length, 1)"
-			@click.stop
-			@keydown.enter="commit"
-			@keydown.esc="cancel"
-			@blur="commit"
-		/>
-		<span v-else @dblclick.stop="canManage && startEdit()">{{ tab.title }}</span>
-
-		<span
-			v-if="active"
-			class="absolute inset-x-0 bottom-0 h-[2px] rounded-full bg-surface-gray-10"
-		/>
-	</div>
-</template>
-
-<script setup>
-import { nextTick, ref } from 'vue';
-import IconPicker from './IconPicker.vue';
-import SpaceIcon from './SpaceIcon.vue';
-
-const props = defineProps({
-	tab: { type: Object, required: true },
-	active: { type: Boolean, default: false },
-	canManage: { type: Boolean, default: false },
-	draggable: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['select', 'update-icon', 'rename']);
-
-const editing = ref(false);
-const draftTitle = ref('');
-const titleInput = ref(null);
-
-async function startEdit() {
-	draftTitle.value = props.tab.title;
-	editing.value = true;
-	await nextTick();
-	titleInput.value?.focus();
-	titleInput.value?.select();
-}
-
-function commit() {
-	if (!editing.value) return;
-	editing.value = false;
-	const next = draftTitle.value.trim();
-	if (next && next !== props.tab.title) emit('rename', next);
-}
-
-function cancel() {
-	editing.value = false;
-}
-</script>
diff --git a/frontend/src/components/WikiTabBar.vue b/frontend/src/components/WikiTabBar.vue
deleted file mode 100644
index 04ff6aaad..000000000
--- a/frontend/src/components/WikiTabBar.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
-	<!-- Styling mirrors frappe-ui's Tabs (TabsList / TabsTrigger / TabsIndicator):
-	     gap-5 triggers, text-ink-gray-5 resting, text-ink-gray-9 active, and a
-	     2px rounded surface-gray-10 indicator. Rebuilt rather than used directly
-	     because these tabs need to be drag-reorderable and overflow into a More
-	     menu, neither of which reka-ui's Tabs exposes. -->
-	<div
-		v-if="tabs.length"
-		ref="container"
-		class="relative flex min-w-0 flex-1 items-stretch gap-5 overflow-hidden"
-		role="tablist"
-	>
-		<!-- Home leads the bar and never drags: it's synthetic (everything not in
-		     a tab), so it has no document to reorder and stays pinned leftmost. -->
-		<WikiTab
-			v-if="homeTab"
-			:tab="homeTab"
-			:active="homeTab.key === activeKey"
-			:can-manage="canManageTabs"
-			@select="emit('select', homeTab.key)"
-			@update-icon="emit('update-icon', { key: homeTab.key, icon: $event })"
-			@rename="emit('rename-tab', { key: homeTab.key, title: $event })"
-		/>
-
-		<!-- The reorderable real tabs. SortableJS owns the drag; the group is its
-		     own flex row so the container's gap-5 also spaces it against Home, the
-		     More menu, and the add button. -->
-		<div ref="sortableEl" class="flex items-stretch gap-5 empty:hidden">
-			<WikiTab
-				v-for="tab in sortableList"
-				:key="tab.key"
-				:tab="tab"
-				:active="tab.key === activeKey"
-				:can-manage="canManageTabs"
-				:draggable="canManageTabs"
-				@select="emit('select', tab.key)"
-				@update-icon="emit('update-icon', { key: tab.key, icon: $event })"
-				@rename="emit('rename-tab', { key: tab.key, title: $event })"
-			/>
-		</div>
-
-		<!-- Overflow. When the active tab is inside it, the trigger takes on that
-		     tab's name and indicator so the current section stays visible. -->
-		<Dropdown v-if="overflowTabs.length" :options="overflowOptions">
-			<button
-				class="relative flex shrink-0 items-center gap-1 whitespace-nowrap py-2.5 text-base duration-300 ease-in-out"
-				:class="
-					activeInOverflow
-						? 'text-ink-gray-9'
-						: 'text-ink-gray-5 hover:text-ink-gray-9'
-				"
-			>
-				<span>{{ activeInOverflow ? activeTab.title : __('More') }}</span>
-				<span class="lucide-chevron-down size-4 shrink-0" aria-hidden="true" />
-				<span
-					v-if="activeInOverflow"
-					class="absolute inset-x-0 bottom-0 h-[2px] rounded-full bg-surface-gray-10"
-				/>
-			</button>
-		</Dropdown>
-
-		<!-- Always last, and never collapsed into the overflow menu: creating a
-		     tab is an action on the bar itself, not one of its entries. -->
-		<Button
-			v-if="canManageTabs"
-			variant="ghost"
-			:label="__('New Tab')"
-			:title="__('New Tab')"
-			data-testid="new-tab-button"
-			class="shrink-0 self-center"
-			@click="emit('create')"
-		>
-			<template #prefix>
-				<span class="lucide-plus size-4" aria-hidden="true" />
-			</template>
-		</Button>
-	</div>
-</template>
-
-<script setup>
-import { Button, Dropdown } from 'frappe-ui';
-import { useSortable } from '@vueuse/integrations/useSortable';
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-
-import { GENERAL_KEY } from '../lib/spaceTabs.js';
-import WikiTab from './WikiTab.vue';
-
-const props = defineProps({
-	// [{ key, title, icon }] — `icon` is a full lucide class name, e.g. 'lucide-wallet'.
-	tabs: { type: Array, default: () => [] },
-	activeKey: { type: String, default: null },
-	// Gates the add button and drag-reordering (mirrors the backend's
-	// can_manage_tabs; enforcement stays server-side).
-	canManageTabs: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-	'select',
-	'create',
-	'reorder',
-	'update-icon',
-	'rename-tab',
-]);
-
-const container = ref(null);
-const visibleCount = ref(0);
-
-// Home is pinned; only the real (document-backed) tabs reorder and overflow.
-const homeTab = computed(
-	() => props.tabs.find((t) => t.key === GENERAL_KEY) || null,
-);
-const realTabs = computed(() => props.tabs.filter((t) => t.key !== GENERAL_KEY));
-
-const visibleRealTabs = computed(() =>
-	realTabs.value.slice(0, visibleCount.value),
-);
-const overflowTabs = computed(() => realTabs.value.slice(visibleCount.value));
-
-const activeTab = computed(
-	() => props.tabs.find((t) => t.key === props.activeKey) || null,
-);
-const activeInOverflow = computed(() =>
-	overflowTabs.value.some((t) => t.key === props.activeKey),
-);
-
-const overflowOptions = computed(() =>
-	overflowTabs.value.map((tab) => ({
-		label: tab.title,
-		onClick: () => emit('select', tab.key),
-	})),
-);
-
-// Drag-reorder via SortableJS. `sortableList` is a mutable mirror of the visible
-// real tabs: useSortable moves an entry within it on drop (keeping the DOM in
-// step with Vue), and we forward the new order to the parent, which persists it
-// and re-derives `tabs` — resyncing the mirror.
-const sortableEl = ref(null);
-const sortableList = ref([]);
-
-watch(
-	visibleRealTabs,
-	(tabs) => {
-		sortableList.value = tabs.slice();
-	},
-	{ immediate: true, deep: true },
-);
-
-const { option: setSortableOption } = useSortable(sortableEl, sortableList, {
-	animation: 200,
-	// The bar mounts before tabs load (they arrive async), so the sortable target
-	// doesn't exist yet at mount — watch the ref and initialise once it appears.
-	watchElement: true,
-	// Pointer-driven fallback rather than native HTML5 DnD: consistent visuals
-	// across browsers, and reliably drivable by real mouse-move sequences.
-	forceFallback: true,
-	ghostClass: 'opacity-40',
-	disabled: !props.canManageTabs,
-	onEnd(event) {
-		const { oldIndex, newIndex } = event;
-		if (oldIndex == null || newIndex == null || oldIndex === newIndex) return;
-		// useSortable's default onUpdate splices the mirror on nextTick, so at
-		// onEnd it still holds the pre-drag order — read the dragged tab by its
-		// original index. Slot index counts real tabs only, which is what the
-		// parent reorders over.
-		const moved = sortableList.value[oldIndex];
-		if (moved) emit('reorder', { docKey: moved.key, toIndex: newIndex });
-	},
-});
-
-watch(
-	() => props.canManageTabs,
-	(can) => setSortableOption('disabled', !can),
-);
-
-// How many tabs fit is measured off the bar's own width rather than a viewport
-// breakpoint, because the editor's sidebar is user-resizable and the reader's
-// header shares its row with the search field. Widths are estimated instead of
-// measured: the rendered row's width is itself a function of visibleCount, so
-// measuring it would oscillate between counts.
-let observer = null;
-
-const GAP = 20; // gap-5 between triggers
-const ICON = 16 + 6; // icon + gap-1.5
-const CHAR = 7.2; // average label character
-const MORE = 76; // "More" + chevron
-const ADD = 120; // the "New Tab" ghost button + its gap
-
-function tabWidth(tab) {
-	return GAP + (tab.icon ? ICON : 0) + tab.title.length * CHAR;
-}
-
-function measure() {
-	const el = container.value;
-	if (!el || !props.tabs.length) return;
-
-	// Home is always shown and the add button is always reserved; only the real
-	// tabs compete for the leftover width.
-	const reserved =
-		(homeTab.value ? tabWidth(homeTab.value) : 0) +
-		(props.canManageTabs ? ADD : 0);
-	const available = el.clientWidth - reserved;
-	const widths = realTabs.value.map(tabWidth);
-	const total = widths.reduce((sum, w) => sum + w, 0);
-
-	if (total <= available) {
-		visibleCount.value = realTabs.value.length;
-		return;
-	}
-
-	let used = 0;
-	let count = 0;
-	for (const width of widths) {
-		if (used + width > available - MORE) break;
-		used += width;
-		count += 1;
-	}
-	// Always keep at least one real tab next to the overflow trigger.
-	visibleCount.value = Math.max(1, count);
-}
-
-onMounted(() => {
-	measure();
-	if (typeof ResizeObserver === 'undefined') return;
-	observer = new ResizeObserver(measure);
-	if (container.value) observer.observe(container.value);
-});
-
-watch(() => props.tabs, measure, { deep: true });
-watch(() => props.canManageTabs, measure);
-
-onBeforeUnmount(() => observer?.disconnect());
-</script>
diff --git a/frontend/src/components/WikiTree.vue b/frontend/src/components/WikiTree.vue
index cbd57808f..b13ca893d 100644
--- a/frontend/src/components/WikiTree.vue
+++ b/frontend/src/components/WikiTree.vue
@@ -17,8 +17,8 @@
 				@click.stop="handleRowClick(node)"
 			>
 				<button
-					v-if="node.is_group"
-					class="p-0.5 hover:bg-surface-gray-3 rounded shrink-0"
+					v-if="node.is_group && !searchActive"
+					class="p-0.5 hover:bg-surface-gray-3 rounded-4 shrink-0"
 					:aria-label="isNodeExpanded(node.doc_key) ? __('Collapse') : __('Expand')"
 					@click.stop="toggleExpanded(node.doc_key)"
 				>
@@ -29,42 +29,51 @@
 					/>
 				</button>
 
-				<SpaceIcon v-if="node.is_tab" :icon="node.tab_icon" class="text-ink-gray-5 shrink-0" />
-				<span v-else-if="node.is_group" class="lucide-folder size-4 text-ink-gray-5 shrink-0" aria-hidden="true" />
+				<span v-if="node.is_group" class="lucide-folder size-4 text-ink-gray-5 shrink-0" aria-hidden="true" />
 				<span v-else-if="node.is_external_link" class="lucide-link size-4 text-ink-gray-5 shrink-0" aria-hidden="true" />
 				<span v-else class="lucide-file-text size-4 text-ink-gray-5 shrink-0" aria-hidden="true" />
 
 				<div class="flex min-w-0 flex-1 flex-col">
 					<span class="text-sm truncate" :class="getTitleClass(node)">
-						<template v-for="(seg, i) in titleParts(node)" :key="i"><mark v-if="seg.matched" class="bg-surface-amber-2 text-ink-gray-9 rounded-sm">{{ seg.text }}</mark><template v-else>{{ seg.text }}</template></template>
+						<template v-for="(seg, i) in titleParts(node)" :key="i"><mark v-if="seg.matched" class="bg-surface-amber-2 text-ink-gray-9 rounded-1">{{ seg.text }}</mark><template v-else>{{ seg.text }}</template></template>
 					</span>
 					<!-- Why it matched, when the route hit but the title didn't. -->
 					<span v-if="routeParts(node)" class="text-xs text-ink-gray-4 truncate">
-						<template v-for="(seg, i) in routeParts(node)" :key="i"><mark v-if="seg.matched" class="bg-surface-amber-2 text-ink-gray-9 rounded-sm">{{ seg.text }}</mark><template v-else>{{ seg.text }}</template></template>
+						<template v-for="(seg, i) in routeParts(node)" :key="i"><mark v-if="seg.matched" class="bg-surface-amber-2 text-ink-gray-9 rounded-1">{{ seg.text }}</mark><template v-else>{{ seg.text }}</template></template>
 					</span>
 				</div>
 
+				<!-- The tree is a navigation column: a word per row makes it a
+				     list of labels rather than a list of pages. Every state here
+				     is a mark instead — except a failed sync, which asks for an
+				     action and so keeps its words. -->
 				<Badge v-if="node.local_status === 'sync_failed'" variant="subtle" theme="red" size="sm" :title="__('Sync failed — edit again or delete to recover')">
 					{{ __('Sync failed') }}
 				</Badge>
-				<Badge v-else-if="node.local_status === 'pending_create' || node.local_status === 'pending_update'" variant="subtle" theme="gray" size="sm" :title="__('Saving…')">
-					{{ __('Syncing…') }}
-				</Badge>
-				<Badge v-else-if="changeTypeMap.get(node.doc_key) === 'added'" variant="subtle" theme="blue" size="sm">
-					{{ __('New') }}
-				</Badge>
-				<Badge v-else-if="changeTypeMap.get(node.doc_key) === 'deleted'" variant="subtle" theme="red" size="sm">
-					{{ __('Deleted') }}
-				</Badge>
-				<Badge v-else-if="changeTypeMap.get(node.doc_key) === 'modified'" variant="subtle" theme="blue" size="sm">
-					{{ __('Modified') }}
-				</Badge>
-				<Badge v-else-if="changeTypeMap.get(node.doc_key) === 'reordered'" variant="subtle" theme="orange" size="sm">
-					{{ __('Reordered') }}
-				</Badge>
-				<Badge v-else-if="!node.is_group && !node.is_published" variant="subtle" theme="orange" size="sm">
-					{{ __('Not Published') }}
-				</Badge>
+				<span
+					v-else-if="node.local_status === 'pending_create' || node.local_status === 'pending_update'"
+					class="size-1.5 shrink-0 rounded-full bg-surface-gray-5"
+					:title="__('Syncing…')"
+					:aria-label="__('Syncing…')"
+					role="status"
+				/>
+				<span
+					v-else-if="changeTypeMap.get(node.doc_key)"
+					class="size-1.5 shrink-0 rounded-full"
+					:class="getChangeDotClass(changeTypeMap.get(node.doc_key))"
+					:title="getChangeLabel(changeTypeMap.get(node.doc_key))"
+					:aria-label="getChangeLabel(changeTypeMap.get(node.doc_key))"
+					role="status"
+				/>
+				<!-- Unpublished is not a change, so it is not a dot: the same
+				     eye-off the space list uses for an unpublished space. -->
+				<span
+					v-else-if="!node.is_group && !node.is_published"
+					class="lucide-eye-off size-3.5 shrink-0 text-ink-gray-4"
+					:title="__('Unpublished')"
+					:aria-label="__('Unpublished')"
+					role="status"
+				/>
 
 				<!-- Hover-reveal on desktop; always visible on touch (no hover)
 				     so row actions stay reachable on a phone. -->
@@ -81,9 +90,9 @@
 </template>
 
 <script setup>
+import { useChangeTypeDisplay } from '@/composables/useChangeTypeDisplay';
 import { highlightSegments } from '@/composables/useTreeSearch';
 import { useDraftWorkspaceStore } from '@/stores/draftWorkspace';
-import SpaceIcon from './SpaceIcon.vue';
 import { useStorage } from '@vueuse/core';
 import { Badge, Button, Dropdown, Tree, toast } from 'frappe-ui';
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
@@ -112,16 +121,12 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
-	// While a tree search is active we render a pruned tree with drag disabled
-	// and every ancestor-of-a-match force-expanded.
+	// While a tree search is active `items` is the flat result list, not the
+	// tree: rows carry no children, and drag is disabled.
 	searchActive: {
 		type: Boolean,
 		default: false,
 	},
-	expandedOverride: {
-		type: Object, // Set<doc_key> | null
-		default: null,
-	},
 	scoreMap: {
 		type: Object, // Map<doc_key, fuzzysort result> | null
 		default: null,
@@ -134,7 +139,6 @@ const props = defineProps({
 		type: String,
 		default: null,
 	},
-	canManageTabs: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -143,14 +147,14 @@ const emit = defineEmits([
 	'rename',
 	'external-link',
 	'edit-external-link',
-	'tab-settings',
-	'convert-to-tab',
 	'drag-state-change',
+	'reveal-group',
 ]);
 
 const router = useRouter();
 const route = useRoute();
 const draftStore = useDraftWorkspaceStore();
+const { getChangeDotClass, getChangeLabel } = useChangeTypeDisplay();
 
 const storageKey = computed(
 	() => `wiki-tree-expanded-nodes-${props.spaceId || 'default'}`,
@@ -158,26 +162,17 @@ const storageKey = computed(
 const expandedNodes = useStorage(storageKey, {});
 
 function isNodeExpanded(name) {
-	// During search, force-open ancestors of matches without touching the
-	// user's saved expand state — clearing the query restores their tree.
-	if (props.expandedOverride) {
-		return props.expandedOverride.has(name);
-	}
 	return expandedNodes.value[name] === true;
 }
 
 function toggleExpanded(name) {
-	// While searching, groups are force-expanded via expandedOverride; writing
-	// to expandedNodes here would silently corrupt the user's saved layout
-	// (no visible change now, but restore-on-clear would show it). So no-op.
-	if (props.searchActive) return;
 	expandedNodes.value[name] = !expandedNodes.value[name];
 }
 
 // Tree reads/writes each node's `expanded` field and mutates node order is
 // left to us via @drag-end, so we hand it a derived copy of the store tree:
 // `label` feeds the drag ghost + keyboard typeahead, `expanded` is resolved
-// from the persisted map (or the search override). Held in a ref so the
+// from the persisted map. Held in a ref so the
 // copies are reactive and Tree's own keyboard toggles still render.
 const treeNodes = ref([]);
 
@@ -191,7 +186,7 @@ function mapNodes(nodes) {
 }
 
 watch(
-	[() => props.items, () => props.expandedOverride, expandedNodes],
+	[() => props.items, expandedNodes],
 	() => {
 		treeNodes.value = mapNodes(props.items);
 	},
@@ -217,7 +212,11 @@ function handleRowClick(node) {
 	}
 
 	if (node.is_group) {
-		toggleExpanded(node.doc_key);
+		if (props.searchActive) {
+			emit('reveal-group', node);
+		} else {
+			toggleExpanded(node.doc_key);
+		}
 		return;
 	}
 
@@ -273,37 +272,30 @@ function getTitleClass(node) {
 // fuzzysort multi-key result is array-like: [0] = title key, [1] = route key.
 // Render as escaped { text, matched } segments (never an HTML string) — see
 // highlightSegments. titleParts always returns an array (plain title when no
-// match); routeParts only when the route matched but the title didn't.
+// match); routeParts whenever the route matched, plus — while searching — as
+// plain text, since a flat row has no ancestors to place it.
 function titleParts(node) {
 	const result = props.scoreMap?.get(node.doc_key)?.[0];
 	return highlightSegments(result) || [{ text: node.title, matched: false }];
 }
 
 function routeParts(node) {
-	if (highlightSegments(props.scoreMap?.get(node.doc_key)?.[0])) return null;
-	return highlightSegments(props.scoreMap?.get(node.doc_key)?.[1]);
+	const routeSegments = highlightSegments(
+		props.scoreMap?.get(node.doc_key)?.[1],
+	);
+	if (routeSegments) return routeSegments;
+	if (props.searchActive && node.route) {
+		return [{ text: node.route, matched: false }];
+	}
+	return null;
 }
 
 // Reparenting is only allowed into groups; sibling reorder is always fine.
 // Tree's built-in guards (drop-on-self, drop-into-own-descendant) run first.
-//
-// A tab must stay top-level, so it can't be dropped inside anything, and it can
-// only sit beside other top-level rows. `parentName` is the tab's own parent
-// while that tab is the active subtree root, hence the depth check on target.
-// The server guards this too (_move_cr_item / reorder_wiki_documents); this
-// only stops the drag from looking like it worked.
-function allowMove({ dragNode, target, position }) {
-	if (dragNode?.is_tab) {
-		if (position === 'inside') return false;
-		return isTopLevel(target);
-	}
+function allowMove({ target, position }) {
 	return position !== 'inside' || !!target.is_group;
 }
 
-function isTopLevel(node) {
-	return props.items.some((item) => item.doc_key === node?.doc_key);
-}
-
 function onDragStart() {
 	emit('drag-state-change', true);
 }
@@ -339,48 +331,37 @@ function getDropdownOptions(node) {
 			...[
 				{
 					label: __('New Page'),
-					icon: 'file-plus',
+					icon: 'lucide-file-plus',
 					onClick: () => emit('create', node.doc_key, false),
 				},
 				{
 					label: __('New Group'),
-					icon: 'folder-plus',
+					icon: 'lucide-folder-plus',
 					onClick: () => emit('create', node.doc_key, true),
 				},
 				{
 					label: __('External Link'),
-					icon: 'link',
+					icon: 'lucide-link',
 					onClick: () => emit('external-link', node.doc_key),
 				},
 				{
 					label: __('Rename'),
-					icon: 'edit-2',
+					icon: 'lucide-edit-2',
 					onClick: () => emit('rename', node),
 				},
 			],
 		);
-
-		// Only top-level groups can be tabs, so don't offer an action the
-		// backend would reject. Editor-only, mirroring can_manage_tabs.
-		if (props.canManageTabs && isTopLevel(node)) {
-			options.push({
-				label: node.is_tab ? __('Tab settings') : __('Convert to tab'),
-				icon: 'columns',
-				onClick: () =>
-					emit(node.is_tab ? 'tab-settings' : 'convert-to-tab', node),
-			});
-		}
 	}
 
 	if (!node.is_group) {
 		options.push({
 			label: __('Change Title'),
-			icon: 'edit-2',
+			icon: 'lucide-edit-2',
 			onClick: () => emit('rename', node),
 		});
 		options.push({
 			label: node.is_published ? __('Unpublish') : __('Publish'),
-			icon: node.is_published ? 'eye-off' : 'eye',
+			icon: node.is_published ? 'lucide-eye-off' : 'lucide-eye',
 			onClick: () => togglePublish(node),
 		});
 	}
@@ -392,7 +373,7 @@ function getDropdownOptions(node) {
 			options: [
 				{
 					label: __('Delete'),
-					icon: 'trash-2',
+					icon: 'lucide-trash-2',
 					theme: 'red',
 					onClick: () => emit('delete', node),
 				},
diff --git a/frontend/src/components/tiptap-extensions/CalloutBlockView.vue b/frontend/src/components/tiptap-extensions/CalloutBlockView.vue
index e21e982fb..04b5ad779 100644
--- a/frontend/src/components/tiptap-extensions/CalloutBlockView.vue
+++ b/frontend/src/components/tiptap-extensions/CalloutBlockView.vue
@@ -4,22 +4,16 @@
  *
  * Renders a callout/aside block in the TipTap editor.
  * Supports types: note, tip, caution, danger
- * Uses a minimal TipTap sub-editor for rich text editing (bold, italic, links).
+ *
+ * The body is a `<NodeViewContent>` hole — the main editor owns it, so bold,
+ * italic, links, lists, headings and code blocks all work inside a callout
+ * with no editor of this component's own.
  */
 
-import { Link } from '@tiptap/extension-link';
-import { StarterKit } from '@tiptap/starter-kit';
-import { Editor, EditorContent, NodeViewWrapper } from '@tiptap/vue-3';
-import { Button, Dialog, Dropdown, TextInput } from 'frappe-ui';
-import { Markdown } from 'frappe-ui/editor';
-import {
-	computed,
-	nextTick,
-	onMounted,
-	onUnmounted,
-	ref,
-	shallowRef,
-} from 'vue';
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/vue-3';
+import { Button, Dropdown } from 'frappe-ui';
+import { computed } from 'vue';
+import { DEFAULT_TITLES } from './callout-markdown.js';
 
 const props = defineProps({
 	node: {
@@ -30,14 +24,18 @@ const props = defineProps({
 		type: Function,
 		required: true,
 	},
-	selected: {
-		type: Boolean,
-		default: false,
-	},
 	deleteNode: {
 		type: Function,
 		required: true,
 	},
+	editor: {
+		type: Object,
+		required: true,
+	},
+	getPos: {
+		type: Function,
+		required: true,
+	},
 });
 
 // Normalize warning to caution
@@ -46,251 +44,61 @@ const normalizedType = computed(() => {
 	return type === 'warning' ? 'caution' : type;
 });
 
-// Default titles for each type
-const defaultTitles = {
-	note: 'Note',
-	tip: 'Tip',
-	caution: 'Caution',
-	danger: 'Danger',
-};
+const defaultTitle = computed(
+	() => DEFAULT_TITLES[normalizedType.value] || 'Note',
+);
 
 // Display title (custom or default)
-const displayTitle = computed(() => {
-	return (
-		props.node.attrs.title || defaultTitles[normalizedType.value] || 'Note'
-	);
-});
+const displayTitle = computed(
+	() => props.node.attrs.title || defaultTitle.value,
+);
 
-// SVG icons for each callout type
+// The frappe-ui Alert status glyphs (icon/solid/* in Figma), inlined: the four
+// SFCs behind `solidStatusIcons` are not exported from frappe-ui/icons, and the
+// server-rendered reader needs the same paths in markdown.py anyway.
 const icons = {
-	note: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
-	tip: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>`,
-	caution: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`,
-	danger: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>`,
+	note: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM8 6.93652C7.72386 6.93652 7.5 7.16038 7.5 7.43652V11.1436C7.50005 11.4197 7.72389 11.6436 8 11.6436C8.27611 11.6436 8.49995 11.4197 8.5 11.1436V7.43652C8.5 7.16038 8.27614 6.93652 8 6.93652ZM8 4C7.51675 4 7.125 4.39175 7.125 4.875C7.125 5.35825 7.51675 5.75 8 5.75C8.48325 5.75 8.875 5.35825 8.875 4.875C8.875 4.39175 8.48325 4 8 4Z" fill="currentColor"/></svg>`,
+	tip: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM11.1055 5.28125C10.8924 5.10562 10.5771 5.13567 10.4014 5.34863L6.95215 9.53223L5.61035 7.79883C5.44143 7.58051 5.12757 7.54022 4.90918 7.70898C4.69088 7.8779 4.65061 8.19177 4.81934 8.41016L6.54395 10.6396C6.63696 10.7598 6.77972 10.8306 6.93164 10.833C7.08364 10.8354 7.22849 10.7687 7.3252 10.6514L11.1729 5.98438C11.3481 5.77144 11.3181 5.45689 11.1055 5.28125Z" fill="currentColor"/></svg>`,
+	caution: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.35174 1.97129C7.64143 1.47669 8.35697 1.47669 8.64666 1.97129L15.0519 12.9078C15.3447 13.4077 14.9847 14.0365 14.4055 14.0367H1.59295C1.0138 14.0364 0.653701 13.4077 0.946469 12.9078L7.35174 1.97129ZM7.9992 10.4117C7.51609 10.4118 7.12433 10.8036 7.1242 11.2867C7.1242 11.7699 7.51601 12.1617 7.9992 12.1617C8.48245 12.1617 8.8742 11.77 8.8742 11.2867C8.87408 10.8036 8.48238 10.4117 7.9992 10.4117ZM8.00018 5.50742C7.72411 5.50742 7.5003 5.73139 7.50018 6.00742V9.25742C7.50018 9.53356 7.72404 9.75742 8.00018 9.75742C8.27615 9.75723 8.50018 9.53344 8.50018 9.25742V6.00742C8.50006 5.73151 8.27608 5.50762 8.00018 5.50742Z" fill="currentColor"/></svg>`,
+	danger: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM10.8535 5.14648C10.6583 4.95122 10.3417 4.95122 10.1465 5.14648L8 7.29297L5.85352 5.14648C5.65825 4.95122 5.34175 4.95122 5.14648 5.14648C4.95122 5.34175 4.95122 5.65825 5.14648 5.85352L7.29297 8L5.14648 10.1465C4.95122 10.3417 4.95122 10.6583 5.14648 10.8535C5.34175 11.0488 5.65825 11.0488 5.85352 10.8535L8 8.70703L10.1465 10.8535C10.3417 11.0488 10.6583 11.0488 10.8535 10.8535C11.0488 10.6583 11.0488 10.3417 10.8535 10.1465L8.70703 8L10.8535 5.85352C11.0488 5.65825 11.0488 5.34175 10.8535 5.14648Z" fill="currentColor"/></svg>`,
 };
 
 const icon = computed(() => icons[normalizedType.value] || icons.note);
 
-// Editing state
-const isEditingContent = ref(false);
-const subEditor = shallowRef(null);
-let isSaving = false;
-
-const wrapperRef = ref(null);
-
-// Link input state
-const showLinkInput = ref(false);
-const linkUrl = ref('');
-const linkInputRef = ref(null);
-
-// Render inline markdown to HTML for view mode preview
-function renderInlineMarkdown(text) {
-	if (!text) return '';
-	const html = text
-		// Escape HTML
-		.replace(/&/g, '&amp;')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
-		// Bold: **text**
-		.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-		// Italic: *text* (but not inside bold markers)
-		.replace(/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, '<em>$1</em>')
-		// Links: [text](url)
-		.replace(
-			/\[([^\]]+)\]\(([^)]+)\)/g,
-			'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
-		)
-		// Line breaks
-		.replace(/\n/g, '<br>');
-	return html;
-}
-
-const renderedContent = computed(() =>
-	renderInlineMarkdown(props.node.attrs.content),
-);
-
-function startEditing() {
-	isEditingContent.value = true;
-	nextTick(() => {
-		subEditor.value = new Editor({
-			extensions: [
-				StarterKit.configure({
-					blockquote: false,
-					bulletList: false,
-					codeBlock: false,
-					heading: false,
-					horizontalRule: false,
-					listItem: false,
-					orderedList: false,
-					link: false,
-				}),
-				Link.configure({
-					openOnClick: false,
-					HTMLAttributes: {
-						rel: 'noopener noreferrer',
-					},
-				}),
-				Markdown,
-			],
-			content: props.node.attrs.content || '',
-			contentType: 'markdown',
-			editorProps: {
-				attributes: {
-					class: 'callout-sub-editor-content',
-				},
-				handleKeyDown(_view, event) {
-					if (event.key === 'Escape') {
-						finishEditing();
-						return true;
-					}
-					return false;
-				},
-			},
-		});
-
-		nextTick(() => {
-			subEditor.value?.commands.focus('end');
-		});
-	});
-}
-
-function syncSubEditorContent() {
-	if (!subEditor.value) return;
-	props.updateAttributes({ content: subEditor.value.getMarkdown() });
-}
-
-function finishEditing() {
-	if (isSaving) return;
-	syncSubEditorContent();
-	subEditor.value?.destroy();
-	subEditor.value = null;
-	isEditingContent.value = false;
-	showLinkInput.value = false;
-}
-
-function handleBeforeSave() {
-	if (isEditingContent.value && subEditor.value) {
-		isSaving = true;
-		syncSubEditorContent();
-	}
-}
-
-function handleAfterSave() {
-	if (isSaving) {
-		isSaving = false;
-		nextTick(() => {
-			subEditor.value?.commands.focus();
-		});
-	}
-}
-
-function handleClickOutside(event) {
-	if (!isEditingContent.value || !wrapperRef.value) return;
-	const el = wrapperRef.value.$el || wrapperRef.value;
-	if (!el.contains(event.target)) {
-		finishEditing();
-	}
-}
-
-onMounted(() => {
-	document.addEventListener('wiki-editor-before-save', handleBeforeSave);
-	document.addEventListener('wiki-editor-after-save', handleAfterSave);
-	document.addEventListener('mousedown', handleClickOutside, true);
-
-	if (!props.node.attrs.content) {
-		startEditing();
-	}
-});
-
-onUnmounted(() => {
-	document.removeEventListener('wiki-editor-before-save', handleBeforeSave);
-	document.removeEventListener('wiki-editor-after-save', handleAfterSave);
-	document.removeEventListener('mousedown', handleClickOutside, true);
-
-	if (subEditor.value) {
-		subEditor.value.destroy();
-		subEditor.value = null;
-	}
-});
-
-// Toolbar actions
-function toggleBold() {
-	subEditor.value?.chain().focus().toggleBold().run();
-}
-
-function toggleItalic() {
-	subEditor.value?.chain().focus().toggleItalic().run();
+// The title is an attribute, not content — a second content hole would need a
+// second node type. An input keeps it editable in place without one, holding a
+// real value the author can select and delete.
+function setTitle(event) {
+	props.updateAttributes({ title: event.target.value });
 }
 
-function openLinkInput() {
-	if (!subEditor.value) return;
-	const attrs = subEditor.value.getAttributes('link');
-	linkUrl.value = attrs.href || '';
-	showLinkInput.value = true;
-
-	nextTick(() => {
-		if (linkInputRef.value?.el) {
-			linkInputRef.value.el.focus();
-			linkInputRef.value.el.select();
-		}
-	});
-}
-
-function confirmLink() {
-	if (!subEditor.value) return;
-	let url = linkUrl.value.trim();
-
-	if (!url) {
-		subEditor.value.chain().focus().unsetLink().run();
-	} else {
-		if (
-			!url.startsWith('/') &&
-			!url.startsWith('#') &&
-			!url.match(/^[a-zA-Z]+:\/\//)
-		) {
-			url = 'https://' + url;
-		}
-		subEditor.value.chain().focus().setLink({ href: url }).run();
+// The rendered page always prints a title, so an emptied one means "the default"
+// rather than "no header" — say so as soon as the author leaves the field.
+function restoreDefaultTitle(event) {
+	if (!event.target.value.trim()) {
+		props.updateAttributes({ title: defaultTitle.value });
 	}
-
-	showLinkInput.value = false;
-	linkUrl.value = '';
-}
-
-function cancelLink() {
-	showLinkInput.value = false;
-	linkUrl.value = '';
-	subEditor.value?.commands.focus();
 }
 
-// Title editing dialog
-const showTitleDialog = ref(false);
-const editingTitle = ref('');
-
-function openTitleDialog() {
-	editingTitle.value = props.node.attrs.title || '';
-	showTitleDialog.value = true;
-}
-
-function saveTitle() {
-	props.updateAttributes({ title: editingTitle.value });
-	showTitleDialog.value = false;
+// Enter in the title moves into the body, the way Tab-to-next-field would.
+function focusBody() {
+	props.editor.commands.focus(props.getPos() + 1);
 }
 
 function changeType(newType) {
-	props.updateAttributes({ type: newType });
+	// A title the author never touched follows the type; one they wrote stays.
+	const keepsTitle = props.node.attrs.title !== defaultTitle.value;
+	props.updateAttributes({
+		type: newType,
+		...(keepsTitle ? {} : { title: DEFAULT_TITLES[newType] || '' }),
+	});
 }
 
 // Dropdown menu options
 const dropdownOptions = computed(() => [
 	{
-		label: 'Edit Title',
-		icon: 'lucide-pencil',
-		onClick: openTitleDialog,
-	},
-	{
-		label: 'Delete',
-		icon: 'trash-2',
+		label: 'Remove',
+		icon: 'lucide-trash-2',
 		onClick: () => props.deleteNode(),
 	},
 	{
@@ -324,179 +132,83 @@ const dropdownOptions = computed(() => [
 
 <template>
     <NodeViewWrapper
-        ref="wrapperRef"
-        class="callout-block-wrapper group my-4 px-4 py-3.5 rounded-md relative flex flex-col gap-2"
-        :class="[`callout-${normalizedType}`, { 'outline-none': selected }]"
-        contenteditable="false"
+        class="callout-block-wrapper group my-4 p-3 rounded-6 bg-surface-gray-1 relative flex flex-col"
+        :class="`callout-${normalizedType}`"
     >
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-1.5" contenteditable="false">
             <span class="shrink-0 flex items-center callout-icon" v-html="icon"></span>
-            <span class="flex-1 text-sm-medium leading-[1.4] text-ink-gray-9">{{ displayTitle }}</span>
-            <Dropdown :options="dropdownOptions" placement="bottom-end">
+            <input
+                v-if="editor.isEditable"
+                class="callout-title flex-1 min-w-0 bg-transparent border-none p-0 outline-none text-base-medium text-ink-gray-8 placeholder:text-ink-gray-5"
+                :value="node.attrs.title"
+                :placeholder="defaultTitle"
+                aria-label="Callout title"
+                @input="setTitle"
+                @blur="restoreDefaultTitle"
+                @keydown.enter.prevent="focusBody"
+                @keydown.escape.prevent="$event.target.blur()"
+            />
+            <span v-else class="callout-title flex-1 text-base-medium text-ink-gray-8">{{ displayTitle }}</span>
+            <Dropdown v-if="editor.isEditable" :options="dropdownOptions" align="end">
                 <Button variant="ghost" size="sm" class="opacity-0 group-hover:opacity-100 transition-opacity shrink-0 callout-menu-btn">
                     <span class="lucide-more-horizontal size-3.5" aria-hidden="true" />
                 </Button>
             </Dropdown>
         </div>
-        <div class="text-sm leading-normal" @dblclick="!isEditingContent && startEditing()">
-            <template v-if="isEditingContent && subEditor">
-                <!-- Inline toolbar -->
-                <div class="flex items-center gap-0.5 mb-1.5">
-                    <button
-                        @mousedown.prevent="toggleBold"
-                        class="toolbar-btn text-[0.8125rem]"
-                        :class="{ '!bg-surface-gray-3 !text-ink-gray-9': subEditor.isActive('bold') }"
-                        title="Bold (Ctrl+B)"
-                    >
-                        <strong>B</strong>
-                    </button>
-                    <button
-                        @mousedown.prevent="toggleItalic"
-                        class="toolbar-btn text-[0.8125rem]"
-                        :class="{ '!bg-surface-gray-3 !text-ink-gray-9': subEditor.isActive('italic') }"
-                        title="Italic (Ctrl+I)"
-                    >
-                        <em>I</em>
-                    </button>
-                    <button
-                        @mousedown.prevent="openLinkInput"
-                        class="toolbar-btn"
-                        :class="{ '!bg-surface-gray-3 !text-ink-gray-9': subEditor.isActive('link') }"
-                        title="Link"
-                    >
-                        <span class="lucide-link size-3.5" aria-hidden="true" />
-                    </button>
-                </div>
 
-                <!-- Link URL input row -->
-                <div v-if="showLinkInput" class="flex items-center gap-1 mb-1.5">
-                    <TextInput
-                        ref="linkInputRef"
-                        type="text"
-                        class="flex-1"
-                        size="sm"
-                        placeholder="https://example.com"
-                        v-model="linkUrl"
-                        @keydown.enter="confirmLink"
-                        @keydown.escape.stop="cancelLink"
-                    />
-                    <button @mousedown.prevent="confirmLink" class="toolbar-btn" title="Apply">
-                        <span class="lucide-check size-3.5" aria-hidden="true" />
-                    </button>
-                    <button @mousedown.prevent="cancelLink" class="toolbar-btn" title="Cancel">
-                        <span class="lucide-x size-3.5" aria-hidden="true" />
-                    </button>
-                </div>
-
-                <!-- Sub-editor -->
-                <EditorContent :editor="subEditor" />
-            </template>
-            <div v-else class="callout-content-text text-ink-gray-7">
-                <span v-if="node.attrs.content" v-html="renderedContent"></span>
-                <span v-else class="text-ink-gray-4">Double-click to edit...</span>
-            </div>
-        </div>
-
-        <!-- Title Edit Dialog -->
-        <Dialog v-model:open="showTitleDialog" title="Edit Callout Title">
-            <template #default>
-                <div class="space-y-4">
-                    <TextInput
-                        v-model="editingTitle"
-                        label="Title"
-                        placeholder="Leave empty for default title"
-                        @keydown.enter="saveTitle"
-                    />
-                    <p class="text-sm text-ink-gray-5">
-                        Default title: {{ defaultTitles[normalizedType] }}
-                    </p>
-                </div>
-            </template>
-            <template #actions>
-                <Button variant="solid" @click="saveTitle">Save</Button>
-            </template>
-        </Dialog>
+        <NodeViewContent class="callout-content mt-1" />
     </NodeViewWrapper>
 </template>
 
 <style scoped>
-/* Toolbar button base style */
-.toolbar-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    border: none;
-    background: transparent;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    color: var(--ink-gray-6);
-    transition: all 0.15s ease;
-}
-
-.toolbar-btn:hover {
-    background-color: var(--surface-gray-2);
-    color: var(--ink-gray-9);
-}
-
-/* Icon sizing */
-.callout-icon :deep(svg) {
+/* Alert's prefix box: a fixed 16px slot the glyph sits centred in. */
+.callout-icon {
     width: 1rem;
     height: 1rem;
 }
 
-/* Sub-editor ProseMirror element styling */
-.callout-block-wrapper :deep(.callout-sub-editor-content) {
-    outline: none;
-    padding: 0.375rem 0.5rem;
-    border: 1px solid var(--outline-gray-2, #e5e7eb);
-    border-radius: 0.375rem;
-    background-color: var(--surface-base, #ffffff);
-    min-height: 2.5rem;
-    color: var(--ink-gray-7, #4b5563);
+/* The body is document content now, so prose owns its typography — these
+   override it back to Alert's description style, and drop the outer margins so
+   the callout's own padding is the only gap. */
+/* Aligned to the title, not the container: Alert's description is full-bleed,
+   but Alert is a 384px status box with a one-line description (see its stories).
+   At document width, with paragraphs and lists in the body, a full-bleed body
+   leaves the header looking detached from what it labels. 1rem icon + 0.375rem
+   gap = the title's left edge. */
+.callout-content {
+    padding-left: calc(1rem + 0.375rem);
 }
 
-.callout-block-wrapper :deep(.callout-sub-editor-content:focus) {
-    border-color: var(--outline-gray-4, #9ca3af);
-    box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.25);
+.callout-content :deep(> *:first-child) {
+    margin-top: 0;
 }
 
-.callout-block-wrapper :deep(.callout-sub-editor-content p) {
-    margin: 0;
+.callout-content :deep(> *:last-child) {
+    margin-bottom: 0;
 }
 
-.callout-block-wrapper :deep(.callout-sub-editor-content a) {
-    color: var(--ink-blue-6, #2563eb);
-    text-decoration: underline;
+.callout-content :deep(p) {
+    color: var(--ink-gray-6);
+    font-size: var(--text-base, 0.875rem);
+    line-height: 1.5;
+    letter-spacing: 0.02em;
 }
 
-/* Callout type colors - these use CSS variables that don't map to Tailwind */
-.callout-note {
-    background-color: var(--surface-blue-2, #dbeafe);
-}
+/* Only the icon carries the type's colour — the surface stays neutral, the way
+   frappe-ui's Alert does it. */
 .callout-note .callout-icon {
-    color: var(--ink-blue-6, #2563eb);
+    color: var(--ink-blue-5);
 }
 
-.callout-tip {
-    background-color: var(--surface-green-2, #dcfce7);
-}
 .callout-tip .callout-icon {
-    color: var(--ink-green-6, #16a34a);
+    color: var(--ink-green-5);
 }
 
-.callout-caution {
-    background-color: var(--surface-amber-2, #fef3c7);
-}
 .callout-caution .callout-icon {
-    color: var(--ink-amber-6, #d97706);
+    color: var(--ink-amber-5);
 }
 
-.callout-danger {
-    background-color: var(--surface-red-2, #fecaca);
-}
 .callout-danger .callout-icon {
-    color: var(--ink-red-6, #dc2626);
+    color: var(--ink-red-5);
 }
 </style>
diff --git a/frontend/src/components/tiptap-extensions/IframeBlockView.vue b/frontend/src/components/tiptap-extensions/IframeBlockView.vue
index bfe556336..f7d086cbf 100644
--- a/frontend/src/components/tiptap-extensions/IframeBlockView.vue
+++ b/frontend/src/components/tiptap-extensions/IframeBlockView.vue
@@ -177,6 +177,6 @@ function handleKeyDown(event) {
 .placeholder-error {
 	margin: 0;
 	font-size: 0.8125rem;
-	color: var(--ink-red-6, #b91c1c);
+	color: var(--ink-red-5, #b91c1c);
 }
 </style>
diff --git a/frontend/src/components/tiptap-extensions/ImageNodeView.vue b/frontend/src/components/tiptap-extensions/ImageNodeView.vue
index 5e987550d..20095e546 100644
--- a/frontend/src/components/tiptap-extensions/ImageNodeView.vue
+++ b/frontend/src/components/tiptap-extensions/ImageNodeView.vue
@@ -186,7 +186,7 @@ function handleKeydown(event) {
     width: 100%;
     text-align: center;
     font-size: 0.8125rem;
-    color: var(--ink-red-5, #dc2626);
+    color: var(--ink-red-4, #dc2626);
     padding: 0.5rem 0;
 }
 
diff --git a/frontend/src/components/tiptap-extensions/LinkPopup.vue b/frontend/src/components/tiptap-extensions/LinkPopup.vue
index 00a75b205..99c6f0b3b 100644
--- a/frontend/src/components/tiptap-extensions/LinkPopup.vue
+++ b/frontend/src/components/tiptap-extensions/LinkPopup.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-2 w-72 flex items-center gap-2 bg-surface-base shadow-xl rounded-lg border border-outline-gray-2">
+    <div class="p-2 w-72 flex items-center gap-2 bg-surface-base shadow-xl rounded-6 border border-outline-gray-2">
         <TextInput
             v-if="isEditing"
             ref="inputRef"
diff --git a/frontend/src/components/tiptap-extensions/MermaidBlockView.vue b/frontend/src/components/tiptap-extensions/MermaidBlockView.vue
index 4b4d35663..dab3ee49b 100644
--- a/frontend/src/components/tiptap-extensions/MermaidBlockView.vue
+++ b/frontend/src/components/tiptap-extensions/MermaidBlockView.vue
@@ -13,7 +13,8 @@ function nextMermaidInstanceId() {
 <script setup>
 import { useNodeViewEditable } from '@/composables/useNodeViewEditable';
 import { NodeViewWrapper } from '@tiptap/vue-3';
-import { useStorage, watchDebounced } from '@vueuse/core';
+import { watchDebounced } from '@vueuse/core';
+import { useTheme } from '@/composables/useTheme';
 import { computed, onMounted, ref, watch } from 'vue';
 import { getMermaid, getMermaidThemeConfig } from './mermaid-loader.js';
 
@@ -47,10 +48,10 @@ const errorMessage = ref('');
 const isRendering = ref(false);
 
 // Theme is the same signal the rest of the SPA uses (see Sidebar.vue /
-// DiffViewer.vue): a `wiki-theme` localStorage ref mirrored to <html data-theme>.
-// We re-render on flips so the diagram picks up the freshly-resolved Frappe UI
-// tokens (the theme itself comes from getMermaidThemeConfig(), not this value).
-const userTheme = useStorage('wiki-theme', 'dark');
+// DiffViewer.vue): the painted scheme behind <html data-theme>. We re-render on
+// flips so the diagram picks up the freshly-resolved Frappe UI tokens (the theme
+// itself comes from getMermaidThemeConfig(), not this value).
+const { resolvedTheme } = useTheme();
 
 function updateCode(event) {
 	props.updateAttributes({ code: event.target.value });
@@ -122,7 +123,7 @@ async function renderPreview() {
 // Debounce edits so we don't re-render on every keystroke, but re-render
 // immediately when the theme flips.
 watchDebounced(code, renderPreview, { debounce: 300, maxWait: 1000 });
-watch(userTheme, renderPreview);
+watch(resolvedTheme, renderPreview);
 
 onMounted(renderPreview);
 </script>
@@ -238,7 +239,7 @@ onMounted(renderPreview);
 
 .mermaid-figure-error {
 	font-size: 0.8125rem;
-	color: var(--ink-red-6, #b91c1c);
+	color: var(--ink-red-5, #b91c1c);
 }
 
 .mermaid-block {
@@ -305,7 +306,7 @@ onMounted(renderPreview);
 }
 
 .mermaid-block-delete:hover {
-	color: var(--ink-red-5, #dc2626);
+	color: var(--ink-red-4, #dc2626);
 }
 
 .mermaid-block-action-icon {
@@ -391,7 +392,7 @@ onMounted(renderPreview);
 	padding: 0.5rem 0.75rem;
 	border-top: 1px solid var(--outline-gray-2);
 	background: var(--surface-red-1, #fef2f2);
-	color: var(--ink-red-6, #b91c1c);
+	color: var(--ink-red-5, #b91c1c);
 	font-size: 0.75rem;
 	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
 		'Liberation Mono', monospace;
diff --git a/frontend/src/components/tiptap-extensions/PdfBlockView.vue b/frontend/src/components/tiptap-extensions/PdfBlockView.vue
index dcca2c059..b1e0d443b 100644
--- a/frontend/src/components/tiptap-extensions/PdfBlockView.vue
+++ b/frontend/src/components/tiptap-extensions/PdfBlockView.vue
@@ -194,7 +194,7 @@ function closeViewer() {
 
 .wiki-pdf-icon {
 	flex-shrink: 0;
-	color: var(--ink-red-5, #dc2626);
+	color: var(--ink-red-4, #dc2626);
 }
 
 .wiki-pdf-name {
@@ -292,7 +292,7 @@ function closeViewer() {
 }
 
 .wiki-pdf-error-body {
-	color: var(--ink-red-5, #dc2626);
+	color: var(--ink-red-4, #dc2626);
 }
 
 .wiki-pdf-spinner {
diff --git a/frontend/src/components/tiptap-extensions/SlashCommandsList.vue b/frontend/src/components/tiptap-extensions/SlashCommandsList.vue
index ea196b2c5..db187e99d 100644
--- a/frontend/src/components/tiptap-extensions/SlashCommandsList.vue
+++ b/frontend/src/components/tiptap-extensions/SlashCommandsList.vue
@@ -3,7 +3,7 @@
          so the wiki editor matches Gameplan: compact rows, section headers per
          consecutive `group` run, icon + title only. -->
     <div
-        class="slash-commands-list relative max-h-[300px] min-w-48 overflow-y-auto rounded-lg border border-outline-gray-2 bg-surface-elevation-2 p-1 text-base shadow-2xl"
+        class="slash-commands-list relative max-h-[300px] min-w-48 overflow-y-auto rounded-6 border border-outline-gray-2 bg-surface-elevation-2 p-1 text-base shadow-2xl"
     >
         <template v-if="items.length">
             <template
@@ -21,7 +21,7 @@
                     :key="item.title"
                     :ref="(el) => setItemRef(el, index)"
                     type="button"
-                    class="flex h-11 w-full items-center whitespace-nowrap rounded px-2 py-1.5 text-sm text-ink-gray-9 sm:h-7"
+                    class="flex h-11 w-full items-center whitespace-nowrap rounded-4 px-2 py-1.5 text-sm text-ink-gray-9 sm:h-7"
                     :class="index === selectedIndex ? 'bg-surface-gray-2' : ''"
                     @click="selectItem(index)"
                     @mouseover="selectedIndex = index"
diff --git a/frontend/src/components/tiptap-extensions/WikiBubbleMenu.vue b/frontend/src/components/tiptap-extensions/WikiBubbleMenu.vue
index b2514453a..5f1d26c32 100644
--- a/frontend/src/components/tiptap-extensions/WikiBubbleMenu.vue
+++ b/frontend/src/components/tiptap-extensions/WikiBubbleMenu.vue
@@ -1,6 +1,9 @@
 <template>
+	<!-- Held back until the scroll container is known: tiptap reads the floating
+	     options once, when the menu mounts, so a menu that mounts first is stuck
+	     listening to the window and never moves with the editor's own scroll. -->
 	<EditorBubbleMenu
-		v-if="editor"
+		v-if="editor && scrollBoundary"
 		class="wiki-bubble-menu"
 		:editor="editor"
 		:items="bubbleItems"
@@ -26,6 +29,7 @@ import {
 	Separator,
 	Strike,
 } from 'frappe-ui/editor';
+import { computed, nextTick, onMounted, ref } from 'vue';
 
 const props = defineProps({
 	editor: {
@@ -66,10 +70,11 @@ const bubbleItems = [
 // flip boundary clears the toolbar band with room to spare.
 const TOOLBAR_HEIGHT = 56;
 
-// Nearest scrollable ancestor of the editor. The sticky toolbar pins to the top
-// of this element, so it's the boundary Floating UI must measure against. Falls
-// back to <body> (a valid, always-connected boundary) when none is found, so the
-// resolved value caches once instead of re-walking the tree on every compute.
+// Nearest scrollable ancestor of the editor: the page's one scroller (a
+// ScrollArea viewport). The sticky toolbar pins to its top edge, so it is both
+// the boundary Floating UI must measure against and the element whose scroll
+// moves the selection under the menu. Falls back to <body>, which always
+// scrolls with the document.
 function getScrollParent(node) {
 	let el = node?.parentElement;
 	while (el) {
@@ -80,15 +85,17 @@ function getScrollParent(node) {
 	return document.body;
 }
 
-// Resolve (and cache) the scroll ancestor lazily. The ProseMirror DOM isn't
-// attached when this component mounts, so we resolve on first position compute
-// (a selection, always post-mount) by which point it's in the tree.
-let cachedBoundary = null;
+// The ProseMirror DOM is attached a tick after this component mounts, so the
+// container is resolved there rather than in setup — and the menu itself waits
+// for it (see the template).
+const scrollBoundary = ref(null);
+onMounted(async () => {
+	await nextTick();
+	scrollBoundary.value = getScrollParent(props.editor?.view?.dom);
+});
+
 function resolveScrollBoundary() {
-	if (!cachedBoundary || !cachedBoundary.isConnected) {
-		cachedBoundary = getScrollParent(props.editor?.view?.dom);
-	}
-	return cachedBoundary;
+	return scrollBoundary.value || document.body;
 }
 
 function shouldShowBubbleMenu({ editor, state }) {
@@ -117,7 +124,7 @@ function shouldShowBubbleMenu({ editor, state }) {
 // height, so such a selection overflows upward and flips the menu below.
 // flip/shift are Floating UI "derivable" options (functions) so the boundary
 // is resolved at compute time, not at mount.
-const floatingOptions = {
+const floatingOptions = computed(() => ({
 	strategy: 'fixed',
 	placement: 'top',
 	offset: 8,
@@ -127,13 +134,40 @@ const floatingOptions = {
 		boundary: resolveScrollBoundary(),
 	}),
 	shift: () => ({ padding: 8, boundary: resolveScrollBoundary() }),
+	// Without this the menu only repositions on window scroll, so scrolling the
+	// editor leaves it parked mid-page looking like a second toolbar.
+	scrollTarget: scrollBoundary.value,
+	// And once the selection scrolls out of the container the menu goes with it
+	// instead of hovering over unrelated text.
+	//
+	// The boundary is the container alone, with no toolbar padding: Floating
+	// UI's `hide` reports a reference as hidden when it overflows on *any*
+	// side, so padding the top by the toolbar's height hid the menu for a
+	// selection merely tucked under the toolbar — which is the case `flip`
+	// exists to handle by putting the menu below it.
+	hide: () => ({ boundary: resolveScrollBoundary() }),
 	shouldShow: shouldShowBubbleMenu,
-};
+}));
 </script>
 
 <style scoped>
 .wiki-bubble-menu {
-    /* Appended to <body>, so it must clear the editor chrome and sidebar. */
+    /* tiptap appends the menu to the editor's own parent — the prose column —
+       not to <body>, so it must clear the editor chrome and the sidebar. */
     z-index: 60;
+
+    /* Load-bearing, `!important` included — it is beating an inline style.
+       On mount tiptap writes `el.style.position = "absolute"`, and only after
+       positioning does it write back the strategy we asked for. Floating UI
+       picks the box its coordinates are relative to by reading the floating
+       element's computed position: anything but `fixed` and it measures
+       against the nearest positioned ancestor. So the first computePosition
+       answered in coordinates relative to the prose column's `relative`
+       wrapper, tiptap then stamped `position: fixed` on top of that answer,
+       and the menu landed up and to the left of the selection by exactly that
+       wrapper's origin. Every later selection was correct, because by then
+       the element was already fixed — which is why this only ever showed up
+       on the first selection after opening a page. */
+    position: fixed !important;
 }
 </style>
diff --git a/frontend/src/components/tiptap-extensions/WikiToolbar.vue b/frontend/src/components/tiptap-extensions/WikiToolbar.vue
index 8b5a3fe8f..1fd44d2dc 100644
--- a/frontend/src/components/tiptap-extensions/WikiToolbar.vue
+++ b/frontend/src/components/tiptap-extensions/WikiToolbar.vue
@@ -130,10 +130,16 @@ function handleImageSelect(event) {
 </script>
 
 <style scoped>
+/* 3rem tall with the same gutter as the breadcrumb bar above it: the two
+   chromes stack, so an off-by-a-few-pixels row reads as a misprint. The
+   height is fixed rather than derived from the buttons so it stays put when
+   the toolbar's contents change. */
 .wiki-toolbar {
     display: flex;
     align-items: center;
-    padding: 0.375rem 1.25rem;
+    flex-shrink: 0;
+    height: 3rem;
+    padding: 0 0.75rem;
     background-color: var(--surface-base, #ffffff);
     border-bottom: 1px solid var(--outline-gray-2, #e5e7eb);
     position: sticky;
@@ -141,6 +147,12 @@ function handleImageSelect(event) {
     z-index: 40;
 }
 
+@media (min-width: 640px) {
+    .wiki-toolbar {
+        padding: 0 1.25rem;
+    }
+}
+
 .hidden {
     display: none;
 }
diff --git a/frontend/src/components/tiptap-extensions/callout-block.js b/frontend/src/components/tiptap-extensions/callout-block.js
index fe7b6dd2a..7bc4ddc56 100644
--- a/frontend/src/components/tiptap-extensions/callout-block.js
+++ b/frontend/src/components/tiptap-extensions/callout-block.js
@@ -5,34 +5,49 @@
  * Supports Markdown syntax: :::type[title]\ncontent\n:::
  *
  * Supported types: note, tip, caution, danger, warning
+ *
+ * The body is real document content (`content: 'block+'`), not an attribute, so
+ * every mark and block node the editor has works inside a callout without the
+ * node view owning an editor of its own.
  */
 
 import { Node, mergeAttributes } from '@tiptap/core';
 import { VueNodeViewRenderer } from '@tiptap/vue-3';
 import CalloutBlockView from './CalloutBlockView.vue';
+import {
+	CALLOUT_TYPES,
+	DEFAULT_TITLES,
+	calloutMarkdownTokenizer,
+	parseCalloutMarkdown,
+	renderCalloutMarkdown,
+} from './callout-markdown.js';
 
-/**
- * Callout types that are supported
- */
-export const CALLOUT_TYPES = ['note', 'tip', 'caution', 'danger', 'warning'];
+export { CALLOUT_TYPES, DEFAULT_TITLES };
 
 /**
- * Default titles for each callout type
+ * Depth of the callout the position sits in, or null when it sits outside one.
  */
-export const DEFAULT_TITLES = {
-	note: 'Note',
-	tip: 'Tip',
-	caution: 'Caution',
-	danger: 'Danger',
-	warning: 'Caution',
-};
+function calloutDepth($pos, name) {
+	for (let depth = $pos.depth; depth > 0; depth--) {
+		if ($pos.node(depth).type.name === name) {
+			return depth;
+		}
+	}
+	return null;
+}
 
 export const CalloutBlock = Node.create({
 	name: 'calloutBlock',
 
 	group: 'block',
 
-	atom: true,
+	content: 'block+',
+
+	// A callout is a unit: a paste replaces its body rather than splitting it,
+	// and Backspace/Delete at either edge can't join it with its neighbours.
+	defining: true,
+
+	isolating: true,
 
 	draggable: true,
 
@@ -44,9 +59,6 @@ export const CalloutBlock = Node.create({
 			title: {
 				default: '',
 			},
-			content: {
-				default: '',
-			},
 		};
 	},
 
@@ -54,26 +66,24 @@ export const CalloutBlock = Node.create({
 		return [
 			{
 				tag: 'aside.callout',
+				contentElement: '.callout-content',
 				getAttrs: (dom) => {
 					const classList = dom.className.split(' ');
 					const typeClass = classList.find((c) => c.startsWith('callout-'));
 					const type = typeClass ? typeClass.replace('callout-', '') : 'note';
 
-					const titleEl = dom.querySelector('.callout-title span');
-					const title = titleEl ? titleEl.textContent : '';
-
-					const contentEl = dom.querySelector('.callout-content');
-					const content = contentEl ? contentEl.textContent : '';
+					const titleEl = dom.querySelector('.callout-title');
+					const title = titleEl ? titleEl.textContent.trim() : '';
 
-					return { type, title, content };
+					return { type, title };
 				},
 			},
 			{
 				tag: 'div[data-type="callout-block"]',
+				contentElement: '.callout-content',
 				getAttrs: (dom) => ({
 					type: dom.getAttribute('data-callout-type') || 'note',
 					title: dom.getAttribute('data-title') || '',
-					content: dom.getAttribute('data-content') || '',
 				}),
 			},
 		];
@@ -91,15 +101,15 @@ export const CalloutBlock = Node.create({
 			attrs,
 			[
 				'div',
-				{ class: 'callout-title' },
+				{ class: 'callout-header' },
 				[
 					'span',
-					{},
+					{ class: 'callout-title' },
 					node.attrs.title ||
 						node.attrs.type.charAt(0).toUpperCase() + node.attrs.type.slice(1),
 				],
 			],
-			['div', { class: 'callout-content' }, node.attrs.content],
+			['div', { class: 'callout-content' }, 0],
 		];
 	},
 
@@ -107,82 +117,105 @@ export const CalloutBlock = Node.create({
 		return VueNodeViewRenderer(CalloutBlockView);
 	},
 
+	addKeyboardShortcuts() {
+		// A callout is `isolating`, so ProseMirror's own exits don't apply: at the
+		// end of the document there is nothing after the node to move into, and
+		// the cursor would have nowhere to go.
+		const exitForward = () => {
+			const { $from, empty } = this.editor.state.selection;
+			if (!empty) return false;
+
+			const depth = calloutDepth($from, this.name);
+			if (depth === null) return false;
+
+			const after = $from.after(depth);
+			return this.editor
+				.chain()
+				.insertContentAt(after, { type: 'paragraph' })
+				.setTextSelection(after + 1)
+				.focus()
+				.run();
+		};
+
+		return {
+			'Mod-Enter': exitForward,
+
+			ArrowDown: () => {
+				const { state } = this.editor;
+				const { $from, empty } = state.selection;
+				if (!empty) return false;
+
+				const depth = calloutDepth($from, this.name);
+				if (depth === null) return false;
+
+				// Only when the callout ends the document and the cursor is at the
+				// end of its last block — anything else has somewhere to go already.
+				if ($from.after(depth) < state.doc.content.size) return false;
+				if ($from.pos < $from.end(depth) - 1) return false;
+
+				return exitForward();
+			},
+
+			Backspace: () => {
+				const { $from, empty } = this.editor.state.selection;
+				if (!empty) return false;
+
+				const depth = calloutDepth($from, this.name);
+				if (depth === null) return false;
+
+				// Only at the very start of the first block, and only when there is
+				// nothing left to delete inside — otherwise fall through to the
+				// default, which `isolating` already stops at the border.
+				if ($from.pos !== $from.start(depth) + 1) return false;
+
+				const callout = $from.node(depth);
+				if (callout.childCount > 1 || callout.firstChild?.content.size) {
+					return false;
+				}
+
+				const from = $from.before(depth);
+				return this.editor.commands.deleteRange({
+					from,
+					to: from + callout.nodeSize,
+				});
+			},
+		};
+	},
+
 	addCommands() {
 		return {
 			setCallout:
 				(attributes) =>
-				({ commands }) => {
+				({ commands, editor }) => {
+					// The `:::` fence can't express a callout inside a callout, so
+					// don't offer one.
+					if (editor.isActive(this.name)) {
+						return false;
+					}
+
+					const type = attributes?.type || 'note';
 					return commands.insertContent({
 						type: this.name,
-						attrs: attributes,
+						// The title is seeded rather than left blank: it is a real,
+						// editable value in the header, not a placeholder the author
+						// can put a cursor in but never delete.
+						attrs: {
+							type,
+							title: attributes?.title || DEFAULT_TITLES[type] || '',
+						},
+						content: [{ type: 'paragraph' }],
 					});
 				},
 		};
 	},
 
-	// TipTap v3 Markdown extension support
-	markdownTokenizer: {
-		name: 'calloutBlock',
-		level: 'block',
-
-		start(src) {
-			return src.indexOf(':::');
-		},
-
-		tokenize(src, tokens, lexer) {
-			// Match :::type[title]\ncontent\n::: or :::type\ncontent\n:::
-			// Consume any blank lines that follow the closing fence so they
-			// aren't re-parsed into phantom empty paragraphs. Without this, a
-			// callout followed by another block accumulates two extra newlines
-			// on every markdown round-trip (the serializer's block separator
-			// plus PreserveBlankLines), so getMarkdown() never stabilises and
-			// the content grows on each save.
-			const match =
-				/^:::(\w+)(?:\[([^\]]*)\])?\n([\s\S]*?)\n:::[ \t]*(?:\n+|$)/.exec(src);
-
-			if (!match) {
-				return undefined;
-			}
-
-			const rawType = match[1].toLowerCase();
-			if (!CALLOUT_TYPES.includes(rawType)) {
-				return undefined;
-			}
-
-			// Normalize 'warning' to 'caution'
-			const calloutType = rawType === 'warning' ? 'caution' : rawType;
-
-			return {
-				type: 'calloutBlock',
-				raw: match[0],
-				calloutType: calloutType,
-				title: match[2] || '',
-				text: (match[3] || '').trim(),
-			};
-		},
-	},
-
-	parseMarkdown(token) {
-		return {
-			type: 'calloutBlock',
-			attrs: {
-				type: token.calloutType || 'note',
-				title: token.title || '',
-				content: token.text || '',
-			},
-		};
-	},
+	// TipTap v3 Markdown extension support. The hooks live in callout-markdown.js
+	// so they can be unit tested without loading this module's .vue node view.
+	markdownTokenizer: calloutMarkdownTokenizer,
 
-	renderMarkdown(node) {
-		const calloutType = node.attrs.type || 'note';
-		const title = node.attrs.title || '';
-		const content = node.attrs.content || '';
+	parseMarkdown: parseCalloutMarkdown,
 
-		if (title) {
-			return `:::${calloutType}[${title}]\n${content}\n:::\n\n`;
-		}
-		return `:::${calloutType}\n${content}\n:::\n\n`;
-	},
+	renderMarkdown: renderCalloutMarkdown,
 });
 
 export default CalloutBlock;
diff --git a/frontend/src/components/tiptap-extensions/callout-markdown.js b/frontend/src/components/tiptap-extensions/callout-markdown.js
new file mode 100644
index 000000000..320221702
--- /dev/null
+++ b/frontend/src/components/tiptap-extensions/callout-markdown.js
@@ -0,0 +1,140 @@
+/**
+ * Markdown parse/serialize for the callout block.
+ *
+ * Split out of callout-block.js so it can be unit tested: that module imports a
+ * .vue node view at the top level, which `node --test` cannot load.
+ *
+ * The callout is a container node (`content: 'block+'`), so the fence body is
+ * tokenized and parsed into real child nodes rather than kept as a string. This
+ * mirrors TipTap's own `createBlockMarkdownSpec`, which we can't use directly:
+ * it emits Pandoc's `:::name {attrs}` syntax, and the wiki's stored format is
+ * Starlight's `:::type[Title]`.
+ */
+
+/**
+ * Callout types that are supported
+ */
+export const CALLOUT_TYPES = ['note', 'tip', 'caution', 'danger', 'warning'];
+
+/**
+ * Default titles for each callout type.
+ *
+ * Lives here rather than in callout-block.js because both ends of the markdown
+ * round-trip need it: a fence without `[Title]` parses to the default as a real
+ * attribute value (the node view shows an editable title, not a placeholder the
+ * author can't delete), and the serializer drops the brackets again when the
+ * title still equals the default — so documents written before any of this keep
+ * their `:::note` exactly as it is.
+ */
+export const DEFAULT_TITLES = {
+	note: 'Note',
+	tip: 'Tip',
+	caution: 'Caution',
+	danger: 'Danger',
+	warning: 'Caution',
+};
+
+/**
+ * Tokenize the fence body as block markdown.
+ *
+ * `blockTokens` leaves inline tokens unresolved on tokens it built from a plain
+ * text run, so they're filled in here — without them the parser sees no bold,
+ * italic or link inside a callout. Trailing empty paragraphs come from the
+ * blank line the author left before the closing fence and would otherwise
+ * become a real empty block on every round-trip.
+ */
+function tokenizeCalloutBody(body, lexer) {
+	if (!body || !lexer) return [];
+
+	const tokens = lexer.blockTokens(body);
+
+	for (const token of tokens) {
+		if (token.text && (!token.tokens || token.tokens.length === 0)) {
+			token.tokens = lexer.inlineTokens(token.text);
+		}
+	}
+
+	while (tokens.length > 0) {
+		const last = tokens[tokens.length - 1];
+		if (last.type === 'paragraph' && !last.text?.trim()) {
+			tokens.pop();
+		} else {
+			break;
+		}
+	}
+
+	return tokens;
+}
+
+export const calloutMarkdownTokenizer = {
+	name: 'calloutBlock',
+	level: 'block',
+
+	start(src) {
+		return src.indexOf(':::');
+	},
+
+	tokenize(src, _tokens, lexer) {
+		// Match :::type[title]\ncontent\n::: or :::type\ncontent\n:::
+		const match =
+			/^:::(\w+)(?:\[([^\]]*)\])?\n([\s\S]*?)\n:::[ \t]*(?:\n+|$)/.exec(src);
+
+		if (!match) {
+			return undefined;
+		}
+
+		const rawType = match[1].toLowerCase();
+		if (!CALLOUT_TYPES.includes(rawType)) {
+			return undefined;
+		}
+
+		// Normalize 'warning' to 'caution'
+		const calloutType = rawType === 'warning' ? 'caution' : rawType;
+		const body = (match[3] || '').trim();
+
+		return {
+			type: 'calloutBlock',
+			raw: match[0],
+			calloutType: calloutType,
+			title: match[2] || '',
+			text: body,
+			tokens: tokenizeCalloutBody(body, lexer),
+		};
+	},
+};
+
+export function parseCalloutMarkdown(token, h) {
+	const content = h.parseChildren(token.tokens || []);
+	const calloutType = token.calloutType || 'note';
+
+	return {
+		type: 'calloutBlock',
+		attrs: {
+			type: calloutType,
+			title: token.title || DEFAULT_TITLES[calloutType] || '',
+		},
+		// `block+` needs at least one child, and an empty callout is a legal
+		// thing to write.
+		content: content.length ? content : [{ type: 'paragraph' }],
+	};
+}
+
+// No trailing block separator: the serializer already puts one between blocks,
+// and the doc's trailing empty paragraph contributes another. Adding a third
+// pushed the run past three newlines, which is where PreserveBlankLines starts
+// turning a `space` token into real empty paragraphs — so every round-trip grew
+// the document by two newlines and getMarkdown() never settled. Heading and list
+// are stable for the same reason: they leave the separator to the serializer.
+export function renderCalloutMarkdown(node, h) {
+	const calloutType = node.attrs?.type || 'note';
+	const title = node.attrs?.title || '';
+	const body = h.renderChildren(node.content || [], '\n\n').trim();
+	// A title that is just the type's default is what the fence means without
+	// any brackets — writing it out would rewrite every untitled callout in the
+	// wiki the first time its page is saved.
+	const isDefault = title === (DEFAULT_TITLES[calloutType] || '');
+	const fence =
+		title && !isDefault ? `:::${calloutType}[${title}]` : `:::${calloutType}`;
+
+	return `${fence}\n${body}\n:::`;
+}
diff --git a/frontend/src/components/tiptap-extensions/callout-markdown.test.js b/frontend/src/components/tiptap-extensions/callout-markdown.test.js
new file mode 100644
index 000000000..fcd56d9d5
--- /dev/null
+++ b/frontend/src/components/tiptap-extensions/callout-markdown.test.js
@@ -0,0 +1,186 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { Node } from '@tiptap/core';
+import { CodeBlock } from '@tiptap/extension-code-block';
+import { MarkdownManager } from '@tiptap/markdown';
+
+import {
+	calloutMarkdownTokenizer,
+	parseCalloutMarkdown,
+	renderCalloutMarkdown,
+} from './callout-markdown.js';
+import { PreserveBlankLines } from './preserve-blank-lines.js';
+import { wikiStarterKit } from './wiki-starterkit.js';
+
+/**
+ * Regression coverage for the callout markdown round-trip.
+ *
+ * `renderMarkdown` used to append its own `\n\n` after the closing fence. The
+ * serializer already separates blocks, and the doc's trailing empty paragraph
+ * serialises to another blank line, so a callout ended up followed by four
+ * newlines. Four is one past the point where PreserveBlankLines turns marked's
+ * `space` token into a real empty paragraph, and that paragraph serialised to
+ * two more newlines on the next pass — `getMarkdown()` grew by two newlines
+ * every round-trip and never settled, so repeated saves inflated the stored
+ * content.
+ *
+ * The node view lives in callout-block.js, which imports a .vue file that
+ * `node --test` cannot load. The markdown hooks are in callout-markdown.js for
+ * exactly this reason, and the schema-only node below carries the real ones.
+ *
+ * The callout is a container node, so the cases also cover the block children
+ * that only became reachable once the body stopped being a string attribute:
+ * lists, headings, code blocks and multiple paragraphs.
+ */
+const CalloutBlockSchemaOnly = Node.create({
+	name: 'calloutBlock',
+	group: 'block',
+	content: 'block+',
+	defining: true,
+	isolating: true,
+	addAttributes() {
+		return {
+			type: { default: 'note' },
+			title: { default: '' },
+		};
+	},
+	renderHTML() {
+		return ['aside', {}, ['div', { class: 'callout-content' }, 0]];
+	},
+	markdownTokenizer: calloutMarkdownTokenizer,
+	parseMarkdown: parseCalloutMarkdown,
+	renderMarkdown: renderCalloutMarkdown,
+});
+
+function buildManager() {
+	const starterKit = wikiStarterKit();
+	const baseExtensions = starterKit.config.addExtensions.call({
+		options: starterKit.options,
+		name: 'starterKit',
+	});
+	// wikiStarterKit turns codeBlock off because WikiEditor swaps in frappe-ui's
+	// CodeBlock, whose .vue node view `node --test` can't load. The plain node
+	// carries the same name and markdown spec, so it stands in here — without it
+	// a fenced block inside a callout silently degrades to a bare text node and
+	// the round-trip still looks stable.
+	return new MarkdownManager({
+		extensions: [
+			...baseExtensions,
+			CodeBlock,
+			PreserveBlankLines,
+			CalloutBlockSchemaOnly,
+		],
+		markedOptions: { breaks: true },
+	});
+}
+
+/** Serialize -> parse -> serialize, `passes` times, collecting each output. */
+function roundTrip(manager, source, passes = 3) {
+	const outputs = [];
+	let current = source;
+	for (let i = 0; i < passes; i++) {
+		current = manager.serialize(manager.parse(current));
+		outputs.push(current);
+	}
+	return outputs;
+}
+
+const CASES = {
+	'titled callout': ':::note[Test]\nhello\n:::',
+	'callout with inline marks':
+		':::note[Test]\nThis has **bold** and *italic* and [a link](https://example.com)\n:::',
+	'untitled callout': ':::note\nhello\n:::',
+	'callout followed by a paragraph': ':::note[T]\nhello\n:::\n\nafter para',
+	'paragraph followed by a callout': 'before\n\n:::tip\nbody\n:::',
+	'two adjacent callouts': ':::note\na\n:::\n\n:::tip\nb\n:::',
+	'callout with two paragraphs': ':::note\nfirst para\n\nsecond para\n:::',
+	'callout with a bullet list': ':::tip\nlead in\n\n- one\n- two\n:::',
+	'callout with a heading': ':::note\n## Heading\n\nbody\n:::',
+	'callout with a code block': ':::caution\n```js\nconst a = 1;\n```\n:::',
+	'callout with an ordered list and marks':
+		':::danger[Careful]\n1. **first**\n2. *second*\n:::',
+};
+
+for (const [label, source] of Object.entries(CASES)) {
+	test(`${label} round-trips to a fixed point`, () => {
+		const outputs = roundTrip(buildManager(), source);
+		assert.deepEqual(
+			outputs,
+			Array(outputs.length).fill(outputs[0]),
+			`markdown kept changing across round-trips: ${JSON.stringify(outputs)}`,
+		);
+	});
+}
+
+test('a callout body parses into real block nodes', () => {
+	// A fixed point on its own proves nothing about fidelity: content that
+	// degrades to plain text round-trips just as stably. Assert the shape.
+	const manager = buildManager();
+	const callout = manager.parse(
+		':::tip[How]\nlead **in**\n\n- one\n\n```js\nconst a = 1;\n```\n:::',
+	).content[0];
+
+	assert.equal(callout.type, 'calloutBlock');
+	assert.deepEqual(callout.attrs, { type: 'tip', title: 'How' });
+	assert.deepEqual(
+		callout.content.map((child) => child.type),
+		['paragraph', 'bulletList', 'codeBlock'],
+	);
+	assert.deepEqual(callout.content[0].content[1].marks, [{ type: 'bold' }]);
+	assert.equal(callout.content[2].attrs.language, 'js');
+});
+
+test('an empty callout still parses to a body that block+ accepts', () => {
+	const callout = buildManager().parse(':::note\n\n:::').content[0];
+	assert.deepEqual(callout.content, [{ type: 'paragraph' }]);
+});
+
+test('an untitled fence carries the type default as a real title', () => {
+	// Not a placeholder: the node view puts this in an input the author can
+	// select and delete, which a placeholder never let them do.
+	const callout = buildManager().parse(':::danger\nboom\n:::').content[0];
+	assert.equal(callout.attrs.title, 'Danger');
+});
+
+test('a title still equal to the default serializes without brackets', () => {
+	// Otherwise the first save of any page rewrites every `:::note` in it.
+	const manager = buildManager();
+	const output = manager.serialize(manager.parse(':::danger\nboom\n:::'));
+	assert.match(output, /^:::danger\n/);
+	assert.ok(!output.includes('[Danger]'), output);
+});
+
+test('a title the author wrote survives the round-trip', () => {
+	const manager = buildManager();
+	const output = manager.serialize(manager.parse(':::danger[Boom]\nboom\n:::'));
+	assert.match(output, /^:::danger\[Boom\]\n/);
+});
+
+test('renderMarkdown leaves the block separator to the serializer', () => {
+	// The specific defect: a trailing separator baked into the node's own
+	// output. Asserted directly so a re-introduction fails here by name rather
+	// than as a puzzling growth in the round-trip tests above.
+	const rendered = renderCalloutMarkdown(
+		{
+			attrs: { type: 'note', title: 'T' },
+			content: [
+				{ type: 'paragraph', content: [{ type: 'text', text: 'body' }] },
+			],
+		},
+		{ renderChildren: () => 'body' },
+	);
+	assert.equal(rendered, ':::note[T]\nbody\n:::');
+	assert.ok(
+		!rendered.endsWith('\n'),
+		'renderMarkdown must not append its own trailing newlines',
+	);
+});
+
+test('a callout keeps one blank line before the block that follows it', () => {
+	const manager = buildManager();
+	const output = manager.serialize(
+		manager.parse(':::note[T]\nhello\n:::\n\nafter para'),
+	);
+	assert.match(output, /:::\n\nafter para/);
+});
diff --git a/frontend/src/components/tiptap-extensions/slash-commands.js b/frontend/src/components/tiptap-extensions/slash-commands.js
index 727b107e3..9a732b591 100644
--- a/frontend/src/components/tiptap-extensions/slash-commands.js
+++ b/frontend/src/components/tiptap-extensions/slash-commands.js
@@ -157,10 +157,7 @@ export const SLASH_COMMANDS = [
 				.chain()
 				.focus()
 				.deleteRange(range)
-				.insertContent({
-					type: 'calloutBlock',
-					attrs: { type: 'note', title: '', content: '' },
-				})
+				.setCallout({ type: 'note' })
 				.run();
 		},
 	},
@@ -173,10 +170,7 @@ export const SLASH_COMMANDS = [
 				.chain()
 				.focus()
 				.deleteRange(range)
-				.insertContent({
-					type: 'calloutBlock',
-					attrs: { type: 'tip', title: '', content: '' },
-				})
+				.setCallout({ type: 'tip' })
 				.run();
 		},
 	},
@@ -189,14 +183,7 @@ export const SLASH_COMMANDS = [
 				.chain()
 				.focus()
 				.deleteRange(range)
-				.insertContent({
-					type: 'calloutBlock',
-					attrs: {
-						type: 'caution',
-						title: '',
-						content: '',
-					},
-				})
+				.setCallout({ type: 'caution' })
 				.run();
 		},
 	},
@@ -209,14 +196,7 @@ export const SLASH_COMMANDS = [
 				.chain()
 				.focus()
 				.deleteRange(range)
-				.insertContent({
-					type: 'calloutBlock',
-					attrs: {
-						type: 'danger',
-						title: '',
-						content: '',
-					},
-				})
+				.setCallout({ type: 'danger' })
 				.run();
 		},
 	},
diff --git a/frontend/src/composables/useChangeRequestActions.js b/frontend/src/composables/useChangeRequestActions.js
new file mode 100644
index 000000000..c6ca290d6
--- /dev/null
+++ b/frontend/src/composables/useChangeRequestActions.js
@@ -0,0 +1,173 @@
+import { toast } from 'frappe-ui';
+
+import router from '../router';
+import { useChangeRequestStore } from '../stores/changeRequest';
+import { useDraftWorkspaceStore } from '../stores/draftWorkspace';
+import { useSpaceStore } from '../stores/space';
+
+/**
+ * Submit / discard / merge for the space's open change request.
+ *
+ * These used to live in SpaceDetails, next to the banner that triggered them.
+ * The mode strip that replaced the banner renders in the sidebar — a sibling of
+ * the page — so the actions moved out of the component tree entirely. They read
+ * everything they need from the stores and the route.
+ */
+export function useChangeRequestActions() {
+	const crStore = useChangeRequestStore();
+	const draftStore = useDraftWorkspaceStore();
+	const spaceStore = useSpaceStore();
+
+	function finalizationError(action) {
+		const blocker = draftStore.finalizationBlocker;
+		if (blocker === 'conflict') {
+			return __('Reload latest before {0}', [action]);
+		}
+		if (blocker === 'failed') {
+			return __('Resolve failed changes before {0}', [action]);
+		}
+		if (blocker === 'pending') {
+			return __('Wait for pending changes to sync before {0}', [action]);
+		}
+		if (blocker === 'unsaved') {
+			return __('Save your changes before {0}', [action]);
+		}
+		return null;
+	}
+
+	async function submitForReview() {
+		// Nothing offers a Save button any more, so an unsaved buffer is not the
+		// user's problem to solve before submitting: drain it here, then judge
+		// the blockers that a flush cannot clear (conflicts, failed mutations).
+		if (draftStore.finalizationBlocker === 'unsaved') {
+			const failures = await draftStore.flushDirtyPages();
+			if (failures.length) {
+				const error = failures[0];
+				toast.error(
+					error?.messages?.[0] || error?.message || __('Error saving draft'),
+				);
+				return;
+			}
+		}
+		const blockerMessage = finalizationError(__('submitting'));
+		if (blockerMessage) {
+			toast.error(blockerMessage);
+			return;
+		}
+		try {
+			const result = await crStore.submitForReview();
+			toast.success(__('Change request submitted for review'));
+			if (result?.name) {
+				router.push({
+					name: 'ChangeRequestReview',
+					params: { changeRequestId: result.name },
+				});
+			}
+		} catch (error) {
+			toast.error(error.messages?.[0] || __('Error submitting for review'));
+		}
+	}
+
+	async function discardChangeRequest() {
+		const spaceId = spaceStore.spaceId;
+		const crName = crStore.currentChangeRequest?.name;
+		crStore.finalizing = 'withdrawing';
+		try {
+			await crStore.archiveChangeRequest();
+			toast.success(__('Change request archived'));
+			crStore.currentChangeRequest = null;
+			crStore.clearChanges();
+			// Drop the local-first drafts too, or hydrate restores the discarded
+			// content from IndexedDB (and autosave re-creates the change request).
+			await draftStore.discardPersistedDraftsForCr(crName);
+			// Same as merge: the published tree the next CR opens on is the one
+			// already rendered, so it stays put while hydrate refreshes it.
+			draftStore.reset({ keepTree: true });
+			await draftStore.hydrate(spaceId);
+		} catch (error) {
+			toast.error(error.messages?.[0] || __('Error archiving change request'));
+		} finally {
+			crStore.finalizing = null;
+		}
+	}
+
+	function findNodeByDocKey(nodes, docKey) {
+		if (!nodes) return null;
+		for (const node of nodes) {
+			if (node.doc_key === docKey) return node;
+			const found = findNodeByDocKey(node.children, docKey);
+			if (found) return found;
+		}
+		return null;
+	}
+
+	async function mergeChangeRequest() {
+		if (spaceStore.isTreeReordering) {
+			toast.error(__('Please wait for reordering to finish before merging'));
+			return;
+		}
+		const blockerMessage = finalizationError(__('merging'));
+		if (blockerMessage) {
+			toast.error(blockerMessage);
+			return;
+		}
+		const spaceId = spaceStore.spaceId;
+		const docKey = spaceStore.selectedDraftKey;
+		const changeRequestName = crStore.currentChangeRequest?.name;
+		// Held across the rehydrate as well as the merge itself, so the strip shows
+		// one state for the whole trip instead of the CR's intermediate ones.
+		crStore.finalizing = 'merging';
+		try {
+			await crStore.approveAndMergeChangeRequest();
+			toast.success(__('Change request merged'));
+			crStore.currentChangeRequest = null;
+			crStore.clearChanges();
+			// The CR's drafts are now merged into the published doc — clear them so a
+			// stale local copy can't resurrect after the merge.
+			await draftStore.discardPersistedDraftsForCr(changeRequestName);
+			// Keep the tree on screen: the merged tree is all but identical to the one
+			// already rendered, so blanking it to a skeleton for a round trip is pure
+			// loss. hydrate() swaps in the new one in a single paint.
+			draftStore.reset({ keepTree: true });
+
+			// Leave the draft route before the rehydrate, not after: the draft the
+			// URL points at no longer exists, so waiting would park the editor on
+			// "Draft not found" for the length of the round trip. The tree is still
+			// on screen (keepTree), so the published page is resolvable now — except
+			// for a page created in this CR, which only gets a document_name once
+			// the merge lands, so that one is resolved again afterwards.
+			const openMergedPage = () => {
+				if (!docKey) return true;
+				const node = findNodeByDocKey(spaceStore.treeData?.children, docKey);
+				if (!node?.document_name) return false;
+				router.push({
+					name: 'SpacePage',
+					params: { spaceId, pageId: node.document_name },
+				});
+				return true;
+			};
+
+			const opened = openMergedPage();
+			await draftStore.hydrate(spaceId);
+			if (!opened) openMergedPage();
+		} catch (error) {
+			// A merge conflict leaves the CR Approved; the conflict-resolution UI
+			// lives on the review page, so send the author there to resolve it.
+			if (error.exc_type === 'ValidationError' && changeRequestName) {
+				toast.error(
+					error.messages?.[0] || __('Merge conflict — resolve it to continue'),
+				);
+				router.push({
+					name: 'ChangeRequestReview',
+					params: { changeRequestId: changeRequestName },
+				});
+				return;
+			}
+			toast.error(error.messages?.[0] || __('Error merging change request'));
+		} finally {
+			crStore.finalizing = null;
+		}
+	}
+
+	return { submitForReview, discardChangeRequest, mergeChangeRequest };
+}
diff --git a/frontend/src/composables/useChangeTypeDisplay.js b/frontend/src/composables/useChangeTypeDisplay.js
index a3c21b35c..3cc8e3a40 100644
--- a/frontend/src/composables/useChangeTypeDisplay.js
+++ b/frontend/src/composables/useChangeTypeDisplay.js
@@ -1,27 +1,34 @@
+// `label` is a function, not a string: `__` is installed on window by the
+// translation plugin during app boot, so a module-scope call throws in any
+// chunk that loads before it — as this one now does, via the sidebar.
 const CHANGE_TYPE_CONFIG = {
 	added: {
 		icon: 'lucide-plus',
 		iconClass: 'bg-green-100 text-green-600',
 		theme: 'green',
-		label: __('New'),
+		dotClass: 'bg-surface-green-5',
+		label: () => __('New'),
 	},
 	modified: {
 		icon: 'lucide-pencil',
 		iconClass: 'bg-blue-100 text-blue-600',
 		theme: 'blue',
-		label: __('Modified'),
+		dotClass: 'bg-surface-blue-5',
+		label: () => __('Modified'),
 	},
 	deleted: {
 		icon: 'lucide-trash-2',
 		iconClass: 'bg-red-100 text-red-600',
 		theme: 'red',
-		label: __('Deleted'),
+		dotClass: 'bg-surface-red-5',
+		label: () => __('Deleted'),
 	},
 	reordered: {
 		icon: 'lucide-arrow-up-down',
 		iconClass: 'bg-amber-100 text-amber-600',
-		theme: 'orange',
-		label: __('Reordered'),
+		theme: 'amber',
+		dotClass: 'bg-surface-amber-5',
+		label: () => __('Reordered'),
 	},
 };
 
@@ -29,13 +36,16 @@ const DEFAULT_CONFIG = {
 	icon: 'lucide-file-text',
 	iconClass: 'bg-gray-100 text-gray-600',
 	theme: 'gray',
-	label: '',
+	dotClass: 'bg-surface-gray-5',
 };
 
 export function useChangeTypeDisplay() {
 	function getConfig(changeType) {
 		return (
-			CHANGE_TYPE_CONFIG[changeType] || { ...DEFAULT_CONFIG, label: changeType }
+			CHANGE_TYPE_CONFIG[changeType] || {
+				...DEFAULT_CONFIG,
+				label: () => changeType,
+			}
 		);
 	}
 
@@ -51,8 +61,16 @@ export function useChangeTypeDisplay() {
 		return getConfig(changeType).theme;
 	}
 
+	// The tree marks a changed page with a dot rather than a word, so the fill
+	// is the only thing carrying the change type there. Written out as whole
+	// class names: Tailwind scans this file, and a composed one would not
+	// survive the build.
+	function getChangeDotClass(changeType) {
+		return getConfig(changeType).dotClass || DEFAULT_CONFIG.dotClass;
+	}
+
 	function getChangeLabel(changeType) {
-		return getConfig(changeType).label;
+		return getConfig(changeType).label();
 	}
 
 	function getChangeDescription(changeType, isGroup, isExternalLink) {
@@ -76,6 +94,7 @@ export function useChangeTypeDisplay() {
 		getChangeIcon,
 		getChangeIconClass,
 		getChangeTheme,
+		getChangeDotClass,
 		getChangeLabel,
 		getChangeDescription,
 	};
diff --git a/frontend/src/composables/useChangeTypeDisplay.test.js b/frontend/src/composables/useChangeTypeDisplay.test.js
new file mode 100644
index 000000000..f44ac0da2
--- /dev/null
+++ b/frontend/src/composables/useChangeTypeDisplay.test.js
@@ -0,0 +1,35 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+// The translation global is installed during app boot, so a module that calls
+// `__` at import time throws in any chunk that loads first — as this one now
+// does, pulled in eagerly by the sidebar's mode strip.
+test('importing does not call the translation global', async () => {
+	assert.equal(globalThis.__, undefined, 'test needs an untranslated global');
+
+	const { useChangeTypeDisplay } = await import('./useChangeTypeDisplay.js');
+
+	globalThis.__ = (text) => `translated:${text}`;
+	try {
+		assert.equal(
+			useChangeTypeDisplay().getChangeLabel('added'),
+			'translated:New',
+		);
+	} finally {
+		globalThis.__ = undefined;
+	}
+});
+
+// The tree draws a dot, so the fill is the only thing that says which kind of
+// change it is. A composed class name would not survive Tailwind's scan, so
+// every one has to come back whole.
+test('every change type has a whole dot class, unknown ones fall back', async () => {
+	const { useChangeTypeDisplay } = await import('./useChangeTypeDisplay.js');
+	const { getChangeDotClass } = useChangeTypeDisplay();
+
+	assert.equal(getChangeDotClass('added'), 'bg-surface-green-5');
+	assert.equal(getChangeDotClass('modified'), 'bg-surface-blue-5');
+	assert.equal(getChangeDotClass('deleted'), 'bg-surface-red-5');
+	assert.equal(getChangeDotClass('reordered'), 'bg-surface-amber-5');
+	assert.equal(getChangeDotClass('something-else'), 'bg-surface-gray-5');
+});
diff --git a/frontend/src/composables/useNewPageRequest.js b/frontend/src/composables/useNewPageRequest.js
new file mode 100644
index 000000000..5453c38e4
--- /dev/null
+++ b/frontend/src/composables/useNewPageRequest.js
@@ -0,0 +1,27 @@
+import { ref } from 'vue';
+
+// Module-scoped for the same reason usePageSettingsPanel is: the button that
+// asks for a new page (the content column's empty state) and the dialog that
+// makes one (the tree, in the sidebar) sit in different columns, and neither is
+// an ancestor of the other.
+//
+// A pending flag rather than an event, because on mobile the tree lives in a
+// drawer that unmounts while closed — the dialog's owner is not there to hear
+// an event at the moment the button is pressed. The flag survives until
+// whoever can act on it mounts and consumes it.
+const pending = ref(false);
+
+export function useNewPageRequest() {
+	function requestNewPage() {
+		pending.value = true;
+	}
+
+	// Consumed once: a second tree mounting later must not reopen the dialog.
+	function consumeNewPageRequest() {
+		if (!pending.value) return false;
+		pending.value = false;
+		return true;
+	}
+
+	return { pending, requestNewPage, consumeNewPageRequest };
+}
diff --git a/frontend/src/composables/usePageSettingsPanel.js b/frontend/src/composables/usePageSettingsPanel.js
new file mode 100644
index 000000000..539879ad6
--- /dev/null
+++ b/frontend/src/composables/usePageSettingsPanel.js
@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+
+// Module-scoped rather than per-editor: the editor component is torn down and
+// rebuilt whenever the route leaves the page (a draft, another space), and
+// whether the settings panel is open is a preference about the workspace, not
+// a property of whichever page happens to be on screen.
+const isOpen = ref(false);
+
+export function usePageSettingsPanel() {
+	function open() {
+		isOpen.value = true;
+	}
+
+	function close() {
+		isOpen.value = false;
+	}
+
+	function toggle() {
+		isOpen.value = !isOpen.value;
+	}
+
+	return { isOpen, open, close, toggle };
+}
diff --git a/frontend/src/composables/usePinnedSpaces.js b/frontend/src/composables/usePinnedSpaces.js
new file mode 100644
index 000000000..f66843fdd
--- /dev/null
+++ b/frontend/src/composables/usePinnedSpaces.js
@@ -0,0 +1,48 @@
+import { useStorage } from '@vueuse/core';
+
+// Pins are per-user and per-browser. They stay in localStorage until someone
+// asks for them to follow an account across devices — a field on Wiki Space
+// would be a shared setting, which is the opposite of what a pin is.
+const STORAGE_KEY = 'wiki:pinned-spaces';
+
+/**
+ * Pinned spaces float to the top in the order they were pinned; the rest keep
+ * the order the list resource returned them in (switcher_order, then creation).
+ *
+ * Pins are kept for spaces that are not in the current page of the list — the
+ * list is paged and searched, so an absent space usually means "not fetched",
+ * not "deleted".
+ */
+export function orderSpaces(spaces, pinned) {
+	const rank = new Map((pinned || []).map((name, index) => [name, index]));
+	return [...(spaces || [])].sort((a, b) => {
+		const aRank = rank.has(a.name)
+			? rank.get(a.name)
+			: Number.POSITIVE_INFINITY;
+		const bRank = rank.has(b.name)
+			? rank.get(b.name)
+			: Number.POSITIVE_INFINITY;
+		if (aRank === bRank) return 0;
+		return aRank - bRank;
+	});
+}
+
+export function usePinnedSpaces() {
+	const pinnedSpaces = useStorage(STORAGE_KEY, []);
+
+	function isPinned(name) {
+		return pinnedSpaces.value.includes(name);
+	}
+
+	/** Returns the new pinned state, so callers can word their own toast. */
+	function togglePin(name) {
+		if (isPinned(name)) {
+			pinnedSpaces.value = pinnedSpaces.value.filter((it) => it !== name);
+			return false;
+		}
+		pinnedSpaces.value = [...pinnedSpaces.value, name];
+		return true;
+	}
+
+	return { pinnedSpaces, isPinned, togglePin };
+}
diff --git a/frontend/src/composables/usePinnedSpaces.test.js b/frontend/src/composables/usePinnedSpaces.test.js
new file mode 100644
index 000000000..568578df4
--- /dev/null
+++ b/frontend/src/composables/usePinnedSpaces.test.js
@@ -0,0 +1,64 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { orderSpaces } from './usePinnedSpaces.js';
+
+// The list resource already returns spaces in switcher/creation order; pinning
+// only ever reshuffles that.
+const LIST = [
+	{ name: 'alpha' },
+	{ name: 'beta' },
+	{ name: 'gamma' },
+	{ name: 'delta' },
+];
+
+const names = (spaces) => spaces.map((s) => s.name);
+
+test('no pins leaves the list order untouched', () => {
+	assert.deepEqual(names(orderSpaces(LIST, [])), [
+		'alpha',
+		'beta',
+		'gamma',
+		'delta',
+	]);
+});
+
+test('pinned spaces float to the top in pin order, not list order', () => {
+	assert.deepEqual(names(orderSpaces(LIST, ['gamma', 'beta'])), [
+		'gamma',
+		'beta',
+		'alpha',
+		'delta',
+	]);
+});
+
+test('unpinned spaces keep their relative order behind the pins', () => {
+	assert.deepEqual(names(orderSpaces(LIST, ['delta'])), [
+		'delta',
+		'alpha',
+		'beta',
+		'gamma',
+	]);
+});
+
+test('unpinning restores the list order', () => {
+	const pinned = ['gamma'];
+	const afterUnpin = pinned.filter((it) => it !== 'gamma');
+	assert.deepEqual(names(orderSpaces(LIST, afterUnpin)), names(LIST));
+});
+
+test('a pin for a space outside the current page is ignored, not dropped', () => {
+	// The list is paged and searchable, so a pinned space is regularly absent.
+	assert.deepEqual(names(orderSpaces(LIST, ['epsilon', 'beta'])), [
+		'beta',
+		'alpha',
+		'gamma',
+		'delta',
+	]);
+});
+
+test('the input list is not mutated', () => {
+	const input = [...LIST];
+	orderSpaces(input, ['delta']);
+	assert.deepEqual(names(input), names(LIST));
+});
diff --git a/frontend/src/composables/useSidebarResize.js b/frontend/src/composables/useSidebarResize.js
deleted file mode 100644
index 59759fd4d..000000000
--- a/frontend/src/composables/useSidebarResize.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { ref } from 'vue';
-
-const DEFAULT_SIDEBAR_WIDTH = 280;
-const MIN_SIDEBAR_WIDTH = 200;
-const MAX_SIDEBAR_WIDTH = 600;
-const SNAP_THRESHOLD = 10;
-
-export function useSidebarResize(sidebarRef) {
-	const storedWidth = localStorage.getItem('wiki-sidebar-width');
-	const sidebarWidth = ref(
-		storedWidth ? Number.parseInt(storedWidth) : DEFAULT_SIDEBAR_WIDTH,
-	);
-	const sidebarResizing = ref(false);
-
-	function startResize(e) {
-		e.preventDefault();
-		document.addEventListener('mousemove', resize);
-		document.addEventListener(
-			'mouseup',
-			() => {
-				document.body.classList.remove('select-none');
-				document.body.classList.remove('cursor-col-resize');
-				localStorage.setItem(
-					'wiki-sidebar-width',
-					sidebarWidth.value.toString(),
-				);
-				sidebarResizing.value = false;
-				document.removeEventListener('mousemove', resize);
-			},
-			{ once: true },
-		);
-	}
-
-	function resize(e) {
-		sidebarResizing.value = true;
-		document.body.classList.add('select-none');
-		document.body.classList.add('cursor-col-resize');
-
-		// Calculate width relative to sidebar's left position
-		const sidebarLeft = sidebarRef.value?.getBoundingClientRect().left || 0;
-		let newWidth = e.clientX - sidebarLeft;
-
-		// Snap to default width when within threshold
-		const snapRange = [
-			DEFAULT_SIDEBAR_WIDTH - SNAP_THRESHOLD,
-			DEFAULT_SIDEBAR_WIDTH + SNAP_THRESHOLD,
-		];
-		if (newWidth > snapRange[0] && newWidth < snapRange[1]) {
-			newWidth = DEFAULT_SIDEBAR_WIDTH;
-		}
-
-		// Clamp width to min/max bounds
-		newWidth = Math.max(
-			MIN_SIDEBAR_WIDTH,
-			Math.min(MAX_SIDEBAR_WIDTH, newWidth),
-		);
-
-		sidebarWidth.value = newWidth;
-	}
-
-	return {
-		sidebarWidth,
-		sidebarResizing,
-		startResize,
-		resize,
-	};
-}
diff --git a/frontend/src/composables/useSpaceIdentitySaver.js b/frontend/src/composables/useSpaceIdentitySaver.js
new file mode 100644
index 000000000..716a702e5
--- /dev/null
+++ b/frontend/src/composables/useSpaceIdentitySaver.js
@@ -0,0 +1,30 @@
+import { toast } from 'frappe-ui';
+
+/**
+ * Write what `SpaceIdentityPicker` emits to a Wiki Space document.
+ *
+ * The picker never saves — it says what was chosen and the caller decides. Both
+ * places that save immediately (the settings panel and the space header) need
+ * the same two things, so they share this rather than each keeping a copy.
+ *
+ * Writes are chained rather than fired in parallel: each patch names all five
+ * identity fields, so two in flight at once can commit out of order and the
+ * slower one undoes the newer choice. A rejected save must not break the chain
+ * for the next one.
+ *
+ * `getResource` is a function, not the resource, because a store's document
+ * resource is replaced when the route moves to another space.
+ */
+export function useSpaceIdentitySaver(getResource) {
+	let saving = Promise.resolve();
+
+	return function saveIdentity(patch) {
+		saving = saving
+			.then(() => getResource()?.setValue.submit(patch))
+			.catch((error) => {
+				toast.error(
+					error.messages?.[0] || __('Failed to update the space logo'),
+				);
+			});
+	};
+}
diff --git a/frontend/src/composables/useSpaceLibrary.js b/frontend/src/composables/useSpaceLibrary.js
new file mode 100644
index 000000000..f6e02e2d5
--- /dev/null
+++ b/frontend/src/composables/useSpaceLibrary.js
@@ -0,0 +1,119 @@
+import { createResource, useList } from 'frappe-ui';
+import { computed, ref, unref, watch } from 'vue';
+
+import { orderSpaces, usePinnedSpaces } from './usePinnedSpaces';
+
+// The Overview page is the full directory, so it pages in useful chunks. The
+// sidebar asks for far fewer (see SIDEBAR_LIMIT) and sends you here for the
+// rest.
+const PAGE_SIZE = 50;
+
+/**
+ * The library list, as both the sidebar and the Overview page need it: the same
+ * query, the same search, the same pinned-first order. Each caller gets its own
+ * instance — the two surfaces page and search independently.
+ *
+ * `publishedOnly` drops unpublished spaces from the query. The sidebar sets it
+ * for everyone but a Wiki Manager, whose own unpublished drafts have to stay in
+ * the column they work in.
+ */
+export function useSpaceLibrary({ limit = PAGE_SIZE, publishedOnly } = {}) {
+	const { pinnedSpaces, isPinned, togglePin } = usePinnedSpaces();
+
+	const searchQuery = ref('');
+	const searchTerm = ref('');
+	let searchDebounce = null;
+	watch(searchQuery, (value) => {
+		clearTimeout(searchDebounce);
+		searchDebounce = setTimeout(() => {
+			searchTerm.value = value.trim();
+		}, 250);
+	});
+
+	// switcher_order is the space's declared position, but it defaults to 0 for
+	// every space, so the newest space would otherwise land in an arbitrary spot
+	// in the list. Creation order breaks the tie the way the old list page did.
+	const spaces = useList({
+		doctype: 'Wiki Space',
+		fields: [
+			'name',
+			'space_name',
+			'route',
+			'app_switcher_logo',
+			'space_icon',
+			'space_color',
+			'avatar',
+			'is_published',
+			'git_synced',
+			'switcher_order',
+		],
+		filters: () => ({
+			...(searchTerm.value
+				? { space_name: ['like', `%${searchTerm.value}%`] }
+				: {}),
+			...(unref(publishedOnly) ? { is_published: 1 } : {}),
+		}),
+		orderBy: 'switcher_order asc, creation desc',
+		limit,
+	});
+
+	// A new search has to start from the top, but useList exposes `start` readonly
+	// and no reset — and a fetch from a non-zero start *appends* to the rows the
+	// last search left behind. Walking `previous()` back to 0 is the reset; the
+	// writes are synchronous, so the URL settles once and refetches once.
+	watch(searchTerm, () => {
+		while (spaces.start > 0) spaces.previous();
+	});
+
+	// `isWikiManager` lands after the session user resource resolves, usually
+	// *after* the first fetch. The reactive `filters` refetches on its own; this
+	// only rewinds the paging, same as a new search.
+	watch(
+		() => unref(publishedOnly),
+		() => {
+			while (spaces.start > 0) spaces.previous();
+		},
+	);
+
+	const orderedSpaces = computed(() =>
+		orderSpaces(spaces.data || [], pinnedSpaces.value),
+	);
+
+	// The filter is only worth its row when the list is long enough to need it —
+	// on a wiki with a handful of spaces it is just a box between you and them.
+	const showSearch = computed(
+		() => Boolean(searchTerm.value) || (spaces.data || []).length >= 10,
+	);
+
+	const isEmptyWiki = computed(
+		() => !spaces.loading && !searchTerm.value && !(spaces.data || []).length,
+	);
+
+	// Restricted means "readable only by specific roles" — the backend works that
+	// out from the space's role rows (no rows is open to all, a Guest row is
+	// public), so this is one call per page of spaces, not a child table per row.
+	const restrictedResource = createResource({
+		url: 'wiki.api.wiki_space.get_restricted_spaces',
+	});
+	const restrictedSpaces = computed(
+		() => new Set(restrictedResource.data || []),
+	);
+	watch(
+		() => (spaces.data || []).map((space) => space.name).join(','),
+		(names) => {
+			if (names) restrictedResource.submit({ spaces: names.split(',') });
+		},
+		{ immediate: true },
+	);
+
+	return {
+		spaces,
+		searchQuery,
+		showSearch,
+		orderedSpaces,
+		isEmptyWiki,
+		restrictedSpaces,
+		isPinned,
+		togglePin,
+	};
+}
diff --git a/frontend/src/composables/useSpaceSettings.js b/frontend/src/composables/useSpaceSettings.js
new file mode 100644
index 000000000..8994e250d
--- /dev/null
+++ b/frontend/src/composables/useSpaceSettings.js
@@ -0,0 +1,18 @@
+import { ref } from 'vue';
+
+// Global open-state for the per-space settings dialog. The dialog is mounted by
+// SpaceDetails, but it is opened from the sidebar — a sibling, not a child — so
+// the flag lives outside both. Mirrors useWikiSettings.
+const showSpaceSettings = ref(false);
+
+export function useSpaceSettings() {
+	function open() {
+		showSpaceSettings.value = true;
+	}
+
+	function close() {
+		showSpaceSettings.value = false;
+	}
+
+	return { showSpaceSettings, open, close };
+}
diff --git a/frontend/src/composables/useSpaceTabs.js b/frontend/src/composables/useSpaceTabs.js
deleted file mode 100644
index 2f82c39af..000000000
--- a/frontend/src/composables/useSpaceTabs.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { computed, ref, watch } from 'vue';
-
-import {
-	buildTabList,
-	findOwningTabKey,
-	subtreeForTab,
-} from '../lib/spaceTabs.js';
-
-/**
- * Horizontal tab state for a space.
- *
- * Lives above both the tab bar (rendered in the main column header) and the
- * sidebar tree it filters, so the two can't disagree about which tab is active.
- *
- * Tabs are derived from the tree the sidebar is already rendering rather than
- * from get_space_tabs: in the editor that's the draft/change-request tree, so a
- * tab created in an unmerged draft shows up immediately.
- *
- * `enabled` is the space's enable_tabs flag. Off, this collapses to no tabs and
- * an unfiltered tree — the same shape a space with no tab groups produces.
- */
-export function useSpaceTabs(
-	treeData,
-	selectedPageId,
-	selectedDraftKey,
-	homeMeta,
-	enabled,
-) {
-	const tabsEnabled = computed(() => enabled?.value !== false);
-	const topLevelNodes = computed(() => treeData.value?.children || []);
-	const tabs = computed(() =>
-		tabsEnabled.value
-			? buildTabList(
-					topLevelNodes.value,
-					homeMeta?.value?.title || __('Home'),
-					homeMeta?.value?.icon,
-			  )
-			: [],
-	);
-
-	// The tab owning the currently open page: walk the page's ancestors up to
-	// the tab-flagged group.
-	const selectedTabKey = computed(() => {
-		if (!tabs.value.length) return null;
-		if (!selectedPageId.value && !selectedDraftKey.value) return null;
-		return findOwningTabKey(
-			topLevelNodes.value,
-			(node) =>
-				(selectedDraftKey.value && node.doc_key === selectedDraftKey.value) ||
-				(selectedPageId.value && node.document_name === selectedPageId.value),
-		);
-	});
-
-	// A single ref rather than a computed, so the most recent action wins:
-	// clicking a tab browses it even while a page from another tab is open, and
-	// navigating to a page pulls the bar back to that page's tab.
-	const activeTabKey = ref(null);
-
-	watch(
-		[tabs, selectedTabKey],
-		([tabList, owningKey]) => {
-			if (!tabList.length) {
-				activeTabKey.value = null;
-				return;
-			}
-			const stillValid = tabList.some((tab) => tab.key === activeTabKey.value);
-			if (owningKey) activeTabKey.value = owningKey;
-			else if (!stillValid) activeTabKey.value = tabList[0].key;
-		},
-		{ immediate: true, deep: true },
-	);
-
-	// The active tab becomes the tree's root, so top-level drops reparent into
-	// the tab rather than the space root.
-	const visibleTreeData = computed(() => {
-		// Null while the tree loads, never an empty tree: the panel reads null as
-		// "still loading" and draws its skeleton, where no children reads as "this
-		// space has no pages" and offers to create the first one.
-		if (!treeData.value) return null;
-		if (!tabs.value.length) return treeData.value;
-
-		const { children, rootNode } = subtreeForTab(
-			topLevelNodes.value,
-			activeTabKey.value,
-			treeData.value.root_group || '',
-		);
-		return { ...treeData.value, children, root_group: rootNode };
-	});
-
-	function selectTab(key) {
-		activeTabKey.value = key;
-	}
-
-	return { tabs, activeTabKey, selectTab, visibleTreeData };
-}
diff --git a/frontend/src/composables/useSyncState.js b/frontend/src/composables/useSyncState.js
new file mode 100644
index 000000000..e833ca76d
--- /dev/null
+++ b/frontend/src/composables/useSyncState.js
@@ -0,0 +1,54 @@
+import { computed } from 'vue';
+
+import { useDraftWorkspaceStore } from '../stores/draftWorkspace';
+
+/**
+ * The draft workspace's sync state, as one line of text plus a theme.
+ *
+ * Lifted out of SpaceModeStrip so the same state can be rendered from more
+ * than one place in the sidebar while we settle where it belongs.
+ *
+ * "Unsaved changes" is a distinct state from "Saving…" — the latter implies an
+ * in-flight RPC, while the former covers the autosave debounce window where no
+ * save has even started. Conflating them reads as dishonest UI per
+ * specs/local_first_editor_migration_step_1.md.
+ *
+ * A settled draft says nothing at all: "All changes saved" is the state the
+ * user already assumes, and a permanent pill under the change request is one
+ * more thing to read every time they look at the sidebar.
+ */
+export function useSyncState() {
+	const draftStore = useDraftWorkspaceStore();
+
+	const failed = computed(
+		() => draftStore.hasFailedMutations || draftStore.sync.status === 'failed',
+	);
+	const saving = computed(
+		() => draftStore.hasPendingMutations || draftStore.sync.status === 'saving',
+	);
+
+	const label = computed(() => {
+		if (failed.value) return __('Sync failed');
+		if (saving.value) return __('Saving…');
+		if (draftStore.hasUnsavedEditorContent) return __('Unsaved changes');
+		return '';
+	});
+
+	const theme = computed(() => {
+		if (failed.value) return 'red';
+		if (saving.value) return 'amber';
+		return 'gray';
+	});
+
+	// The store's own words for what went wrong, shown rather than parked in a
+	// `title` attribute nobody hovers.
+	const description = computed(() => {
+		if (draftStore.sync.error) return draftStore.sync.error;
+		const failedMutation = draftStore.pending.find(
+			(m) => m.status === 'failed',
+		);
+		return failedMutation?.error || '';
+	});
+
+	return { label, theme, description };
+}
diff --git a/frontend/src/composables/useTheme.js b/frontend/src/composables/useTheme.js
index 545d91c54..1f4a90b90 100644
--- a/frontend/src/composables/useTheme.js
+++ b/frontend/src/composables/useTheme.js
@@ -1,38 +1,61 @@
-import { useStorage } from '@vueuse/core';
-import { computed } from 'vue';
-
-// Module-level so desktop Sidebar and mobile top nav share one theme value.
-const userTheme = useStorage('wiki-theme', 'dark');
-
-// Suppress transitions for the swap itself: without this, every element with a
-// colour transition animates independently and the page flashes on its way to
-// the new theme. Two rAFs so the class survives the style + paint of the swap.
-function applyTheme(theme) {
-	const root = document.documentElement;
-	root.classList.add('no-transition');
-	root.setAttribute('data-theme', theme);
-	requestAnimationFrame(() => {
-		requestAnimationFrame(() => {
-			root.classList.remove('no-transition');
-		});
+import { resolvedColorScheme, useColorScheme } from 'frappe-ui';
+import { computed, ref } from 'vue';
+
+// Light/dark now comes from frappe-ui's useColorScheme: it owns the
+// `data-theme` attribute, the `theme` localStorage key, following the OS while
+// the preference is `system`, and muting transitions across a swap so the page
+// doesn't flash. That last part used to live here as a hand-rolled two-rAF
+// dance plus a `.no-transition` rule in index.css; frappe-ui ships both, and its
+// version also cancels a pending unmute so back-to-back swaps can't uncover a
+// repaint.
+
+// Carry a preference saved under the old key over to frappe-ui's, once. Both
+// surfaces used `wiki-theme` before; without this, everyone who had ever picked
+// a theme would silently land back on `system` after the upgrade. Runs before
+// the first useColorScheme() call so the restore below sees the migrated value.
+if (typeof localStorage !== 'undefined') {
+	const legacy = localStorage.getItem('wiki-theme');
+	if (legacy && !localStorage.getItem('theme')) {
+		localStorage.setItem('theme', legacy);
+	}
+}
+
+// The painted scheme, which is what a consumer picking a light/dark asset
+// actually needs. It is not derivable from the preference alone: `system`
+// resolves against the OS, and an OS flip repaints without changing the
+// preference, so there is nothing reactive to watch. Track the attribute
+// frappe-ui writes instead. Module-level so every caller shares one observer.
+const resolvedTheme = ref(resolvedColorScheme());
+
+if (typeof document !== 'undefined') {
+	new MutationObserver(() => {
+		resolvedTheme.value = resolvedColorScheme();
+	}).observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ['data-theme'],
 	});
 }
 
 export function useTheme() {
+	const { colorScheme, setColorScheme } = useColorScheme();
+
 	const themeIcon = computed(() =>
-		userTheme.value === 'dark' ? 'lucide-sun' : 'lucide-moon',
+		resolvedTheme.value === 'dark' ? 'lucide-sun' : 'lucide-moon',
 	);
 
+	// Not frappe-ui's toggleColorScheme: that one branches on the preference, so
+	// the first click while the preference is `system` picks `dark` — which is
+	// what a system-dark page is already painted in, and the click looks dead.
+	// Flipping the painted scheme always changes something.
 	function toggleTheme() {
-		const next = userTheme.value === 'dark' ? 'light' : 'dark';
-		applyTheme(next);
-		userTheme.value = next;
-	}
-
-	// Reflect the stored theme onto <html> once the mounting shell appears.
-	function initTheme() {
-		applyTheme(userTheme.value);
+		setColorScheme(resolvedTheme.value === 'dark' ? 'light' : 'dark');
 	}
 
-	return { userTheme, themeIcon, toggleTheme, initTheme };
+	return {
+		colorScheme,
+		resolvedTheme,
+		themeIcon,
+		setTheme: setColorScheme,
+		toggleTheme,
+	};
 }
diff --git a/frontend/src/composables/useTreeDialogs.js b/frontend/src/composables/useTreeDialogs.js
index 3dd0580eb..95aa3f959 100644
--- a/frontend/src/composables/useTreeDialogs.js
+++ b/frontend/src/composables/useTreeDialogs.js
@@ -4,7 +4,6 @@ import { useDebounceFn } from '@vueuse/core';
 import { createResource, toast } from 'frappe-ui';
 import { ref, unref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { DEFAULT_TAB_ICON } from '../lib/tabIcons.js';
 
 const CHECK_ROUTE_AVAILABLE =
 	'wiki.frappe_wiki.doctype.wiki_change_request.wiki_change_request.check_route_available';
@@ -22,22 +21,11 @@ export function useTreeDialogs(
 	const createTitle = ref('');
 	const createParent = ref(null);
 	const createIsGroup = ref(false);
-	const createIsTab = ref(false);
-	const createTabIcon = ref('');
 	const createRoute = ref('');
 	const createRoutePrefix = ref('');
 	const createRouteError = ref('');
 	const routeManuallyEdited = ref(false);
 
-	const showTabSettingsDialog = ref(false);
-	const tabSettingsNode = ref(null);
-	const tabSettingsIsTab = ref(false);
-	const tabSettingsIcon = ref('');
-	const isUpdatingTab = ref(false);
-
-	const showConvertTabDialog = ref(false);
-	const convertTabNode = ref(null);
-
 	const showDeleteDialog = ref(false);
 	const deleteNode = ref(null);
 	const deleteChildCount = ref(0);
@@ -124,13 +112,10 @@ export function useTreeDialogs(
 		checkRouteAvailability();
 	}
 
-	function openCreateDialog(parentKey, isGroup, isTab = false) {
+	function openCreateDialog(parentKey, isGroup) {
 		createParent.value = parentKey;
-		// A tab is always a group; the backend rejects anything else.
-		createIsGroup.value = isGroup || isTab;
-		createIsTab.value = isTab;
+		createIsGroup.value = isGroup;
 		createTitle.value = '';
-		createTabIcon.value = '';
 		createRoutePrefix.value = routePrefixFor(parentKey);
 		createRoute.value = '';
 		createRouteError.value = '';
@@ -140,63 +125,6 @@ export function useTreeDialogs(
 		showCreateDialog.value = true;
 	}
 
-	function openTabSettingsDialog(node) {
-		tabSettingsNode.value = node;
-		tabSettingsIsTab.value = !!node?.is_tab;
-		tabSettingsIcon.value = node?.tab_icon || '';
-		showTabSettingsDialog.value = true;
-	}
-
-	function openConvertTabDialog(node) {
-		convertTabNode.value = node;
-		showConvertTabDialog.value = true;
-	}
-
-	// Convert straight to a tab with a sensible default icon — the user tweaks
-	// the icon inline afterwards rather than being prompted mid-flow.
-	async function confirmConvertTab(close) {
-		const docKey = convertTabNode.value?.doc_key;
-		if (!docKey) {
-			close();
-			return;
-		}
-		close();
-		isUpdatingTab.value = true;
-		try {
-			await draftStore.updateNode(docKey, {
-				is_tab: 1,
-				tab_icon: DEFAULT_TAB_ICON,
-			});
-		} catch (error) {
-			console.error('Error converting to tab:', error);
-			toast.error(error.messages?.[0] || __('Error converting to tab'));
-		} finally {
-			isUpdatingTab.value = false;
-		}
-	}
-
-	// Promote/demote an existing top-level group. Clearing the flag leaves
-	// tab_icon alone so a demote/promote round trip keeps the icon.
-	async function saveTabSettings(close) {
-		const docKey = tabSettingsNode.value?.doc_key;
-		if (!docKey) {
-			close();
-			return;
-		}
-		const fields = { is_tab: tabSettingsIsTab.value ? 1 : 0 };
-		if (tabSettingsIsTab.value) fields.tab_icon = tabSettingsIcon.value || null;
-		close();
-		isUpdatingTab.value = true;
-		try {
-			await draftStore.updateNode(docKey, fields);
-		} catch (error) {
-			console.error('Error updating tab:', error);
-			toast.error(error.messages?.[0] || __('Error updating tab'));
-		} finally {
-			isUpdatingTab.value = false;
-		}
-	}
-
 	function countDescendants(node) {
 		if (!node?.children?.length) return 0;
 		return node.children.reduce(
@@ -227,8 +155,6 @@ export function useTreeDialogs(
 
 		const parentKey = createParent.value;
 		const isGroup = createIsGroup.value;
-		const isTab = createIsTab.value;
-		const tabIcon = createTabIcon.value || null;
 		const route = createRoute.value.trim() || derivedRoute();
 
 		if (parentKey) expandedNodes.value[parentKey] = true;
@@ -240,8 +166,6 @@ export function useTreeDialogs(
 				parentKey,
 				title,
 				isGroup,
-				isTab,
-				tabIcon,
 				route,
 			});
 			// Open the new page for editing immediately. The DraftContributionPanel
@@ -391,22 +315,9 @@ export function useTreeDialogs(
 		showCreateDialog,
 		createTitle,
 		createIsGroup,
-		createIsTab,
-		createTabIcon,
 		createRoute,
 		createRouteError,
 		handleCreateRouteInput,
-		showTabSettingsDialog,
-		tabSettingsNode,
-		tabSettingsIsTab,
-		tabSettingsIcon,
-		isUpdatingTab,
-		openTabSettingsDialog,
-		saveTabSettings,
-		showConvertTabDialog,
-		convertTabNode,
-		openConvertTabDialog,
-		confirmConvertTab,
 		showDeleteDialog,
 		deleteNode,
 		deleteChildCount,
diff --git a/frontend/src/composables/useTreeSearch.js b/frontend/src/composables/useTreeSearch.js
index 0a0901bc1..77dd26da6 100644
--- a/frontend/src/composables/useTreeSearch.js
+++ b/frontend/src/composables/useTreeSearch.js
@@ -2,8 +2,11 @@ import fuzzysort from 'fuzzysort';
 import { computed, ref } from 'vue';
 
 // Client-side fuzzy filter for the editor tree. The whole tree is already in
-// memory, so we match titles/routes here and prune the tree in place rather
-// than hitting the backend.
+// memory, so we match titles/routes here rather than hitting the backend.
+//
+// A filtered *hierarchy* hides matches behind collapsed parents and forces the
+// tree to fake its own expand state, so searching swaps the tree for a flat
+// result list instead: every hit is one row, ranked by score.
 export function useTreeSearch(treeData) {
 	const query = ref('');
 
@@ -11,63 +14,60 @@ export function useTreeSearch(treeData) {
 		filterTree(treeData.value?.children || [], query.value),
 	);
 
-	const isSearching = computed(() => result.value !== null);
-
-	const treeForRender = computed(() => {
-		if (!result.value) return treeData.value;
-		return { ...treeData.value, children: result.value.children };
-	});
-
 	return {
 		query,
-		isSearching,
-		treeForRender,
-		hasResults: computed(() => !result.value || result.value.keep.size > 0),
-		expandedOverride: computed(() => result.value?.expand || null),
+		isSearching: computed(() => result.value !== null),
+		matches: computed(() => result.value?.matches || []),
+		hasResults: computed(
+			() => !result.value || result.value.matches.length > 0,
+		),
 		scoreMap: computed(() => result.value?.score || null),
 	};
 }
 
 // Drop weak matches (fuzzysort scores 0..1, 1 = perfect). We threshold each key
 // separately: titles get a lenient cut so a near-prefix like "stat" still finds
-// "Getting Started", while routes get a strict cut because they're long — a
-// short query like "cli" scatter-matches "c…l…i" across ".../installation",
-// which we want to ignore. Strong slug matches (e.g. "auth-tokens") still clear
-// the route bar.
+// "Getting Started", while the slug gets a strict cut because a short query
+// scatter-matches letters across a long word. Strong slug matches (e.g.
+// "auth-tokens") clear it easily.
 const TITLE_THRESHOLD = 0.3;
-const ROUTE_THRESHOLD = 0.5;
+const SLUG_THRESHOLD = 0.5;
 
 // Pure core (no Vue) so it's unit-testable. Returns null when the query is
-// blank (meaning "not searching, render the full tree"), otherwise the pruned
-// children plus the keep/expand/score sets the renderer needs.
+// blank (meaning "not searching, render the full tree"), otherwise the flat
+// matches in rank order plus the score map the renderer highlights from.
 export function filterTree(children, query) {
 	const q = (query || '').trim();
 	if (!q) return null;
 
-	// Match title OR route; fuzzysort ranks each row by its best key.
+	// Match on the title or the page's own slug — never on the rest of the
+	// route. An ancestor's segment is in every descendant's route, so matching
+	// the whole path made a search for a group name return the group and its
+	// entire subtree, which is the tree the flat list exists to replace.
+	//
+	// The full route stays a key even though it never decides a match: the
+	// renderer highlights the query inside it, and a slug hit is a substring of
+	// the route, so the highlight lands in the right place.
 	const hits = fuzzysort
 		.go(q, flatten(children), {
-			keys: ['node.title', 'node.route'],
+			keys: ['node.title', 'node.route', 'slug'],
 		})
 		.filter(
 			(hit) =>
-				hit[0].score >= TITLE_THRESHOLD || hit[1].score >= ROUTE_THRESHOLD,
+				hit[0].score >= TITLE_THRESHOLD || hit[2].score >= SLUG_THRESHOLD,
 		);
 
-	const keep = new Set(); // doc_keys that survive the prune
-	const expand = new Set(); // group doc_keys to force-open
 	const score = new Map(); // doc_key -> result ([0]=title, [1]=route)
+	const matches = []; // rank-ordered rows
 	for (const hit of hits) {
-		const { node, ancestorKeys } = hit.obj;
-		keep.add(node.doc_key);
+		const { node } = hit.obj;
 		score.set(node.doc_key, hit);
-		for (const key of ancestorKeys) {
-			keep.add(key);
-			expand.add(key);
-		}
+		// One row per hit: a match's own children are not results, and keeping
+		// them would rebuild the hierarchy this list exists to flatten.
+		matches.push({ ...node, children: [] });
 	}
 
-	return { keep, expand, score, children: prune(children, keep) };
+	return { matches, score };
 }
 
 // Split a fuzzysort result into { text, matched } segments for rendering.
@@ -98,25 +98,20 @@ export function highlightSegments(result) {
 	return segments;
 }
 
-// Flatten to every node paired with its ancestor keys, so a match can pull its
-// parent groups back into the pruned tree.
-function flatten(children, ancestorKeys = [], out = []) {
+// Flatten to every node in the tree, at every depth, so a nested page can be
+// its own result row.
+/** The page's own route segment: `guides/auth-tokens` -> `auth-tokens`. */
+function slugOf(route) {
+	const value = route || '';
+	return value.slice(value.lastIndexOf('/') + 1);
+}
+
+function flatten(children, out = []) {
 	for (const node of children) {
-		out.push({ node, ancestorKeys });
+		out.push({ node, slug: slugOf(node.route) });
 		if (node.children?.length) {
-			flatten(node.children, [...ancestorKeys, node.doc_key], out);
+			flatten(node.children, out);
 		}
 	}
 	return out;
 }
-
-// Structural copy with non-matching branches removed, original order kept —
-// position in the tree is the point, so we never reorder by score.
-function prune(children, keep) {
-	const result = [];
-	for (const node of children) {
-		if (!keep.has(node.doc_key)) continue;
-		result.push({ ...node, children: prune(node.children || [], keep) });
-	}
-	return result;
-}
diff --git a/frontend/src/composables/useTreeSearch.test.js b/frontend/src/composables/useTreeSearch.test.js
index dd35c63a5..a671416a9 100644
--- a/frontend/src/composables/useTreeSearch.test.js
+++ b/frontend/src/composables/useTreeSearch.test.js
@@ -4,6 +4,8 @@ import test from 'node:test';
 import fuzzysort from 'fuzzysort';
 import { filterTree, highlightSegments } from './useTreeSearch.js';
 
+const has = (matches, key) => matches.some((node) => node.doc_key === key);
+
 // A small two-level tree: a group "Guides" with two pages, and a top-level page.
 function sampleTree() {
 	return [
@@ -36,27 +38,36 @@ test('blank query returns null (not searching)', () => {
 	assert.equal(filterTree(sampleTree(), '   '), null);
 });
 
-test('matching a page keeps it and its ancestor group', () => {
-	const { keep, expand, children } = filterTree(sampleTree(), 'getting');
+// The result list is flat: a nested match is its own row, and the ancestors
+// that used to be dragged along with it are not results.
+test('a nested match is one flat row, without its ancestor group', () => {
+	const { matches } = filterTree(sampleTree(), 'getting');
+
+	assert.deepEqual(
+		matches.map((node) => node.doc_key),
+		['p1'],
+	);
+});
+
+test('a matched group carries no children into the result list', () => {
+	const { matches } = filterTree(sampleTree(), 'Guides');
+
+	const group = matches.find((node) => node.doc_key === 'g1');
+	assert.ok(group, 'the group is a result in its own right');
+	assert.deepEqual(group.children, [], 'its pages are not results');
+});
 
-	assert.ok(keep.has('p1'), 'matched page kept');
-	assert.ok(keep.has('g1'), 'ancestor group kept');
-	assert.ok(expand.has('g1'), 'ancestor group force-expanded');
-	assert.ok(!keep.has('p2'), 'non-matching sibling pruned');
-	assert.ok(!keep.has('p3'), 'unrelated top-level page pruned');
+test('results are ranked, best match first', () => {
+	const { matches } = filterTree(sampleTree(), 'guides');
 
-	// Pruned tree preserves structure: Guides group with only the match inside.
-	assert.equal(children.length, 1);
-	assert.equal(children[0].doc_key, 'g1');
-	assert.equal(children[0].children.length, 1);
-	assert.equal(children[0].children[0].doc_key, 'p1');
+	assert.equal(matches[0].doc_key, 'g1', 'the exact title beats route hits');
 });
 
 test('matches the route even when the title does not', () => {
 	// "auth-tokens" lives only in p2's route, not its title ("Authentication").
-	const { keep, score } = filterTree(sampleTree(), 'auth-tokens');
+	const { matches, score } = filterTree(sampleTree(), 'auth-tokens');
 
-	assert.ok(keep.has('p2'), 'route-only hit surfaces the page');
+	assert.ok(has(matches, 'p2'), 'route-only hit surfaces the page');
 	const result = score.get('p2');
 	// A non-matching key highlights to an empty string; the matching one wraps
 	// the hit in <mark>.
@@ -72,8 +83,8 @@ test('matches the route even when the title does not', () => {
 });
 
 test('a strong (prefix) fuzzy query still matches', () => {
-	const { keep } = filterTree(sampleTree(), 'authen');
-	assert.ok(keep.has('p2'));
+	const { matches } = filterTree(sampleTree(), 'authen');
+	assert.ok(has(matches, 'p2'));
 });
 
 // Mirrors the reported space (Getting Started / Guides·Advanced / Reference·CLI).
@@ -125,32 +136,32 @@ function prodTree() {
 }
 
 test('"cli" surfaces the CLI pages and drops route-scatter junk', () => {
-	const { keep } = filterTree(prodTree(), 'cli');
-	assert.ok(keep.has('pCLICmd'), 'CLI Commands kept');
-	assert.ok(keep.has('gCLI'), 'CLI group kept');
+	const { matches } = filterTree(prodTree(), 'cli');
+	assert.ok(has(matches, 'pCLICmd'), 'CLI Commands kept');
+	assert.ok(has(matches, 'gCLI'), 'CLI group kept');
 	// Both matched "cli" only as a scattered subsequence of their long routes
 	// (c…l…i across ".../installation"), title score 0 — must be dropped.
-	assert.ok(!keep.has('pInstall'), 'Install It (route-scatter only) dropped');
 	assert.ok(
-		!keep.has('pTrouble'),
+		!has(matches, 'pInstall'),
+		'Install It (route-scatter only) dropped',
+	);
+	assert.ok(
+		!has(matches, 'pTrouble'),
 		'Troubleshooting (route-scatter only) dropped',
 	);
 });
 
 test('"stat" still finds "Getting Started" (lenient title threshold)', () => {
-	const { keep } = filterTree(prodTree(), 'stat');
-	assert.ok(keep.has('gGS'), 'near-prefix "stat" matches "Getting Started"');
-});
-
-test('no matches yields an empty keep set', () => {
-	const { keep, children } = filterTree(sampleTree(), 'zzzznomatch');
-	assert.equal(keep.size, 0);
-	assert.equal(children.length, 0);
+	const { matches } = filterTree(prodTree(), 'stat');
+	assert.ok(
+		has(matches, 'gGS'),
+		'near-prefix "stat" matches "Getting Started"',
+	);
 });
 
-test('matching a group title keeps the group itself', () => {
-	const { keep } = filterTree(sampleTree(), 'Guides');
-	assert.ok(keep.has('g1'));
+test('no matches yields an empty result list', () => {
+	const { matches } = filterTree(sampleTree(), 'zzzznomatch');
+	assert.equal(matches.length, 0);
 });
 
 test('highlightSegments keeps markup as literal text (no HTML injection)', () => {
@@ -179,3 +190,14 @@ test('highlightSegments returns null when the key did not match', () => {
 	assert.equal(highlightSegments(null), null);
 	assert.equal(highlightSegments({ target: '', indexes: [] }), null);
 });
+
+test("a group's name does not drag its whole subtree into the results", () => {
+	// Every descendant's route starts with the group's slug, so matching the
+	// full path returned the group and both its pages — the hierarchy the flat
+	// list exists to replace.
+	const { matches } = filterTree(sampleTree(), 'guides');
+
+	assert.ok(has(matches, 'g1'), 'the group itself matches');
+	assert.equal(has(matches, 'p1'), false, 'a page under it does not');
+	assert.equal(has(matches, 'p2'), false, 'nor its sibling');
+});
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8524726d7..18a623bbc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,12 +1,9 @@
 @import "./assets/Inter/inter.css";
 @import "frappe-ui/style.css";
-/* Editor baseline (task lists, table wrapper, TOC node, resize cursor).
-   Imported explicitly: relying on frappe-ui/editor's side-effect import
-   lets rollup assign the CSS to whichever async chunk it likes, and editor
-   pages can end up without it. */
-@import "frappe-ui/editor-style.css";
-/* List family structural styles — same explicit-import rationale as above. */
-@import "frappe-ui/list-style.css";
+/* The editor and list family stylesheets used to be imported here. Their
+   subpath exports are gone — the `frappe-ui/editor` and `frappe-ui/list`
+   barrels are marked side-effectful, so each family's CSS ships with the
+   subpath import itself. */
 @import "./wiki-rendered.css";
 
 /* Tell the browser which theme its native UI (scrollbars, form controls)
@@ -19,14 +16,9 @@ html[data-theme="light"] {
 	color-scheme: light;
 }
 
-/* Added by the theme switcher for the duration of one swap — many frappe-ui
-   components transition their colours, and letting them all animate at once
-   flashes the page. */
-.no-transition *,
-.no-transition *::before,
-.no-transition *::after {
-	transition: none !important;
-}
+/* The `.no-transition` rule that used to sit here now comes from
+   frappe-ui/style.css, and useColorScheme applies the class across a swap
+   itself. */
 
 /* Dialog open/close animations are disabled: reka-ui's Presence unmounts the
    overlay only after the leave animation's end event, and rapid open/close
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 47a35e261..4a5c791b8 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -1,5 +1,11 @@
 <template>
-	<div class="h-screen w-full bg-surface-sidebar">
+	<!-- The app is a fixed frame: the sidebar and the open page each own a
+	     scroller, and nothing scrolls the layout itself. The frame is both
+	     `relative` and `overflow-hidden`: the clip only catches an absolutely
+	     positioned stray — frappe-ui Tree's aria-live region, for one — when the
+	     frame is its containing block. Without `relative` the stray resolves
+	     against the page, grows the document, and drags the whole chrome up. -->
+	<div class="relative h-screen w-full overflow-hidden bg-surface-sidebar">
 		<template v-if="isLoading"></template>
 		<template v-else-if="hasAccess">
 			<MobileShell v-if="isMobile" class="wiki-mobile-shell">
@@ -9,7 +15,7 @@
 					<MobileNav>
 						<MobileNavItem
 							:label="__('Spaces')"
-							:to="{ name: 'SpaceList' }"
+							:to="{ name: 'Overview' }"
 							:active="isSpacesRoute"
 						>
 							<template #default="{ active }">
@@ -34,7 +40,10 @@
 			</MobileShell>
 			<DesktopShell v-else class="wiki-desktop-shell h-full">
 				<template #sidebar>
-					<Sidebar />
+					<!-- One navigation column that drills: the library at the top
+					     level, the space itself once you are inside one. -->
+					<SpaceSidebar v-if="spaceId" :key="spaceId" :space-id="spaceId" />
+					<LibrarySidebar v-else />
 				</template>
 				<slot></slot>
 			</DesktopShell>
@@ -79,9 +88,10 @@
 <script setup>
 import { useUserStore } from '@/stores/user';
 import { DesktopShell, MobileNav, MobileNavItem, MobileShell } from 'frappe-ui';
-import { computed, onMounted, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import Sidebar from '../components/Sidebar.vue';
+import LibrarySidebar from '../components/LibrarySidebar.vue';
+import SpaceSidebar from '../components/SpaceSidebar.vue';
 import WikiSettings from '../components/WikiSettings/WikiSettings.vue';
 import { useMobile } from '../composables/useMobile';
 import { useTheme } from '../composables/useTheme';
@@ -92,19 +102,20 @@ const userStore = useUserStore();
 const route = useRoute();
 const router = useRouter();
 const { showWikiSettings, initialTab, open } = useWikiSettings();
-const { initTheme } = useTheme();
+// The first useColorScheme() call restores the saved preference and starts
+// following the OS, so mounting this one always-mounted component is enough to
+// apply the theme to both the desktop and mobile shells.
+useTheme();
 
 const isLoading = computed(() => userStore.isLoading);
 const hasAccess = computed(() => userStore.canAccessWiki);
 
-// Spaces stays lit across every space route (list + space details).
-const isSpacesRoute = computed(() => route.path.startsWith('/spaces'));
+const spaceId = computed(() => route.params.spaceId || null);
 
-// Theme is applied here (the one always-mounted component) so both the
-// desktop and mobile shells get it.
-onMounted(() => {
-	initTheme();
-});
+// Spaces stays lit across every space route (overview + space details).
+const isSpacesRoute = computed(
+	() => route.name === 'Overview' || Boolean(spaceId.value),
+);
 
 // The GitHub-App manifest flow redirects back here with ?github_app_created=1.
 // Re-open the settings dialog on the GitHub tab and strip the query param. This
@@ -124,20 +135,13 @@ watch(
 </script>
 
 <style scoped>
-/* Gameplan-style shell: the content column floats as a rounded card over the
-   sidebar surface in light mode; flat with a hairline divider in dark. */
+/* The content column sits flush against the sidebar, separated by a hairline
+   rather than floated as a rounded card: the app window already rounds the
+   outer corners, so a second radius inside it just reads as noise. */
 .wiki-desktop-shell :deep([data-slot='desktop-shell-content']) {
-	margin: 0.25rem 0.25rem 0.25rem 0;
-	border-radius: var(--radius-lg);
 	background-color: var(--surface-base);
-	box-shadow: var(--shadow-sm);
-	overflow: hidden;
-}
-[data-theme='dark'] .wiki-desktop-shell :deep([data-slot='desktop-shell-content']) {
-	margin: 0;
-	border-radius: 0;
 	border-left: 1px solid var(--outline-gray-2);
-	box-shadow: none;
+	overflow: hidden;
 }
 
 /* Wiki pages are app-like (columns + their own scroll regions), so they need
diff --git a/frontend/src/lib/icon-names.test.js b/frontend/src/lib/icon-names.test.js
new file mode 100644
index 000000000..093428d62
--- /dev/null
+++ b/frontend/src/lib/icon-names.test.js
@@ -0,0 +1,119 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import test from 'node:test';
+
+/**
+ * frappe-ui 1.0.0 removed FeatherIcon and its bare-name back-compat (ADR-0008):
+ * an icon string that does not start with `lucide-` resolves to nothing. The
+ * component renders null and logs one dev warning per component+prop, so a
+ * stale name is invisible in CI and in a production build — it just draws
+ * nothing.
+ *
+ * That has now bitten twice: once across 41 call sites during the beta.45
+ * upgrade, and again on `icon: node.is_published ? 'eye-off' : 'eye'`, which a
+ * grep for `icon: '...'` did not match because the value sits in a ternary.
+ * This scans every source file for any string literal reachable from an
+ * icon-ish key or prop, in whatever syntactic form.
+ */
+
+const SRC = path.resolve(import.meta.dirname, '..');
+
+/**
+ * An `icon:` object key, or an `icon=` / `:icon-left=` template prop. The
+ * lookbehind keeps a hyphenated name ending in "icon" out — `@update-icon="…"`
+ * is an event, not an icon prop.
+ *
+ * The key pattern is case-sensitive and the prop pattern is not, on purpose: a
+ * key is always lowercase-initial (`icon`, `iconLeft`), while an uppercase one
+ * is a component tag before a bound prop — `<IconGrid :model-value="icon">`
+ * read as an `Icon…:` key and reported its own binding as a stale name.
+ */
+const ICON_KEY = /(?<![-\w])icon\w*\s*:(?!:)/;
+const ICON_PROP = /(?<![-\w])(?::)?icon(?:-left|-right|Left|Right)?\s*=/i;
+const STRING_LITERAL = /['"`]([^'"`\n]*)['"`]/g;
+
+/**
+ * The icon value's own expression, not the rest of the line — otherwise a
+ * `variant="subtle"` or `class="shrink-0"` sitting beside the icon prop reads
+ * as an icon name.
+ */
+function iconExpressions(line) {
+	const out = [];
+
+	const prop = ICON_PROP.exec(line);
+	if (prop) {
+		// Attribute form: the value is exactly the next quoted string. For a
+		// binding (`:icon="expr"`) that string is the expression, whose own
+		// literals are the candidates.
+		const rest = line.slice(prop.index + prop[0].length);
+		const quoted = /^\s*(['"])(.*?)\1/.exec(rest);
+		if (quoted) out.push(quoted[2]);
+	}
+
+	const key = ICON_KEY.exec(line);
+	if (key) {
+		// Object form: up to the first comma outside quotes, so a ternary's
+		// branches are included but the next property is not.
+		const rest = line.slice(key.index + key[0].length);
+		let quote = null;
+		let end = rest.length;
+		for (let i = 0; i < rest.length; i++) {
+			const c = rest[i];
+			if (quote) {
+				if (c === quote) quote = null;
+			} else if (c === "'" || c === '"' || c === '`') quote = c;
+			else if (c === ',') {
+				end = i;
+				break;
+			}
+		}
+		out.push(rest.slice(0, end));
+	}
+
+	return out;
+}
+
+function sourceFiles(dir) {
+	const out = [];
+	for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+		const full = path.join(dir, entry.name);
+		if (entry.isDirectory()) out.push(...sourceFiles(full));
+		else if (
+			/\.(vue|js|ts)$/.test(entry.name) &&
+			!entry.name.endsWith('.test.js')
+		)
+			out.push(full);
+	}
+	return out;
+}
+
+test('every icon string is a lucide- class', () => {
+	const offenders = [];
+
+	for (const file of sourceFiles(SRC)) {
+		const lines = fs.readFileSync(file, 'utf8').split('\n');
+		for (const [i, line] of lines.entries()) {
+			for (const expression of iconExpressions(line)) {
+				for (const [, value] of expression.matchAll(STRING_LITERAL)) {
+					const v = value.trim();
+					if (!v || v.startsWith('lucide-')) continue;
+					// An icon name is a bare kebab-case token; a class list or a
+					// path has spaces or slashes.
+					if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(v)) continue;
+					offenders.push(
+						`${path.relative(SRC, file)}:${i + 1}  '${v}'  in: ${line.trim()}`,
+					);
+				}
+			}
+		}
+	}
+
+	assert.deepEqual(
+		offenders,
+		[],
+		`Icon strings must be lucide- classes; these render nothing:\n${offenders.join(
+			'\n',
+		)}`,
+	);
+});
diff --git a/frontend/src/lib/readingStats.js b/frontend/src/lib/readingStats.js
new file mode 100644
index 000000000..79f89d6ed
--- /dev/null
+++ b/frontend/src/lib/readingStats.js
@@ -0,0 +1,29 @@
+// Words and reading time for the draft that is on screen, computed here rather
+// than asked of the server: the number has to track the buffer between saves,
+// and the buffer only exists in the browser.
+
+const WORDS_PER_MINUTE = 200;
+
+/**
+ * Words in a Markdown document, counting prose only — code blocks, URLs and
+ * the markup itself are not something anyone reads.
+ */
+export function countWords(markdown) {
+	if (!markdown) return 0;
+	const prose = markdown
+		.replace(/```[\s\S]*?(```|$)/g, ' ')
+		.replace(/`[^`]*`/g, ' ')
+		.replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+		// A link reads as its label; the target is not prose.
+		.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+		.replace(/<[^>]+>/g, ' ')
+		.replace(/[#>*_~|=+-]/g, ' ');
+	return prose.split(/\s+/).filter((token) => /[\p{L}\p{N}]/u.test(token))
+		.length;
+}
+
+/** Whole minutes, and never zero: a one-line page still takes a moment. */
+export function readingMinutes(words) {
+	if (!words) return 0;
+	return Math.max(1, Math.round(words / WORDS_PER_MINUTE));
+}
diff --git a/frontend/src/lib/readingStats.test.js b/frontend/src/lib/readingStats.test.js
new file mode 100644
index 000000000..7d4fcabe9
--- /dev/null
+++ b/frontend/src/lib/readingStats.test.js
@@ -0,0 +1,42 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { countWords, readingMinutes } from './readingStats.js';
+
+test('counts the words of a plain paragraph', () => {
+	assert.equal(countWords('one two three four'), 4);
+});
+
+test('empty and missing content count as nothing', () => {
+	assert.equal(countWords(''), 0);
+	assert.equal(countWords(null), 0);
+	assert.equal(countWords('   \n\n  '), 0);
+});
+
+test('markup is not prose', () => {
+	assert.equal(countWords('## A heading'), 2);
+	assert.equal(countWords('- one\n- two'), 2);
+	assert.equal(countWords('> quoted words here'), 3);
+	assert.equal(countWords('**bold** and _italic_'), 3);
+});
+
+test('code is skipped, fenced or inline', () => {
+	assert.equal(countWords('before\n\n```js\nconst a = 1;\n```\n\nafter'), 2);
+	assert.equal(countWords('run `npm install` now'), 2);
+});
+
+test('an unterminated fence swallows the rest, not the words before it', () => {
+	assert.equal(countWords('intro words\n\n```\nnever closed'), 2);
+});
+
+test('a link reads as its label, an image as nothing', () => {
+	assert.equal(countWords('see [the guide](https://example.com/a/b)'), 3);
+	assert.equal(countWords('![a picture](/files/x.png)'), 0);
+});
+
+test('reading time rounds to whole minutes and never to zero', () => {
+	assert.equal(readingMinutes(0), 0);
+	assert.equal(readingMinutes(1), 1);
+	assert.equal(readingMinutes(200), 1);
+	assert.equal(readingMinutes(450), 2);
+});
diff --git a/frontend/src/lib/spaceAvatar.js b/frontend/src/lib/spaceAvatar.js
new file mode 100644
index 000000000..8e6393791
--- /dev/null
+++ b/frontend/src/lib/spaceAvatar.js
@@ -0,0 +1,107 @@
+// Generated abstract marks for a space, behind the Shuffle button in
+// SpaceIdentityPicker. The rest of a space's identity — icons, colours, how a
+// stored mark is resolved and drawn — lives in `lib/spaceIdentity.js`, which
+// this file must never be imported by.
+//
+// Two rules shape this file.
+//
+// Generation is local. `@dicebear/core` renders the SVG in the browser, so a
+// space never reaches api.dicebear.com — a wiki served from a Frappe site must
+// not hand a third party the list of spaces a user is looking at.
+//
+// Generation is also lazy. The style definitions weigh hundreds of kilobytes
+// and the renderer another ~120 kB; that is only ever needed while the picker
+// is open. Every entry point here is async and reaches the packages through
+// `import()`, so Rollup splits them into chunks the app loads on the first
+// shuffle and never before. Nothing in this module may be imported for its
+// side effects.
+
+// The shipped styles: abstract marks only. A space is a thing, not a person,
+// so a generated face would read as an owner rather than as the space's own
+// mark, and a column of cartoon heads in the sidebar says nothing about the
+// wiki. DiceBear's character sets are therefore deliberately not offered.
+//
+// All four are CC0 1.0 and authored by DiceBear itself, so none carries an
+// attribution duty. They are listed one by one rather than pulled wholesale
+// from `@dicebear/styles`, which ships 61 of them under licenses we have not
+// read — adding one has to stay a deliberate act.
+//
+// `disco` was dropped for weight, not for looks: it renders ~35 kB of SVG
+// against ~4 kB for these four, and a stored mark is fetched once per row by
+// the space list. Measure a candidate style's output before adding it.
+export const AVATAR_STYLES = [
+	{ id: 'glass', label: 'Glass' },
+	{ id: 'blobs', label: 'Blobs' },
+	{ id: 'waves', label: 'Waves' },
+	{ id: 'loops', label: 'Loops' },
+];
+
+// One `import()` per style, spelled out. A template literal would work in Vite
+// for a relative path but not for a bare package specifier, and listing them is
+// what lets Rollup emit one chunk per style instead of a single blob.
+const STYLE_LOADERS = {
+	blobs: () => import('@dicebear/styles/blobs.json'),
+	glass: () => import('@dicebear/styles/glass.json'),
+	loops: () => import('@dicebear/styles/loops.json'),
+	waves: () => import('@dicebear/styles/waves.json'),
+};
+
+// Keyed by style id, holding the in-flight promise rather than the resolved
+// style. Two shuffles a frame apart then share one download, and `new Style` —
+// which validates the definition against a JSON schema — runs once per style
+// for the life of the tab instead of once per roll.
+const styleCache = new Map();
+
+function loadStyle(id) {
+	const cached = styleCache.get(id);
+	if (cached) return cached;
+
+	const load = STYLE_LOADERS[id];
+	if (!load) return Promise.reject(new Error(`Unknown avatar style: ${id}`));
+
+	const pending = Promise.all([import('@dicebear/core'), load()]).then(
+		([{ Style }, definition]) => new Style(definition.default),
+	);
+	styleCache.set(id, pending);
+	return pending;
+}
+
+// Shuffle rolls this, and it is stored so the same mark comes back. Random
+// rather than derived from the space: a docname would make shuffle a no-op, and
+// the space name would change the art on every rename.
+export function randomAvatarSeed() {
+	const bytes = new Uint8Array(8);
+	crypto.getRandomValues(bytes);
+	return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join(
+		'',
+	);
+}
+
+export function randomAvatarStyle() {
+	const index = Math.floor(Math.random() * AVATAR_STYLES.length);
+	return AVATAR_STYLES[index].id;
+}
+
+// Render one mark. Returns the SVG as a `data:` URI because that is the form
+// both the database and the `<img>` want; `spaceAvatarSrc` in `spaceIdentity`
+// is the only thing allowed to hand it to the DOM.
+//
+// The background is left to the style. Overriding it would mean inventing hex
+// colours the design system has no say over — an SVG cannot read a CSS token,
+// so any colour baked in here would be the one place in the frontend that owns
+// a raw colour value.
+export async function renderSpaceAvatar(styleId, seed) {
+	const [style, { Avatar }] = await Promise.all([
+		loadStyle(styleId),
+		import('@dicebear/core'),
+	]);
+	return new Avatar(style, { seed }).toDataUri();
+}
+
+// One roll: a new style and a new seed, and the three fields that let the mark
+// be rebuilt later.
+export async function rollSpaceAvatar() {
+	const style = randomAvatarStyle();
+	const seed = randomAvatarSeed();
+	return { svg: await renderSpaceAvatar(style, seed), style, seed };
+}
diff --git a/frontend/src/lib/spaceAvatar.test.js b/frontend/src/lib/spaceAvatar.test.js
new file mode 100644
index 000000000..fbcf84494
--- /dev/null
+++ b/frontend/src/lib/spaceAvatar.test.js
@@ -0,0 +1,40 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import test from 'node:test';
+
+import { AVATAR_STYLES, randomAvatarSeed } from './spaceAvatar.js';
+
+const SOURCE = fs.readFileSync(
+	path.join(import.meta.dirname, 'spaceAvatar.js'),
+	'utf8',
+);
+
+test('every offered style has a loader, and every loader an entry', () => {
+	const offered = AVATAR_STYLES.map((style) => style.id).sort();
+	// Read off the source rather than the object: STYLE_LOADERS is private, and
+	// exporting it just to test it would invite an eager import of the styles.
+	const loaded = [
+		...SOURCE.matchAll(/import\('@dicebear\/styles\/([a-z]+)\.json'\)/g),
+	]
+		.map((match) => match[1])
+		.sort();
+
+	assert.deepEqual(loaded, offered);
+});
+
+test('the styles are only ever reached through a dynamic import', () => {
+	// A bare `import` of a style or of the renderer would put hundreds of
+	// kilobytes of style JSON in the entry chunk, which is the whole reason
+	// this module exists apart from spaceIdentity.
+	const staticImports = [...SOURCE.matchAll(/^import\s.*$/gm)].map(
+		(match) => match[0],
+	);
+	assert.deepEqual(staticImports, []);
+});
+
+test('a seed is a fresh 16-character hex string', () => {
+	const seed = randomAvatarSeed();
+	assert.match(seed, /^[0-9a-f]{16}$/);
+	assert.notEqual(seed, randomAvatarSeed());
+});
diff --git a/frontend/src/lib/spaceIdentity.js b/frontend/src/lib/spaceIdentity.js
new file mode 100644
index 000000000..0edeb74ba
--- /dev/null
+++ b/frontend/src/lib/spaceIdentity.js
@@ -0,0 +1,108 @@
+// A space's visual identity: a generated mark, a lucide icon on a tinted
+// square, or an uploaded logo. Every surface that shows a space — the library
+// sidebar, the space header, the overview rows, and the public reader through
+// its own port of these rules — resolves it the same way.
+//
+// The DiceBear half lives in `lib/spaceAvatar.js`, which loads a megabyte of
+// style definitions and so must stay out of the path that merely *draws* a
+// space. Nothing here imports it.
+
+// Exactly frappe-ui's `AvatarTheme` union. Deriving the palette from the
+// component means a space colour can only ever resolve to a tint the design
+// system already ships — no hand-written class map to drift off-palette, and
+// the same six exist as `--surface-*-2` / `--ink-*-7` in the reader's separate
+// Tailwind build.
+export const SPACE_COLORS = ['gray', 'blue', 'green', 'amber', 'red', 'violet'];
+
+// The stand-in when no icon has been picked. Unlike the colour it is not
+// derived: an icon carries meaning, and hashing one out of the space name
+// would claim a meaning nobody chose.
+export const DEFAULT_SPACE_ICON = 'lucide-book-open-text';
+
+// An SVG is a script host: `<svg><script>` and `onload=` both run, and `avatar`
+// is a field any Wiki Manager can write. So a stored mark never becomes markup
+// — it is only ever an `<img>` source, which does not execute script, and only
+// after it has proved to be an SVG data URI. Anything else resolves to '', and
+// the caller falls back to the icon.
+const AVATAR_DATA_URI = /^data:image\/svg\+xml[;,]/i;
+
+export function spaceAvatarSrc(avatar) {
+	const value = (avatar ?? '').trim();
+	return AVATAR_DATA_URI.test(value) ? value : '';
+}
+
+// Anything missing or outside the curated list would render as an empty box:
+// Tailwind only emits a `lucide-*` rule for a class it found as a literal at
+// build time, and these values arrive from the database at runtime.
+export function spaceIconClass(icon) {
+	const value = (icon ?? '').trim();
+	return value.startsWith('lucide-') ? value : DEFAULT_SPACE_ICON;
+}
+
+// Colour falls back to a hash of the space's docname, which Frappe never
+// rewrites on a title change — so a space keeps its colour across a rename. A
+// fixed neutral would be stable too, but it would leave every space that
+// predates this field looking identical, which is the thing the mark exists to
+// fix.
+export function spaceColorTheme(color, seed) {
+	const value = (color ?? '').trim();
+	if (SPACE_COLORS.includes(value)) return value;
+	return SPACE_COLORS[hash(seed ?? '') % SPACE_COLORS.length];
+}
+
+// Small deterministic string hash — same input, same colour, forever.
+function hash(seed) {
+	let value = 0;
+	for (let index = 0; index < seed.length; index++) {
+		value = (value * 31 + seed.charCodeAt(index)) | 0;
+	}
+	return Math.abs(value);
+}
+
+// The three identities in priority order. Only one is ever set by the picker —
+// choosing an upload clears the generated fields — so the order only decides
+// what a hand-edited row shows. `mode` is what a caller renders: 'avatar' and
+// 'logo' both mean "draw `image`", 'icon' means "draw `icon` on `color`".
+export function resolveSpaceIdentity(space) {
+	const doc = space ?? {};
+	const avatar = spaceAvatarSrc(doc.avatar);
+	const color = spaceColorTheme(doc.space_color, doc.name);
+
+	if (avatar) return { mode: 'avatar', image: avatar, icon: '', color };
+	if (doc.space_icon) {
+		return {
+			mode: 'icon',
+			image: '',
+			icon: spaceIconClass(doc.space_icon),
+			color,
+		};
+	}
+	if (doc.app_switcher_logo) {
+		return { mode: 'logo', image: doc.app_switcher_logo, icon: '', color };
+	}
+	// No mark at all: the label's initial on the derived tint, which is what
+	// frappe-ui's Avatar draws when it has neither an image nor a slot.
+	return { mode: 'initial', image: '', icon: '', color };
+}
+
+// The fields to write for a chosen identity. Every key is always present, and
+// empty rather than absent, because a save has to be able to *clear* one:
+// switching to an uploaded logo means writing four empty strings, and an
+// omitted key would leave the old mark in the row.
+//
+// `app_switcher_logo` is deliberately not part of this. Picking an icon must
+// not drop a File link the user uploaded — the Upload tab owns that field, and
+// it is the only direction that clears.
+export function generatedIdentityPatch({
+	icon = '',
+	color = '',
+	avatar = null,
+}) {
+	return {
+		space_icon: icon,
+		space_color: color,
+		avatar: avatar?.svg ?? '',
+		avatar_style: avatar?.style ?? '',
+		avatar_seed: avatar?.seed ?? '',
+	};
+}
diff --git a/frontend/src/lib/spaceIdentity.test.js b/frontend/src/lib/spaceIdentity.test.js
new file mode 100644
index 000000000..0733e1c67
--- /dev/null
+++ b/frontend/src/lib/spaceIdentity.test.js
@@ -0,0 +1,107 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {
+	DEFAULT_SPACE_ICON,
+	SPACE_COLORS,
+	generatedIdentityPatch,
+	resolveSpaceIdentity,
+	spaceAvatarSrc,
+	spaceColorTheme,
+	spaceIconClass,
+} from './spaceIdentity.js';
+
+const SVG = 'data:image/svg+xml;utf8,<svg/>';
+
+test('a generated mark beats an icon, which beats an uploaded logo', () => {
+	const space = {
+		name: 'SPACE-1',
+		avatar: SVG,
+		space_icon: 'lucide-rocket',
+		app_switcher_logo: '/files/logo.png',
+	};
+	assert.equal(resolveSpaceIdentity(space).mode, 'avatar');
+
+	const { avatar, ...noAvatar } = space;
+	assert.equal(resolveSpaceIdentity(noAvatar).mode, 'icon');
+
+	const { space_icon, ...logoOnly } = noAvatar;
+	assert.equal(resolveSpaceIdentity(logoOnly).mode, 'logo');
+
+	const { app_switcher_logo, ...bare } = logoOnly;
+	assert.equal(resolveSpaceIdentity(bare).mode, 'initial');
+});
+
+test('a space with nothing set still resolves', () => {
+	const identity = resolveSpaceIdentity(undefined);
+	assert.equal(identity.mode, 'initial');
+	assert.ok(SPACE_COLORS.includes(identity.color));
+});
+
+test('an unusable avatar falls through instead of drawing nothing', () => {
+	const space = { name: 'SPACE-1', avatar: '<svg onload="alert(1)"/>' };
+	assert.equal(resolveSpaceIdentity(space).mode, 'initial');
+});
+
+test('only an SVG data URI survives the sanitizer', () => {
+	assert.equal(spaceAvatarSrc(SVG), SVG);
+	assert.equal(spaceAvatarSrc(` ${SVG} `), SVG);
+	assert.equal(spaceAvatarSrc('data:image/svg+xml'), '');
+	assert.equal(spaceAvatarSrc('data:text/html,<script>'), '');
+	assert.equal(spaceAvatarSrc('javascript:alert(1)'), '');
+	assert.equal(spaceAvatarSrc('/files/logo.png'), '');
+	assert.equal(spaceAvatarSrc(null), '');
+});
+
+test('an off-palette colour falls back to a derived one', () => {
+	assert.equal(spaceColorTheme('blue', 'SPACE-1'), 'blue');
+	assert.ok(SPACE_COLORS.includes(spaceColorTheme('fuchsia', 'SPACE-1')));
+	assert.ok(SPACE_COLORS.includes(spaceColorTheme('', 'SPACE-1')));
+	assert.ok(SPACE_COLORS.includes(spaceColorTheme(null, null)));
+});
+
+test('a derived colour survives a rename', () => {
+	assert.equal(
+		spaceColorTheme('', 'SPACE-1'),
+		spaceColorTheme(undefined, 'SPACE-1'),
+	);
+	assert.notEqual(spaceColorTheme('', 'SPACE-1'), spaceColorTheme('', 'x'));
+});
+
+test('a class Tailwind never emitted falls back to the default icon', () => {
+	assert.equal(spaceIconClass('lucide-rocket'), 'lucide-rocket');
+	assert.equal(spaceIconClass('rocket'), DEFAULT_SPACE_ICON);
+	assert.equal(spaceIconClass(''), DEFAULT_SPACE_ICON);
+	assert.equal(spaceIconClass(null), DEFAULT_SPACE_ICON);
+});
+
+test('the patch always writes all five fields, so a save can clear one', () => {
+	assert.deepEqual(
+		generatedIdentityPatch({ icon: 'lucide-rocket', color: 'blue' }),
+		{
+			space_icon: 'lucide-rocket',
+			space_color: 'blue',
+			avatar: '',
+			avatar_style: '',
+			avatar_seed: '',
+		},
+	);
+
+	assert.deepEqual(
+		generatedIdentityPatch({
+			avatar: { svg: SVG, style: 'glass', seed: 'abc123' },
+		}),
+		{
+			space_icon: '',
+			space_color: '',
+			avatar: SVG,
+			avatar_style: 'glass',
+			avatar_seed: 'abc123',
+		},
+	);
+});
+
+test('the patch never touches the uploaded logo', () => {
+	const patch = generatedIdentityPatch({ icon: 'lucide-rocket' });
+	assert.equal('app_switcher_logo' in patch, false);
+});
diff --git a/frontend/src/lib/spaceTabs.js b/frontend/src/lib/spaceTabs.js
deleted file mode 100644
index 63e48b5b9..000000000
--- a/frontend/src/lib/spaceTabs.js
+++ /dev/null
@@ -1,78 +0,0 @@
-// Shared helpers for horizontal tab navigation.
-//
-// Tabs are derived from the *tree the sidebar is already rendering*, not from a
-// separate API call. In the editor that tree is the draft/change-request tree,
-// so a tab created in an unmerged draft shows up in the bar immediately. The
-// public reader has its own (live) source — see get_space_tabs.
-
-// Bar entry for the space's non-tab top-level content. Only offered when such
-// content exists, so a fully tabbed space never shows it.
-export const GENERAL_KEY = '__general__';
-
-/**
- * Build the tab bar's entries from a tree's top-level nodes.
- * Returns [{ key, title, icon, node }]; `node` is null for the Home entry.
- * `homeLabel` / `homeIcon` come from the space's home_tab_title / home_tab_icon.
- */
-export function buildTabList(topLevelNodes, homeLabel, homeIcon) {
-	const nodes = topLevelNodes || [];
-	const tabs = nodes
-		.filter((node) => node.is_tab)
-		.map((node) => ({
-			key: node.doc_key,
-			title: node.title,
-			icon: node.tab_icon || null,
-			node,
-		}));
-
-	// Home always leads the bar in the editor: it's the space's landing
-	// (everything not filed under a tab) and the anchor new tabs append to its
-	// right of. Shown even with no tabs yet, so the "+ New Tab" affordance and the
-	// tab model are always discoverable.
-	tabs.unshift({
-		key: GENERAL_KEY,
-		title: homeLabel,
-		// 'lucide-house' literal so Tailwind's JIT emits the fallback class.
-		icon: homeIcon || 'lucide-house',
-		node: null,
-	});
-	return tabs;
-}
-
-/**
- * Which tab owns a given node — the active-tab rule from the spec: walk the
- * current page's ancestors up to the tab-flagged group.
- *
- * `matches(node)` identifies the selected node; returns the owning tab's key,
- * GENERAL_KEY when the node lives outside every tab, or null when not found.
- */
-export function findOwningTabKey(topLevelNodes, matches) {
-	for (const top of topLevelNodes || []) {
-		if (containsNode(top, matches)) {
-			return top.is_tab ? top.doc_key : GENERAL_KEY;
-		}
-	}
-	return null;
-}
-
-function containsNode(node, matches) {
-	if (matches(node)) return true;
-	return (node.children || []).some((child) => containsNode(child, matches));
-}
-
-/**
- * The subtree the vertical sidebar should render for the active tab, plus the
- * doc_key that top-level drops inside it should reparent to.
- */
-export function subtreeForTab(topLevelNodes, activeKey, rootGroup) {
-	const nodes = topLevelNodes || [];
-	if (!activeKey || activeKey === GENERAL_KEY) {
-		return {
-			children: nodes.filter((node) => !node.is_tab),
-			rootNode: rootGroup,
-		};
-	}
-	const tab = nodes.find((node) => node.doc_key === activeKey);
-	if (!tab) return { children: nodes, rootNode: rootGroup };
-	return { children: tab.children || [], rootNode: tab.doc_key };
-}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 8bd2c393c..168d0b438 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -8,7 +8,6 @@ import { pinia } from './stores';
 import translationPlugin from './translation';
 
 import {
-	Alert,
 	Badge,
 	Button,
 	Dialog,
@@ -16,7 +15,6 @@ import {
 	FormControl,
 	TextInput,
 	frappeRequest,
-	pageMetaPlugin,
 	resourcesPlugin,
 	setConfig,
 } from 'frappe-ui';
@@ -30,7 +28,6 @@ const globalComponents = {
 	FormControl,
 	ErrorMessage,
 	Dialog,
-	Alert,
 	Badge,
 };
 
@@ -42,7 +39,6 @@ app.use(pinia);
 app.use(router);
 app.use(translationPlugin);
 app.use(resourcesPlugin);
-app.use(pageMetaPlugin);
 
 const socket = initSocket();
 app.config.globalProperties.$socket = socket;
diff --git a/frontend/src/pages/ContributionReview.vue b/frontend/src/pages/ContributionReview.vue
index afd04d42c..98c286186 100644
--- a/frontend/src/pages/ContributionReview.vue
+++ b/frontend/src/pages/ContributionReview.vue
@@ -4,7 +4,7 @@
 		     action cluster needs the full row even on a phone). -->
 		<PageHeader>
 			<div class="flex min-w-0 items-center gap-4">
-				<Button variant="ghost" icon-left="arrow-left" @click="goBack">
+				<Button variant="ghost" icon-left="lucide-arrow-left" @click="goBack">
 					{{ __('Back') }}
 				</Button>
 				<div v-if="changeRequest.doc" class="min-w-0">
@@ -79,16 +79,16 @@
 			<!-- Conflict resolution banner -->
 			<div
 				v-if="hasConflicts"
-				class="mb-4 p-4 bg-surface-amber-2 border border-outline-amber-2 rounded-lg"
+				class="mb-4 p-4 bg-surface-amber-2 border border-outline-amber-2 rounded-6"
 			>
 				<div class="flex items-start gap-3">
-					<span class="lucide-alert-triangle size-5 text-ink-amber-6 shrink-0 mt-0.5" aria-hidden="true" />
+					<span class="lucide-alert-triangle size-5 text-ink-amber-5 shrink-0 mt-0.5" aria-hidden="true" />
 					<div>
-						<p class="font-medium text-ink-amber-8">{{ __('Merge Conflicts') }}</p>
-						<p class="text-sm text-ink-amber-7 mt-1">
+						<p class="font-medium text-ink-amber-7">{{ __('Merge Conflicts') }}</p>
+						<p class="text-sm text-ink-amber-6 mt-1">
 							{{ __('The following documents have conflicting changes. Choose which version to keep for each conflict.') }}
 						</p>
-						<p class="text-sm-medium text-ink-amber-6 mt-2">
+						<p class="text-sm-medium text-ink-amber-5 mt-2">
 							{{ resolvedCount }}/{{ conflicts.length }} {{ __('resolved') }}
 						</p>
 					</div>
@@ -106,7 +106,7 @@
 						<div
 							v-for="conflict in conflicts"
 							:key="conflict.name"
-							class="border border-outline-gray-2 rounded-lg overflow-hidden"
+							class="border border-outline-gray-2 rounded-6 overflow-hidden"
 							:class="{ 'border-outline-amber-3': !resolutions[conflict.name] }"
 						>
 							<div
@@ -114,7 +114,7 @@
 								@click="toggleConflict(conflict.name)"
 							>
 								<div class="flex items-center gap-3">
-									<div class="flex items-center justify-center size-8 rounded-full shrink-0 bg-surface-amber-2 text-ink-amber-6">
+									<div class="flex items-center justify-center size-8 rounded-full shrink-0 bg-surface-amber-2 text-ink-amber-5">
 										<span class="lucide-alert-triangle size-4" aria-hidden="true" />
 									</div>
 									<div>
@@ -183,7 +183,7 @@
 						<div
 							v-for="change in changes.data"
 							:key="change.doc_key"
-							class="border border-outline-gray-2 rounded-lg overflow-hidden"
+							class="border border-outline-gray-2 rounded-6 overflow-hidden"
 						>
 							<div
 								class="flex items-center justify-between p-4 bg-surface-gray-1 cursor-pointer"
@@ -225,16 +225,16 @@
 								     the page sat vs. where it sits now instead of an empty content diff. -->
 								<template v-if="change.change_type === 'reordered'">
 									<div v-if="diffsByDocKey[change.doc_key]" class="flex items-center gap-3 flex-wrap p-4 text-sm">
-										<div class="flex items-center gap-2 px-3 py-2 rounded-md bg-surface-gray-2 text-ink-gray-6">
+										<div class="flex items-center gap-2 px-3 py-2 rounded-5 bg-surface-gray-2 text-ink-gray-6">
 											<span>{{ locationPath(diffsByDocKey[change.doc_key].location?.base, change.title) }}</span>
 											<Badge v-if="positionLabel(diffsByDocKey[change.doc_key].location?.base)" variant="subtle" theme="gray" size="sm">
 												{{ positionLabel(diffsByDocKey[change.doc_key].location?.base) }}
 											</Badge>
 										</div>
 										<span class="lucide-arrow-right size-4 text-ink-gray-4 shrink-0" aria-hidden="true" />
-										<div class="flex items-center gap-2 px-3 py-2 rounded-md bg-surface-gray-2 text-ink-gray-8 font-medium">
+										<div class="flex items-center gap-2 px-3 py-2 rounded-5 bg-surface-gray-2 text-ink-gray-8 font-medium">
 											<span>{{ locationPath(diffsByDocKey[change.doc_key].location?.head, change.title) }}</span>
-											<Badge v-if="positionLabel(diffsByDocKey[change.doc_key].location?.head)" variant="subtle" theme="orange" size="sm">
+											<Badge v-if="positionLabel(diffsByDocKey[change.doc_key].location?.head)" variant="subtle" theme="amber" size="sm">
 												{{ positionLabel(diffsByDocKey[change.doc_key].location?.head) }}
 											</Badge>
 										</div>
@@ -264,7 +264,7 @@
 									<template v-if="viewModeFor(change.doc_key) === 'preview'">
 										<div
 											v-if="diffsByDocKey[change.doc_key]"
-											class="grid grid-cols-1 lg:grid-cols-2 gap-px bg-outline-gray-2 border border-outline-gray-2 rounded-lg overflow-hidden"
+											class="grid grid-cols-1 lg:grid-cols-2 gap-px bg-outline-gray-2 border border-outline-gray-2 rounded-6 overflow-hidden"
 										>
 											<section class="bg-surface-base min-w-0">
 												<header class="flex items-center gap-2 px-4 h-9 border-b border-outline-gray-2 bg-surface-gray-1">
@@ -601,7 +601,7 @@ const reviewMenuOptions = computed(() => {
 	if (status === 'In Review') {
 		options.push({
 			label: __('Approve & Merge'),
-			icon: 'check-circle',
+			icon: 'lucide-check-circle',
 			onClick: () => {
 				showApproveMergeDialog.value = true;
 			},
@@ -610,21 +610,21 @@ const reviewMenuOptions = computed(() => {
 	if (['In Review', 'Approved'].includes(status)) {
 		options.push({
 			label: __('Request Changes'),
-			icon: 'message-square',
+			icon: 'lucide-message-square',
 			onClick: () => {
 				showRequestChangesDialog.value = true;
 			},
 		});
 		options.push({
 			label: __('Reject'),
-			icon: 'x-circle',
+			icon: 'lucide-x-circle',
 			onClick: () => {
 				showRejectDialog.value = true;
 			},
 		});
 		options.push({
 			label: __('Assign reviewer'),
-			icon: 'user-plus',
+			icon: 'lucide-user-plus',
 			onClick: () => {
 				showAssignDialog.value = true;
 			},
@@ -636,7 +636,7 @@ const reviewMenuOptions = computed(() => {
 	if (canWithdraw.value) {
 		options.push({
 			label: __('Withdraw'),
-			icon: 'rotate-ccw',
+			icon: 'lucide-rotate-ccw',
 			onClick: handleWithdraw,
 		});
 	}
@@ -879,7 +879,7 @@ function getStatusTheme(status) {
 		case 'Draft':
 			return 'blue';
 		case 'In Review':
-			return 'orange';
+			return 'amber';
 		case 'Changes Requested':
 			return 'red';
 		case 'Approved':
@@ -900,7 +900,7 @@ function getConflictTheme(type) {
 		case 'content':
 			return 'blue';
 		case 'meta':
-			return 'orange';
+			return 'amber';
 		case 'tree':
 			return 'red';
 		default:
diff --git a/frontend/src/pages/Contributions.vue b/frontend/src/pages/Contributions.vue
index a05f4bd70..2e60a652a 100644
--- a/frontend/src/pages/Contributions.vue
+++ b/frontend/src/pages/Contributions.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col h-full overflow-hidden">
 		<!-- Header renders into the shell's PageHeaderTarget. -->
 		<PageHeaderMobile v-if="isMobile" :title="__('Change Requests')">
-			<template #right>
+			<template #suffix>
 				<MobileAppMenu />
 			</template>
 		</PageHeaderMobile>
@@ -27,15 +27,42 @@
 			/>
 		</template>
 
-		<Tabs v-else v-model="activeTabIndex" :tabs="tabs">
-			<template #tab-panel="{ tab }">
+		<!-- Composed rather than the `:tabs` shorthand: the panel has to be a
+		     constrained flex column for ContributionsPanel's `flex-1
+		     overflow-auto` to scroll, and the shorthand's generated panels take
+		     no classes. v1 ships no layout defaults of its own. -->
+		<Tabs v-else v-model="activeTabKey" class="flex min-h-0 flex-1 flex-col">
+			<!-- The pill track hugs its content, so page padding goes on a wrapper
+			     rather than on TabList itself. -->
+			<div class="shrink-0 px-3 pt-3 sm:px-5">
+				<TabList variant="subtle" class="overflow-x-auto">
+					<TabTrigger
+						v-for="tab in tabs"
+						:key="tab.key"
+						:value="tab.key"
+						:label="tab.label"
+					/>
+				</TabList>
+			</div>
+			<!-- `display` is applied only while active. reka keeps an inactive
+			     panel's wrapper in the DOM with a `hidden` attribute and drops
+			     just its content; a bare `flex` here outranks Tailwind's
+			     preflight `[hidden]{display:none}` (same specificity, utilities
+			     come later), so all three panels stayed visible and split the
+			     height three ways. -->
+			<TabPanel
+				v-for="tab in tabs"
+				:key="tab.key"
+				:value="tab.key"
+				class="min-h-0 flex-1 data-[state=active]:flex data-[state=active]:flex-col"
+			>
 				<ContributionsPanel
 					:resource="panelFor(tab.key).resource"
 					:columns="panelFor(tab.key).columns"
 					:options="panelFor(tab.key).options"
 					@assign="openAssign"
 				/>
-			</template>
+			</TabPanel>
 		</Tabs>
 
 		<AssignDialog
@@ -58,6 +85,9 @@ import {
 	FormControl,
 	PageHeader,
 	PageHeaderMobile,
+	TabList,
+	TabPanel,
+	TabTrigger,
 	Tabs,
 	createListResource,
 	usePageMeta,
@@ -106,9 +136,6 @@ function getRowRoute(row) {
 
 function listOptions(emptyState, rowRoute) {
 	return {
-		selectable: false,
-		showTooltip: true,
-		resizeColumn: false,
 		getRowRoute: rowRoute,
 		emptyState,
 	};
@@ -206,21 +233,12 @@ const tabs = computed(() =>
 	tabDefs.value.map((d) => ({ key: d.key, label: d.label })),
 );
 
-const activeTabIndex = computed({
-	get() {
-		const idx = tabs.value.findIndex((t) => t.key === tabQuery.value);
-		return idx >= 0 ? idx : 0;
-	},
-	set(idx) {
-		const tab = tabs.value[idx];
-		if (tab) {
-			tabQuery.value = tab.key;
-		}
-	},
+// A tab query naming a tab this user cannot see falls back to the first one.
+const activeKey = computed(() => {
+	const known = tabs.value.some((t) => t.key === tabQuery.value);
+	return known ? tabQuery.value : tabs.value[0]?.key;
 });
 
-const activeKey = computed(() => tabDefs.value[activeTabIndex.value]?.key);
-
 // Mobile select mirrors the desktop tab strip; both drive `tabQuery`.
 const tabSelectOptions = computed(() =>
 	tabs.value.map((t) => ({ label: t.label, value: t.key })),
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
new file mode 100644
index 000000000..dc068d9f8
--- /dev/null
+++ b/frontend/src/pages/Overview.vue
@@ -0,0 +1,173 @@
+<template>
+	<!-- Placeholder landing page. The route name is `Overview` from day one so
+	     the sidebar's Overview item never has to be repointed, but the wiki-wide
+	     analytics that belong here come later.
+	     It still carries two jobs the retired list page owned: the empty-wiki
+	     state, and the only space list on mobile — where the sidebar this page
+	     sits beside does not exist. -->
+	<div class="flex h-full flex-col">
+		<PageHeaderMobile v-if="isMobile" :title="__('Spaces')">
+			<template #suffix>
+				<div class="flex items-center gap-1">
+					<Button
+						v-if="isManager"
+						variant="ghost"
+						icon="lucide-plus"
+						:label="__('New Space')"
+						@click="showCreateDialog = true"
+					/>
+					<MobileAppMenu />
+				</div>
+			</template>
+		</PageHeaderMobile>
+		<!-- No New Space action on the desktop header: the sidebar footer button
+		     sits an inch away and owns it. Mobile has no sidebar, so there the
+		     header keeps it. -->
+		<PageHeader v-else>
+			<h2 class="text-lg-semibold text-ink-gray-9">{{ __('Overview') }}</h2>
+		</PageHeader>
+
+		<ScrollArea class="min-h-0 flex-1">
+			<div class="mx-auto w-full max-w-3xl px-4 py-6">
+				<!-- A wiki with no spaces at all is the one state that needs saying
+				     out loud; every other empty result is a search that missed. -->
+				<div
+					v-if="isEmptyWiki"
+					class="flex flex-col items-center justify-center py-16 text-center"
+				>
+					<p class="text-lg-medium text-ink-gray-7">
+						{{ __('No Wiki Spaces') }}
+					</p>
+					<p class="mt-1 max-w-sm text-p-sm text-ink-gray-5">
+						{{ emptyWikiHint }}
+					</p>
+					<Button
+						v-if="isManager && isMobile"
+						class="mt-4"
+						variant="solid"
+						:label="__('New Space')"
+						@click="showCreateDialog = true"
+					/>
+				</div>
+
+				<template v-else>
+					<TextInput
+						v-if="showSearch"
+						class="mb-3"
+						type="text"
+						v-model="searchQuery"
+						:placeholder="__('Search spaces...')"
+					>
+						<template #prefix>
+							<span class="lucide-search size-4 text-ink-gray-4" aria-hidden="true" />
+						</template>
+					</TextInput>
+
+					<p
+						v-if="!spaces.loading && !orderedSpaces.length"
+						class="py-16 text-center text-p-sm text-ink-gray-5"
+					>
+						{{ __('No spaces found') }}
+					</p>
+
+					<div class="flex flex-col gap-1">
+						<router-link
+							v-for="space in orderedSpaces"
+							:key="space.name"
+							class="flex items-center gap-3 rounded-4 px-3 py-2 hover:bg-surface-gray-2"
+							:to="{ name: 'SpaceDetails', params: { spaceId: space.name } }"
+						>
+							<SpaceAvatar
+								:space="space"
+								:label="space.space_name || space.name"
+								size="lg"
+							/>
+							<span class="min-w-0 flex-1">
+								<span class="block truncate text-base text-ink-gray-8">
+									{{ space.space_name || space.name }}
+								</span>
+								<span class="block truncate text-p-sm text-ink-gray-5">
+									{{ space.route }}
+								</span>
+							</span>
+							<span class="flex shrink-0 items-center gap-1.5">
+								<Tooltip v-if="isPinned(space.name)" :text="__('Pinned to top')">
+									<span class="lucide-pin size-4 text-ink-gray-5" aria-hidden="true" />
+								</Tooltip>
+								<Tooltip v-if="space.git_synced" :text="__('Synced from GitHub')">
+									<span class="lucide-folder-git-2 size-4 text-ink-gray-4" aria-hidden="true" />
+								</Tooltip>
+								<Tooltip v-if="restrictedSpaces.has(space.name)" :text="__('Restricted access')">
+									<span class="lucide-lock size-4 text-ink-gray-4" aria-hidden="true" />
+								</Tooltip>
+								<Tooltip v-if="!space.is_published" :text="__('Unpublished')">
+									<span class="lucide-eye-off size-4 text-ink-gray-4" aria-hidden="true" />
+								</Tooltip>
+							</span>
+						</router-link>
+					</div>
+
+					<!-- The directory pages in fifties, so this button lands under a
+					     long list and needs to read as a control rather than as one
+					     more line of it. -->
+					<div v-if="spaces.hasNextPage" class="mt-6 flex justify-center">
+						<Button
+							variant="subtle"
+							:label="__('Load more')"
+							:loading="spaces.loading"
+							@click="spaces.next()"
+						/>
+					</div>
+				</template>
+			</div>
+		</ScrollArea>
+
+		<NewSpaceDialog v-model="showCreateDialog" @created="spaces.reload()" />
+	</div>
+</template>
+
+<script setup>
+import MobileAppMenu from '@/components/MobileAppMenu.vue';
+import NewSpaceDialog from '@/components/NewSpaceDialog.vue';
+import SpaceAvatar from '@/components/SpaceAvatar.vue';
+import { useMobile } from '@/composables/useMobile';
+import { useSpaceLibrary } from '@/composables/useSpaceLibrary';
+import { useUserStore } from '@/stores/user';
+import {
+	Button,
+	PageHeader,
+	PageHeaderMobile,
+	ScrollArea,
+	TextInput,
+	Tooltip,
+	usePageMeta,
+} from 'frappe-ui';
+import { computed, ref } from 'vue';
+
+const userStore = useUserStore();
+const { isMobile } = useMobile();
+const isManager = computed(() => userStore.isWikiManager);
+
+const showCreateDialog = ref(false);
+
+const {
+	spaces,
+	searchQuery,
+	showSearch,
+	orderedSpaces,
+	isEmptyWiki,
+	restrictedSpaces,
+	isPinned,
+} = useSpaceLibrary();
+
+// On desktop the New Space button lives in the sidebar, so the empty state
+// points at it rather than repeating it.
+const emptyWikiHint = computed(() => {
+	if (!isManager.value) return __('No wiki spaces available');
+	return isMobile.value
+		? __('Create your first wiki space to get started')
+		: __('Create your first wiki space from the sidebar to get started');
+});
+
+usePageMeta(() => ({ title: `${__('Overview')} | Frappe Wiki` }));
+</script>
diff --git a/frontend/src/pages/SpaceDetails.vue b/frontend/src/pages/SpaceDetails.vue
index 19fbe75c7..ce8be21d1 100644
--- a/frontend/src/pages/SpaceDetails.vue
+++ b/frontend/src/pages/SpaceDetails.vue
@@ -4,9 +4,9 @@
              (tree toggle on the left, centered space name). -->
         <PageHeaderMobile
             v-if="isMobile"
-            :title="space.doc?.space_name || spaceId"
+            :title="spaceStore.doc?.space_name || spaceId"
         >
-            <template #left>
+            <template #prefix>
                 <Button
                     variant="ghost"
                     :label="__('Pages')"
@@ -19,106 +19,17 @@
             </template>
         </PageHeaderMobile>
 
-        <!-- Full-width chrome above the sidebar+content row, mirroring the
-             reader's navbar > tabs > tree stack. The draft/git banner is about
-             the whole draft, so it outranks the tab bar, which in turn sits
-             above the tree. -->
-        <SpaceChromeBar
-            v-if="isGitSynced"
-            :space-name="space.doc?.space_name || spaceId"
-            :space-route="space.doc?.route"
-            @open-settings="openSettings"
-        >
-            <template #badge>
-                <Badge variant="subtle" theme="gray" size="sm" :title="__('Synced from GitHub')">
-                    {{ syncStatusLabel(space.doc?.last_sync_status) }}
-                </Badge>
-            </template>
-            <template #meta>
-                <a
-                    v-if="space.doc?.repo_full_name"
-                    :href="`https://github.com/${space.doc.repo_full_name}`"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="flex min-w-0 items-center gap-1 text-xs text-ink-gray-5 hover:text-ink-gray-7"
-                    :title="__('Synced from GitHub')"
-                >
-                    <span class="lucide-github size-3.5 shrink-0" aria-hidden="true" />
-                    <span class="truncate">{{ space.doc.repo_full_name }}<span v-if="space.doc?.branch">@{{ space.doc.branch }}</span></span>
-                </a>
-            </template>
-            <template #actions>
-                <Button variant="outline" size="sm" :loading="syncing" @click="() => syncNow()">
-                    <template #prefix>
-                        <span class="lucide-refresh-cw size-4" aria-hidden="true" />
-                    </template>
-                    {{ __('Sync now') }}
-                </Button>
-            </template>
-        </SpaceChromeBar>
-        <ContributionBanner
-            v-else
-            :mergeDisabled="isTreeReordering"
-            :space-name="space.doc?.space_name || spaceId"
-            :space-route="space.doc?.route"
-            @submit="handleSubmitChangeRequest"
-            @withdraw="handleArchiveChangeRequest"
-            @merge="handleMergeChangeRequest"
-            @open-settings="openSettings"
-        />
-
-        <div
-            v-if="tabsEnabled && tabs.length"
-            class="h-12 shrink-0 flex items-stretch border-b border-outline-gray-2 px-2"
-        >
-            <WikiTabBar
-                :tabs="tabs"
-                :active-key="activeTabKey"
-                :can-manage-tabs="canManageTabs && !isGitSynced"
-                @select="selectTab"
-                @create="openCreateTabDialog"
-                @reorder="reorderTab"
-                @update-icon="updateTabIcon"
-                @rename-tab="renameTab"
-            />
-        </div>
+        <!-- Desktop renders the mode strip in the space sidebar, which is where
+             the space lives now. Mobile has no sidebar, and the strip's actions
+             (submit, discard, merge, sync) must not hide behind the tree drawer,
+             so there it stays inline above the content. -->
+        <SpaceModeStrip v-if="isMobile" show-sync-state />
 
-        <!-- Sidebar + content share the row beneath the chrome. -->
         <div class="flex flex-1 min-h-0">
-            <!-- Desktop: inline resizable tree -->
-            <aside
-                v-if="!isMobile"
-                ref="sidebarRef"
-                class="border-r border-outline-gray-2 flex flex-col relative flex-shrink-0"
-                :style="{ width: `${sidebarWidth}px` }"
-            >
-                <SpaceTreePanel
-                    :space-id="spaceId"
-                    :space-name="space.doc?.space_name"
-                    :space-route="space.doc?.route"
-                    :space-loaded="!!space.doc"
-                    :tree-data="visibleTreeData"
-                    :space-root-node="treeData?.root_group || ''"
-                    :change-type-map="changeTypeMap"
-                    :readonly="isGitSynced"
-                    :selected-page-id="currentPageId"
-                    :selected-draft-key="currentDraftKey"
-                    :can-manage-tabs="canManageTabs"
-                    :compact-header="treeHeaderCompact"
-                    @refresh="refreshTree"
-                    @reorder-state-change="handleReorderStateChange"
-                    @open-settings="openSettings"
-                />
-                <div
-                    class="absolute top-0 right-0 w-1 h-full cursor-col-resize"
-                    :class="sidebarResizing ? 'bg-surface-gray-4' : 'hover:bg-surface-gray-4'"
-                    @mousedown="startResize"
-                />
-            </aside>
-
-            <!-- Mobile: same tree in an off-canvas drawer -->
+            <!-- The tree lives in the app sidebar on desktop; on mobile there is
+                 no sidebar, so it rides in an off-canvas drawer instead. -->
             <MobileDrawer
-                v-else
+                v-if="isMobile"
                 :open="mobileTreeOpen"
                 side="left"
                 :title="__('Pages')"
@@ -126,71 +37,40 @@
             >
                 <SpaceTreePanel
                     :space-id="spaceId"
-                    :space-name="space.doc?.space_name"
-                    :space-route="space.doc?.route"
-                    :space-loaded="!!space.doc"
-                    :tree-data="visibleTreeData"
-                    :space-root-node="treeData?.root_group || ''"
-                    :change-type-map="changeTypeMap"
-                    :readonly="isGitSynced"
+                    :space-name="spaceStore.doc?.space_name"
+                    :space-route="spaceStore.doc?.route"
+                    :space-loaded="spaceStore.isLoaded"
+                    :tree-data="spaceStore.treeData"
+                    :change-type-map="spaceStore.changeTypeMap"
+                    :readonly="spaceStore.isGitSynced"
                     :selected-page-id="currentPageId"
                     :selected-draft-key="currentDraftKey"
-                    :can-manage-tabs="canManageTabs"
-                    :compact-header="treeHeaderCompact"
-                    @refresh="refreshTree"
-                    @reorder-state-change="handleReorderStateChange"
+                    @refresh="spaceStore.refreshTree"
+                    @reorder-state-change="spaceStore.setTreeReordering"
                     @open-settings="openSettings"
                 />
             </MobileDrawer>
 
-            <main class="flex-1 flex flex-col bg-surface-base min-w-0">
-                <div class="flex-1 overflow-auto">
-                    <router-view
-                        :space-id="spaceId"
-                        :readonly="isGitSynced"
-                        @refresh="refreshTree"
-                    />
-                </div>
+            <!-- No scroller here: the open page owns its own, so the editor
+                 scrolls under its sticky toolbar instead of the whole panel
+                 sliding inside a second one. -->
+            <main class="flex min-h-0 min-w-0 flex-1 flex-col bg-surface-base">
+                <router-view
+                    :space-id="spaceId"
+                    :readonly="spaceStore.isGitSynced"
+                    @refresh="spaceStore.refreshTree"
+                />
             </main>
         </div>
 
         <SpaceSettings
-            v-model="showSettingsDialog"
-            :space="space"
+            v-model="showSpaceSettings"
+            :space="spaceStore.space"
             :space-id="spaceId"
             @open-update-routes="openUpdateRoutesDialog"
             @open-clone="openCloneSpaceDialog"
         />
 
-        <Dialog v-model:open="showCreateTabDialog">
-            <template #title>
-                <h3 class="text-2xl-semibold text-ink-gray-9">
-                    {{ __('Create New Tab') }}
-                </h3>
-            </template>
-            <template #default>
-                <div class="py-2">
-                    <FormControl
-                        type="text"
-                        :label="__('Title')"
-                        v-model="newTabTitle"
-                        :placeholder="__('Enter tab title')"
-                        @keyup.enter="createTab"
-                    />
-                </div>
-            </template>
-            <template #actions>
-                <div class="flex justify-end gap-2">
-                    <Button variant="outline" @click="showCreateTabDialog = false">
-                        {{ __('Cancel') }}
-                    </Button>
-                    <Button variant="solid" :loading="creatingTab" @click="createTab">
-                        {{ __('Create') }}
-                    </Button>
-                </div>
-            </template>
-        </Dialog>
-
         <Dialog v-model:open="showUpdateRoutesDialog">
             <template #title>
                 <h3 class="text-2xl-semibold text-ink-gray-9">
@@ -202,7 +82,7 @@
                     <FormControl
                         type="text"
                         :label="__('Current Base Route')"
-                        :modelValue="space.doc?.route"
+                        :modelValue="spaceStore.doc?.route"
                         :disabled="true"
                     />
                     <FormControl
@@ -260,35 +140,25 @@
 </template>
 
 <script setup>
-import { useChangeRequestStore } from '@/stores/changeRequest';
-import { useUserStore } from '@/stores/user';
 import {
-	Badge,
 	Button,
 	Dialog,
 	FormControl,
 	PageHeaderMobile,
-	createDocumentResource,
-	createResource,
 	toast,
 } from 'frappe-ui';
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import ContributionBanner from '../components/ContributionBanner.vue';
 import MobileDrawer from '../components/MobileDrawer.vue';
-import SpaceChromeBar from '../components/SpaceChromeBar.vue';
+import SpaceModeStrip from '../components/SpaceModeStrip.vue';
 import SpaceSettings from '../components/SpaceSettings/SpaceSettings.vue';
 import SpaceTreePanel from '../components/SpaceTreePanel.vue';
-import WikiTabBar from '../components/WikiTabBar.vue';
 import { useMobile } from '../composables/useMobile';
-import { useSidebarResize } from '../composables/useSidebarResize';
-import { useSpaceTabs } from '../composables/useSpaceTabs.js';
-import { GENERAL_KEY } from '../lib/spaceTabs.js';
+import { useNewPageRequest } from '../composables/useNewPageRequest';
+import { useSpaceSettings } from '../composables/useSpaceSettings';
 import { SPACE_TREE_KEY, firstPageIn } from '../lib/spaceTree.js';
-import { DEFAULT_TAB_ICON } from '../lib/tabIcons.js';
-import { useSocket } from '../socket';
 import { useDraftWorkspaceStore } from '../stores/draftWorkspace';
-import { toPublished } from '../stores/draftWorkspace/utils';
+import { useSpaceStore } from '../stores/space';
 
 const props = defineProps({
 	spaceId: {
@@ -300,9 +170,9 @@ const props = defineProps({
 const route = useRoute();
 
 const router = useRouter();
-const crStore = useChangeRequestStore();
 const draftStore = useDraftWorkspaceStore();
-const userStore = useUserStore();
+const spaceStore = useSpaceStore();
+const { showSpaceSettings, open: openSpaceSettings } = useSpaceSettings();
 
 // Expose the draft workspace store for E2E tests (mirrors window.wikiEditor).
 // Lets specs invoke optimistic actions like moveNode without driving fragile
@@ -312,12 +182,8 @@ onMounted(() => {
 });
 onBeforeUnmount(() => {
 	delete window.__draftStore;
-	syncPollCancelled = true;
 });
 
-const isManager = computed(() => userStore.isWikiManager);
-
-const showSettingsDialog = ref(false);
 const showUpdateRoutesDialog = ref(false);
 const showCloneSpaceDialog = ref(false);
 const newRoute = ref('');
@@ -325,204 +191,49 @@ const updatingRoutes = ref(false);
 const cloneRoute = ref('');
 const cloningSpace = ref(false);
 
-const sidebarRef = ref(null);
-const { sidebarWidth, sidebarResizing, startResize } =
-	useSidebarResize(sidebarRef);
-const isTreeReordering = ref(false);
-
 const currentPageId = computed(() => route.params.pageId || null);
 const currentDraftKey = computed(() => route.params.docKey || null);
 
 const { isMobile } = useMobile();
 const mobileTreeOpen = ref(false);
 
-// Both the CR banner and the git-sync banner carry the space name +
-// back/settings on desktop, so the tree header drops its own identity block to
-// avoid showing it twice. On mobile the banner is a separate compact header and
-// the tree lives in a drawer, so the drawer keeps its full header (incl.
-// Settings). The plain (non-CR, non-git) space has no banner, so it isn't
-// compacted — its identity lives only in the tree header.
-const treeHeaderCompact = computed(
-	() => !isMobile.value && (crStore.isChangeRequestMode || isGitSynced.value),
-);
-
 // Close the tree drawer once a page is opened from it, and whenever we leave the
 // mobile breakpoint, so it can't get stuck open behind the desktop layout.
 watch([currentPageId, currentDraftKey, isMobile], () => {
 	mobileTreeOpen.value = false;
 });
 
+// "New page" in the empty content column is answered by the tree's create
+// dialog, and on mobile the tree only exists while its drawer is open. Opening
+// the drawer mounts it; the request is still pending, so it acts on it there.
+const { pending: newPageRequested } = useNewPageRequest();
+watch(newPageRequested, (requested) => {
+	if (requested && isMobile.value) mobileTreeOpen.value = true;
+});
+
 // Settings opens from inside the tree drawer; close the drawer first so the
 // settings dialog isn't stacked behind it (and the drawer's backdrop can't
 // swallow the dialog's outside-click).
 function openSettings() {
 	mobileTreeOpen.value = false;
-	showSettingsDialog.value = true;
-}
-
-const space = createDocumentResource({
-	doctype: 'Wiki Space',
-	name: props.spaceId,
-	auto: true,
-	whitelistedMethods: {
-		updateRoutes: 'update_routes',
-		cloneWikiSpace: 'clone_wiki_space_in_background',
-		syncNow: 'sync_now',
-	},
-});
-
-// Git-synced spaces are read-only: the repo owns the content, so there is no
-// change request and no editing. We source the sidebar tree from the published
-// live tree instead of a CR.
-const isGitSynced = computed(() => Boolean(space.doc?.git_synced));
-
-// Tabs are opt-in per space (Wiki Space.enable_tabs). Off, the bar is gone and
-// the sidebar shows the whole tree — tab flags on nodes are kept, just ignored.
-const tabsEnabled = computed(() => Boolean(space.doc?.enable_tabs));
-
-// "Pending"/"Running" are transient internal states; show one friendly label.
-function syncStatusLabel(status) {
-	return (
-		{ Pending: __('Sync in progress'), Running: __('Sync in progress') }[
-			status
-		] ||
-		status ||
-		__('Sync in progress')
-	);
+	openSpaceSettings();
 }
 
-// Tab management is editor-only (mirrors the backend's can_manage_tabs, which
-// is can_write_space). Enforcement stays server-side; this only hides the UI.
-const canWriteSpace = ref(false);
-const capabilitiesResource = createResource({
-	url: 'wiki.api.get_space_capabilities',
-	onSuccess: (data) => {
-		canWriteSpace.value = Boolean(data?.can_write);
-	},
-});
-
-watch(
-	() => props.spaceId,
-	(id) => {
-		if (id) capabilitiesResource.submit({ space: id });
-	},
-	{ immediate: true },
+// The open page's panel is a child route, so it can't take the tree as a prop
+// without every sibling route taking it too.
+provide(
+	SPACE_TREE_KEY,
+	computed(() => spaceStore.treeData),
 );
 
-// Managing tabs needs both the permission and a space that uses tabs at all.
-const canManageTabs = computed(() => canWriteSpace.value && tabsEnabled.value);
-
-const readonlyTreeResource = createResource({
-	url: 'wiki.api.wiki_space.get_wiki_tree',
-});
-
-// The space the loaded readonly tree belongs to. This component is reused across
-// spaces (the router keeps one SpaceDetails for /spaces/:spaceId), so the
-// resource holds the previous space's tree until the new one loads — track the
-// owner so `treeData` can reject a stale cross-space tree.
-const readonlyTreeSpaceId = ref(null);
-
-// Adapt get_wiki_tree's (name-keyed) shape into the snake_case shape the tree
-// components consume. The Wiki Document `name` doubles as both the navigation
-// target (document_name) and the row key (doc_key) here — synced trees have no
-// CR overlay, so the internal doc_key is never needed.
-function adaptReadonlyNode(node) {
-	return {
-		doc_key: node.name,
-		document_name: node.name,
-		title: node.title,
-		route: node.route,
-		is_group: !!node.is_group,
-		is_tab: !!node.is_tab,
-		tab_icon: node.tab_icon || null,
-		is_published: toPublished(node.is_published),
-		is_external_link: false,
-		external_url: null,
-		children: (node.children || []).map(adaptReadonlyNode),
-	};
-}
-
-const readonlyTreeData = computed(() => {
-	const data = readonlyTreeResource.data;
-	if (!data) return null;
-	return {
-		root_group: data.root_group || '',
-		children: (data.children || []).map(adaptReadonlyNode),
-	};
-});
-
-const syncing = ref(false);
-// Guards the auto first-sync so the watch can't enqueue it (and toast) twice
-// while space.doc re-renders before last_sync_status lands.
-const firstSyncKicked = ref(false);
-async function loadReadonlyTree() {
-	const target = props.spaceId;
-	await readonlyTreeResource.submit({ space_id: target });
-	readonlyTreeSpaceId.value = target;
-}
-
-// Cancels an in-flight poll when the user navigates away mid-sync.
-let syncPollCancelled = false;
-
-// The sync runs on the long queue, so poll the doc until it reports a terminal
-// status — refreshing the tree each tick so pages (and the in-progress state)
-// update as soon as the sync lands, however long it takes.
-async function pollSyncUntilDone({ tries = 30, interval = 2000 } = {}) {
-	for (let i = 0; i < tries && !syncPollCancelled; i++) {
-		await new Promise((resolve) => setTimeout(resolve, interval));
-		if (syncPollCancelled) return;
-		await Promise.all([space.reload(), loadReadonlyTree()]);
-		const status = space.doc?.last_sync_status;
-		if (status === 'Success' || status === 'Error') return;
-	}
-}
-
-async function syncNow({ silent = false } = {}) {
-	syncing.value = true;
-	syncPollCancelled = false;
-	try {
-		await space.syncNow.submit();
-		if (!silent)
-			toast.success(__('Sync started — pulling the latest from GitHub'));
-		// Realtime (below) normally resolves this first; the poll is the fallback
-		// for when the socket isn't connected.
-		await pollSyncUntilDone();
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Could not start sync'));
-	} finally {
-		syncing.value = false;
-	}
-}
-
-// Live sync updates from the background job (broadcast site-wide by
-// wiki.wiki.git_sync._publish_sync_status) — reflect progress instantly and
-// refresh the tree on completion, without waiting on the poll fallback. Also
-// covers webhook-triggered syncs, which never go through syncNow() here.
-function onSyncRealtime(data) {
-	if (!data || data.space !== props.spaceId) return;
-	if (space.doc) space.doc.last_sync_status = data.status;
-	if (data.status === 'Success' || data.status === 'Error') {
-		syncPollCancelled = true;
-		syncing.value = false;
-		Promise.all([space.reload(), loadReadonlyTree()]);
-	}
-}
-
-onMounted(() => {
-	useSocket()?.on('wiki_git_sync_update', onSyncRealtime);
-});
-onBeforeUnmount(() => {
-	useSocket()?.off('wiki_git_sync_update', onSyncRealtime);
-});
-
 function openUpdateRoutesDialog() {
-	newRoute.value = space.doc?.route || '';
+	newRoute.value = spaceStore.doc?.route || '';
 	showUpdateRoutesDialog.value = true;
 }
 
 function openCloneSpaceDialog() {
-	if (space.doc?.route) {
-		cloneRoute.value = `${space.doc.route}-copy`;
+	if (spaceStore.doc?.route) {
+		cloneRoute.value = `${spaceStore.doc.route}-copy`;
 	} else {
 		cloneRoute.value = '';
 	}
@@ -536,10 +247,12 @@ async function updateRoutes(close) {
 
 	updatingRoutes.value = true;
 	try {
-		await space.updateRoutes.submit({ new_route: newRoute.value.trim() });
+		await spaceStore.space.updateRoutes.submit({
+			new_route: newRoute.value.trim(),
+		});
 		close();
-		await space.reload();
-		await refreshTree();
+		await spaceStore.space.reload();
+		await spaceStore.refreshTree();
 	} catch (error) {
 		console.error('Failed to update routes:', error);
 	} finally {
@@ -554,7 +267,7 @@ async function cloneSpace(close) {
 
 	cloningSpace.value = true;
 	try {
-		await space.cloneWikiSpace.submit({
+		await spaceStore.space.cloneWikiSpace.submit({
 			new_space_route: cloneRoute.value.trim(),
 		});
 		toast.success(__('Cloning started in background'));
@@ -567,136 +280,6 @@ async function cloneSpace(close) {
 	}
 }
 
-// Tree, page drafts, and pending mutations live in the draft workspace store.
-// We hydrate it on space load and after merge/archive transitions; routine
-// edits update the store optimistically without a server round-trip.
-// `treeAsLegacy` is an empty-but-truthy object before hydration, so gate on
-// `hasLoadedTree` — otherwise the sidebar flashes "No pages yet" instead of
-// the loading skeleton while the tree is being fetched.
-const treeData = computed(() => {
-	// Both sources outlive a space switch: the readonly resource keeps the old
-	// space's tree until the new fetch lands, and draftStore is a global
-	// singleton still hydrated for the previous space. Returning a stale tree
-	// here makes auto-open navigate into the wrong space's page, so gate each on
-	// belonging to the current space.
-	if (isGitSynced.value) {
-		return readonlyTreeSpaceId.value === props.spaceId
-			? readonlyTreeData.value
-			: null;
-	}
-	if (draftStore.spaceId !== props.spaceId) return null;
-	return draftStore.hasLoadedTree ? draftStore.treeAsLegacy : null;
-});
-
-// The open page's panel is a child route, so it can't take the tree as a prop
-// without every sibling route taking it too.
-provide(SPACE_TREE_KEY, treeData);
-
-// Tab state lives here rather than in SpaceTreePanel: the bar renders in this
-// column's header while the tree it filters renders in the sidebar, so a single
-// owner keeps the two from disagreeing.
-const homeMeta = computed(() => ({
-	title: space.doc?.home_tab_title || '',
-	icon: space.doc?.home_tab_icon || '',
-}));
-
-const { tabs, activeTabKey, selectTab, visibleTreeData } = useSpaceTabs(
-	treeData,
-	currentPageId,
-	currentDraftKey,
-	homeMeta,
-	tabsEnabled,
-);
-
-// Creating and reordering tabs is owned here alongside the bar, rather than in
-// the tree's own dialogs: a tab is always parented to the space root, so it
-// doesn't depend on which subtree the sidebar is currently showing.
-const showCreateTabDialog = ref(false);
-const newTabTitle = ref('');
-const creatingTab = ref(false);
-
-function openCreateTabDialog() {
-	newTabTitle.value = '';
-	showCreateTabDialog.value = true;
-}
-
-async function createTab() {
-	const title = newTabTitle.value.trim();
-	if (!title) {
-		toast.warning(__('Tab name is required'));
-		return;
-	}
-	showCreateTabDialog.value = false;
-	creatingTab.value = true;
-	try {
-		const { promise } = draftStore.createNode({
-			parentKey: treeData.value?.root_group || null,
-			title,
-			isGroup: true,
-			isTab: true,
-			tabIcon: DEFAULT_TAB_ICON,
-		});
-		const newKey = await promise;
-		if (newKey) selectTab(newKey);
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Error creating tab'));
-	} finally {
-		creatingTab.value = false;
-	}
-}
-
-// Drag-reorder from the bar. Tabs and non-tab top-level content share one
-// sibling list, so the drop index is translated back into that list's
-// coordinates — dropping a tab past the last one must not jump it over the
-// untabbed content that follows.
-function reorderTab({ docKey, toIndex }) {
-	// moveNode splices into the list *after* pulling the dragged node out, so
-	// index maths has to happen against the same post-removal list.
-	const remaining = (treeData.value?.children || []).filter(
-		(node) => node.doc_key !== docKey,
-	);
-	const remainingTabs = remaining.filter((node) => node.is_tab);
-
-	const anchor = remainingTabs[toIndex];
-	const newIndex = anchor
-		? remaining.indexOf(anchor)
-		: // Dropped past the last tab — land just after it, never after the
-			// untabbed top-level content that follows.
-			remaining.indexOf(remainingTabs[remainingTabs.length - 1]) + 1;
-
-	draftStore.moveNode({
-		docKey,
-		newParentKey: treeData.value?.root_group || null,
-		newIndex,
-	});
-}
-
-// The Home tab is synthetic — its icon/title live on the Wiki Space, not a
-// node — so it updates the space doc directly; real tabs go through the draft.
-async function updateTabIcon({ key, icon }) {
-	try {
-		if (key === GENERAL_KEY) {
-			await space.setValue.submit({ home_tab_icon: icon });
-		} else {
-			await draftStore.updateNode(key, { tab_icon: icon });
-		}
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Error updating tab icon'));
-	}
-}
-
-async function renameTab({ key, title }) {
-	try {
-		if (key === GENERAL_KEY) {
-			await space.setValue.submit({ home_tab_title: title });
-		} else {
-			await draftStore.updateNode(key, { title });
-		}
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Error renaming tab'));
-	}
-}
-
 // Remember the last page opened in this space (per-space, like the tree's
 // expanded-nodes state) so re-entering the space reopens it instead of the
 // "Select a page" welcome screen. We track saved pages only (document_name);
@@ -729,14 +312,14 @@ function findNodeByDocumentName(nodes, name) {
 
 // On the bare space route (welcome screen) open a page automatically: the
 // remembered page if it still exists, otherwise the tree's first page. Replace
-// rather than push so the back button returns to the spaces list, not here.
+// rather than push so the back button returns to the library, not here.
 // `autoOpening` guards the async gap before route.name flips to 'SpacePage':
 // without it, a treeData update mid-navigation (e.g. a git-synced background
 // sync) could fire a second replace and override the in-flight one.
 let autoOpening = false;
 function autoOpenPage() {
 	if (autoOpening || route.name !== 'SpaceDetails') return;
-	const tree = treeData.value;
+	const tree = spaceStore.treeData;
 	if (!tree) return;
 
 	const remembered = localStorage.getItem(lastPageKey());
@@ -760,207 +343,7 @@ function autoOpenPage() {
 
 // treeData hydrates asynchronously (CR hydrate or readonly fetch), so refire
 // as it — and the route — settle.
-watch([treeData, () => route.name], autoOpenPage, { immediate: true });
-
-const changeTypeMap = computed(() => {
-	const map = new Map();
-	for (const change of crStore.changes) {
-		map.set(change.doc_key, change.change_type);
-	}
-	return map;
+watch([() => spaceStore.treeData, () => route.name], autoOpenPage, {
+	immediate: true,
 });
-
-watch(
-	[() => space.doc, () => crStore.isChangeRequestMode],
-	async ([doc, isMode], oldValues) => {
-		if (!doc || !isMode) return;
-		// Synced spaces never open a change request — they hydrate the
-		// read-only tree path below instead.
-		if (doc.git_synced) return;
-
-		const [oldDoc] = oldValues || [];
-		if (doc !== oldDoc) {
-			crStore.currentChangeRequest = null;
-			draftStore.reset();
-		}
-
-		await draftStore.hydrate(props.spaceId);
-	},
-	{ immediate: true },
-);
-
-// Read-only tree hydration for git-synced spaces. Loads the published live
-// tree (no CR) and, for a never-synced space (e.g. just created), kicks off the
-// first sync so its content appears without a manual click.
-watch(
-	() => space.doc,
-	async (doc) => {
-		if (!doc || !doc.git_synced) return;
-		await loadReadonlyTree();
-		// First-ever sync of a freshly-created space: kick it once, silently —
-		// the "created successfully" toast already covers the action, and the
-		// status badge reflects progress. The guard stops a double-enqueue.
-		if (
-			!firstSyncKicked.value &&
-			!doc.last_sync_time &&
-			!['Running', 'Pending', 'Success'].includes(doc.last_sync_status)
-		) {
-			firstSyncKicked.value = true;
-			syncNow({ silent: true });
-		}
-	},
-	{ immediate: true },
-);
-
-async function refreshTree() {
-	if (isGitSynced.value) {
-		await loadReadonlyTree();
-		return;
-	}
-	if (!crStore.currentChangeRequest?.name) {
-		return;
-	}
-	await draftStore.reloadTree();
-	await draftStore.reloadChanges();
-}
-
-function handleReorderStateChange(isReordering) {
-	isTreeReordering.value = Boolean(isReordering);
-}
-
-function finalizationError(action) {
-	const blocker = draftStore.finalizationBlocker;
-	if (blocker === 'conflict') {
-		return __('Reload latest before {0}', [action]);
-	}
-	if (blocker === 'failed') {
-		return __('Resolve failed changes before {0}', [action]);
-	}
-	if (blocker === 'pending') {
-		return __('Wait for pending changes to sync before {0}', [action]);
-	}
-	if (blocker === 'unsaved') {
-		return __('Save your changes before {0}', [action]);
-	}
-	return null;
-}
-
-async function handleSubmitChangeRequest() {
-	const blockerMessage = finalizationError(__('submitting'));
-	if (blockerMessage) {
-		toast.error(blockerMessage);
-		return;
-	}
-	try {
-		const result = await crStore.submitForReview();
-		toast.success(__('Change request submitted for review'));
-		if (result?.name) {
-			router.push({
-				name: 'ChangeRequestReview',
-				params: { changeRequestId: result.name },
-			});
-		}
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Error submitting for review'));
-	}
-}
-
-async function handleArchiveChangeRequest() {
-	const crName = crStore.currentChangeRequest?.name;
-	crStore.finalizing = 'withdrawing';
-	try {
-		await crStore.archiveChangeRequest();
-		toast.success(__('Change request archived'));
-		crStore.currentChangeRequest = null;
-		crStore.clearChanges();
-		// Drop the local-first drafts too, or hydrate restores the discarded
-		// content from IndexedDB (and autosave re-creates the change request).
-		await draftStore.discardPersistedDraftsForCr(crName);
-		// Same as merge: the published tree the next CR opens on is the one
-		// already rendered, so it stays put while hydrate refreshes it.
-		draftStore.reset({ keepTree: true });
-		await draftStore.hydrate(props.spaceId);
-	} catch (error) {
-		toast.error(error.messages?.[0] || __('Error archiving change request'));
-	} finally {
-		crStore.finalizing = null;
-	}
-}
-
-function findNodeByDocKey(nodes, docKey) {
-	if (!nodes) return null;
-	for (const node of nodes) {
-		if (node.doc_key === docKey) return node;
-		const found = findNodeByDocKey(node.children, docKey);
-		if (found) return found;
-	}
-	return null;
-}
-
-async function handleMergeChangeRequest() {
-	if (isTreeReordering.value) {
-		toast.error(__('Please wait for reordering to finish before merging'));
-		return;
-	}
-	const blockerMessage = finalizationError(__('merging'));
-	if (blockerMessage) {
-		toast.error(blockerMessage);
-		return;
-	}
-	const docKey = currentDraftKey.value;
-	const changeRequestName = crStore.currentChangeRequest?.name;
-	// Held across the rehydrate as well as the merge itself, so the banner shows
-	// one state for the whole trip instead of the CR's intermediate ones.
-	crStore.finalizing = 'merging';
-	try {
-		await crStore.approveAndMergeChangeRequest();
-		toast.success(__('Change request merged'));
-		crStore.currentChangeRequest = null;
-		crStore.clearChanges();
-		// The CR's drafts are now merged into the published doc — clear them so a
-		// stale local copy can't resurrect after the merge.
-		await draftStore.discardPersistedDraftsForCr(changeRequestName);
-		// Keep the tree on screen: the merged tree is all but identical to the one
-		// already rendered, so blanking it to a skeleton for a round trip is pure
-		// loss. hydrate() swaps in the new one in a single paint.
-		draftStore.reset({ keepTree: true });
-
-		// Leave the draft route before the rehydrate, not after: the draft the
-		// URL points at no longer exists, so waiting would park the editor on
-		// "Draft not found" for the length of the round trip. The tree is still
-		// on screen (keepTree), so the published page is resolvable now — except
-		// for a page created in this CR, which only gets a document_name once
-		// the merge lands, so that one is resolved again afterwards.
-		const openMergedPage = () => {
-			if (!docKey) return true;
-			const node = findNodeByDocKey(treeData.value?.children, docKey);
-			if (!node?.document_name) return false;
-			router.push({
-				name: 'SpacePage',
-				params: { spaceId: props.spaceId, pageId: node.document_name },
-			});
-			return true;
-		};
-
-		const opened = openMergedPage();
-		await draftStore.hydrate(props.spaceId);
-		if (!opened) openMergedPage();
-	} catch (error) {
-		// A merge conflict leaves the CR Approved; the conflict-resolution UI
-		// lives on the review page, so send the author there to resolve it.
-		if (error.exc_type === 'ValidationError' && changeRequestName) {
-			toast.error(
-				error.messages?.[0] || __('Merge conflict — resolve it to continue'),
-			);
-			router.push({
-				name: 'ChangeRequestReview',
-				params: { changeRequestId: changeRequestName },
-			});
-			return;
-		}
-		toast.error(error.messages?.[0] || __('Error merging change request'));
-	} finally {
-		crStore.finalizing = null;
-	}
-}
 </script>
diff --git a/frontend/src/pages/Spaces.vue b/frontend/src/pages/Spaces.vue
deleted file mode 100644
index 57236d5a8..000000000
--- a/frontend/src/pages/Spaces.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-<SpaceList />
-</template>
-
-<script setup>
-import SpaceList from '@/components/SpaceList.vue';
-import { usePageMeta } from 'frappe-ui';
-
-usePageMeta(() => ({ title: `${__('Spaces')} | Frappe Wiki` }));
-</script>
\ No newline at end of file
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 273070031..9b2f3dc19 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -3,13 +3,13 @@ import { createRouter, createWebHistory } from 'vue-router';
 const routes = [
 	{
 		path: '/',
-		name: 'Home',
-		redirect: '/spaces',
+		name: 'Overview',
+		component: () => import('@/pages/Overview.vue'),
 	},
 	{
+		// The space list page retired into the sidebar; old links still land.
 		path: '/spaces',
-		name: 'SpaceList',
-		component: () => import('@/pages/Spaces.vue'),
+		redirect: { name: 'Overview' },
 	},
 	{
 		path: '/change-requests',
diff --git a/frontend/src/stores/changeRequest.js b/frontend/src/stores/changeRequest.js
index b4295c1e2..b5f3b1d21 100644
--- a/frontend/src/stores/changeRequest.js
+++ b/frontend/src/stores/changeRequest.js
@@ -232,8 +232,6 @@ export const useChangeRequestStore = defineStore('changeRequest', () => {
 		isGroup = false,
 		isExternalLink = false,
 		externalUrl = null,
-		isTab = false,
-		tabIcon = null,
 		route = null,
 	) {
 		return await createPageResource.submit({
@@ -245,8 +243,6 @@ export const useChangeRequestStore = defineStore('changeRequest', () => {
 			is_published: true,
 			is_external_link: isExternalLink,
 			external_url: externalUrl,
-			is_tab: isTab,
-			tab_icon: tabIcon,
 			route,
 		});
 	}
diff --git a/frontend/src/stores/draftWorkspace.js b/frontend/src/stores/draftWorkspace.js
index 3f5c24179..d9776d04a 100644
--- a/frontend/src/stores/draftWorkspace.js
+++ b/frontend/src/stores/draftWorkspace.js
@@ -409,7 +409,11 @@ export const useDraftWorkspaceStore = defineStore('draftWorkspace', () => {
 	async function loadCrPage(docKey) {
 		if (!docKey) return null;
 		if (resolver.isTempKey(docKey)) {
-			return pageBuffers.get(docKey);
+			// A create that landed before its opener read the buffer has already
+			// promoted it to the real key, leaving nothing under the temp one.
+			// Follow the promotion rather than reporting the page missing.
+			const promoted = resolver.resolveKey(docKey);
+			return pageBuffers.get(promoted || docKey);
 		}
 		const localPage = pageBuffers.get(docKey);
 		if (
@@ -467,8 +471,6 @@ export const useDraftWorkspaceStore = defineStore('draftWorkspace', () => {
 		externalUrl = null,
 		content = '',
 		isPublished = true,
-		isTab = false,
-		tabIcon = null,
 		route = null,
 	}) {
 		const effectiveParent = parentKey || treeModel.rootKey.value || null;
@@ -485,8 +487,8 @@ export const useDraftWorkspaceStore = defineStore('draftWorkspace', () => {
 			parentKey: effectiveParent,
 			orderIndex: null,
 			isGroup,
-			isTab,
-			tabIcon,
+			isTab: false,
+			tabIcon: null,
 			isPublished,
 			isExternalLink,
 			externalUrl,
@@ -517,8 +519,6 @@ export const useDraftWorkspaceStore = defineStore('draftWorkspace', () => {
 			isExternalLink,
 			externalUrl,
 			content,
-			isTab,
-			tabIcon,
 			route,
 		});
 
@@ -564,8 +564,6 @@ export const useDraftWorkspaceStore = defineStore('draftWorkspace', () => {
 							is_group: !!payload.isGroup,
 							is_external_link: !!payload.isExternalLink,
 							external_url: payload.externalUrl ?? null,
-							is_tab: !!payload.isTab,
-							tab_icon: payload.tabIcon ?? null,
 							route: payload.route ?? null,
 						},
 					]);
@@ -586,8 +584,6 @@ export const useDraftWorkspaceStore = defineStore('draftWorkspace', () => {
 						payload.isGroup,
 						payload.isExternalLink,
 						payload.externalUrl,
-						payload.isTab,
-						payload.tabIcon,
 						payload.route ?? null,
 					);
 					realKey = typeof result === 'string' ? result : result?.doc_key;
@@ -651,10 +647,6 @@ export const useDraftWorkspaceStore = defineStore('draftWorkspace', () => {
 			node.isExternalLink = !!fields.is_external_link;
 		if (fields.external_url !== undefined)
 			node.externalUrl = fields.external_url;
-		// Without these two the change would round-trip to the server but the
-		// local node would keep its old value until the next reloadTree().
-		if (fields.is_tab !== undefined) node.isTab = !!fields.is_tab;
-		if (fields.tab_icon !== undefined) node.tabIcon = fields.tab_icon;
 		node.localStatus = 'pending_update';
 
 		const page = pageBuffers.get(docKey);
diff --git a/frontend/src/stores/space.js b/frontend/src/stores/space.js
new file mode 100644
index 000000000..e7f0720b4
--- /dev/null
+++ b/frontend/src/stores/space.js
@@ -0,0 +1,314 @@
+import { createDocumentResource, createResource, toast } from 'frappe-ui';
+import { defineStore } from 'pinia';
+import { computed, ref, watch } from 'vue';
+
+import router from '../router';
+import { useSocket } from '../socket';
+import { useChangeRequestStore } from './changeRequest';
+import { useDraftWorkspaceStore } from './draftWorkspace';
+import { toPublished } from './draftWorkspace/utils';
+
+/**
+ * The space the app is currently in: its document, its tree, and its sync
+ * state.
+ *
+ * This used to live in SpaceDetails, which owned both the tree column and the
+ * content column. The tree now renders in the app sidebar — a sibling of the
+ * page, not a descendant — so the two columns need a shared owner above them
+ * both. Everything here is derived from the route, so neither column has to
+ * hand it to the other.
+ */
+export const useSpaceStore = defineStore('space', () => {
+	const crStore = useChangeRequestStore();
+	const draftStore = useDraftWorkspaceStore();
+
+	const route = router.currentRoute;
+	const spaceId = computed(() => route.value.params.spaceId || null);
+	const selectedPageId = computed(() => route.value.params.pageId || null);
+	const selectedDraftKey = computed(() => route.value.params.docKey || null);
+
+	// createDocumentResource caches by doctype+name, so re-entering a space
+	// reuses the loaded document instead of refetching it.
+	const space = ref(null);
+	watch(
+		spaceId,
+		(id) => {
+			space.value = id
+				? createDocumentResource({
+						doctype: 'Wiki Space',
+						name: id,
+						auto: true,
+						whitelistedMethods: {
+							updateRoutes: 'update_routes',
+							cloneWikiSpace: 'clone_wiki_space_in_background',
+							syncNow: 'sync_now',
+						},
+				  })
+				: null;
+		},
+		{ immediate: true },
+	);
+
+	const doc = computed(() => space.value?.doc || null);
+	const isLoaded = computed(() => Boolean(doc.value));
+
+	// Git-synced spaces are read-only: the repo owns the content, so there is no
+	// change request and no editing. The tree comes from the published live tree
+	// instead of a CR.
+	const isGitSynced = computed(() => Boolean(doc.value?.git_synced));
+
+	// "Pending"/"Running" are transient internal states; show one friendly label.
+	function syncStatusLabel(status) {
+		return (
+			{ Pending: __('Sync in progress'), Running: __('Sync in progress') }[
+				status
+			] ||
+			status ||
+			__('Sync in progress')
+		);
+	}
+
+	// Editing a space is gated server-side; this only hides the UI.
+	const canWriteSpace = ref(false);
+	const capabilitiesResource = createResource({
+		url: 'wiki.api.get_space_capabilities',
+		onSuccess: (data) => {
+			canWriteSpace.value = Boolean(data?.can_write);
+		},
+	});
+
+	watch(
+		spaceId,
+		(id) => {
+			canWriteSpace.value = false;
+			if (id) capabilitiesResource.submit({ space: id });
+		},
+		{ immediate: true },
+	);
+
+	const readonlyTreeResource = createResource({
+		url: 'wiki.api.wiki_space.get_wiki_tree',
+	});
+
+	// The space the loaded readonly tree belongs to. The resource holds the
+	// previous space's tree until the new one lands, so track the owner and let
+	// `treeData` reject a stale cross-space tree.
+	const readonlyTreeSpaceId = ref(null);
+
+	// Adapt get_wiki_tree's (name-keyed) shape into the snake_case shape the tree
+	// components consume. The Wiki Document `name` doubles as both the navigation
+	// target (document_name) and the row key (doc_key) here — synced trees have
+	// no CR overlay, so the internal doc_key is never needed.
+	function adaptReadonlyNode(node) {
+		return {
+			doc_key: node.name,
+			document_name: node.name,
+			title: node.title,
+			route: node.route,
+			is_group: !!node.is_group,
+			is_published: toPublished(node.is_published),
+			is_external_link: false,
+			external_url: null,
+			children: (node.children || []).map(adaptReadonlyNode),
+		};
+	}
+
+	const readonlyTreeData = computed(() => {
+		const data = readonlyTreeResource.data;
+		if (!data) return null;
+		return {
+			root_group: data.root_group || '',
+			children: (data.children || []).map(adaptReadonlyNode),
+		};
+	});
+
+	async function loadReadonlyTree() {
+		const target = spaceId.value;
+		await readonlyTreeResource.submit({ space_id: target });
+		readonlyTreeSpaceId.value = target;
+	}
+
+	// Tree, page drafts, and pending mutations live in the draft workspace store.
+	// We hydrate it on space load and after merge/archive transitions; routine
+	// edits update the store optimistically without a server round-trip.
+	// `treeAsLegacy` is an empty-but-truthy object before hydration, so gate on
+	// `hasLoadedTree` — otherwise the sidebar flashes "No pages yet" instead of
+	// the loading skeleton while the tree is being fetched.
+	const treeData = computed(() => {
+		// Both sources outlive a space switch: the readonly resource keeps the old
+		// space's tree until the new fetch lands, and draftStore is a global
+		// singleton still hydrated for the previous space. Returning a stale tree
+		// here makes auto-open navigate into the wrong space's page, so gate each
+		// on belonging to the current space.
+		if (isGitSynced.value) {
+			return readonlyTreeSpaceId.value === spaceId.value
+				? readonlyTreeData.value
+				: null;
+		}
+		if (draftStore.spaceId !== spaceId.value) return null;
+		return draftStore.hasLoadedTree ? draftStore.treeAsLegacy : null;
+	});
+
+	const changeTypeMap = computed(() => {
+		const map = new Map();
+		for (const change of crStore.changes) {
+			map.set(change.doc_key, change.change_type);
+		}
+		return map;
+	});
+
+	// Merging while the tree is mid-reorder would race the pending moves, so the
+	// tree reports its reorder state up here for the banner to disable on.
+	const isTreeReordering = ref(false);
+	function setTreeReordering(reordering) {
+		isTreeReordering.value = Boolean(reordering);
+	}
+
+	const syncing = ref(false);
+	// Guards the auto first-sync so the watch can't enqueue it (and toast) twice
+	// while the document re-renders before last_sync_status lands.
+	const firstSyncKicked = ref(false);
+	// Cancels an in-flight poll when the user navigates away mid-sync.
+	let syncPollCancelled = false;
+
+	watch(spaceId, () => {
+		firstSyncKicked.value = false;
+		syncPollCancelled = true;
+		syncing.value = false;
+	});
+
+	// The sync runs on the long queue, so poll the doc until it reports a
+	// terminal status — refreshing the tree each tick so pages (and the
+	// in-progress state) update as soon as the sync lands, however long it takes.
+	async function pollSyncUntilDone({ tries = 30, interval = 2000 } = {}) {
+		for (let i = 0; i < tries && !syncPollCancelled; i++) {
+			await new Promise((resolve) => setTimeout(resolve, interval));
+			if (syncPollCancelled) return;
+			await Promise.all([space.value?.reload(), loadReadonlyTree()]);
+			const status = doc.value?.last_sync_status;
+			if (status === 'Success' || status === 'Error') return;
+		}
+	}
+
+	async function syncNow({ silent = false } = {}) {
+		syncing.value = true;
+		syncPollCancelled = false;
+		try {
+			await space.value.syncNow.submit();
+			if (!silent)
+				toast.success(__('Sync started — pulling the latest from GitHub'));
+			// Realtime (below) normally resolves this first; the poll is the
+			// fallback for when the socket isn't connected.
+			await pollSyncUntilDone();
+		} catch (error) {
+			toast.error(error.messages?.[0] || __('Could not start sync'));
+		} finally {
+			syncing.value = false;
+		}
+	}
+
+	// Live sync updates from the background job (broadcast site-wide by
+	// wiki.wiki.git_sync._publish_sync_status) — reflect progress instantly and
+	// refresh the tree on completion, without waiting on the poll fallback. Also
+	// covers webhook-triggered syncs, which never go through syncNow() here.
+	function onSyncRealtime(data) {
+		if (!data || data.space !== spaceId.value) return;
+		if (doc.value) doc.value.last_sync_status = data.status;
+		if (data.status === 'Success' || data.status === 'Error') {
+			syncPollCancelled = true;
+			syncing.value = false;
+			Promise.all([space.value?.reload(), loadReadonlyTree()]);
+		}
+	}
+
+	// The store outlives every space route, so this subscribes once instead of
+	// riding a component's lifecycle.
+	useSocket()?.on('wiki_git_sync_update', onSyncRealtime);
+
+	// Keyed on the two fields that decide which workspace to build — never on
+	// `doc` itself. `setValue` replaces the document with a fresh object on
+	// every field write, so watching the document made a logo shuffle, a rename
+	// or a publish toggle look exactly like a move to another space: the change
+	// request was dropped, the draft workspace reset and the tree refetched,
+	// flashing the sidebar and the breadcrumbs for a change that touched
+	// neither. Sources are passed as an array so Vue compares them one by one.
+	watch(
+		[
+			() => doc.value?.name,
+			() => doc.value?.git_synced,
+			() => crStore.isChangeRequestMode,
+		],
+		async ([name, gitSynced, isMode], previous) => {
+			if (!name || !isMode) return;
+			// Synced spaces never open a change request — they hydrate the
+			// read-only tree path below instead.
+			if (gitSynced) return;
+
+			// A different space, not a different revision of the same one.
+			if (name !== previous?.[0]) {
+				crStore.currentChangeRequest = null;
+				draftStore.reset();
+			}
+
+			await draftStore.hydrate(spaceId.value);
+		},
+		{ immediate: true },
+	);
+
+	// Read-only tree hydration for git-synced spaces. Loads the published live
+	// tree (no CR) and, for a never-synced space (e.g. just created), kicks off
+	// the first sync so its content appears without a manual click.
+	// Same keying as above, and for the same reason: a field write on a synced
+	// space must not refetch its tree.
+	watch(
+		[() => doc.value?.name, () => doc.value?.git_synced],
+		async ([name, gitSynced]) => {
+			const currentDoc = doc.value;
+			if (!name || !gitSynced || !currentDoc) return;
+			await loadReadonlyTree();
+			// First-ever sync of a freshly-created space: kick it once, silently —
+			// the "created successfully" toast already covers the action, and the
+			// status badge reflects progress. The guard stops a double-enqueue.
+			if (
+				!firstSyncKicked.value &&
+				!currentDoc.last_sync_time &&
+				!['Running', 'Pending', 'Success'].includes(currentDoc.last_sync_status)
+			) {
+				firstSyncKicked.value = true;
+				syncNow({ silent: true });
+			}
+		},
+		{ immediate: true },
+	);
+
+	async function refreshTree() {
+		if (isGitSynced.value) {
+			await loadReadonlyTree();
+			return;
+		}
+		if (!crStore.currentChangeRequest?.name) {
+			return;
+		}
+		await draftStore.reloadTree();
+		await draftStore.reloadChanges();
+	}
+
+	return {
+		spaceId,
+		space,
+		doc,
+		isLoaded,
+		isGitSynced,
+		syncStatusLabel,
+		canWriteSpace,
+		selectedPageId,
+		selectedDraftKey,
+		treeData,
+		changeTypeMap,
+		isTreeReordering,
+		setTreeReordering,
+		syncing,
+		syncNow,
+		refreshTree,
+	};
+});
diff --git a/frontend/src/wiki-editor-content.css b/frontend/src/wiki-editor-content.css
index 76989ebc6..5fd614c9a 100644
--- a/frontend/src/wiki-editor-content.css
+++ b/frontend/src/wiki-editor-content.css
@@ -83,7 +83,7 @@
 .wiki-editor-content ul[data-type="taskList"] input[type="checkbox"] {
 	width: 0.875rem;
 	height: 0.875rem;
-	border-radius: var(--radius-sm, 4px);
+	border-radius: var(--radius-1, 4px);
 	border-color: var(--outline-gray-4);
 	background-color: var(--surface-base);
 	color: var(--ink-gray-9);
diff --git a/frontend/src/wiki-rendered.css b/frontend/src/wiki-rendered.css
index 6eec4bcc6..16d004236 100644
--- a/frontend/src/wiki-rendered.css
+++ b/frontend/src/wiki-rendered.css
@@ -66,71 +66,6 @@
 	font-weight: 600;
 }
 
-/* Callouts */
-.wiki-rendered .callout {
-	margin: 1rem 0;
-	padding: 0.875rem 1rem;
-	border-radius: 0.375rem;
-	display: grid;
-	grid-template-columns: auto 1fr;
-	gap: 0.75rem;
-	align-items: start;
-}
-.wiki-rendered .callout-icon {
-	display: flex;
-	align-items: center;
-	padding-top: 0.125rem;
-}
-.wiki-rendered .callout-icon svg {
-	width: 1rem;
-	height: 1rem;
-}
-.wiki-rendered .callout-body {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-.wiki-rendered .callout-title {
-	font-weight: 500;
-	font-size: 0.875rem;
-	color: var(--ink-gray-9);
-}
-.wiki-rendered .callout-content {
-	font-size: 0.875rem;
-	line-height: 1.5;
-	color: var(--ink-gray-7);
-}
-.wiki-rendered .callout-content > *:first-child {
-	margin-top: 0;
-}
-.wiki-rendered .callout-content > *:last-child {
-	margin-bottom: 0;
-}
-.wiki-rendered .callout-note {
-	background-color: var(--surface-blue-2);
-}
-.wiki-rendered .callout-note .callout-icon {
-	color: var(--ink-blue-6);
-}
-.wiki-rendered .callout-tip {
-	background-color: var(--surface-green-2);
-}
-.wiki-rendered .callout-tip .callout-icon {
-	color: var(--ink-green-6);
-}
-.wiki-rendered .callout-caution {
-	background-color: var(--surface-amber-2);
-}
-.wiki-rendered .callout-caution .callout-icon {
-	color: var(--ink-amber-6);
-}
-.wiki-rendered .callout-danger {
-	background-color: var(--surface-red-2);
-}
-.wiki-rendered .callout-danger .callout-icon {
-	color: var(--ink-red-6);
-}
-
 /* PDF embed card (static; interactive viewer JS is reader-only) */
 .wiki-rendered .wiki-pdf-embed {
 	margin: 1.5rem 0;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ed1b7cf12..5f90b068c 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,12 +1,15 @@
-import frappeUIPreset from 'frappe-ui/tailwind';
+import frappeUIPreset, { content as frappeUIContent } from 'frappe-ui/tailwind';
 
 export default {
 	presets: [frappeUIPreset],
+	// Tailwind v3 doesn't merge a preset's `content`, so frappe-ui's globs have
+	// to be listed here. `frappeUIContent` is the package's own list — the
+	// hand-written paths it replaces had already drifted and were dropping every
+	// class the editor and list molecules emit.
 	content: [
 		'./index.html',
 		'./src/**/*.{vue,js,ts,jsx,tsx}',
-		'./node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
-		'./node_modules/frappe-ui/src/molecules/**/*.{vue,js,ts,jsx,tsx}',
+		...frappeUIContent,
 	],
 	theme: {
 		extend: {},
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index f3f5a9e24..bd03a35e1 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -60,7 +60,13 @@ export default defineConfig(async ({ command, mode }) => {
 			},
 		},
 		optimizeDeps: {
-			include: ['feather-icons', 'highlight.js/lib/core', 'interactjs'],
+			include: ['highlight.js/lib/core'],
+			// frappe-ui ships raw source and reaches its own files through the
+			// `#molecules/*` imports map, which esbuild resolves without trying
+			// extensions. Pre-bundling any of its entries therefore fails on
+			// every extensionless internal import, so let Vite serve them as
+			// source instead.
+			exclude: ['frappe-ui', 'frappe-ui/editor', 'frappe-ui/list'],
 		},
 		server: {
 			allowedHosts: true,
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 6fd4d276e..b50612be0 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -285,6 +285,16 @@
     style-mod "^4.1.0"
     w3c-keyname "^2.2.4"
 
+"@dicebear/core@10.7.0":
+  version "10.7.0"
+  resolved "https://registry.yarnpkg.com/@dicebear/core/-/core-10.7.0.tgz#abb30c82f809ffc56d9aa8b1f936cf294a01224f"
+  integrity sha512-JUOzKOd8RUByJJo8ZL+C7YE/pvEsWewfpbWUmR8OIQZWv/PvUQHnohdevySC3icyyxe6EIU/8B/rQgA42us1QA==
+
+"@dicebear/styles@10.6.0":
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/@dicebear/styles/-/styles-10.6.0.tgz#55cec7fc58aae8f086c534ad1703be11bd762e8e"
+  integrity sha512-KhxbEVI+z8TaenX58+ZhIRFBt7adggu/F+8g6ZYLu43H2/lgLuWA3Kg8vHBrCVWdfTTTt1p2wUhQomIkkypTuQ==
+
 "@esbuild/aix-ppc64@0.21.5":
   version "0.21.5"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
@@ -421,7 +431,7 @@
   dependencies:
     "@floating-ui/utils" "^0.2.11"
 
-"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.6.0", "@floating-ui/dom@^1.7.0":
+"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.6.0":
   version "1.7.4"
   resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz"
   integrity sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==
@@ -469,11 +479,6 @@
     "@floating-ui/utils" "^0.2.9"
     vue-demi ">=0.13.0"
 
-"@headlessui/vue@^1.7.14":
-  version "1.7.16"
-  resolved "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.16.tgz"
-  integrity sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==
-
 "@iconify/types@^2.0.0":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz"
@@ -493,11 +498,6 @@
     local-pkg "^1.0.0"
     mlly "^1.7.4"
 
-"@interactjs/types@1.10.27":
-  version "1.10.27"
-  resolved "https://registry.npmjs.org/@interactjs/types/-/types-1.10.27.tgz"
-  integrity sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==
-
 "@internationalized/date@^3.5.0":
   version "3.8.2"
   resolved "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz"
@@ -577,11 +577,6 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@juggle/resize-observer@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz"
-  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
-
 "@lezer/common@^1.0.0", "@lezer/common@^1.0.2", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0", "@lezer/common@^1.2.1", "@lezer/common@^1.3.0", "@lezer/common@^1.5.0":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.5.2.tgz#d6840db13779e3f1b42e70c9a97c4086d12fae22"
@@ -807,11 +802,6 @@
   resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@popperjs/core@^2.11.2":
-  version "2.11.2"
-  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz"
-  integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
-
 "@popperjs/core@^2.9.0":
   version "2.11.7"
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz"
@@ -1043,268 +1033,268 @@
   dependencies:
     "@tanstack/virtual-core" "3.13.10"
 
-"@tiptap/core@^3.26.0", "@tiptap/core@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-3.27.1.tgz#704f7496e75781c10f82e39ed0cf6c6ddc2d1a05"
-  integrity sha512-rV6Qn4wmC6BxfF+4mu6bqGWj9vA4oXXhsrpXaJL2uhjxeHAGofjwcHof2X84VYzeyXgdlsGmqKie4TAppVXZUQ==
+"@tiptap/core@3.29.2", "@tiptap/core@^3.26.0", "@tiptap/core@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-3.29.2.tgz#90d24591a9e7fb450ffb95ed6a42f529348e3e9e"
+  integrity sha512-oKUkiPUB7noilVYxI9lNzUD4rX17sHub+PYjMfHMWHG9A3nvIy+FdePIVIIhThKWF7ijhr3eIqHY51Bn+GAFtw==
 
-"@tiptap/extension-blockquote@^3.26.0", "@tiptap/extension-blockquote@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-3.27.1.tgz#39b160191d4a6fdc67f519f4e7861fd1f1bd183e"
-  integrity sha512-VMF7xJx6qEGiX6DTKNiL31NLqypOcd/4sNjFSe8rb41PwejBJh/nOqVIbBvWkiT6NMGFLxMhj7zJ8/zPo1hXeg==
+"@tiptap/extension-blockquote@3.29.2", "@tiptap/extension-blockquote@^3.26.0", "@tiptap/extension-blockquote@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-3.29.2.tgz#e654719cee5b039a5b4af97226e2652f592d4196"
+  integrity sha512-ca4OzKDh0yaxg2+Z56bC2QnWsNsFp2YMRfVig1PDXyMVFMNJpLcnhxgq/9btn+xYAlYrj8RymOeCTYREOR6Zjg==
 
-"@tiptap/extension-bold@^3.26.0", "@tiptap/extension-bold@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-3.27.1.tgz#1b6a0ad72b97912fe9c361d5d54043e19fc6ffe6"
-  integrity sha512-TlC5bsS+pqETTrlz4CZz9RO/cKBYtELGIxwtKeivUn3eNfnOxQbbu4WDsiwIfzRFyd0OMnKl6BPM2KnYEehoEQ==
+"@tiptap/extension-bold@3.29.2", "@tiptap/extension-bold@^3.26.0", "@tiptap/extension-bold@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-3.29.2.tgz#cd03d51096caa9135ccbb31c2bae778b5fac50df"
+  integrity sha512-elYbGxJsYnBb4leqrcjdIJuiG380BcOgN+UUzvOv+qEjfGVzHodFOMBl3qnmD6urYHNu5/qQK2S0qSSRXKCLNQ==
 
-"@tiptap/extension-bubble-menu@^3.26.0", "@tiptap/extension-bubble-menu@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.27.1.tgz#36b2da978525eb894bc68d5363f9743c6f1fa1cf"
-  integrity sha512-j/j8Qp9Z5nViade2m7zjrO/CYH/Ca80Qj7aqo0eUaei6FZQ5izlF9o4XQU5EFMAutV6mwynsPUp8FVo5sCuYfw==
+"@tiptap/extension-bubble-menu@3.29.2", "@tiptap/extension-bubble-menu@^3.26.0", "@tiptap/extension-bubble-menu@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.29.2.tgz#f8dc9eda525b6e829be501aeefce2fb706f18677"
+  integrity sha512-kzcWarcpr031rZu+R3Hzut5uxb3Qj/xxMDEYZIQ3uiq1yb5vEMXj8/SIyWautk6Nu8Rr1leV3rGdR4NzhzyFAA==
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
-"@tiptap/extension-bullet-list@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-3.27.1.tgz#7c620986039e81d3991906952e6c16ded6a0b11d"
-  integrity sha512-faCUHnRP47o9Zh9VZZX6EX/569udw9Vopm2PgEKPWuKLE2qaS5WBuUVU0iItdJmKUqaWiOZkpoW4jvnDmj0dfg==
-
-"@tiptap/extension-code-block-lowlight@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-3.27.1.tgz#9f6fd904889031f4a20c7179cd6267fe88704892"
-  integrity sha512-rDZYDwKpV3Uw8xjI5pzSQTLJ7pEyJkDrVhnzdh9mBY3sHVwP1maYh+0kRUrHi5N3EhiNp/GXG1kPjysPIQ4nqQ==
-
-"@tiptap/extension-code-block@^3.26.0", "@tiptap/extension-code-block@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-3.27.1.tgz#83824e58c9f01d216eec0bf5049587eafac47068"
-  integrity sha512-pHlzmZx2OlHfyQ0yRlT5UL4mGokz947DthZuYefN1OleVqOkHpWBG+2JQwqoNq6bmzMne92zbH32rhcJUEYSjA==
-
-"@tiptap/extension-code@^3.26.0", "@tiptap/extension-code@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-3.27.1.tgz#10fdc4c91c87c450155665ca6bcec2adf862cdbd"
-  integrity sha512-epOUpFfEmBzjvnqvjv2qHX7NAuLo5dlOGV690lWu+sAYMjibuJBeVvAiKPyFCfRCCTUxdbDB3jbaOA1yEcEJ7w==
-
-"@tiptap/extension-color@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-3.27.1.tgz#624f78ed9aee96666caa93f5a59f6e295233f860"
-  integrity sha512-9R/vW4dDTce0E0HU+AyfSkKhz08Hlrx7noRRj3CKrTwsCTR86wReTKFHlzxhLKZiDrJuV2Y7CtNG7KGrAArf+A==
-
-"@tiptap/extension-document@^3.26.0", "@tiptap/extension-document@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-3.27.1.tgz#59b52414c2c3b8eecac36b0bf2a1132fdc4db49f"
-  integrity sha512-8FbBTkfnRP4iVaoj+2h3iWa+H0eGDD3yTyVCwrmue/sQTkqUNUoSuAZa3GDG4Sd41xdPwTJxl9nUWGgM1qDCnw==
-
-"@tiptap/extension-dropcursor@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-3.27.1.tgz#b2d947ce47335ef5e288b102a303d19122e287d2"
-  integrity sha512-blFf9x9RG0Qr7P3FoAH/033ffa+mMLZn34trVs8Vi0Ppk6FmJAg5HpYFOtmYoeREdNDJ5rHJKV7SoACbOHgskQ==
-
-"@tiptap/extension-floating-menu@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-3.27.1.tgz#800b0bd87ea4b587c7e2c403c51a7a75aa856325"
-  integrity sha512-BmJF1VqB7dSJkgAalrpVFj88WLhxKjcWPuWHOqf2ITrUU2832BhKLXKmxjWUy1gqV8PfNNVWtGfIERy7I0y0+Q==
-
-"@tiptap/extension-gapcursor@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-3.27.1.tgz#f78a14daf96ad287c6d9a312bed1c32e90dd4767"
-  integrity sha512-QoezN0wdvXIwLQ4ee2ccWDaX3RG0lzgQpIMpMz55oPDhpUVax1+19ApsS53LkcktpS4EbnPL4xO4DaJk0Vp7PQ==
-
-"@tiptap/extension-hard-break@^3.26.0", "@tiptap/extension-hard-break@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-3.27.1.tgz#06b75ac2afdb6f261f652c6d1041757e079f9b69"
-  integrity sha512-iv/m9hzl6jfSj9Q8UEjAxONvCoUDaP7M9SRCPx3PaLNxA230TTD6RE0Ye4zFJ8ze7ZVoJJMAqg9Qpq1iYg2JOQ==
-
-"@tiptap/extension-heading@^3.26.0", "@tiptap/extension-heading@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-3.27.1.tgz#b9fe823e46a0216add51fcd506bbcdfbaa626a53"
-  integrity sha512-SrC4l1kEIyv9ZXFaI/8LQqU2MyMmjczw7XXsWUQOTN4YXv0JyVgMNR3cI/wz0d2xsTfBdZ1N85Tdng+Ga1t0Sg==
-
-"@tiptap/extension-highlight@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-3.27.1.tgz#b9f850c97b948666bfad53b22702252652cfdb3b"
-  integrity sha512-IeMIUKbW4oyRkgn92BPYQ0fifkbTwVigKwa107nGDHMokz+pHQPFHy8xG3U7gtUOra/8OUo57bFgNGuP0TaH4A==
-
-"@tiptap/extension-horizontal-rule@^3.26.0", "@tiptap/extension-horizontal-rule@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.27.1.tgz#607056a4964b240ca1cad7b46fbce17549403b88"
-  integrity sha512-QlKE7qn5qMnIGVGhXQlvYedvLtNJ9z0dmit5w8vPb8tKzW4Spk6M7N2kruprrDA8GBwHfeR5wmF+njfUm34qxg==
-
-"@tiptap/extension-image@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-3.27.1.tgz#6d9ee1b043d27011268132402eff130478ec4470"
-  integrity sha512-+JTahgQT+NxiGjduaB3qJVyhU/wh4m3pVkht1Earioku2bm/apj5Lb8rSowa/NJYP3B+oQgV/V4YLw5dtDgBoA==
-
-"@tiptap/extension-italic@^3.26.0", "@tiptap/extension-italic@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-3.27.1.tgz#e9e98118478315f1efd5ae830418fb61dce35b6c"
-  integrity sha512-jGGeyn9uRUnNjSTHpbqhiGsp6KaYTSbV09jDXPJI9cDwfV9hpugLvpaCZd0BMBbhU1B1W6kOfX0BE15qX/HQfA==
-
-"@tiptap/extension-link@^3.26.0", "@tiptap/extension-link@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-3.27.1.tgz#c895c64b0ad6e7a64176fc9bc6fafa08ffbb0cdd"
-  integrity sha512-/2jBfsxBZUDGJmpZifqRQPz7f1E5qpS1BckTZ39TADzUJX+feKy7RJ3DtQ02+8y6SSMzvP9loGVjrk6zEMTk4g==
+"@tiptap/extension-bullet-list@3.29.2", "@tiptap/extension-bullet-list@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-3.29.2.tgz#c25a6023c7ee13e35f76ffcc4fd436415e9fa0b7"
+  integrity sha512-3bWcCUPbCHv0XttlMdnAtXLNYWx2pblByMgxmGsaP9FU0QnslGXty6A6gHCqI33ygRg1vrA6U5Wtpwbi5aKu5g==
+
+"@tiptap/extension-code-block-lowlight@3.29.2", "@tiptap/extension-code-block-lowlight@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-3.29.2.tgz#8c5706029fa0282a770964d383958946ac1dc0a2"
+  integrity sha512-iUtg33uSlbnU0y6c3nUSWdw8ILmbuc+HeAouqZ7Vl4leYddLf7wLP4s+RJ8PKDJe8m1r6GTK6VVpCOUK5eIFzQ==
+
+"@tiptap/extension-code-block@3.29.2", "@tiptap/extension-code-block@^3.26.0", "@tiptap/extension-code-block@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-3.29.2.tgz#fd91f2475d0c9e289ac98cc3210f86d869af4e16"
+  integrity sha512-w153ct8g6dLiPTdXQ6SOIMxX4SEo5Q50AmjdEEEcJ7ZcYUcde/ScSskLHfOYmyt5ZFAiyEwr121+pux+p3/oAQ==
+
+"@tiptap/extension-code@3.29.2", "@tiptap/extension-code@^3.26.0", "@tiptap/extension-code@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-3.29.2.tgz#89a1398ae5e0bebcd7833c0e73621f11ccaa4a44"
+  integrity sha512-c6W5UGuB7WNLpYocsgRzpO2OOTI4QjaI9jjHRMuty9z+s9DtaYM/HrRLNwVh6MopkHb+i/89Wkv8gCS34fftig==
+
+"@tiptap/extension-color@3.29.2", "@tiptap/extension-color@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-3.29.2.tgz#74d8f2909be5d600043848edae5382d1d6b0fc41"
+  integrity sha512-DMeyDRGZXIe2m2/QlrBoN15R4Ufwz3ERiG//OM7bjcYpiTZiO+pLC6tyabI1+QcJrYUGTu5zVah583xXzt89Kw==
+
+"@tiptap/extension-document@3.29.2", "@tiptap/extension-document@^3.26.0", "@tiptap/extension-document@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-3.29.2.tgz#215d692d4b5b9d7bbc8db8f9b9d4221f2a57c9a1"
+  integrity sha512-YUamvefLnsqu6124GavVTI7nqcFlQJ12ROB0oSwG69eSBZYNjg1tIs05LFrBxkwf4Xgqd6YzfJ9+FeG428RvzQ==
+
+"@tiptap/extension-dropcursor@3.29.2", "@tiptap/extension-dropcursor@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-3.29.2.tgz#faa11b6d0d9312e964fcf0087fdc985ca57bc344"
+  integrity sha512-KKno7cU9r1HdR48CRrsDu69/1UjZdoslq/UcE+Kx+tdhAv/aljXMkRSNzGMrBNOBDmHRgS1+58zm21WQWdQzwA==
+
+"@tiptap/extension-floating-menu@3.29.2", "@tiptap/extension-floating-menu@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-3.29.2.tgz#734672b20b9e5473393f68742988e2a0f9aa1be3"
+  integrity sha512-CBTq4Xs5aGWr65uFCIkKBms796OhmirWf/ax//iJ4fl9IfwqjwFuc2vQs9PmuwpKn9ctDHo2sMTtvyeCvIt5LQ==
+
+"@tiptap/extension-gapcursor@3.29.2", "@tiptap/extension-gapcursor@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-3.29.2.tgz#c21fd638d9e4923f0260a7a5cfd4a38cf7c05216"
+  integrity sha512-8Q39UR4/Tit759IeW9xZIe3NMwN11GsuA3FLheDyyGn7RrW02HD3HhUDlazE54Ki4HoosjFmChPlN4Ik2ubdRQ==
+
+"@tiptap/extension-hard-break@3.29.2", "@tiptap/extension-hard-break@^3.26.0", "@tiptap/extension-hard-break@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-3.29.2.tgz#334ebaa9c0d2eed7df9037524eb0f6b15732fb1d"
+  integrity sha512-eUW3LN3fq8rXnjEUeI3D2QONYdLsU3yYQm4jxlErs2h4cfwrFjgf19VSUFVmm6LrFbbQ0OnDVPeVLL6iOwDw2w==
+
+"@tiptap/extension-heading@3.29.2", "@tiptap/extension-heading@^3.26.0", "@tiptap/extension-heading@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-3.29.2.tgz#a7b392d7dd2cd463d9eda7556aaf0bb297795ad9"
+  integrity sha512-6W4aIy70Mh7BNlbG9zZ5FBLhJhU2UUEzgZJ/jwYSCcB30o8McLxJSEjhtoHiX8R78Ah2/JzBGvIe5olZlbeE4A==
+
+"@tiptap/extension-highlight@3.29.2", "@tiptap/extension-highlight@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-3.29.2.tgz#091a64207bca63e8ecfd4b94c1f44e072fbbe5f7"
+  integrity sha512-bSeZ1C8OlthyK7BzgtqOGfQymdap9V38W2hbr9KGlhVOIAmTqneOwjm27iFcu7jKqkMArVu6WBYN18Lom6umHQ==
+
+"@tiptap/extension-horizontal-rule@3.29.2", "@tiptap/extension-horizontal-rule@^3.26.0", "@tiptap/extension-horizontal-rule@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.29.2.tgz#a2afe200c29f9355fa1a79c96fc73bef016bbbd2"
+  integrity sha512-8/ZPzbB9X85Mc9/7xVLZupQKBr2UVcQTGr512xtqMW+XkCQRHCph46tRo828YE13IMWI5fWn/FaNCqXG9cULSw==
+
+"@tiptap/extension-image@3.29.2", "@tiptap/extension-image@^3.26.0", "@tiptap/extension-image@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-3.29.2.tgz#3c2295362d24b7a6be4f5d2cdffefd2424fe0a0b"
+  integrity sha512-F+S4iru247mNVZdkNwNDZHeb281DkjsBJinaOGsOyJTvXY+KU5Uq7vY1LQTn493dTfU48Z0yMBUXwJffCT92Mg==
+
+"@tiptap/extension-italic@3.29.2", "@tiptap/extension-italic@^3.26.0", "@tiptap/extension-italic@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-3.29.2.tgz#3d169fdcc34a603304f14946c6f638ddaadc9af8"
+  integrity sha512-iH63V/5wsaMnY4Jz0+meaAGhaec4AiOzOduzl6ZZr5IyGhZ1kthyW84ELt0dyLI3hNceAUhaNWc+I7+vX0aoXA==
+
+"@tiptap/extension-link@3.29.2", "@tiptap/extension-link@^3.26.0", "@tiptap/extension-link@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-3.29.2.tgz#a91ff8625cc609e9ba0bfb5d5052b4168436c4f5"
+  integrity sha512-DcVer5SqrexKCEP6Ip1UPxJUMvcRCCItSv0wxoGytanrimBh2smvcg6X0DWnjlsi5H0updhyl+atYCmmQXUIXA==
   dependencies:
     linkifyjs "^4.3.3"
 
-"@tiptap/extension-list-item@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-3.27.1.tgz#d4094a14aaab5cf48c6bba324b4edada9c044aa9"
-  integrity sha512-zwRl01ETfCkWUvtvK5fw9bXtAajMPkvlkE3Cq6JvH3LF7XXJwDtNj5Tj7exacMpCaSZmlNc43vFb2rAYnrnwMA==
-
-"@tiptap/extension-list-keymap@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-keymap/-/extension-list-keymap-3.27.1.tgz#7e2234059baa10ae20a3ad627f95109377ec0b74"
-  integrity sha512-OIMZNlzPSO8WRd4ic73Fxckzl4N1tesjjLL2XApaNA/uMpO0LoF6WSRPAWv+Z24Wp92ARRJAnRP7iZoI5+Jxig==
-
-"@tiptap/extension-list@^3.26.0", "@tiptap/extension-list@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list/-/extension-list-3.27.1.tgz#5258d95a74297570538c602164213a51427550cd"
-  integrity sha512-c2Upru7lj0/ZV/Ibww6cNz6sUS8m6Dp/9uygFhYcZOd3X8M0xBIEk42c6m6SQehkPziVA8QOgNJz7sMqsbz1OQ==
-
-"@tiptap/extension-mention@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-3.27.1.tgz#35d1d20577441aa58d8c6def553072400ed0b102"
-  integrity sha512-QfaKdl8PET01JvEFrIjMcOC1iYrBm2tsZEn07J1AaCqClW9iWcg/nCAdkdFhVir1fC54SLuaui43xslBawQRFg==
-
-"@tiptap/extension-node-range@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-node-range/-/extension-node-range-3.27.1.tgz#c7e7d6eb12c6fd590ad8290cbda60530bb745265"
-  integrity sha512-30OkvZA2+mtupOSihSyRyRAgoVP+RHXs0AT/2DCWc3NHwg+SHo/OrB/S5zsOW9p74Q+6V3hd1K3Nw6Qp9F9M0Q==
-
-"@tiptap/extension-ordered-list@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-3.27.1.tgz#ca0e06ef95b190d744e37af72af5d20a247372e6"
-  integrity sha512-GYrKqD//9nHJ2r80uXqbDMzRnFpGzbaEQRTSGaO/SH7DvXWFMow8evkOdjQ7PCQO07jNjJo75+A85Jwu3Ov3AA==
-
-"@tiptap/extension-paragraph@^3.26.0", "@tiptap/extension-paragraph@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-3.27.1.tgz#f3ea50ba90eb9ad035d512521020870308354780"
-  integrity sha512-7K7eo1gruOgAsnbK+GCV23AUVUI0cL1bTig8HaPneoFMVbig7vddk8jNLKBWO8TXVbG7TuHdnDN4F98vdtwh5Q==
-
-"@tiptap/extension-placeholder@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-3.27.1.tgz#2b0abb9cf68e5330e7cd961c2fc0b1dbf53b32c1"
-  integrity sha512-lhcNDcczQ75yJOSywCHb58Hmtg1aPL/2TdYmeLPxVrP048D7rRs133sfONcgyyw0AvhnfmPOkHLTv3QtKSowhw==
-
-"@tiptap/extension-strike@^3.26.0", "@tiptap/extension-strike@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-3.27.1.tgz#6efd003cd864fde876b66c87f88431c2518c5725"
-  integrity sha512-Y3DW1jlSlCNCyMGHP3+3qBNNPS83wuFz4RTYGjZtvRRTCRh7apZme9XRWMq1rN5mJ2Cr7fKocA2/5Bs13KgN6Q==
-
-"@tiptap/extension-table@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-3.27.1.tgz#868e3a3d2631ea6a081b4e8e35177cc621af9c7b"
-  integrity sha512-tNB8kjxo0+XPremnWkd6NUikpeJ+JQrss7HntL8GgIxX4t0gkdnLn9yUWb0JzcaYP7Y8iTZZHdkPs0P154DG8Q==
-
-"@tiptap/extension-task-item@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-3.27.1.tgz#b81c7e41fc243646d6e21262e9b9cd0605573bf5"
-  integrity sha512-HxS85Xqlf9voWpqW6yJNExjnqy9AcQbvL7K41gzKUIaXZdNxAyEkUg7wve7WAd7AUPI9yrS9WONplhmq7pWuJw==
-
-"@tiptap/extension-task-list@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-3.27.1.tgz#a46df66f69e2900a0978c54244b551b2742d28b6"
-  integrity sha512-5LaJU3q/O6S1aNe9uj/VbZ7uS8G9mJMvJGNm/wRGyR3HcZtHAcFsPh9+woylQvUThD0qO9OMeGXkgqRSE+ayuA==
-
-"@tiptap/extension-text-align@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-3.27.1.tgz#896885105b516de3cb5f293bc73e791d02b8a2a9"
-  integrity sha512-EXawuJBO55wd8WcTbHTMoPhv0CGQxza4yCCPB5Hqz4ZPQwahIr3ej+8yp/kimIl0xokabwZ0/Fu8STQ4AkZv5g==
-
-"@tiptap/extension-text-style@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-3.27.1.tgz#ee92b4900f2a452c0d6a771692aea50ec27fe5eb"
-  integrity sha512-J48WIl+6YDYTFPhWXUBQk+u7+AKVUqTdvrZOQyPYCGuQMgHrYzgWrI5+HeEifUgXJ5rMIWWP3qytp7KhVVqpDQ==
-
-"@tiptap/extension-text@^3.26.0", "@tiptap/extension-text@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-3.27.1.tgz#25b7f054a5f0ca85b7b344c1badb05bd0bfc17d9"
-  integrity sha512-6ZwaZwSrDh+KFFv6V1J79oO37yPs7y1bFxvk1/9Ih2rn3Xr5AWz+eMS+n8RpH3djBVVAQpdIAeYQgcn+VCSsTg==
-
-"@tiptap/extension-typography@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-typography/-/extension-typography-3.27.1.tgz#0783936fc5ef2e8b6603cc6f719403252886e1be"
-  integrity sha512-hkZyiiv45XQGizdEYxJn86g8yKJxG45kkTztg0m6qjjcdDzjhUAcwVPTZ4ecg3hxwy/XNY7gEBOMGI7iqJl2sw==
-
-"@tiptap/extension-underline@^3.26.0", "@tiptap/extension-underline@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-3.27.1.tgz#04e76beacdb4b225a214fe0a5653ce91de8aa54e"
-  integrity sha512-N889J4nXN/TPfVt8uF9N1A0SY82E90zwc1y26lqOcw6KWNLmQrlhMh/9OD4ikLDbekmFpOBq/UicpHf/6S8hbQ==
-
-"@tiptap/extensions@^3.26.0", "@tiptap/extensions@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extensions/-/extensions-3.27.1.tgz#cc0859ef6f6ad9333f0ab769e670a252904cd32b"
-  integrity sha512-1Tdx9faw8k0/83V6X+xCDVhV8yElGt95JxeW3YMkKQJI56QdlPz0xOdJPlMiSGJKinPyVier+x9LJD/YZUZIaw==
-
-"@tiptap/markdown@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/markdown/-/markdown-3.27.1.tgz#c308c672a3d95f145065dd808745995f3b1982cd"
-  integrity sha512-4m2LZcj/uN0uLlGnXr3i7sfdxbQNNmeMn4wFyFrP2xpshcKPL5WujUAcqT2rgKfaDjKQ8gIK/GpgSQKuRENFwg==
+"@tiptap/extension-list-item@3.29.2", "@tiptap/extension-list-item@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-3.29.2.tgz#febddb22badf0facebf3325b915f65f4a7c8f697"
+  integrity sha512-s8vBVHHFT0Qpu7CzAZ7S1kYmSiVaDvUNvMNcZUWnxj6VPfiwmx0eXd9FsjePrRCMoM5tFmPnhFTHDxY3D/eZeQ==
+
+"@tiptap/extension-list-keymap@3.29.2", "@tiptap/extension-list-keymap@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-keymap/-/extension-list-keymap-3.29.2.tgz#cdb29a4ce7fdff9f986df713501272d9fc643930"
+  integrity sha512-R+3k8OLnxdCH7Xy9ieOwUt5m2Je74u8mikothGmsYVO2Zyq48fIbmZ+X6RBPCu7DBOI2FIUhHEFbKQeDWvDNmA==
+
+"@tiptap/extension-list@3.29.2", "@tiptap/extension-list@^3.26.0", "@tiptap/extension-list@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list/-/extension-list-3.29.2.tgz#53324e55f1c89efcf450b0c92f84361ced15e2ab"
+  integrity sha512-WPZ9BHAPT6QeIm1vdVkuoOWvy9a8/EZeJwV2VhU8LXyTAttvzyj4rsbbHyJWvYWlUSTt/QF2AZ2zhKo7u1w3/A==
+
+"@tiptap/extension-mention@3.29.2", "@tiptap/extension-mention@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-3.29.2.tgz#e9b629feb72b1fa7f3397b8269c183eef5c14974"
+  integrity sha512-WF8ugDa2IRbgyRW+PffPYg8ZI+Qp9azvIsNoyuf+VSg5Vp7ze2TuJXUTObSckyiN5Ann8bDNM9Hbu3TdoI0DFQ==
+
+"@tiptap/extension-node-range@3.29.2", "@tiptap/extension-node-range@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-node-range/-/extension-node-range-3.29.2.tgz#3cc8abe2e67a6468aeee86005957b4be00a9ce31"
+  integrity sha512-7ipYCrGZvnOL0vR4E69m8PSKDg49hH5n8nVFRej3cRn/xAdAl+ytJmrLSE+SLPvw6TN44NWk3iug23IjOu3Nbw==
+
+"@tiptap/extension-ordered-list@3.29.2", "@tiptap/extension-ordered-list@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-3.29.2.tgz#2053ddaef243e455bb1267fbe81c337487fa4771"
+  integrity sha512-ndCunC+UsYOpkOtL7vGnDz21UNa45WUlcO9wMT1fbuYow2QnRhsuMlCWENXI52YPPARWuQ0RDgN7q6TaxPERBg==
+
+"@tiptap/extension-paragraph@3.29.2", "@tiptap/extension-paragraph@^3.26.0", "@tiptap/extension-paragraph@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-3.29.2.tgz#da8de494530843891c399d18ab15ea2b2f5e2ffb"
+  integrity sha512-7qJj5YTr11vvjNgjDN1ypOfwTovc0QOCYcit/rskeuVgnmQZOZQzC/BbyKLLG7UGnpRLemU/mEGbW9pAqjAXkQ==
+
+"@tiptap/extension-placeholder@3.29.2", "@tiptap/extension-placeholder@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-3.29.2.tgz#3193f789355dadb2a0684dcca63c0e2053afd5a5"
+  integrity sha512-/BlpPIq2JZk6zLaeYVOXazi6dmd0iRriTymNEnFn1doManN1y5HED9LsMeb/AhNhauL5AgmcHgpvAjbsN9k4SA==
+
+"@tiptap/extension-strike@3.29.2", "@tiptap/extension-strike@^3.26.0", "@tiptap/extension-strike@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-3.29.2.tgz#fe17b6140955e8f45c7ad32c66539891be934441"
+  integrity sha512-aEvLAbddUQZ+FukCreV3q4G2HfNI+odE7E9U+wbq6XsSWKyo8/pDu1muz+TFKNre4blSMOQ3JQmw5UeHDKy+fg==
+
+"@tiptap/extension-table@3.29.2", "@tiptap/extension-table@^3.26.0", "@tiptap/extension-table@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-3.29.2.tgz#1504bc927721b01523327b7fefd4b8a3041c355f"
+  integrity sha512-HY3JWD8i/F8W1oWw56DMqEMqxScIAZFRrhL3rUwiuowHG8LLDqDdQjBV3w1DY8lUZOtNY9grpuMtGlPUFrOVAA==
+
+"@tiptap/extension-task-item@3.29.2", "@tiptap/extension-task-item@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-3.29.2.tgz#5976da6f4b3c2401cf52d8f31135609fd47835ab"
+  integrity sha512-mi5p2/FbUO9LFl7qPmRBThME+bFpd0vyeOD6IiWnD32hYZ720/N5VDkDypPmz+IaxTFaiLeGVmGC1SxGtxksKA==
+
+"@tiptap/extension-task-list@3.29.2", "@tiptap/extension-task-list@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-3.29.2.tgz#21500975e7df6c87e5b8444af884443313276fd0"
+  integrity sha512-7ZkVoMcM3FAuvilZs3XliRRowPVMrVoKhfklfbNkTj9nVOvVToM+xcXKCcsZnf1mjMAyjw65m8doXJQKGCH7DA==
+
+"@tiptap/extension-text-align@3.29.2", "@tiptap/extension-text-align@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-3.29.2.tgz#60ac64334432703caf1bd90fcd3f08a1d6374c2a"
+  integrity sha512-205FF87zjUEh79n6dgVy9SMj1P+rNserHMqPd8lF7YS2TOWikXPG4PFuQHWXXCYzaCvQXAiATSAyPXXmUWUvaQ==
+
+"@tiptap/extension-text-style@3.29.2", "@tiptap/extension-text-style@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-3.29.2.tgz#560134aa8014151910730c344434361390b2799e"
+  integrity sha512-aQad9V9ROaEi3hE4g5z9wQ6lv5FSnzlnWFMVJxRjNlwXgm7H0fymxb4rGfca+pAwYkiRwpKYh1LatpJw2ECQAA==
+
+"@tiptap/extension-text@3.29.2", "@tiptap/extension-text@^3.26.0", "@tiptap/extension-text@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-3.29.2.tgz#7f590043b9044bd7cbc478c65e211bc3f2538335"
+  integrity sha512-Ubko45JWWHe8glBt2PiGNF8hcbys/JNalFhiR7Y1X4iOOtAxAKJJxh3+eq+//NTlGuBPdWGp7zw8EEUp7anjKA==
+
+"@tiptap/extension-typography@3.29.2", "@tiptap/extension-typography@^3.26.0":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-typography/-/extension-typography-3.29.2.tgz#9f31f3897dd24290f088d082bed3e75d2e2d3353"
+  integrity sha512-FqgDa9kDfytbh3cSngbU1O9GSYBZQKazqePqJQL6TpjNtt4l9MdnKMZwOSMVsCPJEdFwqymRfE6O7Wtl2bTnZQ==
+
+"@tiptap/extension-underline@3.29.2", "@tiptap/extension-underline@^3.26.0", "@tiptap/extension-underline@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-3.29.2.tgz#e3545cc020608fcb7bdde5f1136d3ee8e330cb4e"
+  integrity sha512-K7XwH/xS/5AIREWQ00VTEf/W5U0olp7j6wwit7cdd/8nHv6h6AGr1+iEApHKoLXWQZLfGQKzJlT9W61LAl+fHA==
+
+"@tiptap/extensions@3.29.2", "@tiptap/extensions@^3.26.0", "@tiptap/extensions@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/extensions/-/extensions-3.29.2.tgz#207c6ed79db1a5baec13f3fd8653b437fca2c8b6"
+  integrity sha512-BCz+FCAChSYtUe4BFj97HEO+nSK+J7GxbJgZG4Hg7DT/gI+hRyeNndU8efiQAx3WGdzsFi3UxRpcF1tTQM7iMQ==
+
+"@tiptap/markdown@3.29.2", "@tiptap/markdown@^3.26.0", "@tiptap/markdown@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/markdown/-/markdown-3.29.2.tgz#4a5fe4fb796e6a3c03c59de2c5a2fb840d2489ac"
+  integrity sha512-Knf9YqG3fxOyFuS3pe3eapDz0ya9eqPGzmyMSd5PuHNmR9/Ir6i5qk5+Md6bCPgDNjYskztNm7DoBXPfbXbO/w==
   dependencies:
     marked "^17.0.1"
 
-"@tiptap/pm@^3.26.0", "@tiptap/pm@^3.27.1":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-3.27.1.tgz#9177f3ddfc58877d1790530a224abbeabdf10ccd"
-  integrity sha512-Ffjx+vimmBU7zH/KrpXzJid3+pziCe/VL2aexSTP63cyQwKQ65LkFkCKaIsSpFdQQuakVZBGWjCA5RoBV852pw==
-  dependencies:
-    prosemirror-changeset "^2.3.0"
-    prosemirror-commands "^1.6.2"
-    prosemirror-dropcursor "^1.8.1"
-    prosemirror-gapcursor "^1.3.2"
-    prosemirror-history "^1.4.1"
-    prosemirror-inputrules "^1.4.0"
+"@tiptap/pm@3.29.2", "@tiptap/pm@^3.26.0", "@tiptap/pm@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-3.29.2.tgz#de461c6f8986ef807082f467cde2d8fdf1cce4bc"
+  integrity sha512-GCOme7xHaS+DSoaA4CDcAD3l6JyBlvZhvCyfsy2Vp6j8tEoBkZWio7soYVosmlyn7zq8/64VeFZP5s47yfG7fQ==
+  dependencies:
+    prosemirror-changeset "^2.4.1"
+    prosemirror-commands "^1.7.1"
+    prosemirror-dropcursor "^1.8.2"
+    prosemirror-gapcursor "^1.4.1"
+    prosemirror-history "^1.5.0"
+    prosemirror-inputrules "^1.5.1"
     prosemirror-keymap "^1.2.3"
-    prosemirror-model "^1.25.7"
-    prosemirror-schema-list "^1.5.0"
+    prosemirror-model "^1.25.11"
+    prosemirror-schema-list "^1.5.1"
     prosemirror-state "^1.4.4"
-    prosemirror-tables "^1.8.0"
+    prosemirror-tables "^1.8.5"
     prosemirror-transform "^1.12.0"
-    prosemirror-view "^1.41.8"
-
-"@tiptap/starter-kit@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-3.27.1.tgz#d1ffde8c90b8f866919eb229f56df5445cdecb31"
-  integrity sha512-vfxRsqW8rCc0k4pzo0ilU3wobVi2wqVj88VZI2SlgZlNnUAkrDGDIAph7CTa9k9fshV+O1ivpEgPC5yC046jow==
-  dependencies:
-    "@tiptap/core" "^3.27.1"
-    "@tiptap/extension-blockquote" "^3.27.1"
-    "@tiptap/extension-bold" "^3.27.1"
-    "@tiptap/extension-bullet-list" "^3.27.1"
-    "@tiptap/extension-code" "^3.27.1"
-    "@tiptap/extension-code-block" "^3.27.1"
-    "@tiptap/extension-document" "^3.27.1"
-    "@tiptap/extension-dropcursor" "^3.27.1"
-    "@tiptap/extension-gapcursor" "^3.27.1"
-    "@tiptap/extension-hard-break" "^3.27.1"
-    "@tiptap/extension-heading" "^3.27.1"
-    "@tiptap/extension-horizontal-rule" "^3.27.1"
-    "@tiptap/extension-italic" "^3.27.1"
-    "@tiptap/extension-link" "^3.27.1"
-    "@tiptap/extension-list" "^3.27.1"
-    "@tiptap/extension-list-item" "^3.27.1"
-    "@tiptap/extension-list-keymap" "^3.27.1"
-    "@tiptap/extension-ordered-list" "^3.27.1"
-    "@tiptap/extension-paragraph" "^3.27.1"
-    "@tiptap/extension-strike" "^3.27.1"
-    "@tiptap/extension-text" "^3.27.1"
-    "@tiptap/extension-underline" "^3.27.1"
-    "@tiptap/extensions" "^3.27.1"
-    "@tiptap/pm" "^3.27.1"
-
-"@tiptap/suggestion@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-3.27.1.tgz#f37411e9cb9ef08b8af0c6a8ae1202f8300c29c8"
-  integrity sha512-GNBPRav+lAfXzqmmUAS6ylRAn3G8JfsP6XosjoORxJIQJLx1ktDqwp6tm1Vgz9aGIM2TrBxLS1uBbI1Gb2/1VA==
-
-"@tiptap/vue-3@^3.26.0":
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-3.27.1.tgz#ea918199707265186a21d1fd497b9984941b575e"
-  integrity sha512-o5GB6hfUnyf9sCB306rHWmaIYRL+02ROX657EkuY8tEWKHMTuMjHWl2AqHMP47wz0W9DaMOJLvcPpYdAEKq3Mw==
+    prosemirror-view "^1.41.9"
+
+"@tiptap/starter-kit@3.29.2", "@tiptap/starter-kit@^3.26.0", "@tiptap/starter-kit@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-3.29.2.tgz#9e61bdfc628923e9c1cd5a6ed80a1d884ae1855c"
+  integrity sha512-oTu0tysiqk4zgjEtxRHjAQgxUKaAevZwueOWwSWubHdokqp7SpcbE5n9USJv89HKuTUDm3GjnQH6q8HNn/2DsA==
+  dependencies:
+    "@tiptap/core" "^3.29.2"
+    "@tiptap/extension-blockquote" "^3.29.2"
+    "@tiptap/extension-bold" "^3.29.2"
+    "@tiptap/extension-bullet-list" "^3.29.2"
+    "@tiptap/extension-code" "^3.29.2"
+    "@tiptap/extension-code-block" "^3.29.2"
+    "@tiptap/extension-document" "^3.29.2"
+    "@tiptap/extension-dropcursor" "^3.29.2"
+    "@tiptap/extension-gapcursor" "^3.29.2"
+    "@tiptap/extension-hard-break" "^3.29.2"
+    "@tiptap/extension-heading" "^3.29.2"
+    "@tiptap/extension-horizontal-rule" "^3.29.2"
+    "@tiptap/extension-italic" "^3.29.2"
+    "@tiptap/extension-link" "^3.29.2"
+    "@tiptap/extension-list" "^3.29.2"
+    "@tiptap/extension-list-item" "^3.29.2"
+    "@tiptap/extension-list-keymap" "^3.29.2"
+    "@tiptap/extension-ordered-list" "^3.29.2"
+    "@tiptap/extension-paragraph" "^3.29.2"
+    "@tiptap/extension-strike" "^3.29.2"
+    "@tiptap/extension-text" "^3.29.2"
+    "@tiptap/extension-underline" "^3.29.2"
+    "@tiptap/extensions" "^3.29.2"
+    "@tiptap/pm" "^3.29.2"
+
+"@tiptap/suggestion@3.29.2", "@tiptap/suggestion@^3.26.0", "@tiptap/suggestion@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-3.29.2.tgz#d16197cde733cf0b1799fbc40410fe6001a92b21"
+  integrity sha512-ZEhRm0gnRCwCScR9IrnIBhm9sr6U8vpR9oeznYk3hiedZ48zsgohqvgoIYpWcwYWrT2Pb0NrfhCT8IuSzdJHzQ==
+
+"@tiptap/vue-3@3.29.2", "@tiptap/vue-3@^3.26.0", "@tiptap/vue-3@^3.29.2":
+  version "3.29.2"
+  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-3.29.2.tgz#72c015d4e24428d383db15e9ab1cd81007d83608"
+  integrity sha512-rLX+V+HXbsVlk+My8mslvbnbVXZiQZHYtbOiRgxugsqZ9SK1mr1FpgZ/ZNcotJAjecT8FJmPa45ccDnVu66eGA==
   optionalDependencies:
-    "@tiptap/extension-bubble-menu" "^3.27.1"
-    "@tiptap/extension-floating-menu" "^3.27.1"
+    "@tiptap/extension-bubble-menu" "^3.29.2"
+    "@tiptap/extension-floating-menu" "^3.29.2"
 
 "@types/estree@1.0.6":
   version "1.0.6"
@@ -1340,11 +1330,6 @@
   resolved "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz"
   integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==
 
-"@types/web-bluetooth@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz"
-  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
-
 "@types/web-bluetooth@^0.0.21":
   version "0.0.21"
   resolved "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz"
@@ -1355,20 +1340,6 @@
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz"
   integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
 
-"@vexip-ui/hooks@^2.8.0":
-  version "2.9.3"
-  resolved "https://registry.npmjs.org/@vexip-ui/hooks/-/hooks-2.9.3.tgz"
-  integrity sha512-DrGlwSa0P0KQ98RU0MrQ4+KcItZDaejAJISv3iT6T6/E2ly4z7c2dzuNzn5Wk7y4FYnkXDfrf2UFNv7EDw8GJg==
-  dependencies:
-    "@floating-ui/dom" "^1.7.0"
-    "@juggle/resize-observer" "^3.4.0"
-    "@vexip-ui/utils" "2.16.4"
-
-"@vexip-ui/utils@2.16.4", "@vexip-ui/utils@^2.16.1":
-  version "2.16.4"
-  resolved "https://registry.npmjs.org/@vexip-ui/utils/-/utils-2.16.4.tgz"
-  integrity sha512-KX+Q4EsuwDp6ZlRJ7OAkiYxu52D5CVM8zpqQz/FXYV+JUtzl9T3dvxgtA8gQ0wm5Sh/xT6jp8Wo4X7tLAzRh/A==
-
 "@vitejs/plugin-vue@^5.1.4":
   version "5.1.4"
   resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz"
@@ -1495,16 +1466,6 @@
     "@vueuse/metadata" "14.3.0"
     "@vueuse/shared" "14.3.0"
 
-"@vueuse/core@^10.4.1":
-  version "10.9.0"
-  resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz"
-  integrity sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==
-  dependencies:
-    "@types/web-bluetooth" "^0.0.20"
-    "@vueuse/metadata" "10.9.0"
-    "@vueuse/shared" "10.9.0"
-    vue-demi ">=0.14.7"
-
 "@vueuse/core@^14.1.0":
   version "14.1.0"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz"
@@ -1522,11 +1483,6 @@
     "@vueuse/core" "14.3.0"
     "@vueuse/shared" "14.3.0"
 
-"@vueuse/metadata@10.9.0":
-  version "10.9.0"
-  resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz"
-  integrity sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==
-
 "@vueuse/metadata@14.1.0":
   version "14.1.0"
   resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.1.0.tgz"
@@ -1544,13 +1500,6 @@
   dependencies:
     "@vueuse/shared" "14.2.1"
 
-"@vueuse/shared@10.9.0":
-  version "10.9.0"
-  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz"
-  integrity sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==
-  dependencies:
-    vue-demi ">=0.14.7"
-
 "@vueuse/shared@14.1.0":
   version "14.1.0"
   resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-14.1.0.tgz"
@@ -1759,11 +1708,6 @@ chokidar@^5.0.0:
   dependencies:
     readdirp "^5.0.0"
 
-classnames@^2.2.5:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 cli-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz"
@@ -1838,11 +1782,6 @@ copy-anything@^4:
   dependencies:
     is-what "^5.2.0"
 
-core-js@^3.1.3:
-  version "3.20.3"
-  resolved "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz"
-  integrity sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==
-
 crelt@^1.0.5, crelt@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.7.tgz#3b441b2ddfa73161d6a2770aa4cd677f895eaf28"
@@ -1937,13 +1876,13 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-echarts@^5.6.0:
-  version "5.6.0"
-  resolved "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz"
-  integrity sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==
+echarts@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-6.1.0.tgz#ae0f68590f5ebbd728d900907c27acde7c5456d1"
+  integrity sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==
   dependencies:
     tslib "2.3.0"
-    zrender "5.6.1"
+    zrender "6.1.0"
 
 electron-to-chromium@^1.4.17:
   version "1.4.47"
@@ -1997,6 +1936,11 @@ entities@^4.5.0:
   resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
+es-module-lexer@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.7.0.tgz#9159601561880a85f2734560a9099b2c31e5372a"
+  integrity sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==
+
 esbuild@^0.21.3:
   version "0.21.5"
   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz"
@@ -2091,14 +2035,6 @@ fdir@^6.5.0:
   resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.5.0.tgz#ed2ab967a331ade62f18d077dae192684d50d350"
   integrity sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
 
-feather-icons@^4.28.0:
-  version "4.28.0"
-  resolved "https://registry.npmjs.org/feather-icons/-/feather-icons-4.28.0.tgz"
-  integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==
-  dependencies:
-    classnames "^2.2.5"
-    core-js "^3.1.3"
-
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
@@ -2126,10 +2062,10 @@ fraction.js@^4.1.2:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz"
   integrity sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==
 
-frappe-ui@1.0.0-beta.25:
-  version "1.0.0-beta.25"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-1.0.0-beta.25.tgz#99aa2463de799ae98550e9be7e4770e79b431680"
-  integrity sha512-RiHl6Nv3vy8ywtQfWG9pvWYiH9aRdhzteXPiF2+Qjsh0owBVnim0ZP6ZE03jhtmaZ5QgrPovZu+rcBTOORWzuA==
+frappe-ui@1.0.0-beta.55:
+  version "1.0.0-beta.55"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-1.0.0-beta.55.tgz#405b8e569d456d8b6679f4dd3109068c3982dfcc"
+  integrity sha512-+G+5GDVIr31+QJ2ekDpM8FOXUWzTO4oBhh9rMjfDzJnFGzISbAy4U7V/XOF3hYOkQz4R/QqnrHTD55o+JRcOoA==
   dependencies:
     "@codemirror/lang-css" "^6.3.0"
     "@codemirror/lang-html" "^6.4.9"
@@ -2142,8 +2078,6 @@ frappe-ui@1.0.0-beta.25:
     "@codemirror/lang-xml" "^6.1.0"
     "@codemirror/lang-yaml" "^6.1.3"
     "@floating-ui/dom" "^1.7.4"
-    "@headlessui/vue" "^1.7.14"
-    "@popperjs/core" "^2.11.2"
     "@tailwindcss/forms" "^0.5.3"
     "@tailwindcss/line-clamp" "^0.4.4"
     "@tailwindcss/typography" "^0.5.16"
@@ -2183,18 +2117,18 @@ frappe-ui@1.0.0-beta.25:
     "@tiptap/starter-kit" "^3.26.0"
     "@tiptap/suggestion" "^3.26.0"
     "@tiptap/vue-3" "^3.26.0"
-    "@vueuse/core" "^10.4.1"
+    "@vueuse/core" "^14.1.0"
     codemirror "^6.0.1"
     dayjs "^1.11.13"
     dompurify "^3.4.0"
-    echarts "^5.6.0"
-    feather-icons "^4.28.0"
+    echarts "^6.1.0"
+    es-module-lexer "^1.7.0"
     fuzzysort "^3.1.0"
-    grid-layout-plus "^1.1.0"
     highlight.js "^11.11.1"
     idb-keyval "^6.2.0"
     lowlight "^3.3.0"
-    lucide-static "^1.16.0"
+    lucide-static "^1.31.0"
+    magic-string "^0.30.21"
     marked "^15.0.12"
     ora "5.4.1"
     prettier "^3.3.2"
@@ -2260,15 +2194,6 @@ globals@^15.14.0:
   resolved "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz"
   integrity sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==
 
-grid-layout-plus@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/grid-layout-plus/-/grid-layout-plus-1.1.0.tgz"
-  integrity sha512-Q5uj0U5nx6xfHg8G1CDRJAEg+/40RVJl5jjRImcRwC78BxoJrEkTneT1pyxYMlbZ8fpGPT6QdHJQkD4+W6gt5A==
-  dependencies:
-    "@vexip-ui/hooks" "^2.8.0"
-    "@vexip-ui/utils" "^2.16.1"
-    interactjs "^1.10.27"
-
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
@@ -2337,13 +2262,6 @@ inherits@^2.0.3, inherits@^2.0.4:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-interactjs@^1.10.27:
-  version "1.10.27"
-  resolved "https://registry.npmjs.org/interactjs/-/interactjs-1.10.27.tgz"
-  integrity sha512-y/8RcCftGAF24gSp76X2JS3XpHiUvDQyhF8i7ujemBz77hwiHDuJzftHx7thY8cxGogwGiPJ+o97kWB6eAXnsA==
-  dependencies:
-    "@interactjs/types" "1.10.27"
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
@@ -2511,10 +2429,10 @@ lru_map@0.4.1:
   resolved "https://registry.npmjs.org/lru_map/-/lru_map-0.4.1.tgz"
   integrity sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==
 
-lucide-static@^1.16.0:
-  version "1.23.0"
-  resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-1.23.0.tgz#ba2ff1ff7ee3cedc3b1f61b76f08b512e1f4a0d3"
-  integrity sha512-V4tqLEHfvsptGaAZMD8sFJKeGsz2nTAU0+ctxTX3afao/5bs+mhrvvGDmvQmyI7YhQwpIFodZmnkPTMYyGzH4Q==
+lucide-static@^1.31.0:
+  version "1.34.0"
+  resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-1.34.0.tgz#982de397ca86863c34c9790660d042b1dad57ebc"
+  integrity sha512-pSUvFhfhvDnhXN1fXerZEMgKLQQ3DneKwFYlqB5ji8OEAN0iPi/qgwQvCkcL519QgMeR66IpS/pT342VyT/g4g==
 
 magic-string@^0.30.17:
   version "0.30.17"
@@ -2974,55 +2892,55 @@ property-information@^7.0.0:
   resolved "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz"
   integrity sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==
 
-prosemirror-changeset@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz"
-  integrity sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==
+prosemirror-changeset@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-changeset/-/prosemirror-changeset-2.4.1.tgz#685091245bf3299cd1cae2b8983cf9b0342e6b39"
+  integrity sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==
   dependencies:
     prosemirror-transform "^1.0.0"
 
-prosemirror-commands@^1.6.2:
-  version "1.7.1"
-  resolved "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz"
-  integrity sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==
+prosemirror-commands@^1.7.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.7.2.tgz#cbef3b0d722dc51e71cc936c87c4ca27d81df3a6"
+  integrity sha512-q6Q6szxqdu9Xd6EcdKsqXghu5nQdZTpB4Q9yd04WRc7/jt763e/rT60Owh0L1GYY+T46o5rD+9lEN36dZS43tw==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.10.2"
 
-prosemirror-dropcursor@^1.8.1:
-  version "1.8.2"
-  resolved "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz"
-  integrity sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==
+prosemirror-dropcursor@^1.8.2:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.3.tgz#726ae97baa251097306b0f7194a217a5ad9e8f9f"
+  integrity sha512-FoYbsJR8gK+DGlqhNoE29Loa38eIZPzQRIb1VMaDNBoo4OLP6vVof/jR8qFY/6XvUd6Dhug8MDCHl2a/h8RTfQ==
   dependencies:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.1.0"
     prosemirror-view "^1.1.0"
 
-prosemirror-gapcursor@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz"
-  integrity sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==
+prosemirror-gapcursor@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz#da33c905fece147df577342c06f4929b25d365ee"
+  integrity sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==
   dependencies:
     prosemirror-keymap "^1.0.0"
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
     prosemirror-view "^1.0.0"
 
-prosemirror-history@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz"
-  integrity sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==
+prosemirror-history@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.5.0.tgz#ee21fc5de85a1473e3e3752015ffd6d649a06859"
+  integrity sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==
   dependencies:
     prosemirror-state "^1.2.2"
     prosemirror-transform "^1.0.0"
     prosemirror-view "^1.31.0"
     rope-sequence "^1.3.0"
 
-prosemirror-inputrules@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.0.tgz"
-  integrity sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==
+prosemirror-inputrules@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.5.1.tgz#d2e935f6086e3801486b09222638f61dae89a570"
+  integrity sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==
   dependencies:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.0.0"
@@ -3043,16 +2961,16 @@ prosemirror-keymap@^1.2.3:
     prosemirror-state "^1.0.0"
     w3c-keyname "^2.2.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.25.4, prosemirror-model@^1.25.7, prosemirror-model@^1.25.9:
+prosemirror-model@^1.0.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.25.11, prosemirror-model@^1.25.4, prosemirror-model@^1.25.9:
   version "1.25.9"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.25.9.tgz#1e9f2faa5d824d65c5265f01768fcfa70bfc39dd"
   integrity sha512-pRTklkDDMMRopyoAcrr9wV/8g/RYgrLHBuJAb5hlEuYZRdm5yqmPjWId83fpBwPpSFqEdja0H7Dfd7z1X/npcA==
   dependencies:
     orderedmap "^2.0.0"
 
-prosemirror-schema-list@^1.5.0:
+prosemirror-schema-list@^1.5.1:
   version "1.5.1"
-  resolved "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz#5869c8f749e8745c394548bb11820b0feb1e32f5"
   integrity sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==
   dependencies:
     prosemirror-model "^1.0.0"
@@ -3068,7 +2986,7 @@ prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.4.4:
     prosemirror-transform "^1.0.0"
     prosemirror-view "^1.27.0"
 
-prosemirror-tables@^1.8.0, prosemirror-tables@^1.8.1:
+prosemirror-tables@^1.8.1, prosemirror-tables@^1.8.5:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz#104427012e5a5da1d2a38c122efee8d66bdd5104"
   integrity sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==
@@ -3086,7 +3004,7 @@ prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transfor
   dependencies:
     prosemirror-model "^1.21.0"
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.41.4, prosemirror-view@^1.41.8:
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.41.4, prosemirror-view@^1.41.8, prosemirror-view@^1.41.9:
   version "1.41.8"
   resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.41.8.tgz#bfb48d9dc328f1aa2a0eea1600b0828818be03f1"
   integrity sha512-TnKDdohEatgyZNGCDWIdccOHXhYloJwbwU+phw/a23KBvJIR9lWQWW7WHHK3vBdOLDNuF7TaX98GObUZOWkOnA==
@@ -3756,7 +3674,7 @@ vite@^5.4.10:
   optionalDependencies:
     fsevents "~2.3.3"
 
-vue-demi@>=0.13.0, vue-demi@>=0.14.7:
+vue-demi@>=0.13.0:
   version "0.14.7"
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz"
   integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
@@ -3863,10 +3781,10 @@ yaml@^2.3.4:
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz"
   integrity sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==
 
-zrender@5.6.1:
-  version "5.6.1"
-  resolved "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz"
-  integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==
+zrender@6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-6.1.0.tgz#c3ef06e6426d5c28865b7183035680d685e00136"
+  integrity sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==
   dependencies:
     tslib "2.3.0"
 
diff --git a/playwright.config.ts b/playwright.config.ts
index 0fefe16e9..225d4227d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -44,6 +44,13 @@ export default defineConfig({
 			name: 'setup',
 			testMatch: /auth\.setup\.ts/,
 		},
+		// Teardown project - sweeps `e2e-` spaces a killed run left behind.
+		// The factory destroys what it seeds, so this normally finds nothing.
+		{
+			name: 'teardown',
+			testMatch: /global\.teardown\.ts/,
+			use: { storageState: authFile },
+		},
 		// Main test project - uses stored auth state
 		{
 			name: 'chromium',
@@ -51,9 +58,11 @@ export default defineConfig({
 				...devices['Desktop Chrome'],
 				storageState: authFile,
 			},
-			// Mobile SPA specs run in the dedicated `mobile` project below.
-			testIgnore: /\.mobile\.spec\.ts$/,
+			// Mobile SPA specs run in the dedicated `mobile` project below;
+			// the sweeper runs as its own teardown project.
+			testIgnore: /(\.mobile\.spec|global\.teardown)\.ts$/,
 			dependencies: ['setup'],
+			teardown: 'teardown',
 		},
 		// Mobile SPA project - phone viewport for the responsive app shell.
 		// Pixel 7 keeps us on chromium (no extra webkit install) with touch +
@@ -67,6 +76,7 @@ export default defineConfig({
 			},
 			testMatch: /\.mobile\.spec\.ts$/,
 			dependencies: ['setup'],
+			teardown: 'teardown',
 		},
 	],
 });
diff --git a/specs/callout_container_node.md b/specs/callout_container_node.md
new file mode 100644
index 000000000..76be996a8
--- /dev/null
+++ b/specs/callout_container_node.md
@@ -0,0 +1,290 @@
+# Callouts as container nodes + Alert-parity styling
+
+## Problem
+
+The callout block is an **atom** node (`callout-block.js:35`). Its body lives in a
+`content` **string attribute**, so ProseMirror sees no editable content inside it.
+To get bold/italic/links we hand-built:
+
+- a second `Editor` instance per callout (`CalloutBlockView.vue:110-160`)
+- a bespoke B / I / Link toolbar plus a link-URL input row
+- `renderInlineMarkdown()` — a regex markdown renderer for view mode
+- `wiki-editor-before-save` / `-after-save` DOM events to flush the sub-editor
+  before the parent saves, plus a document-level `mousedown` click-outside handler
+
+That reimplements the editor inside the editor, and still only supports three
+marks. Lists, headings, code blocks, code spans and images inside a callout are
+unreachable from the UI even though the **server renders them fine**
+(`markdown.py:155` runs the inner markdown through `md.render`).
+
+Separately the callouts are fully tinted (`surface-blue-2`, `surface-green-2`, …),
+which no longer matches the frappe-ui `Alert` component: one neutral surface,
+color only in the icon.
+
+## Solution
+
+Two independent changes, shipped in one branch.
+
+### 1. Container node
+
+TipTap's container pattern: a node with a **content expression** plus
+`<NodeViewContent>` in the node view. The body becomes real content in the *main*
+document — not a nested editor instance.
+
+```js
+// callout-block.js
+content: 'block+',
+isolating: true,
+defining: true,
+// atom: true  ← removed
+```
+
+```vue
+<!-- CalloutBlockView.vue -->
+<NodeViewWrapper class="callout callout-note">
+  <div class="callout-header" contenteditable="false">…icon + title…</div>
+  <NodeViewContent class="callout-content" />
+</NodeViewWrapper>
+```
+
+Everything the main editor can do now works inside a callout for free: bold,
+italic, links (incl. Cmd+K `WikiLink`), lists, task lists, headings, code blocks,
+inline code, images, the bubble menu, the fixed menu, undo history, find, and
+multi-block selection. `useDocumentOutline.js:20` already descends into block
+containers, so headings inside a callout land in the TOC with no change.
+
+Deleted: the sub-`Editor`, the toolbar, the link input, `renderInlineMarkdown()`,
+`startEditing`/`finishEditing`/`syncSubEditorContent`, both save-event listeners
+and the click-outside handler.
+
+### 2. Alert-parity styling
+
+Match `frappe-ui/src/components/Alert/Alert.vue` (banner layout) exactly:
+
+| | value |
+|---|---|
+| container | `rounded-6` (12px), `bg-surface-gray-1`, `p-3`, no border |
+| icon | `size-4` (16px), solid Figma status glyph |
+| header gap | `gap-1.5` (6px), icon and title vertically centred |
+| title | `text-base-medium` (14px/500), `text-ink-gray-8` |
+| body | `text-p-base` (14px, lh 1.5, ls 0.02em), `text-ink-gray-6`, `mt-1` (4px), full width — **not** indented under the title |
+
+Icon per type — the exact `solidStatusIcons` map from
+`frappe-ui/src/components/shared/statusIcon.ts`:
+
+| type | theme | glyph | color |
+|---|---|---|---|
+| `note` | blue | `AlertCircleSolidIcon` | `--ink-blue-5` |
+| `tip` | green | `SuccessSolidIcon` | `--ink-green-5` |
+| `caution` | amber | `AlertTriangleSolidIcon` | `--ink-amber-5` |
+| `danger` | red | `CloseCircleSolidIcon` | `--ink-red-5` |
+
+Those four SFCs are **not exported** from `frappe-ui/icons` (only `DownSolidIcon`
+is; see the note in `statusIcon.ts`), so the `viewBox="0 0 16 16"` paths get
+inlined — in the Vue node view and in `markdown.py`'s `CALLOUT_ICONS`, the same
+way the current lucide paths are.
+
+Title editing moves from the ⋯ → dialog into a **borderless inline input** in the
+header row, placeholder = the type's default title. The dialog is deleted.
+
+## Wire format & data migration
+
+**None.** `:::note[Title]\n…\n:::` is unchanged, and markdown is the only
+persisted form — nothing in `frontend/src` calls `editor.getJSON()`. Existing
+pages parse straight into the new container node.
+
+Markdown hooks in `callout-markdown.js` change from string-shuttling to child
+nodes:
+
+- `tokenize(src, tokens, lexer)` — the third argument is a
+  `MarkdownLexerConfiguration`; `lexer.blockTokens(inner)` tokenizes the fence body.
+- `parseCalloutMarkdown(token, h)` — `h.parseBlockChildren(token.tokens)` builds
+  the child nodes (`parseBlockChildren`, not `parseChildren`, so `PreserveBlankLines`
+  keeps authored blank lines).
+- `renderCalloutMarkdown(node, h)` — `h.renderChildren(node.content, '\n\n')`
+  between the fences. **Still no trailing separator** — the reason is documented
+  at `callout-markdown.js:59-65` and the regression test guards it.
+
+## Rendering surfaces
+
+Four places draw a callout; three are live, one looks dead:
+
+1. **Editor** — `CalloutBlockView.vue` (also used read-only by
+   `WikiContentViewer.vue:72`).
+2. **Public reader** — `markdown.py:_generate_callout_html` +
+   `wiki/public/css/main.css:266-380`. Its icon colors are also *wrong* today
+   (`--ink-blue-2` where the SPA uses `-5`) — fixed by this restyle.
+3. **Print format** — `standard_wiki_document.html:99-170` (hard-coded hex, no
+   token vars available; float-based icon layout).
+4. **`frontend/src/wiki-rendered.css:70-132`** — nothing in the repo carries a
+   `.wiki-rendered` class; only `index.css:7` imports the file. Verify, then
+   delete the callout rules (or the file) rather than restyling dead CSS.
+
+Server HTML gets the Alert structure — header row, then full-width body:
+
+```html
+<aside class="callout callout-note">
+  <div class="callout-header">
+    <span class="callout-icon">…svg…</span>
+    <span class="callout-title">Note</span>
+  </div>
+  <div class="callout-content">…rendered inner markdown…</div>
+</aside>
+```
+
+The `.callout-body` wrapper and the `grid-template-columns: auto 1fr` layout go
+away — the body is no longer indented under the title. `parseHTML` in
+`callout-block.js:53` switches from scraping `.callout-content` text to
+`contentElement: '.callout-content'` so pasted/rendered HTML round-trips.
+
+Public CSS token equivalents (all present in
+`wiki/public/css/frappe-ui-tokens.css`): `--surface-gray-1`, `--radius-6` (12px),
+`--ink-gray-8`, `--ink-gray-6`, `--ink-{blue,green,amber,red}-5`.
+
+## Keyboard & editing behaviour
+
+- Cursor exits the callout with ArrowDown/ArrowRight at the end (add a trailing
+  paragraph when the callout is the last node).
+- `Mod-Enter` exits the callout and opens a paragraph after it.
+- Backspace at the very start of an empty callout deletes the node.
+- `isolating: true` stops Backspace/Delete from lifting content across the border.
+
+## Known limitation
+
+`content: 'block+'` permits a callout inside a callout, which the `:::` fence
+cannot represent (both the backend regex and the tokenizer close at the first
+`:::`). Nesting is blocked where it can be initiated — the slash-menu commands and
+`setCallout` no-op when `editor.isActive('calloutBlock')`. A callout dragged into a
+callout is an accepted, unguarded edge.
+
+## Phases (tracer bullets)
+
+Each phase ends in a commit; the spec is committed first.
+
+**Phase 0 — spec**
+Stays on `feat/frappe-ui-beta55` — no new branch. The Alert tokens (`rounded-6`,
+`text-p-base`, `surface-gray-1`) come with the beta55 upgrade, so the work belongs
+on that branch anyway. Commit this file alone. Other sessions are dirtying this
+checkout: stage by explicit path, never by directory.
+
+**Phase 1 — schema flip (the tracer)**
+`callout-block.js` → `content: 'block+'`; `CalloutBlockView.vue` → `NodeViewContent`,
+old sub-editor machinery deleted; `callout-markdown.js` → child parse/render.
+Keep the old colored styling untouched. Done when: type into a callout, `Cmd+B`
+via the main bubble menu, save, reload, and the markdown is byte-identical to what
+the old editor produced.
+
+**Phase 2 — node view UX**
+Inline title input, ⋯ menu (type switch + delete, title dialog removed), the
+keyboard rules above, empty-callout placeholder.
+
+**Phase 3 — editor restyle**
+Alert parity in `CalloutBlockView.vue`: neutral surface, inlined solid glyphs,
+`rounded-6`/`p-3`, header/body typography. `yarn build` from `frontend/`.
+
+**Phase 4 — public + print restyle**
+`markdown.py` (icons + `callout-header` structure), `main.css` (neutral surface,
+`-5` icon inks, remove the grid layout), print format (Alert layout, hex resolved
+from `colors.json`), delete the dead `wiki-rendered.css` callout rules.
+`yarn tailwind:build`.
+
+**Phase 5 — tests**
+- `callout-markdown.test.js`: container round-trip — inline marks, a bullet list,
+  a code block, a heading, blank lines between paragraphs; keep the
+  no-trailing-separator regression case.
+- `test_markdown.py`: new HTML structure + new icon paths.
+- `e2e/tests/callout-rich-text.spec.ts`: rewritten — the sub-editor and its
+  toolbar no longer exist. Types into the callout, formats with the main
+  toolbar/shortcut, asserts the markdown and the rendered DOM.
+- `slash-menu.spec.ts`: unchanged insert paths still pass.
+
+## Reconciliation log
+
+**Phase 0** — `2dfc31c`. Spec committed. Stayed on `feat/frappe-ui-beta55` per the
+user; no new branch.
+
+**Phase 1** — `8bdc45e`. Schema flipped, markdown hooks rewritten, node view cut
+from 332 lines of sub-editor machinery to a `NodeViewContent` hole
+(−370/+163 across the five files). Deviations from the plan, all deliberate:
+
+- `parseBlockChildren` → `parseChildren`. Matches TipTap's own
+  `createBlockMarkdownSpec`; the blank-line preservation `parseBlockChildren`
+  adds is for the top level, and inside a fence it only risks phantom paragraphs.
+- Nesting guard landed here rather than later: `setCallout` returns false when
+  the cursor is already in a callout, and the four slash commands now go through
+  it instead of raw `insertContent` (they were also still passing the dead
+  `content: ''` attribute).
+- The e2e spec was rewritten now, not in Phase 5 — it asserted the sub-editor and
+  its toolbar exist, so it could not survive the schema flip. Five specs pass
+  against `wiki.localhost:8000`.
+- The ⋯ menu is now hidden when `editor.isEditable` is false. It was rendering in
+  the read-only `WikiContentViewer` on hover.
+
+Worth recording: **a markdown fixed point proves nothing about fidelity.** The
+first version of the code-block case round-tripped perfectly while the fence
+collapsed to a bare text node — the unit harness had no `codeBlock` registered
+(`wikiStarterKit` disables it for frappe-ui's version, whose .vue view
+`node --test` can't load). The harness now registers the plain
+`@tiptap/extension-code-block`, and there is an explicit assertion on the parsed
+child node types.
+
+**Phase 2** — `fe6f104`. Inline title input (Enter moves into the body), ⋯ menu
+without the title dialog, and the exits: `Mod-Enter` / `ArrowDown`-at-the-end open
+a paragraph after the callout, Backspace at the start of an empty one deletes it.
+The Placeholder config is now a function so an empty callout body reads as a
+callout rather than as an empty document.
+
+The e2e spec also stopped authoring into "whichever space is listed first". That
+space's tree grows every run and was never cleaned up, which is what made the
+suite flake locally — each test now creates a throwaway space through the API and
+`afterEach` deletes it.
+
+**Phase 3** — `9631c12`. Alert parity in the editor, verified by screenshot. One
+correction after looking at it: the title placeholder was inked `ink-gray-4`, so
+an untitled callout showed a grey "Note" in the editor and a full-ink "Note" once
+published. The placeholder is inked like a typed title now — an empty title is not
+an empty header.
+
+**Phase 4** — `01a03e3`. `markdown.py` emits the header/body structure with the
+Alert glyphs; `main.css` and the print format follow. Verified by screenshotting a
+published page: it matches the editor. Two things found on the way:
+
+- The public icons were a shade off before this — `--ink-blue-2` etc. where the
+  SPA used `-5`. Nobody had noticed because the tinted surface hid it.
+- `wiki-rendered.css` is dead in full, not just its callout rules: its only
+  consumer, the standalone CR preview page, was removed in `afb6808`. Only the
+  callout rules are removed here — `specs/cleanup/` suggests another session is
+  already working through dead code, and this is theirs to take.
+
+Print is the one surface not visually verified; it has no CSS variables and needs
+a wkhtmltopdf run. Its structure follows the same class names `markdown.py` emits.
+
+**Phase 5** — tests landed with the phases they cover rather than in a batch at
+the end. Final state: 15 markdown unit tests, 81 python tests in
+`test_markdown.py` (two new: HTML structure, and the icon paths), and 9 e2e specs
+covering parse fidelity, typing with the main toolbar, the slash insert, the
+title input, both exits, and the published page. `slash-menu`, `editor-toc` and
+`public-blank-lines` pass unchanged.
+
+**Follow-up (title as a value, not a placeholder).** Phase 3 kept the default
+title as an `<input>` placeholder inked like real text. That reads as text you can
+edit but can't: putting a cursor in it and pressing Backspace does nothing, which
+is exactly what the author tried. The title is a real attribute value now —
+seeded by `setCallout`, and filled in on parse for a fence with no `[Title]`.
+
+`renderCalloutMarkdown` drops the brackets again whenever the title still equals
+the type's default, so a wiki full of `:::note` does not get rewritten to
+`:::note[Note]` the first time each page is saved. Clearing the title restores the
+default on blur (the rendered page always prints one, so an empty title means the
+default, not a missing header), and switching type carries the title along only
+when the author never changed it. The ⋯ action is "Remove", not "Delete".
+
+**Follow-up (body alignment).** Alert's description is full-bleed, and copying
+that exactly turned out to be wrong for this use. Every Alert story renders the
+component inside `max-w-sm` — a 384px status box with a one-sentence description
+(`node_modules/frappe-ui/src/components/Alert/stories/`). A wiki callout is the
+document's width and holds paragraphs and lists, and at that size the two left
+edges (title at 22px behind the icon, body at 0) read as a header floating above
+content it doesn't own. The body is indented to the title's left edge —
+`calc(1rem + 0.375rem)`, the icon plus the header gap — in the editor, on the
+public page and in print. Alert's visual language, at long-form scale.
diff --git a/specs/frappe_ui_beta45_upgrade.md b/specs/frappe_ui_beta45_upgrade.md
new file mode 100644
index 000000000..68546c85a
--- /dev/null
+++ b/specs/frappe_ui_beta45_upgrade.md
@@ -0,0 +1,184 @@
+# Frappe UI `beta.25` → `beta.45` Upgrade
+
+Date: 2026-08-11
+Status: **Phases 0–3 landed on `feat/frappe-ui-beta45`; Phase 4 verification in progress.** See the progress log at the end.
+Research base: frappe-ui `v1.0.0-beta.25` (2026-07-20, what we ship) vs `v1.0.0-beta.45` (2026-08-10, npm `beta`). 696 upstream commits. Reference upgrade: [frappe/gameplan#543](https://github.com/frappe/gameplan/pull/543) (beta.36 → beta.43).
+
+Sources: `docs/content/docs/migration.md` and `docs/content/docs/changelog.md` at `v1.0.0-beta.45` (the changelog moved out of `v1-release/changelog.md` in #1031), diffed against the same files at `v1.0.0-beta.25`. 76 new changelog entries in the delta.
+
+## Goal
+
+Move `frontend/package.json` from `frappe-ui@1.0.0-beta.25` to `1.0.0-beta.45`, absorb every break that touches wiki, and keep the public reader's vendored token CSS in sync.
+
+## Delta inventory
+
+Everything below is new since `beta.25`. **Hit** = wiki has call sites. **Loud** = build/import fails. **Silent** = renders wrong with no error.
+
+### A. Loud breaks that hit us
+
+| # | Change | Wiki call sites |
+|---|---|---|
+| A1 | `frappe-ui/list-style.css` and `frappe-ui/editor-style.css` exports removed — the `frappe-ui/list` and `frappe-ui/editor` barrels are side-effectful now and ship their own CSS | `frontend/src/index.css:7,9` — delete both `@import`s |
+| A2 | `Autocomplete` removed — split into `Combobox` (single) and `MultiSelect` (multiple) | `components/AssignDialog.vue` (uses `multiple` → `MultiSelect`). `components/SpaceList.vue` uses our *local* `components/Autocomplete.vue`, which is hand-rolled and unaffected |
+| A3 | `pageMetaPlugin` removed | `main.js:20,45` — delete the import and `app.use`. `usePageMeta` (already used in `pages/Spaces.vue`) is the replacement |
+| A4 | Node floor `>=20.19.0` via `engines` | local is v24.15.0 ✓; check CI images |
+
+### B. Silent breaks that hit us
+
+| # | Change | Wiki call sites |
+|---|---|---|
+| B1 | **Radius aliases removed.** `rounded`/`-sm`/`-md`/`-lg`/`-xl`/`-2xl` emit no CSS (preset replaces Tailwind's `borderRadius`). Map: `rounded→4`, `sm→1`, `md→5`, `lg→6`, `xl→7`, `2xl→8`. `rounded-none`/`-full` kept. `var(--radius-sm\|md\|lg\|xl\|2xl)` also dies | ~398 bare `rounded`, 114 `-lg`, 95 `-md`, 30 `-sm`, 13 `-xl`, 1 `-2xl`, plus directional `rounded-t/r/l/b/tl/tr`. Codemod handles most; bare `rounded` inside multi-line template literals is missed |
+| B2 | **Chromatic ink scales shift one level.** New `ink-red-1` is old `ink-red-2`, all 11 chromatic families, scales end at `-9`. `ink-gray` does **not** shift. Old `-1` was white → manual, usually `text-white` | ~130 `text-ink-{red,green,amber,blue,violet,orange}-N` sites; `-1` sites exist (`ink-violet-1`, `ink-red-1`, `ink-green-1`, `ink-blue-1`, `ink-amber-1`) and need manual fixes |
+| B3 | `Dropdown`/`ContextMenu`: `placement` prop ignored (falls back to `align="start"`); `{group, items}` → `{group, options}`; `component:` rows → `slots: { item }` | `components/MobileAppMenu.vue:2` (`placement="right"` → `align="end"`), `components/tiptap-extensions/CalloutBlockView.vue:335` (`placement="bottom-end"` → `align="end"`) |
+| B4 | `PageHeaderMobile` `#left`/`#right` → `#prefix`/`#suffix`; `PageHeaderMobileTitle` `#icon` → `#prefix` | `components/SpaceList.vue:7` (`#right`), `pages/SpaceDetails.vue:9` (`#left`), `:15` (`#icon`), `pages/Contributions.vue:5` (`#right`) |
+| B5 | **`Tabs` replaced by a composed family** `Tabs`/`TabList`/`TabTrigger`/`TabPanel`. Model is the trigger `value`, never an index. Layout defaults (`flex flex-1 overflow-hidden`, panel `overflow-auto`) are gone | `pages/Contributions.vue:30` — `v-model="activeTabIndex"` + `:tabs` + `#tab-panel`. Index model must become the tab key; check panel scrolling |
+| B6 | **`useFileUpload()` / `FileUploadHandler` default to private.** An upload with no stated `private`/`is_private` now uploads `is_private=1` | `components/PageSettings.vue:175`, `components/WikiEditor.vue:142`, `components/SpaceSettings/GeneralPanel.vue:123`. **Audit each** — editor images and space/page cover images are served to the public reader with no session; a flip to private returns 403 |
+| B7 | `Combobox`: `reset()` on a template ref → `clear()` | `components/SpaceSettings/PermissionsPanel.vue:263` |
+| B8 | `Sidebar` no longer wraps the middle list in a scroll container or applies padding (app-owned); `SidebarHeader` `#logo` → `#prefix` | `components/Sidebar.vue` already composes and owns its own padding/scroll — verify visually, likely no change |
+| B9 | `FrappeUI` plugin: `$resources` Options-API mixin no longer installs by default (`app.use(FrappeUI, { resources: true })`); `config`/`call`/`socketio` options removed | `main.js:44` installs `resourcesPlugin` directly, which still works. No component declares an Options-API `resources` block. Confirm with a grep before dropping |
+| B10 | `Tooltip`: `placement` → `side`, `arrowClass` → `offset`/`[data-slot="arrow"]`, `#body` → `#content` | No hits — `components/AssigneeAvatars.vue` uses `text` only ✓ |
+| B11 | Unused tokens removed: `text-tiny`, `text-13xl`–`text-16xl`, `shadow-status`, `--elevation-status`, `surface-alert-button-*`, `ink-alert-button-*`, `surface-alpha-gray-2-overlay` | No hits in `frontend/src` (only in built assets) ✓ |
+| B12 | `Select`: `displayValue` trigger slot prop → `selectedOption.label` | `components/SpaceSettings/PermissionsPanel.vue:44` — check the trigger slot |
+| B13 | Editor: media captions moved off `alt` to a `caption` attribute (`data-caption`); the editor no longer edits `alt` | Wiki ships its own `components/tiptap-extensions/image-extension.js` with caption support. Verify no collision with the frappe-ui editor's image handling |
+
+### C. Moved to subpaths (loud, no wiki hits)
+
+- `ListView` family → `frappe-ui/experimental`. **Our `frappe-ui/list` imports (`SpaceList.vue`, `ContributionsPanel.vue`) are the new List family and stay put.** ✓
+- `Calendar` family → `frappe-ui/experimental`.
+- Sprite `Icon`/`IconPicker`/`spritePlugin`: `frappe-ui/icons` → `frappe-ui/experimental`. Named SFC icons stay on `frappe-ui/icons`. Wiki's `components/IconPicker.vue` is our own ✓.
+- v0 `TextEditor` family removed from root, parked in `frappe-ui/experimental`. Wiki is already on `frappe-ui/editor` ✓.
+- `frappe-ui/frappe` and `frappe-ui/drive` subpaths deleted.
+- `code-editor` subpath folded into `experimental`.
+- `./hljs-theme.css` export removed — wiki owns its highlighter already ✓.
+
+### D. Removed components (no wiki hits)
+
+`Input`, `FeatherIcon`, `Card`, `ListItem`, standalone `<Toast>`, `MonthPicker`, `CircularProgressBar`, `GridLayout`, `NestedPopover`, `ListFilter`, `SearchComplete`. `FormControl type="autocomplete"` removed (silent — falls through to a text input).
+
+### E. Redesigns / renames worth knowing (no current hits)
+
+- **`Alert` redesigned for espresso 2.0**: stateless (no `v-model`, `v-if` + `@dismiss`), `theme="yellow"`→`"amber"`, default theme `gray`, `dismissible` defaults `false`, `variant` gone, `#icon`→`#prefix`, `#footer`→`primaryAction`/`secondaryAction`/`#actions`. Wiki registers `Alert` globally in `main.js` but has **zero `<Alert>` call sites** — drop it from the global registration.
+- `useTheme` → `useColorScheme` (`currentTheme`→`colorScheme`, read-only; `setTheme`→`setColorScheme`). Wiki's `composables/useTheme.js` is entirely local, no frappe-ui dependency ✓. beta.44/45 added a built-in transition mute across scheme swaps — potential future replacement for our `.no-transition` hack in `index.css`.
+- Nine scroll members → `shellScrollContainer` + `useShellScrolled`; `useIsMobile`/`useScreenSize` un-exported. Wiki's `composables/useMobile.js` is local ✓.
+- `PageHeaderBackButton`: `to` is now a fallback used only when there is no in-app history.
+- `Popover` v0 API removed (`#target`→`#trigger` with reka wiring, `placement`→`side`+`align`, `show`→`open`, `#body`→`#default`+`bare`). Wiki uses reka-ui `PopoverRoot` directly in `IconPicker.vue` ✓.
+- `TabButtons`: `type`→`variant`, `buttons`→`options`, `value` required per option, new `fluid`. Sliding indicator animation on both `Tabs` and `TabButtons`.
+- `CommandPalette`: `show`→`open`. `KeyboardShortcut`/`useShortcut` surface trimmed.
+- `DatePicker`/`TimePicker`/`DateRangePicker`: footer removed, `#actions` sidebar slot, `DateRangePicker` emit shape, deprecated aliases gone.
+- Data fetching v2 (`useCall`/`useDoc`/`useList`/`useNewDoc`): one request per submit, `submit()` rejects on failure, `data` no longer cleared on failure, `error` no longer cleared on start, `isLoading(id)` replaces `params`-sniffing, `useFrappeFetch` un-exported, `FrappeResponseError` exported, a throwing `beforeSubmit` now cancels the submit. **Wiki is entirely on `createResource`/`createListResource`/`createDocumentResource`, which are unchanged** ✓.
+- `frappeRequest` fixes: `onError` fired twice per failure; method names starting with `http` skipped the `/api/method/` prefix; `login` returned only `message` under `requestBaseUrl`.
+- `createListResource`: `hasPreviousPage` was stale after `reload()`.
+- `Dialog`: sibling-mount host dedup; the stack survives duplicate package copies (beta.43). May interact with our `dialog-overlay { animation: none }` workaround — retest the stuck-overlay class before keeping it.
+- `Button`: solid red label contrast raised.
+- Portal target: `usePortalTarget`/`providePortalTarget`/`portalTargetKey` for embedded hosts.
+- `SidebarCard` — new promotional card component.
+- `Charts` — new family at `frappe-ui/charts` with its own `--chart-*` tokens.
+
+### F. Build / tooling
+
+| Change | Action |
+|---|---|
+| `frappe-ui/tailwind` now exports `content` — the authoritative glob list | `frontend/tailwind.config.js` hand-maintains `src/components/**` + `src/molecules/**`, which **already drops classes the editor and list molecules emit**. Spread the export instead |
+| `frappe-ui/tailwind` `tokens.js` export removed | Not imported directly ✓, but `scripts/generate-public-theme.mjs` reads `frontend/node_modules/frappe-ui/tailwind` — verify it still resolves |
+| `wiki/public/css/frappe-ui-tokens.css` is generated from the installed frappe-ui | Regenerate via `yarn tailwind:build` after the bump. Header still says `beta.25`; the radius aliases it emits go away |
+| `@tiptap/markdown` | Gameplan hit this: beta.43+ pulls `@tiptap/markdown@3.28.0`, which demands an exact `3.28.0` core and breaks against existing pins. Wiki has `^3.26.0` on every tiptap package — pin `@tiptap/markdown` to `3.26.0` or move the whole tiptap set to 3.28.0 together |
+| `reka-ui ^2.10.1` resolution + prosemirror resolutions in `package.json` | Load-bearing today. Re-check whether beta.45 makes them redundant; do not drop them blind |
+
+## Codemods
+
+Two separate, **non-idempotent** runs. Both must land in the same commit as the version bump — the codemod without the upgrade renders wrong, and so does the upgrade without the codemod.
+
+```sh
+cd frontend
+npx --package frappe-ui@beta tokens-v2 --dry-run .          # radius renames
+npx --package frappe-ui@beta tokens-v2 .
+
+npx --package frappe-ui@beta tokens-v2 --ink-shift --dry-run .
+npx --package frappe-ui@beta tokens-v2 --ink-shift .
+```
+
+`--ink-shift` writes a `.tokens-v2-ink-shift` marker in each target directory and refuses to run again while it exists. **Commit the marker** — on a fresh clone without it the guard is gone and a re-run double-shifts. Run it on `frontend/` (and separately on any other real package root); do not let it walk into `node_modules`.
+
+Neither codemod touches `wiki/public/**` or `wiki/www/**` — the public reader's hand-written CSS and Jinja templates need a manual radius/ink sweep.
+
+## Phases
+
+Tracer-bullet order: get the build green first, then fix silent breaks by blast radius, then verify.
+
+**Phase 0 — Branch and baseline.** `git fetch upstream develop`, branch `feat/frappe-ui-beta45` off `upstream/develop`. Commit this spec first. Record a `yarn build` baseline and screenshots of the sidebar, editor, settings dialog, contributions tabs, and public reader.
+
+**Phase 1 — Bump and make the build compile.** Bump to `1.0.0-beta.45`, pin `@tiptap/markdown` as needed, delete the two CSS `@import`s (A1), delete `pageMetaPlugin` (A3), drop `Alert` from the global component registration (E), spread the preset's `content` in `tailwind.config.js` (F). Build must pass. Confirm editor and list CSS still land in the output (grep the built CSS for ProseMirror and list rules, as gameplan did).
+
+**Phase 2 — Tokens.** Run both codemods on `frontend/`, commit the marker, grep for leftovers:
+```sh
+grep -rnE "rounded(-(sm|md|lg|xl|2xl))?\b" frontend/src        # bare rounded in template literals
+grep -rn -- "--radius-\(sm\|md\|lg\|xl\|2xl\)" frontend/src wiki/public wiki/www
+grep -rnE "ink-(red|green|amber|blue|violet|orange|teal|pink|purple|cyan|yellow)-1\b" frontend/src
+```
+Manual radius/ink sweep of `wiki/public/css/*.css` and `wiki/www/**`. Regenerate `frappe-ui-tokens.css`. Visual diff against the Phase 0 screenshots — B1 and B2 are the only changes in this phase, and both are pure-visual.
+
+**Phase 3 — Component API breaks.** One commit per item, ordered by blast radius:
+1. B6 `useFileUpload` privacy audit — pass `private: false` explicitly wherever the file is served to the public reader. **Do this before anything cosmetic; it is the one break that can silently 403 published content.**
+2. A2 `Autocomplete` → `MultiSelect` in `AssignDialog.vue` (v-model payload inverts to a value array).
+3. B5 `Tabs` composed family in `pages/Contributions.vue` (index model → key model, restore the layout defaults the panel relied on).
+4. B3 `Dropdown` `placement` → `align` (2 sites).
+5. B4 `PageHeaderMobile` slot renames (4 sites).
+6. B7 `Combobox.reset()` → `clear()`, B12 `Select` trigger slot.
+7. B8/B13 verification passes.
+
+**Phase 4 — Verify.** `yarn build`, `yarn test`, Playwright e2e with `BASE_URL=http://wiki.localhost:8000`. Manual pass on: sidebar collapse, editor (image upload, captions, toolbar, bubble menu), settings dialogs, contributions tabs, mobile shell headers, public reader in both themes. Re-test the stuck-dialog-overlay class (memory: `project_sidebar_spec_flake`) to see whether beta.43's dialog-host fixes let us drop the `animation: none` override.
+
+**Phase 5 — PR.** Against `frappe/wiki` `develop`. Sanity-check `git diff --stat upstream/develop..feat/frappe-ui-beta45` is only our files.
+
+## Decisions (2026-08-11)
+
+1. **Go to `beta.45` now**, not wait for `1.0.0` final. The delta only grows, and gameplan is already past beta.43.
+2. **Bump the whole tiptap set**, do not pin `@tiptap/markdown` back. `@tiptap/markdown` declares *exact* peers on `@tiptap/core` and `@tiptap/pm` at its own version, so the set has to move together. Target `^3.29.2` (latest). frappe-ui `beta.45` declares `^3.26.0` on every tiptap package, so 3.29.2 satisfies it; add `resolutions` for `@tiptap/core` and `@tiptap/pm` if yarn ends up with two copies.
+
+## Open question
+
+- Does `--ink-shift` need to run over `wiki/public` and `wiki/www` too, or is a manual sweep safer given the marker's one-shot semantics?
+  **Resolved during Phase 2:** a manual sweep. Only six hand-written `var(--ink-<family>-N)` reads live there, beside generated files (`frappe-ui-tokens.css`, `tailwind.css`, `frappe-ui-prose.css`) that the codemod would rewrite for nothing — and whose token *definitions* it would corrupt until the next `yarn tailwind:build`.
+
+## Progress log
+
+### Phase 0 — branch and spec (`8294d84`)
+
+Branched `feat/frappe-ui-beta45` off `upstream/develop` (`66eb80d`). Spec committed first.
+
+### Phase 1 — bump and compile (`f177792`)
+
+Green `yarn build`. Corrections to the plan as written:
+
+- **The tiptap resolutions are wider than expected.** Bumping our ten direct tiptap deps to `^3.29.2` left frappe-ui's transitive `@tiptap/extension-*` packages resolving to `3.27.1` from the existing lockfile, and each of those declares an *exact* `@tiptap/core` peer — 19 nested copies of core. yarn v1 ignores a `"@tiptap/**"` glob resolution (it warns and moves on), so all 43 tiptap packages in the lockfile are pinned explicitly. One core after that.
+- **A2 (`Autocomplete` → `MultiSelect`) moved from Phase 3 into Phase 1** — it is a loud break, so the build could not go green without it.
+- `lowlight` emits an unmet-peer warning under `@tiptap/extension-code-block-lowlight`. It is hoisted and present at 3.3.0; the warning is resolution ordering, not a missing dependency.
+- Verified after dropping the two CSS imports: the built output carries 119 ProseMirror rules and 36 list-slot rules, so the side-effectful barrels do ship their stylesheets.
+
+### Phase 2 — tokens (`1584482`, `765f74e`)
+
+- **Radius used `--radius-only`, not the plain codemod.** The plain run also does the color and typography passes, and neither is idempotent — both already ran during the beta.25 upgrade. 113 renames over 29 files (80 in the SPA, 33 in the reader's Jinja templates). Three `var(--radius-sm|lg)` reads hand-migrated; the codemod only rewrites classes. Four `rounded` hits survive the sweep, all of them the English word inside comments.
+- **Ink shift: 33 renames over 11 files**, plus the six hand-migrated `var(--ink-*)` reads in `wiki/public/css`. Markers committed at `frontend/src/.tokens-v2-ink-shift` and `wiki/templates/.tokens-v2-ink-shift`.
+- Regenerated `frappe-ui-tokens.css` confirms the shape: chromatic scales now end at `-9`, the `--radius-sm|md|lg|xl|2xl` aliases are gone, `ink-gray` still has its own 9 steps.
+- **Pre-existing drift found, not fixed here:** the reader's callout icon colors (`main.css`) and the SPA's (`wiki-rendered.css`) were already three steps apart before this upgrade — `--ink-blue-3` vs `--ink-blue-6`. Both shifted by one, so the gap is preserved rather than introduced. Worth a follow-up.
+
+### Phase 3 — component APIs (`217c840`)
+
+Migrated: Tabs (composed family, value model), Dropdown `placement`→`align` (2 sites), `PageHeaderMobile` slot renames (3 sites), `Combobox.reset()`→`clear()`.
+
+Audited and found already correct — **no change needed**:
+
+- **B6, the privacy flip.** All three `useFileUpload().upload()` calls already pass `private: false` explicitly, and `isPrivateUpload()` honours it ahead of the new default. `upload_endpoint` is still snake_case in `UploadOptions` — the flat-prop change was `<FileUploader>`'s, not the composable's.
+- **B12** — `Select` is used without a trigger slot.
+- **B8** — `SidebarHeader`'s `logo`/`title`/`subtitle`/`menuItems` props and `SidebarItem`'s `active` are all as we call them, and `components/Sidebar.vue` already owns its padding and scroll container.
+- **B13** — the editor's caption change cannot reach us: `WikiImage` and `wikiStarterKit` are wiki's own extensions, and captions round-trip through our own markdown tokenizer.
+
+### Phase 4 — verification
+
+- `yarn build` green; public reader CSS regenerated.
+- Unit tests: 47/47 pass. These are `node:test`, not vitest — run them with `node --test "src/**/*.test.js"` from `frontend/`. `npx vitest run` reports "No test suite found" for all nine files, which is a wrong runner rather than a failure. Neither runner is wired into CI; CI runs the Python suite and Playwright.
+- **One genuine e2e break from the token migration** (`2138bd8`): `change-request-flow.spec.ts` located a change card by `div.border.border-outline-gray-2.rounded-lg.overflow-hidden`. The codemod renamed the source class to `rounded-6`, so the locator matched nothing. It was the only token-class locator in the suite — a sweep for `rounded-(sm|md|lg|xl|2xl)` and `ink-<chromatic>-N` across `e2e/` found no others. Worth remembering: **the codemods do not touch e2e selectors, and a stale one fails as a timeout, not as a mismatch.**
+- **Everything else that failed also fails on `upstream/develop`.** Local Playwright is not clean on this machine. Measured directly rather than assumed: `callout-rich-text.spec.ts` + `local-first-store.spec.ts` in isolation give **7 failed / 9 passed on the upgrade branch and 7 failed / 9 passed on `upstream/develop`** (beta.25, tiptap 3.27.1). Five of the seven are the same tests on both sides; the two that differ go in *both* directions, which is the signature of flake rather than a regression. The callout markdown round-trip — the failure that most looked like a tiptap 3.26→3.29.2 regression — fails identically without the upgrade.
+- The `local-first-store` cluster ("Wait for pending changes to sync", "Reload latest before submitting") is client-side draft-sync state, not a stuck queue: the bench worker is up and all three RQ queues measured empty during the run. It cascades — one conflicted draft poisons later tests in the same sequential run, which is why the full-suite failure count climbs faster than the isolated one.
+
+**Not verified here:** a clean full-suite Playwright pass. That needs CI, or a local site reset. The targeted run over the changed surfaces (tabs, sidebar, mobile headers, permissions combobox, space list, public reader, settings) is what this branch stands on locally.
diff --git a/specs/ia_refactor/01-sidebar-spaces.md b/specs/ia_refactor/01-sidebar-spaces.md
new file mode 100644
index 000000000..c241e6894
--- /dev/null
+++ b/specs/ia_refactor/01-sidebar-spaces.md
@@ -0,0 +1,377 @@
+# Spaces in the Sidebar (drill-in navigation)
+
+Date: 2026-09-01
+Status: **Done.** All seven phases built.
+Prototype: `wiki-proto` — `LibrarySidebar.vue`, `SpaceSidebar.vue`, `App.vue`.
+
+## Problem
+
+Navigation is split across three surfaces that don't compose: a global static
+sidebar (two links), a full `/spaces` list page, and a second resizable tree
+column inside SpaceDetails with its own header. Getting from "which spaces
+exist" to "this page in this space" crosses all three, and the tree column
+steals width from the editor.
+
+## Goal
+
+One navigation column that drills. Level 0 (**library**): spaces listed in the
+sidebar itself, with identity tiles and per-state suffix icons, plus Overview /
+Search / Change Requests items. Level 1 (**space**): the sidebar becomes the
+space — back button, identity, mode strip, tree search, document tree, New
+page. Content keeps full width.
+
+## Decisions
+
+| # | Decision | Choice |
+|---|----------|--------|
+| 1 | Sidebar component | Keep frappe-ui `Sidebar`/`SidebarHeader`/`SidebarItem`/`SidebarSection` as in the prototype. Fixed 260px at level 1; the resizable-width composable (`useSidebarResize`) retires with the tree column. **No collapse toggle** (settled 2026-09-02, matching the prototype) — there is only one nav column now, so collapsing it leaves nothing to navigate with. |
+| 2 | Space ordering | `switcher_order` (existing field), pinned spaces float to top in pin order. |
+| 3 | Pinning | Per-user, stored in `localStorage` first (`wiki:pinned-spaces`). No backend field until someone asks for cross-device pins. Context-menu on the space row: Pin/Unpin, Space settings, Copy link. One shared `ContextMenu` for the whole list (prototype pattern — rows write the options on `@contextmenu`). |
+| 4 | Suffix state icons | Independent icons, not one merged badge: `lucide-pin` (pinned), `lucide-folder-git-2` (git-synced), `lucide-lock` (has roles ⇒ restricted), `lucide-eye-off` (unpublished). Each with a Tooltip. |
+| 5 | Identity tile | Until spec 3 lands: frappe-ui `Avatar` (square, `app_switcher_logo` image, initial fallback). Spec 3 swaps in the SpaceAvatar component. |
+| 6 | `/spaces` list page | **Retires** (confirmed 2026-09-01). `/spaces` redirects to `/`. The list page's residual jobs move: create-space (incl. the GitHub repo flow) becomes a dialog opened from the sidebar's "New space" footer button; search/filter over spaces is served by the **Overview** page (reversed 2026-09-01 — the sidebar shipped a search box in phase 3 and it was removed again; the sidebar is a nav column, not a finder). The sidebar lists at most 15 spaces and, when there are more, ends the section with a `Show all spaces` row pointing at the Overview. |
+| 6b | Unpublished spaces in the sidebar | A Wiki Manager sees them (marked with the eye-off icon) — they are that manager's own drafts, in the column they work in. Everyone else gets `is_published = 1`. The Overview is unfiltered either way, so nothing becomes unreachable. |
+| 7 | Landing route `/` | Until spec 4 (Overview) ships: a minimal placeholder page ("pick a space") that also hosts the empty-wiki state and the New Space entry. The sidebar item "Overview" points at it from day one so the route name (`Overview`) never changes. |
+| 8 | SpaceDetails layout | The `<aside>` tree column, `SpaceTreePanel` header, `SpaceChromeBar` and `ContributionBanner` placement all fold into `SpaceSidebar`. SpaceDetails keeps: the space document resource, router-view, settings dialogs. |
+| 8b | Tabs removed | The horizontal tab feature goes away entirely (decided 2026-09-01). Tab-flagged groups render as ordinary top-level groups in the sidebar tree. App side: `WikiTabBar.vue`, `useSpaceTabs.js`, `lib/spaceTabs.js`, the tab bar row in SpaceDetails, "New Tab" tree actions, and the tab fields in space settings all go. Reader side: `templates/wiki/includes/tabs.html` and the tab logic in `mobile_header.html` / `sidebar.html` (both DOM twins). Backend: `is_tab`/`tab_icon` stay **in the schema** (Desk-hidden, ignored) so old CRs/revisions still apply — the ~40 `Wiki Document` field whitelists keep carrying them; actual field removal is a later cleanup with a migration. `enable_tabs`/`home_tab_title`/`home_tab_icon` on Wiki Space likewise hidden, not dropped. `lib/tabIcons.js` **stays** — it is the IconPicker's curated lucide safelist. |
+| 9 | Mode strip | Directly under the space header, mutually exclusive: **git-synced** strip (`repo@branch`, sync status badge, Sync now, "Read-only · last synced …") or **open-draft** strip (CR title, pages-changed count, Submit / Discard, tinted by CR status). The full-width `SpaceChromeBar`/`ContributionBanner` retire; their actions (merge, withdraw, view live, settings) live in the strip and the space actions dropdown. |
+| 10 | Tree search | TextInput above the tree filters in place; matching pages render as a **flat result list** (prototype pattern), not a pruned tree. Reuse `useTreeSearch` (already fuzzy). |
+| 11 | Space header actions | Dropdown: Space settings, View live site, Switch space (→ `/`), Sync now (git only). Back button labeled "Overview". |
+| 12 | Change Requests item | Suffix count = open CRs (status ≠ Merged/Rejected), from a lightweight count API. |
+| 13 | Search sidebar item | Level 0 "Search" opens the existing search affordance if one exists; otherwise ships disabled-hidden until global search exists. Not this spec's job to build search. |
+| 14 | Mobile | Library = existing `Spaces` mobile nav tab; space sidebar = existing `MobileDrawer` tree, which absorbs the mode strip. No new mobile chrome. |
+
+## Current state (what exists)
+
+- `layouts/MainLayout.vue` — Desktop/Mobile shells, access gate, theme,
+  WikiSettings host. **Keeps all of that**; only the `#sidebar` slot content
+  changes.
+- `components/Sidebar.vue` — static two-item nav. Replaced by a router-driven
+  switch: `SpaceSidebar` when `route.params.spaceId`, else `LibrarySidebar`
+  (prototype `App.vue` pattern, `:key="spaceId"`).
+- `components/SpaceList.vue` (911 lines) — list page + New Space dialog with
+  the GitHub connect flow (installations, repos, branches). The dialog logic is
+  the valuable part: extract to `components/NewSpaceDialog.vue` before deleting
+  the page.
+- `pages/SpaceDetails.vue` (966 lines) — owns chrome bar/banner, tab bar, tree
+  aside, resize, mobile drawer, settings + clone + routes dialogs. Slims down
+  to: resource + router-view + dialogs.
+- Tab plumbing (to remove): `WikiTabBar.vue`, `useSpaceTabs.js`,
+  `lib/spaceTabs.js`, tab branches in `WikiTree.vue`, `useTreeDialogs.js`
+  (`DEFAULT_TAB_ICON` new-tab flow), `SpaceSettings/GeneralPanel.vue`,
+  `stores/draftWorkspace*` and `stores/changeRequest.js` tab handling; reader
+  `tabs.html`/`mobile_header.html`/`sidebar.html`; `is_tab` references in
+  `wiki/api/wiki_space.py`, `wiki/wiki/llms_txt.py`, `wiki/wiki/git_sync.py`.
+- `stores/changeRequest.js`, `stores/draftWorkspace.js` — CR mode and draft
+  state the mode strip needs; already global stores.
+
+## Phases
+
+Tracer bullet first: get the drill-in switch rendering with the real space
+list and the real tree before any state icons, pinning, or strip polish.
+
+1. **Drill-in skeleton.** ✅ `LibrarySidebar.vue` (spaces via `useList` on Wiki
+   Space: name, space_name, route, app_switcher_logo, is_published, git_synced,
+   switcher_order + a roles-count annotation), `SpaceSidebar.vue` hosting the
+   existing `WikiDocumentList` unchanged. MainLayout switches on route.
+   SpaceDetails drops the aside. `/spaces` redirects; placeholder Overview
+   page. **App must be fully usable at the end of this phase.**
+2. **Mode strips + header actions.** ✅ Port ContributionBanner's submit /
+   withdraw / merge and SpaceChromeBar's sync into the strip + dropdown;
+   delete both components.
+3. **Library affordances.** ✅ Suffix icons, pinning (localStorage + context
+   menu), CR count suffix, New space footer button + extracted
+   `NewSpaceDialog.vue`; delete `SpaceList.vue` and `pages/Spaces.vue`.
+4. **Tree search-in-sidebar** ✅ (flat result list) + mobile reconciliation.
+5. **Tab removal, app side.** ✅ Delete the tab bar row, `WikiTabBar.vue`,
+   `useSpaceTabs.js`, `lib/spaceTabs.js`; tab groups now render as plain
+   top-level groups; "New Tab" action and settings toggles removed. Whole
+   tree always visible.
+6. **Tab removal, reader + backend.** ✅ `tabs.html` retired;
+   `mobile_header.html` and `sidebar.html` updated **together** (DOM twins);
+   `is_tab` special-casing dropped from `wiki_document.py`, `wiki_space.py`
+   API, `llms_txt.py`, `git_sync.py`. Doctype fields hidden, not dropped (see
+   decision 8b).
+7. **Cleanup.** ✅ Both named items landed early (`useSidebarResize` in phase
+   1, the `/spaces` specs in phase 3), so this phase collects what the earlier
+   ones deferred: the orphaned `WikiBreadcrumbs.vue`, the unreachable `isTab`
+   create path, the two dead space-list endpoints, and the drill-in regression
+   test the spec asked for and no phase wrote.
+
+## Regression tests
+
+- e2e: drill-in navigation (library → space → page → back), mode strip renders
+  per space kind (plain / git / open-draft), submit-for-review from the strip.
+- e2e: create space from sidebar dialog (plain; GitHub flow behind existing
+  fixture if present).
+- e2e: a space whose groups carry `is_tab` renders them as plain top-level
+  groups in both app sidebar and published reader (tab removal regression).
+- Unit: pin ordering (pin order beats switcher order, unpin restores).
+- Local runs need `BASE_URL=http://wiki.localhost:8000`; long runs against the
+  saturated local site should baseline against `upstream/develop`.
+
+## Landmines
+
+- **1847 spaces locally** — the library list must not fetch unbounded page
+  size with avatars; paginate or cap + search.
+- The reader (Jinja + `sidebar.html`) is off-limits **except** phase 6's tab
+  removal — and there the TOC/nav markup is duplicated in Jinja AND the
+  nav-store JS in `sidebar.html`; edit both or SPA nav shows stale UI.
+- Tab fields ride the `Wiki Document` CR/revision whitelists (~40 explicit
+  enumerations). Leaving the fields in place (decision 8b) means **no
+  whitelist edits** — do not "clean them up" in this spec; that's the later
+  schema-removal migration's job.
+- Spaces with a merged CR history that reordered/flagged tabs must still
+  render: treat `is_tab` as cosmetic-only everywhere, never as filter.
+- `reka [hidden]` vs display utilities: any `hidden` gated by breakpoint on
+  sidebar items needs `!hidden` or `data-[state]` gating (see memory).
+- e2e helpers hardcode `APP_BASE`/routes (`e2e/helpers/routes.ts`) — the
+  `/spaces` redirect must keep old deep links working.
+
+## Open questions
+
+- Does "Switch space" in the header dropdown earn its place vs just the back
+  button? (Prototype has both.)
+
+## Progress log
+
+- 2026-09-07 — **Phase 7 done. The spec is complete.** Cleanup swept what
+  phases 1–6 left behind rather than what the phase list named — both named
+  items had already landed. `WikiBreadcrumbs.vue` (orphaned by phase 1's
+  header, zero importers) is deleted; `createNode`'s `isTab` / `tabIcon`
+  arguments are gone from `draftWorkspace.js` and `changeRequest.js`, since
+  nothing has created a tab since phase 5; `get_space_count` and
+  `get_space_stats` are deleted with their tests. The CR round trip is
+  untouched — `treeModel.js` still normalizes and denormalizes both flags, so a
+  year-old change request still merges. New `e2e/tests/sidebar-drill-in.spec.ts`
+  covers the spec's first regression line. Reconciliation below.
+
+- 2026-09-05 — **Phase 6 done. The reader has no tabs either.** The chrome is
+  one row again: `tabs.html` is deleted, `layout.html` stops including it and
+  stops stamping `data-wiki-tabs`, the navbar carries the bottom rule
+  unconditionally, and `--wiki-chrome-h` loses its 97px branch. Both DOM twins
+  render `nested_tree` whole. Backend: `get_space_tabs` and the synthetic Home
+  tab are gone, the flags leave both tree builders and the page context,
+  `llms.txt` is one section per space again, git-sync stops carrying the flags
+  across a rebuild, and the five tab fields are hidden on their doctypes rather
+  than dropped. `is_tab` / `tab_icon` still ride the CR and revision
+  whitelists untouched — a merge of a year-old CR still applies. Verified in
+  the browser on `erpnext-docs`, a real `enable_tabs` space: desktop and mobile
+  both show one tree with all five top-level groups. Reconciliation below.
+
+- 2026-09-02 — **Collapse toggle dropped.** `SidebarCollapseToggle` and the
+  `is-sidebar-collapsed` storage key are gone; the footer strip now renders
+  only for a Wiki Manager, so a reader gets no empty bordered rule under the
+  list. Closes the open question.
+- 2026-09-02 — **The sidebar stops being a directory.** It lists at most 15
+  spaces and, only when there are more, ends with a `Show all spaces` row
+  pointing at the Overview — the `Load more` footer is gone. It also drops
+  unpublished spaces for everyone but a Wiki Manager (`useSpaceLibrary` takes
+  `limit` and `publishedOnly`; the Overview passes neither and stays the full,
+  unfiltered directory). Local dev data cleaned out at the same time: 1918 e2e
+  fixture spaces deleted, leaving the 14 with real content, which is the shape
+  a real wiki has.
+- 2026-09-01 — **Phase 5 done.** The app has no tab bar: `WikiTabBar.vue`,
+  `WikiTab.vue`, `useSpaceTabs.js` and `lib/spaceTabs.js` are deleted, the
+  space store no longer derives tabs or a narrowed `visibleTreeData`, and the
+  tree renders every top-level group at once. "New Tab", "Convert to tab",
+  "Tab settings" and the Tabbed Navigation switch are gone with them. `is_tab`
+  and `tab_icon` still ride the draft/CR model untouched — the reader keeps
+  rendering tabs until phase 6.
+
+- 2026-09-01 — **Library search removed from the sidebar.** The space filter
+  box added in phase 3 is gone; `useSpaceLibrary` keeps `searchQuery` /
+  `showSearch` for the Overview page, which is now the only place that
+  searches spaces. The sidebar still pages 50 at a time behind `Load more`.
+  (Superseded the next day — see below.)
+- 2026-09-01 — Spec written from `wiki-proto`.
+- 2026-09-01 — Decisions locked: tabs removed, /spaces retired, duckdb+pandas approved, avatar auto-roll on create.
+- 2026-09-01 — **Phase 4 done.** Searching the tree now swaps it for a
+  ranked flat list instead of pruning it in place, and the search box and a
+  New page button moved out of the scroller into the panel's own header and
+  footer — the mobile drawer renders the same panel, so it picks both up.
+  Reconciliations below.
+
+- 2026-09-01 — **Phase 3 done.** The library rows carry their four state
+  icons, a shared `ContextMenu` (pin / space settings / copy link), a
+  server-side search and a New Space footer button; `NewSpaceDialog.vue` is
+  extracted and `SpaceList.vue` (911 lines) is deleted. Pins live in
+  `composables/usePinnedSpaces.js` (localStorage, unit-tested); the paged list,
+  search and pin order live in `composables/useSpaceLibrary.js`, shared by the
+  sidebar and the Overview page. Reconciliations below.
+
+- 2026-09-01 — **Layout fix on top of phase 2.** The app frame now clips
+  (`overflow-hidden` on the MainLayout root) and the open page owns the only
+  scroller in the content column, a frappe-ui `ScrollArea`. Before this the
+  document itself scrolled — frappe-ui `Tree`'s absolutely-positioned aria-live
+  region resolved against the page and added 196px — so the whole chrome slid
+  with the editor, and SpaceDetails wrapped the page in a second scroller. The
+  bubble menu now takes that ScrollArea as its `scrollTarget`, so it tracks the
+  editor's scroll and hides with the selection instead of parking mid-page
+  looking like a second toolbar; the outline rail sizes to the container rather
+  than `100vh`.
+- 2026-09-01 — **Phase 2 done.** `SpaceModeStrip.vue` renders both strips
+  under the sidebar header; `SpaceChromeBar.vue` and `ContributionBanner.vue`
+  deleted; submit / discard / merge extracted to
+  `composables/useChangeRequestActions.js`. Reconciliations below.
+- 2026-09-01 — **Phase 1 done.** `LibrarySidebar.vue` + `SpaceSidebar.vue`,
+  MainLayout switches on `route.params.spaceId`, SpaceDetails lost its `<aside>`,
+  `/spaces` redirects to the new `Overview` route. Reconciliations below.
+
+### Phase 7 reconciliation
+
+| # | Spec said | Build does | Why |
+|---|-----------|-----------|-----|
+| 1 | Phase 7 — `useSidebarResize` retires | Already deleted in phase 1 | Its only consumer was the `<aside>` phase 1 removed; leaving a dead composable in the tree for six phases was the worse option. |
+| 2 | Phase 7 — e2e specs that navigated via `/spaces` updated | Already done in phases 3–5 | Each phase rewrote the specs it broke in the same commit, which is the only way the suite stays green phase to phase. Nothing was left for this one. |
+| 3 | Phase 3 item 8 — `get_space_stats` / `get_space_count` left for spec 4 | **Deleted**, with their two test classes | The assumption did not survive reading spec 4: its API surface is a new `wiki.api.analytics` module (`get_overview`, `get_top_searches`, `get_needs_attention`), not per-space list columns. Both endpoints backed the retired list page's row stats and result tally, and `get_space_count`'s search/published filters exist only to match that page's filter bar. Keeping whitelisted endpoints alive for a consumer that will not call them is public surface with no owner. |
+| 4 | Phase 5 item 5 — `createNode`'s `isTab` argument "unreachable but harmless; phase 6 decides" | Removed from the create path in both stores | Phase 6 did not decide it, so it lands here. No caller passes it, the tab-creation UI is gone, and a new node is never a tab — the parameter only invited a future reader to think tabs were still creatable. The backend `create_cr_item(is_tab=False)` default covers the wire. |
+| 5 | Decision 8b — the flags survive the CR round trip | `treeModel.js` normalize/denormalize untouched; `applyServerFields`'s two branches removed | Serialization is the round trip and stays. `applyServerFields` is the *update* path, and no component has sent `is_tab` or `tab_icon` in an update since phase 5 — those two lines guarded a field nothing writes. No `Wiki Document` whitelist was touched, per the landmine. |
+| 6 | — | `WikiBreadcrumbs.vue` deleted | Orphaned by phase 1, when the sidebar header took over identity. It was the only frontend caller of the whitelisted `get_breadcrumbs`, which now has none — flagged rather than removed, because `specs/cleanup/003` already owns that endpoint's authorization gap. |
+| 7 | Regression tests — e2e drill-in navigation | `e2e/tests/sidebar-drill-in.spec.ts`, new | The one line of the spec's own regression list no phase had written. Mode strip and create-space are covered incidentally (`change-request-flow` drives Submit/Merge from the strip, `git-sync-readonly` covers git mode, and eight specs open the sidebar's New Space dialog), so this adds only the missing one. |
+| 8 | — | The spec is built with two spaces, not one | The load-bearing assertion is negative: inside space A, space B's row is gone. One space would pass even if the library list were appended to rather than replaced. Both space rows and the back button are scoped to `[data-slot="sidebar"]` — the Overview page in the content column lists the same spaces, so an unscoped `href` locator matches twice and asserts nothing about which column owns the row. This was a real failure on the first run, not a precaution. |
+
+### Phase 6 reconciliation
+
+| # | Spec said | Build does | Why |
+|---|-----------|-----------|-----|
+| 1 | Retire `tabs.html`, update the two DOM twins | `layout.html`, `header.html` and `main.css` change too | The tab row was a full-width chrome row, so removing it is a layout change, not just a delete: the include and the `data-wiki-tabs` body attribute go, the navbar's bottom rule stops being conditional (it now always ends the chrome), and `--wiki-chrome-h` drops the 97px branch. |
+| 2 | `is_tab` special-casing dropped from `wiki_space.py` API, `llms_txt.py`, `git_sync.py` | `wiki_document.py` too | That is where the tab API actually lived: `get_space_tabs`, `_home_tab_entry`, `_tab_landing_route`, `WIKI_HOME_TAB_KEY` and the `space_tabs` render-context key are all gone, and `build_nested_wiki_tree` stops selecting the flags. |
+| 3 | — | `WikiDocument.validate_tab` deleted, and `is_top_level_group` with it | A validator that throws is not a cosmetic-only field: it would have rejected an old revision that carries the flag on a nested group. Removing the reorder guard left `is_top_level_group` with no callers. |
+| 4 | — | `_build_wiki_tree_for_api` drops the flags | The app tree has no use for them since phase 5; leaving them in the payload only invited a new reader of a dead field. |
+| 5 | Doctype fields hidden, not dropped | Hidden, `depends_on` removed, descriptions rewritten to say deprecated | A `depends_on` on a hidden field is dead weight, and the old descriptions still described a feature that no longer exists. Both doctype JSONs keep frappe's own formatting (tabs for `Wiki Document`, one-space for `Wiki Space`, no trailing newline on the latter). |
+| 6 | — | The clone path in `wiki/wiki/doctype/wiki_space/wiki_space.py` still copies the flags | A clone mirrors its source's stored data, and the fields are still in the schema. Nothing reads them, so this is fidelity, not a live feature. |
+| 7 | — | The mobile drawer's `filterTree` is simplified | It walked `root.children` and skipped `display:none` subtrees — machinery that existed only because tabs hid subtrees in the DOM. With one tree it is a flat `querySelectorAll`. |
+| 8 | Phase 7 — e2e specs asserting the tab bar get updated | `tab-navigation.spec.ts` → `stale-tab-flags.spec.ts` | The reader tests it carried drove a bar that no longer exists. The suite is rebuilt around the spec's own regression: one space carrying `enable_tabs` + `is_tab` + `tab_icon` renders as one plain tree in the reader (desktop and mobile drawer) and in the app, with no `tablist` anywhere and the navbar sitting directly above the tree. |
+| 9 | — | `TestTabValidation` + `TestGetSpaceTabs` (20 tests) replaced by `TestStaleTabFlags` (3) | Those tested a feature, not a regression. What is worth holding is that a flagged group saves anywhere, reorders anywhere, and never reaches the public tree. The `llms.txt` fixture now carries a stale `is_tab` flag and asserts a single section, which is the same guarantee on the index. |
+
+### Phase 5 reconciliation
+
+| # | Spec said | Build does | Why |
+|---|-----------|-----------|-----|
+| 1 | Delete the bar, `useSpaceTabs.js`, `lib/spaceTabs.js` | `WikiTab.vue` deleted too | It was the bar's row component and had no other consumer. |
+| 2 | — | `spaceRootNode` retires from the tree prop chain | Its only job was parenting a new tab away from the browsed subtree. With no subtree narrowing, `rootNode` *is* the space root, so `useTreeDialogs` takes that instead and three components drop a prop. |
+| 3 | — | `WikiTree`'s `is_tab` drag guard and `isTopLevel` go | The guard existed to keep a tab top-level. Nothing is top-level-only any more, and `isTopLevel` had no other caller. |
+| 4 | — | `SpaceIcon` no longer renders in the tree | Its one use was the tab row's icon; groups get the folder icon like any other group. The component and `lib/tabIcons.js` stay for IconPicker (and spec 3's identity picker). |
+| 5 | Decision 8b — fields stay | `draftWorkspace`, `treeModel` and `changeRequest` untouched | They only carry `is_tab`/`tab_icon` through the CR round trip. Stripping them would drop the flag on a merge while the reader still reads it. `createNode`'s `isTab` argument is now unreachable but harmless; phase 6 decides its fate. |
+| 6 | Phase 7 — e2e specs that asserted the tab bar get updated | `tab-navigation.spec.ts` rewritten now | Four editor-side tests drove a bar that no longer exists. They are replaced by one app-side regression test (an `enable_tabs` space renders its `is_tab` groups as plain top-level rows, no `tablist`), which is the spec's own tab-removal regression. The reader tests stay — the reader still has tabs until phase 6. |
+
+Verified in the browser at 1440×900 on a real `enable_tabs` space: five
+top-level groups in one tree, no tab bar, the add menu offers only New Group /
+External Link, and Space settings → General has no Tabbed Navigation row.
+
+### Phase 4 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Decision 10 — reuse `useTreeSearch` (already fuzzy) | Reused, but its prune/keep/expand core is replaced by a rank-ordered `matches` list | Pruning was what forced the tree to fake its expand state; with a flat list `WikiTree`'s `expandedOverride` prop has no job and retires with it. The thresholds, highlight segments and their tests are untouched. |
+| 2 | Prototype filters the result list to pages | Groups and external links stay results | Dropping groups would leave no way to find one by name. A group has nothing to open in place, so picking one clears the query and expands it back in the tree. |
+| 3 | Prototype puts the search box in `SpaceSidebar` | It lives in `WikiDocumentList`, above that component's own scroller | The mobile drawer renders the same panel (decision 14), so a sidebar-level search box would have needed a second copy and a lifted query. One owner covers both surfaces, and phase 4's mobile reconciliation is then free. |
+| 4 | Prototype footer is a single `New page` button | `New page` plus a chevron dropdown for Group / External Link / Tab | The tree still needs those three entry points until phase 5 drops the tab one. The old `Add` plus-dropdown and the empty state's `Create First Page` CTA both retire into this footer, which renders whether or not the space has pages. |
+| 5 | — | While searching, every result row shows its route, not just route-only matches | A flat row has no ancestors to place it, so the route is the only thing left saying where the page lives. |
+| 6 | Phase 7 — e2e specs get updated | `tree-search.spec.ts` rewritten for flat results now; `clickSidebarAddOption` / `openNewPageDialog` rewritten around the footer button | Both helpers hung off affordances this phase removed, so ~8 specs would have failed on the old locators. `git-sync-readonly` asserts on the absent `New page` button instead of `button[title="Add"]`. |
+
+Verified in the browser at 1440×900 and 390×844: the search box and New page
+footer hold their positions while the tree scrolls between them, a query
+renders matches as a flat list with title and route both highlighted, clicking
+a matched group clears the query and opens that group in the tree, and the
+mobile drawer shows the same header, list and footer. Unit suite 74 pass; lint
+and build pass. E2E was not run — the local site is saturated (see the
+landmines).
+
+### Phase 1 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Branch off `upstream/develop` | Built on `feat/frappe-ui-beta55` | develop pins frappe-ui `1.0.0-beta.25`; the drill-in sidebar needs beta55's `Sidebar`/`SidebarSection`/`useList`. The IA program is stacked on the upgrade branch. |
+| 2 | Decision 8 — SpaceDetails keeps the space document resource | New `stores/space.js` owns the document, the tree, tabs and git sync | The sidebar is a *sibling* of the page, not a descendant, so the two columns need an owner above them both. SpaceDetails still mounts the dialogs and drives CR submit/merge/withdraw. |
+| 3 | Phase 1 fetches a roles-count annotation | Not fetched yet | The lock suffix icon that consumes it is phase 3; fetching a child table per row on a 1847-space site with nothing rendering it is pure cost. |
+| 4 | Decision 2 — order by `switcher_order` | `switcher_order asc, creation desc` | `switcher_order` defaults to 0 for every space, so on its own it leaves the newest space in an arbitrary slot. Creation breaks the tie the way the old list page did. |
+| 5 | Decision 7 — Overview is a minimal "pick a space" placeholder | Overview renders the existing `SpaceList` for now | It is still the only way to create a space, and the only space list on mobile. It becomes the real placeholder in phase 3, alongside the extracted `NewSpaceDialog`. |
+| 6 | Decision 11 — header dropdown includes "Switch space" | Omitted | The back button already does it (the spec's own open question). Add it back if the sidebar ever stops showing one. |
+| 7 | Phase 7 — `useSidebarResize` retires | Deleted now | Its only consumer was the `<aside>` this phase removed. |
+| 8 | Phase 2 — `SpaceChromeBar` retires with the mode strip | Its identity block (back, name, view live, settings) already removed | The sidebar header renders identity now, so leaving it in the bar showed the space name and a back button twice on desktop. The bar keeps badge / meta / actions until phase 2 deletes it. |
+
+Phase 1 also caps the library list at 50 spaces with a `Load more` footer
+(landmine: 1847 spaces locally). Search over the list arrives in phase 3.
+(Both superseded — see the 2026-09-02 log entry: the cap is 15 and the footer
+is a link to the Overview.)
+
+Not verified in a browser: the local bench returns 500 for every site on it,
+including ones unrelated to the wiki, so the app could not be loaded. The build
+and lint pass; the drill-in needs a live check once the bench is back.
+
+### Phase 2 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Prototype strip: `Submit` and `Discard` side by side | `Submit for Review` full-width; `Discard Changes` in the strip's ⋯ menu | The label is the handle ~15 e2e specs grab (`getByRole('button', { name: 'Submit for Review' })`), and discard is destructive — it stays one level down, as it was in the banner. |
+| 2 | Decision 14 — the mobile tree drawer absorbs the mode strip | Mobile renders the strip inline above the content; the sidebar renders it on desktop | The drawer is closed by default and closes again on page open, so submit / merge / sync would be unreachable without first opening the tree. One instance either way (`v-if="isMobile"` in SpaceDetails, plain in SpaceSidebar). |
+| 3 | Decision 9 — the strip carries the actions | The actions themselves moved to `composables/useChangeRequestActions.js` | The strip is a *sibling* of SpaceDetails, so it cannot receive `@submit`/`@merge` handlers as events. SpaceDetails keeps only the dialogs and auto-open logic (966 → 435 lines across both phases). |
+| 4 | ContributionBanner took a `mergeDisabled` prop from the page | The strip reads `spaceStore.isTreeReordering` directly | Same reason — no parent to pass it. |
+| 5 | Decision 9 — git strip shows a sync status badge | Badge is now themed by status (`Success` green, `Error` red, `Partial` amber), and the strip gained the prototype's `Read-only · last synced …` line from `last_sync_time` | The old bar hardcoded `theme="gray"`, which made a failed sync look like a healthy one. |
+
+Verified in the browser (the bench's 500 was a missing `Dock` doctype, fixed by
+`bench migrate`): the git strip renders `repo@branch` with a themed status badge
+and the read-only line, the draft strip counts changed pages and drives the
+submit dialog, the ⋯ menu offers View changes / Discard Changes, and discard
+clears the draft. Unit suite (`node --test "src/**/*.test.js"`) 67 pass; lint
+and build pass. E2E was not run — the local site is saturated (see the
+landmines).
+
+Two things the browser pass turned up:
+
+- **The app did not mount at all.** `useChangeTypeDisplay` calls `__()` at
+  module scope, which was harmless while it only loaded in a lazy route chunk;
+  the strip pulls it into the eager sidebar chunk, ahead of the translation
+  global. Fixed by making the labels functions, with a regression test.
+- **"Unsaved changes" survives a discard.** After Discard Changes — and across a
+  reload — the sync pill still reports unsaved editor content: a page buffer
+  whose `localContent` diverges outlives the change request it belonged to.
+  Pre-existing (the discard path is carried over verbatim from
+  ContributionBanner), so it is logged here rather than fixed in this phase.
+
+### Phase 3 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Decision 4 — `lucide-lock` means "has roles ⇒ restricted" | Restricted means role rows **without** `Guest` | Every space created through the dialog gets a `Guest`/Read row, so "has roles" would have locked the whole list. This matches `wiki.permissions.can_read_space`: no rows is open to logged-in users, a Guest row is public. New endpoint `get_restricted_spaces(spaces)` — one grouped query per page of spaces, not a child table per row. |
+| 2 | Phase 1 fetches a roles-count annotation | Still not a list field | Same reason as phase 1: it is a child table. The flag comes back from its own endpoint alongside the page. |
+| 3 | Decision 6 — search over spaces is served by the sidebar list | Shipped here, not in phase 1 | Deleting the list page removed the only space search, so it had to land in the same phase. Server-side `space_name like`, debounced 250 ms, and the row only appears once the list is ≥10 long. |
+| 4 | Decision 7 — Overview is a minimal "pick a space" placeholder | Overview is a lean space list (~170 lines, no stats columns, no filter tabs) | It is still the only space list on **mobile**, where the sidebar it would defer to does not exist (decision 14). The old page's per-row stats and published filter did not survive. |
+| 5 | Decision 6 — New space is the sidebar footer button | Desktop: sidebar only. Mobile: the Overview header | Two `New Space` buttons a few inches apart on the same screen read as a duplicate, and Playwright's role lookup matched both. The desktop empty-wiki state points at the sidebar rather than repeating the button. |
+| 6 | — | `useList` needs a manual paging reset on search | A fetch from a non-zero `start` *appends*, and `start` is exposed readonly with no reset, so a new search would have stacked its results on the last one's. `previous()` is walked back to 0. |
+| 7 | Phase 7 — e2e specs that navigated via `/spaces` get updated | `e2e/tests/space-list.spec.ts` deleted now | Its whole subject was the list page's row-level `View` button, which retires with the page. The other specs still find `New Space` (the sidebar's) and space links unchanged. |
+| 8 | — | `get_space_stats` / `get_space_count` now have no callers | Left in place rather than deleted: spec 4's Overview analytics is the obvious consumer for both. Phase 7 decides. |
+
+Verified in the browser at 1440×900 and 390×844: the four suffix icons each
+render on a space that has that state (pin, `folder-git-2`, `lock`, `eye-off`),
+right-click opens one shared menu, Pin to top floats the space to the top of
+**both** the sidebar and Overview (shared localStorage) and writes
+`wiki:pinned-spaces`, Space settings navigates into the space and opens the
+dialog, search filters server-side, and the New Space dialog creates a space and
+drills into it. Unit suite 73 pass; `wiki.test_api` 37 pass (6 new, checked by
+temp-reverting the Guest rule); lint and build pass. E2E was not run — the local
+site is saturated (see the landmines).
+
+### Follow-up: the tree's state marks
+
+2026-09-07. Decision 4 settled the *space* list on independent icons rather
+than badges, but the document tree kept seven text badges of its own — New,
+Modified, Deleted, Reordered, Not Published, Syncing…, Sync failed — one per
+row. At a real space that is a column of coloured labels with page titles
+squeezed behind them, which is the thing decision 4 was avoiding.
+
+| # | What shipped | Why |
+|---|--------------|-----|
+| 1 | Change types become a 6px dot, coloured by type, carrying the old label as `title` and `aria-label` | The tree is a navigation column. Which pages changed is a glance question; which *kind* of change is a hover question |
+| 2 | `Not Published` becomes `lucide-eye-off` | The same icon decision 4 gave an unpublished space. Unpublished is not a change, so it is not a dot |
+| 3 | `Syncing…` becomes a gray dot; **`Sync failed` keeps its red badge** | A failed save is the one state that asks the user to do something, and it has to stand out against the dots rather than join them |
+| 4 | The colours moved into `useChangeTypeDisplay` as `getChangeDotClass` | The tree had hardcoded its own, and had drifted: `added` was drawn blue there and green everywhere else. One place owns the mapping now, and `added` is green |
+| 5 | The outline rail's wrapper became a `div` | It was an `<aside>`, and once spec 02 phase 6 brought the rail back at 1280 there were two complementary landmarks on the page — which made `locator('aside')`, the sidebar in 72 e2e specs, ambiguous. The nav inside it was already the landmark |
+
+Verified at 1440×900: a space with new, modified and reordered pages shows one
+dot per row and full-width titles. `change-request-flow`'s reorder case reads
+the dot's label instead of the badge text — 2/2 pass; `editor-toc` unchanged at
+5/6 (the pre-existing scroll-spy failure). Unit suite 82 pass (81 + 1 for the
+dot classes); lint and build pass.
diff --git a/specs/ia_refactor/02-space-editor-revamp.md b/specs/ia_refactor/02-space-editor-revamp.md
new file mode 100644
index 000000000..7efe8a13d
--- /dev/null
+++ b/specs/ia_refactor/02-space-editor-revamp.md
@@ -0,0 +1,288 @@
+# Space Details / Editor Page Revamp
+
+Date: 2026-09-01
+Status: **Done.** All six phases built (header row, prose column + outline,
+page settings panel, space settings tabs, empty states, alignment pass).
+Depends on spec 01 (sidebar drill-in).
+Prototype: `wiki-proto` — `PageContent.vue`, `PageSettingsPanel.vue`,
+`SpaceSettingsDialog.vue`, `Space.vue`.
+
+## Problem
+
+With the tree moved into the sidebar (spec 01), the content column is the whole
+editing surface — but today's `WikiDocumentPanel` grew organically: page
+actions are scattered (dialog-based page settings, banner-owned submit), the
+prose column isn't stable, the outline is a bolt-on, and space settings is a
+bespoke dialog that predates frappe-ui's Settings family.
+
+## Goal
+
+The prototype's editor shape: a 48px header row (breadcrumbs · view live ·
+page settings toggle · Submit for review · more-menu), a toolbar row under it,
+a centered `max-w-3xl` prose column with the title input inline, a floating
+"On this page" outline in the right gutter, a 352px page-settings side panel,
+and autosave reporting instead of a Save button. Space settings rebuilt on
+frappe-ui `SettingsDialog`.
+
+## Decisions
+
+| # | Decision | Choice |
+|---|----------|--------|
+| 1 | Header row | h-12, border-b. Left: `Breadcrumbs` from tree ancestors (last crumb tracks the unsaved title live). Right: View live (ghost eye), Page settings toggle (pressed = `subtle` variant while panel open), then per-mode: git-synced → "Edit on GitHub" + Read-only badge; else → solid "Submit for review" + more-menu (Rename, Change route, Unpublish, Delete). |
+| 2 | Submit for review | Header primary action. Same backend flow the banner/strip uses; strip (spec 01) and header both submit the space's draft CR — one store action, two triggers. |
+| 3 | Page settings | **Side panel, not dialog.** 352px, own h-12 header sharing the toolbar's row line. Fields: Title, Slug, Route (+ public URL description), Published switch, Meta title/description/image, plus read-only Details (words, reading time, last edited, edited by). Existing `PageSettings.vue` dialog content migrates; dialog retires. Panel and outline never show at once. |
+| 4 | Outline | Floating `aside` over the right gutter (absolute, `lg:` only), no box, `SidebarItem` rows, h2/h3 with indent, scroll-to-heading. Replaces the current `EditorTableOfContents` placement; the composable `useDocumentOutline` is reused. |
+| 5 | Prose column | `mx-auto max-w-3xl`, title as borderless input (text-3xl font-semibold) above the editor content, amber dirty dot on the title's trailing edge — same mark the tree uses. |
+| 6 | Autosave | Already exists (draftWorkspace buffers). The header stops offering Save; save state surfaces via the dirty dot (+ existing Cmd/Ctrl+S kept as a manual flush). |
+| 7 | Empty state | No page selected → prototype's "Pick a page to edit" + New page button (replaces `SpaceWelcome`; keep the git-sync-in-progress variant). |
+| 8 | Space settings dialog | Rebuild on frappe-ui `SettingsDialog`/`SettingsPanel`/`SettingsRow`: tabs **General** (name, route prefix + Update-routes flow, logo → spec 3 avatar, published), **Navigation** (show in switcher, order — the tab toggles are gone with the tab feature, spec 01), **Access** (roles table — role + Read/Write select + remove, "no roles = public" copy, accept contributions, collect feedback), **Git sync** (repo/branch/subdir facts, last sync status + commit, Sync now, connect flow when not synced). Existing `SpaceSettings/*` panels migrate; Clone space stays in the General panel actions. |
+| 9 | Frontend/backend sync | Every `Wiki Space` field surfaced in these panels is enumerated explicitly in the frontend (house convention); the rebuild must not drop fields the old panels carried. Inventory them before deleting. |
+| 10 | Tabs bar | Gone before this spec starts — removed by spec 01 (program decision 2). The content column has no bar above it. |
+
+## Current state
+
+- `components/WikiDocumentPanel.vue` (587) — editor host; keeps data flow
+  (draft buffers, publish state), sheds its ad-hoc header.
+- `components/WikiEditor.vue`, `WikiToolbar.vue`, `WikiBubbleMenu.vue`,
+  tiptap-extensions — untouched. This spec is chrome, not editor internals.
+- `components/PageSettingsPanel.vue` — the panel (replaced the
+  `PageSettings.vue` dialog).
+- `components/EditorTableOfContents.vue` + `composables/useDocumentOutline.js`
+  — reuse logic, new placement.
+- `components/SpaceSettings/{SpaceSettings,GeneralPanel,NavigationPanel,AccessPanel,GitSyncPanel}.vue`
+  — one panel per tab, hosted by the `SettingsDialog`.
+- `components/WikiBreadcrumbs.vue` — check reusability for the header trail.
+- `pages/ContributionReview.vue` / `DraftContributionPanel.vue` — CR review
+  surfaces; out of scope beyond not breaking their routes.
+
+## Phases
+
+1. **Header row tracer.** New header on WikiDocumentPanel: breadcrumbs, view
+   live, Submit for review wired to the existing CR submit, more-menu with the
+   actions that already exist (rename, delete, publish toggle). Old placements
+   removed as each lands.
+2. **Prose column + outline.** Centered column, inline title input + dirty
+   dot, floating outline.
+3. **Page settings panel.** Panel component, toggle in header, dialog retired.
+4. **Space SettingsDialog.** Panel-by-panel migration (General → Navigation →
+   Access → Git sync), then delete `SpaceSettings/*`.
+5. **Empty states** and read-only (git) chrome-drop pass.
+6. **Alignment pass.** Read the built editor back against `PageContent.vue`
+   and fix what drifted: the outline rail's threshold, the title row's extra
+   chrome, the submit button's label. Plus the Overview's unreadable pagination.
+
+Commit per phase; reconcile spec after each.
+
+## Regression tests
+
+- e2e: header submit-for-review round trip; page settings panel edits route +
+  meta and they persist; outline scroll-to-heading.
+- e2e: git-synced space shows read-only chrome (no toolbar, no submit).
+- Unit: breadcrumb trail from ancestors incl. unsaved-title last crumb.
+- Space settings: e2e smoke per tab (open, edit one field, save, reload).
+
+## Landmines
+
+- Roles/access edits flow through `Wiki Space` server-side validation — the
+  Access panel must keep sending the same child-table shape
+  (`Wiki Space Role`).
+- `PageSettings` meta-image upload reuses the existing attachment flow; the
+  panel must not regress the generated-meta-images feature
+  (`specs/generated_meta_images.md`).
+- Editor is keyed by page; panel state (open/closed) must survive page
+  switches (module-scoped ui state, prototype's `state.ts` pattern).
+- Print/reader CSS lives elsewhere; column width changes here are app-only.
+
+## Open questions
+
+- Does "Change route" stay in the more-menu when the settings panel already
+  edits Route? (Prototype has both; probably menu item just opens the panel.)
+- Word count/reading time: computed client-side from the draft (prototype) or
+  server-side? Client-side is enough.
+
+## Progress log
+
+- 2026-09-01 — Spec written from `wiki-proto`.
+- 2026-09-01 — Decisions locked: tabs removed, /spaces retired, duckdb+pandas approved, avatar auto-roll on create.
+- 2026-09-07 — Phase 1 built: the editor header row.
+- 2026-09-07 — Phase 2 built: centred prose column, floating outline, dirty dot,
+  Save retired.
+- 2026-09-07 — Phase 3 built: the page settings panel.
+- 2026-09-07 — Phase 4 built: the space settings tabs.
+- 2026-09-07 — Phase 5 built: the empty space's way out; read-only pass verified.
+- 2026-09-07 — Phase 6 built: the alignment pass against the prototype.
+
+### Phase 1 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Decision 6 — the header stops offering Save | Save is still in the header, demoted to `subtle` | The dirty dot that replaces it lands with the prose column (phase 2). Removing Save now would leave autosave with no visible signal in the content column, and would break ~20 e2e specs a phase earlier than the dot that lets them be rewritten. |
+| 2 | Decision 2 — "one store action, two triggers" | One *component*: `SubmitForReviewButton.vue`, rendered by both the strip and the header | The confirm dialog is part of the action. Sharing only the store call would have duplicated the dialog; sharing open-state between two components would have made the header depend on the strip being mounted. |
+| 3 | Decision 1 — more-menu carries Rename, Change route, Unpublish, Delete | Also Page settings and (for managers) View in Desk | Both already lived in this menu. Page settings leaves the menu in phase 3, when it becomes a header toggle for the side panel. |
+| 4 | Rename | Its own dialog, not focus-into-the-title-input | Reusing the inline title input was tried first: the dropdown restores focus to its trigger as it closes, and it wins against a `requestAnimationFrame` chain. A dialog matches the tree's rename and needs no focus race. |
+| 5 | Decision 1 — git-synced shows "Edit on GitHub" + Read-only badge | Shipped; the GitHub entry left the more-menu | Two triggers for one action a few inches apart. `githubEditUrl` is non-null only for synced spaces, which are exactly the read-only ones. |
+| 6 | — | Delete redirects to the space route | The deleted page is the open one, so the editor would be pointing at nothing. `SpaceDetails` auto-opens the next page it can find. |
+
+Verified in the browser at 1440×900: the header renders breadcrumbs · View live
+· Save · Submit for Review · ⋯; Submit appears in both the header and the strip
+once the space has a pending change; rename through the menu updates the title
+input, the breadcrumb and the tree; delete writes a delete draft and hands the
+route back to the space, which opens the next page. Unit suite 74 pass; lint and
+build pass on the touched files.
+
+Two gaps this phase leaves:
+
+- **`DraftContributionPanel` still has the old header.** A page created in the
+  draft workspace opens on the draft route, whose panel is a different
+  component with its own Save-only header. The two now disagree. Folding it in
+  belongs with phase 2, which touches the same prose column.
+- **No e2e yet.** The header's shape still changes twice (Save leaves in phase
+  2, the page-settings toggle arrives in phase 3), so the specs the "Regression
+  tests" section asks for are written once it settles.
+
+### Phase 2 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Decision 4 — floating outline in the right gutter, `lg:` only | Shipped as an absolute `aside` over the gutter, but the rail's threshold moved from 900px to ~1140px of editor width | It used to take a column of its own, so 900px was enough. Floating needs a gutter to float in: the 768px column plus a rail's width on each side. Between the two numbers the collapsible strip takes over — a 1280px window with the sidebar open now gets the strip where it used to get the rail. |
+| 2 | Decision 4 — `SidebarItem` rows | Rows styled as sidebar items (rounded, hover fill, active fill), not the component | `SidebarItem` carries icon/label/active props built for navigation; the outline needs a heading level indent and a scroll handler. The look is the point, not the component. |
+| 3 | Decision 6 — the header stops offering Save | Shipped, and submitting now **flushes** an unsaved buffer instead of being blocked by it | The old gate told the user to "Save your changes before submitting" — advice with no button behind it once Save is gone. The property the gate protected (never submit a CR that lacks what is on screen) is kept by flushing first, since the editor pushes every keystroke into the buffer. |
+| 4 | Decision 2 — strip and header both submit | Header only; the strip keeps Merge, Reload latest and the ⋯ menu | Two identical primary buttons on one screen, and every e2e locator for Submit became ambiguous. The header sits next to the page the submit is about. |
+| 5 | — | The header ⋯ is named **Page actions** | It collided with the strip's "More actions" (a strict-mode ambiguity that predates this spec), and it matches the sidebar's existing "Space actions". |
+| 6 | — | Submit stays visible while the buffer is dirty even with zero change rows | Autosave takes ten seconds to turn typing into a change row. With no Save button, the window would otherwise show no action at all. |
+| 7 | Phase 1 gap — `DraftContributionPanel` still had the old header | Folded in here: submit, Page actions menu (Change route, Delete Draft), dirty dot, no Save | It hosts the same prose column this phase reshapes. |
+| 8 | — | `lucide-github` renders blank | `lucide-static` dropped brand icons (already noted in `SpaceSettings`). "Edit on GitHub" uses `lucide-pencil`; the two dead glyphs in `NewSpaceDialog` became `lucide-git-branch`. |
+
+Verified in the browser at 1600×950 and 1280×900: the outline floats over the
+right gutter with the prose column centred and unmoved, the strip variant takes
+over at the narrower width, the dot appears on the title as soon as the buffer
+diverges and clears on ⌘S, and Submit with an unsaved buffer lands the typed
+text in the change request (checked in the review diff).
+
+E2E: 13 header-Save clicks became `saveEditor()` (the ⌘S/Ctrl+S flush); three
+assertions that encoded "Submit is disabled while unsaved" now assert the
+workspace reports unsaved content; `page-settings-meta` opens "Page actions";
+`git-sync-edit-on-github` clicks the header button rather than a menu item.
+Locally `local-first-store.spec.ts` is 8/13 with these changes and 9/13 without
+them, failing a different subset each run — all with the same "draft route never
+resolves" timeout, which is the known local job-queue saturation rather than a
+regression. Every test that failed with the changes passes in isolation except
+`Reload latest after a failed save`, which fails on the unchanged build too.
+Unit suite 74 pass; lint and build pass.
+
+### Phase 3 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Decision 3 — the `PageSettings` dialog's content migrates into the panel | It migrated, and the panel also took Title, Slug, Route and Published, which the dialog never carried | One Save, two write paths: the identifying fields go through the change request (`draftStore.updateNode`), the meta fields straight to the document (`setValue`). Meta is not in the CR's field list (`_CR_ITEM_SCALAR_UPDATE_FIELDS`) and carries nothing a reader sees, so routing it through a review would be ceremony for its own sake. |
+| 2 | Decision 3 — panel and outline never show at once | A `showOutline` prop on `WikiEditor` gates **both** outline variants, not just the rail | The panel narrows the editor past the rail's threshold, so gating the rail alone would have swapped one list of the page for another. |
+| 3 | Open question — does "Change route" stay in the more-menu? | No. The menu item and the route dialog are both gone; the route line under the title opens the panel | Three doors onto one field. The panel owns Route now, and the line under the title is the shortest way to it. |
+| 4 | — | Slug is editable from the app for the first time | It is already in the CR's scalar update list and has simply never had a frontend. The backend keeps route and slug independent — a renamed slug does not recompute the route — so the panel shows both rather than implying one derives from the other. |
+| 5 | Landmine — panel state must survive page switches | `composables/usePageSettingsPanel.js`, module-scoped | The editor component is torn down whenever the route leaves the page (a draft, another space); whether the panel is open is a fact about the workspace, not about the page. |
+| 6 | — | The form adopts an outside change only for a field the user has not touched | The title is edited in three places at once (the prose input, the tree's rename, this panel). Resetting on every change would eat what is being typed; never resetting would save a stale title over someone else's rename. |
+| 7 | Open question — word count client- or server-side? | Client-side, `lib/readingStats.js` | The count has to track the buffer between saves, and the buffer only exists in the browser. |
+| 8 | — | The header toggle is hidden on read-only (git-synced) pages | Nothing in the panel is editable there. The rest of the read-only chrome drop is phase 5. |
+
+Verified in the browser at 1600×950: the toggle reads pressed while the panel
+is open, the panel's own h-12 header lines up with the toolbar row and the
+toolbar stops at its border, meta fields save and the generated social card
+re-renders, a title typed into the panel reaches the prose input and the tree
+(as a change row), and the outline rail disappears while the panel is open and
+comes back when it closes.
+
+E2E: `page-settings-meta` now opens the header toggle instead of a menu item
+and reads the panel by test id — 2/2 pass locally. `editor-toc` is 5/5 on a
+retry; its "clicking an entry scrolls that heading into view" case fails and
+passes on the same build, and this phase does not touch the highlight logic it
+asserts. Unit suite 81 pass (74 + 7 new for `readingStats`); lint and build
+pass on the touched files.
+
+One gap this phase leaves: `DraftContributionPanel` has no settings toggle. A
+page that exists only in the draft workspace has no `Wiki Document` behind it,
+so there are no meta fields to edit and no `Details` to report; its route and
+title stay in its own Page actions menu.
+
+### Phase 4 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Decision 8 — "rebuild on frappe-ui `SettingsDialog`/`SettingsPanel`/`SettingsRow`" | The dialog was already built on them; this phase reorganised the tabs and filled in the missing fields | The bespoke dialog decision 8 describes had already been replaced. What was actually wrong was the tab set — General / Permissions / GitHub Sync — and the fields it left out. |
+| 2 | Decision 8 — tabs General, Navigation, Access, Git sync | Shipped. `PermissionsPanel` became `AccessPanel`, `NavigationPanel` is new | Nothing under "Permissions" was about permissions in the Frappe sense; the tab decides who may read and what they may do, which is access. |
+| 3 | Decision 8 — General carries name, route prefix, logo, published | Shipped, plus Clone space. Space name saves on blur; the route prefix row is the existing bulk-update-routes flow, retitled | Renaming a space is safe, so it saves where it is typed. Changing the prefix rewrites every published URL under it, so it keeps its confirm dialog and its own button. |
+| 4 | Decision 8 — logo → spec 3 avatar | The existing logo upload stays as it is | The avatar is spec 03's whole subject; swapping it in here would build it twice. |
+| 5 | Decision 8 — Access carries "collect feedback" | Moved here from General | It is a setting about what a reader may do on the page, which is what the rest of this tab decides. |
+| 6 | Decision 8 — Git sync shows a "connect flow when not synced" | An empty state that says a space is connected at creation — no connect button | A repository is picked in `NewSpaceDialog` and there is no backend for binding one to an existing space. A button that cannot work is worse than a sentence that explains. |
+| 7 | Decision 8 — Git sync facts include the subdir and the last commit | Added: Docs Folder, and the last synced commit as a link to it on GitHub | Both were already on the doc (`docs_subdir`, `last_synced_commit_sha`) and only the sync history showed a commit. |
+| 8 | — | The Git Sync tab is always in the list, synced or not | It used to appear only for synced spaces. A tab set that changes shape per space teaches people that settings move around. |
+| 9 | Decision 9 — no field the old panels carried may be dropped | Inventory kept whole: `is_published`, `app_switcher_logo`, `enable_feedback_collection`, `roles`, `allow_contributions`, the read-only git facts, plus the update-routes and clone flows. New: `space_name`, `show_in_switcher`, `switcher_order`, `docs_subdir`, `last_synced_commit_sha` | — |
+| 10 | — | Every row still saves on its own, as the panels already did; no per-panel Save button (the roles table keeps its own, because a table is one edit) | The prototype's per-panel Save was drawn against prototype state. Switching the shipped panels to a buffered form would have been a second, larger change riding along with the tab move. |
+
+Verified in the browser at 1440×900: all four tabs render, renaming the space
+from General reaches the dialog's own sidebar and the app sidebar, the switcher
+order round-trips to the document (checked through `frappe.client.get_value`),
+Collect Feedback writes `enable_feedback_collection`, and an unsynced space's
+Git Sync tab shows the not-connected state.
+
+E2E: `space-permissions-role-search` is now `space-access-role-search` and
+clicks the Access tab — 2/2 pass. It was already failing before this phase on
+`getByTitle('Settings')`, which spec 01 replaced with the sidebar's "Space
+actions" menu; fixed while renaming it. `spa-editor.mobile` asserts the Access
+tab is visible, 4/4 pass — its own drawer still has a gear titled "Settings",
+which is a mobile surface spec 01 did not touch. Unit suite 81 pass; lint and
+build pass.
+
+### Phase 5 reconciliation
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Phase 5 — "read-only (git) chrome-drop pass" | Nothing left to drop. The sweep found the gates already in place: toolbar, bubble menu and table menu (`WikiEditor` 6/21/24), `editable` and the `is-editable` class, the save and Cmd+S guards, Submit, the page-settings toggle, the route line's edit affordance, the panel itself, and the tree's create/reorder/row actions | Phases 1–3 gated each surface as they built it rather than leaving a pass to the end. The pass ran as a verification, and `git-sync-readonly` / `git-sync-edit-on-github` still pass unchanged |
+| 2 | Decision 7 — "No page selected → 'Pick a page to edit'" | That wording only survives for a tree that has pages. An empty space gets "Create your first page" | `SpaceDetails` auto-opens the first page, so "no page selected" is not actually reachable on a populated space — the state the user lands in is *the space has none*. Telling them to pick from an empty tree is advice with nothing behind it |
+| 3 | Decision 7 — the empty state replaces `SpaceWelcome` | `SpaceWelcome` was rewritten, not replaced | It is a sibling route of the editor (`router.js:44`), not a branch inside it as in the prototype. Moving it into `WikiDocumentPanel` would have meant hoisting the header row out for a state whose header has nothing actionable on it |
+| 4 | — | The empty state carries no header row, unlike the prototype | Every control in that row is about a page. On an empty space the whole row would be disabled or hidden, which is a worse thing to draw than nothing |
+| 5 | — | The sidebar keeps "No pages yet"; the content column says "Create your first page" | Both columns showed the same sentence side by side. The tree states the fact where the pages would be, the content column carries the action — one message across two columns instead of one message twice |
+| 6 | Decision 7 — "+ New page button" | `composables/useNewPageRequest.js`, module-scoped, consumed by `WikiDocumentList` | The create dialog lives in the tree with the route-computation it needs, and the tree is a sibling column, not an ancestor. Same shape as `usePageSettingsPanel` |
+| 7 | — | A consumable pending flag, not an event | The mobile tree lives in a drawer that unmounts while closed, so at the moment the button is pressed there is nobody to hear an event. The flag survives until the tree mounts; `SpaceDetails` opens the drawer to make that happen |
+| 8 | — | The content column renders nothing until the tree has loaded | An unloaded tree and an empty one look identical. Without the gate a populated space flashes "create your first page" on entry — the trap `space.js` already documents for the sidebar |
+| 9 | — | Fixed: creating a page could land on "Draft not found" | Out of scope on paper, but it is the empty state's only action. Navigation to `/draft/tmp_*` races the create; when the create wins, `promoteKey` has already moved the buffer to the real key. The panel's route-swap watcher was lazy, so it never fired for a key resolved before it mounted, and no reload could settle it — the temp key was gone for good. The watcher is now `immediate`, and `loadCrPage` follows a promotion instead of reporting the page missing |
+
+Verified at 1440×900: an empty space shows the tree's "No pages yet" beside the
+content column's "Create your first page" + New page; the button opens the
+tree's create dialog and lands in the editor on the page it made. The
+`editor-toc` "clicking an entry scrolls that heading into view" failure was
+checked against a clean `HEAD` and fails identically there — pre-existing, not
+from this phase. New e2e `space-empty-new-page`; `space-default-page` retargeted
+to the new copy. Both git-sync specs, unit suite (81), lint and build pass.
+
+### Phase 6 reconciliation
+
+The build was read back against `PageContent.vue` at 1440×900 and 1280×800.
+Four things had drifted; all four are reversals of calls made in earlier
+phases, so each row names the row it overturns.
+
+| # | Spec said | What shipped | Why |
+|---|-----------|--------------|-----|
+| 1 | Phase 2 row 1 — the rail's threshold is ~1140px of editor width, and the prose column stays "centred and unmoved" | Both reversed. The rail's gutter is **reserved** (`pr-60` on the content row while the rail is up), the way the prototype reserves it, and the threshold drops to 1008 — the 768px column plus that reserve | A rail that needs a gutter on *both* sides needs 768 + 2×186 of width, which is a ~1400px window. Reserving one gutter needs 1008, which a 1280px laptop has (1019px of editor). The column now shifts left when the rail appears; that is the price the prototype already pays, and it buys the outline back on the most common screen |
+| 2 | Decision 4 — the rail is a prototype `w-52` | Rail widened 180 → 208px | 180px truncated most real headings ("Overriding classes an…"), which is a table of contents that cannot be read. 208 + `pr-4` still fits inside the 240px reserve |
+| 3 | Phase 3 row 3 — the route line under the title is the door to the Route field | The line is gone; the header's panel toggle is the only door | Decision 5 draws the title row as the title and the dirty dot. The publish badges (`Published` / `Not Published` / `Has Draft Changes`) went with it — the panel's `Published` switch says the same thing where the field is, and the header's View-live eye already reports it |
+| 4 | — | `DraftContributionPanel` loses its route line too; its ⋯ menu already carries "Change route" | The two editors share one prose column. Leaving the line on one of them is the disagreement phase 1 opened and phase 2 closed |
+| 5 | — | The draft panel **keeps** its blue `Draft` badge | It names the surface, not a publish state. The prototype has no draft route to draw it against, so decision 5 does not reach it |
+| 6 | Decision 1 — solid "Submit for review" | Button is now `solid` + `theme="gray"` and reads "Submit for review" | It had drifted to the default theme and title case. The visibility rule (phase 2 row 6 — visible while the buffer is dirty even with no change rows) is untouched |
+| 7 | — | Overview's "Load more" restyled from `ghost` full-width to a centred `subtle` button | Out of this spec on paper, found in the same pass. With 80 spaces the button renders under 50 rows as transparent text 24px off the bottom edge, and reads as absent |
+| 8 | — | `newPageButton` in `e2e/helpers/wiki.ts` is scoped to the sidebar | Phase 5 gave the empty space its own "New page" in the content column, which made the shared locator ambiguous and took the whole `editor-toc` suite red on a clean tree. Two stale `button:has-text("Save")` clicks in `toc-navigation` went with it — phase 2 converted thirteen of them and missed these, because the spec was already dying earlier |
+
+Verified in the browser at 1280×800, 1440×900 and 1000×900: the rail returns
+on the 1280px laptop with the prose column shifted left and no overlap, the
+strip still takes over at 1000 (739px of editor), the title row carries the
+title and the dot alone, the panel toggle still opens Route and Published, and
+Overview's "Load more" reads as a control and appends the remaining 30 of 80
+spaces.
+
+E2E: `editor-toc` is 5/6 with the new "keeps the rail on a 1280px laptop" case
+— the sixth is the "clicking an entry scrolls that heading into view"
+scroll-spy assertion this spec has recorded as failing since phase 3, checked
+again on a clean tree with only the helper fix applied and failing identically.
+`page-settings-meta` and both `git-sync-*` specs are 4/4. `toc-navigation` is
+still red, now two dead locators further on, at the assertion that a merged
+change request produced a `Wiki Document` route — the local merge job, which is
+the known job-queue saturation rather than anything this pass touched. Unit
+suite 81 pass; lint and build pass on the touched files.
diff --git a/specs/ia_refactor/03-space-avatar.md b/specs/ia_refactor/03-space-avatar.md
new file mode 100644
index 000000000..68f4f8739
--- /dev/null
+++ b/specs/ia_refactor/03-space-avatar.md
@@ -0,0 +1,134 @@
+# Space Avatar: Upload, Icon or Generated Art
+
+Date: 2026-09-01, rewritten 2026-09-07
+Status: **Done** (2026-09-07). Renders in spec 01's sidebar; the picker lives in
+spec 02's settings dialog.
+Reference implementation: `apps/bwh_hive` — `frontend/src/lib/dicebear.ts`,
+`components/common/IdentityAvatar.vue`, `components/common/IdentityPicker.vue`.
+
+## Problem
+
+A space's identity today is `app_switcher_logo` (an upload) or a bare initial.
+The settings row for it is a rectangular preview next to an Upload button, and
+the sidebar, overview and space header all render rows of gray initials because
+most spaces will never get a hand-made logo.
+
+## Goal
+
+Three ways to give a space a face, picked in one control hung off a square
+preview tile: **upload an image**, **pick a lucide icon on a tinted square**, or
+**shuffle a generated abstract mark**. Everything that shows a space renders the
+same mark through one component — library sidebar, space sidebar header,
+overview rows, the public reader header, and the generated social card.
+
+## Decisions
+
+| # | Decision | Choice |
+|---|----------|--------|
+| 1 | Trigger | The preview tile *is* the control: a square (`size-10`), clickable, opening a popover. The Upload and Replace buttons next to it go away; Remove moves inside the popover. |
+| 2 | Popover shape | frappe-ui `Popover` + `TabButtons`: **Upload** \| **Icon**. Proven inside a `SettingsDialog` — hive uses the same pair on the same frappe-ui (beta.55) in `CreateProjectDialog`. `IconPicker.vue`'s `inline` escape hatch exists for a *raw reka* `PopoverRoot`, which portals elsewhere; it is not needed here. |
+| 3 | Icon tab | Colour swatch row (the tile drawn in each tint, so the row doubles as a preview) + the icon grid + one full-width **Shuffle** button under it. Hive's layout, minus the style and variant `Select`s. |
+| 4 | Icon set | `TAB_ICONS` from `lib/tabIcons.js`, unchanged and unextended. That list is already the SPA's Tailwind safelist *and* the input to `scripts/generate-public-lucide.mjs`, so reusing it means a space icon renders on the public reader with no new generation step. A separate curated list would need adding to both. |
+| 5 | Palette | `gray, blue, green, amber, red, violet` — exactly frappe-ui's `AvatarTheme` union, so a space colour can only ever resolve to a tint the design system ships. All six exist as `--surface-*-2` / `--ink-*-7` in the reader's Tailwind v4 build too. |
+| 6 | Shuffle | One button, no `Select`s (decided 2026-09-07). It rolls **both** a random style out of the four curated abstract sets and a random crypto seed. Style and seed are stored so the same mark comes back; the seed is never derived from name or route, which would make shuffle a no-op and a rename change the art. |
+| 7 | Generator | DiceBear, exactly as hive does it: `@dicebear/core` + `@dicebear/styles`, **local rendering only** (a Frappe site must not leak its space list to `api.dicebear.com`), **lazy `import()`** per style so the ~MB of style JSON never loads until Shuffle is pressed, one Rollup chunk per style. |
+| 8 | Styles | Abstract marks only: `glass`, `blobs`, `waves`, `loops`. All CC0 and DiceBear-authored; listed one by one, never pulled wholesale from the 61-style package — licensing stays a deliberate act. No character sets: a space is a thing, not a person. `disco` was measured out (2026-09-07): ~35 kB of SVG per mark against ~4 kB for the four kept, and a mark is fetched once per row by the space list. Measure before adding a style. |
+| 8b | Credit | No license line in the popover (decided 2026-09-07). Every shipped style is CC0 and DiceBear-authored, so none obliges attribution, and the credit belongs in the source comment rather than in a control the user opens to press one button. |
+| 9 | Storage | New fields on `Wiki Space`: `space_icon` (Data — a full `lucide-*` class, same convention as `home_tab_icon`), `space_color` (Data — a palette name), `avatar` (Long Text, hidden in Desk — an SVG `data:` URI), `avatar_style` (Data), `avatar_seed` (Data). The upload keeps using `app_switcher_logo`. No migration. |
+| 10 | Resolution | `avatar` → `space_icon` + `space_color` → `app_switcher_logo` → initial on a colour hashed from the docname. One accessor, ported to both languages. |
+| 11 | Clearing | Only one direction clears destructively. Choosing an icon or shuffling writes the generated fields and **leaves `app_switcher_logo` alone**, so a picked icon never drops a File link; choosing Upload (or "Use this image" on an already-uploaded logo) clears `avatar` and `space_icon`. Remove, in the Upload tab, clears `app_switcher_logo`. |
+| 12 | Public reader | **In scope** (decided 2026-09-07, reversing the original decision 8). The header, the mobile header and the switcher rows draw the same three-way mark. Cheap because `wiki.utils.lucide_svg` already inlines the curated set, and the OG card is a Jinja page screenshotted by headless Chromium — an SVG `data:` URI in an `<img src>` renders there as-is, so nothing needs rasterizing. |
+| 13 | Auto-roll on create | **Yes** (decided 2026-09-01, reaffirmed 2026-09-07). Creating a space rolls a mark straight away, so no space is ever a bare initial. `NewSpaceDialog` shows it with the same picker; upload or icon replaces it. |
+| 14 | Frontend/backend sync | The five new fields are enumerated wherever the frontend or a Python query lists Wiki Space fields: `useSpaceLibrary.js`, `wiki_document.py`'s switcher query, `og_image.py`'s context. House convention — nothing syncs automatically. |
+
+## Current state
+
+- `frontend/src/components/SpaceSettings/GeneralPanel.vue` — the row to rebuild:
+  a `h-10 w-16` preview, an Upload/Replace `Button`, a Remove `Button`, a hidden
+  `<input type=file>`, and `useFileUpload` posting to
+  `wiki.api.upload_wiki_asset` with `private: false`.
+- Three SPA render sites, all `Avatar :image="app_switcher_logo"` with an
+  initial fallback — the seam `SpaceAvatar` slots into:
+  `LibrarySidebar.vue:45`, `SpaceSidebar.vue:22`, `Overview.vue:83`.
+- Reader sites: `templates/wiki/includes/header.html:25,53` (switcher trigger and
+  the no-switcher case), `mobile_header.html:12,145`, and the switcher rows,
+  which show no mark at all today.
+- `wiki/api/og_image.py:142` — `logo_url = _safe_asset_url(app_switcher_logo or
+  light_mode_logo)`, fed into `og_fingerprint`, which hashes exactly the inputs
+  the card template consumes.
+- `wiki/utils.py:17` `lucide_svg` — inline SVG for a `lucide-*` class, backed by
+  the generated `wiki/lucide_icons.json` (126 entries, sourced from
+  `tabIcons.js`). Already a Jinja global via `hooks.py`.
+- `IconGrid.vue` / `IconPicker.vue` — the existing grid, reusable as is.
+- hive's `dicebear.ts` is TypeScript; wiki's frontend is JS — port as
+  `frontend/src/lib/spaceAvatar.js`, keeping the structure (style meta table
+  with license credits, loader map, style cache, `renderAvatar`, `randomSeed`).
+
+## Phases
+
+1. **Tracer: fields, one component, the new control.** Add the five fields.
+   `components/SpaceAvatar.vue` (frappe-ui `Avatar shape="square"`, image =
+   sanitized data URI or logo URL, default slot = the icon, label = the
+   initial), and `lib/spaceIdentity.js` for the resolution, sanitizer and
+   palette. Rebuild the settings row: square trigger, popover, Upload tab
+   (existing uploader, Remove, "Use this image") and Icon tab (swatches +
+   `IconGrid`), no Shuffle yet. Swap `SpaceAvatar` into the three SPA sites and
+   add the fields to `useSpaceLibrary`. End-to-end in the SPA.
+2. **Shuffle.** Add `@dicebear/core` + `@dicebear/styles` pinned, port
+   `lib/spaceAvatar.js`, wire the Shuffle button. Verify chunk-per-style in the
+   `yarn build` output before anything else.
+3. **Reader.** A `space_mark` Jinja macro drawing the same three-way
+   resolution — tinted square via `var(--surface-{colour}-2)` /
+   `var(--ink-{colour}-7)` with the colour validated against the palette
+   server-side, glyph via `lucide_svg`. Use it in `header.html`,
+   `mobile_header.html` and the switcher rows; extend the switcher field lists.
+   Then `og_image.py`: resolve the mark into the card context, allow an
+   `data:image/svg+xml` avatar past `_safe_asset_url`'s siblings check, add the
+   new inputs to `og_fingerprint`, bump `TEMPLATE_VERSION`.
+4. **Auto-roll on create.** `NewSpaceDialog` gets the picker with a pre-rolled
+   mark; the create path stores it.
+5. **Polish.** e2e.
+
+## Regression tests
+
+- Unit (JS): resolution priority — avatar beats icon beats logo beats initial;
+  sanitizer rejects anything that is not a `data:image/svg+xml` URI; an
+  off-palette colour falls back rather than emitting a class that does not exist.
+- Unit (Python): the same resolution and the same sanitizer on the Jinja side,
+  plus `og_fingerprint` changing when the icon, the colour or the avatar changes.
+- e2e: pick an icon → save → reload shows it; shuffle → save → reload shows the
+  same art; the upload path still works and Remove still clears it.
+- Run the JS unit tests with `node --test`, not vitest (see
+  `specs/cleanup/001-run-frontend-unit-tests.md`).
+
+## Landmines
+
+- **Bundle size.** The style JSON must never reach the entry chunk. A bare
+  `import` (not `import()`) anywhere in `lib/spaceAvatar.js` defeats the whole
+  design; check `yarn build` output.
+- **List payloads.** `avatar` is a ~4 kB data URI and the sidebar fetches it per
+  row. That is why the style list is measured rather than picked by eye. The
+  alternative — re-rendering from style + seed in the sidebar — would pull the
+  style chunks into the sidebar's load path, which is worse. Do not add
+  `avatar` to any pagination-heavy query without need.
+- **Desk usability.** `avatar` is a Long Text holding a data URI; mark it hidden
+  or read-only or the Wiki Space form becomes a wall of text.
+- **Tailwind literals.** Any `lucide-*` class that is not literally present in
+  scanned source renders blank. Staying inside `TAB_ICONS` is what avoids this
+  on both the SPA and reader sides.
+- **Cache.** Space edits are cached on the reader; clear space caches on update
+  the way the existing logo fields do. Version-3 CR whitelists do not apply —
+  `Wiki Space` is not a `Wiki Document`.
+- **SVG is a script host.** A stored avatar is a field a Wiki Manager can write.
+  It only ever becomes an `<img>` source, never markup, and only after it proves
+  to be an SVG data URI — on both the JS and the Python side.
+
+## Progress log
+
+- 2026-09-01 — Spec written from `wiki-proto` + hive reference read.
+- 2026-09-01 — Decisions locked: tabs removed, /spaces retired, duckdb+pandas approved, avatar auto-roll on create.
+- 2026-09-07 — Rewritten against the settings-panel screenshot. Generate tab becomes an Icon tab (swatches + grid + one Shuffle); style and variant `Select`s dropped; public reader and OG card pulled into scope; icon set fixed to `TAB_ICONS`; clearing made one-directional.
+- 2026-09-07 — Phases 1 and 2 built: the fields, `SpaceAvatar`, `SpaceIdentityPicker`, and the generator behind Shuffle. `disco` dropped on measurement; the credit line dropped on review.
+- 2026-09-07 — Phase 3 built: `wiki.utils.space_mark` ports the resolution to Python, a `render_space_mark` macro draws it in both headers and the switcher rows, and the social card draws a generated mark or an icon square (TEMPLATE_VERSION 7, ten new palette tokens under the drift test).
+- 2026-09-07 — Phase 4 built: the picker emits a patch instead of saving, so the create dialog reuses it whole and rolls a mark when it opens.
+- 2026-09-07 — Phase 5 built: `e2e/tests/space-logo-picker.spec.ts`. It caught a real one: each patch names all five fields, so a colour save still in flight committed after the icon save and wiped the icon. The picker now builds every patch from the last choice rather than from the caller's copy, and the settings panel chains its writes.
diff --git a/specs/ia_refactor/04-overview-analytics.md b/specs/ia_refactor/04-overview-analytics.md
new file mode 100644
index 000000000..84cdffd94
--- /dev/null
+++ b/specs/ia_refactor/04-overview-analytics.md
@@ -0,0 +1,99 @@
+# Overview Page + Page Analytics (Builder-style)
+
+Date: 2026-09-01
+Status: **Planned — builds last** in the IA program, but phase 1 (tracking)
+should merge early so data accumulates.
+Prototype: `wiki-proto` — `Overview.vue`, analytics stubs in `data.ts`.
+Reference implementation: `apps/builder` — `builder/builder_analytics.py`,
+`builder/api.py` (`get_page_analytics`, `get_overall_analytics`),
+`frontend/src/components/Settings/{GlobalAnalytics,PageAnalytics}.vue`.
+
+## Problem
+
+The app lands on a space list that answers only "what spaces exist". Wiki
+owners have no answer to: what is being read, what are readers searching for
+and not finding, and which pages need work. All of that data is either free
+(Frappe's `Web Page View` tracking) or cheap to log.
+
+## Goal
+
+`/` becomes the Overview: a KPI strip (views, visitors, searches, no-result
+searches — each with delta vs the previous period), a views-over-time
+AreaChart scoped wiki-wide or per space, views-by-space, top pages, top
+searches (no-result rows flagged red), and a "needs attention" list. Range:
+7/30/90 days. Analytics machinery built like Frappe Builder's.
+
+## Decisions
+
+| # | Decision | Choice |
+|---|----------|--------|
+| 1 | View source | Frappe's own `Web Page View` rows (`frappe.website.doctype.web_page_view.make_view_log`), keyed by `path`. Wiki pages are website routes, so published-reader traffic is already loggable — ensure tracking is enabled for wiki routes and that the SPA reader's client-side navigations also fire `make_view_log` (the Jinja page load logs; SPA route swaps must call it explicitly). |
+| 2 | Aggregation engine | **Builder's pattern**: per-site DuckDB file (`wiki_analytics.duckdb`) fed by a scheduled ingestion job copying `Web Page View` (and search log) rows; read-only connections for dashboard queries with brief lock retries. Port `builder_analytics.py`'s `DuckDBConnection`, ingestion, interval formats, where-clause builders — trimmed to what the Overview needs. `duckdb` + `pandas` as new wiki dependencies **approved 2026-09-01**. |
+| 3 | Route → space mapping | A view row's `path` maps to a space by longest-prefix match on `Wiki Space.route`. Resolved at query time (spaces are few); a space rename (update_routes) simply re-buckets history — accepted. |
+| 4 | Search logging | New doctype `Wiki Search Log` (term, normalized term, result_count, space, user hash, creation) written by the existing search endpoint(s), reader and app alike. "No-result search" = result_count 0. This is the one metric an owner can act on directly (content gap), so it earns a doctype. |
+| 5 | Needs attention | Computed server-side, no new storage: **Stale** (page `modified` older than N months, default 6), **Unpublished but linked** (unpublished doc with inbound links from published pages), **Low rating** (from existing `Wiki Feedback`, below threshold with a minimum sample). Broken-link detection is **out of scope** (needs a crawler). |
+| 6 | API surface | Whitelisted, manager/space-read gated like builder's `@has_page_read`: `wiki.api.analytics.get_overview(range, space)` returning kpis + series + by-space + top-pages, `get_top_searches(range)`, `get_needs_attention()`. Deltas computed server-side against the equal-length previous window (prototype rule: every delta is window vs window-before). |
+| 7 | UI | Prototype `Overview.vue` near-verbatim: no cards — sections separated by space and ink ladder; KPI strip with divide-x rules; `AreaChart` from `frappe-ui/charts`; `TabButtons` range switch in the h-12 header; scope `Select` on the chart only (KPI strip stays wiki-wide); fixed-width `Progress` meters in views-by-space; row-links navigate into spaces/pages; red badge only on no-result searches; "All clear" empty state for needs-attention. |
+| 8 | Access | Overview is for wiki managers/editors. Non-managers landing on `/` see the placeholder from spec 01 (pick a space) — analytics sections require the permission. |
+| 9 | Empty data | First run with no view rows: KPI strip shows zeros with "No data yet" hint + a pointer to enable tracking; page must not look broken. |
+
+## Current state
+
+- No view tracking, no search logging, no analytics code in wiki today
+  (checked: no `Web Page View` / `view_log` references).
+- `Wiki Feedback` doctype exists — feeds the low-rating signal.
+- `frappe-ui/charts` AreaChart available (used in prototype).
+- Spec 01 owns the `/` route + "Overview" sidebar item; this spec fills the
+  placeholder.
+
+## Phases
+
+1. **Tracking (merge early, independent of UI).** Ensure `Web Page View`
+   logging on published wiki routes incl. SPA navigations; add
+   `Wiki Search Log` + write path from the search endpoint. Unit tests on the
+   write paths.
+2. **Aggregation.** Port builder's DuckDB module (connection, setup, scheduled
+   ingestion of views + searches), `get_overview` API with range/scope +
+   deltas. Test against fabricated rows.
+3. **Overview UI tracer.** KPI strip + AreaChart from the real API, range
+   switch. Ship behind manager gate; placeholder retires.
+4. **Sections.** Views-by-space, top pages, top searches.
+5. **Needs attention.** Stale + low-rating first; unpublished-but-linked once
+   an inbound-link query exists.
+
+## Regression tests
+
+- Unit: previous-window delta math (incl. empty previous window ⇒ no delta),
+  longest-prefix space bucketing, no-result search flagging.
+- Unit: ingestion idempotence (re-run doesn't duplicate rows) — builder tracks
+  a high-water mark; keep it.
+- e2e: overview renders with zero data (empty states) and with seeded data.
+
+## Landmines
+
+- **DuckDB file lock**: one read-write connection is exclusive — dashboard
+  reads must always pass `read_only=True` (builder's retry wrapper handles
+  the ingestion window).
+- New Python deps (`duckdb`, `pandas`) — check bench/site install story and
+  wheel availability on the CI image before committing to phase 2; the
+  fallback is plain MariaDB aggregation on `Web Page View` (slower, no new
+  deps) with the same API shape, so the UI never has to know.
+- `Web Page View` logging is site-config dependent; the Overview must degrade
+  informatively, not silently zero.
+- Search endpoints may be hit by guests at volume — `Wiki Search Log` writes
+  must be cheap (insert-only, background where possible) and rate-safe.
+- Local dev site has 1847 spaces / 11k docs — needs-attention queries must be
+  indexed/bounded from day one.
+
+## Open questions
+
+- Retention: cap DuckDB/`Web Page View` history (builder keeps everything)?
+  Suggest 180 days to match the prototype's series.
+- Per-space overview (the prototype's chart scope hints at it) — same API
+  scoped by space could later power a space-level dashboard tab; out of scope
+  now.
+
+## Progress log
+
+- 2026-09-01 — Spec written from `wiki-proto` + builder analytics read.
+- 2026-09-01 — Decisions locked: tabs removed, /spaces retired, duckdb+pandas approved, avatar auto-roll on create.
diff --git a/specs/ia_refactor/README.md b/specs/ia_refactor/README.md
new file mode 100644
index 000000000..3a1ae922a
--- /dev/null
+++ b/specs/ia_refactor/README.md
@@ -0,0 +1,73 @@
+# Information Architecture Refactor
+
+Date: 2026-09-01
+Status: **In progress.** Spec 1 is built (all seven phases) and spec 2 is built
+(all six, including the alignment pass against the prototype); specs 3–4 are
+written and unstarted.
+
+Source of truth for the target design: the **`wiki-proto`** Sketch prototype
+(https://sketch.netchamp.dev/u/nagariahussain/wiki-proto). Every spec in this
+directory maps a slice of that prototype onto the real app. When a spec and the
+prototype disagree, the spec wins — it records the decisions made while
+reconciling the prototype with the real data model.
+
+## The target IA in one paragraph
+
+There is only ever **one navigation column**, and it drills. At the top level
+(the "library") the sidebar lists the spaces with their identity tiles and
+state icons, plus Overview / Search / Change Requests. Entering a space, the
+sidebar **becomes the space**: back button, space identity, a mode strip
+(git-synced or open-draft), tree search, and the document tree. The content
+column keeps full width for the editor. The old layout — global static sidebar
++ `/spaces` list page + a second resizable tree column inside SpaceDetails —
+collapses into this model.
+
+## Specs, in build order
+
+| # | Spec | What | Depends on |
+|---|------|------|-----------|
+| 1 ✅ | [01-sidebar-spaces.md](01-sidebar-spaces.md) | Spaces in the sidebar: LibrarySidebar + SpaceSidebar drill-in, route changes, retirement of the `/spaces` list page and the in-page tree column | — |
+| 2 ✅ | [02-space-editor-revamp.md](02-space-editor-revamp.md) | Space details / editor page revamp: header row, page settings side panel, centered prose, floating outline, SettingsDialog-based space settings | 1 |
+| 3 | [03-space-avatar.md](03-space-avatar.md) | Space identity: upload an image **or** generate abstract art (DiceBear, hive-style) | 1 (renders in the new sidebar) |
+| 4 | [04-overview-analytics.md](04-overview-analytics.md) | Overview landing page with wiki-wide analytics, built like Frappe Builder's analytics | 1; **comes later** |
+
+Each spec is its own feature branch and its own PR (`feat/ia-sidebar-spaces`,
+etc.), branched off `upstream/develop`, spec committed first.
+
+## Prototype → codebase map
+
+| Prototype file | Real counterpart today | Fate |
+|---|---|---|
+| `App.vue` (one nav column + main) | `layouts/MainLayout.vue` + `components/Sidebar.vue` | MainLayout keeps shells/access/theme; Sidebar is replaced by the drill-in pair |
+| `LibrarySidebar.vue` | `components/Sidebar.vue` + `components/SpaceList.vue` (page) | New component; SpaceList page retires (spec 1) |
+| `SpaceSidebar.vue` | `components/SpaceTreePanel.vue` + `SpaceChromeBar.vue` + `ContributionBanner.vue` | New component; chrome bar and banner content move into the mode strip (spec 1) |
+| `DocumentTree.vue` | `components/WikiDocumentList.vue` / `WikiTree.vue` | Kept — the real tree already handles DnD, CR overlays, dialogs. Restyle only |
+| `PageContent.vue` | `components/WikiDocumentPanel.vue` + `WikiEditor.vue` | Revamp in place (spec 2) |
+| `PageSettingsPanel.vue` | `components/PageSettings.vue` (dialog) | Becomes a right side panel (spec 2) |
+| `SpaceSettingsDialog.vue` | `components/SpaceSettings/*` | Rebuilt on frappe-ui `SettingsDialog` (spec 2) |
+| `Overview.vue` | — (no counterpart) | New page (spec 4) |
+| `ChangeRequests.vue` | `pages/Contributions.vue` | Kept; regrouped by space later — out of scope for this program |
+| — (no tabs in prototype) | `WikiTabBar.vue`, `useSpaceTabs.js`, `lib/spaceTabs.js`, reader `tabs.html` | Feature removed (spec 1) |
+| space `icon`/`colour` stub fields | — (`Wiki Space` has only logos/favicon) | New identity fields (spec 3) |
+
+## Program-level decisions
+
+| # | Decision | Choice |
+|---|----------|--------|
+| 1 | Rollout | Incremental, spec by spec. No long-lived "v4 layout" branch. Each PR leaves the app fully working. |
+| 2 | Tabs (`enable_tabs`) | **Removed** (decided 2026-09-01). The drill-in sidebar shows the whole tree; tab groups render as ordinary top-level groups. App UI removal is part of spec 1; reader-side rendering and backend field deprecation are its final phase. `lib/tabIcons.js` survives — it is the curated lucide safelist behind IconPicker, not tab-specific. |
+| 3 | Mobile | The drill-in model maps 1:1 onto the existing MobileShell drawers: library = Spaces tab, space sidebar = the existing tree drawer. No separate mobile design. |
+| 4 | Overview timing | Spec 4 is written now but built last — it needs view tracking to accumulate data, so the tracking sub-phase (4.1) should merge early even though the page comes later. |
+
+## Landmines (program-wide)
+
+- **Public reader SPA DOM twins**: the Jinja templates and `sidebar.html`
+  nav-store JS duplicate reader markup. This program touches only the **app**
+  (`/wiki-app`); do not let sidebar restyling leak into the reader templates.
+- **`Wiki Document` field whitelists**: ~40 explicit field enumerations in the
+  CR/revision flow. Spec 3 adds fields to `Wiki Space` (safe), but any tree
+  metadata added later (e.g. pinned order on nodes) hits the whitelists.
+- **Lucide safelist**: DB-stored `lucide-*` classes render blank unless the
+  literal appears in a scanned `.vue`. Space icon tiles reuse the curated
+  picker lists that already act as the safelist.
+- **Concurrent sessions** dirty this checkout; never stage by directory.
diff --git a/specs/test_fixture_factory.md b/specs/test_fixture_factory.md
new file mode 100644
index 000000000..b3ef401c2
--- /dev/null
+++ b/specs/test_fixture_factory.md
@@ -0,0 +1,170 @@
+# Test fixture factory: every test owns and destroys its own data
+
+## Status
+
+- **Branch**: `feat/frappe-ui-beta55`
+- **Category**: tests / dx
+- **Planned at**: 2026-09-07
+
+## Why this matters
+
+E2E runs leave permanent debris on the site. Measured on `wiki.localhost` before
+any of this work:
+
+```
+spaces:               5
+documents:          296
+orphan root groups: 101
+CRs: 32   revisions: 99
+```
+
+101 orphan root groups against 5 live spaces. Two independent leaks produce them.
+
+### Leak 1 — specs build a root group the space already made
+
+`WikiSpace.before_insert` calls `create_root_group()`, so every `Wiki Space`
+arrives with a root group already attached. Eighteen specs nonetheless do this:
+
+```ts
+const space = await createTestWikiSpace(request, { route });
+const rootGroup = await createTestWikiDocument(request, {
+    title: 'Root', route: `${route}/root`, is_group: true,
+});
+await updateDoc(request, 'Wiki Space', space.name, { root_group: rootGroup.name });
+```
+
+The replacement wins, and the auto-created group is stranded: it carries no
+`wiki_space` value and is not a descendant of the new root. `WikiSpace.on_trash`
+deletes descendants of `self.root_group` plus anything whose `wiki_space` points
+at the space — the orphan matches neither clause. Every seeded space leaks
+exactly one root group, forever, even when the spec cleans up correctly.
+
+### Leak 2 — specs that author into whatever space sorts first
+
+Sixteen specs never seed at all. They `goto(APP_BASE)`, click
+`spaceLinkSelector()` (bare — "any space"), and create pages through the UI.
+Those pages land in a real space and are never removed. This is also the
+mechanism behind the git-sync trap already documented in `cleanupWikiSpacesByRoute`:
+a read-only space sorting first strands every later spec that expects a
+"New Page" button.
+
+### Cost of the current seeding ritual
+
+Server-side work is cheap; round trips are not.
+
+| Operation | Server time |
+|---|---|
+| space insert (incl. auto root group) | 0.38s |
+| 3 child documents | 0.16s |
+| delete space, full cascade | 0.27s |
+
+A typical `beforeAll` spends **9 HTTP round trips** (space, root group,
+`updateDoc`, then one per page) on ~0.5s of actual server work.
+
+## Approach
+
+One factory, used by every test, that seeds in bulk and tears down by
+construction rather than by remembering to.
+
+### Seeding is `1 + depth` round trips
+
+`frappe.client.insert_many` inserts up to 200 documents in a single request and
+returns their names positionally. The tree cannot go in one call: Wiki Document
+has no `autoname`, and `set_new_name` (`frappe/model/naming.py:160`) nulls any
+explicit `name` for that case, so a child's `parent_wiki_document` is unknowable
+until its parent's insert returns. So the factory inserts **breadth-first, one
+call per depth level**. Most specs are one level deep: 9 round trips becomes 2.
+
+### Teardown is a single delete
+
+The factory never replaces the root group, so leak 1 disappears. `on_trash`
+already cascades documents, revisions, revision items, sync logs and change
+requests, so one `deleteDoc` on the space reclaims the whole tree — including
+pages a test created through the UI, since SPA drafts are `Wiki Change Request`
+rows bound to the space (`frontend/src/stores/draftWorkspace/syncTransport.js`).
+
+Teardown resolves spaces **by route**, not by the create response, so a space the
+server made but whose response the client never saw — a timed-out create, or a
+Playwright retry that seeded twice — is still swept. This preserves the
+robustness `cleanupWikiSpacesByRoute` was written for.
+
+### Routes carry a fixed prefix
+
+Every factory-made space gets `e2e-<slug>-<counter>-<ts>`. A prefix makes the
+sweeper provably unable to touch a real space.
+
+## Design
+
+### `e2e/helpers/factory.ts`
+
+```ts
+const space = await wiki.space({
+    pages: [
+        { title: 'Alpha' },
+        { title: 'Beta', children: [{ title: 'Gamma' }] },
+    ],
+});
+
+space.name;                 // Wiki Space docname
+space.route;                // e2e-…
+space.rootGroup;            // auto-created, not replaced
+space.page('Alpha').name;   // by title
+space.url();                // /wiki-app/spaces/<name>
+space.url('page', id);      // deeper paths
+```
+
+`SpaceSpec` and `PageSpec` both spread unrecognised keys straight onto the
+document, so `git_synced`, `repo_full_name`, `branch`, `is_tab`, `tab_icon`,
+`source_path`, `sort_order` and anything added later need no factory change.
+
+### `e2e/fixtures.ts`
+
+Re-exports `test` with two fixtures over the same `WikiFactory` class:
+
+- `wiki` — test-scoped. Torn down after each test. The default.
+- `wikiSuite` — worker-scoped, for a `describe` whose tests genuinely share a
+  seed. Owns its own `APIRequestContext` built from the stored auth state,
+  because the built-in `request` fixture is test-scoped.
+
+Teardown runs in the fixture's own `use()` epilogue, so there is no `afterAll`
+to forget and no way for a failing test to skip it.
+
+### `e2e/global.teardown.ts`
+
+Sweeps `e2e-%` spaces and orphan root groups left by a crashed or killed run.
+Wired as a Playwright `teardown` project so it runs once after the suite.
+
+### `wiki/tests/factory.py`
+
+The Python suite already tears down per file, but four modules carry their own
+near-identical `create_test_wiki_space` / `create_test_wiki_document`
+(`test_api.py`, `test_wiki_change_request.py`, `test_wiki_document.py`, plus
+`_create_space` in the same file). One `WikiFixtures` mixin replaces them with
+the same vocabulary as the TypeScript factory.
+
+## Phases
+
+Tracer bullet first: one spec end to end, proving the document count is
+unchanged across a run, before touching the other 33.
+
+1. **Sweep** the existing 101 orphans; add `global.teardown.ts`.
+2. **Factory + fixture**, plus convert `space-default-page.spec.ts`. Verify
+   counts before == after.
+3. **Convert the 18 API-seeding specs** off the manual root group.
+4. **Convert the 16 ambient-space specs** to seed their own space.
+5. **Python `wiki/tests/factory.py`**; migrate the four duplicated helpers.
+
+## Verification
+
+Between each phase, on `wiki.localhost`:
+
+```
+spaces / documents / orphan root groups / CRs / revisions
+```
+
+must be identical before and after a full `yarn test:e2e` run.
+
+## Out of scope
+
+- A leak-detection guard test (considered, explicitly declined).
+- Frontend unit tests — they are pure and touch no server state.
diff --git a/wiki/api/github.py b/wiki/api/github.py
index eecd93261..3b4abab7f 100644
--- a/wiki/api/github.py
+++ b/wiki/api/github.py
@@ -26,7 +26,7 @@
 import secrets
 import time
 from typing import Any
-from urllib.parse import urlencode, urlparse
+from urllib.parse import quote, urlencode, urlparse
 
 import frappe
 import jwt
@@ -196,6 +196,23 @@ def repo_branches(repo_full_name: str, token: str) -> list[str]:
 	return [b.get("name") for b in resp.json() if b.get("name")]
 
 
+def branch_exists(repo_full_name: str, branch: str, token: str) -> bool:
+	"""Whether a single branch exists — the picker allows typing an arbitrary name.
+
+	Goes straight at the branch endpoint instead of scanning `repo_branches`,
+	which only returns the first 100 branches.
+	"""
+	resp = requests.get(
+		f"{GITHUB_API}/repos/{repo_full_name}/branches/{quote(branch)}",
+		headers=_headers(token),
+		timeout=30,
+	)
+	if resp.status_code == 404:
+		return False
+	resp.raise_for_status()
+	return True
+
+
 # --------------------------------------------------------------------------- #
 # Connect-account OAuth (user-to-server) — sources the per-user OAuth token
 # --------------------------------------------------------------------------- #
@@ -505,6 +522,11 @@ def my_repo_branches(repo_full_name: str) -> list[str]:
 	return repo_branches(repo_full_name, _require_user_token())
 
 
+@frappe.whitelist()
+def my_branch_exists(repo_full_name: str, branch: str) -> bool:
+	return branch_exists(repo_full_name, branch, _require_user_token())
+
+
 @frappe.whitelist()
 def app_install_url() -> str | None:
 	"""Public link to install the configured App (so it shows up as an installation)."""
diff --git a/wiki/api/og_image.py b/wiki/api/og_image.py
index ca538ac9f..c9e3963cf 100644
--- a/wiki/api/og_image.py
+++ b/wiki/api/og_image.py
@@ -25,9 +25,11 @@
 from frappe.utils.preview import get_preview_from_html
 from werkzeug.wrappers import Response
 
+from wiki.utils import lucide_svg, space_mark
+
 # Bumped whenever the card template or its token block changes; it is part of
 # the cache fingerprint, so a bump invalidates every cached card for free.
-TEMPLATE_VERSION = "4"
+TEMPLATE_VERSION = "7"
 
 OG_WIDTH = 1200
 OG_HEIGHT = 630
@@ -130,16 +132,35 @@ def _title_font_size(title: str) -> int:
 	return 48
 
 
+def _card_mark(space_doc) -> dict:
+	"""The space's mark as the card draws it: an image URL, or an icon on a tint.
+
+	The same resolution the reader header uses, narrowed to what Chromium can
+	fetch. A generated mark is an SVG ``data:`` URI, which the screenshotter
+	renders inline with no request at all; an uploaded logo has to be a
+	site-local path. ``light_mode_logo`` stays as the v2 fallback for spaces
+	that only ever set that one.
+	"""
+	empty = {"logo_url": "", "avatar_url": "", "icon_svg": "", "mark_color": ""}
+
+	mark = space_mark(space_doc)
+	# A generated mark and an uploaded logo are drawn differently -- the first
+	# is a square the card rounds like the reader does, the second is often a
+	# wordmark that must not be cropped -- so they travel as separate keys.
+	if mark["mode"] == "avatar":
+		return {**empty, "avatar_url": mark["image"]}
+	if mark["mode"] == "icon":
+		return {**empty, "icon_svg": lucide_svg(mark["icon"], "og-glyph"), "mark_color": mark["color"]}
+
+	return {**empty, "logo_url": _safe_asset_url(space_doc.app_switcher_logo or space_doc.light_mode_logo)}
+
+
 def _og_context(doc) -> dict:
 	"""The complete set of inputs the card template consumes."""
 	wiki_space = doc.get_wiki_space()
-	logo_url = ""
+	mark = {"logo_url": "", "avatar_url": "", "icon_svg": "", "mark_color": ""}
 	if wiki_space:
-		space_doc = frappe.get_cached_doc("Wiki Space", wiki_space["name"])
-		# app_switcher_logo is the one the reader header actually renders, so
-		# it is the space's real mark; light_mode_logo is a v2 leftover kept as
-		# a fallback for spaces that only ever set that one.
-		logo_url = _safe_asset_url(space_doc.app_switcher_logo or space_doc.light_mode_logo)
+		mark = _card_mark(frappe.get_cached_doc("Wiki Space", wiki_space["name"]))
 
 	# The page's own title, not meta_title: the card is a visual object where
 	# the title reads as a label for the page you are about to open, while
@@ -150,7 +171,7 @@ def _og_context(doc) -> dict:
 		"title_font_size": _title_font_size(title),
 		"breadcrumb_trail": _breadcrumb_trail(doc),
 		"space_name": (wiki_space.get("space_name") if wiki_space else "") or "",
-		"logo_url": logo_url,
+		**mark,
 	}
 
 
@@ -159,7 +180,7 @@ def og_fingerprint(ctx: dict) -> str:
 
 	Fingerprinting inputs rather than ``modified`` means a content-only edit
 	leaves a still-correct card alone, while a title / breadcrumb / space-name /
-	logo change invalidates on its own -- no invalidation hook anywhere.
+	mark change invalidates on its own -- no invalidation hook anywhere.
 	"""
 	parts = [
 		TEMPLATE_VERSION,
@@ -167,6 +188,11 @@ def og_fingerprint(ctx: dict) -> str:
 		ctx["breadcrumb_trail"],
 		ctx["space_name"],
 		ctx["logo_url"],
+		ctx["avatar_url"],
+		# The icon markup, not its name: a space that swaps its tint alone
+		# still has to invalidate, and the colour only reaches the card here.
+		ctx["icon_svg"],
+		ctx["mark_color"],
 		str(OG_WIDTH),
 		str(OG_HEIGHT),
 	]
diff --git a/wiki/api/test_github.py b/wiki/api/test_github.py
index 729499711..5850dbff5 100644
--- a/wiki/api/test_github.py
+++ b/wiki/api/test_github.py
@@ -209,6 +209,19 @@ def test_repo_branches_lists_names(self):
 		self.assertEqual(result, ["main", "develop"])
 		self.assertIn("/repos/acme/docs/branches", fake.get_calls[0][0])
 
+	def test_branch_exists_true_for_200(self):
+		fake = _FakeRequests(get=lambda url, headers: _FakeResponse({"name": "feature/docs"}))
+		github.requests = fake
+
+		self.assertTrue(github.branch_exists("acme/docs", "feature/docs", "user-oauth-token"))
+		# Slashes in the branch name must survive as path segments GitHub accepts.
+		self.assertIn("/repos/acme/docs/branches/feature/docs", fake.get_calls[0][0])
+
+	def test_branch_exists_false_for_404(self):
+		github.requests = _FakeRequests(get=lambda url, headers: _FakeResponse({}, status=404))
+
+		self.assertFalse(github.branch_exists("acme/docs", "nope", "user-oauth-token"))
+
 	# ----- connect-account OAuth (TB4b) ----- #
 
 	def test_oauth_state_round_trips_and_is_single_use(self):
diff --git a/wiki/api/wiki_space.py b/wiki/api/wiki_space.py
index c0deb1aa8..5e5ffc2e9 100644
--- a/wiki/api/wiki_space.py
+++ b/wiki/api/wiki_space.py
@@ -58,6 +58,45 @@ def set_space_contributions(space_id: str, allow: int | str | bool) -> bool:
 	return bool(value)
 
 
+@frappe.whitelist()
+def get_restricted_spaces(spaces: list | str) -> list[str]:
+	"""Return which of `spaces` are readable only by specific roles.
+
+	A space with no role rows is open to every logged-in user, and one whose
+	rows include `Guest` is public (``frappe.get_roles()`` returns Guest for
+	anonymous requests) -- see `wiki.permissions.can_read_space`. Everything
+	else is restricted, which is what the sidebar's lock icon means.
+
+	One grouped query rather than a role list per row: the sidebar pages 50
+	spaces at a time, and the child table is only ever read for this flag.
+
+	Uses `get_list` on Wiki Space first, so spaces the user cannot read are
+	dropped before their role rows are looked at.
+	"""
+	if isinstance(spaces, str):
+		spaces = frappe.parse_json(spaces)
+	if not spaces:
+		return []
+
+	visible = {
+		row.name for row in frappe.get_list("Wiki Space", filters={"name": ["in", spaces]}, fields=["name"])
+	}
+	if not visible:
+		return []
+
+	rows = frappe.get_all(
+		"Wiki Space Role",
+		filters={"parenttype": "Wiki Space", "parent": ["in", list(visible)]},
+		fields=["parent", "role"],
+	)
+
+	roles_by_space = {}
+	for row in rows:
+		roles_by_space.setdefault(row.parent, set()).add(row.role)
+
+	return sorted(name for name, roles in roles_by_space.items() if roles and "Guest" not in roles)
+
+
 @frappe.whitelist()
 def get_wiki_tree(space_id: str) -> dict:
 	"""Get the tree structure of Wiki Documents for a given Wiki Space."""
@@ -85,8 +124,6 @@ def _build_wiki_tree_for_api(documents: list[str]) -> list[dict]:
 			"name",
 			"title",
 			"is_group",
-			"is_tab",
-			"tab_icon",
 			"parent_wiki_document",
 			"route",
 			"is_published",
@@ -139,7 +176,6 @@ def reorder_wiki_documents(
 	"""
 	import json
 
-	from wiki.frappe_wiki.doctype.wiki_document.wiki_document import is_top_level_group
 	from wiki.permissions import assert_space_writable
 
 	siblings_list = json.loads(siblings) if isinstance(siblings, str) else siblings
@@ -155,12 +191,6 @@ def reorder_wiki_documents(
 	# Direct reorder for users with write permission
 	parent_changed = doc.parent_wiki_document != new_parent
 
-	# This path writes parent_wiki_document with a raw db.set_value, so
-	# WikiDocument.validate never runs — the tab rule has to be re-asserted here
-	# or a drag into a subgroup would silently produce a nested tab.
-	if parent_changed and doc.is_tab and not is_top_level_group(new_parent):
-		frappe.throw(_("A tab must stay at the top level. Remove the tab flag first to move it."))
-
 	frappe.flags.in_reorder_wiki_documents = True
 	try:
 		if parent_changed:
diff --git a/wiki/frappe_wiki/doctype/wiki_change_request/test_wiki_change_request.py b/wiki/frappe_wiki/doctype/wiki_change_request/test_wiki_change_request.py
index a30a58b4a..91870b262 100644
--- a/wiki/frappe_wiki/doctype/wiki_change_request/test_wiki_change_request.py
+++ b/wiki/frappe_wiki/doctype/wiki_change_request/test_wiki_change_request.py
@@ -824,6 +824,30 @@ def test_get_cr_tree_returns_children(self):
 		grandchild_keys = {node["doc_key"] for node in group_node.get("children") or []}
 		self.assertSetEqual(grandchild_keys, {child_key})
 
+	def test_get_cr_tree_hides_root_group_when_its_doc_key_changed(self):
+		"""A root group whose doc_key no longer matches the revision must not
+		render as a row inside its own tree."""
+		space = create_test_wiki_space()
+		page = create_test_wiki_document(space.root_group, title="Page A")
+		cr = create_change_request(space.name, "CR root key drift")
+
+		# Recreating a root group (e.g. restoring a deleted one) gives it a fresh
+		# doc_key, so the lookup that finds the tree root by key stops matching.
+		frappe.db.set_value(
+			"Wiki Document", space.root_group, "doc_key", "drifted000000", update_modified=False
+		)
+
+		tree = get_cr_tree(cr.name)
+
+		children = tree.get("children") or []
+		page_key = frappe.get_value("Wiki Document", page.name, "doc_key")
+		self.assertSetEqual({node["doc_key"] for node in children}, {page_key})
+		self.assertNotIn(
+			space.root_group,
+			{node.get("document_name") for node in children},
+			"the root group itself must never be a top-level row",
+		)
+
 	def test_list_change_requests_filters_by_status(self):
 		space = create_test_wiki_space()
 		create_test_wiki_document(space.root_group, title="Page A")
diff --git a/wiki/frappe_wiki/doctype/wiki_change_request/wiki_change_request.py b/wiki/frappe_wiki/doctype/wiki_change_request/wiki_change_request.py
index fcb461aa3..201ff7e2c 100644
--- a/wiki/frappe_wiki/doctype/wiki_change_request/wiki_change_request.py
+++ b/wiki/frappe_wiki/doctype/wiki_change_request/wiki_change_request.py
@@ -710,13 +710,21 @@ def sort_children(nodes: list[dict[str, Any]]) -> list[dict[str, Any]]:
 	if root_key and root_key in doc_map:
 		children = sort_children(doc_map[root_key]["children"])
 	else:
-		children = sort_children(
-			[
-				node
-				for node in doc_map.values()
-				if not node.get("parent_key") or node.get("parent_key") not in doc_map
-			]
-		)
+		parentless = [
+			node
+			for node in doc_map.values()
+			if not node.get("parent_key") or node.get("parent_key") not in doc_map
+		]
+		# A revision always carries the space's root group as its one parentless
+		# node — every genuine top-level page is parented to it. The key recorded
+		# in the revision can disagree with the one on the Wiki Document (a
+		# restored root group gets a fresh doc_key), and the lookup above then
+		# misses; recognise the root by that shape instead of returning it as a
+		# row inside its own tree.
+		if len(parentless) == 1 and parentless[0].get("is_group"):
+			children = sort_children(parentless[0]["children"])
+		else:
+			children = sort_children(parentless)
 
 	return {
 		"children": children,
diff --git a/wiki/frappe_wiki/doctype/wiki_document/test_wiki_document.py b/wiki/frappe_wiki/doctype/wiki_document/test_wiki_document.py
index 2d9dcdd98..c2b94ab32 100644
--- a/wiki/frappe_wiki/doctype/wiki_document/test_wiki_document.py
+++ b/wiki/frappe_wiki/doctype/wiki_document/test_wiki_document.py
@@ -27,7 +27,6 @@
 	download_pdf,
 	get_public_wiki_tree,
 	get_rendered_content,
-	get_space_tabs,
 	process_navbar_items,
 )
 from wiki.wiki.markdown import render_markdown, render_markdown_with_toc
@@ -71,7 +70,6 @@ def create_test_wiki_space(test_case, space_name, route, root_group, **kwargs):
 		"is_published": kwargs.get("is_published", True),
 		"switcher_order": kwargs.get("switcher_order", 0),
 		"git_synced": kwargs.get("git_synced", False),
-		"enable_tabs": kwargs.get("enable_tabs", False),
 		"repo_full_name": kwargs.get("repo_full_name"),
 		"branch": kwargs.get("branch"),
 	}
@@ -1962,17 +1960,19 @@ def assertEntry(self, lines, route, prefix, suffix=""):
 		self.assertTrue(entry.startswith(prefix), f"{entry!r} does not start with {prefix!r}")
 		self.assertTrue(entry.endswith(suffix), f"{entry!r} does not end with {suffix!r}")
 
-	def _space_with_tree(self, guest_readable=True, enable_tabs=True):
-		"""A space with untabbed content, a tab, a nested group and a draft page."""
+	def _space_with_tree(self, guest_readable=True):
+		"""A space with top-level content, a group, a nested group and a draft page.
+
+		The group carries a stale `is_tab` flag: tabs are gone, and the index has
+		to treat such a group as any other.
+		"""
 		root_group = create_test_wiki_document(self, "Root Llms", is_group=True)
-		# The space comes first: `is_tab` validates against the space's root group.
 		space = create_test_wiki_space(
 			self,
 			"Llms Space",
 			self._unique("llms-space"),
 			root_group.name,
 			roles=[("Guest", "Read")] if guest_readable else [],
-			enable_tabs=enable_tabs,
 		)
 
 		intro = create_test_wiki_document(
@@ -1981,14 +1981,13 @@ def _space_with_tree(self, guest_readable=True, enable_tabs=True):
 		intro.meta_description = "What this is."
 		intro.save()
 
-		tab = create_test_wiki_document(self, "API Reference", parent=root_group.name, is_group=True)
-		tab.is_tab = 1
-		tab.save()
+		group = create_test_wiki_document(self, "API Reference", parent=root_group.name, is_group=True)
+		frappe.db.set_value("Wiki Document", group.name, "is_tab", 1)
 		endpoints = create_test_wiki_document(
-			self, "Endpoints", parent=tab.name, slug=self._unique("endpoints")
+			self, "Endpoints", parent=group.name, slug=self._unique("endpoints")
 		)
 
-		nested_group = create_test_wiki_document(self, "Internals", parent=tab.name, is_group=True)
+		nested_group = create_test_wiki_document(self, "Internals", parent=group.name, is_group=True)
 		nested = create_test_wiki_document(
 			self, "Nested Page", parent=nested_group.name, slug=self._unique("nested")
 		)
@@ -2024,29 +2023,17 @@ def test_space_llms_txt_mirrors_the_sidebar(self):
 
 		self.assertEqual(lines[0], "# Llms Space")
 		self.assertIn("> What this is.", lines)
-		self.assertIn("## Home", lines)
-		self.assertIn("## API Reference", lines)
 
-		# Untabbed top-level content lands under Home, tabbed content under its tab.
+		# One section per space, titled after it. A group flagged `is_tab` is a
+		# label in that section like any other group — never a section of its own.
+		self.assertEqual([line for line in lines if line.startswith("## ")], ["## Llms Space"])
 		self.assertEntry(lines, tree.intro.route, "- [Introduction](", "): What this is.")
-		self.assertEntry(lines, tree.endpoints.route, "- [Endpoints](", ")")
+		self.assertIn("- **API Reference**", lines)
+		self.assertEntry(lines, tree.endpoints.route, "  - [Endpoints](", ")")
 
 		# A group has no page of its own, so it is a label; its children indent under it.
-		self.assertIn("- **Internals**", lines)
-		self.assertEntry(lines, tree.nested.route, "  - [Nested Page](", ")")
-
-	def test_space_llms_txt_drops_tab_sections_when_tabs_are_off(self):
-		"""The index mirrors the reader, which ignores is_tab for such a space."""
-		tree = self._space_with_tree(enable_tabs=False)
-
-		body = _make_request(self.TEST_CLIENT, "get", f"/{tree.space.route}/llms.txt").get_data(as_text=True)
-		lines = body.splitlines()
-
-		self.assertNotIn("## Home", lines)
-		self.assertIn("## Llms Space", lines)
-		# Every page is still listed, just under the one section.
-		self.assertEntry(lines, tree.intro.route, "- [Introduction](", "): What this is.")
-		self.assertEntry(lines, tree.endpoints.route, "  - [Endpoints](", ")")
+		self.assertIn("  - **Internals**", lines)
+		self.assertEntry(lines, tree.nested.route, "    - [Nested Page](", ")")
 
 	def test_space_llms_txt_omits_unpublished_pages(self):
 		tree = self._space_with_tree()
@@ -2517,11 +2504,9 @@ def test_unpublish_index_removal_discarded_on_rollback(self):
 		self.assertEqual(rows[0]["c"], 1)
 
 
-class TestTabValidation(WikiDocumentTestBase):
-	"""`is_tab` is only meaningful on a top-level group — enforce both halves.
-
-	A leaf tab or a nested tab has nowhere to render, so the tab bar would drop
-	it silently. These reject at validate so the bad state never lands.
+class TestStaleTabFlags(WikiDocumentTestBase):
+	"""Tabs are gone; `is_tab` / `tab_icon` survive only so old revisions and
+	change requests still apply. Nothing may read them as navigation any more.
 	"""
 
 	def _space(self):
@@ -2531,253 +2516,49 @@ def _space(self):
 		)
 		return space, root_group
 
-	def test_top_level_group_can_be_a_tab(self):
-		space, root_group = self._space()
-
-		tab = create_test_wiki_document(self, "Accounting", parent=root_group.name, is_group=True)
-		tab.is_tab = 1
-		tab.tab_icon = "lucide-wallet"
-		tab.save()
-
-		self.assertEqual(frappe.db.get_value("Wiki Document", tab.name, "is_tab"), 1)
-		self.assertEqual(frappe.db.get_value("Wiki Document", tab.name, "tab_icon"), "lucide-wallet")
-
-	def test_leaf_cannot_be_a_tab(self):
-		space, root_group = self._space()
-
-		leaf = create_test_wiki_document(self, "A Page", parent=root_group.name)
-		leaf.is_tab = 1
-
-		with self.assertRaises(frappe.ValidationError):
-			leaf.save()
-
-	def test_nested_group_cannot_be_a_tab(self):
+	def test_a_flagged_group_saves_anywhere_in_the_tree(self):
+		"""The old rule — a tab is a top-level group — is no longer enforced,
+		so a revision carrying the flag on a nested group still applies."""
 		space, root_group = self._space()
 
 		outer = create_test_wiki_document(self, "Outer", parent=root_group.name, is_group=True)
 		inner = create_test_wiki_document(self, "Inner", parent=outer.name, is_group=True)
 		inner.is_tab = 1
+		inner.tab_icon = "lucide-wallet"
+		inner.save()
 
-		with self.assertRaises(frappe.ValidationError):
-			inner.save()
-
-	def test_clearing_is_group_on_a_tab_is_rejected(self):
-		space, root_group = self._space()
-
-		tab = create_test_wiki_document(self, "Selling", parent=root_group.name, is_group=True)
-		tab.is_tab = 1
-		tab.save()
-
-		tab.is_group = 0
-		with self.assertRaises(frappe.ValidationError):
-			tab.save()
-
-	def test_reparenting_a_tab_below_top_level_is_rejected(self):
-		space, root_group = self._space()
-
-		tab = create_test_wiki_document(self, "Stock", parent=root_group.name, is_group=True)
-		tab.is_tab = 1
-		tab.save()
-		other = create_test_wiki_document(self, "Other", parent=root_group.name, is_group=True)
-
-		tab.parent_wiki_document = other.name
-		with self.assertRaises(frappe.ValidationError):
-			tab.save()
-
-	def test_reorder_api_rejects_moving_a_tab_off_top_level(self):
-		"""The reorder endpoint writes parent_wiki_document with a raw db.set_value,
-		so validate never runs — it needs its own copy of the guard."""
-		import json
+		self.assertEqual(frappe.db.get_value("Wiki Document", inner.name, "is_tab"), 1)
 
+	def test_reorder_moves_a_flagged_group_off_top_level(self):
 		from wiki.api.wiki_space import reorder_wiki_documents
 
 		space, root_group = self._space()
-		tab = create_test_wiki_document(self, "Manufacturing", parent=root_group.name, is_group=True)
-		tab.is_tab = 1
-		tab.save()
-		other = create_test_wiki_document(self, "Bucket", parent=root_group.name, is_group=True)
-
-		with self.assertRaises(frappe.ValidationError):
-			reorder_wiki_documents(tab.name, other.name, 0, json.dumps([tab.name]))
 
+		# `other` is created first so teardown, which deletes in reverse creation
+		# order, still reaches the moved node before its new parent.
+		other = create_test_wiki_document(self, "Bucket", parent=root_group.name, is_group=True)
+		flagged = create_test_wiki_document(self, "Accounting", parent=root_group.name, is_group=True)
+		frappe.db.set_value("Wiki Document", flagged.name, "is_tab", 1)
 
-class TestGetSpaceTabs(WikiDocumentTestBase):
-	"""`get_space_tabs` feeds the horizontal tab bar: ordering + landing target."""
-
-	def _space(self):
-		root_group = create_test_wiki_document(self, "Tabs Root", is_group=True)
-		space = create_test_wiki_space(
-			self,
-			"Tabs Space",
-			f"tabs-space-{frappe.generate_hash(length=6)}",
-			root_group.name,
-			enable_tabs=True,
-		)
-		return space, root_group
+		reorder_wiki_documents(flagged.name, other.name, 0, json.dumps([flagged.name]))
 
-	def _make_tab(self, root_group, title, icon=None, sort_order=0):
-		tab = create_test_wiki_document(
-			self, title, parent=root_group.name, is_group=True, sort_order=sort_order
+		self.assertEqual(
+			frappe.db.get_value("Wiki Document", flagged.name, "parent_wiki_document"), other.name
 		)
-		tab.is_tab = 1
-		tab.tab_icon = icon
-		tab.save()
-		return tab
 
-	def test_returns_empty_when_the_space_has_tabs_switched_off(self):
-		"""Tabs are opt-in: the flags stay on the nodes, the bar just goes away."""
+	def test_the_public_tree_does_not_carry_the_flags(self):
+		"""The reader renders one tree, so the flags never reach the template."""
 		space, root_group = self._space()
-		tab = self._make_tab(root_group, "Accounting", icon="lucide-wallet")
-		create_test_wiki_document(self, "Invoice", parent=tab.name)
-
-		self.assertEqual([t["title"] for t in get_space_tabs(space.name)], ["Accounting"])
 
-		frappe.db.set_value("Wiki Space", space.name, "enable_tabs", 0)
-		self.assertEqual(get_space_tabs(space.name), [])
-
-		# The node keeps its flags, so switching back restores the same bar.
-		self.assertEqual(frappe.db.get_value("Wiki Document", tab.name, "is_tab"), 1)
-		frappe.db.set_value("Wiki Space", space.name, "enable_tabs", 1)
-		self.assertEqual([t["title"] for t in get_space_tabs(space.name)], ["Accounting"])
-
-	def test_returns_empty_for_a_space_without_tabs(self):
-		space, root_group = self._space()
-		create_test_wiki_document(self, "Plain group", parent=root_group.name, is_group=True)
-
-		self.assertEqual(get_space_tabs(space.name), [])
-
-	def test_returns_tabs_in_sort_order_with_icons(self):
-		space, root_group = self._space()
-		second = self._make_tab(root_group, "Selling", icon="lucide-tag", sort_order=2)
-		first = self._make_tab(root_group, "Accounting", icon="lucide-wallet", sort_order=1)
-		create_test_wiki_document(self, "Invoice", parent=first.name)
-		create_test_wiki_document(self, "Quotation", parent=second.name)
-
-		tabs = get_space_tabs(space.name)
-
-		self.assertEqual([t["title"] for t in tabs], ["Accounting", "Selling"])
-		self.assertEqual([t["tab_icon"] for t in tabs], ["lucide-wallet", "lucide-tag"])
-
-	def test_non_tab_top_level_groups_are_excluded(self):
-		space, root_group = self._space()
-		tab = self._make_tab(root_group, "Accounting")
-		create_test_wiki_document(self, "Invoice", parent=tab.name)
-		plain = create_test_wiki_document(self, "Not a tab", parent=root_group.name, is_group=True)
-		create_test_wiki_document(self, "Some page", parent=plain.name)
-
-		# The plain group is untabbed content, so Home leads; it is never itself
-		# listed as a tab.
-		self.assertEqual([t["title"] for t in get_space_tabs(space.name)], ["Home", "Accounting"])
-
-	def test_landing_route_falls_back_to_first_published_leaf(self):
-		space, root_group = self._space()
-		tab = self._make_tab(root_group, "Accounting")
-		group = create_test_wiki_document(self, "Receivables", parent=tab.name, is_group=True, sort_order=0)
-		first = create_test_wiki_document(self, "Invoice", parent=group.name, sort_order=0)
-		create_test_wiki_document(self, "Credit Note", parent=group.name, sort_order=1)
-
-		tabs = get_space_tabs(space.name)
-		self.assertEqual(tabs[0]["landing_route"], first.route)
-
-	def test_landing_route_prefers_a_page_at_the_tab_s_own_route(self):
-		"""The README/index case: a published leaf sharing the group's route."""
-		space, root_group = self._space()
-		tab = self._make_tab(root_group, "Accounting")
-		create_test_wiki_document(self, "Invoice", parent=tab.name)
-
-		index = create_test_wiki_document(self, "Overview", parent=tab.name)
-		index.route = tab.route
-		index.save()
-
-		tabs = get_space_tabs(space.name)
-		self.assertEqual(tabs[0]["landing_route"], tab.route)
-
-	def test_unpublished_tab_is_excluded(self):
-		space, root_group = self._space()
-		tab = self._make_tab(root_group, "Draft Area")
-		create_test_wiki_document(self, "Page", parent=tab.name)
-		frappe.db.set_value("Wiki Document", tab.name, "is_published", 0)
-
-		self.assertEqual(get_space_tabs(space.name), [])
-
-	def test_public_tree_carries_the_tab_fields(self):
-		space, root_group = self._space()
-		tab = self._make_tab(root_group, "Accounting", icon="lucide-wallet")
-		create_test_wiki_document(self, "Invoice", parent=tab.name)
-
-		node = next(n for n in get_public_wiki_tree(root_group.name) if n["name"] == tab.name)
-		self.assertEqual(node["is_tab"], 1)
-		self.assertEqual(node["tab_icon"], "lucide-wallet")
-
-	def test_home_leads_the_bar_when_multiple_tabs_have_untabbed_content(self):
-		space, root_group = self._space()
-		accounting = self._make_tab(root_group, "Accounting", sort_order=1)
-		selling = self._make_tab(root_group, "Selling", sort_order=2)
-		create_test_wiki_document(self, "Invoice", parent=accounting.name)
-		create_test_wiki_document(self, "Quotation", parent=selling.name)
-		misc = create_test_wiki_document(
-			self, "Release Notes", parent=root_group.name, is_group=True, sort_order=3
-		)
-		changelog = create_test_wiki_document(self, "Changelog", parent=misc.name)
-
-		tabs = get_space_tabs(space.name)
-		self.assertEqual(tabs[0]["doc_key"], "__general__")
-		self.assertEqual(tabs[0]["title"], "Home")
-		self.assertEqual(tabs[0]["tab_icon"], "lucide-house")
-		self.assertEqual(tabs[0]["landing_route"], changelog.route)
-		self.assertEqual([t["title"] for t in tabs[1:]], ["Accounting", "Selling"])
-
-	def test_home_leads_the_bar_with_a_single_tab_and_untabbed_content(self):
-		space, root_group = self._space()
-		accounting = self._make_tab(root_group, "Accounting")
-		create_test_wiki_document(self, "Invoice", parent=accounting.name)
-		misc = create_test_wiki_document(self, "Release Notes", parent=root_group.name, is_group=True)
-		changelog = create_test_wiki_document(self, "Changelog", parent=misc.name)
-
-		tabs = get_space_tabs(space.name)
-		self.assertEqual([t["title"] for t in tabs], ["Home", "Accounting"])
-		self.assertEqual(tabs[0]["landing_route"], changelog.route)
-
-	def test_home_tab_uses_the_space_title_and_icon(self):
-		space, root_group = self._space()
-		accounting = self._make_tab(root_group, "Accounting")
-		create_test_wiki_document(self, "Invoice", parent=accounting.name)
-		misc = create_test_wiki_document(self, "Release Notes", parent=root_group.name, is_group=True)
-		create_test_wiki_document(self, "Changelog", parent=misc.name)
-		frappe.db.set_value(
-			"Wiki Space",
-			space.name,
-			{"home_tab_title": "Overview", "home_tab_icon": "lucide-compass"},
-		)
-
-		home = get_space_tabs(space.name)[0]
-		self.assertEqual(home["doc_key"], "__general__")
-		self.assertEqual(home["title"], "Overview")
-		self.assertEqual(home["tab_icon"], "lucide-compass")
-
-	def test_no_home_tab_when_the_space_is_fully_tabbed(self):
-		space, root_group = self._space()
-		accounting = self._make_tab(root_group, "Accounting", sort_order=1)
-		selling = self._make_tab(root_group, "Selling", sort_order=2)
-		create_test_wiki_document(self, "Invoice", parent=accounting.name)
-		create_test_wiki_document(self, "Quotation", parent=selling.name)
+		flagged = create_test_wiki_document(self, "Accounting", parent=root_group.name, is_group=True)
+		frappe.db.set_value("Wiki Document", flagged.name, "is_tab", 1)
+		create_test_wiki_document(self, "Invoice", parent=flagged.name)
+		clear_wiki_tree_cache()
 
-		tabs = get_space_tabs(space.name)
-		self.assertTrue(all(t["doc_key"] != "__general__" for t in tabs))
-		self.assertEqual([t["title"] for t in tabs], ["Accounting", "Selling"])
+		node = next(n for n in get_public_wiki_tree(root_group.name) if n["name"] == flagged.name)
 
-	def test_tab_with_no_published_pages_is_excluded(self):
-		space, root_group = self._space()
-		accounting = self._make_tab(root_group, "Accounting", sort_order=1)
-		create_test_wiki_document(self, "Invoice", parent=accounting.name)
-		# An empty tab (no children) and a tab whose only page is unpublished
-		# both have nothing to show, so neither appears on the public bar.
-		self._make_tab(root_group, "Empty", sort_order=2)
-		drafts = self._make_tab(root_group, "Drafts", sort_order=3)
-		draft_page = create_test_wiki_document(self, "WIP", parent=drafts.name)
-		frappe.db.set_value("Wiki Document", draft_page.name, "is_published", 0)
-
-		self.assertEqual([t["title"] for t in get_space_tabs(space.name)], ["Accounting"])
+		self.assertNotIn("is_tab", node)
+		self.assertNotIn("tab_icon", node)
 
 
 class TestRenderedContentCache(WikiDocumentTestBase):
@@ -2853,8 +2634,6 @@ def _assert_route_is_safe(self, html):
 		# The vulnerable pattern is a single-quoted JS literal; after the fix
 		# every call passes a double-quoted, entity-encoded literal instead.
 		self.assertNotIn("navigateTo('", html)
-		self.assertNotIn("inTab('", html)
-		self.assertNotIn("notInAnyTab('", html)
 		# The route's own single quote is unicode-escaped by tojson, so it can
 		# never terminate the JS string — no `'),alert(...)//'` breakout survives.
 		self.assertNotIn("//')", html)
@@ -2878,18 +2657,6 @@ def test_sidebar_tree_macro_escapes_route_in_alpine_expressions(self):
 		self.assertIn("navigateTo(&#34;", html)  # escaped double-quoted literal used
 		self._assert_route_is_safe(html)
 
-	def test_active_js_concat_escapes_route(self):
-		"""The tab bar (tabs.html / mobile_header.html) builds the Alpine
-		expression by string concatenation before emitting it; the route piece
-		must stay escaped through the concat + `{{ }}` render."""
-		template = (
-			'{% set active_js = "$store.navigation.inTab(" ~ (route | tojson | forceescape) ~ ")" %}'
-			'<div x-show="{{ active_js }}"></div>'
-		)
-		html = frappe.render_template(template, {"route": self.PAYLOAD})
-		self.assertIn("inTab(&#34;", html)
-		self._assert_route_is_safe(html)
-
 	def test_script_context_uses_bare_tojson_not_forceescape(self):
 		"""Inside a <script> block the browser does not HTML-decode, so a value
 		interpolated as a JS literal must use bare `tojson` (which escapes
@@ -3281,6 +3048,17 @@ class TestOGImageTokenDrift(unittest.TestCase):
 		"--outline-gray-2": ("outline", "gray-2"),
 		"--surface-gray-2": ("surface", "gray-2"),
 		"--surface-base": ("surface", "base"),
+		# The space-mark palette. gray is covered by the two entries above.
+		"--surface-blue-2": ("surface", "blue-2"),
+		"--ink-blue-7": ("ink", "blue-7"),
+		"--surface-green-2": ("surface", "green-2"),
+		"--ink-green-7": ("ink", "green-7"),
+		"--surface-amber-2": ("surface", "amber-2"),
+		"--ink-amber-7": ("ink", "amber-7"),
+		"--surface-red-2": ("surface", "red-2"),
+		"--ink-red-7": ("ink", "red-7"),
+		"--surface-violet-2": ("surface", "violet-2"),
+		"--ink-violet-7": ("ink", "violet-7"),
 	}
 
 	def test_template_tokens_match_frappe_ui(self):
@@ -3305,7 +3083,15 @@ def test_template_tokens_match_frappe_ui(self):
 
 		template = frappe.get_app_path("wiki", "templates", "wiki", "og_image.html")
 		with open(template) as f:
-			declared = dict(re.findall(r"(--[a-z0-9-]+):\s*(#[0-9a-fA-F]{6});", f.read()))
+			# frappe-ui emits oklch() since 1.0.0-beta.41; the older hex form is
+			# still matched so this compares whatever colors.json currently holds
+			# rather than assuming one notation.
+			declared = dict(
+				re.findall(
+					r"(--[a-z0-9-]+):\s*(#[0-9a-fA-F]{6}|oklch\([^)]*\));",
+					f.read(),
+				)
+			)
 
 		for var, (group, name) in self.TOKEN_REFS.items():
 			ref = colors["themedVariables"]["light"][group][name]
diff --git a/wiki/frappe_wiki/doctype/wiki_document/wiki_document.json b/wiki/frappe_wiki/doctype/wiki_document/wiki_document.json
index 954873046..63c3c2ae8 100644
--- a/wiki/frappe_wiki/doctype/wiki_document/wiki_document.json
+++ b/wiki/frappe_wiki/doctype/wiki_document/wiki_document.json
@@ -64,17 +64,17 @@
 		},
 		{
 			"default": "0",
-			"depends_on": "is_group",
-			"description": "Render this top-level group as a tab in the horizontal navigation bar",
+			"description": "Deprecated: tabs were removed. Kept so old revisions and change requests still apply.",
 			"fieldname": "is_tab",
 			"fieldtype": "Check",
+			"hidden": 1,
 			"label": "Is Tab"
 		},
 		{
-			"depends_on": "eval:doc.is_tab",
-			"description": "Lucide icon class name, e.g. lucide-wallet",
+			"description": "Deprecated: tabs were removed. Kept so old revisions and change requests still apply.",
 			"fieldname": "tab_icon",
 			"fieldtype": "Data",
+			"hidden": 1,
 			"label": "Tab Icon"
 		},
 		{
diff --git a/wiki/frappe_wiki/doctype/wiki_document/wiki_document.py b/wiki/frappe_wiki/doctype/wiki_document/wiki_document.py
index 18eb6196f..2f880ed4c 100644
--- a/wiki/frappe_wiki/doctype/wiki_document/wiki_document.py
+++ b/wiki/frappe_wiki/doctype/wiki_document/wiki_document.py
@@ -30,10 +30,6 @@
 # Per-document rendered HTML + TOC, keyed by document name.
 WIKI_CONTENT_CACHE_KEY = "wiki_rendered_content"
 
-# The synthetic "Home" tab standing for a space's untabbed top-level content.
-# Kept in sync with GENERAL_KEY in frontend/src/lib/spaceTabs.js.
-WIKI_HOME_TAB_KEY = "__general__"
-
 # Markdown is served under the page's own permissions, so a shared cache must
 # never hold it -- the same URL yields 404 for a reader without space access.
 # Mirrors what frappe serves the HTML page (frappe/website/utils.py cache_html).
@@ -106,17 +102,6 @@ def sanitize_route(route: str | None) -> str:
 	return "/".join(segment for segment in segments if segment)
 
 
-def is_top_level_group(parent_name: str | None) -> bool:
-	"""True when `parent_name` is a Wiki Space's root_group.
-
-	Top-level == direct child of the space root, which is what makes a node
-	eligible to be a tab.
-	"""
-	if not parent_name:
-		return False
-	return bool(frappe.db.exists("Wiki Space", {"root_group": parent_name}))
-
-
 class WikiDocument(NestedSet):
 	# begin: auto-generated types
 	# This code is auto-generated. Do not modify anything in this block.
@@ -153,25 +138,8 @@ def validate(self):
 		self.set_route()
 		self.remove_leading_slash_from_route()
 		self.validate_unique_route_for_leaves()
-		self.validate_tab()
 		self.set_boilerplate_content()
 
-	def validate_tab(self):
-		"""A tab is a top-level group. Both halves of that are hard rules.
-
-		Enforced here rather than only in the UI because a tab restructures the
-		whole space's navigation: a leaf tab or a nested tab has no place to
-		render, so the tab bar would silently drop it.
-		"""
-		if not self.is_tab:
-			return
-
-		if not self.is_group:
-			frappe.throw(_("Only a group can be marked as a tab."))
-
-		if not is_top_level_group(self.parent_wiki_document):
-			frappe.throw(_("Only a top-level group can be marked as a tab. Nested tabs are not supported."))
-
 	def validate_unique_route_for_leaves(self):
 		"""Ensure no two leaf documents (non-groups) share the same route."""
 		if self.is_group or not self.route:
@@ -475,7 +443,6 @@ def get_web_context(self) -> dict:
 			"head_html": frappe.get_cached_value("Wiki Settings", "Wiki Settings", "head_html"),
 			"raw_markdown": self.content or "",
 			"nested_tree": [],
-			"space_tabs": [],
 			"expanded_nodes": expanded_nodes,
 			"prev_doc": None,
 			"next_doc": None,
@@ -523,7 +490,18 @@ def get_web_context(self) -> dict:
 				"can_edit": self._can_show_edit(wiki_space_doc),
 				"wiki_spaces_for_switcher": frappe.get_all(
 					"Wiki Space",
-					fields=["name", "space_name", "route", "light_mode_logo", "app_switcher_logo"],
+					fields=[
+						"name",
+						"space_name",
+						"route",
+						"light_mode_logo",
+						# The identity fields the switcher's mark resolves
+						# through wiki.utils.space_mark -- see spec 03.
+						"app_switcher_logo",
+						"space_icon",
+						"space_color",
+						"avatar",
+					],
 					or_filters={"show_in_switcher": 1, "name": wiki_space["name"]},
 					order_by="switcher_order asc, space_name asc",
 				),
@@ -532,7 +510,6 @@ def get_web_context(self) -> dict:
 				else [],
 				"favicon": wiki_space_doc.favicon,
 				"nested_tree": nested_tree,
-				"space_tabs": get_space_tabs(wiki_space.name),
 				"prev_doc": adjacent_docs["prev"],
 				"next_doc": adjacent_docs["next"],
 				# Escape "<" so user-supplied titles can't close the
@@ -745,8 +722,6 @@ def build_nested_wiki_tree(documents: list[str]):
 			"name",
 			"title",
 			"is_group",
-			"is_tab",
-			"tab_icon",
 			"parent_wiki_document",
 			"route",
 			"sort_order",
@@ -909,138 +884,6 @@ def _first_published_leaf(nodes: list) -> dict | None:
 	return None
 
 
-def _tab_landing_route(tab: dict, node: dict | None, index_routes: set) -> str | None:
-	"""Where clicking a tab should go.
-
-	A group is never served at its own route — the renderer redirects it to its
-	first child — so the "tab group's own content page" only exists as a
-	published leaf sitting at the group's route (the README/index case that
-	git-sync produces). Prefer that, else the first published leaf in the tab's
-	subtree, mirroring get_first_published_page.
-
-	`index_routes` is the set of tab routes that have such an index leaf, fetched
-	once by the caller so this stays O(1) rather than a query per tab.
-	"""
-	if tab.get("route") and tab["route"] in index_routes:
-		return tab["route"]
-
-	if not node:
-		return None
-	first = _first_published_leaf(node.get("children") or [])
-	return first["route"] if first else None
-
-
-@frappe.whitelist(allow_guest=True)  # nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
-def get_space_tabs(space: str) -> list[dict]:
-	"""Ordered top-level tab groups for a Wiki Space, each with its landing route.
-
-	Reads the same cached public tree the sidebar renders, so a tab can never
-	point somewhere the sidebar doesn't show.
-	"""
-	from wiki.permissions import can_read_space
-
-	if not can_read_space(space):
-		return []
-
-	space_doc = frappe.db.get_value(
-		"Wiki Space",
-		space,
-		["root_group", "enable_tabs", "home_tab_title", "home_tab_icon"],
-		as_dict=True,
-	)
-	root_group = space_doc and space_doc.root_group
-	if not root_group:
-		return []
-
-	# Tabs are opt-in per space. Node-level is_tab flags are left alone when the
-	# space turns them off, so flipping the switch back restores the same bar;
-	# every reader surface (bar, mobile header, chrome height, sidebar gating)
-	# already branches on an empty list, so this one gate covers all of them.
-	if not space_doc.enable_tabs:
-		return []
-
-	tabs = frappe.get_all(
-		"Wiki Document",
-		filters={
-			"parent_wiki_document": root_group,
-			"is_tab": 1,
-			"is_group": 1,
-			"is_published": 1,
-		},
-		fields=["name", "doc_key", "title", "route", "tab_icon"],
-		order_by="sort_order asc, title asc",
-	)
-	if not tabs:
-		return []
-
-	# A tab whose subtree has no published page is dropped from the public tree by
-	# remove_empty_groups. Such a tab has nowhere to land, so it's excluded here
-	# too rather than shown as a dead, empty tab.
-	tree = get_public_wiki_tree(root_group)
-	nodes_by_name = {node["name"]: node for node in tree}
-
-	# One query for every tab's README/index leaf instead of a db.exists per tab
-	# (this runs on every reader render and every SPA call to this endpoint).
-	tab_route_list = [t["route"] for t in tabs if t.get("route")]
-	index_routes = (
-		set(
-			frappe.get_all(
-				"Wiki Document",
-				filters={
-					"route": ["in", tab_route_list],
-					"is_group": 0,
-					"is_published": 1,
-					"is_external_link": 0,
-				},
-				pluck="route",
-			)
-		)
-		if tab_route_list
-		else set()
-	)
-
-	result = [
-		{
-			"name": tab["name"],
-			"doc_key": tab["doc_key"],
-			"title": tab["title"],
-			"route": tab["route"],
-			"tab_icon": tab["tab_icon"],
-			"landing_route": _tab_landing_route(tab, nodes_by_name[tab["name"]], index_routes),
-		}
-		for tab in tabs
-		if tab["name"] in nodes_by_name
-	]
-
-	# Home leads the bar only alongside at least one real (non-empty) tab and some
-	# untabbed top-level content to land on. With no real tabs there's nothing to
-	# navigate between, and a fully-tabbed space has nowhere for Home to point
-	# (_home_tab_entry returns None) — both omit it.
-	if result:
-		home = _home_tab_entry(tree, space_doc.home_tab_title, space_doc.home_tab_icon)
-		if home:
-			result.insert(0, home)
-
-	return result
-
-
-def _home_tab_entry(tree: list, title: str | None = None, icon: str | None = None) -> dict | None:
-	"""The synthetic Home tab pointing at the space's untabbed top-level content,
-	or None when there is no such content to land on."""
-	untabbed = [node for node in tree if not node.get("is_tab")]
-	landing = _first_published_leaf(untabbed)
-	if not landing:
-		return None
-	return {
-		"name": None,
-		"doc_key": WIKI_HOME_TAB_KEY,
-		"title": title or _("Home"),
-		"route": landing["route"],
-		"tab_icon": icon or "lucide-house",
-		"landing_route": landing["route"],
-	}
-
-
 def clear_wiki_tree_cache():
 	"""Drop all cached sidebar trees.
 
diff --git a/wiki/frappe_wiki/print_format/standard_wiki_document/standard_wiki_document.html b/wiki/frappe_wiki/print_format/standard_wiki_document/standard_wiki_document.html
index fef647c4b..257c64afd 100644
--- a/wiki/frappe_wiki/print_format/standard_wiki_document/standard_wiki_document.html
+++ b/wiki/frappe_wiki/print_format/standard_wiki_document/standard_wiki_document.html
@@ -94,20 +94,24 @@
 		content: close-quote;
 	}
 
-	/* Callouts — mirror the public-page treatment. Public CSS uses display:grid;
-	   wkhtmltopdf's QtWebKit predates Grid, so use a float for icon-left layout. */
+	/* Callouts — mirror the public-page treatment: the frappe-ui Alert banner,
+	   one neutral surface with the type's colour only on the icon. Tokens are
+	   resolved to hex here; the print pipeline has no CSS variables, and
+	   wkhtmltopdf's QtWebKit cannot parse oklch() either way. */
 	.wiki-document-content .callout {
 		margin: 1rem 0;
-		padding: 0.875rem 1rem;
-		border-radius: 6px;
+		padding: 0.75rem;
+		border-radius: 12px;
+		background-color: #F8F8F8;
 		overflow: hidden;
 	}
 
+	/* QtWebKit predates flexbox, so the header row is a float. */
 	.wiki-document-content .callout-icon {
 		float: left;
 		width: 1rem;
-		margin-right: 0.75rem;
-		padding-top: 0.125rem;
+		height: 1rem;
+		margin-right: 0.375rem;
 		line-height: 0;
 	}
 
@@ -116,20 +120,23 @@
 		height: 1rem;
 	}
 
-	.wiki-document-content .callout-body {
+	.wiki-document-content .callout-header {
 		overflow: hidden;
 	}
 
 	.wiki-document-content .callout-title {
 		display: block;
-		margin-bottom: 0.5rem;
+		overflow: hidden;
 		font-size: 0.875rem;
 		font-weight: 500;
-		line-height: 1.4;
+		line-height: 1.15;
 		color: #171717;
 	}
 
+	/* Indented to the title's left edge, as on the public page. */
 	.wiki-document-content .callout-content {
+		margin-top: 0.25rem;
+		padding-left: calc(1rem + 0.375rem);
 		font-size: 0.875rem;
 		line-height: 1.5;
 		color: #525252;
@@ -143,36 +150,20 @@
 		margin-bottom: 0;
 	}
 
-	.wiki-document-content .callout-note {
-		background-color: #E6F4FF;
-	}
-
 	.wiki-document-content .callout-note .callout-icon {
-		color: #007BE0;
-	}
-
-	.wiki-document-content .callout-tip {
-		background-color: #E4FAEB;
+		color: #0C8EF8;
 	}
 
 	.wiki-document-content .callout-tip .callout-icon {
-		color: #278F5E;
-	}
-
-	.wiki-document-content .callout-caution {
-		background-color: #FFF7D3;
+		color: #43AC79;
 	}
 
 	.wiki-document-content .callout-caution .callout-icon {
-		color: #DB7706;
-	}
-
-	.wiki-document-content .callout-danger {
-		background-color: #FFE7E7;
+		color: #DF9310;
 	}
 
 	.wiki-document-content .callout-danger .callout-icon {
-		color: #E03636;
+		color: #E03434;
 	}
 </style>
 
diff --git a/wiki/frappe_wiki/test_utils.py b/wiki/frappe_wiki/test_utils.py
index c8f450b1b..ae7b77f4a 100644
--- a/wiki/frappe_wiki/test_utils.py
+++ b/wiki/frappe_wiki/test_utils.py
@@ -1,7 +1,13 @@
 import frappe
 from frappe.tests.utils import FrappeTestCase
 
-from wiki.utils import lucide_svg
+from wiki.utils import (
+	DEFAULT_SPACE_ICON,
+	SPACE_COLORS,
+	lucide_svg,
+	space_color_theme,
+	space_mark,
+)
 
 
 class TestLucideSvg(FrappeTestCase):
@@ -36,3 +42,65 @@ def test_survives_a_missing_lookup_table(self):
 			utils._lucide_table.cache_clear()
 		self.assertIn("<svg", svg)
 		self.assertIn("<line", svg)
+
+
+class TestSpaceMark(FrappeTestCase):
+	"""The reader resolves a space's identity with its own copy of the rules in
+	`frontend/src/lib/spaceIdentity.js`. These guard the two things a copy can
+	get wrong: the priority order, and the colour a space with no colour gets.
+	"""
+
+	SVG = "data:image/svg+xml;utf8,<svg/>"
+
+	def _space(self, **fields):
+		return {
+			"name": "SPACE-1",
+			"space_name": "Engineering",
+			"avatar": "",
+			"space_icon": "",
+			"space_color": "",
+			"app_switcher_logo": "",
+			**fields,
+		}
+
+	def test_a_generated_mark_wins_over_an_icon_and_a_logo(self):
+		mark = space_mark(
+			self._space(avatar=self.SVG, space_icon="lucide-rocket", app_switcher_logo="/files/a.png")
+		)
+		self.assertEqual(mark["mode"], "avatar")
+		self.assertEqual(mark["image"], self.SVG)
+
+	def test_an_icon_wins_over_a_logo(self):
+		mark = space_mark(self._space(space_icon="lucide-rocket", app_switcher_logo="/files/a.png"))
+		self.assertEqual(mark["mode"], "icon")
+		self.assertEqual(mark["icon"], "lucide-rocket")
+
+	def test_a_logo_is_the_last_image(self):
+		mark = space_mark(self._space(app_switcher_logo="/files/a.png"))
+		self.assertEqual(mark["mode"], "logo")
+		self.assertEqual(mark["image"], "/files/a.png")
+
+	def test_a_space_with_no_mark_falls_back_to_its_initial(self):
+		mark = space_mark(self._space())
+		self.assertEqual(mark["mode"], "initial")
+		self.assertEqual(mark["initial"], "E")
+
+	def test_an_unusable_avatar_falls_through_rather_than_drawing_nothing(self):
+		for value in ('<svg onload="alert(1)"/>', "data:text/html,<script>", "javascript:alert(1)"):
+			with self.subTest(value=value):
+				self.assertEqual(space_mark(self._space(avatar=value))["mode"], "initial")
+
+	def test_an_icon_outside_the_curated_set_still_draws_something(self):
+		mark = space_mark(self._space(space_icon="rocket"))
+		self.assertEqual(mark["icon"], DEFAULT_SPACE_ICON)
+
+	def test_an_off_palette_colour_resolves_to_one_that_exists(self):
+		self.assertIn(space_mark(self._space(space_color="fuchsia"))["color"], SPACE_COLORS)
+
+	def test_a_derived_colour_matches_the_app(self):
+		"""The two hashes must agree, or a space is one colour in the app and
+		another on its own page. These expectations are what
+		`spaceColorTheme('', name)` returns in the browser."""
+		for name, expected in (("SPACE-1", "red"), ("05hi0prpqb", "violet"), ("", "gray")):
+			with self.subTest(name=name):
+				self.assertEqual(space_color_theme("", name), expected)
diff --git a/wiki/hooks.py b/wiki/hooks.py
index 5f6632863..a552c8fb6 100644
--- a/wiki/hooks.py
+++ b/wiki/hooks.py
@@ -34,6 +34,7 @@
 		"wiki.utils.get_tailwindcss_hash",
 		"wiki.utils.get_asset_hash",
 		"wiki.utils.lucide_svg",
+		"wiki.utils.space_mark",
 	]
 }
 
diff --git a/wiki/lucide_icons.json b/wiki/lucide_icons.json
index a1bb4f4e1..2a9082b88 100644
--- a/wiki/lucide_icons.json
+++ b/wiki/lucide_icons.json
@@ -6,13 +6,13 @@
 	"lucide-atom": "<circle cx=\"12\" cy=\"12\" r=\"1\" /> <path d=\"M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z\" /> <path d=\"M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z\" />",
 	"lucide-audio-waveform": "<path d=\"M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2\" />",
 	"lucide-beaker": "<path d=\"M4.5 3h15\" /> <path d=\"M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3\" /> <path d=\"M6 14h12\" />",
-	"lucide-book-open-text": "<path d=\"M12 7v14\" /> <path d=\"M16 12h2\" /> <path d=\"M16 8h2\" /> <path d=\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\" /> <path d=\"M6 12h2\" /> <path d=\"M6 8h2\" />",
+	"lucide-book-open-text": "<path d=\"M12 5v16\" /> <path d=\"M16 13h2\" /> <path d=\"M16 9h2\" /> <path d=\"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z\" /> <path d=\"M6 13h2\" /> <path d=\"M6 9h2\" />",
 	"lucide-boom-box": "<path d=\"M4 9V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4\" /> <path d=\"M8 8v1\" /> <path d=\"M12 8v1\" /> <path d=\"M16 8v1\" /> <rect width=\"20\" height=\"12\" x=\"2\" y=\"9\" rx=\"2\" /> <circle cx=\"8\" cy=\"15\" r=\"2\" /> <circle cx=\"16\" cy=\"15\" r=\"2\" />",
 	"lucide-bot": "<path d=\"M12 8V4H8\" /> <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\" /> <path d=\"M2 14h2\" /> <path d=\"M20 14h2\" /> <path d=\"M15 13v2\" /> <path d=\"M9 13v2\" />",
 	"lucide-boxes": "<path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\" /> <path d=\"m7 16.5-4.74-2.85\" /> <path d=\"m7 16.5 5-3\" /> <path d=\"M7 16.5v5.17\" /> <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\" /> <path d=\"m17 16.5-5-3\" /> <path d=\"m17 16.5 4.74-2.85\" /> <path d=\"M17 16.5v5.17\" /> <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\" /> <path d=\"M12 8 7.26 5.15\" /> <path d=\"m12 8 4.74-2.85\" /> <path d=\"M12 13.5V8\" />",
 	"lucide-brain": "<path d=\"M12 18V5\" /> <path d=\"M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4\" /> <path d=\"M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5\" /> <path d=\"M17.997 5.125a4 4 0 0 1 2.526 5.77\" /> <path d=\"M18 18a4 4 0 0 0 2-7.464\" /> <path d=\"M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517\" /> <path d=\"M6 18a4 4 0 0 1-2-7.464\" /> <path d=\"M6.003 5.125a4 4 0 0 0-2.526 5.77\" />",
 	"lucide-briefcase": "<path d=\"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\" /> <rect width=\"20\" height=\"14\" x=\"2\" y=\"6\" rx=\"2\" />",
-	"lucide-calendar": "<path d=\"M8 2v4\" /> <path d=\"M16 2v4\" /> <rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" /> <path d=\"M3 10h18\" />",
+	"lucide-calendar": "<path d=\"M8 2v3\" /> <path d=\"M16 2v3\" /> <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" /> <path d=\"M3 9h18\" />",
 	"lucide-camera": "<path d=\"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z\" /> <circle cx=\"12\" cy=\"13\" r=\"3\" />",
 	"lucide-chart-line": "<path d=\"M3 3v16a2 2 0 0 0 2 2h16\" /> <path d=\"m19 9-5 5-4-4-3 3\" />",
 	"lucide-check": "<path d=\"M20 6 9 17l-5-5\" />",
@@ -113,7 +113,7 @@
 	"lucide-train-front": "<path d=\"M8 3.1V7a4 4 0 0 0 8 0V3.1\" /> <path d=\"m9 15-1-1\" /> <path d=\"m15 15 1-1\" /> <path d=\"M9 19c-2.8 0-5-2.2-5-5v-4a8 8 0 0 1 16 0v4c0 2.8-2.2 5-5 5Z\" /> <path d=\"m8 19-2 3\" /> <path d=\"m16 19 2 3\" />",
 	"lucide-tree-pine": "<path d=\"m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z\" /> <path d=\"M12 22v-3\" />",
 	"lucide-trending-up": "<path d=\"M16 7h6v6\" /> <path d=\"m22 7-8.5 8.5-5-5L2 17\" />",
-	"lucide-trophy": "<path d=\"M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978\" /> <path d=\"M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978\" /> <path d=\"M18 9h1.5a1 1 0 0 0 0-5H18\" /> <path d=\"M4 22h16\" /> <path d=\"M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z\" /> <path d=\"M6 9H4.5a1 1 0 0 1 0-5H6\" />",
+	"lucide-trophy": "<path d=\"M10 14.66V17a1 1 0 0 1-1 1 2 2 0 0 0-2 2v2\" /> <path d=\"M14 14.66V17a1 1 0 0 0 1 1 2 2 0 0 1 2 2v2\" /> <path d=\"M17.916 10H19.5A2.5 2.5 0 0 0 22 7.5V5a1 1 0 0 0-1-1h-3\" /> <path d=\"M4 22h16\" /> <path d=\"M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z\" /> <path d=\"M6.084 10H4.5A2.5 2.5 0 0 1 2 7.5V5a1 1 0 0 1 1-1h3\" />",
 	"lucide-umbrella": "<path d=\"M12 13v7a2 2 0 0 0 4 0\" /> <path d=\"M12 2v2\" /> <path d=\"M20.992 13a1 1 0 0 0 .97-1.274 10.284 10.284 0 0 0-19.923 0A1 1 0 0 0 3 13z\" />",
 	"lucide-vault": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /> <circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" /> <path d=\"m7.9 7.9 2.7 2.7\" /> <circle cx=\"16.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" /> <path d=\"m13.4 10.6 2.7-2.7\" /> <circle cx=\"7.5\" cy=\"16.5\" r=\".5\" fill=\"currentColor\" /> <path d=\"m7.9 16.1 2.7-2.7\" /> <circle cx=\"16.5\" cy=\"16.5\" r=\".5\" fill=\"currentColor\" /> <path d=\"m13.4 13.4 2.7 2.7\" /> <circle cx=\"12\" cy=\"12\" r=\"2\" />",
 	"lucide-volleyball": "<path d=\"M11 7a16 16 20 0 1 10.98 4.362\" /> <path d=\"M12 12a13 13 0 0 1-8.66 5\" /> <path d=\"M16.83 13.634a16 16 0 0 1-9.267 7.328\" /> <path d=\"M20.66 17A13 13 0 0 0 12 12a13 13 0 0 1 0-10\" /> <path d=\"M8.17 15.366a16 16 0 0 1-1.713-11.69\" /> <circle cx=\"12\" cy=\"12\" r=\"10\" />",
@@ -124,5 +124,5 @@
 	"lucide-waypoints": "<path d=\"m10.586 5.414-5.172 5.172\" /> <path d=\"m18.586 13.414-5.172 5.172\" /> <path d=\"M6 12h12\" /> <circle cx=\"12\" cy=\"20\" r=\"2\" /> <circle cx=\"12\" cy=\"4\" r=\"2\" /> <circle cx=\"20\" cy=\"12\" r=\"2\" /> <circle cx=\"4\" cy=\"12\" r=\"2\" />",
 	"lucide-webhook": "<path d=\"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2\" /> <path d=\"m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06\" /> <path d=\"m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8\" />",
 	"lucide-x": "<path d=\"M18 6 6 18\" /> <path d=\"m6 6 12 12\" />",
-	"lucide-zap": "<path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\" />"
+	"lucide-zap": "<path d=\"M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z\" />"
 }
diff --git a/wiki/public/css/main.css b/wiki/public/css/main.css
index 1a6a9565e..7bd6ef0f9 100644
--- a/wiki/public/css/main.css
+++ b/wiki/public/css/main.css
@@ -57,8 +57,7 @@
 }
 
 /* ---------- Reader chrome height ----------
-   The full-width navbar (53px) plus the tab row (44px) when a space has tabs.
-   Everything that sticks below the chrome — sidebar, sidebar toggle, TOC —
+   The full-width navbar (53px). Everything that sticks below the chrome — sidebar, sidebar toggle, TOC —
    offsets against this. Zero below `lg`, where the desktop chrome is hidden in
    favour of the mobile header, and on `hide_chrome` pages which have none. */
 body {
@@ -69,9 +68,6 @@ body {
   body {
     --wiki-chrome-h: 53px;
   }
-  body[data-wiki-tabs] {
-    --wiki-chrome-h: 97px;
-  }
   body[data-wiki-bare] {
     --wiki-chrome-h: 0px;
   }
@@ -262,23 +258,28 @@ body {
   color: var(--ink-gray-6);
 }
 
-/* Callout/Aside Styles - Frappe UI Alert-inspired */
+/* Callout/Aside Styles — the frappe-ui Alert banner: one neutral surface, with
+   the type's colour carried only by the icon. */
 .callout {
   margin: 1rem 0;
-  padding: 0.875rem 1rem;
-  border-radius: 0.375rem;
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.75rem;
-  align-items: start;
+  padding: 0.75rem;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-gray-1);
+}
+
+.callout-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
 }
 
 .callout-icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  padding-top: 0.125rem;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
 }
 
 .callout-icon svg {
@@ -286,23 +287,26 @@ body {
   height: 1rem;
 }
 
-.callout-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
 .callout-title {
-  font-weight: 500;
+  min-width: 0;
   font-size: 0.875rem;
-  line-height: 1.4;
-  color: var(--ink-gray-9);
+  font-weight: 500;
+  line-height: 1.15;
+  letter-spacing: 0.02em;
+  color: var(--ink-gray-8);
 }
 
+/* Aligned to the title, not the container: Alert's description is full-bleed,
+   but Alert is a 384px status box with a one-line description. At document
+   width, with paragraphs and lists in the body, a full-bleed body leaves the
+   header looking detached. 1rem icon + 0.375rem gap = the title's left edge. */
 .callout-content {
+  margin-top: 0.25rem;
+  padding-left: calc(1rem + 0.375rem);
   font-size: 0.875rem;
   line-height: 1.5;
-  color: var(--ink-gray-7);
+  letter-spacing: 0.02em;
+  color: var(--ink-gray-6);
 }
 
 .callout-content > *:first-child {
@@ -344,40 +348,20 @@ body {
   margin: 0.25rem 0;
 }
 
-/* Note callout - Blue (info style) */
-.callout-note {
-  background-color: var(--surface-blue-2);
-}
-
 .callout-note .callout-icon {
-  color: var(--ink-blue-3);
-}
-
-/* Tip callout - Green (success style) */
-.callout-tip {
-  background-color: var(--surface-green-2);
+  color: var(--ink-blue-5);
 }
 
 .callout-tip .callout-icon {
-  color: var(--ink-green-3);
-}
-
-/* Caution callout - Amber/Yellow (warning style) */
-.callout-caution {
-  background-color: var(--surface-amber-2);
+  color: var(--ink-green-5);
 }
 
 .callout-caution .callout-icon {
-  color: var(--ink-amber-3);
-}
-
-/* Danger callout - Red (error style) */
-.callout-danger {
-  background-color: var(--surface-red-2);
+  color: var(--ink-amber-5);
 }
 
 .callout-danger .callout-icon {
-  color: var(--ink-red-3);
+  color: var(--ink-red-5);
 }
 
 /* Image lightbox active state */
@@ -437,7 +421,7 @@ body.image-viewer-open {
   margin-right: 0.5em;
   vertical-align: -0.125em;
   border: 1px solid var(--outline-gray-4);
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius-1, 4px);
   background-color: var(--surface-base);
   color: var(--ink-gray-9);
 }
@@ -533,7 +517,7 @@ body.image-viewer-open {
 
 .wiki-pdf-header .wiki-pdf-icon {
   flex-shrink: 0;
-  color: var(--ink-red-5, #dc2626);
+  color: var(--ink-red-4, #dc2626);
 }
 
 .wiki-pdf-name {
diff --git a/wiki/public/css/theme.css b/wiki/public/css/theme.css
index 64694333a..f8acedc3a 100644
--- a/wiki/public/css/theme.css
+++ b/wiki/public/css/theme.css
@@ -117,7 +117,7 @@ select {
 .form-checkbox {
     border-radius: 0.375rem;
     background-color: var(--surface-gray-2);
-    color: var(--ink-blue-2);
+    color: var(--ink-blue-1);
 }
 
 .form-checkbox:focus {
diff --git a/wiki/templates/.tokens-v2-ink-shift b/wiki/templates/.tokens-v2-ink-shift
new file mode 100644
index 000000000..80d036f33
--- /dev/null
+++ b/wiki/templates/.tokens-v2-ink-shift
@@ -0,0 +1,3 @@
+The ink scale shift (tokens-v2 --ink-shift, #1016) ran here on 2026-08-11T09:28:35.437Z.
+A second run would double-shift every chromatic ink token.
+Delete this file only to re-run the shift on purpose.
diff --git a/wiki/templates/wiki/document.html b/wiki/templates/wiki/document.html
index 0b2a9ad9d..7217241d5 100644
--- a/wiki/templates/wiki/document.html
+++ b/wiki/templates/wiki/document.html
@@ -25,7 +25,7 @@ <h1 id="wiki-page-title" class="text-4xl-semibold text-[var(--ink-gray-9)]">{{ d
                     <button @click="downloadPage()"
                             :disabled="downloadInProgress"
                             :aria-busy="downloadInProgress"
-                            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm-medium text-[var(--ink-gray-7)] bg-[var(--surface-base)] border border-[var(--outline-gray-2)] rounded-lg hover:bg-[var(--surface-gray-1)] transition-colors duration-200 cursor-pointer disabled:cursor-wait disabled:opacity-70">
+                            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm-medium text-[var(--ink-gray-7)] bg-[var(--surface-base)] border border-[var(--outline-gray-2)] rounded-6 hover:bg-[var(--surface-gray-1)] transition-colors duration-200 cursor-pointer disabled:cursor-wait disabled:opacity-70">
                         <template x-if="!downloadInProgress">
                             {{ render_icon("download", "w-4 h-4") }}
                         </template>
@@ -35,7 +35,7 @@ <h1 id="wiki-page-title" class="text-4xl-semibold text-[var(--ink-gray-9)]">{{ d
                         <span x-text="downloadInProgress ? 'Preparing…' : 'Download'"></span>
                     </button>
                     <button @click="copyMarkdown()"
-                            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm-medium text-[var(--ink-gray-7)] bg-[var(--surface-base)] border border-[var(--outline-gray-2)] rounded-lg hover:bg-[var(--surface-gray-1)] transition-colors duration-200 cursor-pointer">
+                            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm-medium text-[var(--ink-gray-7)] bg-[var(--surface-base)] border border-[var(--outline-gray-2)] rounded-6 hover:bg-[var(--surface-gray-1)] transition-colors duration-200 cursor-pointer">
                         <template x-if="!copied">
                             {{ render_icon("clipboard", "w-4 h-4") }}
                         </template>
@@ -86,7 +86,7 @@ <h1 id="wiki-page-title" class="text-4xl-semibold text-[var(--ink-gray-9)]">{{ d
         <!-- Previous/Next Navigation — frappe-ui docs PrevNextBtns (subtle/md pills) -->
         <nav id="wiki-nav-buttons" class="mt-10">
             {% if prev_doc or next_doc %}
-            {% set nav_link_classes = "group inline-flex min-w-0 max-w-[48%] items-center gap-2 h-8 px-2.5 rounded text-base font-medium text-[var(--ink-gray-8)] bg-[var(--surface-gray-2)] hover:bg-[var(--surface-gray-3)] active:bg-[var(--surface-gray-4)] transition-colors no-underline" %}
+            {% set nav_link_classes = "group inline-flex min-w-0 max-w-[48%] items-center gap-2 h-8 px-2.5 rounded-4 text-base font-medium text-[var(--ink-gray-8)] bg-[var(--surface-gray-2)] hover:bg-[var(--surface-gray-3)] active:bg-[var(--surface-gray-4)] transition-colors no-underline" %}
             {#- justify-between alone: with both links they sit at the two ends,
                 and a lone next button falls back to the start rather than
                 hanging off the right edge. Same as frappe-ui docs'
diff --git a/wiki/templates/wiki/includes/feedback_widget.html b/wiki/templates/wiki/includes/feedback_widget.html
index e1406bfe0..a34648780 100644
--- a/wiki/templates/wiki/includes/feedback_widget.html
+++ b/wiki/templates/wiki/includes/feedback_widget.html
@@ -43,14 +43,14 @@
                       :disabled="submitted"
                       placeholder="Anything you'd like to add?"
                       rows="3"
-                      class="w-full px-4 py-3 pr-20 text-sm rounded-xl border border-[var(--outline-gray-2)] bg-[var(--surface-base)] text-[var(--ink-gray-9)] placeholder-[var(--ink-gray-4)] focus:outline-none focus:ring-2 focus:ring-[var(--outline-gray-3)] resize-none disabled:opacity-60"></textarea>
+                      class="w-full px-4 py-3 pr-20 text-sm rounded-7 border border-[var(--outline-gray-2)] bg-[var(--surface-base)] text-[var(--ink-gray-9)] placeholder-[var(--ink-gray-4)] focus:outline-none focus:ring-2 focus:ring-[var(--outline-gray-3)] resize-none disabled:opacity-60"></textarea>
 
             <!-- Submit button OR Thank you message -->
             <div class="absolute bottom-3 right-3">
                 <button x-show="!submitted"
                         type="submit"
                         :disabled="submitting"
-                        class="px-2.5 py-1 text-xs-medium rounded-sm bg-[var(--surface-gray-3)] text-[var(--ink-gray-7)] hover:bg-[var(--surface-gray-4)] hover:text-[var(--ink-gray-9)] transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed">
+                        class="px-2.5 py-1 text-xs-medium rounded-1 bg-[var(--surface-gray-3)] text-[var(--ink-gray-7)] hover:bg-[var(--surface-gray-4)] hover:text-[var(--ink-gray-9)] transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed">
                     <span x-show="!submitting">Submit</span>
                     <span x-show="submitting" class="flex items-center gap-1">
                         <svg class="animate-spin h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
diff --git a/wiki/templates/wiki/includes/header.html b/wiki/templates/wiki/includes/header.html
index 98d6c577e..ba8b84760 100644
--- a/wiki/templates/wiki/includes/header.html
+++ b/wiki/templates/wiki/includes/header.html
@@ -1,11 +1,10 @@
 {% from "templates/wiki/macros/buttons.html" import render_icon %}
+{% from "templates/wiki/macros/space.html" import render_space_mark %}
 
-{#- The bottom rule belongs to whichever row ends the chrome, so exactly one
-    hairline runs across the window and the sidebar's own border meets it
-    instead of starting in mid-air. With tabs that's the tab row (see
-    includes/tabs.html); without them it's this navbar. -#}
-{% set has_tabs = space_tabs and space_tabs|length %}
-<header class="hidden lg:flex items-center gap-3 py-3 px-6 bg-[var(--surface-base)] sticky top-0 z-30 h-[53px]{% if not has_tabs %} border-b border-[var(--outline-gray-1)]{% endif %}"
+{#- The navbar ends the chrome, so its bottom rule is the one hairline running
+    across the window — the sidebar's own border meets it instead of starting
+    in mid-air. -#}
+<header class="hidden lg:flex items-center gap-3 py-3 px-6 bg-[var(--surface-base)] sticky top-0 z-30 h-[53px] border-b border-[var(--outline-gray-1)]"
         x-data>
     {#- Space logo + switcher. Lives here rather than in the sidebar's own
         header because the navbar now spans the full window: the sidebar starts
@@ -21,12 +20,10 @@
                 @keydown.escape="spaceSwitcherOpen = false"
                 aria-haspopup="menu"
                 :aria-expanded="spaceSwitcherOpen"
-                class="flex h-8 max-w-[15rem] items-center rounded-md px-2 -ms-2 duration-300 ease-in-out cursor-pointer"
+                class="flex h-8 max-w-[15rem] items-center rounded-5 px-2 -ms-2 duration-300 ease-in-out cursor-pointer"
                 :class="spaceSwitcherOpen ? 'bg-[var(--surface-gray-3)]' : 'hover:bg-[var(--surface-gray-3)]'"
                 title="Switch wiki space">
-            {% if wiki_space.app_switcher_logo %}
-            <img class="h-6 max-w-16 flex-shrink-0" src="{{ wiki_space.app_switcher_logo }}"/>
-            {% endif %}
+            {{ render_space_mark(wiki_space) }}
             <span class="ms-2 text-base-medium leading-tight text-[var(--ink-gray-9)] truncate">{{ wiki_space.space_name or _("Wiki") }}</span>
             <span class="inline-flex" :class="{ 'rotate-180': spaceSwitcherOpen }">{{ render_icon("chevron-down", "ms-2  shrink-0 text-[var(--ink-gray-5)] transition-transform duration-200") }}</span>
         </button>
@@ -39,11 +36,14 @@
              x-transition:leave="transition ease-in duration-75"
              x-transition:leave-start="opacity-100 scale-100"
              x-transition:leave-end="opacity-0 scale-95"
-             class="fixed top-[57px] left-4 w-[17rem] bg-[var(--surface-base)] border border-[var(--outline-gray-1)] rounded-lg shadow-lg z-50 py-1 max-h-80 overflow-y-auto">
+             class="fixed top-[57px] left-4 w-[17rem] bg-[var(--surface-base)] border border-[var(--outline-gray-1)] rounded-6 shadow-lg z-50 py-1 max-h-80 overflow-y-auto">
             {% for space in wiki_spaces_for_switcher %}
             <a href="/{{ space.route }}"
                class="flex items-center justify-between gap-3 px-3 py-2 text-sm transition-colors duration-200 {{ 'bg-[var(--surface-gray-2)] text-[var(--ink-gray-9)]' if space.name == wiki_space.name else 'text-[var(--ink-gray-7)] hover:bg-[var(--surface-gray-2)] hover:text-[var(--ink-gray-9)]' }}">
-                <span class="truncate">{{ space.space_name or space.name }}</span>
+                <span class="flex min-w-0 items-center gap-2">
+                    {{ render_space_mark(space) }}
+                    <span class="truncate">{{ space.space_name or space.name }}</span>
+                </span>
                 {% if space.name == wiki_space.name %}
                 {{ render_icon("check", "text-[var(--ink-gray-9)] flex-shrink-0") }}
                 {% endif %}
@@ -52,10 +52,8 @@
         </div>
         {% else %}
         <div class="flex max-w-[15rem] items-center">
-            {% if wiki_space.app_switcher_logo %}
-            <img class="h-6 max-w-16 flex-shrink-0" src="{{ wiki_space.app_switcher_logo }}"/>
-            {% endif %}
-            <span class="{% if wiki_space.app_switcher_logo %}ms-2 {% endif %}text-base-medium leading-tight text-[var(--ink-gray-9)] truncate">{{ wiki_space.space_name or _("Wiki") }}</span>
+            {{ render_space_mark(wiki_space) }}
+            <span class="ms-2 text-base-medium leading-tight text-[var(--ink-gray-9)] truncate">{{ wiki_space.space_name or _("Wiki") }}</span>
         </div>
         {% endif %}
     </div>
@@ -65,7 +63,7 @@
     <div class="flex w-full max-w-md justify-center px-2">
         <button @click="$dispatch('open-search')"
                 aria-label="Open search"
-                class="relative flex h-8 w-full items-center rounded border border-[var(--surface-gray-2)] bg-[var(--surface-gray-2)] ps-9 pe-9 text-base text-[var(--ink-gray-4)] transition-colors hover:border-[var(--outline-elevation-2)] hover:bg-[var(--surface-gray-3)] cursor-pointer"
+                class="relative flex h-8 w-full items-center rounded-4 border border-[var(--surface-gray-2)] bg-[var(--surface-gray-2)] ps-9 pe-9 text-base text-[var(--ink-gray-4)] transition-colors hover:border-[var(--outline-elevation-2)] hover:bg-[var(--surface-gray-3)] cursor-pointer"
                 x-data="{ isMac: navigator.platform.includes('Mac') }">
             <span class="absolute inset-y-0 start-0 flex items-center ps-2.5 text-[var(--ink-gray-5)]">
                 {{ render_icon("search", "shrink-0") }}
@@ -92,7 +90,7 @@
             {% if not item.icon %}
             <a href="{{ item.url }}"
                target="_blank" rel="noopener noreferrer"
-               class="px-1 py-1.5 text-sm-medium text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] rounded-md transition-colors duration-200">
+               class="px-1 py-1.5 text-sm-medium text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] rounded-5 transition-colors duration-200">
                 {{ item.label }}
             </a>
             {% endif %}
diff --git a/wiki/templates/wiki/includes/mobile_header.html b/wiki/templates/wiki/includes/mobile_header.html
index e899d829b..c9292fb11 100644
--- a/wiki/templates/wiki/includes/mobile_header.html
+++ b/wiki/templates/wiki/includes/mobile_header.html
@@ -1,4 +1,5 @@
 {% from "templates/wiki/macros/buttons.html" import render_icon %}
+{% from "templates/wiki/macros/space.html" import render_space_mark %}
 {% from "templates/wiki/macros/sidebar_tree.html" import render_wiki_tree %}
 
 <!-- Mobile Navigation Container - Only visible on smaller screens -->
@@ -9,9 +10,7 @@
             {#- Left: space identity only. The nav toggle is the floating pill
                 below, mirroring frappe-ui docs. -#}
             <div class="flex items-center gap-2 min-w-0">
-                {% if wiki_space.app_switcher_logo %}
-                <img class="size-6 flex-shrink-0" src="{{ wiki_space.app_switcher_logo }}"/>
-                {% endif %}
+                {{ render_space_mark(wiki_space) }}
                 <span class="font-semibold text-[var(--ink-gray-9)] truncate" data-testid="mobile-space-name">{{ wiki_space.space_name or _("Wiki") }}</span>
             </div>
 
@@ -22,19 +21,19 @@
                     <a href="{{ item.url }}"
                        target="_blank" rel="noopener noreferrer"
                        title="{{ item.label }}"
-                       class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-md transition-colors duration-200">
+                       class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-5 transition-colors duration-200">
                         {{ render_icon(item.icon) }}
                     </a>
                     {% endif %}
                 {% endfor %}
                 <button @click="$dispatch('open-search')"
                         data-testid="mobile-search-button"
-                        class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-md transition-colors duration-200">
+                        class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-5 transition-colors duration-200">
                     {{ render_icon("search") }}
                 </button>
                 <button @click="$store.theme.toggle()"
                         data-testid="mobile-theme-toggle"
-                        class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-md transition-colors duration-200">
+                        class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-5 transition-colors duration-200">
                     <template x-if="$store.theme.isDark">
                         {{ render_icon("sun") }}
                     </template>
@@ -126,7 +125,7 @@
          {#- Fixed 80dvh, not max-h: the sheet keeps one height whatever the
              tree's size, the way frappe-ui docs' drawer does. dvh so iOS
              browser chrome doesn't clip the bottom of the list. -#}
-         class="fixed left-0 right-0 bottom-0 h-[80dvh] bg-[var(--surface-base)] z-50 flex flex-col rounded-t-2xl shadow-2xl"
+         class="fixed left-0 right-0 bottom-0 h-[80dvh] bg-[var(--surface-base)] z-50 flex flex-col rounded-t-8 shadow-2xl"
          data-testid="mobile-bottom-sheet"
          x-cloak>
 
@@ -142,13 +141,11 @@
         {#- No divider: the docs sheet has no internal rules, only the search field's own border. -#}
         <div class="px-4 pb-3 flex items-center justify-between">
             <div class="flex items-center gap-3 flex-1 min-w-0">
-                {% if wiki_space.app_switcher_logo %}
-                <img class="size-7 flex-shrink-0" src="{{ wiki_space.app_switcher_logo }}"/>
-                {% endif %}
+                {{ render_space_mark(wiki_space, size="md") }}
                 <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.space_name or _("Wiki") }}</h3>
                 {% if wiki_spaces_for_switcher and wiki_spaces_for_switcher|length > 1 %}
                 <button @click="spaceSwitcherOpen = !spaceSwitcherOpen"
-                        class="p-1.5 rounded hover:bg-[var(--surface-gray-2)] transition-colors duration-200 flex-shrink-0"
+                        class="p-1.5 rounded-4 hover:bg-[var(--surface-gray-2)] transition-colors duration-200 flex-shrink-0"
                         title="Switch wiki space">
                     <span class="inline-flex" :class="{ 'rotate-180': spaceSwitcherOpen }">{{ render_icon("chevrons-up-down", "text-[var(--ink-gray-5)] transition-transform duration-200") }}</span>
                 </button>
@@ -156,7 +153,7 @@ <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.spa
             </div>
             <button @click="closeSidebar()"
                     aria-label="Close sidebar"
-                    class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-md transition-colors duration-200 flex-shrink-0">
+                    class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-5 transition-colors duration-200 flex-shrink-0">
                 {{ render_icon("x") }}
             </button>
         </div>
@@ -170,7 +167,10 @@ <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.spa
                 {% for space in wiki_spaces_for_switcher %}
                 <a href="/{{ space.route }}"
                    class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm transition-colors duration-200 {{ 'bg-[var(--surface-gray-2)] text-[var(--ink-gray-9)] font-medium' if space.name == wiki_space.name else 'text-[var(--ink-gray-7)] hover:bg-[var(--surface-gray-2)] hover:text-[var(--ink-gray-9)]' }}">
-                    <span class="truncate">{{ space.space_name }}</span>
+                    <span class="flex min-w-0 items-center gap-2">
+                        {{ render_space_mark(space) }}
+                        <span class="truncate">{{ space.space_name }}</span>
+                    </span>
                     {% if space.name == wiki_space.name %}
                     {{ render_icon("check", "text-[var(--ink-gray-9)] flex-shrink-0") }}
                     {% endif %}
@@ -180,67 +180,7 @@ <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.spa
         </div>
         {% endif %}
 
-        {#- Tab picker (mobile) — the horizontal tab bar is desktop-only, so on
-            mobile a frappe-ui-style combobox switches tabs. Selecting one
-            navigates to its landing route; the tree below then gates to that
-            tab's subtree, exactly like the desktop sidebar. -#}
-        {#- Split on the space's tabs flag, not on the node flags: a space with
-            tabs off keeps its is_tab nodes but must render one plain tree. -#}
         {% set current_route = doc.route if doc else '' %}
-        {% set tabs_on = space_tabs and space_tabs | length %}
-        {% set tab_nodes = (nested_tree or []) | selectattr('is_tab') | list if tabs_on else [] %}
-        {% set other_nodes = ((nested_tree or []) | rejectattr('is_tab') | list) if tabs_on else (nested_tree or []) %}
-        {% set show_home = (tab_nodes | length) >= 1 and (other_nodes | length) > 0 %}
-        {% set tab_routes = tab_nodes | map(attribute='route') | join('|') %}
-        {% set active = namespace(in_tab=false) %}
-        {% for t in tab_nodes %}{% if current_route == t.route or current_route.startswith(t.route ~ '/') %}{% set active.in_tab = true %}{% endif %}{% endfor %}
-        {% if space_tabs %}
-        {% set real_routes = space_tabs | rejectattr('doc_key', 'equalto', '__general__') | map(attribute='route') | join('|') %}
-        <div class="px-3 pt-3 pb-1 flex-shrink-0" x-data="{ tabPickerOpen: false }" @click.outside="tabPickerOpen = false">
-            <button type="button"
-                    @click="tabPickerOpen = !tabPickerOpen"
-                    aria-haspopup="listbox"
-                    :aria-expanded="tabPickerOpen"
-                    {#- frappe-ui Button, gray-outline, size md — full width. -#}
-                    class="flex h-8 w-full items-center gap-2 rounded-4 border border-[var(--outline-gray-2)] bg-[var(--surface-base)] px-2.5 text-base-medium text-[var(--ink-gray-8)] transition-colors hover:border-[var(--outline-gray-3)] active:border-[var(--outline-gray-3)] active:bg-[var(--surface-gray-4)] cursor-pointer">
-                {%- for tab in space_tabs %}
-                {#- Routes are editor-set and can contain quotes; tojson keeps them
-                    as safe JS string literals inside Alpine expressions (XSS guard). -#}
-                {%- set active_js = "$store.navigation.notInAnyTab(" ~ (real_routes | tojson | forceescape) ~ ")" if tab.doc_key == '__general__' else "$store.navigation.inTab(" ~ (tab.route | tojson | forceescape) ~ ")" %}
-                <span class="flex min-w-0 flex-1 items-center gap-2" x-show="{{ active_js }}" x-cloak>
-                    {% if tab.tab_icon %}{{ lucide_svg(tab.tab_icon, "size-4 shrink-0 text-[var(--ink-gray-6)]") | safe }}{% endif %}
-                    <span class="truncate text-start">{{ tab.title }}</span>
-                </span>
-                {%- endfor %}
-                <span class="inline-flex" :class="{ 'rotate-180': tabPickerOpen }">{{ render_icon("chevron-down", "shrink-0 text-[var(--ink-gray-5)] transition-transform duration-200") }}</span>
-            </button>
-
-            <div x-show="tabPickerOpen"
-                 x-transition:enter="transition ease-out duration-100"
-                 x-transition:enter-start="opacity-0 -translate-y-1"
-                 x-transition:enter-end="opacity-100 translate-y-0"
-                 x-cloak
-                 role="listbox"
-                 {#- frappe-ui Menu content + group padding. -#}
-                 class="mt-1 rounded-lg bg-[var(--surface-elevation-2)] p-1.5 shadow-2xl ring-1 ring-black/5">
-                {%- for tab in space_tabs %}
-                {%- set target = tab.landing_route or tab.route %}
-                {%- set active_js = "$store.navigation.notInAnyTab(" ~ (real_routes | tojson | forceescape) ~ ")" if tab.doc_key == '__general__' else "$store.navigation.inTab(" ~ (tab.route | tojson | forceescape) ~ ")" %}
-                <button type="button"
-                        role="option"
-                        :aria-selected="{{ active_js }}"
-                        @click="$store.navigation.navigateTo({{ target | tojson | forceescape }}); tabPickerOpen = false; closeSidebar()"
-                        {#- frappe-ui ItemListRow (size sm) + Menu highlight colour. -#}
-                        class="flex min-h-7 w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-base transition-colors"
-                        :class="{{ active_js }} ? 'bg-[var(--surface-gray-3)] text-[var(--ink-gray-8)]' : 'text-[var(--ink-gray-7)] hover:bg-[var(--surface-alpha-gray-2)]'">
-                    {% if tab.tab_icon %}{{ lucide_svg(tab.tab_icon, "size-4 shrink-0 text-[var(--ink-gray-6)]") | safe }}{% endif %}
-                    <span class="truncate text-start flex-1">{{ tab.title }}</span>
-                    <span class="inline-flex" x-show="{{ active_js }}">{{ render_icon("check", "shrink-0 text-[var(--ink-gray-9)]") }}</span>
-                </button>
-                {%- endfor %}
-            </div>
-        </div>
-        {% endif %}
 
         {#- Sheet search — frappe-ui docs hides the navbar search field below md
             and puts this in the drawer instead, so it's the only search bar
@@ -260,7 +200,7 @@ <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.spa
                        placeholder="{{ _('Search') }}"
                        aria-label="{{ _('Search navigation') }}"
                        autocomplete="off"
-                       class="w-full h-10 rounded-md py-1.5 ps-10 pe-3 text-lg text-[var(--ink-gray-8)] border border-[var(--surface-gray-2)] bg-[var(--surface-gray-2)] placeholder-[var(--ink-gray-4)] transition-colors hover:border-[var(--outline-elevation-2)] hover:bg-[var(--surface-gray-3)] focus:bg-[var(--surface-base)] focus:border-[var(--outline-gray-4)] focus:shadow-sm focus:ring-0 focus:outline-none">
+                       class="w-full h-10 rounded-5 py-1.5 ps-10 pe-3 text-lg text-[var(--ink-gray-8)] border border-[var(--surface-gray-2)] bg-[var(--surface-gray-2)] placeholder-[var(--ink-gray-4)] transition-colors hover:border-[var(--outline-elevation-2)] hover:bg-[var(--surface-gray-3)] focus:bg-[var(--surface-base)] focus:border-[var(--outline-gray-4)] focus:shadow-sm focus:ring-0 focus:outline-none">
             </div>
         </div>
 
@@ -269,20 +209,8 @@ <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.spa
             <div x-show="!navHasResults" x-cloak class="px-2 py-6 text-md text-[var(--ink-gray-5)] text-center">
                 {{ _("No results for") }} "<span x-text="navQuery"></span>"
             </div>
-            {% for tab in tab_nodes %}
-            {% set is_active_tab = current_route == tab.route or current_route.startswith(tab.route ~ '/') %}
-            <div x-show="$store.navigation.inTab({{ tab.route | tojson | forceescape }})"{% if not is_active_tab %} x-cloak{% endif %}>
-                {{ render_wiki_tree(tab.children, current_route=doc.route if doc else '', dense=False) }}
-            </div>
-            {% endfor %}
-
-            {% if show_home %}
-            <div x-show="$store.navigation.notInAnyTab({{ tab_routes | tojson | forceescape }})"{% if active.in_tab %} x-cloak{% endif %}>
-                {{ render_wiki_tree(other_nodes, current_route=doc.route if doc else '', dense=False) }}
-            </div>
-            {% else %}
-            {{ render_wiki_tree(other_nodes, current_route=doc.route if doc else '', dense=False) }}
-            {% endif %}
+            {#- One plain tree: a stale `is_tab` flag no longer splits it. -#}
+            {{ render_wiki_tree(nested_tree or [], current_route=current_route, dense=False) }}
         </nav>
 
         {% if navbar_items %}
@@ -294,13 +222,13 @@ <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.spa
                     <a href="{{ item.url }}"
                        target="_blank" rel="noopener noreferrer"
                        title="{{ item.label }}"
-                       class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-md transition-colors duration-200">
+                       class="p-2 text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-5 transition-colors duration-200">
                         {{ render_icon(item.icon, "w-5 h-5") }}
                     </a>
                     {% else %}
                     <a href="{{ item.url }}"
                        target="_blank" rel="noopener noreferrer"
-                       class="px-2 py-1.5 text-sm text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-md transition-colors duration-200">
+                       class="px-2 py-1.5 text-sm text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)] hover:bg-[var(--surface-gray-2)] rounded-5 transition-colors duration-200">
                         {{ item.label }}
                     </a>
                     {% endif %}
@@ -407,8 +335,6 @@ <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.spa
 
                 const query = this.navQuery.trim().toLowerCase();
 
-                // Clearing always spans every subtree, so switching tabs can't
-                // reveal rows left hidden by an earlier query.
                 if (!query) {
                     root.querySelectorAll('.wiki-item').forEach((item) =>
                         item.classList.remove('hidden'),
@@ -417,19 +343,7 @@ <h3 class="text-lg-semibold text-[var(--ink-gray-9)] truncate">{{ wiki_space.spa
                     return;
                 }
 
-                // Only the active tab's subtree is displayed; the others are
-                // still in the DOM. Filtering across all of them would count a
-                // match inside a hidden tab as a result, leaving the drawer
-                // blank with the no-results line suppressed.
-                const items = Array.from(root.children)
-                    .filter(
-                        (subtree) =>
-                            subtree.querySelector('.wiki-item') &&
-                            getComputedStyle(subtree).display !== 'none',
-                    )
-                    .flatMap((subtree) =>
-                        Array.from(subtree.querySelectorAll('.wiki-item')),
-                    );
+                const items = Array.from(root.querySelectorAll('.wiki-item'));
 
                 const shown = new Map();
                 for (const item of items.slice().reverse()) {
diff --git a/wiki/templates/wiki/includes/search_modal.html b/wiki/templates/wiki/includes/search_modal.html
index cdfeaed29..bbec15ef7 100644
--- a/wiki/templates/wiki/includes/search_modal.html
+++ b/wiki/templates/wiki/includes/search_modal.html
@@ -37,7 +37,7 @@
              x-transition:leave-start="opacity-100 scale-100"
              x-transition:leave-end="opacity-50 scale-[0.98]"
              @click.stop
-             class="flex flex-col w-full max-w-xl bg-[var(--surface-elevation-1)] rounded-xl shadow-xl overflow-hidden">
+             class="flex flex-col w-full max-w-xl bg-[var(--surface-elevation-1)] rounded-7 shadow-xl overflow-hidden">
 
             <!-- Search Input -->
             <div class="relative">
@@ -91,7 +91,7 @@
                                    @click.prevent="navigateTo(result.route)"
                                    @mouseenter="selectedIndex = index"
                                    :class="selectedIndex === index ? 'bg-[var(--surface-gray-3)]' : ''"
-                                   class="flex w-full min-w-0 items-start gap-3 rounded px-2 py-2 outline-none cursor-pointer">
+                                   class="flex w-full min-w-0 items-start gap-3 rounded-4 px-2 py-2 outline-none cursor-pointer">
                                     {{ render_icon("file-text", "mt-0.5 shrink-0 text-[var(--ink-gray-6)]") }}
                                     <span class="flex min-w-0 flex-1 flex-col gap-1">
                                         <span class="text-base font-medium text-[var(--ink-gray-7)] overflow-hidden text-ellipsis whitespace-nowrap [&_mark]:bg-transparent [&_mark]:text-[var(--ink-gray-9)] [&_mark]:font-semibold" x-html="result.title"></span>
@@ -111,16 +111,16 @@
             <div class="mt-2 hidden sm:flex items-center justify-between border-t border-[var(--outline-gray-1)] [[data-theme=dark]_&]:border-[var(--outline-gray-2)] px-2.5 py-2 text-xs text-[var(--ink-gray-6)]">
                 <div class="flex items-center gap-4">
                     <div class="flex items-center gap-1">
-                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
+                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                             {{ render_icon("arrow-down") }}
                         </kbd>
-                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
+                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                             {{ render_icon("arrow-up") }}
                         </kbd>
                         <span class="ml-1">{{ _("to navigate") }}</span>
                     </div>
                     <div class="flex items-center gap-1">
-                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
+                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                             {{ render_icon("corner-down-left") }}
                         </kbd>
                         <span class="ml-1">{{ _("to select") }}</span>
@@ -129,7 +129,7 @@
                         (see handleKeydown), so the docs' "new tab" hint applies
                         here too. -#}
                     <div class="flex items-center gap-1">
-                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
+                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                             <template x-if="isMac">{{ render_icon("command", "w-3 h-3") }}</template>
                             <template x-if="!isMac"><span class="pr-0.5">Ctrl</span></template>
                             {{ render_icon("corner-down-left") }}
@@ -137,14 +137,14 @@
                         <span class="ml-1">{{ _("new tab") }}</span>
                     </div>
                     <div class="flex items-center gap-1">
-                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-[var(--surface-gray-2)] p-0.5 px-1 font-[inherit] font-medium leading-normal tracking-[0.02em] text-sm text-[var(--ink-gray-5)]">
+                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 px-1 font-[inherit] font-medium leading-normal tracking-[0.02em] text-sm text-[var(--ink-gray-5)]">
                             esc
                         </kbd>
                         <span class="ml-1">{{ _("to close") }}</span>
                     </div>
                 </div>
                 <div class="flex items-center gap-1">
-                    <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
+                    <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                         <template x-if="isMac">{{ render_icon("command", "w-3 h-3") }}</template>
                         <template x-if="!isMac"><span class="pr-0.5">Ctrl</span></template>
                         <span class="text-sm">K</span>
diff --git a/wiki/templates/wiki/includes/sidebar.html b/wiki/templates/wiki/includes/sidebar.html
index 64eb7bf2c..85e6e67dc 100644
--- a/wiki/templates/wiki/includes/sidebar.html
+++ b/wiki/templates/wiki/includes/sidebar.html
@@ -1,10 +1,10 @@
 {% from "templates/wiki/macros/sidebar_tree.html" import render_wiki_tree %}
 {% from "templates/wiki/macros/buttons.html" import render_icon %}
 
-{#- The sidebar starts below the full-width navbar and tab rows, so `top` and
-    height are offset by --wiki-chrome-h (set in layout.html). Its own logo
-    header moved into includes/header.html for the same reason: there is no
-    top-of-window strip left for it here. -#}
+{#- The sidebar starts below the full-width navbar, so `top` and height are
+    offset by --wiki-chrome-h (set in layout.html). Its own logo header moved
+    into includes/header.html for the same reason: there is no top-of-window
+    strip left for it here. -#}
 {#- Keeps its right border: the current Frappe docs layout separates the tree
     from the content with a hairline (`border-r` at the default outline-gray-1),
     and without one a white sidebar on a white page has nothing to sit against.
@@ -13,49 +13,14 @@
      x-data="wikiSidebar()"
      :style="isCollapsed ? 'width: 0; border-right-width: 0;' : 'width: 18rem;'">
 
-    {#- Only the active tab's subtree renders. Visibility is driven by Alpine
-        off $store.navigation.currentRoute rather than re-rendered, so SPA
-        navigation can't leave a stale tree behind — the same mechanism the
-        tree's own active-page highlight already uses. It works because a tab's
-        slug is always an ancestor segment of its pages' routes, so "is this
-        page in this tab" is a route-prefix test.
-
-        The tab bar itself lives in includes/tabs.html, a full-width row above
-        this sidebar. -#}
-    {#- `space_tabs` is empty for a space with tabs switched off, and the node
-        flags are left in place when that happens — so the flag, not is_tab, is
-        what decides whether this tree is split into tab subtrees at all. -#}
+    {#- The whole tree renders at once. Groups that still carry a stale `is_tab`
+        flag are ordinary top-level groups here — the flag is cosmetic-only now
+        and never filters what the reader shows. -#}
     {% set current_route = doc.route if doc else '' %}
-    {% set tabs_on = space_tabs and space_tabs | length %}
-    {% set tab_nodes = (nested_tree or []) | selectattr('is_tab') | list if tabs_on else [] %}
-    {% set other_nodes = ((nested_tree or []) | rejectattr('is_tab') | list) if tabs_on else (nested_tree or []) %}
-
-    {#- Home leads the reader bar whenever there's at least one tab and untabbed
-        content to land on (see get_space_tabs). When it does, the untabbed subtree
-        becomes Home's own — shown only while no tab is active — instead of leaking
-        into every tab's sidebar. With no tabs there's no Home, so it renders
-        inline (the whole tree is untabbed anyway). -#}
-    {% set show_home = (tab_nodes | length) >= 1 and (other_nodes | length) > 0 %}
-    {% set tab_routes = tab_nodes | map(attribute='route') | join('|') %}
-    {% set active = namespace(in_tab=false) %}
-    {% for t in tab_nodes %}{% if current_route == t.route or current_route.startswith(t.route ~ '/') %}{% set active.in_tab = true %}{% endif %}{% endfor %}
 
     <!-- Scrollable Navigation -->
     <nav class="px-2 py-2 flex-1 overflow-y-auto">
-        {% for tab in tab_nodes %}
-        {% set is_active_tab = current_route == tab.route or current_route.startswith(tab.route ~ '/') %}
-        <div x-show="$store.navigation.inTab({{ tab.route | tojson | forceescape }})"{% if not is_active_tab %} x-cloak{% endif %}>
-            {{ render_wiki_tree(tab.children, current_route=current_route, expanded_nodes=expanded_nodes or set()) }}
-        </div>
-        {% endfor %}
-
-        {% if show_home %}
-        <div x-show="$store.navigation.notInAnyTab({{ tab_routes | tojson | forceescape }})"{% if active.in_tab %} x-cloak{% endif %}>
-            {{ render_wiki_tree(other_nodes, current_route=current_route, expanded_nodes=expanded_nodes or set()) }}
-        </div>
-        {% else %}
-        {{ render_wiki_tree(other_nodes, current_route=current_route, expanded_nodes=expanded_nodes or set()) }}
-        {% endif %}
+        {{ render_wiki_tree(nested_tree or [], current_route=current_route, expanded_nodes=expanded_nodes or set()) }}
     </nav>
 </div>
 
@@ -83,9 +48,12 @@
 <script>
     // Initialize Alpine.js stores
     document.addEventListener('alpine:init', () => {
-        // Get initial theme from localStorage, default to light
-        const stored = localStorage.getItem('wiki-theme');
-        const initialIsDark = stored === 'dark';
+        // Same key resolution as layout.html's pre-paint script: `theme` is what
+        // frappe-ui and the editor SPA write, `wiki-theme` is the older key both
+        // surfaces shared. Read the painted result rather than re-deriving it, so
+        // a stored 'system' can't disagree with what the page already shows.
+        const initialIsDark =
+            document.documentElement.getAttribute('data-theme') === 'dark';
 
         // Theme store for dark/light mode
         Alpine.store('theme', {
@@ -99,7 +67,10 @@
                 // rAFs so the class survives the style + paint of the swap.
                 root.classList.add('no-transition');
                 root.setAttribute('data-theme', newTheme);
-                localStorage.setItem('wiki-theme', newTheme);
+                // Write frappe-ui's key so a toggle here and a toggle in the
+                // editor SPA agree. The old key is left alone rather than kept in
+                // sync: it is only ever read as a fallback.
+                localStorage.setItem('theme', newTheme);
                 requestAnimationFrame(() => {
                     requestAnimationFrame(() => {
                         root.classList.remove('no-transition');
@@ -150,25 +121,6 @@
                 history.replaceState({ route: this.currentRoute }, '', window.location.pathname + window.location.hash);
             },
 
-            // Whether the current page lives under a tab. A tab's slug is
-            // always an ancestor segment of its pages' routes, so this is a
-            // prefix test — and because it reads currentRoute, both the tab
-            // bar's active state and the sidebar subtree react to SPA nav
-            // without anything being re-rendered.
-            inTab(route) {
-                if (!route) return false;
-                return this.currentRoute === route
-                    || this.currentRoute.startsWith(route + '/');
-            },
-
-            // The mirror of inTab for the Home tab: active when the current page
-            // sits under none of the real tabs. `routesStr` is a '|'-joined list
-            // of tab routes (wiki routes never contain '|').
-            notInAnyTab(routesStr) {
-                if (!routesStr) return true;
-                return !routesStr.split('|').some((route) => this.inTab(route));
-            },
-
             async prefetch(route) {
                 if (route === this.currentRoute || this.prefetchCache[route]) return;
 
@@ -347,7 +299,7 @@
                         .replaceAll('"', '&quot;')
                         .replaceAll("'", '&#39;');
                     const jsRoute = (route) => esc(JSON.stringify(route));
-                    const navLinkClasses = "group inline-flex min-w-0 max-w-[48%] items-center gap-2 h-8 px-2.5 rounded text-base font-medium text-[var(--ink-gray-8)] bg-[var(--surface-gray-2)] hover:bg-[var(--surface-gray-3)] active:bg-[var(--surface-gray-4)] transition-colors no-underline";
+                    const navLinkClasses = "group inline-flex min-w-0 max-w-[48%] items-center gap-2 h-8 px-2.5 rounded-4 text-base font-medium text-[var(--ink-gray-8)] bg-[var(--surface-gray-2)] hover:bg-[var(--surface-gray-3)] active:bg-[var(--surface-gray-4)] transition-colors no-underline";
                     const arrowLeft = '<svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"></path><path d="m12 19-7-7 7-7"></path></svg>';
                     const arrowRight = '<svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>';
                     html = '<div class="flex justify-between gap-5">';
diff --git a/wiki/templates/wiki/includes/tabs.html b/wiki/templates/wiki/includes/tabs.html
deleted file mode 100644
index aa695f41f..000000000
--- a/wiki/templates/wiki/includes/tabs.html
+++ /dev/null
@@ -1,53 +0,0 @@
-{#- Horizontal module tabs — a full-width row of its own, directly under the
-    navbar and above both the sidebar and the content column. That ordering is
-    the point: navbar > tabs > tree makes the nesting legible, where a tab bar
-    living inside the content column read as a sibling of the tree.
-
-    Tabs are top-level groups flagged is_tab; clicking one swaps the sidebar
-    tree underneath.
-
-    Active state is driven by Alpine off $store.navigation.currentRoute rather
-    than being re-rendered, so SPA navigation can't leave a stale bar behind.
-    That works because a tab's slug is always an ancestor segment of its pages'
-    routes, making "is this page in this tab" a prefix test.
-
-    Styling mirrors frappe-ui's Tabs, same as the editor's WikiTabBar: gap-5,
-    text-base, ink-gray-5 resting / ink-gray-9 active, and a 2px rounded
-    surface-gray-10 indicator.
-
-    Icons are inlined server-side via wiki.utils.lucide_svg — the reader's
-    Tailwind build has no lucide plugin, so a `lucide-*` class would render as
-    an empty box here. -#}
-{% if space_tabs %}
-<div class="hidden lg:flex items-stretch px-6 border-b border-[var(--outline-gray-1)] bg-[var(--surface-base)] sticky top-[53px] z-20 h-11"
-     x-data>
-    {#- Home is active when the current page sits under no tab, so its highlight
-        keys off the real tab routes rather than a prefix of its own. -#}
-    {% set real_routes = space_tabs | rejectattr('doc_key', 'equalto', '__general__') | map(attribute='route') | join('|') %}
-    <nav class="flex min-w-0 items-stretch gap-5 overflow-x-auto no-scrollbar" role="tablist">
-        {% for tab in space_tabs %}
-        {% set target = tab.landing_route or tab.route %}
-        {#- Routes are editor-set and can contain quotes, so every route
-            interpolated into an Alpine JS expression goes through `tojson` to
-            stay a safe, quoted JS string literal (stored-XSS guard). -#}
-        {% set active_js = "$store.navigation.notInAnyTab(" ~ (real_routes | tojson | forceescape) ~ ")" if tab.doc_key == '__general__' else "$store.navigation.inTab(" ~ (tab.route | tojson | forceescape) ~ ")" %}
-        <a href="/{{ target }}"
-           role="tab"
-           @click.prevent="$store.navigation.navigateTo({{ target | tojson | forceescape }})"
-           @mouseenter="$store.navigation.prefetch({{ target | tojson | forceescape }})"
-           :aria-selected="{{ active_js }}"
-           class="relative flex shrink-0 items-center gap-1.5 text-base whitespace-nowrap no-underline duration-300 ease-in-out"
-           :class="{{ active_js }} ? 'text-[var(--ink-gray-9)]' : 'text-[var(--ink-gray-5)] hover:text-[var(--ink-gray-9)]'"
-           title="{{ tab.title }}">
-            {# `| safe`: the markup is build-generated (scripts/generate-public-lucide.mjs),
-               keyed by a stored class name, and the CSS class is escaped in the helper. #}
-            {% if tab.tab_icon %}{{ lucide_svg(tab.tab_icon, "size-4 shrink-0") | safe }}{% endif %}
-            <span>{{ tab.title }}</span>
-            <span class="absolute inset-x-0 bottom-0 h-[2px] rounded-full bg-[var(--surface-gray-10)]"
-                  x-show="{{ active_js }}"
-                  x-cloak></span>
-        </a>
-        {% endfor %}
-    </nav>
-</div>
-{% endif %}
diff --git a/wiki/templates/wiki/layout.html b/wiki/templates/wiki/layout.html
index f84c7f68a..dd3884e0b 100644
--- a/wiki/templates/wiki/layout.html
+++ b/wiki/templates/wiki/layout.html
@@ -33,9 +33,17 @@
     <!-- Theme + sidebar initialization - must run before page renders to prevent flash -->
     <script>
         (function() {
-            const stored = localStorage.getItem('wiki-theme');
-            // Default to light theme if no preference is stored
-            const theme = stored || 'light';
+            // `theme` is frappe-ui's key, which the editor SPA now writes through
+            // useColorScheme; `wiki-theme` is what both surfaces used before and
+            // is still read so an existing preference survives. frappe-ui also
+            // stores 'system', which resolves against the OS.
+            const stored = localStorage.getItem('theme') || localStorage.getItem('wiki-theme');
+            const theme = stored === 'dark' || stored === 'light'
+                ? stored
+                : stored === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches
+                    ? 'dark'
+                    // Default to light theme if no preference is stored
+                    : 'light';
             document.documentElement.setAttribute('data-theme', theme);
 
             // Read sidebar collapsed state to prevent layout shift
@@ -60,13 +68,12 @@
 
     {{ head_html or "" }}
 </head>
-{#- `data-wiki-tabs` / `data-wiki-bare` drive --wiki-chrome-h (see main.css):
-    the height of the sticky chrome above the sidebar, which everything below it
-    offsets against. It's a CSS variable rather than an inline value because the
-    chrome is desktop-only — below `lg` the offset has to collapse to zero. -#}
-{% set has_tabs = space_tabs and space_tabs|length %}
+{#- `data-wiki-bare` drives --wiki-chrome-h (see main.css): the height of the
+    sticky chrome above the sidebar, which everything below it offsets against.
+    It's a CSS variable rather than an inline value because the chrome is
+    desktop-only — below `lg` the offset has to collapse to zero. -#}
 <body class="min-h-screen antialiased bg-[var(--surface-base)] text-[var(--ink-gray-9)] text-base max-w-[2000px] mx-auto"
-      {% if hide_chrome %}data-wiki-bare{% elif has_tabs %}data-wiki-tabs{% endif %}>
+      {% if hide_chrome %}data-wiki-bare{% endif %}>
     {% if not hide_chrome %}
     {% include "templates/wiki/includes/search_modal.html" %}
 
@@ -74,12 +81,10 @@
     {% include "templates/wiki/includes/mobile_header.html" %}
     {% endif %}
 
-    {#- Chrome stacks top-down at full width — navbar, then tabs — so the
-        sidebar tree reads as nested inside the active tab rather than as its
-        sibling. -#}
+    {#- The navbar is the whole desktop chrome: one full-width row above both
+        the sidebar and the content column. -#}
     {% if not hide_chrome %}
     {% include "templates/wiki/includes/header.html" %}
-    {% include "templates/wiki/includes/tabs.html" %}
     {% endif %}
 
     <!-- Main flex container: sidebar + content column, both below the chrome -->
diff --git a/wiki/templates/wiki/macros/buttons.html b/wiki/templates/wiki/macros/buttons.html
index e6de1f524..1cef0c186 100644
--- a/wiki/templates/wiki/macros/buttons.html
+++ b/wiki/templates/wiki/macros/buttons.html
@@ -31,7 +31,7 @@
                     {{ render_icon("clipboard", "w-4 h-4") }}
                 </template>
                 <template x-if="copied">
-                    {{ render_icon("check", "w-4 h-4 text-[var(--ink-green-8)]") }}
+                    {{ render_icon("check", "w-4 h-4 text-[var(--ink-green-7)]") }}
                 </template>
                 <span x-text="copied ? 'Copied!' : 'Copy'"></span>
             </button>
@@ -54,12 +54,12 @@
              x-transition:leave="transition ease-in duration-75"
              x-transition:leave-start="opacity-100 scale-100"
              x-transition:leave-end="opacity-0 scale-95"
-             class="absolute left-0 sm:left-auto sm:right-0 top-full mt-1 w-72 min-w-40 bg-[var(--surface-elevation-2)] rounded-lg shadow-2xl ring-1 ring-black/5 z-50 p-1.5">
+             class="absolute left-0 sm:left-auto sm:right-0 top-full mt-1 w-72 min-w-40 bg-[var(--surface-elevation-2)] rounded-6 shadow-2xl ring-1 ring-black/5 z-50 p-1.5">
 {% endmacro %}
 
 {# Menu row geometry, straight from frappe-ui's ItemListRow (size sm) plus the
    Menu highlight colour. Every row in a page-actions menu uses it. #}
-{% set menu_row = "w-full flex items-center gap-2 min-h-7 px-2 py-1.5 rounded text-base text-left text-[var(--ink-gray-7)] hover:bg-[var(--surface-alpha-gray-2)] transition-colors" %}
+{% set menu_row = "w-full flex items-center gap-2 min-h-7 px-2 py-1.5 rounded-4 text-base text-left text-[var(--ink-gray-7)] hover:bg-[var(--surface-alpha-gray-2)] transition-colors" %}
 
 {# Dropdown row that triggers downloadPage() and reflects the downloadInProgress state.
    Keeps the dropdown open while preparing the PDF so the loading state stays visible. #}
diff --git a/wiki/templates/wiki/macros/sidebar_tree.html b/wiki/templates/wiki/macros/sidebar_tree.html
index 08f1b209f..4ccfc5ac6 100644
--- a/wiki/templates/wiki/macros/sidebar_tree.html
+++ b/wiki/templates/wiki/macros/sidebar_tree.html
@@ -3,7 +3,7 @@
     uses — h-11 at text-md, which is a real touch target rather than a
     28px line. -#}
 {% macro render_wiki_tree(nodes, level=0, current_route='', expanded_nodes=set(), dense=True) %}
-    {% set row_geometry = "h-7 rounded" if dense else "h-11 rounded-md" %}
+    {% set row_geometry = "h-7 rounded-4" if dense else "h-11 rounded-5" %}
     {% set row_text = "text-sm" if dense else "text-md" %}
     {% set row_text_medium = "text-sm-medium" if dense else "text-md font-medium" %}
     {% if nodes %}
diff --git a/wiki/templates/wiki/macros/space.html b/wiki/templates/wiki/macros/space.html
new file mode 100644
index 000000000..9eb3df778
--- /dev/null
+++ b/wiki/templates/wiki/macros/space.html
@@ -0,0 +1,34 @@
+{# A space's mark on the public reader: the generated art, a lucide icon on a
+   tinted square, an uploaded logo, or the space's initial.
+
+   The same four cases as `SpaceAvatar.vue`, resolved by the same rules through
+   `wiki.utils.space_mark`. A space that shows a green book in the app and a
+   blue initial on its own page has two identities, not one.
+
+   Usage:
+   {{ render_space_mark(wiki_space) }}
+   {{ render_space_mark(space, size="md") }}
+#}
+{% macro render_space_mark(space, size="sm") %}
+    {%- set mark = space_mark(space) -%}
+    {%- set box = {"sm": "size-6", "md": "size-7"}.get(size, "size-6") -%}
+    {%- set glyph = {"sm": "size-4", "md": "size-[18px]"}.get(size, "size-4") -%}
+    {%- set text = {"sm": "text-xs", "md": "text-sm"}.get(size, "text-xs") -%}
+    {%- if mark.image -%}
+    {#- object-contain, not cover: an uploaded logo is often a wordmark, and
+        cropping one is worse than letterboxing it. -#}
+    <img class="{{ box }} shrink-0 rounded-[5px] object-contain" src="{{ mark.image | e }}" alt=""/>
+    {%- elif mark.mode == "icon" -%}
+    {#- The colour is only ever one of six palette names -- `space_color_theme`
+        resolves anything else to a hashed one -- so it is safe in a style
+        attribute, and it keeps the tint on the design system's tokens rather
+        than a hex value written here. -#}
+    <span class="{{ box }} shrink-0 inline-flex items-center justify-center rounded-[5px]"
+          style="background-color: var(--surface-{{ mark.color }}-2); color: var(--ink-{{ mark.color }}-7)"
+          aria-hidden="true">{{ lucide_svg(mark.icon, glyph) | safe }}</span>
+    {%- else -%}
+    <span class="{{ box }} {{ text }} shrink-0 inline-flex items-center justify-center rounded-[5px] font-medium uppercase"
+          style="background-color: var(--surface-{{ mark.color }}-2); color: var(--ink-{{ mark.color }}-7)"
+          aria-hidden="true">{{ mark.initial }}</span>
+    {%- endif -%}
+{% endmacro %}
diff --git a/wiki/templates/wiki/og_image.html b/wiki/templates/wiki/og_image.html
index 46c370668..c980fb1ae 100644
--- a/wiki/templates/wiki/og_image.html
+++ b/wiki/templates/wiki/og_image.html
@@ -23,14 +23,29 @@
 	   bar) are both design decisions that have been on and off, and keeping
 	   them declared keeps the drift test guarding their values. */
 	:root {
-		--ink-gray-9: #0f0f0f;      /* lightMode/gray/950 */
-		--ink-gray-7: #383838;      /* lightMode/gray/800 */
-		--ink-gray-5: #7c7c7c;      /* lightMode/gray/600 */
-		--outline-gray-2: #e2e2e2;  /* lightMode/gray/300 */
-		--surface-gray-2: #f3f3f3;  /* lightMode/gray/100 */
-		--surface-base: #ffffff;    /* neutral/white */
+		--ink-gray-9: oklch(0.168 0 0);      /* lightMode/gray/950 */
+		--ink-gray-7: oklch(0.341 0 0);      /* lightMode/gray/800 */
+		--ink-gray-5: oklch(0.586 0 0);      /* lightMode/gray/600 */
+		--outline-gray-2: oklch(0.913 0 0);  /* lightMode/gray/300 */
+		--surface-gray-2: oklch(0.964 0 0);  /* lightMode/gray/100 */
+		--surface-base: oklch(1 0 0);        /* neutral/white */
 		--font-weight-semibold: 600;
 		--font-weight-medium: 500;
+
+		/* The space-mark palette, the same six tints `SPACE_COLORS` allows.
+		   All six are declared even though one card draws at most one: which
+		   one is data, and a missing token would silently paint the mark
+		   transparent. gray reuses surface-gray-2 / ink-gray-7 above. */
+		--surface-blue-2: oklch(0.96 0.021 241.348);     /* lightMode/blue/100 */
+		--ink-blue-7: oklch(0.561 0.168 252.355);        /* lightMode/blue/700 */
+		--surface-green-2: oklch(0.965 0.03 155.987);    /* lightMode/green/100 */
+		--ink-green-7: oklch(0.53 0.122 156.15);         /* lightMode/green/700 */
+		--surface-amber-2: oklch(0.967 0.045 91.733);    /* lightMode/amber/100 */
+		--ink-amber-7: oklch(0.612 0.136 63.758);        /* lightMode/amber/700 */
+		--surface-red-2: oklch(0.947 0.026 17.626);      /* lightMode/red/100 */
+		--ink-red-7: oklch(0.497 0.185 27.335);          /* lightMode/red/700 */
+		--surface-violet-2: oklch(0.943 0.031 297.722);  /* lightMode/violet/100 */
+		--ink-violet-7: oklch(0.438 0.155 286.38);       /* lightMode/violet/700 */
 	}
 
 	@font-face {
@@ -71,6 +86,26 @@
 		object-position: left center;
 	}
 
+	/* A generated mark or an icon on its tint: square, unlike a wordmark logo,
+	   and sized to the logo's 132px so a space reads the same either way. The
+	   tint uses the card's own token block, and `mark_color` is always one of
+	   six palette names. `overflow: hidden` is what rounds a generated SVG,
+	   which draws to its own edges. */
+	.mark {
+		height: 132px;
+		width: 132px;
+		border-radius: 24px;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.og-glyph {
+		height: 76px;
+		width: 76px;
+	}
+
 	.breadcrumb {
 		font-size: 32px;
 		font-weight: var(--font-weight-semibold);
@@ -104,7 +139,10 @@
 </head>
 <body>
 	<div class="header">
-		{% if logo_url %}<img class="logo" src="{{ logo_url | e }}" alt="">{% endif %}
+		{% if logo_url %}<img class="logo" src="{{ logo_url | e }}" alt="">
+		{% elif avatar_url %}<img class="mark" src="{{ avatar_url | e }}" alt="">
+		{% elif icon_svg %}<div class="mark" style="background-color: var(--surface-{{ mark_color }}-2); color: var(--ink-{{ mark_color }}-7)">{{ icon_svg | safe }}</div>
+		{% endif %}
 	</div>
 
 	<div class="main">
diff --git a/wiki/test_api.py b/wiki/test_api.py
index 63ffd0463..776ada2fe 100644
--- a/wiki/test_api.py
+++ b/wiki/test_api.py
@@ -864,6 +864,72 @@ def test_rebuild_respects_sort_order(self):
 		self.assertLess(page_b.lft, page_a.lft)
 
 
+class TestRestrictedSpaces(FrappeTestCase):
+	"""Tests for get_restricted_spaces, which backs the sidebar's lock icon."""
+
+	def setUp(self):
+		frappe.set_user("Administrator")
+
+	def tearDown(self):
+		frappe.set_user("Administrator")
+		frappe.db.rollback()
+
+	def test_a_space_with_no_roles_is_not_restricted(self):
+		"""No role rows means every logged-in user can read it."""
+		from wiki.api.wiki_space import get_restricted_spaces
+
+		space = create_test_wiki_space()
+
+		self.assertEqual(get_restricted_spaces([space.name]), [])
+
+	def test_a_guest_role_makes_a_space_public(self):
+		"""frappe.get_roles() returns Guest anonymously, so a Guest row is public."""
+		from wiki.api.wiki_space import get_restricted_spaces
+
+		space = create_test_wiki_space()
+		space.append("roles", {"role": "Guest", "permission_level": "Read"})
+		space.save()
+
+		self.assertEqual(get_restricted_spaces([space.name]), [])
+
+	def test_role_rows_without_guest_are_restricted(self):
+		from wiki.api.wiki_space import get_restricted_spaces
+
+		space = create_test_wiki_space()
+		space.append("roles", {"role": "Wiki Approver", "permission_level": "Read"})
+		space.save()
+
+		self.assertEqual(get_restricted_spaces([space.name]), [space.name])
+
+	def test_only_the_named_spaces_are_reported(self):
+		"""The sidebar asks about one page of spaces, not the whole wiki."""
+		from wiki.api.wiki_space import get_restricted_spaces
+
+		restricted = create_test_wiki_space()
+		restricted.append("roles", {"role": "Wiki Approver", "permission_level": "Read"})
+		restricted.save()
+		other = create_test_wiki_space()
+		other.append("roles", {"role": "Wiki Approver", "permission_level": "Read"})
+		other.save()
+
+		self.assertEqual(get_restricted_spaces([restricted.name]), [restricted.name])
+
+	def test_an_empty_request_is_answered_without_a_query(self):
+		from wiki.api.wiki_space import get_restricted_spaces
+
+		self.assertEqual(get_restricted_spaces([]), [])
+
+	def test_a_json_string_is_accepted(self):
+		"""The frontend posts the list as JSON."""
+		from wiki.api.wiki_space import get_restricted_spaces
+
+		space = create_test_wiki_space()
+		space.append("roles", {"role": "Wiki Approver", "permission_level": "Read"})
+		space.save()
+
+		self.assertEqual(get_restricted_spaces(json.dumps([space.name])), [space.name])
+
+
 # Helper functions
 
 
diff --git a/wiki/utils.py b/wiki/utils.py
index 1b038d571..97e95efe1 100644
--- a/wiki/utils.py
+++ b/wiki/utils.py
@@ -1,4 +1,5 @@
 import json
+import re
 from functools import lru_cache
 
 import frappe
@@ -96,3 +97,81 @@ def add_wiki_user_role(doc, event=None):
 				"role": "Wiki User",
 			}
 		).insert(ignore_permissions=True)
+
+
+# The palette a space's tint may resolve to, mirroring `SPACE_COLORS` in
+# `frontend/src/lib/spaceIdentity.js`. Kept in sync by hand: the SPA reads it
+# from frappe-ui's Avatar themes, and the reader's own Tailwind build ships the
+# same six as `--surface-*-2` / `--ink-*-7`.
+SPACE_COLORS = ("gray", "blue", "green", "amber", "red", "violet")
+
+# The stand-in when no icon has been picked, same as the SPA's.
+DEFAULT_SPACE_ICON = "lucide-book-open-text"
+
+# An SVG is a script host, and `avatar` is a field a Wiki Manager can write. A
+# stored mark is therefore only ever an <img> source -- which does not execute
+# script -- and only after it proves to be an SVG data URI. See the same guard
+# in `spaceIdentity.js`.
+_AVATAR_DATA_URI = re.compile(r"\Adata:image/svg\+xml[;,]", re.IGNORECASE)
+
+
+def space_avatar_src(avatar: str | None) -> str:
+	value = (avatar or "").strip()
+	return value if _AVATAR_DATA_URI.match(value) else ""
+
+
+def space_color_theme(color: str | None, seed: str | None) -> str:
+	"""The space's tint, hashed from its docname when none was picked.
+
+	Frappe never rewrites a docname on a rename, so a space keeps its colour
+	across one. The hash must stay identical to `spaceColorTheme`'s in
+	`spaceIdentity.js` or the reader and the app would draw different colours
+	for the same space.
+	"""
+	value = (color or "").strip()
+	if value in SPACE_COLORS:
+		return value
+
+	digest = 0
+	for char in seed or "":
+		# & 0xFFFFFFFF then sign-correct: JS does this arithmetic on int32.
+		digest = (digest * 31 + ord(char)) & 0xFFFFFFFF
+		if digest >= 0x80000000:
+			digest -= 0x100000000
+	return SPACE_COLORS[abs(digest) % len(SPACE_COLORS)]
+
+
+def space_mark(space) -> dict:
+	"""A space's visual identity, resolved exactly as the SPA resolves it.
+
+	`space` is anything with the five fields -- a `Wiki Space` document or a
+	`frappe.get_all` row. Returns `mode` ("avatar", "icon", "logo" or
+	"initial"), the `image` to draw for the first and third, the `icon` class
+	for the second, the `color` behind it, and the `initial` letter.
+
+	Ported from `resolveSpaceIdentity` in `frontend/src/lib/spaceIdentity.js`.
+	The two must agree: a space that shows a green book in the app and a blue
+	initial on its own reader page has two identities, not one.
+	"""
+	get = space.get if hasattr(space, "get") else lambda field: getattr(space, field, None)
+
+	name = get("name") or ""
+	label = get("space_name") or name
+	color = space_color_theme(get("space_color"), name)
+	mark = {"mode": "initial", "image": "", "icon": "", "color": color, "initial": label[:1].upper()}
+
+	avatar = space_avatar_src(get("avatar"))
+	if avatar:
+		return {**mark, "mode": "avatar", "image": avatar}
+
+	icon = (get("space_icon") or "").strip()
+	if icon:
+		# Anything outside the generated table would draw the fallback glyph
+		# rather than an empty box; `lucide_svg` handles that itself.
+		return {**mark, "mode": "icon", "icon": icon if icon.startswith("lucide-") else DEFAULT_SPACE_ICON}
+
+	logo = get("app_switcher_logo")
+	if logo:
+		return {**mark, "mode": "logo", "image": logo}
+
+	return mark
diff --git a/wiki/wiki/doctype/wiki_space/wiki_space.json b/wiki/wiki/doctype/wiki_space/wiki_space.json
index 112ecc452..f46836e8b 100644
--- a/wiki/wiki/doctype/wiki_space/wiki_space.json
+++ b/wiki/wiki/doctype/wiki_space/wiki_space.json
@@ -14,6 +14,11 @@
   "switcher_order",
   "column_break_bynr",
   "app_switcher_logo",
+  "space_icon",
+  "space_color",
+  "avatar",
+  "avatar_style",
+  "avatar_seed",
   "favicon",
   "enable_feedback_collection",
   "show_in_switcher",
@@ -111,6 +116,38 @@
    "label": "App Switcher Logo",
    "make_attachment_public": 1
   },
+  {
+   "description": "A lucide class name from the curated picker list, e.g. lucide-book-open-text.",
+   "fieldname": "space_icon",
+   "fieldtype": "Data",
+   "label": "Space Icon"
+  },
+  {
+   "description": "Tint behind the space icon: one of gray, blue, green, amber, red, violet.",
+   "fieldname": "space_color",
+   "fieldtype": "Data",
+   "label": "Space Color"
+  },
+  {
+   "description": "Generated mark as an SVG data URI. Hidden because it is a wall of text in a form.",
+   "fieldname": "avatar",
+   "fieldtype": "Long Text",
+   "hidden": 1,
+   "label": "Avatar"
+  },
+  {
+   "fieldname": "avatar_style",
+   "fieldtype": "Data",
+   "label": "Avatar Style",
+   "read_only": 1
+  },
+  {
+   "description": "Re-rolled by Shuffle. Stored so the same mark can be rebuilt from the style.",
+   "fieldname": "avatar_seed",
+   "fieldtype": "Data",
+   "label": "Avatar Seed",
+   "read_only": 1
+  },
   {
    "fieldname": "favicon",
    "fieldtype": "Attach Image",
@@ -174,25 +211,26 @@
   },
   {
    "default": "0",
-   "description": "Show a horizontal tab bar above the sidebar. Top-level groups flagged as tabs appear in it.",
+   "description": "Deprecated: tabs were removed. Kept for backwards compatibility.",
    "fieldname": "enable_tabs",
    "fieldtype": "Check",
+   "hidden": 1,
    "label": "Enable Tabbed Navigation"
   },
   {
    "default": "Home",
-   "depends_on": "eval:doc.enable_tabs",
-   "description": "Label for the synthetic Home tab that leads the space's tab bar.",
+   "description": "Deprecated: tabs were removed. Kept for backwards compatibility.",
    "fieldname": "home_tab_title",
    "fieldtype": "Data",
+   "hidden": 1,
    "label": "Home Tab Title"
   },
   {
    "default": "lucide-house",
-   "depends_on": "eval:doc.enable_tabs",
-   "description": "Lucide icon class for the Home tab, e.g. lucide-house.",
+   "description": "Deprecated: tabs were removed. Kept for backwards compatibility.",
    "fieldname": "home_tab_icon",
    "fieldtype": "Data",
+   "hidden": 1,
    "label": "Home Tab Icon"
   },
   {
diff --git a/wiki/wiki/doctype/wiki_space/wiki_space.py b/wiki/wiki/doctype/wiki_space/wiki_space.py
index ded91bde9..582905908 100644
--- a/wiki/wiki/doctype/wiki_space/wiki_space.py
+++ b/wiki/wiki/doctype/wiki_space/wiki_space.py
@@ -33,6 +33,9 @@ class WikiSpace(Document):
 		from wiki.wiki.doctype.wiki_group_item.wiki_group_item import WikiGroupItem
 
 		app_switcher_logo: DF.AttachImage | None
+		avatar: DF.LongText | None
+		avatar_seed: DF.Data | None
+		avatar_style: DF.Data | None
 		dark_mode_logo: DF.AttachImage | None
 		enable_feedback_collection: DF.Check
 		favicon: DF.AttachImage | None
@@ -42,6 +45,8 @@ class WikiSpace(Document):
 		root_group: DF.Link | None
 		route: DF.Data
 		show_in_switcher: DF.Check
+		space_color: DF.Data | None
+		space_icon: DF.Data | None
 		space_name: DF.Data | None
 		switcher_order: DF.Int
 		wiki_sidebars: DF.Table[WikiGroupItem]
diff --git a/wiki/wiki/git_sync.py b/wiki/wiki/git_sync.py
index c19195542..7bb0000ab 100644
--- a/wiki/wiki/git_sync.py
+++ b/wiki/wiki/git_sync.py
@@ -846,10 +846,6 @@ def _order_key(node: dict[str, Any]) -> tuple[int, float, str]:
 	target.insert(ignore_permissions=True)
 
 	def add_item(doc_key, title, slug, route, is_group, is_published, parent_key, order_index, content):
-		# A repo can't express tab flags, so carry them forward from the previous
-		# snapshot — otherwise every sync would silently demote the space's tabs.
-		prev = prev_items.get(doc_key) or {}
-
 		item = frappe.new_doc("Wiki Revision Item")
 		item.revision = target.name
 		item.doc_key = doc_key
@@ -857,8 +853,6 @@ def add_item(doc_key, title, slug, route, is_group, is_published, parent_key, or
 		item.slug = slug
 		item.route = route
 		item.is_group = is_group
-		item.is_tab = prev.get("is_tab") or 0
-		item.tab_icon = prev.get("tab_icon")
 		item.is_published = is_published
 		item.is_external_link = 0
 		item.parent_key = parent_key
diff --git a/wiki/wiki/llms_txt.py b/wiki/wiki/llms_txt.py
index 4407281a7..226bd50a4 100644
--- a/wiki/wiki/llms_txt.py
+++ b/wiki/wiki/llms_txt.py
@@ -13,7 +13,6 @@
 import re
 
 import frappe
-from frappe import _
 
 from wiki.frappe_wiki.doctype.wiki_document.wiki_document import (
 	get_first_published_page,
@@ -97,7 +96,7 @@ def _space_llms_txt(space: str) -> str | None:
 	space_doc = frappe.db.get_value(
 		"Wiki Space",
 		space,
-		["name", "space_name", "route", "root_group", "enable_tabs", "home_tab_title"],
+		["name", "space_name", "route", "root_group"],
 		as_dict=True,
 	)
 	# A root group that was deleted leaves nothing to walk, and walking it raises.
@@ -112,21 +111,9 @@ def _space_llms_txt(space: str) -> str | None:
 
 	pages = _published_pages(space_doc.name)
 
-	# Top-level tab groups become sections; anything untabbed goes under the
-	# space's Home tab, matching _home_tab_entry in the reader. A space with tabs
-	# switched off has no Home tab to name, so the whole tree is one section
-	# titled after the space — is_tab flags are still on the nodes, but the
-	# reader ignores them, and this index mirrors the reader.
-	if space_doc.enable_tabs:
-		sections = []
-		untabbed = [node for node in tree if not node.get("is_tab")]
-		if untabbed:
-			sections.append((_one_line(space_doc.home_tab_title) or _("Home"), untabbed))
-		sections += [
-			(_one_line(node["title"]), node.get("children") or []) for node in tree if node.get("is_tab")
-		]
-	else:
-		sections = [(_one_line(space_doc.space_name) or space_doc.name, tree)]
+	# The reader renders one tree per space, so the index is one section titled
+	# after the space.
+	sections = [(_one_line(space_doc.space_name) or space_doc.name, tree)]
 
 	body = []
 	for title, nodes in sections:
diff --git a/wiki/wiki/markdown.py b/wiki/wiki/markdown.py
index 407202712..a38c679b0 100644
--- a/wiki/wiki/markdown.py
+++ b/wiki/wiki/markdown.py
@@ -56,12 +56,17 @@ def slugify(text: str) -> str:
 	"warning": "Caution",  # warning is alias for caution
 }
 
-# SVG icons for each callout type
+# SVG icons for each callout type.
+#
+# The frappe-ui Alert status glyphs (icon/solid/* in Figma) — the same paths the
+# editor's node view inlines, kept in sync by hand: the SFCs behind
+# `solidStatusIcons` are not exported from frappe-ui/icons, and this renderer
+# has no build step that could import them.
 CALLOUT_ICONS = {
-	"note": '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
-	"tip": '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>',
-	"caution": '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
-	"danger": '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>',
+	"note": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM8 6.93652C7.72386 6.93652 7.5 7.16038 7.5 7.43652V11.1436C7.50005 11.4197 7.72389 11.6436 8 11.6436C8.27611 11.6436 8.49995 11.4197 8.5 11.1436V7.43652C8.5 7.16038 8.27614 6.93652 8 6.93652ZM8 4C7.51675 4 7.125 4.39175 7.125 4.875C7.125 5.35825 7.51675 5.75 8 5.75C8.48325 5.75 8.875 5.35825 8.875 4.875C8.875 4.39175 8.48325 4 8 4Z" fill="currentColor"/></svg>',
+	"tip": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM11.1055 5.28125C10.8924 5.10562 10.5771 5.13567 10.4014 5.34863L6.95215 9.53223L5.61035 7.79883C5.44143 7.58051 5.12757 7.54022 4.90918 7.70898C4.69088 7.8779 4.65061 8.19177 4.81934 8.41016L6.54395 10.6396C6.63696 10.7598 6.77972 10.8306 6.93164 10.833C7.08364 10.8354 7.22849 10.7687 7.3252 10.6514L11.1729 5.98438C11.3481 5.77144 11.3181 5.45689 11.1055 5.28125Z" fill="currentColor"/></svg>',
+	"caution": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.35174 1.97129C7.64143 1.47669 8.35697 1.47669 8.64666 1.97129L15.0519 12.9078C15.3447 13.4077 14.9847 14.0365 14.4055 14.0367H1.59295C1.0138 14.0364 0.653701 13.4077 0.946469 12.9078L7.35174 1.97129ZM7.9992 10.4117C7.51609 10.4118 7.12433 10.8036 7.1242 11.2867C7.1242 11.7699 7.51601 12.1617 7.9992 12.1617C8.48245 12.1617 8.8742 11.77 8.8742 11.2867C8.87408 10.8036 8.48238 10.4117 7.9992 10.4117ZM8.00018 5.50742C7.72411 5.50742 7.5003 5.73139 7.50018 6.00742V9.25742C7.50018 9.53356 7.72404 9.75742 8.00018 9.75742C8.27615 9.75723 8.50018 9.53344 8.50018 9.25742V6.00742C8.50006 5.73151 8.27608 5.50762 8.00018 5.50742Z" fill="currentColor"/></svg>',
+	"danger": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM10.8535 5.14648C10.6583 4.95122 10.3417 4.95122 10.1465 5.14648L8 7.29297L5.85352 5.14648C5.65825 4.95122 5.34175 4.95122 5.14648 5.14648C4.95122 5.34175 4.95122 5.65825 5.14648 5.85352L7.29297 8L5.14648 10.1465C4.95122 10.3417 4.95122 10.6583 5.14648 10.8535C5.34175 11.0488 5.65825 11.0488 5.85352 10.8535L8 8.70703L10.1465 10.8535C10.3417 11.0488 10.6583 11.0488 10.8535 10.8535C11.0488 10.6583 11.0488 10.3417 10.8535 10.1465L8.70703 8L10.8535 5.85352C11.0488 5.65825 11.0488 5.34175 10.8535 5.14648Z" fill="currentColor"/></svg>',
 }
 
 # Pattern to match callout blocks
@@ -85,13 +90,15 @@ def _generate_callout_html(callout_type, title, inner_html):
 
 	icon = CALLOUT_ICONS.get(callout_type, CALLOUT_ICONS["note"])
 
+	# Header row, then a full-width body — the layout frappe-ui's Alert uses for
+	# its banner form. The editor's node view builds the same three elements.
 	return (
 		f'<aside class="callout callout-{callout_type}">\n'
+		f'<div class="callout-header">\n'
 		f'<span class="callout-icon">{icon}</span>\n'
-		f'<div class="callout-body">\n'
 		f'<span class="callout-title">{title}</span>\n'
-		f'<div class="callout-content">{inner_html}</div>\n'
 		f"</div>\n"
+		f'<div class="callout-content">{inner_html}</div>\n'
 		f"</aside>"
 	)
 
diff --git a/wiki/wiki/test_markdown.py b/wiki/wiki/test_markdown.py
index f46c5b75a..f20173799 100644
--- a/wiki/wiki/test_markdown.py
+++ b/wiki/wiki/test_markdown.py
@@ -3,7 +3,7 @@
 
 import unittest
 
-from wiki.wiki.markdown import render_markdown, render_markdown_with_toc
+from wiki.wiki.markdown import CALLOUT_ICONS, render_markdown, render_markdown_with_toc
 
 
 class TestMarkdownRenderer(unittest.TestCase):
@@ -325,6 +325,29 @@ def test_callout_with_inline_markdown(self):
 		self.assertIn('href="https://example.com"', result)
 		self.assertIn("a link", result)
 
+	def test_callout_html_is_the_alert_banner_structure(self):
+		"""Header row (icon + title), then a full-width body.
+
+		The editor's node view builds the same three elements, so the public page
+		and the editor agree — the old markup nested the body beside the title in
+		a `.callout-body` grid cell.
+		"""
+		result = render_markdown(":::tip[Careful]\nBody text\n:::\n")
+		self.assertIn('<aside class="callout callout-tip">', result)
+		self.assertIn('<div class="callout-header">', result)
+		self.assertIn('<span class="callout-title">Careful</span>', result)
+		self.assertIn('<div class="callout-content">', result)
+		self.assertNotIn("callout-body", result)
+
+	def test_callout_icon_is_the_alert_status_glyph(self):
+		"""Each type carries frappe-ui Alert's solid status glyph at 16px."""
+		for callout_type in ("note", "tip", "caution", "danger"):
+			with self.subTest(callout_type=callout_type):
+				result = render_markdown(f":::{callout_type}\nBody\n:::\n")
+				self.assertIn('viewBox="0 0 16 16"', result)
+				self.assertIn('fill="currentColor"', result)
+				self.assertIn(CALLOUT_ICONS[callout_type], result)
+
 	def test_indented_callout(self):
 		"""Test callout that is indented (e.g. inside a list item) still renders."""
 		content = """1. First item