@narumitw/pi-chrome-devtools 0.52.3 → 0.53.1

package/src/chrome-devtools.ts

@@ -1,14 +1,27 @@
 import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-import { shutdownManagedBrowser } from "./browser-manager.js";
+import {
+	shutdownManagedBrowser,
+	startManagedBrowserSession,
+	syncManagedBrowserSettings,
+} from "./browser-manager.js";
+import { setActivePageId } from "./cdp-client.js";
 import {
 	availableChromeDevtoolsTools,
 	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,
@@ -25,6 +38,8 @@ import {
 	navigateTool,
 	screenshotTool,
 	selectPageTool,
+	webMcpCallTool,
+	webMcpListToolsTool,
 } from "./tools.js";
 
 type CommandAction =
@@ -57,12 +72,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);
@@ -71,23 +89,39 @@ 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;
+		setActivePageId(ctx.sessionManager, undefined);
 		state.activePageId = undefined;
 		state.lastLaunchAttempt = undefined;
 		const projectTrusted = ctx.isProjectTrusted();
 		const settings = await loadSettings({ cwd: ctx.cwd, projectTrusted });
 		if (generation !== state.sessionGeneration) return;
 		applyRuntimeBrowserSettings(settings.effectiveBrowser, settings.paths, projectTrusted);
+		syncManagedBrowserSettings(ctx.sessionManager, settings.effectiveBrowser);
+		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
@@ -95,7 +129,11 @@ export default function chromeDevtools(pi: ExtensionAPI) {
 		configureChromeDevtoolsToolExposure(pi, availableTools, ctx.model);
 	});
 
-	pi.on("model_select", (event) => {
+	pi.on("model_select", (event, ctx) => {
+		invalidateWebMcpOperations(
+			ctx.sessionManager,
+			"Chrome DevTools model and tool exposure changed",
+		);
 		if (!supportsNativeDeferredToolLoading(event.model)) {
 			requireEagerChromeDevtoolsToolExposure(pi);
 		}
@@ -104,8 +142,12 @@ export default function chromeDevtools(pi: ExtensionAPI) {
 	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;
@@ -125,15 +167,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;
@@ -144,7 +186,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": {
@@ -157,7 +199,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");
@@ -170,7 +217,7 @@ async function handleChromeDevtoolsCommand(
 	ctx.ui.notify(
 		`Unknown /chrome-devtools command: ${args.trim()}
 
-${buildCommandGuide()}`,
+${buildCommandGuide(ctx.sessionManager)}`,
 		"warning",
 	);
 }

package/src/lazy-tools.ts

@@ -4,7 +4,12 @@ import {
 	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";
 
@@ -18,6 +23,7 @@ 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",
@@ -25,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());
@@ -41,7 +55,8 @@ export function configureChromeDevtoolsToolExposure(
 	availableTools: readonly ChromeDevToolsToolName[],
 	model?: ExtensionContext["model"],
 ) {
-	const available = setAvailableTools(pi, availableTools);
+	setAvailableTools(pi, availableTools);
+	const available = effectiveAvailableTools(pi);
 	const lazyExposure = supportsNativeDeferredToolLoading(model);
 	lazyExposureByApi.set(pi, lazyExposure);
 	const exposedTools = lazyExposure
@@ -66,7 +81,8 @@ 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()
@@ -110,6 +126,11 @@ export function supportsNativeDeferredToolLoading(model: ExtensionContext["model
 }
 
 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));
 }
@@ -137,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();
@@ -190,6 +212,17 @@ 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>;

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.`,
+					`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,50 +407,54 @@ 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([
-		`Tool 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 after apply:",
 			...(available.length > 0
@@ -478,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);
 	}
 }

package/src/runtime.ts

@@ -57,6 +57,7 @@ export interface ManagedBrowser {
 	exited: boolean;
 	ready: boolean;
 	ownerGeneration: number;
+	sessionOwner?: object;
 	cleanupPromise?: Promise<void>;
 }
 
@@ -98,6 +99,97 @@ export const state: ChromeDevToolsState = {
 	sessionController: new AbortController(),
 };
 
+interface WebMcpSessionRuntime {
+	controller: AbortController;
+	enabled: boolean;
+	controllers: Set<AbortController>;
+	generation: number;
+	sessionGeneration: number;
+}
+
+const webMcpRuntimeByOwner = new WeakMap<object, WebMcpSessionRuntime>();
+
+export function setWebMcpSessionOwner(owner: object) {
+	const runtime = webMcpRuntime(owner);
+	runtime.enabled = false;
+	runtime.sessionGeneration += 1;
+}
+
+export function beginWebMcpOperation(owner: object, toolSignal?: AbortSignal) {
+	const runtime = webMcpRuntime(owner);
+	const controller = new AbortController();
+	runtime.controllers.add(controller);
+	const signals = [controller.signal, runtime.controller.signal];
+	if (toolSignal) signals.push(toolSignal);
+	const signal = AbortSignal.any(signals);
+	return {
+		signal,
+		owner,
+		sessionGeneration: runtime.sessionGeneration,
+		webMcpGeneration: runtime.generation,
+		dispose() {
+			runtime.controllers.delete(controller);
+		},
+	};
+}
+
+export function invalidateWebMcpOperations(owner: object, reason: string) {
+	const runtime = webMcpRuntime(owner);
+	runtime.generation += 1;
+	const controllers = [...runtime.controllers];
+	runtime.controllers.clear();
+	const error = new DOMException(reason, "AbortError");
+	runtime.controller.abort(error);
+	runtime.controller = new AbortController();
+	for (const controller of controllers) controller.abort(error);
+}
+
+export function currentWebMcpGeneration(owner: object) {
+	return webMcpRuntime(owner).generation;
+}
+
+export function webMcpSessionSignal(owner: object) {
+	return webMcpRuntime(owner).controller.signal;
+}
+
+export function applyRuntimeWebMcpSetting(enabled: boolean, owner: object) {
+	const runtime = webMcpRuntime(owner);
+	if (runtime.enabled !== enabled) {
+		invalidateWebMcpOperations(owner, `WebMCP ${enabled ? "enabled" : "disabled"}`);
+	}
+	runtime.enabled = enabled;
+}
+
+export function webMcpEnabled(owner: object) {
+	return webMcpRuntime(owner).enabled;
+}
+
+export function webMcpOperationIsCurrent(operation: {
+	owner: object;
+	sessionGeneration: number;
+	webMcpGeneration: number;
+}) {
+	const runtime = webMcpRuntime(operation.owner);
+	return (
+		operation.sessionGeneration === runtime.sessionGeneration &&
+		operation.webMcpGeneration === runtime.generation
+	);
+}
+
+function webMcpRuntime(owner: object) {
+	const existing = webMcpRuntimeByOwner.get(owner);
+	if (existing) return existing;
+	const created: WebMcpSessionRuntime = {
+		controller: new AbortController(),
+		controllers: new Set(),
+		enabled: false,
+		generation: 0,
+		sessionGeneration: 0,
+	};
+	webMcpRuntimeByOwner.set(owner, created);
+	return created;
+}
+
 export function applyRuntimeBrowserSettings(
 	browser: EffectiveBrowserSettings,
 	paths: { user: string; project?: string },