From 1210c9207cb7f66ef807ec44ffb41ad4c840e077 Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Sun, 26 Jul 2026 19:17:28 +0200
Subject: [PATCH 1/2] fix(inspector): stop the collapse button swallowing every
 pane's Help click

FloatingInspector floats its "Collapse inspector" button over the reused
pane header (position: absolute, right: 12, 26px wide). That lands squarely
on whatever the header puts at its right edge and eats its clicks. The Help
button was the casualty: rendered on every facet, visible, and unreachable
by mouse. CaptionsPane's status icon sits under it too.

Fixed where all three headers share a definition rather than nudging the one
button: .paneHead now reserves the floated control its own lane. Every pane
wearing that class is rendered inside FloatingInspector, so there is no other
caller to regress.

Caught by the e2e rewrite in the following commit.
---
 src/components/ai-edition/NewEditorShell.module.css | 6 ++++++
 1 file changed, 6 insertions(+)

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;
 }

From a0387759e34979857dc0c43090e2812861e59b68 Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Sun, 26 Jul 2026 19:18:17 +0200
Subject: [PATCH 2/2] test(e2e): retarget the editor specs at the v4 shell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The three editor specs were written against the pre-v4 shell and could not
pass: they waited on a `timeline-pane` testid that died with TimelinePane.tsx,
read data-clip-count / data-zoom-multiplier / data-px-per-sec attributes the
v4 timeline never had, and seeded the browser shim through the localStorage
keys it stopped reading when it moved to `browser-shim-projects-v2`. Their
fixtures were schemaVersion 3, so they exercised the v3→v4→v5 migration path
rather than the shape the app actually stores.

roadmap-coverage.spec.ts → v4-shell.spec.ts, renamed off the retired roadmap
task ids, three behaviours kept and two dropped:

- asset file size, now read off MediaStage's cards; the sized and unsized
  branches share one fixture instead of two page loads
- the facet help popover, still live in RightPanes' Pane but reached from the
  inspector rail rather than a right-panel tab. Its "Settings for X" fallback
  assertion is gone with the fallback itself — every pane has real help text
- ctrl+wheel zoom, which no longer has a px-per-sec ceiling; v4 zooms a nav
  window bounded at a 2% minimum span, so that is what the test measures

Dropped: the ruler hover-guide, which does not exist in v4 (the only ruler
overlay left is the pill-drag snap guide), and the chat "applied:" case, which
asserted that the browser shim's canned reply carries no tool calls — the mock,
not the app, and the positive half is unreachable without a real provider.

seed.spec.ts → editor-smoke.spec.ts. Its timeline half was unsalvageable but
its preview half still holds, and it seeds nothing, which makes it the only
cover for the cold-boot branch (Preview → EditorEmptyState) and for a crash
during mount against an empty shim. Now also listens for pageerror, not just
console.error — an uncaught mount exception is the failure a boot smoke test
exists to catch.

diagnostic.spec.ts deleted. It dumped the DOM and a11y tree to find selectors
in the old shell and ended in expect(true).toBe(true); the selectors it existed
to discover are written down in v4-shell.spec.ts now.

Both specs read E2E_BASE_URL, so tests/e2e no longer hardcodes a port.

  E2E_BASE_URL=http://localhost:5199 npx playwright test tests/e2e/v4-shell.spec.ts tests/e2e/editor-smoke.spec.ts
  → 4 passed
---
 tests/e2e/diagnostic.spec.ts       | 209 ----------------
 tests/e2e/editor-smoke.spec.ts     |  39 +++
 tests/e2e/roadmap-coverage.spec.ts | 367 -----------------------------
 tests/e2e/seed.spec.ts             |  34 ---
 tests/e2e/v4-shell.spec.ts         | 151 ++++++++++++
 5 files changed, 190 insertions(+), 610 deletions(-)
 delete mode 100644 tests/e2e/diagnostic.spec.ts
 create mode 100644 tests/e2e/editor-smoke.spec.ts
 delete mode 100644 tests/e2e/roadmap-coverage.spec.ts
 delete mode 100644 tests/e2e/seed.spec.ts
 create mode 100644 tests/e2e/v4-shell.spec.ts

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);
+	});
+});