chrome-devtools-frontend 1.0.1605219 → 1.0.1606789

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -4,7 +4,6 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
@@ -13,24 +12,28 @@ import * as Annotations from '../../annotations/annotations.js';
 import * as Emulation from '../../emulation/emulation.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {debugLog} from '../debug.js';
-import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
 import {ExtensionScope} from '../ExtensionScope.js';
-import {AI_ASSISTANCE_CSS_CLASS_NAME, FREESTYLER_WORLD_NAME} from '../injected.js';
+import {AI_ASSISTANCE_CSS_CLASS_NAME} from '../injected.js';
 
 import {
-  type AgentOptions as BaseAgentOptions,
   AiAgent,
   type ComputedStyleAiWidget,
   type ContextResponse,
   ConversationContext,
   type ConversationSuggestions,
   type FunctionCallHandlerResult,
-  type FunctionHandlerOptions,
   type MultimodalInput,
   MultimodalInputType,
   type RequestOptions,
   ResponseType
 } from './AiAgent.js';
+import {
+  type CreateExtensionScopeFunction,
+  executeJavaScriptFunction,
+  type ExecuteJsAgentOptions,
+  executeJsCode,
+  JavascriptExecutor
+} from './ExecuteJavascript.js';
 
 /*
 * Strings that don't need to be translated at this time.
@@ -69,10 +72,25 @@ First, examine the provided context, then use the functions to gather additional
 * Use functions available to you to investigate and fulfill the user request.
 * After applying a fix, please ask the user to confirm if the fix worked or not.
 * ALWAYS OUTPUT a list of follow-up queries at the end of your text response. The format is SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]. Make sure that the array and the \`SUGGESTIONS: \` text is in the same line. You're also capable of executing the fix for the issue user mentioned. Reflect this in your suggestions.
+* Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
 * **CRITICAL** NEVER write full Python programs - you should only write individual statements that invoke a single function from the provided library.
 * **CRITICAL** NEVER output text before a function call. Always do a function call first.
 * **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect \`position\`, \`display\` and ALL related properties.
-* **CRITICAL** You are a CSS/DOM/HTML debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.`;
+* **CRITICAL** You are a CSS/DOM/HTML debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.
+
+## Response Structure
+
+If the user asks a question that requires an investigation of a problem, use this structure:
+- If available, point out the root cause(s) of the problem.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+    - Example: "**Root Causes**:"
+      - [Reason 1]
+      - [Reason 2]
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestion**: [Suggestion 1]
+    - Example: "**Suggestions**:"
+      - [Suggestion 1]
+      - [Suggestion 2]`;
 
   const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
   if (greenDevEmulationEnabled) {
@@ -145,64 +163,8 @@ const MULTIMODAL_ENHANCEMENT_PROMPTS: Record<MultimodalInputType, string> = {
   [MultimodalInputType.UPLOADED_IMAGE]: promptForUploadedImage + considerationsForMultimodalInputEvaluation,
 };
 
-async function executeJsCode(
-    functionDeclaration: string,
-    {throwOnSideEffect, contextNode}: {throwOnSideEffect: boolean, contextNode: SDK.DOMModel.DOMNode|null}):
-    Promise<string> {
-  if (!contextNode) {
-    throw new Error('Cannot execute JavaScript because of missing context node');
-  }
-  const target = contextNode.domModel().target();
-
-  if (!target) {
-    throw new Error('Target is not found for executing code');
-  }
-
-  const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
-  const frameId = contextNode.frameId() ?? resourceTreeModel?.mainFrame?.id;
-
-  if (!frameId) {
-    throw new Error('Main frame is not found for executing code');
-  }
-
-  const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
-  const pageAgent = target.pageAgent();
-
-  // This returns previously created world if it exists for the frame.
-  const {executionContextId} = await pageAgent.invoke_createIsolatedWorld({frameId, worldName: FREESTYLER_WORLD_NAME});
-  const executionContext = runtimeModel?.executionContext(executionContextId);
-  if (!executionContext) {
-    throw new Error('Execution context is not found for executing code');
-  }
-
-  if (executionContext.debuggerModel.selectedCallFrame()) {
-    return formatError('Cannot evaluate JavaScript because the execution is paused on a breakpoint.');
-  }
-
-  const remoteObject = await contextNode.resolveToObject(undefined, executionContextId);
-  if (!remoteObject) {
-    throw new Error('Cannot execute JavaScript because remote object cannot be resolved');
-  }
-
-  return await EvaluateAction.execute(functionDeclaration, [remoteObject], executionContext, {throwOnSideEffect});
-}
-
-const MAX_OBSERVATION_BYTE_LENGTH = 25_000;
-const OBSERVATION_TIMEOUT = 5_000;
-
 export const AI_ASSISTANCE_FILTER_REGEX = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
 
-type CreateExtensionScopeFunction = (changes: ChangeManager) => {
-  install(): Promise<void>, uninstall(): Promise<void>,
-};
-
-interface AgentOptions extends BaseAgentOptions {
-  changeManager?: ChangeManager;
-
-  createExtensionScope?: CreateExtensionScopeFunction;
-  execJs?: typeof executeJsCode;
-}
-
 export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
   #node: SDK.DOMModel.DOMNode;
 
@@ -310,6 +272,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   }
 
   #execJs: typeof executeJsCode;
+  #javascriptExecutor: JavascriptExecutor;
 
   #changes: ChangeManager;
   #createExtensionScope: CreateExtensionScopeFunction;
@@ -317,7 +280,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   #greenDevEmulationAxTree: string|null = null;
   #currentTurnId = 0;
 
-  constructor(opts: AgentOptions) {
+  constructor(opts: ExecuteJsAgentOptions) {
     super(opts);
 
     this.#changes = opts.changeManager || new ChangeManager();
@@ -326,6 +289,14 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
         opts.createExtensionScope ?? ((changes: ChangeManager) => {
           return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null, this.#currentTurnId);
         });
+    this.#javascriptExecutor = new JavascriptExecutor(
+        {
+          executionMode: this.executionMode,
+          getContextNode: () => this.#getSelectedNode(),
+          createExtensionScope: this.#createExtensionScope.bind(this),
+          changes: this.#changes,
+        },
+        this.#execJs);
 
     this.declareFunction<{
       elements: number[],
@@ -378,91 +349,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       },
     });
 
-    this.declareFunction<{
-      title: string,
-      explanation: string,
-      code: string,
-    }>('executeJavaScript', {
-      description:
-          `This function allows you to run JavaScript code on the inspected page to access the element styles and page content.
-Call this function to gather additional information or modify the page state. Call this function enough times to investigate the user request.`,
-      parameters: {
-        type: Host.AidaClient.ParametersTypes.OBJECT,
-        description: '',
-        nullable: false,
-        properties: {
-          code: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description:
-                `JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.
-
-# Instructions
-
-* To return data, define a top-level \`data\` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to \`data\`.
-* If you modify styles on an element, ALWAYS call the pre-defined global \`async setElementStyles(el: Element, styles: object)\` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.
-* **CRITICAL** Only get styles that might be relevant to the user request.
-* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.
-* **CRITICAL** Consider that \`data\` variable from the previous function calls are not available in a new function call.
-
-For example, the code to change element styles:
-
-\`\`\`
-await setElementStyles($0, {
-  color: 'blue',
-});
-\`\`\`
-
-For example, the code to get overlapping elements:
-
-\`\`\`
-const data = {
-  overlappingElements: Array.from(document.querySelectorAll('*'))
-    .filter(el => {
-      const rect = el.getBoundingClientRect();
-      const popupRect = $0.getBoundingClientRect();
-      return (
-        el !== $0 &&
-        rect.left < popupRect.right &&
-        rect.right > popupRect.left &&
-        rect.top < popupRect.bottom &&
-        rect.bottom > popupRect.top
-      );
-    })
-    .map(el => ({
-      tagName: el.tagName,
-      id: el.id,
-      className: el.className,
-      zIndex: window.getComputedStyle(el)['z-index']
-    }))
-};
-\`\`\`
-`,
-          },
-          explanation: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'Explain why you want to run this code',
-          },
-          title: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'Provide a summary of what the code does. For example, "Checking related element styles".',
-          },
-        },
-        required: ['code', 'explanation', 'title']
-      },
-      displayInfoFromArgs: params => {
-        return {
-          title: params.title,
-          thought: params.explanation,
-          action: params.code,
-        };
-      },
-      handler: async (
-          params,
-          options,
-          ) => {
-        return await this.executeAction(params.code, options);
-      },
-    });
+    this.declareFunction('executeJavaScript', executeJavaScriptFunction(this.#javascriptExecutor));
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       this.declareFunction<{
@@ -528,68 +415,6 @@ const data = {
     });
   }
 
-  async generateObservation(
-      action: string,
-      {
-        throwOnSideEffect,
-      }: {
-        throwOnSideEffect: boolean,
-      },
-      ): Promise<{
-    observation: string,
-    sideEffect: boolean,
-    canceled: boolean,
-  }> {
-    const functionDeclaration = `async function ($0) {
-  try {
-    ${action}
-    ;
-    return ((typeof data !== "undefined") ? data : undefined);
-  } catch (error) {
-    return error;
-  }
-}`;
-    try {
-      const result = await Promise.race([
-        this.#execJs(
-            functionDeclaration,
-            {
-              throwOnSideEffect,
-              contextNode: this.context?.getItem() || null,
-            },
-            ),
-        new Promise<never>((_, reject) => {
-          setTimeout(
-              () => reject(new Error('Script execution exceeded the maximum allowed time.')), OBSERVATION_TIMEOUT);
-        }),
-      ]);
-      const byteCount = Platform.StringUtilities.countWtf8Bytes(result);
-      Host.userMetrics.freestylerEvalResponseSize(byteCount);
-      if (byteCount > MAX_OBSERVATION_BYTE_LENGTH) {
-        throw new Error('Output exceeded the maximum allowed length.');
-      }
-      return {
-        observation: result,
-        sideEffect: false,
-        canceled: false,
-      };
-    } catch (error) {
-      if (error instanceof SideEffectError) {
-        return {
-          observation: error.message,
-          sideEffect: true,
-          canceled: false,
-        };
-      }
-
-      return {
-        observation: `Error: ${error.message}`,
-        sideEffect: false,
-        canceled: false,
-      };
-    }
-  }
-
   static async describeElement(element: SDK.DOMModel.DOMNode): Promise<string> {
     let output = `* Element's uid is ${element.backendNodeId()}.
 * Its selector is \`${element.simpleSelector()}\``;
@@ -742,74 +567,6 @@ const data = {
     };
   }
 
-  async executeAction(action: string, options?: FunctionHandlerOptions): Promise<FunctionCallHandlerResult<unknown>> {
-    debugLog(`Action to execute: ${action}`);
-
-    if (options?.approved === false) {
-      return {
-        error: 'Error: User denied code execution with side effects.',
-      };
-    }
-
-    if (this.executionMode === Root.Runtime.HostConfigFreestylerExecutionMode.NO_SCRIPTS) {
-      return {
-        error: 'Error: JavaScript execution is currently disabled.',
-      };
-    }
-
-    const selectedNode = this.#getSelectedNode();
-    if (!selectedNode) {
-      return {error: 'Error: no selected node found.'};
-    }
-    const target = selectedNode.domModel().target();
-    if (target.model(SDK.DebuggerModel.DebuggerModel)?.selectedCallFrame()) {
-      return {
-        error: 'Error: Cannot evaluate JavaScript because the execution is paused on a breakpoint.',
-      };
-    }
-
-    const scope = this.#createExtensionScope(this.#changes);
-    await scope.install();
-    try {
-      let throwOnSideEffect = true;
-      if (options?.approved) {
-        throwOnSideEffect = false;
-      }
-
-      const result = await this.generateObservation(action, {throwOnSideEffect});
-      debugLog(`Action result: ${JSON.stringify(result)}`);
-      if (result.sideEffect) {
-        if (this.executionMode === Root.Runtime.HostConfigFreestylerExecutionMode.SIDE_EFFECT_FREE_SCRIPTS_ONLY) {
-          return {
-            error: 'Error: JavaScript execution that modifies the page is currently disabled.',
-          };
-        }
-
-        if (options?.signal?.aborted) {
-          return {
-            error: 'Error: evaluation has been cancelled',
-          };
-        }
-
-        return {
-          requiresApproval: true,
-          description: lockedString('This code may modify page content. Continue?'),
-        };
-      }
-      if (result.canceled) {
-        return {
-          error: result.observation,
-        };
-      }
-
-      return {
-        result: result.observation,
-      };
-    } finally {
-      await scope.uninstall();
-    }
-  }
-
   async addElementAnnotation(elementId: string, annotationMessage: string):
       Promise<FunctionCallHandlerResult<unknown>> {
     if (!Annotations.AnnotationRepository.annotationsEnabled()) {

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -19,7 +19,6 @@ import * as AiHistoryStorage from './AiHistoryStorage.js';
 import * as AiUtils from './AiUtils.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
-import * as ConversationHandler from './ConversationHandler.js';
 import * as FileFormatter from './data_formatters/FileFormatter.js';
 import * as LighthouseFormatter from './data_formatters/LighthouseFormatter.js';
 import * as NetworkRequestFormatter from './data_formatters/NetworkRequestFormatter.js';
@@ -48,7 +47,6 @@ export {
   BuiltInAi,
   ChangeManager,
   ContextSelectionAgent,
-  ConversationHandler,
   ConversationSummaryAgent,
   Debug,
   EvaluateAction,

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7402,11 +7402,7 @@ export const NativeFunctions = [
   },
   {
     name: "registerTool",
-    signatures: [["tool"]]
-  },
-  {
-    name: "unregisterTool",
-    signatures: [["name"]]
+    signatures: [["tool","?options"]]
   },
   {
     name: "SnapEvent",

package/front_end/models/web_mcp/WebMCPModel.ts

@@ -0,0 +1,187 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../../core/common/common.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as Bindings from '../bindings/bindings.js';
+import type * as StackTrace from '../stack_trace/stack_trace.js';
+
+export const enum Events {
+  TOOLS_ADDED = 'ToolsAdded',
+  TOOLS_REMOVED = 'ToolsRemoved',
+  TOOL_INVOKED = 'ToolInvoked',
+  TOOL_RESPONDED = 'ToolResponded',
+}
+
+export interface Call {
+  invocationId: string;
+  tool: Tool;
+  input: string;
+  result?: {
+    status: Protocol.WebMCP.InvocationStatus,
+    output?: unknown,
+    errorText?: string,
+    exception?: Protocol.Runtime.RemoteObject,
+  };
+}
+
+export class Tool {
+  #protocolTool: Readonly<Protocol.WebMCP.Tool>;
+  #stackTrace?: Promise<StackTrace.StackTrace.StackTrace>;
+  #target: WeakRef<SDK.Target.Target>;
+
+  constructor(tool: Protocol.WebMCP.Tool, target: SDK.Target.Target) {
+    this.#target = new WeakRef(target);
+    this.#protocolTool = tool;
+    this.#stackTrace = tool.stackTrace &&
+        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createStackTraceFromProtocolRuntime(
+            tool.stackTrace, target);
+  }
+
+  get stackTrace(): Promise<StackTrace.StackTrace.StackTrace>|undefined {
+    return this.#stackTrace;
+  }
+
+  get name(): string {
+    return this.#protocolTool.name;
+  }
+
+  get description(): string {
+    return this.#protocolTool.description;
+  }
+
+  get frame(): SDK.ResourceTreeModel.ResourceTreeFrame|undefined {
+    return this.#target.deref()
+               ?.model(SDK.ResourceTreeModel.ResourceTreeModel)
+               ?.frameForId(this.#protocolTool.frameId) ??
+        undefined;
+  }
+
+  get isDeclarative(): boolean {
+    return Boolean(this.#protocolTool.backendNodeId);
+  }
+
+  get node(): SDK.DOMModel.DeferredDOMNode|undefined {
+    const target = this.#target.deref();
+    return this.#protocolTool.backendNodeId && target &&
+        new SDK.DOMModel.DeferredDOMNode(target, this.#protocolTool.backendNodeId);
+  }
+}
+export interface EventTypes {
+  [Events.TOOLS_ADDED]: readonly Tool[];
+  [Events.TOOLS_REMOVED]: readonly Tool[];
+  [Events.TOOL_INVOKED]: Call;
+  [Events.TOOL_RESPONDED]: Call;
+}
+
+export class WebMCPModel extends SDK.SDKModel.SDKModel<EventTypes> implements ProtocolProxyApi.WebMCPDispatcher {
+  readonly #tools = new Map<Protocol.Page.FrameId, Map<string, Tool>>();
+  readonly #calls = new Map<string, Call>();
+  readonly agent: ProtocolProxyApi.WebMCPApi;
+  #enabled = false;
+
+  constructor(target: SDK.Target.Target) {
+    super(target);
+    this.agent = target.webMCPAgent();
+    target.registerWebMCPDispatcher(this);
+
+    const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
+    if (runtimeModel) {
+      runtimeModel.addEventListener(
+          SDK.RuntimeModel.Events.ExecutionContextDestroyed, this.#executionContextDestroyed, this);
+    }
+
+    void this.enable();
+  }
+
+  get tools(): IteratorObject<Tool> {
+    return this.#tools.values().flatMap(toolMap => toolMap.values());
+  }
+
+  get toolCalls(): Call[] {
+    return [...this.#calls.values()];
+  }
+
+  clearCalls(): void {
+    this.#calls.clear();
+  }
+
+  async enable(): Promise<void> {
+    if (this.#enabled) {
+      return;
+    }
+    await this.agent.invoke_enable();
+    this.#enabled = true;
+  }
+
+  #executionContextDestroyed(event: Common.EventTarget.EventTargetEvent<SDK.RuntimeModel.ExecutionContext>): void {
+    const executionContext = event.data;
+    if (executionContext.isDefault && executionContext.frameId) {
+      const frameTools = this.#tools.get(executionContext.frameId);
+      if (frameTools) {
+        const toolsToRemove = [...frameTools.values()];
+        this.#tools.delete(executionContext.frameId);
+        this.dispatchEventToListeners(Events.TOOLS_REMOVED, toolsToRemove);
+      }
+    }
+  }
+
+  toolsRemoved(params: Protocol.WebMCP.ToolsRemovedEvent): void {
+    const deletedTools = [];
+    for (const protocolTool of params.tools) {
+      const tool = this.#tools.get(protocolTool.frameId)?.get(protocolTool.name);
+      if (tool) {
+        this.#tools.get(protocolTool.frameId)?.delete(protocolTool.name);
+        deletedTools.push(tool);
+      }
+    }
+    this.dispatchEventToListeners(Events.TOOLS_REMOVED, deletedTools);
+  }
+
+  toolsAdded(params: Protocol.WebMCP.ToolsAddedEvent): void {
+    const addedTools = [];
+    for (const protocolTool of params.tools) {
+      const tool = new Tool(protocolTool, this.target());
+      const frameTools = this.#tools.get(protocolTool.frameId) ?? new Map();
+      if (!this.#tools.has(protocolTool.frameId)) {
+        this.#tools.set(protocolTool.frameId, frameTools);
+      }
+      frameTools.set(tool.name, tool);
+      addedTools.push(tool);
+    }
+    this.dispatchEventToListeners(Events.TOOLS_ADDED, addedTools);
+  }
+
+  toolInvoked(params: Protocol.WebMCP.ToolInvokedEvent): void {
+    const tool = this.#tools.get(params.frameId)?.get(params.toolName);
+    if (!tool) {
+      return;
+    }
+    const call: Call = {
+      invocationId: params.invocationId,
+      input: params.input,
+      tool,
+    };
+    this.#calls.set(params.invocationId, call);
+    this.dispatchEventToListeners(Events.TOOL_INVOKED, call);
+  }
+
+  toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void {
+    const call = this.#calls.get(params.invocationId);
+    if (!call) {
+      return;
+    }
+    call.result = {
+      status: params.status,
+      output: params.output,
+      errorText: params.errorText,
+      exception: params.exception,
+    };
+    this.dispatchEventToListeners(Events.TOOL_RESPONDED, call);
+  }
+}
+
+SDK.SDKModel.SDKModel.register(WebMCPModel, {capabilities: SDK.Target.Capability.WEB_MCP, autostart: true});

package/front_end/models/web_mcp/web_mcp.ts

@@ -0,0 +1,9 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as WebMCPModel from './WebMCPModel.js';
+
+export {
+  WebMCPModel,
+};

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -29,6 +29,7 @@ import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
+import {AccessibilityAgentMarkdownRenderer} from './components/AccessibilityAgentMarkdownRenderer.js';
 import {
   type AnswerPart,
   ChatMessageEntity,
@@ -363,6 +364,11 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
     const resourceTreeModel = domModel?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
     const mainFrameId = resourceTreeModel?.mainFrame?.id;
     return new StylingAgentMarkdownRenderer(mainFrameId);
+  } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY) {
+    const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
+    const resourceTreeModel = domModel?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const mainFrameId = resourceTreeModel?.mainFrame?.id;
+    return new AccessibilityAgentMarkdownRenderer(mainFrameId);
   }
 
   return new MarkdownRendererWithCodeBlock();
@@ -1281,7 +1287,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
-    return this.#changeManager.formatChangesForPatching(this.#conversation.id, /* includeSourceLocation= */ true);
+    const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
+    return this.#changeManager.formatChangesForPatching(this.#conversation.id, /* includeMetadata= */ !hasAiV2);
   }
 
   override async performUpdate(): Promise<void> {

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -4,6 +4,7 @@
 
 export * from './AiAssistancePanel.js';
 export * from './components/ChatView.js';
+export * from './components/AccessibilityAgentMarkdownRenderer.js';
 export * as ChatInput from './components/ChatInput.js';
 export * from './components/MarkdownRendererWithCodeBlock.js';
 export * from './SelectWorkspaceDialog.js';