@narumitw/pi-chrome-devtools 0.49.3 → 0.50.0

package/src/tool-selector.ts

@@ -1,6 +1,8 @@
+import { stripVTControlCharacters } from "node:util";
 import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import {
 	browserCandidateHint,
+	browserLifecycleState,
 	devToolsEndpoint,
 	endpointConfigHint,
 	endpointSourceLabel,
@@ -13,17 +15,11 @@ import { loadSettings, saveSettings, settingsFilePath } from "./settings.js";
 import { CHROME_DEVTOOLS_TOOL_NAMES, type ChromeDevToolsToolName } from "./tool-names.js";
 
 type CommandContext = ExtensionCommandContext;
-type ToolSelectorScreen = "tools";
-type ToolSelectorAction = "toggle" | "enableAll" | "disableAll";
 
 function unique<T>(values: T[]) {
 	return Array.from(new Set(values));
 }
 
-function recordSettingsNotice(settings: { notice?: string }) {
-	if (settings.notice) state.settingsNotice = settings.notice;
-}
-
 function formatError(error: unknown) {
 	return error instanceof Error ? error.message : String(error);
 }
@@ -34,79 +30,7 @@ interface ToolStatusSummary {
 	activeNonChromeToolCount: number;
 }
 
-export async function showToolSelector(pi: ExtensionAPI, ctx: CommandContext) {
-	const generation = state.sessionGeneration;
-	if (!ctx.hasUI) return;
-	const menuSignal = state.sessionController.signal;
-	const isCurrent = () => generation === state.sessionGeneration && !menuSignal.aborted;
-	const { defineMenu, runMenu } = await import("@narumitw/pi-tui-kit");
-	if (!isCurrent()) 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",
-				};
-			},
-		},
-		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: menuSignal,
-		isCurrent,
-	});
-	if (result.kind !== "closed" || generation !== state.sessionGeneration) return;
-	const status = await buildToolStatusMessage(pi);
-	if (generation !== state.sessionGeneration) return;
-	ctx.ui.notify(status, "info");
-}
+type ToolSelectionSaveResult = "saved" | "active-tools-changed" | "failed";
 
 export async function updateChromeDevtoolsTools(
 	pi: ExtensionAPI,
@@ -115,8 +39,8 @@ export async function updateChromeDevtoolsTools(
 	action: string,
 ) {
 	const generation = state.sessionGeneration;
-	const saved = await transactSelectedTools(pi, ctx, selectedTools, generation);
-	if (!saved || generation !== state.sessionGeneration) return;
+	const result = await transactSelectedTools(pi, ctx, selectedTools, generation);
+	if (result !== "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");
@@ -126,8 +50,15 @@ export async function setSelectedChromeDevtoolsTools(
 	pi: ExtensionAPI,
 	ctx: CommandContext,
 	selectedTools: readonly ChromeDevToolsToolName[],
-): Promise<boolean> {
-	return transactSelectedTools(pi, ctx, selectedTools, state.sessionGeneration);
+	expectedActiveTools: readonly ChromeDevToolsToolName[],
+): Promise<ToolSelectionSaveResult> {
+	return transactSelectedTools(
+		pi,
+		ctx,
+		selectedTools,
+		state.sessionGeneration,
+		expectedActiveTools,
+	);
 }
 
 let toolTransactionQueue = Promise.resolve();
@@ -141,9 +72,10 @@ function transactSelectedTools(
 	ctx: CommandContext,
 	selectedTools: readonly ChromeDevToolsToolName[],
 	expectedGeneration: number,
-): Promise<boolean> {
+	expectedActiveTools?: readonly ChromeDevToolsToolName[],
+): Promise<ToolSelectionSaveResult> {
 	const operation = toolTransactionQueue.then(() =>
-		transactSelectedToolsNow(pi, ctx, selectedTools, expectedGeneration),
+		transactSelectedToolsNow(pi, ctx, selectedTools, expectedGeneration, expectedActiveTools),
 	);
 	toolTransactionQueue = operation.then(
 		() => undefined,
@@ -157,13 +89,21 @@ async function transactSelectedToolsNow(
 	ctx: CommandContext,
 	selectedTools: readonly ChromeDevToolsToolName[],
 	expectedGeneration: number,
-): Promise<boolean> {
-	if (expectedGeneration !== state.sessionGeneration) return false;
+	expectedActiveTools?: readonly ChromeDevToolsToolName[],
+): Promise<ToolSelectionSaveResult> {
+	if (expectedGeneration !== state.sessionGeneration) return "failed";
+	if (expectedActiveTools && !arraysEqual(activeChromeDevtoolsTools(pi), expectedActiveTools)) {
+		ctx.ui.notify(
+			"Browser tool selection changed while review was open. Review the current state, then apply again.",
+			"warning",
+		);
+		return "active-tools-changed";
+	}
 	const previousActiveTools = pi.getActiveTools();
 	try {
 		applyChromeDevtoolsTools(pi, selectedTools);
 		await persistSettings(selectedTools);
-		return expectedGeneration === state.sessionGeneration;
+		return expectedGeneration === state.sessionGeneration ? "saved" : "failed";
 	} catch (error) {
 		let rollbackError: unknown;
 		try {
@@ -174,17 +114,28 @@ async function transactSelectedToolsNow(
 		} catch (caught) {
 			rollbackError = caught;
 		}
-		if (expectedGeneration !== state.sessionGeneration) return false;
+		if (expectedGeneration !== state.sessionGeneration) return "failed";
 		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)}`,
+			sanitizeChromeDevtoolsDisplay(
+				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;
+		return "failed";
 	}
 }
 
+function activeChromeDevtoolsTools(pi: ExtensionAPI) {
+	const active = new Set(pi.getActiveTools());
+	return CHROME_DEVTOOLS_TOOL_NAMES.filter((toolName) => active.has(toolName));
+}
+
+function arraysEqual<T>(left: readonly T[], right: readonly T[]) {
+	return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+
 export function applyChromeDevtoolsTools(
 	pi: ExtensionAPI,
 	selectedTools: readonly ChromeDevToolsToolName[],
@@ -217,29 +168,105 @@ function getToolStatusSummary(pi: ExtensionAPI): ToolStatusSummary {
 export async function buildToolStatusMessage(pi: ExtensionAPI) {
 	const summary = getToolStatusSummary(pi);
 	const persistedSetting = await persistedSettingLabel();
-	return [
-		`Chrome DevTools tools: ${formatRuntimeStatus(summary)}`,
-		`Persisted selection: ${persistedSetting}`,
-		`Settings file: ${settingsFilePath()}`,
-		...(state.settingsNotice ? [`Settings note: ${state.settingsNotice}`] : []),
-		`Other active tools preserved: ${summary.activeNonChromeToolCount}`,
-		`Endpoint: ${devToolsEndpoint()}`,
-		`Endpoint source: ${endpointSourceLabel()}`,
-		`Launch mode: ${launchModeLabel()}`,
-		...launchAttemptLines(),
-	].join("\n");
+	return sanitizeChromeDevtoolsDisplay(
+		[
+			`Chrome DevTools tools: ${formatRuntimeStatus(summary)}`,
+			`Persisted selection: ${persistedSetting}`,
+			...browserSettingsStatusLines(),
+			...(state.settingsNotice ? [`Settings note: ${state.settingsNotice}`] : []),
+			`Other active tools preserved: ${summary.activeNonChromeToolCount}`,
+			`Endpoint: ${devToolsEndpoint()}`,
+			`Endpoint source: ${endpointSourceLabel()}`,
+			`Launch mode: ${launchModeLabel()}`,
+			...launchAttemptLines(),
+		].join("\n"),
+	);
 }
 
 export function buildQuickstartMessage() {
+	return buildSettingsSetupMessage();
+}
+
+export function buildBrowserStatusMessage() {
+	const lifecycle = browserLifecycleState();
+	const browserState =
+		lifecycle === "starting"
+			? "starting managed browser"
+			: lifecycle === "running"
+				? "managed browser running"
+				: lifecycle === "exited"
+					? "managed browser exited"
+					: lifecycle === "failed"
+						? "last launch failed"
+						: "not started; connection has not been checked";
+	const needsRecovery = lifecycle === "exited" || lifecycle === "failed";
+	return sanitizeChromeDevtoolsDisplay(
+		[
+			`Browser: ${browserState}`,
+			"Viewing this status does not probe the endpoint or launch Chrome.",
+			`Endpoint: ${devToolsEndpoint()}`,
+			`Endpoint source: ${endpointSourceLabel()}`,
+			`Launch mode: ${launchModeLabel()}`,
+			`Unpacked extensions: ${state.extensionPaths.length} (${state.extensionPathsSource})`,
+			...(state.extensionPaths.length > 0
+				? ["Unpacked extensions execute trusted browser code in an isolated managed browser."]
+				: []),
+			...launchAttemptLines(),
+			...(needsRecovery ? [launchHint(), endpointConfigHint()] : []),
+		].join("\n"),
+	);
+}
+
+export function buildSettingsSetupMessage() {
+	return sanitizeChromeDevtoolsDisplay(
+		[
+			`Chrome DevTools endpoint: ${devToolsEndpoint()}`,
+			`Endpoint source: ${endpointSourceLabel()}`,
+			`Launch mode: ${launchModeLabel()}`,
+			...browserSettingsStatusLines(),
+			launchHint(),
+			browserCandidateHint(),
+			...launchAttemptLines(),
+			endpointConfigHint(),
+		].join("\n"),
+	);
+}
+
+export function sanitizeChromeDevtoolsDisplay(value: string, maxCharacters = 50_000) {
+	const sanitized = Array.from(stripVTControlCharacters(value), (character) => {
+		const codePoint = character.codePointAt(0) ?? 0;
+		const unsafeControl =
+			(codePoint >= 0 && codePoint <= 8) ||
+			(codePoint >= 11 && codePoint <= 31) ||
+			(codePoint >= 127 && codePoint <= 159);
+		return unsafeControl ? "�" : character;
+	}).join("");
+	if (sanitized.length <= maxCharacters) return sanitized;
+	return `${sanitized.slice(0, Math.max(0, maxCharacters - 1))}…`;
+}
+
+function browserSettingsStatusLines() {
+	const extensionLines =
+		state.extensionPaths.length > 0
+			? state.extensionPaths.map((extensionPath) => `  - ${extensionPath}`)
+			: ["  - none"];
 	return [
-		`Chrome DevTools endpoint: ${devToolsEndpoint()}`,
-		`Endpoint source: ${endpointSourceLabel()}`,
-		`Launch mode: ${launchModeLabel()}`,
-		launchHint(),
-		browserCandidateHint(),
-		...launchAttemptLines(),
-		endpointConfigHint(),
-	].join("\n");
+		`Settings file: ${state.settingsFilePath ?? settingsFilePath()} (user)`,
+		...(state.projectSettingsFilePath
+			? [
+					`Project settings: ${state.projectSettingsFilePath} (${state.projectSettingsTrusted ? "trusted" : "untrusted; ignored"})`,
+				]
+			: []),
+		`Browser executable: ${state.browserExecutable ?? "automatic discovery"} (${state.browserExecutableSource})`,
+		`Unpacked extensions (${state.extensionPathsSource}):`,
+		...extensionLines,
+		"Settings changes apply to a new managed browser after /reload or session replacement.",
+		...(state.extensionPaths.length > 0
+			? [
+					"Unpacked extensions require Chrome for Testing or Chromium and execute trusted browser code.",
+				]
+			: []),
+	];
 }
 
 export function buildCommandGuide() {
@@ -250,25 +277,12 @@ export function buildCommandGuide() {
 		"/chrome-devtools quickstart — show endpoint and launch help",
 		"/chrome-devtools status — show tool and settings status",
 		"/chrome-devtools tools — select individual Chrome DevTools tools",
-		"/chrome-devtools toggle — alias for /chrome-devtools tools",
-		"/chrome-devtools enable — enable all Chrome DevTools tools",
-		"/chrome-devtools disable — disable all Chrome DevTools tools",
+		"/chrome-devtools toggle|select — compatibility aliases for tools",
+		"/chrome-devtools enable|on — enable all Chrome DevTools tools immediately",
+		"/chrome-devtools disable|off — disable all Chrome DevTools tools immediately",
 	].join("\n");
 }
 
-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 isChromeDevtoolsToolName(value: string): value is ChromeDevToolsToolName {
-	return CHROME_DEVTOOLS_TOOL_NAMES.includes(value as ChromeDevToolsToolName);
-}
-
-function getActiveChromeDevtoolsTools(pi: ExtensionAPI) {
-	const activeToolNames = new Set(pi.getActiveTools());
-	return CHROME_DEVTOOLS_TOOL_NAMES.filter((toolName) => activeToolNames.has(toolName));
-}
-
 export function allChromeDevtoolsTools() {
 	return [...CHROME_DEVTOOLS_TOOL_NAMES];
 }
@@ -283,8 +297,9 @@ function formatRuntimeStatus(summary: ToolStatusSummary) {
 
 async function persistedSettingLabel() {
 	const settings = await loadSettings();
-	recordSettingsNotice(settings);
-	if (settings.kind === "loaded") return formatPersistedSelection(settings.settings.tools);
+	if (settings.kind === "loaded" && settings.settings.tools) {
+		return formatPersistedSelection(settings.settings.tools);
+	}
 	if (settings.kind === "invalid") {
 		return `none; current active-tool policy preserved (invalid settings ignored: ${settings.reason})`;
 	}