chrome-devtools-frontend 1.0.1643099 → 1.0.1645245

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

@@ -509,8 +509,8 @@ export abstract class AiAgent<T> {
     this.#allowedOrigin = opts.allowedOrigin;
   }
 
-  async enhanceQuery(query: string, selected: ConversationContext<T>|null, multimodalInputType?: MultimodalInputType):
-      Promise<string>;
+  async enhanceQuery(query: string, selected: ConversationContext<T>|null,
+                     multimodalInputType?: MultimodalInputType): Promise<string>;
   async enhanceQuery(query: string): Promise<string> {
     return query;
   }
@@ -557,9 +557,21 @@ export abstract class AiAgent<T> {
     return undefined;
   }
 
-  buildRequest(
-      part: Host.AidaClient.Part|Host.AidaClient.Part[],
-      role: Host.AidaClient.Role.USER|Host.AidaClient.Role.ROLE_UNSPECIFIED): Host.AidaClient.DoConversationRequest {
+  /**
+   * Preamble features appended to the `client_version` in metadata.
+   * This is required ONLY for the Styling Agent for legacy reasons to serve
+   * different server-side preambles based on the Chrome version.
+   * Other agents should NOT set or override this.
+   * If you are curious about this, look for `do_conversation_handler.cc` in
+   * Google3 or chat to @jacktfranklin.
+   */
+  preambleFeatures(): string[] {
+    return [];
+  }
+
+  buildRequest(part: Host.AidaClient.Part|Host.AidaClient.Part[],
+               role: Host.AidaClient.Role.USER|
+               Host.AidaClient.Role.ROLE_UNSPECIFIED): Host.AidaClient.DoConversationRequest {
     const parts = Array.isArray(part) ? part : [part];
     const currentMessage: Host.AidaClient.Content = {
       parts,
@@ -600,7 +612,8 @@ export abstract class AiAgent<T> {
         disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
         string_session_id: this.#sessionId,
         user_tier: userTier,
-        client_version: Root.Runtime.getChromeVersion(),
+        client_version:
+            Root.Runtime.getChromeVersion() + this.preambleFeatures().map(feature => `+${feature}`).join(''),
       },
 
       functionality_type: enableAidaFunctionCalling ? Host.AidaClient.FunctionalityType.AGENTIC_CHAT :

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

@@ -27,7 +27,7 @@ import {
   type RequestOptions,
 } from './AiAgent.js';
 import {FileContext} from './FileAgent.js';
-import {RequestContext} from './NetworkAgent.js';
+import {getRequestContextOrigin, RequestContext} from './NetworkAgent.js';
 import {PerformanceTraceContext} from './PerformanceAgent.js';
 import {StorageContext} from './StorageAgent.js';
 
@@ -146,7 +146,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
         let hasCrossOriginRequest = false;
         const requestsToShow: NetworkRequest[] = [];
         for (const request of Logs.NetworkLog.NetworkLog.instance().requests()) {
-          const documentOrigin = Common.ParsedURL.ParsedURL.extractOrigin(request.documentURL);
+          const requestOrigin = getRequestContextOrigin(request);
           /**
            * NOTE: this origin check does not ensure that all the requests are
            * from the same origin as the target page. Instead, it ensures that
@@ -155,7 +155,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
            * during the loading of the target page, and do not leak URLs from
            * other pages.
            */
-          if (origin && documentOrigin !== origin) {
+          if (origin && requestOrigin !== origin) {
             hasCrossOriginRequest = true;
             continue;
           }
@@ -230,8 +230,8 @@ export class ContextSelectionAgent extends AiAgent<never> {
             return false;
           }
 
-          const documentOrigin = Common.ParsedURL.ParsedURL.extractOrigin(req.documentURL);
-          return !origin || documentOrigin === origin;
+          const requestOrigin = getRequestContextOrigin(req);
+          return !origin || requestOrigin === origin;
         });
 
         if (request) {

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

@@ -12,9 +12,7 @@ import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
 import {FREESTYLER_WORLD_NAME} from '../injected.js';
 
-import type {
-  AgentOptions as BaseAgentOptions, FunctionCallHandlerResult, FunctionDeclaration, FunctionHandlerOptions,} from
-  './AiAgent.js';
+import type {AgentOptions as BaseAgentOptions, FunctionCallHandlerResult, FunctionHandlerOptions,} from './AiAgent.js';
 
 const lockedString = i18n.i18n.lockedString;
 
@@ -28,97 +26,6 @@ export interface ExecuteJsAgentOptions extends BaseAgentOptions {
   execJs?: typeof executeJsCode;
 }
 
-// TODO(crbug.com/510206549): De-duplicate this function by migrating AccessibilityAgent to use
-// the registry-based ExecuteJavaScriptTool in tools/ExecuteJavaScript.ts.
-export function executeJavaScriptFunction(executor: JavascriptExecutor): FunctionDeclaration<
-    {
-      title: string,
-      explanation: string,
-      code: string,
-    },
-    unknown> {
-  return {
-    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.',
-    parameters: {
-      type: Host.AidaClient.ParametersTypes.OBJECT,
-      description: '',
-      nullable: false,
-      properties: {
-        code: {
-          type: Host.AidaClient.ParametersTypes.STRING,
-          description:
-              `JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.
-
-# Instructions
-
-* To return data, define a top-level \`data\` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to \`data\`.
-* If you modify styles on an element, ALWAYS call the pre-defined global \`async setElementStyles(el: Element, styles: object)\` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.
-* **CRITICAL** Only get styles that might be relevant to the user request.
-* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.
-* **CRITICAL** Consider that \`data\` variable from the previous function calls are not available in a new function call.
-
-For example, the code to change element styles:
-
-\`\`\`
-await setElementStyles($0, {
-  color: 'blue',
-});
-\`\`\`
-
-For example, the code to get overlapping elements:
-
-\`\`\`
-const data = {
-  overlappingElements: Array.from(document.querySelectorAll('*'))
-    .filter(el => {
-      const rect = el.getBoundingClientRect();
-      const popupRect = $0.getBoundingClientRect();
-      return (
-        el !== $0 &&
-        rect.left < popupRect.right &&
-        rect.right > popupRect.left &&
-        rect.top < popupRect.bottom &&
-        rect.bottom > popupRect.top
-      );
-    })
-    .map(el => ({
-      tagName: el.tagName,
-      id: el.id,
-      className: el.className,
-      zIndex: window.getComputedStyle(el)['z-index']
-    }))
-};
-\`\`\`
-`,
-        },
-        explanation: {
-          type: Host.AidaClient.ParametersTypes.STRING,
-          description: 'Explain why you want to run this code',
-        },
-        title: {
-          type: Host.AidaClient.ParametersTypes.STRING,
-          description: 'Provide a summary of what the code does. For example, "Checking related element styles".',
-        },
-      },
-      required: ['code', 'explanation', 'title']
-    },
-    displayInfoFromArgs: params => {
-      return {
-        title: params.title,
-        thought: params.explanation,
-        action: params.code,
-      };
-    },
-    handler: async (
-        params,
-        options,
-        ) => {
-      return await executor.executeAction(params.code, options);
-    },
-  };
-}
-
 export async function executeJsCode(
     functionDeclaration: string,
     {throwOnSideEffect, contextNode}: {throwOnSideEffect: boolean, contextNode: SDK.DOMModel.DOMNode|null}):

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

@@ -2,11 +2,14 @@
 // 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 i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
+import {extractContextOrigin} from '../AiOrigins.js';
 import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
 
 import {
@@ -98,6 +101,24 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
+/**
+ * Returns the origin for a network request in the AI context.
+ *
+ * To prevent cross-origin prompt injection attacks, HAR-imported requests
+ * are isolated from live pages. We assign them a virtual origin
+ * (`imported-har://${domain}`) so they do not share the origin of live pages
+ * (e.g., `https://${domain}`). This forces a conversation reset when transitioning
+ * between imported HAR data and live pages.
+ */
+export function getRequestContextOrigin(request: SDK.NetworkRequest.NetworkRequest): string {
+  const origin = extractContextOrigin(request.documentURL);
+  if (request.isImportedHar()) {
+    const parsed = Common.ParsedURL.ParsedURL.fromString(origin as Platform.DevToolsPath.UrlString);
+    return `imported-har://${parsed ? parsed.domain() : origin}`;
+  }
+  return origin;
+}
+
 export class RequestContext extends ConversationContext<SDK.NetworkRequest.NetworkRequest> {
   #request: SDK.NetworkRequest.NetworkRequest;
   #calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
@@ -119,6 +140,10 @@ export class RequestContext extends ConversationContext<SDK.NetworkRequest.Netwo
     return this.#request.documentURL;
   }
 
+  override getOrigin(): string {
+    return getRequestContextOrigin(this.#request);
+  }
+
   override getItem(): SDK.NetworkRequest.NetworkRequest {
     return this.#request;
   }

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

@@ -15,6 +15,7 @@ import * as Logs from '../../logs/logs.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as TextUtils from '../../text_utils/text_utils.js';
 import * as Trace from '../../trace/trace.js';
+import {extractContextOrigin} from '../AiOrigins.js';
 import {sanitizeHeaders} from '../data_formatters/NetworkRequestFormatter.js';
 import {
   PerformanceInsightFormatter,
@@ -256,6 +257,27 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
     }
   }
 
+  /**
+   * Returns the origin for a performance trace in the AI context.
+   *
+   * To prevent cross-origin prompt injection attacks, imported traces
+   * are isolated from live pages. We assign them a virtual origin
+   * (`imported-trace://${domain}`) so they do not share the origin of live pages
+   * (e.g., `https://${domain}`). This forces a conversation reset when transitioning
+   * between imported trace data and live pages.
+   */
+  override getOrigin(): string {
+    const parsedTrace = this.#focus.parsedTrace;
+    const url = this.getURL();
+    const origin = extractContextOrigin(url);
+    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace);
+    if (!isFresh) {
+      const parsed = Common.ParsedURL.ParsedURL.fromString(origin as Platform.DevToolsPath.UrlString);
+      return `imported-trace://${parsed ? parsed.domain() : origin}`;
+    }
+    return origin;
+  }
+
   override getItem(): AgentFocus {
     return this.#focus;
   }
@@ -729,11 +751,26 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     yield* super.run(initialQuery, options);
   }
 
+  /**
+   * Clears performance-agent-specific caches and state.
+   * This is called when the conversation needs to be reset (e.g. on navigation)
+   * to prevent stale formatters, trace facts, or selection contexts from leaking
+   * into subsequent runs.
+   */
   override clearCache(): void {
+    super.clearCache();
     // Clear the function call cache to prevent stashed tool execution results
     // (which might contain cross-origin resource content fetched before navigation
     // was detected) from being replayed as facts in subsequent runs.
     this.#functionCallCacheForFocus.clear();
+    // Reset the formatter and trace facts so they are recreated with the
+    // correct target and origin on the next execution.
+    this.#formatter = null;
+    this.#traceFacts = [];
+    this.#lastEventForEnhancedQuery = undefined;
+    this.#lastInsightForEnhancedQuery = undefined;
+    this.#additionalSelectionsForDisclosure = [];
+    this.#callTreeContextSet = new WeakSet();
   }
 
   #createFactForTraceSummary(): void {

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

@@ -2,6 +2,35 @@
 
 This directory contains the implementations of various AI agents used in the AI Assistance panel in Chrome DevTools.
 
+## Agent Lifecycle & State Management
+
+AI Agents can maintain internal stateful variables to optimize performance or store context (e.g., stashed tool results, formatters, or instruction flags). However, this state must be carefully managed to prevent security leaks (such as cross-origin data leaks after page navigation) or stale results.
+
+### Cache Clearing (`clearCache()`)
+
+The `AiAgent` base class defines a `clearCache()` method. This method is automatically invoked by the system when:
+- An execution error occurs.
+- The user aborts the execution.
+- A cross-origin navigation is detected (via the top-level origin blocking mechanism).
+
+#### Overriding `clearCache()` in Subclasses
+
+If you introduce new stateful member variables in an `AiAgent` subclass, you **must** override `clearCache()` to reset them:
+
+1. Always call `super.clearCache()` to ensure base class cleanup is executed.
+2. Reset any subclass-specific state (e.g., setting formatters to `null`, clearing lists, resetting boolean flags).
+
+Example from `PerformanceAgent`:
+```typescript
+  override clearCache(): void {
+    super.clearCache();
+    this.#functionCallCacheForFocus.clear();
+    this.#formatter = null;
+    this.#traceFacts = [];
+    // ... reset other stateful fields
+  }
+```
+
 ## Performance Agent
 
 The `PerformanceAgent` analyzes performance traces. This documentation details the specific data provided to the agent and the data it can retrieve via functions.
@@ -70,3 +99,31 @@ The agent can request additional data by calling functions. Here is the data the
 #### `selectEventByKey`
 - **Arguments**: `eventKey` (string)
 - **Data Returned to Agent**: Confirmation of success or an error message. (Note: This function also modifies the DevTools UI by selecting the event in the flamechart).
+
+## Styling Agent
+
+The `StylingAgent` assists with CSS styling and layout questions. It can interact with the page to inspect styles, execute Javascript, and optionally emulate devices or vision deficiencies.
+
+### Initial Data Provided to the Agent
+
+The agent is initialized with the selected DOM node context.
+
+### Data Retrieval & Action Functions (Tools)
+
+The agent can call the following functions to retrieve more details or perform actions:
+
+#### `getStyles`
+- **Arguments**: None (it uses the currently selected DOM node).
+- **Data Returned to Agent**: Computed styles and authored styles (matching rules, active stylesheets, etc.) for the selected node.
+
+#### `executeJavaScript`
+- **Arguments**: `query` (string)
+- **Data Returned to Agent**: The result of executing the JavaScript query in the context of the page.
+
+#### `addElementAnnotation`
+- **Arguments**: `elementId` (string), `annotationMessage` (string)
+- **Data Returned to Agent**: Confirmation of success or an error message. (Note: This function also modifies the DevTools UI by adding a visual annotation to the node).
+
+#### `activateDeviceEmulation`
+- **Arguments**: `deviceName` (string), `visionDeficiency` (string, optional)
+- **Data Returned to Agent**: Confirmation of success or an error message. (Note: This function modifies the DevTools UI by enabling device and/or vision deficiency emulation).

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.
@@ -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 {

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

@@ -191,9 +191,18 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       description: getStylesTool.description,
       parameters: getStylesTool.parameters,
       displayInfoFromArgs: getStylesTool.displayInfoFromArgs,
-      handler: args => getStylesTool.handler(args, {
-        conversationContext: this.context ?? null,
-      }),
+      handler: async args => {
+        const context = this.context;
+        if (!context) {
+          return {error: 'Error: Could not find the currently selected element.'};
+        }
+        return await getStylesTool.handler(args, {
+          conversationContext: context,
+          getTarget: () =>
+              SDK.TargetManager.TargetManager.instance().primaryPageTarget() ?? context.getItem().domModel().target(),
+          getEstablishedOrigin: () => context.getOrigin(),
+        });
+      },
     });
 
     const executeJsTool = ToolRegistry.get(ToolName.EXECUTE_JAVASCRIPT);
@@ -211,6 +220,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
             changeManager: this.#changes,
             createExtensionScope: this.#createExtensionScope.bind(this),
             execJs: this.#execJs,
+            getExecutionContextNode: () => this.context?.getItem() ?? null,
           },
           options,
           ),
@@ -280,6 +290,24 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
     });
   }
 
+  /**
+   * Clears styling-agent-specific caches and state.
+   * Resets cached emulation data (screenshots, accessibility tree) and the
+   * instructions flag to ensure they are re-evaluated in subsequent queries.
+   */
+  override clearCache(): void {
+    super.clearCache();
+    // Reset emulation state so that subsequent queries will re-initialize
+    // emulation details and fetch fresh data.
+    this.#greenDevEmulationScreenshot = null;
+    this.#greenDevEmulationAxTree = null;
+    this.#hasAddedEmulationInstructions = false;
+  }
+
+  override preambleFeatures(): string[] {
+    return ['function_calling'];
+  }
+
   #getSelectedNode(): SDK.DOMModel.DOMNode|null {
     return this.context?.getItem() ?? null;
   }

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

@@ -6,12 +6,13 @@ 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 {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 
 import {
+  type BaseToolCapability,
+  type PageExecutionCapability,
+  type StyleMutationCapability,
   type Tool,
   type ToolArgs,
-  type ToolContext,
   ToolName,
 } from './Tool.js';
 
@@ -21,7 +22,8 @@ export interface ExecuteJavaScriptArgs extends ToolArgs {
   title: string;
 }
 
-export class ExecuteJavaScriptTool implements Tool<ExecuteJavaScriptArgs, unknown> {
+export class ExecuteJavaScriptTool implements
+    Tool<ExecuteJavaScriptArgs, unknown, BaseToolCapability&PageExecutionCapability&StyleMutationCapability> {
   readonly name = ToolName.EXECUTE_JAVASCRIPT;
 
   readonly description =
@@ -105,33 +107,22 @@ const data = {
 
   async handler(
       params: ExecuteJavaScriptArgs,
-      context: ToolContext,
+      context: BaseToolCapability&PageExecutionCapability&StyleMutationCapability,
       options?: FunctionHandlerOptions,
       ): Promise<FunctionCallHandlerResult<unknown>> {
-    const activeContext = context.conversationContext;
-    if (!activeContext || !(activeContext instanceof DOMNodeContext)) {
-      return {error: 'Error: Could not find the currently selected element.'};
-    }
-
-    const selectedNode = activeContext.getItem();
-    if (!selectedNode) {
-      return {error: 'Error: Could not find the currently selected element.'};
+    const executionNode = context.getExecutionContextNode();
+    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: () => selectedNode,
-      createExtensionScope,
-      changes,
+      getContextNode: () => executionNode,
+      createExtensionScope: context.createExtensionScope,
+      changes: context.changeManager,
     },
                                             context.execJs);
 

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

@@ -9,7 +9,14 @@ import type {ComputedStyleAiWidget, FunctionCallHandlerResult, FunctionHandlerOp
 import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 import {debugLog} from '../debug.js';
 
-import {type Tool, type ToolArgs, type ToolContext, ToolName} from './Tool.js';
+import {
+  type BaseToolCapability,
+  type OriginLockCapability,
+  type TargetCapability,
+  type Tool,
+  type ToolArgs,
+  ToolName,
+} from './Tool.js';
 
 export interface GetStylesArgs extends ToolArgs {
   elements: number[];
@@ -17,7 +24,8 @@ export interface GetStylesArgs extends ToolArgs {
   explanation: string;
 }
 
-export class GetStylesTool implements Tool<GetStylesArgs, unknown> {
+export class GetStylesTool implements
+    Tool<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.
@@ -71,34 +79,33 @@ export class GetStylesTool implements Tool<GetStylesArgs, unknown> {
 
   async handler(
       params: GetStylesArgs,
-      context: ToolContext,
+      context: BaseToolCapability&TargetCapability&OriginLockCapability,
       _options?: FunctionHandlerOptions,
       ): Promise<FunctionCallHandlerResult<unknown>> {
     const widgets: ComputedStyleAiWidget[] = [];
     const result:
         Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
 
-    const activeContext = context.conversationContext;
-    if (!activeContext || !(activeContext instanceof DOMNodeContext)) {
-      return {error: 'Error: Could not find the currently selected element.'};
+    const target = context.getTarget();
+    if (!target) {
+      return {error: 'Error: Could not find the inspected page.'};
     }
 
-    const selectedNode = activeContext.getItem();
-    if (!selectedNode) {
-      return {error: 'Error: Could not find the currently selected element.'};
+    const establishedOrigin = context.getEstablishedOrigin();
+    if (!establishedOrigin) {
+      return {error: 'Error: Origin lock is not established.'};
     }
 
     for (const uid of params.elements) {
       result[uid] = {computed: {}, authored: {}};
       debugLog(`Action to execute: uid=${uid}`);
-      const node =
-          new SDK.DOMModel.DeferredDOMNode(selectedNode.domModel().target(), uid as Protocol.DOM.BackendNodeId);
+      const node = new SDK.DOMModel.DeferredDOMNode(target, uid as Protocol.DOM.BackendNodeId);
       const resolved = await node.resolvePromise();
       if (!resolved) {
         return {error: 'Error: Could not find the element with uid=' + uid};
       }
       const newContext = new DOMNodeContext(resolved);
-      if (activeContext.getOrigin() !== newContext.getOrigin()) {
+      if (establishedOrigin !== newContext.getOrigin()) {
         return {error: 'Error: Node does not belong to the current origin.'};
       }
       const styles = await resolved.domModel().cssModel().getComputedStyle(resolved.id);