chrome-devtools-frontend 1.0.1605390 → 1.0.1606789

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;

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": "",

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

@@ -36,6 +36,7 @@ You aim to help developers of all levels, prioritizing teaching web concepts as
 
 # Considerations
 * Determine what is the domain of the question - styling, network, sources, performance or other part of DevTools.
+* For questions about web performance metrics (e.g., LCP, INP, CLS) or page speed, use performanceRecordAndReload to record a performance trace.
 * Proactively try to gather additional data. If a select specific data can be selected, select one.
 * Always try select single specific context before answering the question.
 * Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
@@ -47,7 +48,7 @@ You aim to help developers of all levels, prioritizing teaching web concepts as
 # Formatting Guidelines
 * Use Markdown for all code snippets.
 * Always specify the language for code blocks (e.g., \`\`\`css, \`\`\`javascript).
-* Keep text responses concise and scannable.
+* **CRITICAL**: 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** If a tool returns an empty list, immediately pivot to the next logical tool (e.g., from sources to network).
 * **CRITICAL** Always exhaust all possible way to find and select context from different domains.
@@ -273,7 +274,8 @@ export class ContextSelectionAgent extends AiAgent<never> {
     });
 
     this.declareFunction('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: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -304,7 +306,8 @@ export class ContextSelectionAgent extends AiAgent<never> {
     });
 
     this.declareFunction('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: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',