@narumitw/pi-chrome-devtools 0.52.3 → 0.53.1

package/src/settings.ts

@@ -61,6 +61,7 @@ export interface ResolvedChromeDevToolsSettings {
 	tools?: ChromeDevToolsToolName[];
 	updatedAt?: number;
 	browser: EffectiveBrowserSettings;
+	webmcp: { enabled: boolean };
 }
 
 export interface SettingsLoadOptions {
@@ -74,6 +75,7 @@ export type UserSettingsFileStatus =
 
 interface SettingsLoadBase {
 	effectiveBrowser: EffectiveBrowserSettings;
+	effectiveWebMcpEnabled: boolean;
 	paths: { user: string; project?: string };
 	userFile: UserSettingsFileStatus;
 	warnings: string[];
@@ -94,6 +96,7 @@ interface NormalizedSettingsDocument {
 	tools?: ChromeDevToolsToolName[];
 	updatedAt?: number;
 	browser?: UserBrowserSettings;
+	webmcp?: { enabled: boolean };
 }
 
 interface SettingsDocumentResult {
@@ -165,7 +168,8 @@ export async function loadSettings(options: SettingsLoadOptions = {}): Promise<S
 	const recognized =
 		settings.tools !== undefined ||
 		user.normalized?.browser !== undefined ||
-		project.normalized?.browser !== undefined;
+		project.normalized?.browser !== undefined ||
+		user.normalized?.webmcp !== undefined;
 	const invalidReasons = [user, project]
 		.filter((result) => result.kind === "invalid")
 		.map((result) => result.reason)
@@ -179,6 +183,7 @@ export async function loadSettings(options: SettingsLoadOptions = {}): Promise<S
 			: { kind: user.kind };
 	const base = {
 		effectiveBrowser,
+		effectiveWebMcpEnabled: settings.webmcp.enabled,
 		paths,
 		userFile,
 		warnings,
@@ -200,6 +205,7 @@ function resolveSettings(
 	return {
 		...(user?.tools ? { tools: user.tools, updatedAt: user.updatedAt } : {}),
 		browser,
+		webmcp: { enabled: user?.webmcp?.enabled ?? false },
 	};
 }
 
@@ -293,7 +299,7 @@ async function readSettingsDocument(
 		return { kind: "invalid", reason, warnings: [`Chrome DevTools settings ignored: ${reason}`] };
 	}
 
-	const scopeWarnings = projectMachineSettingsWarnings(parsed, scope, filePath);
+	const scopeWarnings = projectOwnedSettingsWarnings(parsed, scope, filePath);
 	try {
 		const normalized = await normalizeSettingsDocument(parsed, scope, filePath, cwd);
 		return { kind: "valid", document: { ...parsed }, normalized, warnings: scopeWarnings };
@@ -307,19 +313,27 @@ async function readSettingsDocument(
 	}
 }
 
-function projectMachineSettingsWarnings(
+function projectOwnedSettingsWarnings(
 	document: Record<string, unknown>,
 	scope: "project" | "user",
 	filePath: string,
 ) {
-	if (scope !== "project" || !isRecord(document.browser)) return [];
-	const browser = document.browser;
-	return ["endpoint", "autoLaunch", "executablePath"]
-		.filter((field) => browser[field] !== undefined)
-		.map(
-			(field) =>
-				`Chrome DevTools project browser.${field} ignored in ${filePath}; configure this machine-owned setting in ${settingsFilePath()}.`,
+	if (scope !== "project") return [];
+	const browser = isRecord(document.browser) ? document.browser : undefined;
+	const warnings = browser
+		? ["endpoint", "autoLaunch", "executablePath"]
+				.filter((field) => browser[field] !== undefined)
+				.map(
+					(field) =>
+						`Chrome DevTools project browser.${field} ignored in ${filePath}; configure this machine-owned setting in ${settingsFilePath()}.`,
+				)
+		: [];
+	if (document.webmcp !== undefined) {
+		warnings.push(
+			`Chrome DevTools project webmcp settings ignored in ${filePath}; only the user settings file may enable experimental WebMCP.`,
 		);
+	}
+	return warnings;
 }
 
 async function normalizeSettingsDocument(
@@ -346,6 +360,13 @@ async function normalizeSettingsDocument(
 		normalized.browser = await normalizeBrowserSection(document.browser, scope, filePath, cwd);
 	}
 
+	if (scope === "user" && document.webmcp !== undefined) {
+		if (!isRecord(document.webmcp) || typeof document.webmcp.enabled !== "boolean") {
+			throw new Error("expected webmcp.enabled to be a boolean");
+		}
+		normalized.webmcp = { enabled: document.webmcp.enabled };
+	}
+
 	return normalized;
 }
 
@@ -526,6 +547,22 @@ export function saveSettings(
 	);
 }
 
+export function saveWebMcpSettings(
+	enabled: boolean,
+	operations: Partial<SettingsFileOperations> = {},
+): Promise<void> {
+	return queueSettingsMutation(
+		(current) => ({
+			...current,
+			webmcp: {
+				...(isRecord(current.webmcp) ? current.webmcp : {}),
+				enabled,
+			},
+		}),
+		operations,
+	);
+}
+
 export function saveBrowserSettings(
 	patch: BrowserSettingsPatch,
 	operations: Partial<SettingsFileOperations> = {},

package/src/tool-names.ts

@@ -1,4 +1,4 @@
-export const CHROME_DEVTOOLS_TOOL_NAMES = [
+export const CORE_CHROME_DEVTOOLS_TOOL_NAMES = [
 	"chrome_devtools_list_pages",
 	"chrome_devtools_select_page",
 	"chrome_devtools_navigate",
@@ -6,4 +6,19 @@ export const CHROME_DEVTOOLS_TOOL_NAMES = [
 	"chrome_devtools_screenshot",
 ] as const;
 
+export const WEBMCP_TOOL_NAMES = [
+	"chrome_devtools_webmcp_list_tools",
+	"chrome_devtools_webmcp_call_tool",
+] as const;
+
+export const CHROME_DEVTOOLS_TOOL_NAMES = [
+	...CORE_CHROME_DEVTOOLS_TOOL_NAMES,
+	...WEBMCP_TOOL_NAMES,
+] as const;
+
 export type ChromeDevToolsToolName = (typeof CHROME_DEVTOOLS_TOOL_NAMES)[number];
+export type WebMcpToolName = (typeof WEBMCP_TOOL_NAMES)[number];
+
+export function isWebMcpToolName(value: string): value is WebMcpToolName {
+	return WEBMCP_TOOL_NAMES.includes(value as WebMcpToolName);
+}

package/src/tool-selector.ts

@@ -3,12 +3,14 @@ import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-c
 import {
 	browserCandidateHint,
 	browserLifecycleState,
+	browserSettingsForOwner,
 	devToolsEndpoint,
 	endpointConfigHint,
 	endpointSourceLabel,
 	launchAttemptLines,
 	launchHint,
 	launchModeLabel,
+	managedBrowserForOwner,
 } from "./browser-manager.js";
 import {
 	applyAvailableChromeDevtoolsTools,
@@ -16,9 +18,14 @@ import {
 	CHROME_DEVTOOLS_LOAD_TOOL_NAME,
 	chromeDevtoolsToolExposureMode,
 } from "./lazy-tools.js";
-import { state } from "./runtime.js";
+import { invalidateWebMcpOperations, state, webMcpEnabled } from "./runtime.js";
 import { loadSettings, saveSettings, settingsFilePath } 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,
+	isWebMcpToolName,
+} from "./tool-names.js";
 
 type CommandContext = ExtensionCommandContext;
 
@@ -35,6 +42,7 @@ interface ToolStatusSummary {
 	availableChromeToolCount: number;
 	loadedChromeToolCount: number;
 	activeNonChromeToolCount: number;
+	capabilityCount: number;
 }
 
 type ToolSelectionSaveResult = "saved" | "active-tools-changed" | "failed";
@@ -48,7 +56,7 @@ export async function updateChromeDevtoolsTools(
 	const generation = state.sessionGeneration;
 	const result = await transactSelectedTools(pi, ctx, selectedTools, generation);
 	if (result !== "saved" || generation !== state.sessionGeneration) return;
-	const status = await buildToolStatusMessage(pi);
+	const status = await buildToolStatusMessage(pi, ctx.sessionManager);
 	if (generation !== state.sessionGeneration) return;
 	ctx.ui.notify(`Chrome DevTools tool catalog ${action}.\n\n${status}`, "info");
 }
@@ -109,6 +117,14 @@ async function transactSelectedToolsNow(
 	const previousActiveTools = pi.getActiveTools();
 	const previousAvailableTools = availableChromeDevtoolsTools(pi);
 	try {
+		const previousWebMcpTools = previousAvailableTools.filter(isWebMcpToolName);
+		const selectedWebMcpTools = selectedTools.filter(isWebMcpToolName);
+		if (!arraysEqual(previousWebMcpTools, selectedWebMcpTools)) {
+			invalidateWebMcpOperations(
+				ctx.sessionManager,
+				"Chrome DevTools WebMCP gateway availability changed",
+			);
+		}
 		applyChromeDevtoolsTools(pi, selectedTools);
 		await persistSettings(selectedTools);
 		return expectedGeneration === state.sessionGeneration ? "saved" : "failed";
@@ -154,7 +170,7 @@ export function applyChromeDevtoolsTools(
 	applyAvailableChromeDevtoolsTools(pi, selectedTools);
 }
 
-function getToolStatusSummary(pi: ExtensionAPI): ToolStatusSummary {
+function getToolStatusSummary(pi: ExtensionAPI, owner: object): ToolStatusSummary {
 	const chromeToolNames = new Set<string>(CHROME_DEVTOOLS_TOOL_NAMES);
 	const activeToolNames = new Set(pi.getActiveTools());
 	const loadedChromeToolCount = CHROME_DEVTOOLS_TOOL_NAMES.filter((name) =>
@@ -164,8 +180,9 @@ function getToolStatusSummary(pi: ExtensionAPI): ToolStatusSummary {
 	const activeNonChromeToolCount = Array.from(activeToolNames).filter(
 		(name) => !chromeToolNames.has(name) && name !== CHROME_DEVTOOLS_LOAD_TOOL_NAME,
 	).length;
+	const capabilityCount = effectiveCatalog(owner).length;
 	const availabilityStatus =
-		availableChromeToolCount === CHROME_DEVTOOLS_TOOL_NAMES.length
+		availableChromeToolCount === capabilityCount
 			? "enabled"
 			: availableChromeToolCount === 0
 				? "disabled"
@@ -176,36 +193,40 @@ function getToolStatusSummary(pi: ExtensionAPI): ToolStatusSummary {
 		availableChromeToolCount,
 		loadedChromeToolCount,
 		activeNonChromeToolCount,
+		capabilityCount,
 	};
 }
 
-export async function buildToolStatusMessage(pi: ExtensionAPI) {
-	const summary = getToolStatusSummary(pi);
+export async function buildToolStatusMessage(pi: ExtensionAPI, owner: object) {
+	const summary = getToolStatusSummary(pi, owner);
 	const persistedSetting = await persistedSettingLabel();
 	return sanitizeChromeDevtoolsDisplay(
 		[
 			`Chrome DevTools tools available: ${formatRuntimeStatus(summary)}`,
 			`Tool exposure: ${chromeDevtoolsToolExposureMode(pi)}`,
-			`Loaded capability tools this session: ${summary.loadedChromeToolCount}/${CHROME_DEVTOOLS_TOOL_NAMES.length}`,
+			`Loaded capability tools this session: ${summary.loadedChromeToolCount}/${summary.capabilityCount}`,
+			`WebMCP: ${webMcpEnabled(owner) ? "enabled · experimental · confirmation required for every call" : "disabled · experimental"}`,
 			`Loader: ${pi.getActiveTools().includes(CHROME_DEVTOOLS_LOAD_TOOL_NAME) ? "active" : "inactive"}`,
 			`Persisted tool catalog: ${persistedSetting}`,
-			...browserSettingsStatusLines(),
+			...browserSettingsStatusLines(owner),
 			...(state.settingsNotice ? [`Settings note: ${state.settingsNotice}`] : []),
 			`Other active tools preserved: ${summary.activeNonChromeToolCount}`,
-			`Endpoint: ${devToolsEndpoint()}`,
-			`Endpoint source: ${endpointSourceLabel()}`,
-			`Launch mode: ${launchModeLabel()}`,
-			...launchAttemptLines(),
+			`Endpoint: ${devToolsEndpoint(owner)}`,
+			`Endpoint source: ${endpointSourceLabel(owner)}`,
+			`Launch mode: ${launchModeLabel(owner)}`,
+			...launchAttemptLines(owner),
 		].join("\n"),
 	);
 }
 
-export function buildQuickstartMessage() {
-	return buildSettingsSetupMessage();
+export function buildQuickstartMessage(owner: object) {
+	return buildSettingsSetupMessage(owner);
 }
 
-export function buildBrowserStatusMessage() {
-	const lifecycle = browserLifecycleState();
+export function buildBrowserStatusMessage(owner?: object) {
+	const browser = browserSettingsForOwner(owner);
+	const lifecycle = browserLifecycleState(owner);
+	const webMcpIsEnabled = owner ? webMcpEnabled(owner) : false;
 	const browserState =
 		lifecycle === "starting"
 			? "starting managed browser"
@@ -221,36 +242,46 @@ export function buildBrowserStatusMessage() {
 		[
 			`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
+			`Endpoint: ${devToolsEndpoint(owner)}`,
+			`Endpoint source: ${endpointSourceLabel(owner)}`,
+			`Launch mode: ${launchModeLabel(owner)}`,
+			`Unpacked extensions: ${browser.extensionPaths.length} (${browser.extensionPathsSource})`,
+			`WebMCP: ${webMcpIsEnabled ? "enabled · experimental" : "disabled · experimental"}`,
+			...(webMcpIsEnabled && !managedBrowserForOwner(owner)?.ready
+				? [
+						"WebMCP warning: attached browser profiles may contain everyday authenticated sessions and sensitive state.",
+					]
+				: []),
+			...(browser.extensionPaths.length > 0
 				? ["Unpacked extensions execute trusted browser code in an isolated managed browser."]
 				: []),
-			...launchAttemptLines(),
-			...(needsRecovery ? [launchHint(), endpointConfigHint()] : []),
+			...launchAttemptLines(owner),
+			...(needsRecovery ? [launchHint(owner), endpointConfigHint()] : []),
 		].join("\n"),
 	);
 }
 
-export function buildSettingsSetupMessage() {
+export function buildSettingsSetupMessage(owner: object) {
 	return sanitizeChromeDevtoolsDisplay(
 		[
-			`Chrome DevTools endpoint: ${devToolsEndpoint()}`,
-			`Endpoint source: ${endpointSourceLabel()}`,
-			`Launch mode: ${launchModeLabel()}`,
-			...browserSettingsStatusLines(),
-			launchHint(),
-			browserCandidateHint(),
-			...launchAttemptLines(),
+			`Chrome DevTools endpoint: ${devToolsEndpoint(owner)}`,
+			`Endpoint source: ${endpointSourceLabel(owner)}`,
+			`Launch mode: ${launchModeLabel(owner)}`,
+			...browserSettingsStatusLines(owner),
+			launchHint(owner),
+			browserCandidateHint(owner),
+			...launchAttemptLines(owner),
 			endpointConfigHint(),
 		].join("\n"),
 	);
 }
 
 export function sanitizeChromeDevtoolsDisplay(value: string, maxCharacters = 50_000) {
-	const sanitized = Array.from(stripVTControlCharacters(value), (character) => {
+	const withoutBidi = stripVTControlCharacters(value).replace(
+		/[\u202a-\u202e\u2066-\u2069]/gu,
+		"�",
+	);
+	const sanitized = Array.from(withoutBidi, (character) => {
 		const codePoint = character.codePointAt(0) ?? 0;
 		const unsafeControl =
 			(codePoint >= 0 && codePoint <= 8) ||
@@ -262,10 +293,12 @@ export function sanitizeChromeDevtoolsDisplay(value: string, maxCharacters = 50_
 	return `${sanitized.slice(0, Math.max(0, maxCharacters - 1))}…`;
 }
 
-function browserSettingsStatusLines() {
+function browserSettingsStatusLines(owner: object) {
+	const browser = browserSettingsForOwner(owner);
+	const extensionPaths = browser.extensionPaths;
 	const extensionLines =
-		state.extensionPaths.length > 0
-			? state.extensionPaths.map((extensionPath) => `  - ${extensionPath}`)
+		extensionPaths.length > 0
+			? extensionPaths.map((extensionPath) => `  - ${extensionPath}`)
 			: ["  - none"];
 	return [
 		`Settings file: ${state.settingsFilePath ?? settingsFilePath()} (user)`,
@@ -274,12 +307,13 @@ function browserSettingsStatusLines() {
 					`Project settings: ${state.projectSettingsFilePath} (${state.projectSettingsTrusted ? "trusted" : "untrusted; ignored"})`,
 				]
 			: []),
-		`Auto-launch: ${state.autoLaunchEnabled ? "on" : "off"} (${state.autoLaunchSource})`,
-		`Browser executable: ${state.browserExecutable ?? "automatic discovery"} (${state.browserExecutableSource})`,
-		`Unpacked extensions (${state.extensionPathsSource}):`,
+		`Auto-launch: ${browser.autoLaunchEnabled ? "on" : "off"} (${browser.autoLaunchSource})`,
+		`Browser executable: ${browser.executablePath ?? "automatic discovery"} (${browser.executablePathSource})`,
+		`Unpacked extensions (${browser.extensionPathsSource}):`,
 		...extensionLines,
+		`WebMCP: ${webMcpEnabled(owner) ? "enabled · experimental · every call requires confirmation" : "disabled · experimental"}`,
 		"Confirmed menu settings apply before the next browser connection; manual JSON edits require /reload or session replacement.",
-		...(state.extensionPaths.length > 0
+		...(extensionPaths.length > 0
 			? [
 					"Unpacked extensions require Chrome for Testing or Chromium and execute trusted browser code.",
 				]
@@ -287,9 +321,10 @@ function browserSettingsStatusLines() {
 	];
 }
 
-export function buildCommandGuide() {
+export function buildCommandGuide(owner: object) {
 	return [
 		"Chrome DevTools commands:",
+		`WebMCP: ${webMcpEnabled(owner) ? "enabled" : "disabled"} · experimental · every page-provided call requires confirmation`,
 		"/chrome-devtools — open this menu",
 		"/chrome-devtools help — show command usage",
 		"/chrome-devtools quickstart — show endpoint and launch help",
@@ -302,8 +337,8 @@ export function buildCommandGuide() {
 	].join("\n");
 }
 
-export function allChromeDevtoolsTools() {
-	return [...CHROME_DEVTOOLS_TOOL_NAMES];
+export function allChromeDevtoolsTools(owner: object) {
+	return effectiveCatalog(owner);
 }
 
 export function orderedChromeDevtoolsTools(selectedTools: ReadonlySet<ChromeDevToolsToolName>) {
@@ -311,7 +346,7 @@ export function orderedChromeDevtoolsTools(selectedTools: ReadonlySet<ChromeDevT
 }
 
 function formatRuntimeStatus(summary: ToolStatusSummary) {
-	return `${summary.availabilityStatus} (${summary.availableChromeToolCount}/${CHROME_DEVTOOLS_TOOL_NAMES.length} available)`;
+	return `${summary.availabilityStatus} (${summary.availableChromeToolCount}/${summary.capabilityCount} available)`;
 }
 
 async function persistedSettingLabel() {
@@ -334,6 +369,12 @@ function formatPersistedSelection(tools: readonly ChromeDevToolsToolName[]) {
 	return `${tools.length}/${CHROME_DEVTOOLS_TOOL_NAMES.length} selected: ${tools.join(", ")}`;
 }
 
+function effectiveCatalog(owner: object): ChromeDevToolsToolName[] {
+	return webMcpEnabled(owner)
+		? [...CHROME_DEVTOOLS_TOOL_NAMES]
+		: [...CORE_CHROME_DEVTOOLS_TOOL_NAMES];
+}
+
 async function persistSettings(selectedTools: readonly ChromeDevToolsToolName[]) {
 	await saveSettings({ tools: [...selectedTools], updatedAt: Date.now() });
 }

package/src/tools.ts

@@ -6,13 +6,13 @@ import {
 	listPages,
 	resolvePage,
 	resolvePageForNavigation,
+	setActivePageId,
 	textResult,
 	withCdp,
 } from "./cdp-client.js";
 import { renderScreenshotResult, renderTextResult, renderToolCall, withStatus } from "./render.js";
-import { state } from "./runtime.js";
 import { formatScreenshotText, saveScreenshot, throwIfAborted } from "./screenshot.js";
-import { CHROME_DEVTOOLS_TOOL_NAMES } from "./tool-names.js";
+import { CHROME_DEVTOOLS_TOOL_NAMES, WEBMCP_TOOL_NAMES } from "./tool-names.js";
 
 export const listPagesTool = defineTool({
 	name: CHROME_DEVTOOLS_TOOL_NAMES[0],
@@ -21,9 +21,9 @@ export const listPagesTool = defineTool({
 	parameters: Type.Object({}),
 	renderCall: renderToolCall("list pages"),
 	renderResult: renderTextResult,
-	async execute(_toolCallId, _params, _signal, _onUpdate, ctx) {
+	async execute(_toolCallId, _params, signal, _onUpdate, ctx) {
 		return withStatus(ctx, "list pages", async () => {
-			const pages = await listPages();
+			const pages = await listPages({ sessionOwner: ctx.sessionManager, signal });
 			return textResult(JSON.stringify(pages.map(formatPage), null, 2), { pages });
 		});
 	},
@@ -38,10 +38,10 @@ export const selectPageTool = defineTool({
 	}),
 	renderCall: renderToolCall("select page"),
 	renderResult: renderTextResult,
-	async execute(_toolCallId, params, _signal, _onUpdate, ctx) {
+	async execute(_toolCallId, params, signal, _onUpdate, ctx) {
 		return withStatus(ctx, "select page", async () => {
-			const page = await getPage(params.pageId);
-			state.activePageId = page.id;
+			const page = await getPage(params.pageId, { sessionOwner: ctx.sessionManager, signal });
+			setActivePageId(ctx.sessionManager, page.id);
 			return textResult(`Selected page ${page.id}: ${page.title}\n${page.url}`, {
 				page: formatPage(page),
 			});
@@ -62,15 +62,18 @@ export const navigateTool = defineTool({
 	}),
 	renderCall: renderToolCall("navigate"),
 	renderResult: renderTextResult,
-	async execute(_toolCallId, params, _signal, _onUpdate, ctx) {
+	async execute(_toolCallId, params, signal, _onUpdate, ctx) {
 		return withStatus(ctx, "navigate", async () => {
-			const { created, page } = await resolvePageForNavigation(params.pageId);
+			const { created, page } = await resolvePageForNavigation(params.pageId, {
+				sessionOwner: ctx.sessionManager,
+				signal,
+			});
 			const result = await withCdp(page, async (client) => {
 				await client.send("Page.enable");
 				return client.send("Page.navigate", { url: params.url });
 			});
 
-			state.activePageId = page.id;
+			setActivePageId(ctx.sessionManager, page.id);
 			const action = created ? "Created page and navigated" : "Navigated";
 			return textResult(`${action} ${page.id} to ${params.url}`, {
 				created,
@@ -96,9 +99,12 @@ export const evaluateTool = defineTool({
 	}),
 	renderCall: renderToolCall("evaluate"),
 	renderResult: renderTextResult,
-	async execute(_toolCallId, params, _signal, _onUpdate, ctx) {
+	async execute(_toolCallId, params, signal, _onUpdate, ctx) {
 		return withStatus(ctx, "evaluate", async () => {
-			const page = await resolvePage(params.pageId);
+			const page = await resolvePage(params.pageId, {
+				sessionOwner: ctx.sessionManager,
+				signal,
+			});
 			const result = await withCdp(page, (client) =>
 				client.send("Runtime.evaluate", {
 					expression: params.expression,
@@ -107,12 +113,79 @@ export const evaluateTool = defineTool({
 				}),
 			);
 
-			state.activePageId = page.id;
+			setActivePageId(ctx.sessionManager, page.id);
 			return textResult(JSON.stringify(result, null, 2), { page: formatPage(page), result });
 		});
 	},
 });
 
+export const webMcpListToolsTool = defineTool({
+	name: WEBMCP_TOOL_NAMES[0],
+	label: "Chrome DevTools: List WebMCP Tools (Experimental)",
+	description:
+		"List bounded page-provided WebMCP tool descriptors from the selected Chrome page through the experimental CDP WebMCP domain. Definitions remain in this tool result and are never registered as dynamic Pi tools.",
+	parameters: Type.Object({
+		pageId: Type.Optional(
+			Type.String({
+				description: "Optional page id. Defaults to selected or first page.",
+				maxLength: 512,
+			}),
+		),
+	}),
+	renderCall: renderToolCall("list WebMCP tools"),
+	renderResult: renderTextResult,
+	async execute(_toolCallId, params, signal, _onUpdate, ctx) {
+		return withStatus(ctx, "list WebMCP tools", async () => {
+			const implementation = await import("./webmcp/tools.js");
+			return implementation.executeWebMcpListTool(params, signal, ctx);
+		});
+	},
+});
+
+export const webMcpCallTool = defineTool({
+	name: WEBMCP_TOOL_NAMES[1],
+	label: "Chrome DevTools: Call WebMCP Tool (Experimental)",
+	description:
+		"Call one previously listed page-provided WebMCP tool after exact page, document, frame, origin, schema, annotation, and session revalidation. Every call requires observable user confirmation and output is bounded to Pi's 50 KB or 2,000-line limit.",
+	parameters: Type.Object({
+		sessionGeneration: Type.String({
+			description: "Session generation token returned by chrome_devtools_webmcp_list_tools.",
+			maxLength: 100,
+		}),
+		pageId: Type.String({ description: "Page id returned by the list tool.", maxLength: 512 }),
+		documentId: Type.String({
+			description: "Document loader id returned by the list tool.",
+			maxLength: 512,
+		}),
+		frameId: Type.String({ description: "Frame id returned by the list tool.", maxLength: 512 }),
+		frameOrigin: Type.String({
+			description: "Exact frame origin returned by the list tool.",
+			maxLength: 2_048,
+		}),
+		toolName: Type.String({
+			description: "Exact tool name returned by the list tool.",
+			maxLength: 512,
+		}),
+		schemaDigest: Type.String({
+			description: "Schema and annotation digest returned by the list tool.",
+			minLength: 64,
+			maxLength: 64,
+			pattern: "^[a-f0-9]{64}$",
+		}),
+		input: Type.Record(Type.String(), Type.Unknown(), {
+			description: "JSON object matching the page-provided input schema.",
+		}),
+	}),
+	renderCall: renderToolCall("call WebMCP tool"),
+	renderResult: renderTextResult,
+	async execute(_toolCallId, params, signal, _onUpdate, ctx) {
+		return withStatus(ctx, "call WebMCP tool", async () => {
+			const implementation = await import("./webmcp/tools.js");
+			return implementation.executeWebMcpCallTool(params, signal, ctx);
+		});
+	},
+});
+
 export const screenshotTool = defineTool({
 	name: CHROME_DEVTOOLS_TOOL_NAMES[4],
 	label: "Chrome DevTools: Screenshot",
@@ -135,7 +208,10 @@ export const screenshotTool = defineTool({
 	renderResult: renderScreenshotResult,
 	async execute(_toolCallId, params, signal, _onUpdate, ctx) {
 		return withStatus(ctx, "screenshot", async () => {
-			const page = await resolvePage(params.pageId);
+			const page = await resolvePage(params.pageId, {
+				sessionOwner: ctx.sessionManager,
+				signal,
+			});
 			const result = await withCdp(page, async (client) => {
 				throwIfAborted(signal);
 				await client.send("Page.enable");
@@ -162,7 +238,7 @@ export const screenshotTool = defineTool({
 				});
 			});
 
-			state.activePageId = page.id;
+			setActivePageId(ctx.sessionManager, page.id);
 			const savedScreenshot = await saveScreenshot(result.data, params.savePath, ctx.cwd, signal);
 			return {
 				content: [