chrome-devtools-frontend 1.0.1642845 → 1.0.1643099

package/SECURITY.md

@@ -22,6 +22,7 @@ Chrome DevTools is a privileged web app running in a sandboxed renderer process,
 * **Legitimate Data Exposure:** Displaying local user data, cookies, tokens, or auth headers within UI panels.
 * **Local Data Persistence:** Saving user-initiated traces, heaps, profiles, or logs to disk.
 * **Correctness & Availability:** Stale, misleading, or missing UI information (classified as functional bugs).
+* **Denial of Service:** Chrome extensions or debug targets that disrupt DevTools' availability, e.g. through performance degradation.
 * **Disabled-by-default Experimental Features:** Experimental features or capabilities that are disabled by default, e.g. requiring a command-line flag to be activated, or a specific runtime setting within DevTools to be manually turned on.
 
 ## Specific Severity Classification Rules (S1–S4)

package/front_end/core/host/UserMetrics.ts

@@ -496,7 +496,8 @@ export enum Action {
   AiCodeGenerationRequestTriggeredFromSources = 205,
   AiCodeCompletionFreCompletedFromConsole = 206,
   AiCodeCompletionFreCompletedFromSources = 207,
-  MAX_VALUE = 208,
+  AiAssistanceOpenedFromStoragePanelFloatingButton = 208,
+  MAX_VALUE = 209,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -339,6 +339,10 @@ export class TargetBase {
     return this.getAgent('Autofill');
   }
 
+  adsAgent(): ProtocolProxyApi.AdsApi {
+    return this.getAgent('Ads');
+  }
+
   browserAgent(): ProtocolProxyApi.BrowserApi {
     return this.getAgent('Browser');
   }

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -196,6 +196,36 @@ function queryMatches(style: CSSStyleDeclaration): boolean {
   return true;
 }
 
+function treeScopeDistance(node: DOMNode, property: CSSProperty): number {
+  if (!property.ownerStyle.parentRule && property.ownerStyle.type !== Type.Inline) {
+    return -1;
+  }
+  const root = node.getTreeRoot();
+  const nodeId = property.ownerStyle.parentRule?.treeScope ?? root?.backendNodeId();
+  if (nodeId === undefined) {
+    return -1;
+  }
+  return distanceToTreeScope(node, nodeId);
+}
+
+/**
+ * Distance from node to parent that is the tree scope. Returns -1 if tree scope is not found.
+ *
+ * @param node The child node to start from.
+ * @param treeScope The tree scope node ID.
+ * @returns The distance to the tree scope node, or -1 if not found.
+ */
+export function distanceToTreeScope(node: DOMNode, treeScope: Protocol.DOM.BackendNodeId): number {
+  let distance = 0;
+  for (let ancestor: DOMNode|null = node; ancestor; ancestor = ancestor.parentNode) {
+    if (ancestor.backendNodeId() === treeScope) {
+      return distance;
+    }
+    distance++;
+  }
+  return -1;
+}
+
 export interface CSSMatchedStylesPayload {
   cssModel: CSSModel;
   node: DOMNode;
@@ -307,7 +337,7 @@ export class CSSMatchedStyles {
   #customHighlightPseudoDOMCascades?: Map<string, DOMInheritanceCascade>;
   #functionRules: CSSFunctionRule[];
   #atRules: CSSAtRule[];
-  #functionRuleMap = new Map<string, CSSFunctionRule>();
+  #functionRuleMap = new Map<string, CSSFunctionRule[]>();
   #environmentVariables: Record<string, string> = {};
 
   static async create(payload: CSSMatchedStylesPayload): Promise<CSSMatchedStyles> {
@@ -381,7 +411,9 @@ export class CSSMatchedStyles {
     }
 
     for (const rule of this.#functionRules) {
-      this.#functionRuleMap.set(rule.functionName().text, rule);
+      const rules = this.#functionRuleMap.get(rule.functionName().text) ?? [];
+      rules.push(rule);
+      this.#functionRuleMap.set(rule.functionName().text, rules);
     }
   }
 
@@ -790,9 +822,25 @@ export class CSSMatchedStyles {
     return this.#registeredPropertyMap.get(name);
   }
 
-  getRegisteredFunction(name: string): string|undefined {
-    const functionRule = this.#functionRuleMap.get(name);
-    return functionRule ? functionRule.nameWithParameters() : undefined;
+  getRegisteredFunction(name: string, sourceProperty: CSSProperty):
+      {treeScopeDistance: number, registeredFunction?: string} {
+    const minTreeScopeDistance = treeScopeDistance(this.#node, sourceProperty);
+    const functionRules = this.#functionRuleMap.get(name) ?? [];
+    let result: {treeScopeDistance: number, registeredFunction?: string} = {treeScopeDistance: -1};
+    for (const functionRule of functionRules) {
+      if (!functionRule.treeScope) {
+        continue;
+      }
+      const distance = distanceToTreeScope(this.#node, functionRule.treeScope);
+      if (distance === -1 || distance < minTreeScopeDistance) {
+        continue;
+      }
+
+      if (result.treeScopeDistance === -1 || distance < result.treeScopeDistance) {
+        result = {registeredFunction: functionRule.nameWithParameters(), treeScopeDistance: distance};
+      }
+    }
+    return result;
   }
 
   functionRules(): CSSFunctionRule[] {
@@ -1045,26 +1093,6 @@ class NodeCascade {
     }
   }
 
-  #treeScopeDistance(property: CSSProperty): number {
-    if (!property.ownerStyle.parentRule && property.ownerStyle.type !== Type.Inline) {
-      return -1;
-    }
-    const root = this.#node.getTreeRoot();
-    const nodeId = property.ownerStyle.parentRule?.treeScope ?? root?.backendNodeId();
-    if (nodeId === undefined) {
-      return -1;
-    }
-
-    let distance = 0;
-    for (let ancestor: DOMNode|null = this.#node; ancestor; ancestor = ancestor.parentNode) {
-      if (ancestor.backendNodeId() === nodeId) {
-        return distance;
-      }
-      distance++;
-    }
-    return -1;
-  }
-
   #needsCascadeContextStep(): boolean {
     if (!this.#node.isInShadowTree()) {
       return false;
@@ -1084,7 +1112,8 @@ class NodeCascade {
     const activeProperty = this.activeProperties.get(canonicalName);
     if (activeProperty?.important && !propertyWithHigherSpecificity.important ||
         activeProperty && this.#needsCascadeContextStep() &&
-            this.#treeScopeDistance(activeProperty) > this.#treeScopeDistance(propertyWithHigherSpecificity)) {
+            treeScopeDistance(this.#node, activeProperty) >
+                treeScopeDistance(this.#node, propertyWithHigherSpecificity)) {
       this.propertiesState.set(propertyWithHigherSpecificity, PropertyState.OVERLOADED);
       return;
     }

package/front_end/core/sdk/CSSRule.ts

@@ -418,6 +418,7 @@ export class CSSFunctionRule extends CSSRule {
         styleSheetId: payload.styleSheetId
       },
       header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: payload.originTreeScopeNodeId
     });
     this.#name = new CSSValue(payload.name);
     this.#parameters = payload.parameters.map(({name}) => name);

package/front_end/core/sdk/DebuggerModel.ts

@@ -535,6 +535,11 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     return this.#scripts.get(scriptId) || null;
   }
 
+  isWasm(scriptId: string): boolean {
+    const script = this.scriptForId(scriptId);
+    return script ? script.isWasm() : false;
+  }
+
   /**
    * Returns all `Script` objects with the same provided `sourceURL`. The
    * resulting array is sorted by time with the newest `Script` in the front.

package/front_end/entrypoints/greendev_floaty/FloatyEntrypoint.ts

@@ -41,7 +41,7 @@ class GreenDevFloaty {
   #playButton!: HTMLButtonElement;
   #node?: SDK.DOMModel.DOMNode;
   #agent?: AiAssistance.GreenDevAgent.GreenDevAgent|AiAssistance.StylingAgent.StylingAgent;
-  #nodeContext?: AiAssistance.StylingAgent.NodeContext;
+  #nodeContext?: AiAssistance.DOMNodeContext.DOMNodeContext;
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   #syncChannel: BroadcastChannel;
   #isFloatyWindow: boolean;
@@ -341,7 +341,7 @@ class GreenDevFloaty {
             });
       } else {
         this.#agent = new AiAssistance.StylingAgent.StylingAgent({aidaClient});
-        this.#nodeContext = new AiAssistance.StylingAgent.NodeContext(this.#node);
+        this.#nodeContext = new AiAssistance.DOMNodeContext.DOMNodeContext(this.#node);
       }
     }
 
@@ -428,7 +428,8 @@ class GreenDevFloaty {
             'Could not get the backendNodeId for the selected element.';
 
         // --- Get some context information about the selected node ---
-        const elementContext = await AiAssistance.StylingAgent.StylingAgent.describeElement(this.#node);
+        const domNodeContext = new AiAssistance.DOMNodeContext.DOMNodeContext(this.#node);
+        const elementContext = await domNodeContext.describe();
 
         // Now construct the full context.
         const context = `# Page URL

package/front_end/entrypoints/greendev_floaty/greendev_floaty.ts

@@ -20,7 +20,8 @@ import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 
 const {AidaClient} = Host.AidaClient;
 const {ResponseType} = AiAssistance.AiAgent;
-const {NodeContext, StylingAgent} = AiAssistance.StylingAgent;
+const {DOMNodeContext} = AiAssistance.DOMNodeContext;
+const {StylingAgent} = AiAssistance.StylingAgent;
 
 class GreenDevFloaty {
   #chatContainer: HTMLDivElement;
@@ -28,7 +29,7 @@ class GreenDevFloaty {
   #playButton: HTMLButtonElement;
   #node?: SDK.DOMModel.DOMNode;
   #agent?: StylingAgent;
-  #nodeContext?: NodeContext;
+  #nodeContext?: DOMNodeContext;
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   // Switching this to false can help while investigating tool conflicts.
   #highlightNodeOnWindowFocus = false;
@@ -170,7 +171,7 @@ class GreenDevFloaty {
     if (!this.#agent) {
       const aidaClient = new AidaClient();
       this.#agent = new StylingAgent({aidaClient});
-      this.#nodeContext = new NodeContext(this.#node);
+      this.#nodeContext = new DOMNodeContext(this.#node);
     }
 
     this.#addMessage(query, true);

package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.ts

@@ -876,7 +876,7 @@ export abstract class HeapSnapshot {
   readonly #progress: HeapSnapshotProgress;
   readonly #noDistance = -5;
   rootNodeIndexInternal = 0;
-  #snapshotDiffs: Record<string, Record<string, HeapSnapshotModel.HeapSnapshotModel.Diff>> = {};
+  #snapshotDiffs: Record<number, Record<string, HeapSnapshotModel.HeapSnapshotModel.Diff>> = {};
   #aggregatesForDiff?: {
     interfaceDefinitions: string,
     aggregates: Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregateForDiff>,
@@ -2688,9 +2688,8 @@ export abstract class HeapSnapshot {
     throw new Error('Not implemented');
   }
 
-  calculateSnapshotDiff(
-      baseSnapshotId: string,
-      baseSnapshotAggregates: Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregateForDiff>):
+  calculateSnapshotDiff(baseSnapshotId: number,
+                        baseSnapshotAggregates: Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregateForDiff>):
       Record<string, HeapSnapshotModel.HeapSnapshotModel.Diff> {
     let snapshotDiff: Record<string, HeapSnapshotModel.HeapSnapshotModel.Diff> = this.#snapshotDiffs[baseSnapshotId];
     if (snapshotDiff) {
@@ -2976,7 +2975,7 @@ export abstract class HeapSnapshot {
     return {paths, limitsReached};
   }
 
-  createAddedNodesProvider(baseSnapshotId: string, classKey: string): HeapSnapshotNodesProvider {
+  createAddedNodesProvider(baseSnapshotId: number, classKey: string): HeapSnapshotNodesProvider {
     const snapshotDiff = this.#snapshotDiffs[baseSnapshotId];
     const diffForClass = snapshotDiff[classKey];
     return new HeapSnapshotNodesProvider(this, diffForClass.addedIndexes);

package/front_end/generated/InspectorBackendCommands.ts

@@ -435,7 +435,7 @@ inspectorBackend.registerCommand("DOM.getFrameOwner", [{"name": "frameId", "type
 inspectorBackend.registerCommand("DOM.getContainerForNode", [{"name": "nodeId", "type": "number", "optional": false, "description": "", "typeRef": "DOM.NodeId"}, {"name": "containerName", "type": "string", "optional": true, "description": "", "typeRef": null}, {"name": "physicalAxes", "type": "string", "optional": true, "description": "", "typeRef": "DOM.PhysicalAxes"}, {"name": "logicalAxes", "type": "string", "optional": true, "description": "", "typeRef": "DOM.LogicalAxes"}, {"name": "queriesScrollState", "type": "boolean", "optional": true, "description": "", "typeRef": null}, {"name": "queriesAnchored", "type": "boolean", "optional": true, "description": "", "typeRef": null}], ["nodeId"], "Returns the query container of the given node based on container query conditions: containerName, physical and logical axes, and whether it queries scroll-state or anchored elements. If no axes are provided and queriesScrollState is false, the style container is returned, which is the direct parent or the closest element with a matching container-name.");
 inspectorBackend.registerCommand("DOM.getQueryingDescendantsForContainer", [{"name": "nodeId", "type": "number", "optional": false, "description": "Id of the container node to find querying descendants from.", "typeRef": "DOM.NodeId"}], ["nodeIds"], "Returns the descendants of a container query container that have container queries against this container.");
 inspectorBackend.registerCommand("DOM.getAnchorElement", [{"name": "nodeId", "type": "number", "optional": false, "description": "Id of the positioned element from which to find the anchor.", "typeRef": "DOM.NodeId"}, {"name": "anchorSpecifier", "type": "string", "optional": true, "description": "An optional anchor specifier, as defined in https://www.w3.org/TR/css-anchor-position-1/#anchor-specifier. If not provided, it will return the implicit anchor element for the given positioned element.", "typeRef": null}], ["nodeId"], "Returns the target anchor element of the given anchor query according to https://www.w3.org/TR/css-anchor-position-1/#target.");
-inspectorBackend.registerCommand("DOM.forceShowPopover", [{"name": "nodeId", "type": "number", "optional": false, "description": "Id of the popover HTMLElement", "typeRef": "DOM.NodeId"}, {"name": "enable", "type": "boolean", "optional": false, "description": "If true, opens the popover and keeps it open. If false, closes the popover if it was previously force-opened.", "typeRef": null}], ["nodeIds"], "When enabling, this API force-opens the popover identified by nodeId and keeps it open until disabled.");
+inspectorBackend.registerCommand("DOM.forceShowPopover", [{"name": "nodeId", "type": "number", "optional": false, "description": "Id of the popover HTMLElement", "typeRef": "DOM.NodeId"}, {"name": "enable", "type": "boolean", "optional": false, "description": "If true, opens the popover and keeps it open. If false, closes the popover if it was previously force-opened.", "typeRef": null}, {"name": "invokerNodeId", "type": "number", "optional": true, "description": "Optional ID of the element invoking this popover, used to establish the implicit anchor. If not provided, it will fall back to the first invoker in the document, preferring elements with a popovertarget attribute over those with a commandfor attribute. Note that if there are multiple invokers, this is just an estimate.", "typeRef": "DOM.BackendNodeId"}], ["nodeIds"], "When enabling, this API force-opens the popover identified by nodeId and keeps it open until disabled.");
 inspectorBackend.registerType("DOM.BackendNode", [{"name": "nodeType", "type": "number", "optional": false, "description": "`Node`'s nodeType.", "typeRef": null}, {"name": "nodeName", "type": "string", "optional": false, "description": "`Node`'s nodeName.", "typeRef": null}, {"name": "backendNodeId", "type": "number", "optional": false, "description": "", "typeRef": "DOM.BackendNodeId"}]);
 inspectorBackend.registerType("DOM.Node", [{"name": "nodeId", "type": "number", "optional": false, "description": "Node identifier that is passed into the rest of the DOM messages as the `nodeId`. Backend will only push node with given `id` once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client.", "typeRef": "DOM.NodeId"}, {"name": "parentId", "type": "number", "optional": true, "description": "The id of the parent node if any.", "typeRef": "DOM.NodeId"}, {"name": "backendNodeId", "type": "number", "optional": false, "description": "The BackendNodeId for this node.", "typeRef": "DOM.BackendNodeId"}, {"name": "nodeType", "type": "number", "optional": false, "description": "`Node`'s nodeType.", "typeRef": null}, {"name": "nodeName", "type": "string", "optional": false, "description": "`Node`'s nodeName.", "typeRef": null}, {"name": "localName", "type": "string", "optional": false, "description": "`Node`'s localName.", "typeRef": null}, {"name": "nodeValue", "type": "string", "optional": false, "description": "`Node`'s nodeValue.", "typeRef": null}, {"name": "childNodeCount", "type": "number", "optional": true, "description": "Child count for `Container` nodes.", "typeRef": null}, {"name": "children", "type": "array", "optional": true, "description": "Child nodes of this node when requested with children.", "typeRef": "DOM.Node"}, {"name": "attributes", "type": "array", "optional": true, "description": "Attributes of the `Element` node in the form of flat array `[name1, value1, name2, value2]`.", "typeRef": "string"}, {"name": "documentURL", "type": "string", "optional": true, "description": "Document URL that `Document` or `FrameOwner` node points to.", "typeRef": null}, {"name": "baseURL", "type": "string", "optional": true, "description": "Base URL that `Document` or `FrameOwner` node uses for URL completion.", "typeRef": null}, {"name": "publicId", "type": "string", "optional": true, "description": "`DocumentType`'s publicId.", "typeRef": null}, {"name": "systemId", "type": "string", "optional": true, "description": "`DocumentType`'s systemId.", "typeRef": null}, {"name": "internalSubset", "type": "string", "optional": true, "description": "`DocumentType`'s internalSubset.", "typeRef": null}, {"name": "xmlVersion", "type": "string", "optional": true, "description": "`Document`'s XML version in case of XML documents.", "typeRef": null}, {"name": "name", "type": "string", "optional": true, "description": "`Attr`'s name.", "typeRef": null}, {"name": "value", "type": "string", "optional": true, "description": "`Attr`'s value.", "typeRef": null}, {"name": "pseudoType", "type": "string", "optional": true, "description": "Pseudo element type for this node.", "typeRef": "DOM.PseudoType"}, {"name": "pseudoIdentifier", "type": "string", "optional": true, "description": "Pseudo element identifier for this node. Only present if there is a valid pseudoType.", "typeRef": null}, {"name": "shadowRootType", "type": "string", "optional": true, "description": "Shadow root type.", "typeRef": "DOM.ShadowRootType"}, {"name": "frameId", "type": "string", "optional": true, "description": "Frame ID for frame owner elements.", "typeRef": "Page.FrameId"}, {"name": "contentDocument", "type": "object", "optional": true, "description": "Content document for frame owner elements.", "typeRef": "DOM.Node"}, {"name": "shadowRoots", "type": "array", "optional": true, "description": "Shadow root list for given element host.", "typeRef": "DOM.Node"}, {"name": "templateContent", "type": "object", "optional": true, "description": "Content document fragment for template elements.", "typeRef": "DOM.Node"}, {"name": "pseudoElements", "type": "array", "optional": true, "description": "Pseudo elements associated with this node.", "typeRef": "DOM.Node"}, {"name": "importedDocument", "type": "object", "optional": true, "description": "Deprecated, as the HTML Imports API has been removed (crbug.com/937746). This property used to return the imported document for the HTMLImport links. The property is always undefined now.", "typeRef": "DOM.Node"}, {"name": "distributedNodes", "type": "array", "optional": true, "description": "Distributed nodes for given insertion point.", "typeRef": "DOM.BackendNode"}, {"name": "isSVG", "type": "boolean", "optional": true, "description": "Whether the node is SVG.", "typeRef": null}, {"name": "compatibilityMode", "type": "string", "optional": true, "description": "", "typeRef": "DOM.CompatibilityMode"}, {"name": "assignedSlot", "type": "object", "optional": true, "description": "", "typeRef": "DOM.BackendNode"}, {"name": "isScrollable", "type": "boolean", "optional": true, "description": "", "typeRef": null}, {"name": "affectedByStartingStyles", "type": "boolean", "optional": true, "description": "", "typeRef": null}, {"name": "adoptedStyleSheets", "type": "array", "optional": true, "description": "", "typeRef": "DOM.StyleSheetId"}, {"name": "adProvenance", "type": "object", "optional": true, "description": "", "typeRef": "Network.AdProvenance"}]);
 inspectorBackend.registerType("DOM.DetachedElementInfo", [{"name": "treeNode", "type": "object", "optional": false, "description": "", "typeRef": "DOM.Node"}, {"name": "retainedNodeIds", "type": "array", "optional": false, "description": "", "typeRef": "DOM.NodeId"}]);

package/front_end/generated/protocol.ts

@@ -5849,6 +5849,13 @@ export namespace DOM {
      * popover if it was previously force-opened.
      */
     enable: boolean;
+    /**
+     * Optional ID of the element invoking this popover, used to establish the implicit anchor.
+     * If not provided, it will fall back to the first invoker in the document, preferring
+     * elements with a popovertarget attribute over those with a commandfor attribute. Note that
+     * if there are multiple invokers, this is just an estimate.
+     */
+    invokerNodeId?: BackendNodeId;
   }
 
   export interface ForceShowPopoverResponse extends ProtocolResponseWithError {

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -5,16 +5,26 @@
 import * as Host from '../../core/host/host.js';
 
 import {
-  type AgentOptions,
   AiAgent,
   type ContextResponse,
   type ConversationContext,
+  type MultimodalInputType,
   type RequestOptions,
   ResponseType
 } from './agents/AiAgent.js';
+import {type ExecuteJsAgentOptions, executeJsCode} from './agents/ExecuteJavascript.js';
+import {ChangeManager} from './ChangeManager.js';
+import {DOMNodeContext} from './contexts/DOMNodeContext.js';
 import {debugLog} from './debug.js';
+import {ExtensionScope} from './ExtensionScope.js';
 import type {Skill, SkillName} from './skills/Skill.js';
 import {SKILLS} from './skills/SkillRegistry.js';
+import type {Tool} from './tools/Tool.js';
+import {ToolRegistry} from './tools/ToolRegistry.js';
+
+const SKILL_DISPLAY_NAMES: Record<SkillName, string> = {
+  styling: 'CSS and styling',
+};
 
 export class AiAgent2 extends AiAgent<unknown> {
   // TODO: The static preamble is a placeholder and will eventually live server-side.
@@ -23,15 +33,20 @@ export class AiAgent2 extends AiAgent<unknown> {
   readonly userTier = 'TESTERS';
 
   #skillsInjected = false;
+  #changes = new ChangeManager();
+  #execJs: typeof executeJsCode;
 
   get options(): RequestOptions {
     return {};
   }
 
   readonly #activeSkills = new Set<SkillName>();
+  readonly #declaredTools = new Set<string>();
 
-  constructor(opts: AgentOptions) {
+  constructor(opts: ExecuteJsAgentOptions) {
     super(opts);
+    this.#execJs = opts.execJs ?? executeJsCode;
+    this.#declaredTools.add('learnSkills');
     const skillsList = Object.keys(SKILLS).join(', ');
     this.declareFunction<{skills: SkillName[]}>('learnSkills', {
       description: `Load skills to help with the task. Available skills: ${skillsList}.`,
@@ -51,8 +66,12 @@ export class AiAgent2 extends AiAgent<unknown> {
         required: ['skills'],
       },
       displayInfoFromArgs: args => {
+        const isSingular = args.skills.length === 1;
+        const prefix = isSingular ? 'Learning skill' : 'Learning skills';
+        const names = args.skills.map(name => SKILL_DISPLAY_NAMES[name] ?? name).join(', ');
         return {
-          title: `Learning skills: ${args.skills.join(', ')}`,
+          title: `${prefix}: ${names}`,
+          action: `learnSkills(${args.skills.map(name => `'${name}'`).join(', ')})`,
         };
       },
       handler: async args => {
@@ -62,33 +81,58 @@ export class AiAgent2 extends AiAgent<unknown> {
     });
   }
 
-  override async enhanceQuery(query: string): Promise<string> {
+  override async enhanceQuery(
+      query: string,
+      selected: ConversationContext<unknown>|null = null,
+      // TODO: support multimodal input in AiAgent2.
+      _multimodalInputType?: MultimodalInputType,
+      ): Promise<string> {
+    let enhancedQuery = query;
+    if (selected) {
+      const promptDetails = await selected.getPromptDetails();
+      if (promptDetails) {
+        enhancedQuery = `${promptDetails}
+
+# User request
+
+QUERY: ${query}`;
+      }
+    }
+
     if (this.#skillsInjected) {
-      return query;
+      return enhancedQuery;
     }
     this.#skillsInjected = true;
-    const skillsManifest = Object.entries(SKILLS).map(([name, skill]) => `- ${name}: ${skill.description}`).join('\n');
+    const skillsManifest =
+        Object.entries(this.getSkills()).map(([name, skill]) => `- ${name}: ${skill.description}`).join('\n');
     return `Available skills:
 ${skillsManifest}
 
 You must call \`learnSkills\` to load a skill before you can use it.
 
-User query: ${query}`;
+User query: ${enhancedQuery}`;
+  }
+
+  override async *
+      handleContextDetails(selected: ConversationContext<unknown>|null): AsyncGenerator<ContextResponse, void, void> {
+    if (selected) {
+      const details = await selected.getUserFacingDetails();
+      if (details) {
+        yield {
+          type: ResponseType.CONTEXT,
+          details,
+        };
+      }
+    }
   }
 
-  async *
-      handleContextDetails(_select: ConversationContext<unknown>|null): AsyncGenerator<ContextResponse, void, void> {
-    yield {
-      type: ResponseType.CONTEXT,
-      details: [{
-        title: 'Status',
-        text: 'Minimal agent initialized.',
-      }],
-    };
+  getSkills(): Record<SkillName, Skill> {
+    return SKILLS;
   }
 
   async learnSkill(names: SkillName[]): Promise<string> {
     let response = '';
+    const skills = this.getSkills();
     for (const name of names) {
       debugLog(`AiAgent2: Attempting to load skill ${name}`);
       if (this.#activeSkills.has(name)) {
@@ -97,19 +141,57 @@ User query: ${query}`;
         continue;
       }
 
-      const skillObj: Skill = SKILLS[name];
+      const skillObj: Skill = skills[name];
       if (skillObj) {
         this.#activeSkills.add(name);
         debugLog(`AiAgent2: Skill ${name} loaded successfully`);
         response += `Skill ${name} loaded. Instructions:\n${skillObj.instructions}\n`;
+        for (const toolName of skillObj.allowedTools) {
+          const tool = ToolRegistry.get(toolName);
+          if (tool) {
+            this.#declareTool(tool);
+          }
+        }
       } else {
         debugLog(`AiAgent2: Failed to load skill ${name}`);
-        response += `Failed to load skill ${name}. Valid skills are: ${Object.keys(SKILLS).join(', ')}.\n`;
+        response += `Failed to load skill ${name}. Valid skills are: ${Object.keys(skills).join(', ')}.\n`;
       }
     }
     return response.trim();
   }
 
+  #createExtensionScope(changes: ChangeManager): {install(): Promise<void>, uninstall(): Promise<void>} {
+    const selectedNode = this.context && this.context instanceof DOMNodeContext ? this.context.getItem() : null;
+    return new ExtensionScope(changes, this.sessionId, selectedNode);
+  }
+
+  /**
+   * Declares a tool to be available to the agent model, verifying first that
+   * it hasn't already been declared to prevent duplicate declaration errors.
+   */
+  #declareTool(tool: Tool): void {
+    if (this.#declaredTools.has(tool.name)) {
+      debugLog(`AiAgent2: Tool ${tool.name} is already declared`);
+      return;
+    }
+    this.#declaredTools.add(tool.name);
+    this.declareFunction(tool.name, {
+      description: tool.description,
+      parameters: tool.parameters,
+      displayInfoFromArgs: tool.displayInfoFromArgs,
+      handler: (args, options) => tool.handler(
+          args,
+          {
+            conversationContext: this.context ?? null,
+            changeManager: this.#changes,
+            createExtensionScope: this.#createExtensionScope.bind(this),
+            execJs: this.#execJs,
+          },
+          options,
+          ),
+    });
+  }
+
   get activeSkills(): Set<SkillName> {
     return this.#activeSkills;
   }

package/front_end/models/ai_assistance/AiConversation.ts

@@ -29,10 +29,11 @@ import {FileAgent, FileContext} from './agents/FileAgent.js';
 import {NetworkAgent, RequestContext} from './agents/NetworkAgent.js';
 import {PerformanceAgent, PerformanceTraceContext} from './agents/PerformanceAgent.js';
 import {StorageAgent, StorageContext} from './agents/StorageAgent.js';
-import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
+import {StylingAgent} from './agents/StylingAgent.js';
 import {AiAgent2} from './AiAgent2.js';
 import {AiHistoryStorage, ConversationType, type SerializedConversation} from './AiHistoryStorage.js';
 import type {ChangeManager} from './ChangeManager.js';
+import {DOMNodeContext} from './contexts/DOMNodeContext.js';
 
 export const NOT_FOUND_IMAGE_DATA = '';
 export const CONTEXT_TITLE = 'Analyzing data';
@@ -182,7 +183,7 @@ export class AiConversation {
     if (isAiAssistanceContextSelectionAgentEnabled()) {
       if (updateContext instanceof FileContext) {
         this.#updateAgent(ConversationType.FILE);
-      } else if (updateContext instanceof NodeContext) {
+      } else if (updateContext instanceof DOMNodeContext) {
         this.#updateAgent(ConversationType.STYLING);
       } else if (updateContext instanceof RequestContext) {
         this.#updateAgent(ConversationType.NETWORK);
@@ -327,24 +328,27 @@ export class AiConversation {
     };
   }
 
+  #filterHistoryForNewAgent(): Host.AidaClient.Content[] {
+    return this.#agent?.history
+               .map(content => {
+                 return {
+                   ...content,
+                   parts: content.parts.filter(part => !('functionCall' in part) && !('functionResponse' in part)),
+                 };
+               })
+               .filter(content => content.parts.length > 0) ??
+        [];
+  }
+
   #updateAgent(type: ConversationType): void {
     if (this.#type === type) {
       return;
     }
 
-    this.#type = type;
+    const isTransitioningFromStorage = this.#type === ConversationType.STORAGE && type !== ConversationType.STORAGE;
+    const history = isTransitioningFromStorage ? [] : this.#filterHistoryForNewAgent();
 
-    // We need to filter out the function calls
-    // as the LLM tries to call the existing ones.
-    const history =
-        this.#agent?.history
-            .map(content => {
-              return {
-                ...content,
-                parts: content.parts.filter(part => !('functionCall' in part) && !('functionResponse' in part)),
-              };
-            })
-            .filter(content => content.parts.length > 0);
+    this.#type = type;
 
     const options = {
       aidaClient: this.#aidaClient,

package/front_end/models/ai_assistance/AiUtils.ts

@@ -8,6 +8,8 @@ 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 {debugLog} from './debug.js';
+
 const UIStrings = {
   /**
    * @description Message shown to the user if the age check is not successful.
@@ -71,3 +73,72 @@ export function isSameOrigin(url1: Platform.DevToolsPath.UrlString, url2: Platfo
   const origin2 = Common.ParsedURL.ParsedURL.extractOrigin(url2);
   return origin1 !== '' && origin1 === origin2;
 }
+
+export interface OneShotPromptRequest {
+  aidaClient: Host.AidaClient.AidaClient;
+  preamble: string;
+  query: string;
+  clientFeature: Host.AidaClient.ClientFeature;
+  temperature?: number;
+  modelId?: string;
+  userTier?: string;
+  serverSideLoggingEnabled?: boolean;
+  signal?: AbortSignal;
+}
+
+export async function runOneShotPrompt({
+  aidaClient,
+  preamble,
+  query,
+  clientFeature,
+  temperature,
+  modelId,
+  userTier,
+  serverSideLoggingEnabled,
+  signal,
+}: OneShotPromptRequest): Promise<string> {
+  const chromeVersion = Root.Runtime.getChromeVersion();
+  if (!chromeVersion) {
+    throw new Error('Cannot determine Chrome version');
+  }
+  const disallowLogging = !serverSideLoggingEnabled;
+  const sessionId = crypto.randomUUID();
+
+  const userTierEnum = Host.AidaClient.convertToUserTierEnum(userTier);
+  const finalPreamble = userTierEnum === Host.AidaClient.UserTier.TESTERS ? preamble : undefined;
+
+  const request: Host.AidaClient.DoConversationRequest = {
+    client: Host.AidaClient.CLIENT_NAME,
+    current_message: {
+      parts: [{text: query}],
+      role: Host.AidaClient.Role.USER,
+    },
+    preamble: finalPreamble,
+    options: {
+      temperature: typeof temperature === 'number' && temperature >= 0 ? temperature : undefined,
+      model_id: modelId || undefined,
+    },
+    metadata: {
+      disable_user_content_logging: disallowLogging,
+      string_session_id: sessionId,
+      user_tier: userTierEnum,
+      client_version: chromeVersion,
+    },
+    functionality_type: Host.AidaClient.FunctionalityType.CHAT,
+    client_feature: clientFeature,
+  };
+
+  let textResponse = '';
+  try {
+    for await (const response of aidaClient.doConversation(request, {signal})) {
+      if (response.explanation) {
+        textResponse = response.explanation;
+      }
+    }
+  } catch (err) {
+    debugLog('Error calling AIDA for one-shot prompt', err);
+    throw err;
+  }
+
+  return textResponse;
+}