@narumitw/pi-chrome-devtools 0.35.0 → 0.39.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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narumitw/pi-chrome-devtools",
-	"version": "0.35.0",
+	"version": "0.39.0",
 	"description": "Pi extension that exposes Chrome DevTools Protocol tools.",
 	"type": "module",
 	"license": "MIT",
@@ -29,11 +29,12 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"@narumitw/pi-tui-kit": "<1",
 		"typebox": "^1.3.8"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.5.5",
-		"@earendil-works/pi-coding-agent": "0.82.1",
+		"@biomejs/biome": "2.5.6",
+		"@earendil-works/pi-coding-agent": "0.83.0",
 		"typescript": "7.0.2"
 	},
 	"repository": {

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";
@@ -59,6 +60,7 @@ export default function chromeDevtools(pi: ExtensionAPI) {
 
 	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);
@@ -77,6 +79,7 @@ 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);
 		const browserShutdown = shutdownManagedBrowser(undefined, { cancelLaunch: true });
 		await waitForChromeDevtoolsSettings();
@@ -134,31 +137,60 @@ async function showMenu(pi: ExtensionAPI, ctx: CommandContext, generation: numbe
 		return;
 	}
 
-	const choice = await ctx.ui.select("Chrome DevTools", Object.values(MENU_OPTIONS));
-	if (generation !== state.sessionGeneration) return;
-	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: {
-			const status = await buildToolStatusMessage(pi);
-			if (generation !== state.sessionGeneration) return;
-			ctx.ui.notify(status, "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" {

package/src/runtime.ts

@@ -32,6 +32,7 @@ export interface ChromeDevToolsState {
 	lastLaunchAttempt?: BrowserLaunchAttempt;
 	shuttingDown: boolean;
 	sessionGeneration: number;
+	sessionController: AbortController;
 	settingsNotice?: string;
 }
 
@@ -84,4 +85,5 @@ export const state: ChromeDevToolsState = {
 	browserExecutable: process.env.PI_CHROME_DEVTOOLS_BROWSER,
 	shuttingDown: false,
 	sessionGeneration: 0,
+	sessionController: new AbortController(),
 };

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));
 }
@@ -41,156 +38,68 @@ interface ToolStatusSummary {
 export async function showToolSelector(pi: ExtensionAPI, ctx: CommandContext) {
 	const generation = state.sessionGeneration;
 	if (!ctx.hasUI) return;
-	if (ctx.mode !== "tui") {
-		await showDialogToolSelector(pi, ctx, generation);
-		return;
-	}
-
-	let selectedTools = new Set<ChromeDevToolsToolName>(getActiveChromeDevtoolsTools(pi));
-	let persistQueue = Promise.resolve();
-	let requestedRevision = 0;
-	let requestRender: () => void = () => undefined;
-	const commitSelectedTools = () => {
-		const nextSelectedTools = orderedChromeDevtoolsTools(selectedTools);
-		const revision = ++requestedRevision;
-		persistQueue = persistQueue.then(async () => {
-			const saved = await transactSelectedTools(pi, ctx, nextSelectedTools, generation);
-			if (!saved && generation === state.sessionGeneration && revision === requestedRevision) {
-				selectedTools = new Set(getActiveChromeDevtoolsTools(pi));
-				requestRender();
-			}
-		});
-	};
-
-	const customResult = await ctx.ui.custom<"closed" | undefined>(
-		(tui, theme, keybindings, done) => {
-			requestRender = () => tui.requestRender();
-			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 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 (generation !== state.sessionGeneration) return;
-	if (customResult !== "closed") {
-		await showDialogToolSelector(pi, ctx, generation);
-		return;
-	}
-
-	await persistQueue;
-	if (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, generation: number) {
-	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 (generation !== state.sessionGeneration || !choice) break;
-
-		const row = rows[choices.indexOf(choice)];
-		if (!row) continue;
-		if (row.kind === "action" && row.action === "done") break;
-
-		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();
-		}
-
-		const saved = await transactSelectedTools(
-			pi,
-			ctx,
-			orderedChromeDevtoolsTools(selectedTools),
-			generation,
-		);
-		if (generation !== state.sessionGeneration) return;
-		if (!saved) selectedTools = new Set(getActiveChromeDevtoolsTools(pi));
-	}
-
-	if (generation !== state.sessionGeneration) return;
+		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");
@@ -348,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) {