chrome-devtools-frontend 1.0.1642899 → 1.0.1643855

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

@@ -23,7 +23,7 @@ const lockedString = i18n.i18n.lockedString;
 const preamble =
     `You are a Senior Software Engineer specializing in state audit and storage analysis within Chrome DevTools. Your mission is to help developers debug storage-related issues faster by analyzing the evidence in LocalStorage, SessionStorage, and Cookies.
 
- You have access to the site's storage using tools like \`listPageOrigins\`, \`listStorageKeys\`, \`getStorageValues\`, \`listCookies\`, and \`getCookieValues\`.
+ You have access to the site's storage using tools like \`getStorageBreakdown\`, \`listPageOrigins\`, \`listStorageKeys\`, \`getStorageValues\`, \`listCookies\`, and \`getCookieValues\`.
 
  # Goals
 
@@ -34,6 +34,7 @@ const preamble =
  # Tools & Workflow
 
  -   **Prioritize Top-Level Context**: Always initiate your investigation from the top-level page's storage. Explicitly state if you are analyzing storage from a different context (e.g., an iframe).
+ -   **Storage Breakdown**: Calling \`getStorageBreakdown\` gives you the total usage and quota per storage for the top-level page.
  -   **Address Specific Selections**: The user can select individual storage items in the DevTools UI (provided in the '# Active Context' section of the prompt). If the query is about a selected item (e.g., "Why is this cookie set?"), focus your response on that specific item.
  -   **Expand Scope When Necessary**: For general questions or those implying a wider scope (e.g., "Check all storages," "Are there related cookies on subdomains?"), proactively use your tools to explore other relevant storage contexts, including iframes and different origins.
  -   **Discovery**: Start by calling \`listPageOrigins\` to discover all active, non-empty frame origins loaded by the page.
@@ -173,18 +174,17 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
     });
 
-    this.declareFunction<
-        {
-          type: 'localStorage' | 'sessionStorage',
-          origin: string,
-          storageKey?: string,
-        },
-        {
-          partitions: Array<{
-            storageKey: string,
-            keys: string[],
-          }>,
-        }>('listStorageKeys', {
+    this.declareFunction<{
+      type: 'localStorage' | 'sessionStorage',
+      origin: string,
+      storageKey?: string,
+    },
+                         {
+                           partitions: Array<{
+                             storageKey: string,
+                             keys: string[],
+                           }>,
+                         }>('listStorageKeys', {
       description:
           'Lists all keys for a given storage type for the requested origin. Returns keys grouped by storage partition.',
       parameters: {
@@ -218,6 +218,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async args => {
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -244,19 +245,18 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
     });
 
-    this.declareFunction<
-        {
-          type: 'localStorage' | 'sessionStorage',
-          keys: string[],
-          origin: string,
-          storageKey?: string,
-        },
-        {
-          items: Array<{
-            storageKey: string,
-            values: Record<string, string>,
-          }>,
-        }>('getStorageValues', {
+    this.declareFunction<{
+      type: 'localStorage' | 'sessionStorage',
+      keys: string[],
+      origin: string,
+      storageKey?: string,
+    },
+                         {
+                           items: Array<{
+                             storageKey: string,
+                             values: Record<string, string>,
+                           }>,
+                         }>('getStorageValues', {
       description: 'Retrieve specific string values from storage partitions for requested keys.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -296,6 +296,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async (args, options) => {
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -353,11 +354,10 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
     });
 
-    this.declareFunction<
-        {
-          origin: string,
-        },
-        {cookies: string[]}>('listCookies', {
+    this.declareFunction<{
+      origin: string,
+    },
+                         {cookies: string[]}>('listCookies', {
       description: 'Lists all cookies for the requested origin, strictly excluding their values.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -379,6 +379,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async args => {
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -396,14 +397,13 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
     });
 
-    this.declareFunction<
-        {
-          cookieNames: string[],
-          origin: string,
-        },
-        {
-          cookies: CookieDetails[],
-        }>('getCookieValues', {
+    this.declareFunction<{
+      cookieNames: string[],
+      origin: string,
+    },
+                         {
+                           cookies: CookieDetails[],
+                         }>('getCookieValues', {
       description: 'Retrieve the values and detailed metadata of specific cookies by their names.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -431,6 +431,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async (args, options) => {
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -479,6 +480,58 @@ export class StorageAgent extends AiAgent<StorageItem> {
         return {result: {cookies: cookieData}};
       },
     });
+
+    this.declareFunction<Record<string, never>, {
+      totalUsage: string,
+      totalQuota: string,
+      usageBreakdown: Array<{
+        storageType: string,
+        usage: string,
+      }>,
+    }>('getStorageBreakdown', {
+      description:
+          'Retrieves the total storage usage, total storage quota, and a breakdown of active storage usage per storage type for the top-level page.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {},
+        required: [],
+      },
+      displayInfoFromArgs: () => {
+        return {
+          title: lockedString('Retrieving storage breakdown'),
+          action: 'getStorageBreakdown()',
+        };
+      },
+      handler: async () => {
+        const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+        if (!target || !this.context || !isSamePageOrigin(target, this.context)) {
+          return {error: 'No origin available or not allowed.'};
+        }
+
+        const origin = this.context.getOrigin();
+        const response = await target.storageAgent().invoke_getUsageAndQuota({origin});
+        if (response.getError()) {
+          return {error: response.getError() || 'Unknown CDP error'};
+        }
+
+        const usageBreakdown = response.usageBreakdown.filter(entry => entry.usage > 0)
+                                   .sort((a, b) => b.usage - a.usage)
+                                   .map(entry => ({
+                                          storageType: entry.storageType as string,
+                                          usage: i18n.ByteUtilities.bytesToString(entry.usage),
+                                        }));
+
+        return {
+          result: {
+            totalUsage: i18n.ByteUtilities.bytesToString(response.usage),
+            totalQuota: i18n.ByteUtilities.bytesToString(response.quota),
+            usageBreakdown,
+          },
+        };
+      },
+    });
   }
 
   static #formatContext(item: StorageItem): string {
@@ -498,6 +551,15 @@ export class StorageAgent extends AiAgent<StorageItem> {
     return primaryTargetOrigin;
   }
 
+  protected override async preRun(): Promise<void> {
+    const item = this.context?.getItem();
+    if (item instanceof CookieItem && Boolean(item.name)) {
+      this.disableServerSideLogging();
+    } else if (item instanceof DOMStorageItem && Boolean(item.key)) {
+      this.disableServerSideLogging();
+    }
+  }
+
   async *
       handleContextDetails(context: ConversationContext<StorageItem>|null):
           AsyncGenerator<ContextResponse, void, void> {

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

@@ -1,4 +1,3 @@
-
 Title: StylingAgent buildRequest structure matches the snapshot
 Content:
 {
@@ -129,7 +128,7 @@ Content:
     "disable_user_content_logging": false,
     "string_session_id": "sessionId",
     "user_tier": 3,
-    "client_version": "unit_test"
+    "client_version": "unit_test+function_calling"
   },
   "functionality_type": 5,
   "client_feature": 2

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

@@ -27,10 +27,8 @@ import {
 } from './AiAgent.js';
 import {
   type CreateExtensionScopeFunction,
-  executeJavaScriptFunction,
   type ExecuteJsAgentOptions,
   executeJsCode,
-  JavascriptExecutor
 } from './ExecuteJavascript.js';
 
 const preamble = `You are the most advanced CSS/DOM/HTML debugging assistant integrated into Chrome DevTools.
@@ -169,32 +167,21 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   }
 
   #execJs: typeof executeJsCode;
-  #javascriptExecutor: JavascriptExecutor;
 
   #changes: ChangeManager;
   #createExtensionScope: CreateExtensionScopeFunction;
   #greenDevEmulationScreenshot: string|null = null;
   #greenDevEmulationAxTree: string|null = null;
   #hasAddedEmulationInstructions = false;
-  #currentTurnId = 0;
 
   constructor(opts: ExecuteJsAgentOptions) {
     super(opts);
 
     this.#changes = opts.changeManager || new ChangeManager();
     this.#execJs = opts.execJs ?? executeJsCode;
-    this.#createExtensionScope =
-        opts.createExtensionScope ?? ((changes: ChangeManager) => {
-          return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null, this.#currentTurnId);
-        });
-    this.#javascriptExecutor = new JavascriptExecutor(
-        {
-          executionMode: this.executionMode,
-          getContextNode: () => this.#getSelectedNode(),
-          createExtensionScope: this.#createExtensionScope.bind(this),
-          changes: this.#changes,
-        },
-        this.#execJs);
+    this.#createExtensionScope = opts.createExtensionScope ?? ((changes: ChangeManager) => {
+                                   return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null);
+                                 });
 
     const getStylesTool = ToolRegistry.get(ToolName.GET_STYLES);
     if (!getStylesTool) {
@@ -209,7 +196,26 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       }),
     });
 
-    this.declareFunction('executeJavaScript', executeJavaScriptFunction(this.#javascriptExecutor));
+    const executeJsTool = ToolRegistry.get(ToolName.EXECUTE_JAVASCRIPT);
+    if (!executeJsTool) {
+      throw new Error('Required tool "executeJavaScript" not found');
+    }
+    this.declareFunction(ToolName.EXECUTE_JAVASCRIPT, {
+      description: executeJsTool.description,
+      parameters: executeJsTool.parameters,
+      displayInfoFromArgs: executeJsTool.displayInfoFromArgs,
+      handler: (args, options) => executeJsTool.handler(
+          args,
+          {
+            conversationContext: this.context ?? null,
+            changeManager: this.#changes,
+            createExtensionScope: this.#createExtensionScope.bind(this),
+            execJs: this.#execJs,
+            getExecutionContextNode: () => this.context?.getItem() ?? null,
+          },
+          options,
+          ),
+    });
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       this.declareFunction<{
@@ -275,6 +281,10 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
     });
   }
 
+  override preambleFeatures(): string[] {
+    return ['function_calling'];
+  }
+
   #getSelectedNode(): SDK.DOMModel.DOMNode|null {
     return this.context?.getItem() ?? null;
   }
@@ -515,10 +525,6 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
     }
   }
 
-  protected override async preRun(): Promise<void> {
-    this.#currentTurnId++;
-  }
-
   override async enhanceQuery(
       query: string, selectedElement: ConversationContext<SDK.DOMModel.DOMNode>|null,
       multimodalInputType?: MultimodalInputType): Promise<string> {

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -6,7 +6,6 @@ import * as AgentProject from './AgentProject.js';
 import * as AccessibilityAgent from './agents/AccessibilityAgent.js';
 import * as AiAgent from './agents/AiAgent.js';
 import * as ContextSelectionAgent from './agents/ContextSelectionAgent.js';
-import * as ConversationSummaryAgent from './agents/ConversationSummaryAgent.js';
 import * as FileAgent from './agents/FileAgent.js';
 import * as GreenDevAgent from './agents/GreenDevAgent.js';
 import * as GreenDevAgentAntigravityCliSocketClient from './agents/GreenDevAgentAntigravityCliSocketClient.js';
@@ -14,7 +13,6 @@ import * as GreenDevAgentGeminiCliSocketClient from './agents/GreenDevAgentGemin
 import * as NetworkAgent from './agents/NetworkAgent.js';
 import * as PatchAgent from './agents/PatchAgent.js';
 import * as PerformanceAgent from './agents/PerformanceAgent.js';
-import * as PerformanceAnnotationsAgent from './agents/PerformanceAnnotationsAgent.js';
 import * as StorageAgent from './agents/StorageAgent.js';
 import * as StylingAgent from './agents/StylingAgent.js';
 import * as AiAgent2 from './AiAgent2.js';
@@ -25,6 +23,7 @@ import * as AiUtils from './AiUtils.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
 import * as DOMNodeContext from './contexts/DOMNodeContext.js';
+import * as ConversationSummary from './ConversationSummary.js';
 import * as FileFormatter from './data_formatters/FileFormatter.js';
 import * as LighthouseFormatter from './data_formatters/LighthouseFormatter.js';
 import * as NetworkRequestFormatter from './data_formatters/NetworkRequestFormatter.js';
@@ -38,7 +37,9 @@ import * as Injected from './injected.js';
 import * as AICallTree from './performance/AICallTree.js';
 import * as AIContext from './performance/AIContext.js';
 import * as AIQueries from './performance/AIQueries.js';
+import * as PerformanceAnnotations from './PerformanceAnnotations.js';
 import * as StorageItem from './StorageItem.js';
+import * as ExecuteJavaScript from './tools/ExecuteJavaScript.js';
 import * as GetStyles from './tools/GetStyles.js';
 import * as Tool from './tools/Tool.js';
 import * as ToolRegistry from './tools/ToolRegistry.js';
@@ -58,10 +59,11 @@ export {
   BuiltInAi,
   ChangeManager,
   ContextSelectionAgent,
-  ConversationSummaryAgent,
+  ConversationSummary,
   Debug,
   DOMNodeContext,
   EvaluateAction,
+  ExecuteJavaScript,
   ExtensionScope,
   FileAgent,
   FileFormatter,
@@ -75,7 +77,7 @@ export {
   NetworkRequestFormatter,
   PatchAgent,
   PerformanceAgent,
-  PerformanceAnnotationsAgent,
+  PerformanceAnnotations,
   PerformanceInsightFormatter,
   PerformanceTraceFormatter,
   StorageAgent,

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

@@ -2,12 +2,13 @@
 name: styling
 description: Helping with CSS and styling
 allowed-tools:
+  - executeJavaScript
   - getStyles
 ---
-You are a CSS/DOM/HTML debugging assistant.
+You are the most advanced CSS/DOM/HTML debugging assistant integrated into Chrome DevTools.
 You always suggest considering the best web development practices and the newest platform features such as view transitions.
 The user selected a DOM element in the browser's DevTools and sends a query about the page or the selected DOM element.
-First, examine the provided context, then use the getStyles function to gather additional context and resolve the user request.
+First, examine the provided context, then use the getStyles and executeJavaScript functions to gather additional context and resolve the user request.
 
 # Considerations
 
@@ -19,10 +20,17 @@ First, examine the provided context, then use the getStyles function to gather a
 * Please answer only if you are sure about the answer. Otherwise, explain why you're not able to answer.
 * When answering, always consider MULTIPLE possible solutions.
 * When answering, remember to consider CSS concepts such as the CSS cascade, explicit and implicit stacking contexts and various CSS layout types.
-* Use the getStyles function available to you to investigate and fulfill the user request.
-* ALWAYS OUTPUT a list of follow-up queries at the end of your text response. The format is SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]. Make sure that the array and the `SUGGESTIONS: ` text is in the same line.
+* Use the functions available to you to investigate and fulfill the user request.
+* After applying a fix, please ask the user to confirm if the fix worked or not.
+* ALWAYS OUTPUT a list of follow-up queries at the end of your text response. The format is SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]. Make sure that the array and the `SUGGESTIONS: ` text is in the same line. You're also capable of executing the fix for the issue user mentioned. Reflect this in your suggestions.
 * Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
+* **CRITICAL** NEVER output text before a function call. Always do a function call first.
 * **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect `position`, `display` and all other related properties. You MUST provide a specific list of CSS property names when calling getStyles. Do not use generic values like "all" or "*".
+* **CRITICAL** When writing JavaScript via the `executeJavaScript` tool:
+    - To return data, define a top-level `data` variable and populate it with a JSON-serializable object.
+    - 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 and should never be presented to the user.
+    - Never assume a selector for the elements unless you verified your knowledge.
+    - Consider that `data` variables from previous function calls are not available in a new function call.
 * **CRITICAL** You are a CSS/DOM/HTML debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.
 
 ## Response Structure

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

@@ -0,0 +1,134 @@
+// 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 Root from '../../../core/root/root.js';
+import type {FunctionCallHandlerResult, FunctionHandlerOptions,} from '../agents/AiAgent.js';
+import {JavascriptExecutor} from '../agents/ExecuteJavascript.js';
+
+import {
+  type Tool,
+  type ToolArgs,
+  type ToolContext,
+  ToolName,
+} from './Tool.js';
+
+export interface ExecuteJavaScriptArgs extends ToolArgs {
+  code: string;
+  explanation: string;
+  title: string;
+}
+
+export class ExecuteJavaScriptTool implements Tool<ExecuteJavaScriptArgs, unknown> {
+  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.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof ExecuteJavaScriptArgs> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: '',
+    nullable: false,
+    properties: {
+      code: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description:
+            `JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.
+
+# Instructions
+
+* To return data, define a top-level \`data\` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to \`data\`.
+* If you modify styles on an element, ALWAYS call the pre-defined global \`async setElementStyles(el: Element, styles: object)\` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.
+* **CRITICAL** Only get styles that might be relevant to the user request.
+* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.
+* **CRITICAL** Consider that \`data\` variable from the previous function calls are not available in a new function call.
+
+For example, the code to change element styles:
+
+\`\`\`
+await setElementStyles($0, {
+  color: 'blue',
+});
+\`\`\`
+
+For example, the code to get overlapping elements:
+
+\`\`\`
+const data = {
+  overlappingElements: Array.from(document.querySelectorAll('*'))
+    .filter(el => {
+      const rect = el.getBoundingClientRect();
+      const popupRect = $0.getBoundingClientRect();
+      return (
+        el !== $0 &&
+        rect.left < popupRect.right &&
+        rect.right > popupRect.left &&
+        rect.top < popupRect.bottom &&
+        rect.bottom > popupRect.top
+      );
+    })
+    .map(el => ({
+      tagName: el.tagName,
+      id: el.id,
+      className: el.className,
+      zIndex: window.getComputedStyle(el)['z-index']
+    }))
+};
+\`\`\`
+`,
+      },
+      explanation: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'Explain why you want to run this code',
+      },
+      title: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'Provide a summary of what the code does. For example, "Checking related element styles".',
+      },
+    },
+    required: ['code', 'explanation', 'title'],
+  };
+
+  displayInfoFromArgs(params: ExecuteJavaScriptArgs): {
+    title: string,
+    thought: string,
+    action: string,
+  } {
+    return {
+      title: params.title,
+      thought: params.explanation,
+      action: params.code,
+    };
+  }
+
+  async handler(
+      params: ExecuteJavaScriptArgs,
+      context: ToolContext,
+      options?: FunctionHandlerOptions,
+      ): Promise<FunctionCallHandlerResult<unknown>> {
+    const executionNode = context.getExecutionContextNode?.() ?? null;
+    if (!executionNode) {
+      return {error: 'Error: Could not find the context node for execution.'};
+    }
+
+    const executionMode = Root.Runtime.hostConfig.devToolsFreestyler?.executionMode ??
+        Root.Runtime.HostConfigFreestylerExecutionMode.ALL_SCRIPTS;
+
+    const changes = context.changeManager;
+    const createExtensionScope = context.createExtensionScope;
+    if (!changes || !createExtensionScope) {
+      return {error: 'Internal Error: Required change manager or extension scope creator is missing.'};
+    }
+
+    const executor = new JavascriptExecutor({
+      executionMode,
+      getContextNode: () => executionNode,
+      createExtensionScope,
+      changes,
+    },
+                                            context.execJs);
+
+    return await executor.executeAction(params.code, options);
+  }
+}

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

@@ -5,7 +5,7 @@
 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} from '../agents/AiAgent.js';
+import type {ComputedStyleAiWidget, FunctionCallHandlerResult, FunctionHandlerOptions} from '../agents/AiAgent.js';
 import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 import {debugLog} from '../debug.js';
 
@@ -69,7 +69,11 @@ export class GetStylesTool implements Tool<GetStylesArgs, unknown> {
     };
   }
 
-  async handler(params: GetStylesArgs, context: ToolContext): Promise<FunctionCallHandlerResult<unknown>> {
+  async handler(
+      params: GetStylesArgs,
+      context: ToolContext,
+      _options?: FunctionHandlerOptions,
+      ): Promise<FunctionCallHandlerResult<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/Tool.ts

@@ -3,13 +3,26 @@
 // found in the LICENSE file.
 
 import type * as Host from '../../../core/host/host.js';
-import type {ConversationContext, FunctionCallHandlerResult,} from '../agents/AiAgent.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+import type {ConversationContext, FunctionCallHandlerResult, FunctionHandlerOptions} from '../agents/AiAgent.js';
+import type {executeJsCode} from '../agents/ExecuteJavascript.js';
+import type {ChangeManager} from '../ChangeManager.js';
 
 /**
  * Context provided to the tool's handler execution.
  */
 export interface ToolContext {
   conversationContext: ConversationContext<unknown>|null;
+  changeManager?: ChangeManager;
+  createExtensionScope?: (changes: ChangeManager) => {
+    install(): Promise<void>, uninstall(): Promise<void>,
+  };
+  execJs?: typeof executeJsCode;
+  /**
+   * Returns the DOM node that acts as the execution context (i.e. `$0` inside the execution context)
+   * for running JavaScript.
+   */
+  getExecutionContextNode?: () => SDK.DOMModel.DOMNode | null;
 }
 
 /**
@@ -18,6 +31,7 @@ export interface ToolContext {
 export type ToolArgs = Record<string, unknown>;
 
 export const enum ToolName {
+  EXECUTE_JAVASCRIPT = 'executeJavaScript',
   GET_STYLES = 'getStyles',
 }
 
@@ -51,5 +65,6 @@ export interface Tool<Args extends ToolArgs = ToolArgs, ReturnType = unknown, >
   handler(
       args: Args,
       context: ToolContext,
+      options?: FunctionHandlerOptions,
       ): Promise<FunctionCallHandlerResult<ReturnType>>;
 }

package/front_end/models/ai_assistance/tools/ToolRegistry.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 {ExecuteJavaScriptTool} from './ExecuteJavaScript.js';
 import {GetStylesTool} from './GetStyles.js';
 import {type Tool, ToolName} from './Tool.js';
 
@@ -10,6 +11,7 @@ import {type Tool, ToolName} from './Tool.js';
  * Keep this type concrete (no type-erasure) to preserve exact tool types.
  */
 export const TOOLS = {
+  [ToolName.EXECUTE_JAVASCRIPT]: new ExecuteJavaScriptTool(),
   [ToolName.GET_STYLES]: new GetStylesTool(),
 };