@narumitw/pi-chrome-devtools 0.31.0 → 0.36.0

package/README.md

@@ -25,7 +25,7 @@ This package is inspired by [`chrome-devtools-mcp`](https://github.com/ChromeDev
 - Retries briefly while Chrome is starting and reports actionable endpoint errors.
 - Shows statusline activity only while Chrome DevTools tools are running.
 - Provides a `/chrome-devtools` menu with quick-start help and tool controls.
-- Provides a Plan-mode-style selector for choosing individual Chrome DevTools tools.
+- Uses `@narumitw/pi-tui-kit` for width-safe menus and individual tool selection.
 - Persists the selected Chrome DevTools tools across Pi restarts.
 
 ## 📦 Install
@@ -155,7 +155,7 @@ Direct subcommands are also available:
   candidates, last launch attempt, and launch hints.
 - `status` shows runtime tool state, persisted selection, settings file path, endpoint source,
   launch mode, last launch attempt, and active non-Chrome tool count.
-- `tools` opens a Plan-mode-style selector for choosing individual `chrome_devtools_*` tools.
+- `tools` opens a width-safe selector for choosing individual `chrome_devtools_*` tools.
 - `toggle` is an alias for `tools`.
 - `enable` enables all `chrome_devtools_*` tools for future turns.
 - `disable` disables all `chrome_devtools_*` tools for future turns. The slash command remains
@@ -169,11 +169,14 @@ ${PI_CODING_AGENT_DIR:-~/.pi/agent}/pi-chrome-devtools.json
 
 When the file is missing or invalid, the extension preserves Pi's current active-tool policy
 instead of enabling tools by itself. A valid saved selection is restored on Pi startup and
-`/reload`.
-
-Compatibility: older versions used `pi-chrome-devtools-settings.json`. During the migration
-window, a legacy-only file is automatically migrated to `pi-chrome-devtools.json` with a warning.
-If both files exist, `pi-chrome-devtools.json` wins and the legacy file is ignored. The legacy
+`/reload`. A missing file is created by the first successful selection change. Within one Pi process, selection saves run in invocation order, reread the latest valid document, and preserve unknown fields. Malformed JSON
+or invalid recognized fields block the save without replacement; a failed save restores the prior
+Chrome DevTools tool selection while preserving other extensions' current tools.
+
+Compatibility: older versions used `pi-chrome-devtools-settings.json`. A legacy-only file remains
+readable with a warning and is never modified automatically; rename it to
+`pi-chrome-devtools.json`. The first subsequent settings save writes the canonical file. If both
+files exist, `pi-chrome-devtools.json` wins and the legacy file is ignored. The legacy
 filename is deprecated and will be removed in a future major release.
 
 ## 🧠 Use cases

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narumitw/pi-chrome-devtools",
-	"version": "0.31.0",
+	"version": "0.36.0",
 	"description": "Pi extension that exposes Chrome DevTools Protocol tools.",
 	"type": "module",
 	"license": "MIT",
@@ -29,6 +29,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"@narumitw/pi-tui-kit": "<1",
 		"typebox": "^1.3.8"
 	},
 	"devDependencies": {

package/src/chrome-devtools.ts

@@ -1,4 +1,5 @@
 import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { defineMenu, runMenu } from "@narumitw/pi-tui-kit";
 import { shutdownManagedBrowser } from "./browser-manager.js";
 import { state } from "./runtime.js";
 import { loadSettings } from "./settings.js";
@@ -10,6 +11,7 @@ import {
 	buildToolStatusMessage,
 	showToolSelector,
 	updateChromeDevtoolsTools,
+	waitForChromeDevtoolsSettings,
 } from "./tool-selector.js";
 import {
 	evaluateTool,
@@ -51,15 +53,19 @@ export default function chromeDevtools(pi: ExtensionAPI) {
 		description: "Open Chrome DevTools help and tool controls",
 		getArgumentCompletions: (prefix) => commandCompletions(prefix),
 		handler: async (args, ctx) => {
-			await handleChromeDevtoolsCommand(pi, args, ctx);
+			const generation = state.sessionGeneration;
+			await handleChromeDevtoolsCommand(pi, args, ctx, generation);
 		},
 	});
 
 	pi.on("session_start", async (_event, ctx) => {
+		const generation = ++state.sessionGeneration;
+		replaceSessionController("Chrome DevTools session replaced");
 		state.shuttingDown = false;
 		state.settingsNotice = undefined;
 		ctx.ui.setStatus(STATUS_KEY, undefined);
 		const settings = await loadSettings();
+		if (generation !== state.sessionGeneration) return;
 		state.settingsNotice = settings.notice;
 		if (settings.notice) ctx.ui.notify(settings.notice, "warning");
 		if (settings.kind === "loaded") {
@@ -72,16 +78,25 @@ export default function chromeDevtools(pi: ExtensionAPI) {
 	});
 
 	pi.on("session_shutdown", async (_event, ctx) => {
+		state.sessionGeneration += 1;
+		replaceSessionController("Chrome DevTools session shut down");
 		ctx.ui.setStatus(STATUS_KEY, undefined);
-		await shutdownManagedBrowser(undefined, { cancelLaunch: true });
+		const browserShutdown = shutdownManagedBrowser(undefined, { cancelLaunch: true });
+		await waitForChromeDevtoolsSettings();
+		await browserShutdown;
 	});
 }
 
-async function handleChromeDevtoolsCommand(pi: ExtensionAPI, args: string, ctx: CommandContext) {
+async function handleChromeDevtoolsCommand(
+	pi: ExtensionAPI,
+	args: string,
+	ctx: CommandContext,
+	generation: number,
+) {
 	const command = parseCommand(args);
 	switch (command) {
 		case "menu":
-			await showMenu(pi, ctx);
+			await showMenu(pi, ctx, generation);
 			return;
 		case "help":
 			ctx.ui.notify(buildCommandGuide(), "info");
@@ -89,9 +104,12 @@ async function handleChromeDevtoolsCommand(pi: ExtensionAPI, args: string, ctx:
 		case "quickstart":
 			ctx.ui.notify(buildQuickstartMessage(), "info");
 			return;
-		case "status":
-			ctx.ui.notify(await buildToolStatusMessage(pi), "info");
+		case "status": {
+			const status = await buildToolStatusMessage(pi);
+			if (generation !== state.sessionGeneration) return;
+			ctx.ui.notify(status, "info");
 			return;
+		}
 		case "tools":
 			await showToolSelector(pi, ctx);
 			return;
@@ -111,38 +129,68 @@ ${buildCommandGuide()}`,
 	);
 }
 
-async function showMenu(pi: ExtensionAPI, ctx: CommandContext) {
+async function showMenu(pi: ExtensionAPI, ctx: CommandContext, generation: number) {
 	if (!ctx.hasUI) {
-		ctx.ui.notify(
-			`${buildCommandGuide()}
-
-${await buildToolStatusMessage(pi)}`,
-			"info",
-		);
+		const status = await buildToolStatusMessage(pi);
+		if (generation !== state.sessionGeneration) return;
+		ctx.ui.notify(`${buildCommandGuide()}\n\n${status}`, "info");
 		return;
 	}
 
-	const choice = await ctx.ui.select("Chrome DevTools", Object.values(MENU_OPTIONS));
-	switch (choice) {
-		case MENU_OPTIONS.quickstart:
-			ctx.ui.notify(buildQuickstartMessage(), "info");
-			return;
-		case MENU_OPTIONS.help:
-			ctx.ui.notify(buildCommandGuide(), "info");
-			return;
-		case MENU_OPTIONS.status:
-			ctx.ui.notify(await buildToolStatusMessage(pi), "info");
-			return;
-		case MENU_OPTIONS.tools:
-			await showToolSelector(pi, ctx);
-			return;
-		case MENU_OPTIONS.enable:
-			await updateChromeDevtoolsTools(pi, ctx, allChromeDevtoolsTools(), "enabled all");
-			return;
-		case MENU_OPTIONS.disable:
-			await updateChromeDevtoolsTools(pi, ctx, [], "disabled all");
-			return;
-	}
+	type Screen = "main";
+	type Action = keyof typeof MENU_OPTIONS;
+	const menu = defineMenu<undefined, Screen, Action>({
+		start: "main",
+		screens: {
+			main: () => ({
+				kind: "actions",
+				title: "Chrome DevTools",
+				items: Object.entries(MENU_OPTIONS).map(([id, label]) => ({
+					id,
+					label,
+					action: id as Action,
+				})),
+				hint: "close",
+			}),
+		},
+		actions: {
+			quickstart: async () => {
+				ctx.ui.notify(buildQuickstartMessage(), "info");
+				return { kind: "close" };
+			},
+			help: async () => {
+				ctx.ui.notify(buildCommandGuide(), "info");
+				return { kind: "close" };
+			},
+			status: async () => {
+				const status = await buildToolStatusMessage(pi);
+				if (generation === state.sessionGeneration) ctx.ui.notify(status, "info");
+				return { kind: "close" };
+			},
+			tools: async () => {
+				await showToolSelector(pi, ctx);
+				return { kind: "close" };
+			},
+			enable: async () => {
+				await updateChromeDevtoolsTools(pi, ctx, allChromeDevtoolsTools(), "enabled all");
+				return { kind: "close" };
+			},
+			disable: async () => {
+				await updateChromeDevtoolsTools(pi, ctx, [], "disabled all");
+				return { kind: "close" };
+			},
+		},
+	});
+	await runMenu(ctx, menu, {
+		getState: () => undefined,
+		signal: state.sessionController.signal,
+		isCurrent: () => generation === state.sessionGeneration,
+	});
+}
+
+function replaceSessionController(reason: string) {
+	state.sessionController.abort(new DOMException(reason, "AbortError"));
+	state.sessionController = new AbortController();
 }
 
 export function parseCommand(args: string): CommandAction | "unknown" {
@@ -179,5 +227,5 @@ export {
 	resolveScreenshotPath,
 	selectAllowedRoot,
 } from "./screenshot.js";
-export { installSettingsFileExclusively, normalizeChromeDevtoolsSettings } from "./settings.js";
+export { normalizeChromeDevtoolsSettings } from "./settings.js";
 export { orderedChromeDevtoolsTools } from "./tool-selector.js";

package/src/runtime.ts

@@ -31,6 +31,8 @@ export interface ChromeDevToolsState {
 	launchPromise?: Promise<void>;
 	lastLaunchAttempt?: BrowserLaunchAttempt;
 	shuttingDown: boolean;
+	sessionGeneration: number;
+	sessionController: AbortController;
 	settingsNotice?: string;
 }
 
@@ -82,4 +84,6 @@ export const state: ChromeDevToolsState = {
 	autoLaunchEnabled: process.env.PI_CHROME_DEVTOOLS_AUTO_LAUNCH !== "0",
 	browserExecutable: process.env.PI_CHROME_DEVTOOLS_BROWSER,
 	shuttingDown: false,
+	sessionGeneration: 0,
+	sessionController: new AbortController(),
 };

package/src/settings.ts

@@ -1,8 +1,8 @@
 import { randomUUID } from "node:crypto";
 import { constants } from "node:fs";
-import { access, link, mkdir, readFile, rename, rm, writeFile } from "node:fs/promises";
-import { homedir } from "node:os";
+import { access, lstat, mkdir, readFile, rename, rm, writeFile } from "node:fs/promises";
 import { dirname, join } from "node:path";
+import { getAgentDir } from "@earendil-works/pi-coding-agent";
 import { CHROME_DEVTOOLS_TOOL_NAMES, type ChromeDevToolsToolName } from "./tool-names.js";
 
 const NEW_SETTINGS_FILE_NAME = "pi-chrome-devtools.json";
@@ -12,17 +12,23 @@ export interface ChromeDevToolsSettings {
 	updatedAt: number;
 }
 
+export interface SettingsFileOperations {
+	write(path: string, data: string): Promise<void>;
+	rename(source: string, destination: string): Promise<void>;
+}
+
+const DEFAULT_FILE_OPERATIONS: SettingsFileOperations = {
+	write: (path, data) => writeFile(path, data, "utf8").then(() => undefined),
+	rename,
+};
+
 export type SettingsLoadResult =
 	| { kind: "missing"; notice?: string }
 	| { kind: "invalid"; reason: string; notice?: string }
 	| { kind: "loaded"; settings: ChromeDevToolsSettings; notice?: string };
 
-type SettingsMigrationResult = {
-	kind: "migrated" | "failed";
-	notice: string;
-};
-
 export async function loadSettings(): Promise<SettingsLoadResult> {
+	await settingsSaveQueue;
 	const newPath = settingsFilePath();
 	const newSettings = await readSettingsFile(newPath);
 	if (newSettings.kind !== "missing") {
@@ -38,39 +44,50 @@ export async function loadSettings(): Promise<SettingsLoadResult> {
 	if (legacySettings.kind === "missing") return { kind: "missing" };
 	if (legacySettings.kind === "invalid") return legacySettings;
 
-	const migration = await migrateLegacySettings(legacyPath, legacySettings.settings);
-	if (migration.kind === "failed") {
-		const settingsCreatedDuringMigration = await readSettingsFile(newPath);
-		if (settingsCreatedDuringMigration.kind !== "missing") {
-			return withLegacyIgnoredNotice(settingsCreatedDuringMigration);
-		}
-	}
+	return {
+		...legacySettings,
+		notice: `Using legacy ${LEGACY_SETTINGS_FILE_NAME}; rename it to ${NEW_SETTINGS_FILE_NAME}. Future saves write ${NEW_SETTINGS_FILE_NAME} without modifying the legacy file.`,
+	};
+}
 
-	return { ...legacySettings, notice: migration.notice };
+interface SettingsDocumentResult {
+	result: SettingsLoadResult;
+	document?: Record<string, unknown>;
 }
 
-async function readSettingsFile(filePath: string): Promise<SettingsLoadResult> {
+async function readSettingsDocument(filePath: string): Promise<SettingsDocumentResult> {
 	let text: string;
 	try {
 		text = await readFile(filePath, "utf8");
 	} catch (error) {
-		if (isNodeError(error) && error.code === "ENOENT") return { kind: "missing" };
-		return { kind: "invalid", reason: `${filePath}: ${formatError(error)}` };
+		if (isNodeError(error) && error.code === "ENOENT") return { result: { kind: "missing" } };
+		return { result: { kind: "invalid", reason: `${filePath}: ${formatError(error)}` } };
 	}
 
 	try {
 		const parsed = JSON.parse(text) as unknown;
 		const settings = normalizeChromeDevtoolsSettings(parsed);
-		if (settings) return { kind: "loaded", settings };
+		if (settings) {
+			return {
+				result: { kind: "loaded", settings },
+				document: { ...(parsed as Record<string, unknown>) },
+			};
+		}
 		return {
-			kind: "invalid",
-			reason: `${filePath}: expected tools to be an array of Chrome DevTools tool names`,
+			result: {
+				kind: "invalid",
+				reason: `${filePath}: expected tools to be an array of Chrome DevTools tool names`,
+			},
 		};
 	} catch (error) {
-		return { kind: "invalid", reason: `${filePath}: ${formatError(error)}` };
+		return { result: { kind: "invalid", reason: `${filePath}: ${formatError(error)}` } };
 	}
 }
 
+async function readSettingsFile(filePath: string): Promise<SettingsLoadResult> {
+	return (await readSettingsDocument(filePath)).result;
+}
+
 async function withLegacyIgnoredNotice(settings: SettingsLoadResult): Promise<SettingsLoadResult> {
 	if (!(await fileExists(legacySettingsFilePath()))) return settings;
 	return {
@@ -79,46 +96,6 @@ async function withLegacyIgnoredNotice(settings: SettingsLoadResult): Promise<Se
 	};
 }
 
-export async function installSettingsFileExclusively(filePath: string, contents: string) {
-	await mkdir(dirname(filePath), { recursive: true });
-	const tempFile = `${filePath}.${process.pid}.${randomUUID()}.tmp`;
-	try {
-		await writeFile(tempFile, contents, { encoding: "utf8", flag: "wx" });
-		await link(tempFile, filePath);
-	} finally {
-		await rm(tempFile, { force: true }).catch(() => undefined);
-	}
-}
-
-async function migrateLegacySettings(
-	legacyPath: string,
-	settings: ChromeDevToolsSettings,
-): Promise<SettingsMigrationResult> {
-	const newPath = settingsFilePath();
-	try {
-		await installSettingsFileExclusively(newPath, `${JSON.stringify(settings, null, 2)}\n`);
-	} catch (error) {
-		return {
-			kind: "failed",
-			notice: `Chrome DevTools legacy settings migration failed: could not migrate ${legacyPath} to ${newPath}: ${formatError(error)}. The legacy file was used for this session; future saves will write ${NEW_SETTINGS_FILE_NAME}.`,
-		};
-	}
-
-	try {
-		await rm(legacyPath, { force: true });
-	} catch (error) {
-		return {
-			kind: "migrated",
-			notice: `Chrome DevTools settings migrated from ${legacyPath} to ${newPath}, but the legacy file could not be removed: ${formatError(error)}. Delete ${LEGACY_SETTINGS_FILE_NAME} after confirming your settings.`,
-		};
-	}
-
-	return {
-		kind: "migrated",
-		notice: `Chrome DevTools settings migrated from ${legacyPath} to ${newPath}. ${LEGACY_SETTINGS_FILE_NAME} is deprecated and will be removed in a future major release.`,
-	};
-}
-
 async function fileExists(filePath: string) {
 	try {
 		await access(filePath, constants.F_OK);
@@ -128,6 +105,16 @@ async function fileExists(filePath: string) {
 	}
 }
 
+async function pathEntryExists(filePath: string) {
+	try {
+		await lstat(filePath);
+		return true;
+	} catch (error) {
+		if (isNodeError(error) && error.code === "ENOENT") return false;
+		throw error;
+	}
+}
+
 export function normalizeChromeDevtoolsSettings(
 	value: unknown,
 ): ChromeDevToolsSettings | undefined {
@@ -154,13 +141,48 @@ function orderedUniqueChromeDevtoolsTools(tools: readonly ChromeDevToolsToolName
 	return CHROME_DEVTOOLS_TOOL_NAMES.filter((toolName) => selectedTools.has(toolName));
 }
 
-export async function saveSettings(settings: ChromeDevToolsSettings) {
+let settingsSaveQueue = Promise.resolve();
+
+export function saveSettings(
+	settings: ChromeDevToolsSettings,
+	operations: Partial<SettingsFileOperations> = {},
+): Promise<void> {
+	const operation = settingsSaveQueue.then(() => saveSettingsNow(settings, operations));
+	settingsSaveQueue = operation.catch(() => undefined);
+	return operation;
+}
+
+async function saveSettingsNow(
+	settings: ChromeDevToolsSettings,
+	operations: Partial<SettingsFileOperations>,
+): Promise<void> {
 	const filePath = settingsFilePath();
+	let current = await readSettingsDocument(filePath);
+	const replaceCanonical = current.result.kind !== "missing";
+	if (!replaceCanonical) current = await readSettingsDocument(legacySettingsFilePath());
+	if (current.result.kind === "invalid") {
+		throw new Error(
+			`Cannot save Chrome DevTools settings until you repair ${current.result.reason}`,
+		);
+	}
+	const nextDocument = {
+		...(current.document ?? {}),
+		tools: [...settings.tools],
+		updatedAt: settings.updatedAt,
+	};
 	await mkdir(dirname(filePath), { recursive: true });
-	const tempFile = `${filePath}.${process.pid}.${Date.now()}.tmp`;
+	const tempFile = `${filePath}.${process.pid}.${randomUUID()}.tmp`;
 	try {
-		await writeFile(tempFile, `${JSON.stringify(settings, null, 2)}\n`, "utf8");
-		await rename(tempFile, filePath);
+		await (operations.write ?? DEFAULT_FILE_OPERATIONS.write)(
+			tempFile,
+			`${JSON.stringify(nextDocument, null, 2)}\n`,
+		);
+		if (!replaceCanonical && (await pathEntryExists(filePath))) {
+			throw new Error(
+				`${NEW_SETTINGS_FILE_NAME} was created concurrently; reopen settings and retry.`,
+			);
+		}
+		await (operations.rename ?? DEFAULT_FILE_OPERATIONS.rename)(tempFile, filePath);
 	} catch (error) {
 		await rm(tempFile, { force: true }).catch(() => undefined);
 		throw error;
@@ -176,7 +198,7 @@ function legacySettingsFilePath() {
 }
 
 function agentDir() {
-	return process.env.PI_CODING_AGENT_DIR ?? join(homedir(), ".pi", "agent");
+	return getAgentDir();
 }
 
 function isNodeError(error: unknown): error is NodeJS.ErrnoException {

package/src/tool-selector.ts

@@ -1,4 +1,5 @@
 import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { defineMenu, runMenu } from "@narumitw/pi-tui-kit";
 import {
 	browserCandidateHint,
 	devToolsEndpoint,
@@ -13,13 +14,9 @@ import { loadSettings, saveSettings, settingsFilePath } from "./settings.js";
 import { CHROME_DEVTOOLS_TOOL_NAMES, type ChromeDevToolsToolName } from "./tool-names.js";
 
 type CommandContext = ExtensionCommandContext;
-const TOOL_SELECTOR_DONE = "Done";
-const TOOL_SELECTOR_ENABLE_ALL = "Enable all Chrome DevTools tools";
-const TOOL_SELECTOR_DISABLE_ALL = "Disable all Chrome DevTools tools";
-type ToolSelectorAction = "enableAll" | "disableAll" | "done";
-type ToolSelectorRow =
-	| { kind: "tool"; toolName: ChromeDevToolsToolName }
-	| { kind: "action"; action: ToolSelectorAction; label: string };
+type ToolSelectorScreen = "tools";
+type ToolSelectorAction = "toggle" | "enableAll" | "disableAll";
+
 function unique<T>(values: T[]) {
 	return Array.from(new Set(values));
 }
@@ -39,165 +36,150 @@ interface ToolStatusSummary {
 }
 
 export async function showToolSelector(pi: ExtensionAPI, ctx: CommandContext) {
-	if (!ctx.hasUI) {
-		ctx.ui.notify(
-			`Chrome DevTools tool selection needs an interactive UI.
-
-${await buildToolStatusMessage(pi)}`,
-			"info",
-		);
-		return;
-	}
-
-	let selectedTools = new Set<ChromeDevToolsToolName>(getActiveChromeDevtoolsTools(pi));
-	let persistQueue = Promise.resolve();
-	const commitSelectedTools = () => {
-		const nextSelectedTools = orderedChromeDevtoolsTools(selectedTools);
-		applyChromeDevtoolsTools(pi, nextSelectedTools);
-		persistQueue = persistQueue.then(() => persistSettings(ctx, nextSelectedTools));
-	};
-
-	const customResult = await ctx.ui.custom<"closed" | undefined>(
-		(tui, theme, keybindings, done) => {
-			const rows = chromeDevtoolsToolSelectorRows();
-			let selectedIndex = 0;
-			const moveSelection = (delta: number) => {
-				selectedIndex = (selectedIndex + delta + rows.length) % rows.length;
-			};
-			const activateSelectedRow = () => {
-				const row = rows[selectedIndex];
-				if (!row) return;
-
-				if (row.kind === "tool") {
-					if (selectedTools.has(row.toolName)) selectedTools.delete(row.toolName);
-					else selectedTools.add(row.toolName);
-					commitSelectedTools();
-					return;
-				}
-
-				if (row.action === "enableAll") {
-					selectedTools = new Set(allChromeDevtoolsTools());
-					commitSelectedTools();
-					return;
-				}
-				if (row.action === "disableAll") {
-					selectedTools = new Set();
-					commitSelectedTools();
-					return;
-				}
-
-				done("closed");
-			};
-
-			return {
-				invalidate() {},
-				render() {
-					return [
-						theme.fg("accent", theme.bold(toolSelectorTitle(selectedTools))),
-						"",
-						...rows.map((row, index) => {
-							const label = formatToolSelectorRow(row, selectedTools);
-							if (index === selectedIndex) {
-								return `${theme.fg("accent", "›")} ${theme.fg("accent", label)}`;
-							}
-							return `  ${label}`;
-						}),
-						"",
-						theme.fg("dim", "↑↓ navigate • Enter/Space toggle • Esc close"),
-					];
-				},
-				handleInput(data: string) {
-					if (keybindings.matches(data, "tui.select.up")) {
-						moveSelection(-1);
-						tui.requestRender();
-						return;
-					}
-					if (keybindings.matches(data, "tui.select.down")) {
-						moveSelection(1);
-						tui.requestRender();
-						return;
-					}
-					if (keybindings.matches(data, "tui.select.pageUp")) {
-						selectedIndex = 0;
-						tui.requestRender();
-						return;
-					}
-					if (keybindings.matches(data, "tui.select.pageDown")) {
-						selectedIndex = rows.length - 1;
-						tui.requestRender();
-						return;
-					}
-					if (keybindings.matches(data, "tui.select.confirm") || data === " ") {
-						activateSelectedRow();
-						tui.requestRender();
-						return;
-					}
-					if (keybindings.matches(data, "tui.select.cancel")) {
-						done("closed");
-					}
-				},
-			};
+	const generation = state.sessionGeneration;
+	if (!ctx.hasUI) return;
+	const menu = defineMenu<undefined, ToolSelectorScreen, ToolSelectorAction>({
+		start: "tools",
+		screens: {
+			tools: () => {
+				const selectedTools = new Set(getActiveChromeDevtoolsTools(pi));
+				return {
+					kind: "multiSelect",
+					title: toolSelectorTitle(selectedTools),
+					items: CHROME_DEVTOOLS_TOOL_NAMES.map((toolName) => ({
+						id: toolName,
+						label: toolName,
+						selected: selectedTools.has(toolName),
+					})),
+					action: "toggle",
+					actions: [
+						{
+							id: "enable-all",
+							label: "Enable all Chrome DevTools tools",
+							action: "enableAll",
+						},
+						{
+							id: "disable-all",
+							label: "Disable all Chrome DevTools tools",
+							action: "disableAll",
+						},
+						{ id: "done", label: "Done", close: true },
+					],
+					hint: "close",
+					doneLabel: "Done",
+				};
+			},
 		},
-	);
-
-	if (customResult !== "closed") {
-		await showDialogToolSelector(pi, ctx);
-		return;
-	}
-
-	await persistQueue;
-	ctx.ui.notify(await buildToolStatusMessage(pi), "info");
+		actions: {
+			toggle: async ({ itemId, selected }) => {
+				if (!isChromeDevtoolsToolName(itemId)) return { kind: "rejected" };
+				const selectedTools = new Set(getActiveChromeDevtoolsTools(pi));
+				if (selected) selectedTools.add(itemId);
+				else selectedTools.delete(itemId);
+				const saved = await transactSelectedTools(
+					pi,
+					ctx,
+					orderedChromeDevtoolsTools(selectedTools),
+					generation,
+				);
+				return saved ? { kind: "stay" } : { kind: "rejected" };
+			},
+			enableAll: async () => {
+				const saved = await transactSelectedTools(pi, ctx, allChromeDevtoolsTools(), generation);
+				return saved ? { kind: "stay" } : { kind: "rejected" };
+			},
+			disableAll: async () => {
+				const saved = await transactSelectedTools(pi, ctx, [], generation);
+				return saved ? { kind: "stay" } : { kind: "rejected" };
+			},
+		},
+	});
+	const result = await runMenu(ctx, menu, {
+		getState: () => undefined,
+		signal: state.sessionController.signal,
+		isCurrent: () => generation === state.sessionGeneration,
+	});
+	if (result.kind !== "closed" || generation !== state.sessionGeneration) return;
+	const status = await buildToolStatusMessage(pi);
+	if (generation !== state.sessionGeneration) return;
+	ctx.ui.notify(status, "info");
 }
 
-async function showDialogToolSelector(pi: ExtensionAPI, ctx: CommandContext) {
-	let selectedTools = new Set<ChromeDevToolsToolName>(getActiveChromeDevtoolsTools(pi));
-	while (true) {
-		const rows = chromeDevtoolsToolSelectorRows();
-		const choices = rows.map((row) => formatToolSelectorRow(row, selectedTools));
-		const choice = await ctx.ui.select(toolSelectorTitle(selectedTools), choices);
-		if (!choice) break;
-
-		const row = rows[choices.indexOf(choice)];
-		if (!row) continue;
-		if (row.kind === "action" && row.action === "done") break;
+export async function updateChromeDevtoolsTools(
+	pi: ExtensionAPI,
+	ctx: CommandContext,
+	selectedTools: readonly ChromeDevToolsToolName[],
+	action: string,
+) {
+	const generation = state.sessionGeneration;
+	const saved = await transactSelectedTools(pi, ctx, selectedTools, generation);
+	if (!saved || generation !== state.sessionGeneration) return;
+	const status = await buildToolStatusMessage(pi);
+	if (generation !== state.sessionGeneration) return;
+	ctx.ui.notify(`Chrome DevTools tools ${action}.\n\n${status}`, "info");
+}
 
-		if (row.kind === "tool") {
-			if (selectedTools.has(row.toolName)) selectedTools.delete(row.toolName);
-			else selectedTools.add(row.toolName);
-		} else if (row.action === "enableAll") {
-			selectedTools = new Set(allChromeDevtoolsTools());
-		} else if (row.action === "disableAll") {
-			selectedTools = new Set();
-		}
+export async function setSelectedChromeDevtoolsTools(
+	pi: ExtensionAPI,
+	ctx: CommandContext,
+	selectedTools: readonly ChromeDevToolsToolName[],
+): Promise<boolean> {
+	return transactSelectedTools(pi, ctx, selectedTools, state.sessionGeneration);
+}
 
-		await setSelectedChromeDevtoolsTools(pi, ctx, orderedChromeDevtoolsTools(selectedTools));
-	}
+let toolTransactionQueue = Promise.resolve();
 
-	ctx.ui.notify(await buildToolStatusMessage(pi), "info");
+export async function waitForChromeDevtoolsSettings(): Promise<void> {
+	await toolTransactionQueue;
 }
 
-export async function updateChromeDevtoolsTools(
+function transactSelectedTools(
 	pi: ExtensionAPI,
 	ctx: CommandContext,
 	selectedTools: readonly ChromeDevToolsToolName[],
-	action: string,
-) {
-	await setSelectedChromeDevtoolsTools(pi, ctx, selectedTools);
-	ctx.ui.notify(
-		`Chrome DevTools tools ${action}.
-
-${await buildToolStatusMessage(pi)}`,
-		"info",
+	expectedGeneration: number,
+): Promise<boolean> {
+	const operation = toolTransactionQueue.then(() =>
+		transactSelectedToolsNow(pi, ctx, selectedTools, expectedGeneration),
+	);
+	toolTransactionQueue = operation.then(
+		() => undefined,
+		() => undefined,
 	);
+	return operation;
 }
 
-export async function setSelectedChromeDevtoolsTools(
+async function transactSelectedToolsNow(
 	pi: ExtensionAPI,
 	ctx: CommandContext,
 	selectedTools: readonly ChromeDevToolsToolName[],
-) {
-	applyChromeDevtoolsTools(pi, selectedTools);
-	await persistSettings(ctx, selectedTools);
+	expectedGeneration: number,
+): Promise<boolean> {
+	if (expectedGeneration !== state.sessionGeneration) return false;
+	const previousActiveTools = pi.getActiveTools();
+	try {
+		applyChromeDevtoolsTools(pi, selectedTools);
+		await persistSettings(selectedTools);
+		return expectedGeneration === state.sessionGeneration;
+	} catch (error) {
+		let rollbackError: unknown;
+		try {
+			const previousChromeTools = previousActiveTools.filter((name) =>
+				CHROME_DEVTOOLS_TOOL_NAMES.includes(name as ChromeDevToolsToolName),
+			) as ChromeDevToolsToolName[];
+			applyChromeDevtoolsTools(pi, previousChromeTools);
+		} catch (caught) {
+			rollbackError = caught;
+		}
+		if (expectedGeneration !== state.sessionGeneration) return false;
+		ctx.ui.notify(
+			rollbackError
+				? `Chrome DevTools settings save failed: ${formatError(error)}; active-tool rollback failed: ${formatError(rollbackError)}`
+				: `Chrome DevTools settings save failed; active tools restored: ${formatError(error)}`,
+			"warning",
+		);
+		return false;
+	}
 }
 
 export function applyChromeDevtoolsTools(
@@ -275,21 +257,8 @@ function toolSelectorTitle(selectedTools: ReadonlySet<ChromeDevToolsToolName>) {
 	return `Chrome DevTools tools (${selectedTools.size}/${CHROME_DEVTOOLS_TOOL_NAMES.length}). Non-built-in tools run at user risk.`;
 }
 
-function chromeDevtoolsToolSelectorRows(): ToolSelectorRow[] {
-	return [
-		...CHROME_DEVTOOLS_TOOL_NAMES.map((toolName) => ({ kind: "tool" as const, toolName })),
-		{ kind: "action", action: "enableAll", label: TOOL_SELECTOR_ENABLE_ALL },
-		{ kind: "action", action: "disableAll", label: TOOL_SELECTOR_DISABLE_ALL },
-		{ kind: "action", action: "done", label: TOOL_SELECTOR_DONE },
-	];
-}
-
-function formatToolSelectorRow(
-	row: ToolSelectorRow,
-	selectedTools: ReadonlySet<ChromeDevToolsToolName>,
-) {
-	if (row.kind === "action") return row.label;
-	return `${selectedTools.has(row.toolName) ? "[x]" : "[ ]"} ${row.toolName}`;
+function isChromeDevtoolsToolName(value: string): value is ChromeDevToolsToolName {
+	return CHROME_DEVTOOLS_TOOL_NAMES.includes(value as ChromeDevToolsToolName);
 }
 
 function getActiveChromeDevtoolsTools(pi: ExtensionAPI) {
@@ -327,13 +296,6 @@ function formatPersistedSelection(tools: readonly ChromeDevToolsToolName[]) {
 	return `${tools.length}/${CHROME_DEVTOOLS_TOOL_NAMES.length} selected: ${tools.join(", ")}`;
 }
 
-async function persistSettings(
-	ctx: CommandContext,
-	selectedTools: readonly ChromeDevToolsToolName[],
-) {
-	try {
-		await saveSettings({ tools: [...selectedTools], updatedAt: Date.now() });
-	} catch (error) {
-		ctx.ui.notify(`Chrome DevTools settings save failed: ${formatError(error)}`, "warning");
-	}
+async function persistSettings(selectedTools: readonly ChromeDevToolsToolName[]) {
+	await saveSettings({ tools: [...selectedTools], updatedAt: Date.now() });
 }