diff --git a/src/components/ai-edition/NewEditorShell.module.css b/src/components/ai-edition/NewEditorShell.module.css
index e396623b2..8ce46a1aa 100644
--- a/src/components/ai-edition/NewEditorShell.module.css
+++ b/src/components/ai-edition/NewEditorShell.module.css
@@ -846,6 +846,12 @@
 	align-items: center;
 	gap: var(--sp-2);
 	padding: 12px var(--sp-4);
+	/* Every pane wearing this header is rendered inside FloatingInspector, which
+	   floats its "Collapse inspector" button (right: 12, 26px wide) over the
+	   header's right edge — landing squarely on whatever sits there and
+	   swallowing its clicks. The Help button was the casualty: visible on every
+	   facet, and unclickable. Reserve the floated button its own lane instead. */
+	padding-right: 46px;
 	border-bottom: 1px solid var(--border-soft);
 	min-height: 44px;
 }
diff --git a/tests/e2e/diagnostic.spec.ts b/tests/e2e/diagnostic.spec.ts
deleted file mode 100644
index 9a879e4a5..000000000
--- a/tests/e2e/diagnostic.spec.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-// Diagnostic: open the editor with a seeded project and dump the
-// accessibility tree. Used to figure out the right selectors for
-// chat input, help button, and timeline ruler — selectors I can't
-// guess from the source alone.
-import { expect, test } from "@playwright/test";
-
-const EDITOR_URL = "http://localhost:5173/?windowType=editor";
-
-const DOC = {
-	schemaVersion: 3,
-	project: {
-		id: "proj_diag",
-		title: "Diagnostic",
-		createdAt: "2026-07-01T00:00:00.000Z",
-		updatedAt: "2026-07-01T00:00:00.000Z",
-	},
-	assets: [
-		{
-			id: "asset_diag",
-			kind: "video",
-			label: "diagnostic.mp4",
-			originalPath: "C:\\nonexistent\\diagnostic.mp4",
-			durationSec: 600,
-			sizeBytes: 12_345_678,
-			video: { codec: "h264", width: 1920, height: 1080, fps: 30 },
-		},
-	],
-	transcripts: [],
-	timeline: {
-		clips: [
-			{
-				id: "clip_diag",
-				assetId: "asset_diag",
-				sourceStartSec: 0,
-				sourceEndSec: 600,
-				timelineStartSec: 0,
-				timelineEndSec: 600,
-				wordRefs: [],
-				origin: "system",
-				reason: "",
-			},
-		],
-		gaps: [],
-		trimRanges: [],
-		muteRanges: [],
-		speedRanges: [],
-		captionRanges: [],
-	},
-	annotations: [],
-	zoomRanges: [
-		{
-			id: "z1",
-			startMs: 5_000,
-			endMs: 15_000,
-			depth: 2,
-			focus: { cx: 0.5, cy: 0.5 },
-		},
-		{
-			id: "z2",
-			startMs: 30_000,
-			endMs: 45_000,
-			depth: 3,
-			focus: { cx: 0.5, cy: 0.5 },
-		},
-	],
-	legacyEditor: null,
-	agent: { pendingQuestions: [], suggestions: [], lastAppliedOperations: [] },
-	preview: { strategy: "seek", revision: 0 },
-	export: { preset: "final-balanced", lastJobId: null },
-	history: { revisions: [] },
-};
-
-test("diagnostic: dump editor DOM + accessibility tree", async ({ page }) => {
-	await page.addInitScript((serialized) => {
-		const d = JSON.parse(serialized);
-		localStorage.setItem("browser-shim-document", serialized);
-		localStorage.setItem(
-			"browser-shim-projects",
-			JSON.stringify([
-				{
-					id: d.project.id,
-					title: d.project.title,
-					updatedAt: d.project.updatedAt,
-					assetCount: d.assets.length,
-				},
-			]),
-		);
-	}, JSON.stringify(DOC));
-	await page.goto(EDITOR_URL, { waitUntil: "domcontentloaded" });
-	// Hook all console output from the renderer.
-	page.on("console", (msg) => {
-		console.log(`[renderer:${msg.type()}] ${msg.text()}`);
-	});
-	page.on("pageerror", (err) => {
-		console.log(`[renderer:pageerror] ${err.message}`);
-	});
-	await page.getByTestId("timeline-pane").waitFor({ state: "visible" });
-	// ponytail: wait for the mount useEffect to actually load the project
-	// (data-clip-count > 0), so the dump reflects a populated editor.
-	try {
-		await page.waitForFunction(
-			() => {
-				const el = document.querySelector('[data-testid="timeline-pane"]');
-				const n = el?.getAttribute("data-clip-count");
-				return n !== null && Number(n) > 0;
-			},
-			undefined,
-			{ timeout: 5_000 },
-		);
-	} catch {
-		console.log("[diag] clip-count never went > 0 — editor stayed in empty state");
-	}
-	// Print the localStorage keys we ended up with, to verify the seed.
-	const storageKeys = await page.evaluate(() => {
-		return Object.keys(localStorage).map((k) => ({
-			key: k,
-			preview: (localStorage.getItem(k) ?? "").slice(0, 80),
-		}));
-	});
-	console.log(`[diag] localStorage keys: ${JSON.stringify(storageKeys)}`);
-
-	// Probe the shim directly. We need to reach the project store's listProjects.
-	const shimResult = await page.evaluate(async () => {
-		try {
-			// The shim is installed on window.electronAPI; the project store
-			// goes through nativeBridgeClient which is also window-attached
-			// via the shim's module. Try both routes.
-			const win = window as unknown as {
-				electronAPI?: { getPlatform?: () => unknown };
-				nativeBridgeClient?: {
-					aiEdition?: {
-						listProjects?: () => Promise<unknown>;
-						get?: (id: string) => Promise<unknown>;
-					};
-				};
-			};
-			const out: Record<string, unknown> = {};
-			out.electronAPI = Object.keys(win.electronAPI ?? {});
-			out.nativeBridgeClient = Object.keys(win.nativeBridgeClient ?? {});
-			out.aiEdition = Object.keys(win.nativeBridgeClient?.aiEdition ?? {});
-			try {
-				out.listProjectsResult = await win.nativeBridgeClient?.aiEdition?.listProjects?.();
-			} catch (e) {
-				out.listProjectsError = String(e);
-			}
-			return out;
-		} catch (err) {
-			return { error: String(err) };
-		}
-	});
-	console.log(`[diag] shim probe: ${JSON.stringify(shimResult)}`);
-	await page.screenshot({ path: "test-results/diagnostic.png", fullPage: true });
-
-	// Buttons in the right pane header.
-	const helpButtons = await page.getByRole("button", { name: /help/i }).count();
-	console.log(`[diag] help buttons found via getByRole('button', {name: /help/i}): ${helpButtons}`);
-
-	const allButtons = await page.locator("button").count();
-	console.log(`[diag] total <button> elements: ${allButtons}`);
-
-	// Dump the aria-label of every button so we can find the right selector.
-	const buttonLabels = await page.evaluate(() => {
-		const buttons = Array.from(document.querySelectorAll("button"));
-		return buttons.map((b) => ({
-			text: (b.textContent ?? "").trim().slice(0, 30),
-			ariaLabel: b.getAttribute("aria-label"),
-			title: b.getAttribute("title"),
-		}));
-	});
-	console.log(`[diag] button labels: ${JSON.stringify(buttonLabels)}`);
-
-	// What are the data-testid values present in the DOM?
-	const testIds = await page.evaluate(() => {
-		const els = Array.from(document.querySelectorAll("[data-testid]"));
-		return els.map((e) => e.getAttribute("data-testid"));
-	});
-	console.log(`[diag] data-testids: ${JSON.stringify(testIds)}`);
-
-	// What does the data-testid="preview" look like?
-	const preview = page.getByTestId("preview");
-	console.log(`[diag] preview visible: ${await preview.isVisible()}`);
-	console.log(`[diag] preview html start: ${(await preview.innerHTML()).slice(0, 300)}`);
-
-	// Look for the chat input. Try several selectors.
-	for (const sel of [
-		"textarea",
-		'input[type="text"]',
-		'[contenteditable="true"]',
-		'[role="textbox"]',
-		'[data-testid*="chat" i]',
-	]) {
-		const n = await page.locator(sel).count();
-		console.log(`[diag] ${sel} count: ${n}`);
-	}
-
-	// Look for the right pane container.
-	const rightPane = page
-		.locator('[data-testid*="right" i], [class*="rightPane" i], [class*="RightPane" i]')
-		.first();
-	console.log(`[diag] rightPane exists: ${(await rightPane.count()) > 0}`);
-
-	// Dump the first 1500 chars of the page HTML so we can see structure.
-	const html = await page.content();
-	console.log(`[diag] page html length: ${html.length}`);
-	console.log(`[diag] first 1500 chars: ${html.slice(0, 1500)}`);
-
-	// Force the test to pass (we're just printing diagnostics).
-	expect(true).toBe(true);
-});
diff --git a/tests/e2e/editor-smoke.spec.ts b/tests/e2e/editor-smoke.spec.ts
new file mode 100644
index 000000000..7bfa15a02
--- /dev/null
+++ b/tests/e2e/editor-smoke.spec.ts
@@ -0,0 +1,39 @@
+// Boot smoke test for the v4 editor shell: no project seeded, so this is the
+// cold-start path a user hits before they have anything to edit. Its companion
+// `v4-shell.spec.ts` always seeds a document; this one deliberately doesn't —
+// the empty state is its own render branch (Preview → EditorEmptyState) and the
+// only thing that catches a mount-time crash with an empty shim.
+//
+// Needs a dev server: `npm run dev` (default 5173, override with E2E_BASE_URL).
+import { expect, test } from "@playwright/test";
+
+const BASE_URL = process.env.E2E_BASE_URL ?? "http://localhost:5173";
+const EDITOR_URL = `${BASE_URL}/?windowType=editor`;
+
+test("editor boots into the empty state with no project, and logs no console errors", async ({
+	page,
+}) => {
+	const consoleErrors: string[] = [];
+	page.on("console", (msg) => {
+		if (msg.type() === "error") consoleErrors.push(msg.text());
+	});
+	page.on("pageerror", (err) => consoleErrors.push(`pageerror: ${err.message}`));
+
+	// A fresh Playwright context has empty localStorage, so the shell's mount
+	// effect finds no project via listProjects() and renders the empty branch.
+	await page.goto(EDITOR_URL, { waitUntil: "domcontentloaded" });
+
+	// Preview shell — the transport-state hooks the editor exposes to the outside.
+	const preview = page.getByTestId("preview");
+	await expect(preview).toBeVisible();
+	await expect(preview).toHaveAttribute("data-current-time-sec", /^\d+(\.\d+)?$/);
+	await expect(preview).toHaveAttribute("data-is-playing", /^(true|false)$/);
+	await expect(preview).toContainText("No project open");
+
+	// Timeline mounts even with nothing on it (V4Timeline's tools toolbar).
+	await expect(page.getByRole("toolbar", { name: "Timeline tools" })).toBeVisible();
+	// Top bar mounted, defaulting to Edit mode.
+	await expect(page.getByRole("tab", { name: "Edit" })).toHaveAttribute("aria-selected", "true");
+
+	expect(consoleErrors, `console errors:\n${consoleErrors.join("\n")}`).toEqual([]);
+});
diff --git a/tests/e2e/roadmap-coverage.spec.ts b/tests/e2e/roadmap-coverage.spec.ts
deleted file mode 100644
index 300b1ec69..000000000
--- a/tests/e2e/roadmap-coverage.spec.ts
+++ /dev/null
@@ -1,367 +0,0 @@
-// ponytail: agentic-style roadmap coverage. One test per ✅ row in
-// `docs/architecture/ai-edition-roadmap.md` (the ones with specs in
-// `specs/`). Each test seeds the browser-shim with a known project,
-// opens the editor, and asserts on observable behavior (data-*
-// attributes, visible text, console errors). Fails = the roadmap's
-// ✅ is a false claim. The agent would re-snapshot the DOM and patch
-// brittle selectors; we go straight to the contract.
-import { expect, type Page, test } from "@playwright/test";
-
-const EDITOR_URL = "http://localhost:5173/?windowType=editor";
-
-type Asset = {
-	id: string;
-	kind: "video";
-	label: string;
-	originalPath: string;
-	durationSec: number;
-	sizeBytes?: number;
-	video: { codec: string; width: number; height: number; fps: number };
-};
-
-type Clip = {
-	id: string;
-	assetId: string;
-	sourceStartSec: number;
-	sourceEndSec: number;
-	timelineStartSec: number;
-	timelineEndSec: number;
-	wordRefs: string[];
-	origin: "system";
-	reason: string;
-};
-
-type Region = {
-	id: string;
-	startSec: number;
-	endSec: number;
-	label?: string;
-};
-
-type Doc = ReturnType<typeof makeDoc>;
-
-function makeDoc(
-	opts: {
-		withAsset?: boolean;
-		withClip?: boolean;
-		clips?: Clip[];
-		zoomRegions?: Region[];
-		annotationRegions?: Region[];
-		speedRegions?: Region[];
-	} = {},
-) {
-	const asset: Asset | null = opts.withAsset
-		? {
-				id: "asset_test",
-				kind: "video",
-				label: "Test Recording.mp4",
-				originalPath: "C:\\nonexistent\\test.mp4",
-				durationSec: 60,
-				sizeBytes: 314_572_800,
-				video: { codec: "h264", width: 1920, height: 1080, fps: 30 },
-			}
-		: null;
-	const clips: Clip[] =
-		opts.clips ??
-		(opts.withClip && asset
-			? [
-					{
-						id: "clip_test",
-						assetId: asset.id,
-						sourceStartSec: 0,
-						// ponytail: long enough that fit-zoom (pxPerSec) sits well
-						// below MAX_PX_PER_SEC, so Ctrl+wheel has headroom to zoom in.
-						sourceEndSec: 600,
-						timelineStartSec: 0,
-						timelineEndSec: 600,
-						wordRefs: [],
-						origin: "system" as const,
-						reason: "",
-					},
-				]
-			: []);
-	return {
-		schemaVersion: 3,
-		project: {
-			id: "proj_test",
-			title: "Test Project",
-			createdAt: "2026-07-01T00:00:00.000Z",
-			updatedAt: "2026-07-01T00:00:00.000Z",
-		},
-		assets: asset ? [asset] : [],
-		transcripts: [],
-		timeline: {
-			clips,
-			gaps: [],
-			trimRanges: [],
-			muteRanges: [],
-			speedRanges: (opts.speedRegions ?? []).map((r) => ({ ...r, speed: 1.5 })),
-			captionRanges: [],
-		},
-		annotations: (opts.annotationRegions ?? []).map((r) => ({
-			...r,
-			kind: "text" as const,
-			style: { color: "#ffffff", fontFamily: "Inter", animation: "none" },
-		})),
-		zoomRanges: (opts.zoomRegions ?? []).map((r) => ({
-			id: r.id,
-			startMs: Math.round((r.startSec ?? 0) * 1000),
-			endMs: Math.round((r.endSec ?? 0) * 1000),
-			depth: 2,
-			focus: { cx: 0.5, cy: 0.5 },
-		})),
-		legacyEditor: null,
-		agent: { pendingQuestions: [], suggestions: [], lastAppliedOperations: [] },
-		preview: { strategy: "seek" as const, revision: 0 },
-		export: { preset: "final-balanced" as const, lastJobId: null },
-		history: { revisions: [] },
-	};
-}
-
-async function seedAndOpen(page: Page, doc: Doc): Promise<void> {
-	await page.addInitScript((serialized) => {
-		const d = JSON.parse(serialized);
-		localStorage.setItem("browser-shim-document", JSON.stringify(d));
-		// ponytail: the editor's mount flow calls listProjects and loads
-		// the first entry on launch. We need to seed the matching summary
-		// so the project is discoverable.
-		const summary = [
-			{
-				id: d.project.id,
-				title: d.project.title,
-				updatedAt: d.project.updatedAt,
-				assetCount: d.assets.length,
-			},
-		];
-		localStorage.setItem("browser-shim-projects", JSON.stringify(summary));
-	}, JSON.stringify(doc));
-	await page.goto(EDITOR_URL, { waitUntil: "domcontentloaded" });
-	await page.getByTestId("timeline-pane").waitFor({ state: "visible", timeout: 10_000 });
-	// ponytail: the mount useEffect calls listProjects → loadProject, both
-	// async. Wait for the document to actually be loaded (data-clip-count
-	// reflects the seeded doc) before tests start asserting.
-	await page.waitForFunction(
-		(expected) => {
-			const el = document.querySelector('[data-testid="timeline-pane"]');
-			const n = el?.getAttribute("data-clip-count");
-			return n !== null && Number(n) >= expected;
-		},
-		doc.timeline.clips.length,
-		{ timeout: 5_000 },
-	);
-}
-
-async function captureConsoleErrors(page: Page): Promise<string[]> {
-	const errors: string[] = [];
-	page.on("console", (msg) => {
-		if (msg.type() === "error") errors.push(msg.text());
-	});
-	return errors;
-}
-
-test.describe("Roadmap coverage (✅ rows) — agentic behavior specs", () => {
-	test("P3.1: media panel shows asset size from sizeBytes", async ({ page }) => {
-		const errors = await captureConsoleErrors(page);
-		await seedAndOpen(page, makeDoc({ withAsset: true, withClip: true }));
-
-		// The LeftPanel renders the asset list with formatSize(asset.sizeBytes).
-		// For 300MB, expect a "MB" suffix.
-		await expect(page.getByTestId("timeline-pane")).toBeVisible();
-
-		// The size string should NOT be the em-dash placeholder.
-		// We don't insist the size text is in a specific role; just that
-		// at least one non-dash MB/KB/B string exists in the panel.
-		const sizeText = page.getByText(/\d+(\.\d+)?\s*(B|KB|MB|GB)/i).first();
-		await expect(sizeText)
-			.toBeVisible({ timeout: 5_000 })
-			.catch(() => {
-				// If we can't find a sized string, the test fails here → P3.1 is a lie.
-				throw new Error("P3.1: no size string visible in the media panel — sizeBytes not rendered");
-			});
-		expect(errors, errors.join("\n")).toEqual([]);
-	});
-
-	test("P3.1: asset without sizeBytes shows em-dash", async ({ page }) => {
-		const doc = makeDoc({ withAsset: true, withClip: true });
-		if (doc.assets[0]) delete (doc.assets[0] as { sizeBytes?: number }).sizeBytes;
-		await seedAndOpen(page, doc);
-		await expect(page.getByTestId("timeline-pane")).toBeVisible();
-		await expect(page.getByText("—").first()).toBeVisible();
-	});
-
-	test("P3.3: clicking Help on a right pane opens a help popover", async ({ page }) => {
-		const errors = await captureConsoleErrors(page);
-		await seedAndOpen(page, makeDoc({ withAsset: true, withClip: true }));
-
-		// ponytail: the right panel is hidden by default. Click the
-		// "Toggle right panel" button to open it.
-		const toggleRight = page.getByRole("button", { name: /toggle right panel/i });
-		if (await toggleRight.isVisible().catch(() => false)) {
-			await toggleRight.click();
-		}
-		// Click the "Background" tab to open the Background pane.
-		const backgroundTab = page.getByRole("button", { name: /background/i }).first();
-		if (await backgroundTab.isVisible().catch(() => false)) {
-			await backgroundTab.click();
-		}
-		// ponytail: the P3.3 help button has aria-label="Help" (the RightPanes
-		// code sets it from the helpLabel prop, which defaults to "Help"). It
-		// lives in a pane header.
-		const helpButton = page.getByRole("button", { name: /^help$/i }).first();
-		await helpButton.waitFor({ state: "visible", timeout: 5_000 });
-		await helpButton.click();
-
-		// The popover is a sibling div with role="note" per the P3.3 commit.
-		const popover = page.locator('[role="note"]').first();
-		await expect(popover).toBeVisible({ timeout: 3_000 });
-
-		// The popover text should NOT be the generic "Settings for X" fallback.
-		const text = (await popover.textContent()) ?? "";
-		expect(text.length, "P3.3: popover is empty").toBeGreaterThan(0);
-		expect(
-			/Settings for/i.test(text),
-			`P3.3: popover shows generic fallback instead of pane-specific help. Got: "${text}"`,
-		).toBe(false);
-
-		// Click Help again → popover closes.
-		await helpButton.click();
-		await expect(popover).toBeHidden({ timeout: 2_000 });
-		expect(errors, errors.join("\n")).toEqual([]);
-	});
-
-	test("T19: Ctrl+wheel on the timeline viewport changes px-per-sec", async ({ page }) => {
-		const errors = await captureConsoleErrors(page);
-		await seedAndOpen(page, makeDoc({ withAsset: true, withClip: true }));
-
-		const viewport = page.getByTestId("timeline-viewport");
-		const initialPxPerSec = Number((await viewport.getAttribute("data-px-per-sec")) ?? "0");
-		expect(initialPxPerSec).toBeGreaterThan(0);
-
-		const box = await viewport.boundingBox();
-		if (!box) throw new Error("viewport has no bounding box");
-		const centerX = box.x + box.width / 2;
-		const centerY = box.y + 30; // top of viewport (ruler area)
-
-		// Ctrl+wheel-up = zoom in. Three notches of -120 each.
-		await page.keyboard.down("Control");
-		for (let i = 0; i < 3; i++) {
-			await page.mouse.move(centerX, centerY);
-			await page.mouse.wheel(0, -120);
-		}
-		await page.keyboard.up("Control");
-
-		// Give React a frame to re-render the data attribute.
-		await page.waitForTimeout(150);
-
-		const newPxPerSec = Number((await viewport.getAttribute("data-px-per-sec")) ?? "0");
-		const zoomMultiplier = Number(
-			(await page.getByTestId("timeline-pane").getAttribute("data-zoom-multiplier")) ?? "1",
-		);
-
-		expect(
-			newPxPerSec,
-			`T19: data-px-per-sec did not change after Ctrl+wheel (was ${initialPxPerSec}, now ${newPxPerSec})`,
-		).toBeGreaterThan(initialPxPerSec);
-		expect(
-			zoomMultiplier,
-			`T19: data-zoom-multiplier should be > 1 after zoom in (got ${zoomMultiplier})`,
-		).toBeGreaterThan(1);
-		expect(errors, errors.join("\n")).toEqual([]);
-	});
-
-	test("T19: zoom is bounded by MAX_PX_PER_SEC (280)", async ({ page }) => {
-		await seedAndOpen(page, makeDoc({ withAsset: true, withClip: true }));
-
-		const viewport = page.getByTestId("timeline-viewport");
-		const box = await viewport.boundingBox();
-		if (!box) throw new Error("viewport has no bounding box");
-		const centerX = box.x + box.width / 2;
-		const centerY = box.y + 30;
-
-		await page.keyboard.down("Control");
-		for (let i = 0; i < 30; i++) {
-			await page.mouse.move(centerX, centerY);
-			await page.mouse.wheel(0, -120);
-		}
-		await page.keyboard.up("Control");
-		await page.waitForTimeout(200);
-
-		const pxPerSec = Number((await viewport.getAttribute("data-px-per-sec")) ?? "0");
-		expect(pxPerSec, `T19: px-per-sec exceeds MAX (got ${pxPerSec})`).toBeLessThanOrEqual(280);
-	});
-
-	test("P3.7: hovering the ruler shows a hover-guide line", async ({ page }) => {
-		const errors = await captureConsoleErrors(page);
-		await seedAndOpen(page, makeDoc({ withAsset: true, withClip: true }));
-
-		const viewport = page.getByTestId("timeline-viewport");
-		const box = await viewport.boundingBox();
-		if (!box) throw new Error("viewport has no bounding box");
-
-		// Hover the ruler area (top 22px of the viewport).
-		await page.mouse.move(box.x + box.width / 2, box.y + 10);
-		await page.waitForTimeout(150);
-
-		// The hover-guide is a 1px-wide div with the .hoverGuide class. It's a
-		// positioned element inside the ruler, rendered only while hovering
-		// and not in panning/scrubbing/placingCut mode.
-		const hoverGuide = page.locator(".hoverGuide, [class*='hoverGuide']");
-		await expect(hoverGuide.first())
-			.toBeVisible({ timeout: 2_000 })
-			.catch(() => {
-				throw new Error("P3.7: hover-guide line did not appear on ruler hover");
-			});
-
-		// Move away — guide disappears.
-		await page.mouse.move(0, 0);
-		await page.waitForTimeout(150);
-		await expect(hoverGuide.first()).toBeHidden({ timeout: 2_000 });
-
-		expect(errors, errors.join("\n")).toEqual([]);
-	});
-
-	test("P1.7: chat panel shows 'applied:' line for tool calls", async ({ page }) => {
-		const errors = await captureConsoleErrors(page);
-		await seedAndOpen(page, makeDoc({ withAsset: true, withClip: true }));
-
-		// ponytail: the chat panel is hidden by default. Click the "Chat"
-		// left-tab button to open it.
-		const chatTab = page.getByRole("button", { name: /^chat$/i }).first();
-		if (await chatTab.isVisible().catch(() => false)) {
-			await chatTab.click();
-			await page.waitForTimeout(500);
-		}
-
-		// Look for the chat input. Look for a textarea, contenteditable, or
-		// placeholder mentioning chat.
-		const input = page
-			.locator(
-				'textarea, textarea[placeholder*="message" i], [contenteditable="true"], input[type="text"][placeholder*="message" i]',
-			)
-			.first();
-		if (!(await input.isVisible().catch(() => false))) {
-			// ponytail: if we can't find the chat input, the test fails — either
-			// the chat isn't in the editor's left panel for this build, or the
-			// selector needs work. Either way, P1.7 wiring is unverifiable.
-			throw new Error(
-				"P1.7: chat input not found in the editor — LeftPanel chat surface not reachable",
-			);
-		}
-		await input.fill("trim silence from 1s to 2s");
-		await input.press("Enter");
-		await page.waitForTimeout(2_000);
-
-		// The browser-shim's chatRun returns a fixed message saying "AI features
-		// need real LLM deps" — no tool calls. So the applied-line should NOT
-		// appear (or should be empty). This is the negative case; see spec
-		// p1.7 scenario 3. The behavior to assert: no spurious "applied:" line.
-		const appliedLine = page.getByText(/^applied\s*:/i).first();
-		const visible = await appliedLine.isVisible().catch(() => false);
-		expect(
-			visible,
-			"P1.7: 'applied:' line appeared even though the response had no tool calls",
-		).toBe(false);
-
-		expect(errors, errors.join("\n")).toEqual([]);
-	});
-});
diff --git a/tests/e2e/seed.spec.ts b/tests/e2e/seed.spec.ts
deleted file mode 100644
index 3c4a4f3f5..000000000
--- a/tests/e2e/seed.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// ponytail: the seed test gives the planner/generator/healer agents a
-// working browser session to bootstrap from. Vite must be running on
-// localhost:5173 (npm run dev). It mounts the editor in browser-shim
-// mode so no Electron window is required.
-import { expect, test } from "@playwright/test";
-
-const EDITOR_URL = "http://localhost:5173/?windowType=editor";
-
-test("seed: editor opens without console errors and exposes the timeline + preview", async ({
-	page,
-}) => {
-	const consoleErrors: string[] = [];
-	page.on("console", (msg) => {
-		if (msg.type() === "error") consoleErrors.push(msg.text());
-	});
-
-	await page.goto(EDITOR_URL, { waitUntil: "networkidle" });
-
-	const timeline = page.getByTestId("timeline-pane");
-	const preview = page.getByTestId("preview");
-	await expect(timeline).toBeVisible();
-	await expect(preview).toBeVisible();
-
-	// ponytail: data-* hooks are how the planner/generator agents assert
-	// on behavior. If any of these go missing, every behavior spec breaks.
-	await expect(timeline).toHaveAttribute("data-clip-count", /^\d+$/);
-	await expect(timeline).toHaveAttribute("data-skip-count", /^\d+$/);
-	await expect(timeline).toHaveAttribute("data-current-time-sec", /^\d+(\.\d+)?$/);
-	await expect(timeline).toHaveAttribute("data-zoom-multiplier", /^\d+(\.\d+)?$/);
-	await expect(preview).toHaveAttribute("data-current-time-sec", /^\d+(\.\d+)?$/);
-	await expect(preview).toHaveAttribute("data-is-playing", /^(true|false)$/);
-
-	expect(consoleErrors, `console errors: ${consoleErrors.join("\n")}`).toEqual([]);
-});
diff --git a/tests/e2e/v4-shell.spec.ts b/tests/e2e/v4-shell.spec.ts
new file mode 100644
index 000000000..123f812f2
--- /dev/null
+++ b/tests/e2e/v4-shell.spec.ts
@@ -0,0 +1,151 @@
+// Browser-shim e2e for the v4 editor shell (EditorTopBar + FloatingInspector +
+// V4Timeline). Each test seeds a v5 document into the shim's localStorage, opens
+// the editor, and asserts on what the user can actually see. Selectors come from
+// `src/components/ai-edition/v4/` — stable hooks only (aria-labels, roles,
+// `data-clip-id`), plus `[class*="…"]` for the two CSS-module elements that have
+// no accessible name (the timeline's tracks + nav window).
+//
+// Needs a dev server: `npm run dev` (default 5173, override with E2E_BASE_URL).
+import { expect, type Page, test } from "@playwright/test";
+
+const BASE_URL = process.env.E2E_BASE_URL ?? "http://localhost:5173";
+const EDITOR_URL = `${BASE_URL}/?windowType=editor`;
+
+// 300 MB exactly, so MediaStage's formatSize renders "300 MB".
+const SIZED_BYTES = 314_572_800;
+
+function makeDoc() {
+	const asset = (id: string, label: string, sizeBytes?: number) => ({
+		id,
+		kind: "video" as const,
+		label,
+		originalPath: `C:\\nonexistent\\${id}.mp4`,
+		durationSec: 600,
+		...(sizeBytes === undefined ? {} : { sizeBytes }),
+		video: { codec: "h264", width: 1920, height: 1080, fps: 30 },
+		cameraTrack: null,
+	});
+	return {
+		schemaVersion: 5,
+		project: {
+			id: "proj_e2e",
+			title: "E2E Fixture",
+			createdAt: "2026-07-01T00:00:00.000Z",
+			updatedAt: "2026-07-01T00:00:00.000Z",
+			primaryAssetId: "asset_sized",
+		},
+		assets: [asset("asset_sized", "Sized.mp4", SIZED_BYTES), asset("asset_unsized", "Unsized.mp4")],
+		transcript: null,
+		transcripts: [],
+		timeline: {
+			clips: [
+				{
+					id: "clip_e2e",
+					assetId: "asset_sized",
+					sourceStartSec: 0,
+					sourceEndSec: 600,
+					timelineStartSec: 0,
+					timelineEndSec: 600,
+					wordRefs: [],
+					origin: "system" as const,
+					reason: "",
+				},
+			],
+			gaps: [],
+			trimRanges: [],
+			muteRanges: [],
+			speedRanges: [],
+			captionRanges: [],
+		},
+		annotations: [],
+		zoomRanges: [],
+		legacyEditor: null,
+		agent: { pendingQuestions: [], suggestions: [], lastAppliedOperations: [] },
+		preview: { strategy: "seek" as const, revision: 0 },
+		export: { preset: "final-balanced" as const, lastJobId: null },
+		history: { revisions: [] },
+	};
+}
+
+async function seedAndOpen(page: Page): Promise<void> {
+	await page.addInitScript((serialized) => {
+		const doc = JSON.parse(serialized);
+		// The shim keys documents by project id under one blob (see
+		// `createShimBridgeClient` in src/native/browserShim.ts); the shell's mount
+		// effect calls listProjects() → loadProject(first) on launch, so seeding
+		// this is what lands us in a populated editor.
+		localStorage.setItem(
+			"browser-shim-projects-v2",
+			JSON.stringify({ documents: { [doc.project.id]: doc }, order: [doc.project.id] }),
+		);
+	}, JSON.stringify(makeDoc()));
+	await page.goto(EDITOR_URL, { waitUntil: "domcontentloaded" });
+	// listProjects → loadProject are both async. A rendered clip pill is the
+	// first observable proof the seeded document reached the timeline.
+	await expect(page.locator("[data-clip-id]")).toHaveCount(1, { timeout: 15_000 });
+}
+
+test.describe("v4 editor shell", () => {
+	test("media stage shows each asset's file size, em-dash when unknown", async ({ page }) => {
+		await seedAndOpen(page);
+		await page.getByRole("tab", { name: "Media" }).click();
+
+		const sized = page.getByRole("button", { name: /Sized\.mp4/ }).first();
+		const unsized = page.getByRole("button", { name: /Unsized\.mp4/ }).first();
+		await expect(sized).toContainText("300 MB");
+		// formatSize's placeholder for a missing sizeBytes.
+		await expect(unsized).toContainText("—");
+	});
+
+	test("inspector facet header opens a contextual help popover", async ({ page }) => {
+		await seedAndOpen(page);
+
+		// The inspector opens on the "effects" facet; the rail buttons are labelled
+		// from settings.<facet>.title (FloatingInspector's FACETS).
+		await page.getByRole("button", { name: "Background" }).click();
+		const help = page.getByRole("button", { name: "Help" });
+		await help.click();
+
+		// RightPanes' `Pane` renders the help text in a role="note" popover.
+		const popover = page.locator('[role="note"]');
+		await expect(popover).toBeVisible();
+		// Pane-specific text, not a generic stub: settings.background.help.
+		await expect(popover).toContainText("behind the recording");
+
+		await help.click();
+		await expect(popover).toBeHidden();
+	});
+
+	test("ctrl+wheel over the tracks zooms the timeline, bounded at 2% of its span", async ({
+		page,
+	}) => {
+		await seedAndOpen(page);
+
+		// The nav window's width mirrors the visible fraction of the timeline
+		// (V4Timeline's `nav` state, which the ctrl+wheel handler drives).
+		const navWindow = page.locator('[class*="tlNavWindow"]');
+		const widthPct = () =>
+			navWindow.evaluate((el) => Number.parseFloat((el as HTMLElement).style.width));
+		expect(await widthPct()).toBe(100);
+
+		const tracks = page.locator('[class*="tlTracks"]');
+		const box = await tracks.boundingBox();
+		if (!box) throw new Error("timeline tracks have no bounding box");
+		const zoom = async (notches: number) => {
+			await page.keyboard.down("Control");
+			for (let i = 0; i < notches; i++) {
+				await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+				await page.mouse.wheel(0, -120);
+			}
+			await page.keyboard.up("Control");
+		};
+
+		await zoom(3);
+		await expect.poll(widthPct).toBeLessThan(100);
+
+		// Each notch divides the span by 1.12; the handler clamps at 0.02, which
+		// ~40 more notches overshoots comfortably.
+		await zoom(40);
+		await expect.poll(widthPct).toBe(2);
+	});
+});