@narumitw/pi-chrome-devtools 0.52.2 → 0.53.0

package/src/chrome-devtools.ts

@@ -1,12 +1,22 @@
 import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-import { shutdownManagedBrowser } from "./browser-manager.js";
+import { shutdownManagedBrowser, startManagedBrowserSession } from "./browser-manager.js";
 import {
 	availableChromeDevtoolsTools,
-	configureLazyChromeDevtoolsTools,
+	configureChromeDevtoolsToolExposure,
 	createChromeDevtoolsLoadTool,
 	initializeAvailableChromeDevtoolsTools,
+	requireEagerChromeDevtoolsToolExposure,
+	setChromeDevtoolsSessionOwner,
+	supportsNativeDeferredToolLoading,
 } from "./lazy-tools.js";
-import { applyRuntimeBrowserSettings, state } from "./runtime.js";
+import {
+	applyRuntimeBrowserSettings,
+	applyRuntimeWebMcpSetting,
+	invalidateWebMcpOperations,
+	setWebMcpSessionOwner,
+	state,
+	webMcpEnabled,
+} from "./runtime.js";
 import { loadSettings, waitForSettingsWrites } from "./settings.js";
 import {
 	allChromeDevtoolsTools,
@@ -23,6 +33,8 @@ import {
 	navigateTool,
 	screenshotTool,
 	selectPageTool,
+	webMcpCallTool,
+	webMcpListToolsTool,
 } from "./tools.js";
 
 type CommandAction =
@@ -41,7 +53,7 @@ const COMMAND_COMPLETIONS = [
 	{ value: "quickstart", label: "quickstart", description: "Show endpoint and launch help" },
 	{ value: "status", label: "status", description: "Show tool and settings status" },
 	{ value: "settings", label: "settings", description: "Edit browser connection settings" },
-	{ value: "tools", label: "tools", description: "Choose lazy-loadable Chrome DevTools tools" },
+	{ value: "tools", label: "tools", description: "Choose available Chrome DevTools tools" },
 	{ value: "toggle", label: "toggle", description: "Alias for tools" },
 	{ value: "select", label: "select", description: "Compatibility alias for tools" },
 	{ value: "enable", label: "enable", description: "Make all Chrome DevTools tools available" },
@@ -55,12 +67,15 @@ export default function chromeDevtools(pi: ExtensionAPI) {
 	pi.registerTool(navigateTool);
 	pi.registerTool(evaluateTool);
 	pi.registerTool(screenshotTool);
+	pi.registerTool(webMcpListToolsTool);
+	pi.registerTool(webMcpCallTool);
 	pi.registerTool(createChromeDevtoolsLoadTool(pi));
 
 	pi.registerCommand("chrome-devtools", {
 		description: "Open Chrome DevTools help and tool controls",
 		getArgumentCompletions: (prefix) => commandCompletions(prefix),
 		handler: async (args, ctx) => {
+			setChromeDevtoolsSessionOwner(pi, ctx.sessionManager);
 			initializeAvailableChromeDevtoolsTools(pi);
 			const generation = state.sessionGeneration;
 			await handleChromeDevtoolsCommand(pi, args, ctx, generation);
@@ -69,12 +84,19 @@ export default function chromeDevtools(pi: ExtensionAPI) {
 
 	pi.on("session_start", async (_event, ctx) => {
 		const generation = ++state.sessionGeneration;
+		setChromeDevtoolsSessionOwner(pi, ctx.sessionManager);
 		initializeAvailableChromeDevtoolsTools(pi);
+		setWebMcpSessionOwner(ctx.sessionManager);
 		replaceSessionController("Chrome DevTools session replaced");
+		invalidateWebMcpOperations(ctx.sessionManager, "Chrome DevTools session replaced");
 		state.shuttingDown = false;
 		state.settingsNotice = undefined;
 		ctx.ui.setStatus(STATUS_KEY, undefined);
-		await shutdownManagedBrowser();
+		await shutdownManagedBrowser(undefined, {
+			cancelLaunch: true,
+			owner: ctx.sessionManager,
+		});
+		startManagedBrowserSession(ctx.sessionManager);
 		if (generation !== state.sessionGeneration) return;
 		state.activePageId = undefined;
 		state.lastLaunchAttempt = undefined;
@@ -82,22 +104,43 @@ export default function chromeDevtools(pi: ExtensionAPI) {
 		const settings = await loadSettings({ cwd: ctx.cwd, projectTrusted });
 		if (generation !== state.sessionGeneration) return;
 		applyRuntimeBrowserSettings(settings.effectiveBrowser, settings.paths, projectTrusted);
+		applyRuntimeWebMcpSetting(settings.effectiveWebMcpEnabled, ctx.sessionManager);
 		state.settingsNotice = settings.notice;
 		for (const warning of settings.warnings) {
 			ctx.ui.notify(sanitizeChromeDevtoolsDisplay(warning), "warning");
 		}
+		if (webMcpEnabled(ctx.sessionManager)) {
+			ctx.ui.notify(
+				"Experimental WebMCP is enabled. Page-provided tools use the visible browser session and require confirmation for every call.",
+				"warning",
+			);
+		}
 		const availableTools =
 			settings.kind === "loaded" && settings.settings.tools
 				? settings.settings.tools
 				: availableChromeDevtoolsTools(pi);
-		configureLazyChromeDevtoolsTools(pi, availableTools);
+		configureChromeDevtoolsToolExposure(pi, availableTools, ctx.model);
+	});
+
+	pi.on("model_select", (event, ctx) => {
+		invalidateWebMcpOperations(
+			ctx.sessionManager,
+			"Chrome DevTools model and tool exposure changed",
+		);
+		if (!supportsNativeDeferredToolLoading(event.model)) {
+			requireEagerChromeDevtoolsToolExposure(pi);
+		}
 	});
 
 	pi.on("session_shutdown", async (_event, ctx) => {
 		state.sessionGeneration += 1;
 		replaceSessionController("Chrome DevTools session shut down");
+		invalidateWebMcpOperations(ctx.sessionManager, "Chrome DevTools session shut down");
 		ctx.ui.setStatus(STATUS_KEY, undefined);
-		const browserShutdown = shutdownManagedBrowser(undefined, { cancelLaunch: true });
+		const browserShutdown = shutdownManagedBrowser(undefined, {
+			cancelLaunch: true,
+			owner: ctx.sessionManager,
+		});
 		await waitForChromeDevtoolsSettings();
 		await waitForSettingsWrites();
 		await browserShutdown;
@@ -117,15 +160,15 @@ async function handleChromeDevtoolsCommand(
 			return;
 		case "help":
 			requireObservableUi(ctx, "help");
-			ctx.ui.notify(buildCommandGuide(), "info");
+			ctx.ui.notify(buildCommandGuide(ctx.sessionManager), "info");
 			return;
 		case "quickstart":
 			requireObservableUi(ctx, "quickstart");
-			ctx.ui.notify(buildQuickstartMessage(), "info");
+			ctx.ui.notify(buildQuickstartMessage(ctx.sessionManager), "info");
 			return;
 		case "status": {
 			requireObservableUi(ctx, "status");
-			const status = await buildToolStatusMessage(pi);
+			const status = await buildToolStatusMessage(pi, ctx.sessionManager);
 			if (generation !== state.sessionGeneration) return;
 			ctx.ui.notify(status, "info");
 			return;
@@ -136,7 +179,7 @@ async function handleChromeDevtoolsCommand(
 			}
 			const { showChromeDevtoolsBrowserSettings } = await import("./browser-settings-menu.js");
 			if (generation !== state.sessionGeneration) return;
-			await showChromeDevtoolsBrowserSettings(ctx, generation);
+			await showChromeDevtoolsBrowserSettings(pi, ctx, generation);
 			return;
 		}
 		case "tools": {
@@ -149,7 +192,12 @@ async function handleChromeDevtoolsCommand(
 			return;
 		}
 		case "enable":
-			await updateChromeDevtoolsTools(pi, ctx, allChromeDevtoolsTools(), "made all available");
+			await updateChromeDevtoolsTools(
+				pi,
+				ctx,
+				allChromeDevtoolsTools(ctx.sessionManager),
+				"made all available",
+			);
 			return;
 		case "disable":
 			await updateChromeDevtoolsTools(pi, ctx, [], "made all unavailable");
@@ -162,7 +210,7 @@ async function handleChromeDevtoolsCommand(
 	ctx.ui.notify(
 		`Unknown /chrome-devtools command: ${args.trim()}
 
-${buildCommandGuide()}`,
+${buildCommandGuide(ctx.sessionManager)}`,
 		"warning",
 	);
 }

package/src/lazy-tools.ts

@@ -1,6 +1,15 @@
-import { defineTool, type ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import {
+	defineTool,
+	type ExtensionAPI,
+	type ExtensionContext,
+} from "@earendil-works/pi-coding-agent";
 import { Type } from "typebox";
-import { CHROME_DEVTOOLS_TOOL_NAMES, type ChromeDevToolsToolName } from "./tool-names.js";
+import { webMcpEnabled } from "./runtime.js";
+import {
+	CHROME_DEVTOOLS_TOOL_NAMES,
+	type ChromeDevToolsToolName,
+	isWebMcpToolName,
+} from "./tool-names.js";
 
 export const CHROME_DEVTOOLS_LOAD_TOOL_NAME = "chrome_devtools_load";
 
@@ -13,6 +22,8 @@ const existingAvailableToolsStore = sharedGlobal[AVAILABLE_TOOLS_STORE];
 const availableToolsByApi =
 	existingAvailableToolsStore ?? new WeakMap<ExtensionAPI, Set<ChromeDevToolsToolName>>();
 if (!existingAvailableToolsStore) sharedGlobal[AVAILABLE_TOOLS_STORE] = availableToolsByApi;
+const lazyExposureByApi = new WeakMap<ExtensionAPI, boolean>();
+const sessionOwnerByApi = new WeakMap<ExtensionAPI, object>();
 
 const SEARCH_TEXT: Record<ChromeDevToolsToolName, string> = {
 	chrome_devtools_list_pages: "list open inspectable chrome browser pages tabs targets",
@@ -20,8 +31,16 @@ const SEARCH_TEXT: Record<ChromeDevToolsToolName, string> = {
 	chrome_devtools_navigate: "navigate open create chrome browser page url website",
 	chrome_devtools_evaluate: "evaluate run javascript expression dom inspect chrome browser page",
 	chrome_devtools_screenshot: "capture screenshot png image visual chrome browser page",
+	chrome_devtools_webmcp_list_tools:
+		"list discover page provided website webmcp tools capabilities experimental",
+	chrome_devtools_webmcp_call_tool:
+		"call invoke page provided website webmcp tool confirmation experimental",
 };
 
+export function setChromeDevtoolsSessionOwner(pi: ExtensionAPI, owner: object) {
+	sessionOwnerByApi.set(pi, owner);
+}
+
 export function initializeAvailableChromeDevtoolsTools(pi: ExtensionAPI) {
 	if (availableToolsByApi.has(pi)) return;
 	const activeTools = new Set(pi.getActiveTools());
@@ -31,33 +50,87 @@ export function initializeAvailableChromeDevtoolsTools(pi: ExtensionAPI) {
 	);
 }
 
-export function configureLazyChromeDevtoolsTools(
+export function configureChromeDevtoolsToolExposure(
 	pi: ExtensionAPI,
 	availableTools: readonly ChromeDevToolsToolName[],
+	model?: ExtensionContext["model"],
 ) {
 	setAvailableTools(pi, availableTools);
+	const available = effectiveAvailableTools(pi);
+	const lazyExposure = supportsNativeDeferredToolLoading(model);
+	lazyExposureByApi.set(pi, lazyExposure);
+	const exposedTools = lazyExposure
+		? []
+		: CHROME_DEVTOOLS_TOOL_NAMES.filter((name) => available.has(name));
 	const nonCapabilityTools = pi
 		.getActiveTools()
 		.filter((name) => !CHROME_DEVTOOLS_TOOL_NAMES.includes(name as ChromeDevToolsToolName));
-	pi.setActiveTools(unique([...nonCapabilityTools, CHROME_DEVTOOLS_LOAD_TOOL_NAME]));
+	pi.setActiveTools(
+		unique([...nonCapabilityTools, CHROME_DEVTOOLS_LOAD_TOOL_NAME, ...exposedTools]),
+	);
+}
+
+export function requireEagerChromeDevtoolsToolExposure(pi: ExtensionAPI) {
+	lazyExposureByApi.set(pi, false);
+	const active = pi.getActiveTools();
+	const available = availableChromeDevtoolsTools(pi);
+	pi.setActiveTools(unique([...active, CHROME_DEVTOOLS_LOAD_TOOL_NAME, ...available]));
 }
 
 export function applyAvailableChromeDevtoolsTools(
 	pi: ExtensionAPI,
 	availableTools: readonly ChromeDevToolsToolName[],
 ) {
-	const available = setAvailableTools(pi, availableTools);
+	setAvailableTools(pi, availableTools);
+	const available = effectiveAvailableTools(pi);
+	const lazyExposure = lazyExposureByApi.get(pi) === true;
 	const active = pi
 		.getActiveTools()
 		.filter(
 			(name) =>
 				!CHROME_DEVTOOLS_TOOL_NAMES.includes(name as ChromeDevToolsToolName) ||
-				available.has(name as ChromeDevToolsToolName),
+				(lazyExposure && available.has(name as ChromeDevToolsToolName)),
+		);
+	const eagerTools = lazyExposure
+		? []
+		: CHROME_DEVTOOLS_TOOL_NAMES.filter((name) => available.has(name));
+	pi.setActiveTools(unique([...active, CHROME_DEVTOOLS_LOAD_TOOL_NAME, ...eagerTools]));
+}
+
+export function chromeDevtoolsToolExposureMode(pi: ExtensionAPI) {
+	return lazyExposureByApi.get(pi) === true ? "native deferred" : "eager";
+}
+
+export function supportsNativeDeferredToolLoading(model: ExtensionContext["model"]): boolean {
+	if (!model) return false;
+	if (model.api === "anthropic-messages") {
+		const configured = compatBoolean(model.compat, "supportsToolReferences");
+		if (configured !== undefined) return configured;
+		if (model.provider !== "anthropic" || model.id.includes("haiku")) return false;
+		const version = model.id.match(/^claude-(?:opus|sonnet|fable)-(\d+)(?:-(\d+))?(?:-|$)/);
+		if (!version) return false;
+		const major = Number(version[1]);
+		const minor = version[2] && version[2].length < 8 ? Number(version[2]) : 0;
+		return major > 4 || (major === 4 && minor >= 5);
+	}
+	if (model.api === "openai-completions") {
+		return compatString(model.compat, "deferredToolsMode") === "kimi";
+	}
+	if (model.api === "openai-responses" || model.api === "openai-codex-responses") {
+		return (
+			compatBoolean(model.compat, "supportsAdditionalTools") === true ||
+			compatBoolean(model.compat, "supportsToolSearch") === true
 		);
-	pi.setActiveTools(unique([...active, CHROME_DEVTOOLS_LOAD_TOOL_NAME]));
+	}
+	return false;
 }
 
 export function availableChromeDevtoolsTools(pi: ExtensionAPI) {
+	const available = effectiveAvailableTools(pi);
+	return CHROME_DEVTOOLS_TOOL_NAMES.filter((name) => available.has(name));
+}
+
+export function configuredChromeDevtoolsTools(pi: ExtensionAPI) {
 	const available = availableToolsByApi.get(pi) ?? new Set();
 	return CHROME_DEVTOOLS_TOOL_NAMES.filter((name) => available.has(name));
 }
@@ -85,8 +158,9 @@ export function createChromeDevtoolsLoadTool(pi: ExtensionAPI) {
 				}),
 			),
 		}),
-		async execute(_toolCallId, params, signal) {
+		async execute(_toolCallId, params, signal, _onUpdate, ctx) {
 			signal?.throwIfAborted();
+			setChromeDevtoolsSessionOwner(pi, ctx.sessionManager);
 			const available = new Set(availableChromeDevtoolsTools(pi));
 			const matches = matchChromeDevtoolsTools(params.query, params.limit ?? 3, available);
 			const active = pi.getActiveTools();
@@ -138,6 +212,29 @@ function setAvailableTools(pi: ExtensionAPI, availableTools: readonly ChromeDevT
 	return available;
 }
 
+function effectiveAvailableTools(pi: ExtensionAPI) {
+	const configured = availableToolsByApi.get(pi) ?? new Set();
+	const owner = sessionOwnerByApi.get(pi);
+	const enabled = owner !== undefined && webMcpEnabled(owner);
+	return new Set(
+		CHROME_DEVTOOLS_TOOL_NAMES.filter(
+			(name) => configured.has(name) && (enabled || !isWebMcpToolName(name)),
+		),
+	);
+}
+
+function compatBoolean(value: unknown, key: string) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return undefined;
+	const record = value as Record<string, unknown>;
+	return typeof record[key] === "boolean" ? record[key] : undefined;
+}
+
+function compatString(value: unknown, key: string) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return undefined;
+	const record = value as Record<string, unknown>;
+	return typeof record[key] === "string" ? record[key] : undefined;
+}
+
 function unique(values: readonly string[]) {
 	return [...new Set(values)];
 }

package/src/menu.ts

@@ -1,10 +1,19 @@
 import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { defineMenu, runMenu, runTask } from "@narumitw/pi-tui-kit";
-import { browserLifecycleState, devToolsEndpoint, launchModeLabel } from "./browser-manager.js";
+import {
+	browserLifecycleState,
+	devToolsEndpoint,
+	launchAttemptLines,
+	launchModeLabel,
+} from "./browser-manager.js";
 import { availableChromeDevtoolsTools } from "./lazy-tools.js";
-import { state } from "./runtime.js";
+import { state, webMcpEnabled } from "./runtime.js";
 import { loadSettings, type SettingsLoadResult } from "./settings.js";
-import { CHROME_DEVTOOLS_TOOL_NAMES, type ChromeDevToolsToolName } from "./tool-names.js";
+import {
+	CHROME_DEVTOOLS_TOOL_NAMES,
+	type ChromeDevToolsToolName,
+	CORE_CHROME_DEVTOOLS_TOOL_NAMES,
+} from "./tool-names.js";
 import {
 	buildBrowserStatusMessage,
 	buildCommandGuide,
@@ -54,6 +63,14 @@ const TOOL_PRESENTATION: Record<ChromeDevToolsToolName, { label: string; descrip
 		label: "Capture a screenshot",
 		description: "Save a PNG of the selected page (chrome_devtools_screenshot).",
 	},
+	chrome_devtools_webmcp_list_tools: {
+		label: "List page WebMCP tools · Experimental",
+		description: "Discover page-provided WebMCP capabilities (chrome_devtools_webmcp_list_tools).",
+	},
+	chrome_devtools_webmcp_call_tool: {
+		label: "Call a page WebMCP tool · Experimental",
+		description: "Invoke a listed page tool after confirmation (chrome_devtools_webmcp_call_tool).",
+	},
 };
 
 export async function showChromeDevtoolsMenu(
@@ -71,7 +88,7 @@ export async function showChromeDevtoolsMenu(
 			main: ({ state: current }) => ({
 				kind: "actions",
 				title: "Chrome DevTools",
-				lines: mainStateLines(current),
+				lines: mainStateLines(current, ctx.sessionManager),
 				items: [
 					{
 						id: "tools",
@@ -84,13 +101,13 @@ export async function showChromeDevtoolsMenu(
 					{
 						id: "bulk",
 						label:
-							current.activeTools.length === CHROME_DEVTOOLS_TOOL_NAMES.length
+							current.activeTools.length === availableCatalogNames(ctx.sessionManager).length
 								? "Make all browser tools unavailable…"
 								: "Make all browser tools available…",
 						description:
-							current.activeTools.length === CHROME_DEVTOOLS_TOOL_NAMES.length
-								? "Preview 0 of 5; other active tools stay enabled."
-								: "Preview 5 of 5; other active tools stay enabled.",
+							current.activeTools.length === availableCatalogNames(ctx.sessionManager).length
+								? `Preview 0 of ${availableCatalogNames(ctx.sessionManager).length}; other active tools stay enabled.`
+								: `Preview ${availableCatalogNames(ctx.sessionManager).length} of ${availableCatalogNames(ctx.sessionManager).length}; other active tools stay enabled.`,
 						disabled: Boolean(current.mutationBlockedReason),
 						disabledReason: current.mutationBlockedReason,
 						action: "bulk",
@@ -119,7 +136,7 @@ export async function showChromeDevtoolsMenu(
 			browserStatus: () => ({
 				kind: "review",
 				title: "Browser status",
-				content: buildBrowserStatusMessage(),
+				content: buildBrowserStatusMessage(ctx.sessionManager),
 				format: { kind: "text" },
 				viewportSize: "adaptive",
 				hint: "back",
@@ -127,7 +144,7 @@ export async function showChromeDevtoolsMenu(
 			help: () => ({
 				kind: "review",
 				title: "Chrome DevTools help",
-				content: buildCommandGuide(),
+				content: buildCommandGuide(ctx.sessionManager),
 				format: { kind: "text" },
 				viewportSize: "adaptive",
 				hint: "back",
@@ -143,9 +160,9 @@ export async function showChromeDevtoolsMenu(
 			},
 			bulk: async ({ state: current }) => {
 				const selectedTools =
-					current.activeTools.length === CHROME_DEVTOOLS_TOOL_NAMES.length
+					current.activeTools.length === availableCatalogNames(ctx.sessionManager).length
 						? []
-						: [...CHROME_DEVTOOLS_TOOL_NAMES];
+						: availableCatalogNames(ctx.sessionManager);
 				const result = await showChromeDevtoolsToolWorkflow(pi, ctx, generation, {
 					snapshot: current,
 					initialDraft: selectedTools,
@@ -154,11 +171,14 @@ export async function showChromeDevtoolsMenu(
 				if (result?.applied && isCurrent()) updateSnapshotAfterApply(current, result.selectedTools);
 				return result?.closeParent ? { kind: "close" } : { kind: "stay" };
 			},
-			settings: async () => {
+			settings: async ({ state: current }) => {
 				const { showChromeDevtoolsBrowserSettings } = await import("./browser-settings-menu.js");
 				if (!isCurrent()) return { kind: "stay" };
-				const result = await showChromeDevtoolsBrowserSettings(ctx, generation);
+				const result = await showChromeDevtoolsBrowserSettings(pi, ctx, generation);
 				if (!isCurrent()) return { kind: "stay" };
+				const refreshed = await loadChromeDevtoolsMenuSnapshot(pi, ctx);
+				if (!isCurrent()) return { kind: "stay" };
+				Object.assign(current, refreshed);
 				return result.closeParent ? { kind: "close" } : { kind: "stay" };
 			},
 		},
@@ -204,9 +224,9 @@ export async function showChromeDevtoolsToolWorkflow(
 		screens: {
 			tools: ({ state: current }) => ({
 				kind: "multiSelect",
-				title: `Browser tools (${current.draft.size}/${CHROME_DEVTOOLS_TOOL_NAMES.length})`,
-				lines: toolDraftLines(current),
-				items: CHROME_DEVTOOLS_TOOL_NAMES.map((toolName) => ({
+				title: `Browser tools (${current.draft.size}/${availableCatalogNames(ctx.sessionManager).length})`,
+				lines: toolDraftLines(current, ctx.sessionManager),
+				items: availableCatalogNames(ctx.sessionManager).map((toolName) => ({
 					id: toolName,
 					label: TOOL_PRESENTATION[toolName].label,
 					description: TOOL_PRESENTATION[toolName].description,
@@ -249,10 +269,10 @@ export async function showChromeDevtoolsToolWorkflow(
 				kind: "review",
 				title: "Review tool changes",
 				lines: [
-					`Currently available: ${current.accepted.size}/${CHROME_DEVTOOLS_TOOL_NAMES.length}`,
-					`Proposed availability: ${current.draft.size}/${CHROME_DEVTOOLS_TOOL_NAMES.length}`,
+					`Currently available: ${current.accepted.size}/${availableCatalogNames(ctx.sessionManager).length}`,
+					`Proposed availability: ${current.draft.size}/${availableCatalogNames(ctx.sessionManager).length}`,
 				],
-				content: buildToolReview(current),
+				content: buildToolReview(current, ctx.sessionManager),
 				format: { kind: "text" },
 				viewportSize: "adaptive",
 				...(current.mutationBlockedReason || setsEqual(current.accepted, current.draft)
@@ -276,7 +296,7 @@ export async function showChromeDevtoolsToolWorkflow(
 				return { kind: "stay" };
 			},
 			selectAll: ({ state: current }) => {
-				current.draft = new Set(CHROME_DEVTOOLS_TOOL_NAMES);
+				current.draft = new Set(availableCatalogNames(ctx.sessionManager));
 				return { kind: "stay" };
 			},
 			selectNone: ({ state: current }) => {
@@ -306,7 +326,7 @@ export async function showChromeDevtoolsToolWorkflow(
 				current.draft = new Set(selectedTools);
 				current.applied = true;
 				ctx.ui.notify(
-					`Saved: ${selectedTools.length} of ${CHROME_DEVTOOLS_TOOL_NAMES.length} browser tools available to lazy-load.`,
+					`Saved: ${selectedTools.length} of ${availableCatalogNames(ctx.sessionManager).length} browser tools available.`,
 					"info",
 				);
 				return { kind: "close" };
@@ -349,6 +369,17 @@ async function loadSnapshotWithFeedback(pi: ExtensionAPI, ctx: CommandContext, g
 	return result.kind === "completed" ? result.value : undefined;
 }
 
+export async function loadChromeDevtoolsMenuSnapshot(
+	pi: ExtensionAPI,
+	ctx: ExtensionCommandContext,
+) {
+	const settings = await loadSettings({
+		cwd: ctx.cwd,
+		projectTrusted: ctx.isProjectTrusted(),
+	});
+	return buildMenuSnapshot(pi, settings);
+}
+
 function buildMenuSnapshot(pi: ExtensionAPI, settings: SettingsLoadResult): MenuSnapshot {
 	const activeTools = activeChromeTools(pi);
 	const persistedTools =
@@ -376,52 +407,56 @@ function buildMenuSnapshot(pi: ExtensionAPI, settings: SettingsLoadResult): Menu
 	};
 }
 
-function mainStateLines(snapshot: MenuSnapshot) {
+function mainStateLines(snapshot: MenuSnapshot, owner: object) {
+	const launchError = launchAttemptLines(owner).find((line) =>
+		line.startsWith("Last launch error:"),
+	);
 	return sanitizeLines([
-		`Lazy catalog: ${snapshot.activeTools.length} of ${CHROME_DEVTOOLS_TOOL_NAMES.length} available · ${snapshot.persistenceLabel}`,
-		`Browser: ${browserLifecycleSummary()}`,
-		`Endpoint: ${devToolsEndpoint()}`,
+		`Tool catalog: ${snapshot.activeTools.length} of ${availableCatalogNames(owner).length} available · ${snapshot.persistenceLabel}`,
+		`WebMCP: ${webMcpEnabled(owner) ? "enabled · experimental · confirmation required for every call" : "disabled · experimental"}`,
+		`Browser: ${browserLifecycleSummary(owner)}`,
+		`Endpoint: ${devToolsEndpoint(owner)}`,
 		...(snapshot.settingsWarning ? [`Settings warning: ${snapshot.settingsWarning}`] : []),
-		...(state.lastLaunchAttempt?.lastError
-			? [`Launch warning: ${state.lastLaunchAttempt.lastError}`]
-			: []),
+		...(launchError ? [`Launch warning: ${launchError.slice("Last launch error: ".length)}`] : []),
 	]);
 }
 
-function browserLifecycleSummary() {
-	const lifecycle = browserLifecycleState();
+function browserLifecycleSummary(owner: object) {
+	const lifecycle = browserLifecycleState(owner);
 	if (lifecycle === "starting") return "starting managed browser";
 	if (lifecycle === "running") return "managed browser running";
 	if (lifecycle === "exited") return "managed browser exited · open Browser status to recover";
 	if (lifecycle === "failed") return "last launch failed · open Browser status to recover";
-	const launchMode = launchModeLabel();
+	const launchMode = launchModeLabel(owner);
 	return launchMode.startsWith("attach first")
 		? "not started · attaches or launches on first use"
 		: `not started · ${launchMode}`;
 }
 
-function toolDraftLines(current: ToolWorkflowState) {
+function toolDraftLines(current: ToolWorkflowState, owner: object) {
 	if (current.mutationBlockedReason)
 		return sanitizeLines([`Unavailable: ${current.mutationBlockedReason}`]);
 	const changes = symmetricDifferenceSize(current.accepted, current.draft);
 	return [
-		`Currently available: ${current.accepted.size}/${CHROME_DEVTOOLS_TOOL_NAMES.length}`,
+		`Currently available: ${current.accepted.size}/${availableCatalogNames(owner).length}`,
 		changes === 0
 			? "No unapplied changes · Escape cancels"
 			: `${changes} unapplied ${changes === 1 ? "change" : "changes"} · Escape cancels`,
+		`WebMCP gateways: ${webMcpEnabled(owner) ? "available for selection · experimental" : "hidden while experimental WebMCP is disabled"}`,
 		"Changes are not applied until Review changes and Apply tool changes.",
 	];
 }
 
-function buildToolReview(current: ToolWorkflowState) {
-	const available = CHROME_DEVTOOLS_TOOL_NAMES.filter((name) => current.draft.has(name));
-	const unavailable = CHROME_DEVTOOLS_TOOL_NAMES.filter((name) => !current.draft.has(name));
+function buildToolReview(current: ToolWorkflowState, owner: object) {
+	const catalog = availableCatalogNames(owner);
+	const available = catalog.filter((name) => current.draft.has(name));
+	const unavailable = catalog.filter((name) => !current.draft.has(name));
 	return sanitizeChromeDevtoolsDisplay(
 		[
-			`Current available browser tools: ${current.accepted.size}/${CHROME_DEVTOOLS_TOOL_NAMES.length}`,
-			`Proposed available browser tools: ${current.draft.size}/${CHROME_DEVTOOLS_TOOL_NAMES.length}`,
+			`Current available browser tools: ${current.accepted.size}/${catalog.length}`,
+			`Proposed available browser tools: ${current.draft.size}/${catalog.length}`,
 			"",
-			"Available to lazy-load after apply:",
+			"Available after apply:",
 			...(available.length > 0
 				? available.map((name) => `  - ${TOOL_PRESENTATION[name].label} (${name})`)
 				: ["  - none"]),
@@ -432,7 +467,8 @@ function buildToolReview(current: ToolWorkflowState) {
 				: ["  - none"]),
 			"",
 			"Other active Pi tools remain unchanged.",
-			"Newly available tools remain deferred until chrome_devtools_load selects them.",
+			"Native-capable models defer these tools until chrome_devtools_load selects them.",
+			"Other models expose available tools eagerly before the next model request.",
 			"The accepted availability policy is saved for future sessions.",
 		].join("\n"),
 	);
@@ -477,6 +513,12 @@ function sanitizeLines(lines: readonly string[]) {
 	return sanitizeChromeDevtoolsDisplay(lines.join("\n")).split("\n");
 }
 
+function availableCatalogNames(owner: object): ChromeDevToolsToolName[] {
+	return webMcpEnabled(owner)
+		? [...CHROME_DEVTOOLS_TOOL_NAMES]
+		: [...CORE_CHROME_DEVTOOLS_TOOL_NAMES];
+}
+
 function formatError(error: unknown) {
 	return error instanceof Error ? error.message : String(error);
 }

package/src/render.ts

@@ -2,12 +2,15 @@ import type { AgentToolResult, ToolRenderResultOptions } from "@earendil-works/p
 
 const STATUS_KEY = "chrome-devtools";
 interface StatusContext {
+	sessionManager: object;
 	ui: { setStatus: (key: string, value: string | undefined) => void };
 }
 interface RenderTheme {
 	bold(text: string): string;
 	fg(color: string, text: string): string;
 }
+const activeStatuses = new WeakMap<object, Array<{ status: string; token: symbol }>>();
+
 interface RenderComponent {
 	invalidate(): void;
 	render(width: number): string[];
@@ -101,10 +104,18 @@ export async function withStatus<T>(
 	status: string,
 	callback: () => Promise<T>,
 ) {
+	const token = Symbol(status);
+	const statuses = activeStatuses.get(ctx.sessionManager) ?? [];
+	statuses.push({ status, token });
+	activeStatuses.set(ctx.sessionManager, statuses);
 	ctx.ui.setStatus(STATUS_KEY, status);
 	try {
 		return await callback();
 	} finally {
-		ctx.ui.setStatus(STATUS_KEY, undefined);
+		const index = statuses.findIndex((entry) => entry.token === token);
+		if (index >= 0) statuses.splice(index, 1);
+		const remaining = statuses.at(-1)?.status;
+		if (statuses.length === 0) activeStatuses.delete(ctx.sessionManager);
+		ctx.ui.setStatus(STATUS_KEY, remaining);
 	}
 }