chrome-devtools-frontend 1.0.1605219 → 1.0.1606789

package/front_end/Images/src/dots-circle.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_367_65863)">
+<path d="M5.2 8.875C5.44306 8.875 5.64722 8.79236 5.8125 8.62708C5.9875 8.45208 6.075 8.24306 6.075 8C6.075 7.75694 5.9875 7.55278 5.8125 7.3875C5.64722 7.2125 5.44306 7.125 5.2 7.125C4.95694 7.125 4.74792 7.2125 4.57292 7.3875C4.40764 7.55278 4.325 7.75694 4.325 8C4.325 8.24306 4.40764 8.45208 4.57292 8.62708C4.74792 8.79236 4.95694 8.875 5.2 8.875ZM8 8.875C8.24306 8.875 8.44722 8.79236 8.6125 8.62708C8.7875 8.45208 8.875 8.24306 8.875 8C8.875 7.75694 8.7875 7.55278 8.6125 7.3875C8.44722 7.2125 8.24306 7.125 8 7.125C7.75694 7.125 7.54792 7.2125 7.37292 7.3875C7.20764 7.55278 7.125 7.75694 7.125 8C7.125 8.24306 7.20764 8.45208 7.37292 8.62708C7.54792 8.79236 7.75694 8.875 8 8.875ZM10.8 8.875C11.0431 8.875 11.2472 8.79236 11.4125 8.62708C11.5875 8.45208 11.675 8.24306 11.675 8C11.675 7.75694 11.5875 7.55278 11.4125 7.3875C11.2472 7.2125 11.0431 7.125 10.8 7.125C10.5569 7.125 10.3479 7.2125 10.1729 7.3875C10.0076 7.55278 9.925 7.75694 9.925 8C9.925 8.24306 10.0076 8.45208 10.1729 8.62708C10.3479 8.79236 10.5569 8.875 10.8 8.875ZM8 13.6C7.23194 13.6 6.50764 13.4542 5.82708 13.1625C5.14653 12.8708 4.54861 12.4722 4.03333 11.9667C3.52778 11.4514 3.12917 10.8535 2.8375 10.1729C2.54583 9.49236 2.4 8.76806 2.4 8C2.4 7.22222 2.54583 6.49792 2.8375 5.82708C3.12917 5.14653 3.52778 4.55347 4.03333 4.04792C4.54861 3.53264 5.14653 3.12917 5.82708 2.8375C6.50764 2.54583 7.23194 2.4 8 2.4C8.77778 2.4 9.50208 2.54583 10.1729 2.8375C10.8535 3.12917 11.4465 3.53264 11.9521 4.04792C12.4674 4.55347 12.8708 5.14653 13.1625 5.82708C13.4542 6.49792 13.6 7.22222 13.6 8C13.6 8.76806 13.4542 9.49236 13.1625 10.1729C12.8708 10.8535 12.4674 11.4514 11.9521 11.9667C11.4465 12.4722 10.8535 12.8708 10.1729 13.1625C9.50208 13.4542 8.77778 13.6 8 13.6ZM8 12.55C9.26389 12.55 10.3382 12.1076 11.2229 11.2229C12.1076 10.3382 12.55 9.26389 12.55 8C12.55 6.73611 12.1076 5.66181 11.2229 4.77708C10.3382 3.89236 9.26389 3.45 8 3.45C6.73611 3.45 5.66181 3.89236 4.77708 4.77708C3.89236 5.66181 3.45 6.73611 3.45 8C3.45 9.26389 3.89236 10.3382 4.77708 11.2229C5.66181 12.1076 6.73611 12.55 8 12.55Z" fill="#474747"/>
+</g>
+<defs>
+<clipPath id="clip0_367_65863">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/core/host/UserMetrics.ts

@@ -815,7 +815,6 @@ export enum DevtoolsExperiments {
   'live-heap-profile' = 11,
   'protocol-monitor' = 13,
   'sampling-heap-profiler-timeline' = 17,
-  'show-option-to-expose-internals-in-heap-snapshot' = 18,
   'timeline-invalidation-tracking' = 26,
   'timeline-show-all-events' = 27,
   apca = 39,

package/front_end/core/platform/api/HostRuntime.ts

@@ -25,21 +25,24 @@ export interface Worker {
   set onerror(listener: (event: any) => void);
 }
 
+type WorkerMessagePort = typeof MessagePort.prototype;
+
 /**
- * Currently we ony transfer MessagePorts to workers, but it's possible to add
+ * Currently we only transfer MessagePorts to workers, but it's possible to add
  * more things (like ReadableStream) as long as it's present in all runtimes.
  */
-export type WorkerTransferable = typeof MessagePort.prototype;
+export type WorkerTransferable = WorkerMessagePort;
 
 /**
  * Used by workers to communicate with their parent.
  */
 export interface WorkerScope {
   postMessage(message: unknown): void;
-  set onmessage(listener: (event: WorkerMessageEvent) => void);
+  set onmessage(listener: (event: WorkerMessageEvent) => Promise<void>| void);
 }
 
-export interface WorkerMessageEvent {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly data: any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface WorkerMessageEvent<T = any> {
+  readonly data: T;
+  ports: readonly WorkerMessagePort[];
 }

package/front_end/core/platform/browser/HostRuntime.ts

@@ -9,8 +9,8 @@ class WebWorkerScope implements Api.HostRuntime.WorkerScope {
     self.postMessage(message);
   }
 
-  set onmessage(listener: (event: Api.HostRuntime.WorkerMessageEvent) => void) {
-    self.onmessage = listener;
+  set onmessage(listener: (event: Api.HostRuntime.WorkerMessageEvent) => Promise<void>| void) {
+    self.addEventListener('message', listener);
   }
 }
 

package/front_end/core/platform/node/HostRuntime.ts

@@ -12,8 +12,8 @@ class NodeWorkerScope implements Api.HostRuntime.WorkerScope {
   }
 
   set onmessage(listener: (event: Api.HostRuntime.WorkerMessageEvent) => void) {
-    WorkerThreads.parentPort?.on('message', data => {
-      listener({data});
+    WorkerThreads.parentPort?.addEventListener('message', msg => {
+      listener(msg as unknown as Api.HostRuntime.WorkerMessageEvent);
     });
   }
 }
@@ -36,10 +36,10 @@ class NodeWorker implements Api.HostRuntime.Worker {
     });
   }
 
-  postMessage(message: unknown): void {
+  postMessage(message: unknown, transfer?: Api.HostRuntime.WorkerTransferable[]): void {
     void this.#workerPromise.then(worker => {
       if (!this.#disposed) {
-        worker.postMessage(message);
+        worker.postMessage(message, transfer);
       }
     });
   }
@@ -56,11 +56,11 @@ class NodeWorker implements Api.HostRuntime.Worker {
     this.dispose();
   }
 
-  set onmessage(listener: (event: unknown) => void) {
+  set onmessage(listener: (event: Api.HostRuntime.WorkerMessageEvent) => void) {
     void this.#workerPromise.then(worker => {
-      worker.on('message', data => {
+      worker.on('message', (data: unknown) => {
         if (!this.#disposed) {
-          listener({data});
+          listener({data, ports: []});
         }
       });
     });

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -351,6 +351,10 @@ export class TargetBase {
     return this.getAgent('CacheStorage');
   }
 
+  crashReportContextAgent(): ProtocolProxyApi.CrashReportContextApi {
+    return this.getAgent('CrashReportContext');
+  }
+
   cssAgent(): ProtocolProxyApi.CSSApi {
     return this.getAgent('CSS');
   }

package/front_end/core/root/ExperimentNames.ts

@@ -8,7 +8,6 @@ export enum ExperimentName {
   LIVE_HEAP_PROFILE = 'live-heap-profile',
   PROTOCOL_MONITOR = 'protocol-monitor',
   SAMPLING_HEAP_PROFILER_TIMELINE = 'sampling-heap-profiler-timeline',
-  SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT = 'show-option-to-expose-internals-in-heap-snapshot',
   TIMELINE_INVALIDATION_TRACKING = 'timeline-invalidation-tracking',
   TIMELINE_SHOW_ALL_EVENTS = 'timeline-show-all-events',
   APCA = 'apca',

package/front_end/core/sdk/CrashReportContextModel.ts

@@ -0,0 +1,28 @@
+// 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 ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import {SDKModel} from './SDKModel.js';
+import {Capability, type Target} from './Target.js';
+
+export class CrashReportContextModel extends SDKModel<void> {
+  readonly #agent: ProtocolProxyApi.CrashReportContextApi;
+
+  constructor(target: Target) {
+    super(target);
+    this.#agent = target.crashReportContextAgent();
+  }
+
+  async getEntries(): Promise<Protocol.CrashReportContext.CrashReportContextEntry[]|null> {
+    const response = await this.#agent.invoke_getEntries();
+    if (response.getError()) {
+      return null;
+    }
+    return response.entries;
+  }
+}
+
+SDKModel.register(CrashReportContextModel, {capabilities: Capability.JS, autostart: false});

package/front_end/core/sdk/sdk.ts

@@ -22,6 +22,7 @@ import * as CookieModel from './CookieModel.js';
 import * as CookieParser from './CookieParser.js';
 import * as CPUProfilerModel from './CPUProfilerModel.js';
 import * as CPUThrottlingManager from './CPUThrottlingManager.js';
+import * as CrashReportContextModel from './CrashReportContextModel.js';
 import * as CSSContainerQuery from './CSSContainerQuery.js';
 import * as CSSFontFace from './CSSFontFace.js';
 import * as CSSLayer from './CSSLayer.js';
@@ -90,7 +91,6 @@ import * as Target from './Target.js';
 import * as TargetManager from './TargetManager.js';
 import * as TraceObject from './TraceObject.js';
 import * as WebAuthnModel from './WebAuthnModel.js';
-import * as WebMCPModel from './WebMCPModel.js';
 
 export {
   AccessibilityModel,
@@ -106,6 +106,7 @@ export {
   CookieParser,
   CPUProfilerModel,
   CPUThrottlingManager,
+  CrashReportContextModel,
   CSSContainerQuery,
   CSSFontFace,
   CSSLayer,
@@ -174,5 +175,4 @@ export {
   TargetManager,
   TraceObject,
   WebAuthnModel,
-  WebMCPModel,
 };

package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshotWorkerDispatcher.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as PlatformApi from '../../core/platform/api/api.js';
 import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
 
 // We mirror what heap_snapshot_worker.ts does, but we can't use it here as we'd have a
@@ -33,9 +34,8 @@ export class HeapSnapshotWorkerDispatcher {
     this.#postMessage({eventName: name, data});
   }
 
-  async dispatchMessage({data, ports}:
-                            {data: HeapSnapshotModel.HeapSnapshotModel.WorkerCommand, ports: readonly MessagePort[]}):
-      Promise<void> {
+  async dispatchMessage({data, ports}: PlatformApi.HostRuntime
+                            .WorkerMessageEvent<HeapSnapshotModel.HeapSnapshotModel.WorkerCommand>): Promise<void> {
     const response: DispatcherResponse = {
       callId: data.callId,
       result: null,

package/front_end/entrypoints/heap_snapshot_worker/heap_snapshot_worker-entrypoint.ts

@@ -1,10 +1,11 @@
 // Copyright 2020 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 Platform from '../../core/platform/platform.js';
 
 import * as HeapSnapshotWorker from './heap_snapshot_worker.js';
 
-const dispatcher =
-    new HeapSnapshotWorker.HeapSnapshotWorkerDispatcher.HeapSnapshotWorkerDispatcher(self.postMessage.bind(self));
-self.addEventListener('message', dispatcher.dispatchMessage.bind(dispatcher), false);
-self.postMessage('workerReady');
+const dispatcher = new HeapSnapshotWorker.HeapSnapshotWorkerDispatcher.HeapSnapshotWorkerDispatcher(
+    Platform.HostRuntime.HOST_RUNTIME.workerScope.postMessage.bind(Platform.HostRuntime.HOST_RUNTIME.workerScope));
+Platform.HostRuntime.HOST_RUNTIME.workerScope.onmessage = dispatcher.dispatchMessage.bind(dispatcher);
+Platform.HostRuntime.HOST_RUNTIME.workerScope.postMessage('workerReady');

package/front_end/entrypoints/main/MainImpl.ts

@@ -121,10 +121,6 @@ const UIStrings = {
    * @description Text describing how to navigate the dock side menu
    */
   dockSideNavigation: 'Use left and right arrow keys to navigate the options',
-  /**
-   * @description Notification shown to the user whenever DevTools receives an external request.
-   */
-  externalRequestReceived: '`DevTools` received an external request',
   /**
    * @description Notification shown to the user whenever DevTools has finished downloading a local AI model.
    */
@@ -360,9 +356,6 @@ export class MainImpl {
         Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR, protocolMonitorExperiment);
     Root.Runtime.experiments.register(
         Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE, 'Sampling heap profiler timeline');
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT,
-        'Show option to expose internals in heap snapshots');
 
     // Timeline
     Root.Runtime.experiments.register(
@@ -581,14 +574,6 @@ export class MainImpl {
       });
     }
 
-    const conversationHandler = AiAssistanceModel.ConversationHandler.ConversationHandler.instance();
-    conversationHandler.addEventListener(
-        AiAssistanceModel.ConversationHandler.ConversationHandlerEvents.EXTERNAL_REQUEST_RECEIVED,
-        () => Snackbar.Snackbar.Snackbar.show({message: i18nString(UIStrings.externalRequestReceived)}));
-    conversationHandler.addEventListener(
-        AiAssistanceModel.ConversationHandler.ConversationHandlerEvents.EXTERNAL_CONVERSATION_STARTED,
-        event => void VisualLogging.logFunctionCall(`start-conversation-${event.data}`, 'external'));
-
     if (Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled) {
       await PanelCommon.GeminiRebrandPromoDialog.maybeShow();
     }
@@ -1104,89 +1089,3 @@ export class ReloadActionDelegate implements UI.ActionRegistration.ActionDelegat
     return false;
   }
 }
-
-type ExternalRequestInput = {
-  kind: 'LIVE_STYLE_DEBUGGER',
-  args: {prompt: string, selector: string},
-}|{
-  kind: 'PERFORMANCE_RELOAD_GATHER_INSIGHTS',
-}|{
-  kind: 'PERFORMANCE_ANALYZE',
-  args: {prompt: string},
-}|{
-  kind: 'NETWORK_DEBUGGER',
-  args: {requestUrl: string, prompt: string},
-};
-
-/**
- * For backwards-compatibility we iterate over the generator and drop the
- * intermediate results. The final response is transformed to its legacy type.
- * Instead of sending responses of type error, errors are throws.
- **/
-export async function handleExternalRequest(input: ExternalRequestInput):
-    Promise<{response: string, devToolsLogs: object[]}> {
-  const generator = await handleExternalRequestGenerator(input);
-  let result: IteratorResult<
-      AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse>;
-  do {
-    result = await generator.next();
-  } while (!result.done);
-  const response = result.value;
-  if (response.type === AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR) {
-    throw new Error(response.message);
-  }
-  if (response.type === AiAssistanceModel.AiAgent.ExternalRequestResponseType.ANSWER) {
-    return {
-      response: response.message,
-      devToolsLogs: response.devToolsLogs,
-    };
-  }
-  throw new Error('Received no response of type answer or type error');
-}
-
-// @ts-expect-error
-globalThis.handleExternalRequest = handleExternalRequest;
-
-export async function handleExternalRequestGenerator(input: ExternalRequestInput): Promise<AsyncGenerator<
-    AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse>> {
-  switch (input.kind) {
-    case 'PERFORMANCE_RELOAD_GATHER_INSIGHTS': {
-      const TimelinePanel = await import('../../panels/timeline/timeline.js');
-      return TimelinePanel.TimelinePanel.TimelinePanel.handleExternalRecordRequest();
-    }
-    case 'PERFORMANCE_ANALYZE': {
-      const TimelinePanel = await import('../../panels/timeline/timeline.js');
-      return await TimelinePanel.TimelinePanel.TimelinePanel.handleExternalAnalyzeRequest(input.args.prompt);
-    }
-    case 'NETWORK_DEBUGGER': {
-      const AiAssistanceModel = await import('../../models/ai_assistance/ai_assistance.js');
-      const conversationHandler = AiAssistanceModel.ConversationHandler.ConversationHandler.instance();
-      return await conversationHandler.handleExternalRequest({
-        conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK,
-        prompt: input.args.prompt,
-        requestUrl: input.args.requestUrl,
-      });
-    }
-    case 'LIVE_STYLE_DEBUGGER': {
-      const AiAssistanceModel = await import('../../models/ai_assistance/ai_assistance.js');
-      const conversationHandler = AiAssistanceModel.ConversationHandler.ConversationHandler.instance();
-      return await conversationHandler.handleExternalRequest({
-        conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
-        prompt: input.args.prompt,
-        selector: input.args.selector,
-      });
-    }
-  }
-  // eslint-disable-next-line require-yield
-  return (async function*(): AsyncGenerator<
-          AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse> {
-    return {
-      type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-      // @ts-expect-error
-      message: `Debugging with an agent of type '${input.kind}' is not implemented yet.`,
-    };
-  })();
-}
-
-// @ts-expect-error
-globalThis.handleExternalRequestGenerator = handleExternalRequestGenerator;

package/front_end/models/ai_assistance/ChangeManager.ts

@@ -117,11 +117,11 @@ export class ChangeManager {
     return content;
   }
 
-  formatChangesForPatching(groupId: string, includeSourceLocation = false): string {
+  formatChangesForPatching(groupId: string, includeMetadata = false): string {
     return Array.from(this.#stylesheetChanges.values())
         .flatMap(
             changesPerStylesheet => changesPerStylesheet.filter(change => change.groupId === groupId)
-                                        .map(change => this.#formatChange(change, includeSourceLocation)))
+                                        .map(change => this.#formatChange(change, includeMetadata)))
         .filter(change => change !== '')
         .join('\n\n');
   }
@@ -150,13 +150,13 @@ ${formatStyles(change.styles, 4)}
         .join('\n');
   }
 
-  #formatChange(change: Change, includeSourceLocation = false): string {
+  #formatChange(change: Change, includeMetadata = false): string {
     const sourceLocation =
-        includeSourceLocation && change.sourceLocation ? `/* related resource: ${change.sourceLocation} */\n` : '';
-    // TODO: includeSourceLocation indicates whether we are using Patch
+        includeMetadata && change.sourceLocation ? `/* related resource: ${change.sourceLocation} */\n` : '';
+    // TODO: includeMetadata indicates whether we are using Patch
     // agent. If needed we can have an separate knob.
     const simpleSelector =
-        includeSourceLocation && change.simpleSelector ? ` /* the element was ${change.simpleSelector} */` : '';
+        includeMetadata && change.simpleSelector ? ` /* the element was ${change.simpleSelector} */` : '';
     return `${sourceLocation}${change.selector} {${simpleSelector}
 ${formatStyles(change.styles)}
 }`;

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

@@ -7,18 +7,27 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as LHModel from '../../lighthouse/lighthouse.js';
+import {ChangeManager} from '../ChangeManager.js';
 import {LighthouseFormatter} from '../data_formatters/LighthouseFormatter.js';
 import {debugLog} from '../debug.js';
+import {ExtensionScope} from '../ExtensionScope.js';
 
 import {
-  type AgentOptions,
   AiAgent,
+  type AiWidget,
   type ContextDetail,
   type ContextResponse,
   ConversationContext,
   type RequestOptions,
   ResponseType,
 } from './AiAgent.js';
+import {
+  type CreateExtensionScopeFunction,
+  executeJavaScriptFunction,
+  type ExecuteJsAgentOptions,
+  executeJsCode,
+  JavascriptExecutor
+} from './ExecuteJavascript.js';
 
 /**
  * WARNING: preamble defined in code is only used when userTier is
@@ -29,7 +38,7 @@ const preamble = `You are an accessibility expert agent integrated into Chrome D
 Your role is to help users understand and fix accessibility issues found in Lighthouse reports.
 
 # Style Guidelines
-* **Concise and Direct**: Use short sentences and bullet points. Avoid paragraphs and long explanations.
+* **General style**: 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.
 * **Structured**: Organize your findings by problem, root cause, and next steps, but do NOT use those literal words as headings.
 * **No Internal Identifiers**: NEVER show Lighthouse paths (e.g., "1,HTML,1,BODY...") to the user. Refer to elements by their tag name, classes, or IDs.
 * **Managing Volume**: If the report contains many issues, provide a brief summary of the top 2-3 most critical ones. Tell the user that there are more issues and invite them to ask for more details or to explore a specific area.
@@ -45,10 +54,28 @@ Your role is to help users understand and fix accessibility issues found in Ligh
 * \`runAccessibilityAudits\`: Trigger new accessibility snapshot audits.
 * \`getStyles\`: Get computed styles for an element by its path.
 * \`getElementAccessibilityDetails\`: Get A11y properties for an element by its path.
+* \`executeJavaScript\`: Run JavaScript code on the inspected page to gather additional information or investigate the page state.
+
+# Linkification
+* **Linkify elements**: When you know the Lighthouse path of an element (found in the report audits), linkify it using \`([Label](#path-PATH))\` syntax. Never show the path to the user directly, only use it in the link href.
 
 # Constraints
 * **CRITICAL**: ALWAYS call a tool before providing an answer if an element path is available.
 * **CRITICAL**: You are an accessibility agent. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, or any other non web-development topics.
+
+## 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]
 `;
 
 export class AccessibilityContext extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
@@ -86,15 +113,40 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
   readonly #lighthouseRecording?:
       (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
 
-  constructor(opts: AgentOptions) {
+  #execJs: typeof executeJsCode;
+  #javascriptExecutor: JavascriptExecutor;
+  #changes: ChangeManager;
+  #createExtensionScope: CreateExtensionScopeFunction;
+  #currentTurnId = 0;
+
+  constructor(opts: ExecuteJsAgentOptions) {
     super(opts);
     this.#lighthouseRecording = opts.lighthouseRecording;
+    this.#changes = opts.changeManager || new ChangeManager();
+    this.#execJs = opts.execJs ?? executeJsCode;
+    this.#createExtensionScope =
+        opts.createExtensionScope ?? ((changes: ChangeManager) => {
+          return new ExtensionScope(changes, this.sessionId, this.#getDocumentBodyNode(), this.#currentTurnId);
+        });
+    this.#javascriptExecutor = new JavascriptExecutor(
+        {
+          executionMode: this.executionMode,
+          getContextNode: () => this.#getDocumentBodyNode(),
+          createExtensionScope: this.#createExtensionScope.bind(this),
+          changes: this.#changes,
+        },
+        this.#execJs);
   }
 
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
   }
 
+  get executionMode(): Root.Runtime.HostConfigFreestylerExecutionMode {
+    return Root.Runtime.hostConfig.devToolsFreestyler?.executionMode ??
+        Root.Runtime.HostConfigFreestylerExecutionMode.ALL_SCRIPTS;
+  }
+
   get options(): RequestOptions {
     // TODO(b/491772868): tidy up userTier & feature flags in the backend.
     const temperature = Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.temperature;
@@ -106,6 +158,38 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
     };
   }
 
+  override preambleFeatures(): string[] {
+    return ['function_calling'];
+  }
+
+  protected override async preRun(): Promise<void> {
+    this.#currentTurnId++;
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    // We need to ensure the document is requested so that #getDocumentBodyNode()
+    // can return a valid node for the JavaScript execution context.
+    if (domModel && !domModel.existingDocument()) {
+      try {
+        await domModel.requestDocument();
+      } catch (e) {
+        debugLog('Failed to request document', e);
+      }
+    }
+  }
+
+  /**
+   * For the Accessibility Agent, there is no single "selected" node.
+   * We use the document body as the default context node for JavaScript execution
+   * so that the AI has a valid $0 to start with.
+   */
+  #getDocumentBodyNode(): SDK.DOMModel.DOMNode|null {
+    const document = SDK.TargetManager.TargetManager.instance()
+                         .primaryPageTarget()
+                         ?.model(SDK.DOMModel.DOMModel)
+                         ?.existingDocument();
+    return document?.body ?? document ?? null;
+  }
+
   async *
       handleContextDetails(lhr: ConversationContext<LHModel.ReporterTypes.ReportJSON>|null):
           AsyncGenerator<ContextResponse, void, void> {
@@ -136,6 +220,8 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
   }
 
   #declareFunctions(): void {
+    this.declareFunction('executeJavaScript', executeJavaScriptFunction(this.#javascriptExecutor));
+
     this.declareFunction<{explanation: string}, {audits: string}>('runAccessibilityAudits', {
       description:
           'Triggers new Lighthouse accessibility audits in snapshot mode. Use this if the user has made changes to the page and you want to re-evaluate the accessibility audits.',
@@ -262,11 +348,31 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
         if (!styles) {
           return {error: 'Could not get computed styles.'};
         }
-        const result: Record<string, string|undefined> = {};
+        const result: Record<string, string|number|undefined> = {};
         for (const prop of params.styleProperties) {
           result[prop] = styles.get(prop);
         }
-        return {result: JSON.stringify(result, null, 2)};
+
+        result['backendNodeId'] = node.backendNodeId();
+
+        const widgets: AiWidget[] = [];
+        const matchedStyles = await node.domModel().cssModel().getMatchedStyles(node.id);
+        if (matchedStyles) {
+          widgets.push({
+            name: 'COMPUTED_STYLES',
+            data: {
+              computedStyles: styles,
+              backendNodeId: node.backendNodeId(),
+              matchedCascade: matchedStyles,
+              properties: params.styleProperties,
+            }
+          });
+        }
+
+        return {
+          result: JSON.stringify(result, null, 2),
+          widgets: widgets.length > 0 ? widgets : undefined,
+        };
       },
     });
 
@@ -337,6 +443,7 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
                                   {} as Record<string, string>),
           isIgnored: axNode.ignored(),
           ignoredReasons: axNode.ignoredReasons(),
+          backendNodeId: node.backendNodeId(),
         };
 
         return {result: JSON.stringify(result, null, 2)};

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

@@ -172,30 +172,6 @@ export interface ConversationSuggestion {
 /** At least one. */
 export type ConversationSuggestions = [ConversationSuggestion, ...ConversationSuggestion[]];
 
-export const enum ExternalRequestResponseType {
-  ANSWER = 'answer',
-  NOTIFICATION = 'notification',
-  ERROR = 'error',
-}
-
-export interface ExternalRequestAnswer {
-  type: ExternalRequestResponseType.ANSWER;
-  message: string;
-  devToolsLogs: object[];
-}
-
-export interface ExternalRequestNotification {
-  type: ExternalRequestResponseType.NOTIFICATION;
-  message: string;
-}
-
-export interface ExternalRequestError {
-  type: ExternalRequestResponseType.ERROR;
-  message: string;
-}
-
-export type ExternalRequestResponse = ExternalRequestAnswer|ExternalRequestNotification|ExternalRequestError;
-
 export abstract class ConversationContext<T> {
   abstract getOrigin(): string;
   abstract getItem(): T;
@@ -290,9 +266,17 @@ export interface TimelineRangeSummaryAiWidget {
   };
 }
 
+export interface BottomUpTreeAiWidget {
+  name: 'BOTTOM_UP_TREE';
+  data: {
+    bounds: Trace.Types.Timing.TraceWindowMicro,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+  };
+}
+
 // This type will grow as we add more widgets.
 export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
-    PerformanceTraceAiWidget|LcpBreakdownAiWidget|TimelineRangeSummaryAiWidget;
+    PerformanceTraceAiWidget|LcpBreakdownAiWidget|TimelineRangeSummaryAiWidget|BottomUpTreeAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.snapshot.txt

@@ -91,7 +91,7 @@ Content:
     },
     {
       "name": "performanceRecordAndReload",
-      "description": "Records a new performance trace, to help debug performance issue.",
+      "description": "Records a new performance trace. Use this to measure and debug performance metrics and Core Web Vitals like Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).",
       "parameters": {
         "type": 6,
         "description": "",
@@ -102,7 +102,7 @@ Content:
     },
     {
       "name": "runLighthouseAudits",
-      "description": "Records a Lighthouse audit on the current page, to help debug accessibility issues.",
+      "description": "Records a Lighthouse audit on the current page. Use this to debug accessibility, SEO, and best practices. (For performance metrics like LCP, use performanceRecordAndReload instead).",
       "parameters": {
         "type": 6,
         "description": "",