chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

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

@@ -70,7 +70,7 @@ Content:
     },
     {
       "name": "executeJavaScript",
-      "description": "This function allows you to run JavaScript code on the inspected page to access the element styles and page content.\nCall this function to gather additional information or modify the page state. Call this function enough times to investigate the user request.",
+      "description": "This function allows you to run JavaScript code on the inspected page to access the element styles and page content.\nCall this function to gather additional information or modify the page state. Call this function enough times to investigate the user request. Note: You cannot make network requests using this function.",
       "parameters": {
         "type": 6,
         "description": "",
@@ -78,7 +78,7 @@ Content:
         "properties": {
           "code": {
             "type": 1,
-            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* 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`.\n* 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.\n* **CRITICAL** Only get styles that might be relevant to the user request.\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Consider that `data` variable from the previous function calls are not available in a new function call.\n\nFor example, the code to change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get overlapping elements:\n\n```\nconst data = {\n  overlappingElements: Array.from(document.querySelectorAll('*'))\n    .filter(el => {\n      const rect = el.getBoundingClientRect();\n      const popupRect = $0.getBoundingClientRect();\n      return (\n        el !== $0 &&\n        rect.left < popupRect.right &&\n        rect.right > popupRect.left &&\n        rect.top < popupRect.bottom &&\n        rect.bottom > popupRect.top\n      );\n    })\n    .map(el => ({\n      tagName: el.tagName,\n      id: el.id,\n      className: el.className,\n      zIndex: window.getComputedStyle(el)['z-index']\n    }))\n};\n```\n"
+            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* 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`.\n* 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.\n* **CRITICAL** Only get styles that might be relevant to the user request.\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Consider that `data` variable from the previous function calls are not available in a new function call.\n* **CRITICAL** Keep code concise (max 40 lines and 2,500 characters). Split complex logic into multiple steps.\n* **CRITICAL** Network requests (e.g., fetch, XMLHttpRequest) are disabled and cannot be made.\n\nFor example, the code to change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get overlapping elements:\n\n```\nconst data = {\n  overlappingElements: Array.from(document.querySelectorAll('*'))\n    .filter(el => {\n      const rect = el.getBoundingClientRect();\n      const popupRect = $0.getBoundingClientRect();\n      return (\n        el !== $0 &&\n        rect.left < popupRect.right &&\n        rect.right > popupRect.left &&\n        rect.top < popupRect.bottom &&\n        rect.bottom > popupRect.top\n      );\n    })\n    .map(el => ({\n      tagName: el.tagName,\n      id: el.id,\n      className: el.className,\n      zIndex: window.getComputedStyle(el)['z-index']\n    }))\n};\n```\n"
           },
           "explanation": {
             "type": 1,

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -13,6 +13,7 @@ import * as AiAgent2 from './AiAgent2.js';
 import * as AiConversation from './AiConversation.js';
 import * as AiHistoryStorage from './AiHistoryStorage.js';
 import * as AiOrigins from './AiOrigins.js';
+import * as AiSetting from './AiSetting.js';
 import * as AiUtils from './AiUtils.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
@@ -43,6 +44,7 @@ import * as GetLighthouseAudits from './tools/GetLighthouseAudits.js';
 import * as GetNetworkRequestDetails from './tools/GetNetworkRequestDetails.js';
 import * as GetStyles from './tools/GetStyles.js';
 import * as ListNetworkRequests from './tools/ListNetworkRequests.js';
+import * as RecordPerformanceTrace from './tools/RecordPerformanceTrace.js';
 import * as ResolveDevtoolsNodePath from './tools/ResolveDevtoolsNodePath.js';
 import * as Tool from './tools/Tool.js';
 import * as ToolRegistry from './tools/ToolRegistry.js';
@@ -58,6 +60,7 @@ export {
   AiHistoryStorage,
   AiOrigins,
   AIQueries,
+  AiSetting,
   AiUtils,
   BuiltInAi,
   ChangeManager,
@@ -85,6 +88,7 @@ export {
   PerformanceInsightFormatter,
   PerformanceTraceContext,
   PerformanceTraceFormatter,
+  RecordPerformanceTrace,
   RequestContext,
   ResolveDevtoolsNodePath,
   StorageAgent,

package/front_end/models/ai_assistance/contexts/PerformanceTraceContext.ts

@@ -31,10 +31,12 @@ import {AgentFocus} from '../performance/AIContext.js';
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   static fromParsedTrace(
       parsedTrace: Trace.TraceModel.ParsedTrace,
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       targetManager: SDK.TargetManager.TargetManager = SDK.TargetManager.TargetManager.instance(),
       freshRecordingTracker: Tracing.FreshRecording.Tracker = Tracing.FreshRecording.Tracker.instance(),
       debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()): PerformanceTraceContext {
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+      Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()): PerformanceTraceContext {
     return new PerformanceTraceContext(
         AgentFocus.fromParsedTrace(parsedTrace),
         targetManager,
@@ -44,11 +46,12 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   }
 
   static fromInsight(parsedTrace: Trace.TraceModel.ParsedTrace, insight: Trace.Insights.Types.InsightModel,
+                     // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
                      targetManager: SDK.TargetManager.TargetManager = SDK.TargetManager.TargetManager.instance(),
                      freshRecordingTracker: Tracing.FreshRecording.Tracker = Tracing.FreshRecording.Tracker.instance(),
                      debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-                         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()):
-      PerformanceTraceContext {
+                         // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+                     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()): PerformanceTraceContext {
     return new PerformanceTraceContext(
         AgentFocus.fromInsight(parsedTrace, insight),
         targetManager,
@@ -58,11 +61,12 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   }
 
   static fromCallTree(callTree: AICallTree,
+                      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
                       targetManager: SDK.TargetManager.TargetManager = SDK.TargetManager.TargetManager.instance(),
                       freshRecordingTracker: Tracing.FreshRecording.Tracker = Tracing.FreshRecording.Tracker.instance(),
                       debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-                          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()):
-      PerformanceTraceContext {
+                          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+                      Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()): PerformanceTraceContext {
     return new PerformanceTraceContext(
         AgentFocus.fromCallTree(callTree),
         targetManager,
@@ -77,10 +81,12 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   readonly #debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
 
   constructor(focus: AgentFocus,
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               targetManager: SDK.TargetManager.TargetManager = SDK.TargetManager.TargetManager.instance(),
               freshRecordingTracker: Tracing.FreshRecording.Tracker = Tracing.FreshRecording.Tracker.instance(),
               debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-                  Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()) {
+                  // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+              Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()) {
     super();
     this.#focus = focus;
     this.#targetManager = targetManager;

package/front_end/models/ai_assistance/data_formatters/FileFormatter.ts

@@ -56,7 +56,9 @@ export class FileFormatter {
   constructor(
       file: Workspace.UISourceCode.UISourceCode,
       debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+      Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       networkLog: Logs.NetworkLog.NetworkLog = Logs.NetworkLog.NetworkLog.instance(),
   ) {
     this.#file = file;

package/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -136,6 +136,7 @@ export class NetworkRequestFormatter {
   constructor(
       request: SDK.NetworkRequest.NetworkRequest,
       calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator,
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       networkLog: Logs.NetworkLog.NetworkLog = Logs.NetworkLog.NetworkLog.instance(),
   ) {
     this.#request = request;

package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -14,8 +14,8 @@ import {bytes, millis} from './UnitFormatters.js';
 /**
  * For a given frame ID and navigation ID, returns the LCP Event and the LCP Request, if the resource was an image.
  */
-function getLCPData(
-    parsedTrace: Trace.TraceModel.ParsedTrace, frameId: string, navigation: Trace.Types.Events.NavigationStart): {
+function getLCPData(parsedTrace: Trace.TraceModel.ParsedTrace, frameId: string,
+                    navigation: Trace.Types.Events.NavigationStart|Trace.Types.Events.SoftNavigationStart): {
   lcpEvent: Trace.Types.Events.LargestContentfulPaintCandidate,
   metricScore: Trace.Handlers.ModelHandlers.PageLoadMetrics.LCPMetricScore,
   lcpRequest?: Trace.Types.Events.SyntheticNetworkRequest,
@@ -34,7 +34,8 @@ function getLCPData(
     return null;
   }
 
-  const navigationId = navigation.args.data?.navigationId;
+  const navigationId =
+      Trace.Types.Events.isSoftNavigationStart(navigation) ? undefined : navigation.args.data?.navigationId;
 
   return {
     lcpEvent,

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -574,7 +574,7 @@ The following is a list of insight sets. An insight set covers a specific part o
 ## insight set id: NAVIGATION_0
 
 URL: http://localhost:8080/render-blocking
-Bounds: {min: 171607579779µs, max: 171613750571µs}
+Bounds: {min: 171607579779µs, max: 171613750570µs}
 Metrics (lab / observed):
   - LCP: 1317 ms, event: (eventKey: r-6686, ts: 171608897210), nodeId: 10
   - LCP breakdown:

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -57,6 +57,7 @@ export class PerformanceTraceFormatter {
       // In environments outside DevTools (like the MCP server or some tests),
       // CrUXManager.instance() can fail due to uninitialized global settings/storage.
       try {
+        // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
         this.#cruxManager = CrUXManager.CrUXManager.instance();
       } catch {
         this.#cruxManager = null;

package/front_end/models/ai_assistance/injected.ts

@@ -12,6 +12,7 @@
 
 export const AI_ASSISTANCE_CSS_CLASS_NAME = 'ai-style-change';
 export const FREESTYLER_WORLD_NAME = 'DevTools AI Assistance';
+export const FREESTYLER_WORLD_CSP = 'connect-src \'none\'';
 export const FREESTYLER_BINDING_NAME = '__freestyler';
 
 export interface FreestyleCallbackArgs {

package/front_end/models/ai_assistance/performance/AICallTree.ts

@@ -33,6 +33,7 @@ export class AICallTree {
       public selectedNode: Trace.Extras.TraceTree.Node|null,
       public rootNode: Trace.Extras.TraceTree.TopDownRootNode,
       public parsedTrace: Trace.TraceModel.ParsedTrace,
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       public workspace: Workspace.Workspace.WorkspaceImpl = Workspace.Workspace.WorkspaceImpl.instance(),
   ) {
   }

package/front_end/models/ai_assistance/skills/Skill.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 // This will become a union type as we add more skills (e.g. 'styling' | 'network').
-export type SkillName = 'styling'|'network'|'accessibility';
+export type SkillName = 'styling'|'network'|'accessibility'|'performance';
 
 export interface Skill {
   name: SkillName;

package/front_end/models/ai_assistance/skills/SkillRegistry.ts

@@ -4,6 +4,7 @@
 
 import {skill as accessibilitySkill} from './accessibility.skill.js';
 import {skill as networkSkill} from './network.skill.js';
+import {skill as performanceSkill} from './performance.skill.js';
 import type {Skill, SkillName} from './Skill.js';
 import {skill as stylingSkill} from './styling.skill.js';
 
@@ -11,4 +12,5 @@ export const SKILLS: Record<SkillName, Skill> = {
   styling: stylingSkill,
   network: networkSkill,
   accessibility: accessibilitySkill,
+  performance: performanceSkill,
 };

package/front_end/models/ai_assistance/skills/performance.md

@@ -0,0 +1,10 @@
+---
+name: performance
+description: Web performance analysis, trace inspection, and trace recording.
+allowed-tools:
+  - recordPerformanceTrace
+---
+You are an expert web performance assistant integrated into Chrome DevTools.
+Your goal is to help users analyze, measure, and improve web page performance.
+
+Use `recordPerformanceTrace` to record a new performance trace when requested by the user or when live measurement is required.

package/front_end/models/ai_assistance/tools/ExecuteJavaScript.ts

@@ -2,20 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as Root from '../../../core/root/root.js';
-import type {FunctionCallHandlerResult, FunctionHandlerOptions} from '../agents/AiAgent.js';
+import * as Formatter from '../../formatter/formatter.js';
+import type {FunctionHandlerOptions} from '../agents/AiAgent.js';
 import {JavascriptExecutor} from '../agents/ExecuteJavascript.js';
 
 import {
   type BaseToolCapability,
+  type DataHandlerResult,
+  type DataTool,
   type PageExecutionCapability,
   type StyleMutationCapability,
-  type Tool,
   type ToolArgs,
   ToolName,
 } from './Tool.js';
 
+const MAX_FORMATTED_LINES = 40;
+const MAX_LINE_LENGTH = 120;
+const MAX_TOTAL_CHARACTERS = 2500;
+
 export interface ExecuteJavaScriptArgs extends ToolArgs {
   code: string;
   explanation: string;
@@ -23,11 +30,39 @@ export interface ExecuteJavaScriptArgs extends ToolArgs {
 }
 
 export class ExecuteJavaScriptTool implements
-    Tool<ExecuteJavaScriptArgs, unknown, BaseToolCapability&PageExecutionCapability&StyleMutationCapability> {
+    DataTool<ExecuteJavaScriptArgs, unknown, BaseToolCapability&PageExecutionCapability&StyleMutationCapability> {
   readonly name = ToolName.EXECUTE_JAVASCRIPT;
 
   readonly description =
-      'This function allows you to run JavaScript code on the inspected page to access the element styles and page content.\nCall this function to gather additional information or modify the page state. Call this function enough times to investigate the user request.';
+      'This function allows you to run JavaScript code on the inspected page to access the element styles and page content.\nCall this function to gather additional information or modify the page state. Call this function enough times to investigate the user request. Note: You cannot make network requests using this function.';
+
+  static async validateAndFormatCode(code: string): Promise<{formattedCode?: string, error?: string}> {
+    try {
+      const formatted = await Formatter.ScriptFormatter.formatScriptContent(
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+          Common.Settings.Settings.instance(),
+          'text/javascript',
+          code,
+          '  ',
+      );
+      const formattedCode = formatted.formattedContent;
+      const lines = formattedCode.split('\n');
+      const maxLineLen = Math.max(...lines.map(line => line.length));
+
+      if (lines.length > MAX_FORMATTED_LINES || maxLineLen > MAX_LINE_LENGTH ||
+          formattedCode.length > MAX_TOTAL_CHARACTERS) {
+        return {
+          error: `Error: JavaScript code exceeds maximum allowed size ` +
+              `(max ${MAX_FORMATTED_LINES} formatted lines, ${MAX_LINE_LENGTH} chars/line, ${
+                     MAX_TOTAL_CHARACTERS} total chars). ` +
+              `Please split your logic into smaller function calls.`,
+        };
+      }
+      return {formattedCode};
+    } catch {
+      return {error: 'Error: JavaScript code snippet contains invalid syntax.'};
+    }
+  }
 
   readonly parameters: Host.AidaClient.FunctionObjectParam<keyof ExecuteJavaScriptArgs> = {
     type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -46,6 +81,8 @@ export class ExecuteJavaScriptTool implements
 * **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.
+* **CRITICAL** Keep code concise (max 40 lines and 2,500 characters). Split complex logic into multiple steps.
+* **CRITICAL** Network requests (e.g., fetch, XMLHttpRequest) are disabled and cannot be made.
 
 For example, the code to change element styles:
 
@@ -109,12 +146,22 @@ const data = {
       params: ExecuteJavaScriptArgs,
       context: BaseToolCapability&PageExecutionCapability&StyleMutationCapability,
       options?: FunctionHandlerOptions,
-      ): Promise<FunctionCallHandlerResult<unknown>> {
+      ): Promise<DataHandlerResult<unknown>> {
     const executionNode = context.getExecutionContextNode();
     if (!executionNode) {
       return {error: 'Error: Could not find the context node for execution.'};
     }
 
+    if (Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled) {
+      const validationResult = await ExecuteJavaScriptTool.validateAndFormatCode(params.code);
+      if (validationResult.error) {
+        return {error: validationResult.error};
+      }
+      if (validationResult.formattedCode) {
+        params.code = validationResult.formattedCode;
+      }
+    }
+
     const executionMode = Root.Runtime.hostConfig.devToolsFreestyler?.executionMode ??
         Root.Runtime.HostConfigFreestylerExecutionMode.ALL_SCRIPTS;
 

package/front_end/models/ai_assistance/tools/GetElementAccessibilityDetails.ts

@@ -6,14 +6,14 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
 import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 
 import {
   type BaseToolCapability,
+  type DataHandlerResult,
+  type DataTool,
   type OriginLockCapability,
   type TargetCapability,
-  type Tool,
   type ToolArgs,
   ToolName,
 } from './Tool.js';
@@ -34,7 +34,7 @@ export interface GetElementAccessibilityDetailsArgs extends ToolArgs {
  * for a resolved element backend node ID. It also returns a DOM snapshot of the element's subtree.
  */
 export class GetElementAccessibilityDetailsTool implements
-    Tool<GetElementAccessibilityDetailsArgs, string, BaseToolCapability&TargetCapability&OriginLockCapability> {
+    DataTool<GetElementAccessibilityDetailsArgs, string, BaseToolCapability&TargetCapability&OriginLockCapability> {
   readonly name = ToolName.GET_ELEMENT_ACCESSIBILITY_DETAILS;
   readonly description =
       'Get detailed accessibility information for an element on the inspected page by its backend node ID.';
@@ -79,7 +79,7 @@ export class GetElementAccessibilityDetailsTool implements
   async handler(
       params: GetElementAccessibilityDetailsArgs,
       context: BaseToolCapability&TargetCapability&OriginLockCapability,
-      ): Promise<FunctionCallHandlerResult<string>> {
+      ): Promise<DataHandlerResult<string>> {
     const establishedOrigin = context.getEstablishedOrigin();
     if (!establishedOrigin) {
       return {error: 'Error: Origin lock is not established.'};

package/front_end/models/ai_assistance/tools/GetLighthouseAudits.ts

@@ -4,17 +4,17 @@
 
 import * as Host from '../../../core/host/host.js';
 import type * as LHModel from '../../lighthouse/lighthouse.js';
-import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
 import {AccessibilityContext} from '../contexts/AccessibilityContext.js';
 import {LighthouseFormatter} from '../data_formatters/LighthouseFormatter.js';
 
-import {type BaseToolCapability, type Tool, type ToolArgs, ToolName} from './Tool.js';
+import {type BaseToolCapability, type DataHandlerResult, type DataTool, type ToolArgs, ToolName} from './Tool.js';
 
 export interface GetLighthouseAuditsArgs extends ToolArgs {
   categoryId: LHModel.RunTypes.CategoryId;
 }
 
-export class GetLighthouseAuditsTool implements Tool<GetLighthouseAuditsArgs, {audits: string}, BaseToolCapability> {
+export class GetLighthouseAuditsTool implements
+    DataTool<GetLighthouseAuditsArgs, {audits: string}, BaseToolCapability> {
   readonly name = ToolName.GET_LIGHTHOUSE_AUDITS;
   readonly description = 'Returns the audits for a specific Lighthouse category.';
 
@@ -40,7 +40,7 @@ export class GetLighthouseAuditsTool implements Tool<GetLighthouseAuditsArgs, {a
   }
 
   async handler(params: GetLighthouseAuditsArgs,
-                context: BaseToolCapability): Promise<FunctionCallHandlerResult<{audits: string}>> {
+                context: BaseToolCapability): Promise<DataHandlerResult<{audits: string}>> {
     if (!(context.conversationContext instanceof AccessibilityContext)) {
       return {error: 'Error: Active context is not a Lighthouse report.'};
     }

package/front_end/models/ai_assistance/tools/GetNetworkRequestDetails.ts

@@ -6,15 +6,15 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
-import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
 import {isOpaqueOrigin} from '../AiOrigins.js';
 import {getRequestContextOrigin} from '../contexts/RequestContext.js';
 import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
 
 import {
   type BaseToolCapability,
+  type DataHandlerResult,
+  type DataTool,
   type OriginLockCapability,
-  type Tool,
   type ToolArgs,
   ToolName,
 } from './Tool.js';
@@ -33,7 +33,7 @@ export interface GetNetworkRequestDetailsArgs extends ToolArgs {
  * The details include request/response headers, status code, timings, and the response body.
  */
 export class GetNetworkRequestDetailsTool implements
-    Tool<GetNetworkRequestDetailsArgs, unknown, BaseToolCapability&OriginLockCapability> {
+    DataTool<GetNetworkRequestDetailsArgs, unknown, BaseToolCapability&OriginLockCapability> {
   readonly name = ToolName.GET_NETWORK_REQUEST_DETAILS;
   readonly description =
       'Retrieves the full headers, timing, status, and body details of a specific network request by ID.';
@@ -75,7 +75,7 @@ export class GetNetworkRequestDetailsTool implements
   async handler(
       args: GetNetworkRequestDetailsArgs,
       context: BaseToolCapability&OriginLockCapability,
-      ): Promise<FunctionCallHandlerResult<unknown>> {
+      ): Promise<DataHandlerResult<unknown>> {
     // A conversation is locked to an origin once the first query is made.
     // We only allow inspecting requests matching the conversation's established origin.
     const origin = context.getEstablishedOrigin();
@@ -87,6 +87,7 @@ export class GetNetworkRequestDetailsTool implements
       };
     }
 
+    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     const networkLog = this.#networkLog ?? Logs.NetworkLog.NetworkLog.instance();
     const request = networkLog.requests().find(req => {
       if (req.requestId() !== args.id) {

package/front_end/models/ai_assistance/tools/GetStyles.ts

@@ -5,15 +5,16 @@
 import * as Host from '../../../core/host/host.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import type {ComputedStyleAiWidget, FunctionCallHandlerResult, FunctionHandlerOptions} from '../agents/AiAgent.js';
+import type {ComputedStyleAiWidget, FunctionHandlerOptions} from '../agents/AiAgent.js';
 import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 import {debugLog} from '../debug.js';
 
 import {
   type BaseToolCapability,
+  type DataHandlerResult,
+  type DataTool,
   type OriginLockCapability,
   type TargetCapability,
-  type Tool,
   type ToolArgs,
   ToolName,
 } from './Tool.js';
@@ -25,7 +26,7 @@ export interface GetStylesArgs extends ToolArgs {
 }
 
 export class GetStylesTool implements
-    Tool<GetStylesArgs, unknown, BaseToolCapability&TargetCapability&OriginLockCapability> {
+    DataTool<GetStylesArgs, unknown, BaseToolCapability&TargetCapability&OriginLockCapability> {
   readonly name = ToolName.GET_STYLES;
   readonly description =
       `Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.
@@ -81,7 +82,7 @@ export class GetStylesTool implements
       params: GetStylesArgs,
       context: BaseToolCapability&TargetCapability&OriginLockCapability,
       _options?: FunctionHandlerOptions,
-      ): Promise<FunctionCallHandlerResult<unknown>> {
+      ): Promise<DataHandlerResult<unknown>> {
     const widgets: ComputedStyleAiWidget[] = [];
     const result:
         Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};

package/front_end/models/ai_assistance/tools/ListNetworkRequests.ts

@@ -6,15 +6,15 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Logs from '../../logs/logs.js';
-import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
 import {isOpaqueOrigin} from '../AiOrigins.js';
 import {getRequestContextOrigin} from '../contexts/RequestContext.js';
 import {formatBytesToKb, seconds} from '../data_formatters/UnitFormatters.js';
 
 import {
   type BaseToolCapability,
+  type DataHandlerResult,
+  type DataTool,
   type OriginLockCapability,
-  type Tool,
   ToolName,
 } from './Tool.js';
 
@@ -37,7 +37,7 @@ interface NetworkRequestSummary {
  * Filters the list by the conversation's established origin to prevent cross-origin data exposure.
  */
 export class ListNetworkRequestsTool implements
-    Tool<Record<string, never>, unknown, BaseToolCapability&OriginLockCapability> {
+    DataTool<Record<string, never>, unknown, BaseToolCapability&OriginLockCapability> {
   readonly name = ToolName.LIST_NETWORK_REQUESTS;
   readonly description = 'Gives a list of network requests including URL, status code, and duration.';
 
@@ -72,7 +72,7 @@ export class ListNetworkRequestsTool implements
   async handler(
       _params: Record<string, never>,
       context: BaseToolCapability&OriginLockCapability,
-      ): Promise<FunctionCallHandlerResult<unknown>> {
+      ): Promise<DataHandlerResult<unknown>> {
     const requests: NetworkRequestSummary[] = [];
     // A conversation is locked to an origin once the first query is made.
     // We only allow inspecting requests matching the conversation's established origin.
@@ -85,6 +85,7 @@ export class ListNetworkRequestsTool implements
       };
     }
 
+    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     const networkLog = this.#networkLog ?? Logs.NetworkLog.NetworkLog.instance();
     let hasCrossOriginRequest = false;
     const requestsToShow: SDK.NetworkRequest.NetworkRequest[] = [];

package/front_end/models/ai_assistance/tools/README.md

@@ -25,7 +25,7 @@ The Agent (e.g., `AiAgent2`) builds the complete dependency union (`AllToolsCapa
 
 ## Returning UI Widgets
 
-Tools can return rich UI components (widgets) to be rendered directly in the AI Assistance panel alongside text results. To do this, include the widget payload in the `widgets` field of the returned `FunctionCallHandlerResult`:
+Tools can return rich UI components (widgets) to be rendered directly in the AI Assistance panel alongside text results. To do this, include the widget payload in the `widgets` field of the returned `ToolDataResult` or `ToolContextResult`:
 
 ```typescript
 return {

package/front_end/models/ai_assistance/tools/RecordPerformanceTrace.ts

@@ -0,0 +1,63 @@
+// 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 Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import {PerformanceTraceContext} from '../contexts/PerformanceTraceContext.js';
+import type {AgentFocus} from '../performance/AIContext.js';
+
+import {
+  type BaseToolCapability,
+  type ContextHandlerResult,
+  type ContextTool,
+  type PerformanceRecordingCapability,
+  ToolName,
+} from './Tool.js';
+
+const UIStringsNotTranslate = {
+  recordingPerformanceTrace: 'Recording a performance trace',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+export class RecordPerformanceTraceTool implements
+    ContextTool<Record<string, never>, AgentFocus, BaseToolCapability&PerformanceRecordingCapability> {
+  readonly name = ToolName.RECORD_PERFORMANCE_TRACE;
+  readonly description = 'Records a new performance trace to measure, analyze, and debug page performance.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<never> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: 'Parameters for recording a performance trace.',
+    nullable: false,
+    properties: {},
+    required: [],
+  };
+
+  displayInfoFromArgs(): {
+    title: string,
+    action: string,
+  } {
+    return {
+      title: lockedString(UIStringsNotTranslate.recordingPerformanceTrace),
+      action: 'recordPerformanceTrace()',
+    };
+  }
+
+  async handler(_params: Record<string, never>, capabilities: BaseToolCapability&PerformanceRecordingCapability):
+      Promise<ContextHandlerResult<AgentFocus>> {
+    if (!capabilities.performanceRecordAndReload) {
+      return {error: 'Performance recording is not available.'};
+    }
+    try {
+      const result = await capabilities.performanceRecordAndReload();
+      return {
+        context: PerformanceTraceContext.fromParsedTrace(result),
+        description: 'User recorded a performance trace',
+        widgets: [{name: 'PERFORMANCE_TRACE', data: {parsedTrace: result}}],
+      };
+    } catch (err) {
+      return {error: `Failed to record performance trace: ${err instanceof Error ? err.message : String(err)}`};
+    }
+  }
+}

package/front_end/models/ai_assistance/tools/ResolveDevtoolsNodePath.ts

@@ -4,14 +4,14 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
 import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 
 import {
   type BaseToolCapability,
+  type DataHandlerResult,
+  type DataTool,
   type OriginLockCapability,
   type TargetCapability,
-  type Tool,
   type ToolArgs,
   ToolName,
 } from './Tool.js';
@@ -36,8 +36,8 @@ export interface ResolveDevtoolsNodePathArgs extends ToolArgs {
  * Lighthouse reports or other sources using node paths. It ensures the resolved node
  * belongs to the locked origin.
  */
-export class ResolveDevtoolsNodePathTool implements Tool<ResolveDevtoolsNodePathArgs, {backendNodeId: number},
-                                                         BaseToolCapability&TargetCapability&OriginLockCapability> {
+export class ResolveDevtoolsNodePathTool implements DataTool<ResolveDevtoolsNodePathArgs, {backendNodeId: number},
+                                                             BaseToolCapability&TargetCapability&OriginLockCapability> {
   readonly name = ToolName.RESOLVE_DEVTOOLS_NODE_PATH;
   readonly description = 'Resolves a DevTools node path to a backend node ID.';
 
@@ -82,7 +82,7 @@ export class ResolveDevtoolsNodePathTool implements Tool<ResolveDevtoolsNodePath
   async handler(
       params: ResolveDevtoolsNodePathArgs,
       context: BaseToolCapability&TargetCapability&OriginLockCapability,
-      ): Promise<FunctionCallHandlerResult<{backendNodeId: number}>> {
+      ): Promise<DataHandlerResult<{backendNodeId: number}>> {
     const establishedOrigin = context.getEstablishedOrigin();
     if (!establishedOrigin) {
       return {error: 'Error: Origin lock is not established.'};