chrome-devtools-frontend 1.0.1642845 → 1.0.1643099

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

@@ -0,0 +1,200 @@
+// 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 i18n from '../../../core/i18n/i18n.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+import {
+  type ContextDetail,
+  ConversationContext,
+  type ConversationSuggestions,
+} from '../agents/AiAgent.js';
+
+const UIStringsNotTranslate = {
+  /**
+   * @description Heading text for context details of DevTools AI Agent.
+   */
+  dataUsed: 'Data used',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+export class DOMNodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
+  #node: SDK.DOMModel.DOMNode;
+
+  constructor(node: SDK.DOMModel.DOMNode) {
+    super();
+    this.#node = node;
+  }
+
+  override getURL(): string {
+    const ownerDocument = this.#node.ownerDocument;
+    if (!ownerDocument) {
+      // The node is detached from a document.
+      return 'detached';
+    }
+    return ownerDocument.documentURL;
+  }
+
+  getItem(): SDK.DOMModel.DOMNode {
+    return this.#node;
+  }
+
+  override getTitle(): string {
+    throw new Error('Not implemented');
+  }
+
+  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
+    const layoutProps = await this.#node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.#node.id);
+
+    if (!layoutProps) {
+      return;
+    }
+
+    if (layoutProps.isFlex) {
+      return [
+        {title: 'How can I make flex items wrap?', jslogContext: 'flex-wrap'},
+        {title: 'How do I distribute flex items evenly?', jslogContext: 'flex-distribute'},
+        {title: 'What is flexbox?', jslogContext: 'flex-what'},
+      ];
+    }
+    if (layoutProps.isSubgrid) {
+      return [
+        {title: 'Where is this grid defined?', jslogContext: 'subgrid-where'},
+        {title: 'How to overwrite parent grid properties?', jslogContext: 'subgrid-override'},
+        {title: 'How do subgrids work? ', jslogContext: 'subgrid-how'},
+      ];
+    }
+    if (layoutProps.isGrid) {
+      return [
+        {title: 'How do I align items in a grid?', jslogContext: 'grid-align'},
+        {title: 'How to add spacing between grid items?', jslogContext: 'grid-gap'},
+        {title: 'How does grid layout work?', jslogContext: 'grid-how'},
+      ];
+    }
+    if (layoutProps.hasScroll) {
+      return [
+        {title: 'How do I remove scrollbars for this element?', jslogContext: 'scroll-remove'},
+        {title: 'How can I style a scrollbar?', jslogContext: 'scroll-style'},
+        {title: 'Why does this element scroll?', jslogContext: 'scroll-why'},
+      ];
+    }
+    if (layoutProps.containerType) {
+      return [
+        {title: 'What are container queries?', jslogContext: 'container-what'},
+        {title: 'How do I use container-type?', jslogContext: 'container-how'},
+        {title: 'What\'s the container context for this element?', jslogContext: 'container-context'},
+      ];
+    }
+
+    return;
+  }
+
+  override async getPromptDetails(): Promise<string|null> {
+    return `# Inspected element
+
+${await this.describe()}`;
+  }
+
+  override async getUserFacingDetails(): Promise<[ContextDetail, ...ContextDetail[]]|null> {
+    return [
+      {
+        title: lockedString(UIStringsNotTranslate.dataUsed),
+        text: await this.describe(),
+      },
+    ];
+  }
+
+  async describe(): Promise<string> {
+    const element = this.#node;
+    let output = `* Element's uid is ${element.backendNodeId()}.
+* Its selector is \`${element.simpleSelector()}\``;
+    const childNodes = await element.getChildNodesPromise();
+    if (childNodes) {
+      const textChildNodes = childNodes.filter(childNode => childNode.nodeType() === Node.TEXT_NODE);
+      const elementChildNodes = childNodes.filter(childNode => childNode.nodeType() === Node.ELEMENT_NODE);
+      switch (elementChildNodes.length) {
+        case 0:
+          output += '\n* It doesn\'t have any child element nodes';
+          break;
+        case 1:
+          output += `\n* It only has 1 child element node: \`${elementChildNodes[0].simpleSelector()}\``;
+          break;
+        default:
+          output += `\n* It has ${elementChildNodes.length} child element nodes: ${
+              elementChildNodes.map(node => `\`${node.simpleSelector()}\` (uid=${node.backendNodeId()})`).join(', ')}`;
+      }
+
+      switch (textChildNodes.length) {
+        case 0:
+          output += '\n* It doesn\'t have any child text nodes';
+          break;
+        case 1:
+          output += '\n* It only has 1 child text node';
+          break;
+        default:
+          output += `\n* It has ${textChildNodes.length} child text nodes`;
+      }
+    }
+
+    if (element.nextSibling) {
+      const elementOrNodeElementNodeText = element.nextSibling.nodeType() === Node.ELEMENT_NODE ?
+          `an element (uid=${element.nextSibling.backendNodeId()})` :
+          'a non element';
+      output += `\n* It has a next sibling and it is ${elementOrNodeElementNodeText} node`;
+    }
+
+    if (element.previousSibling) {
+      const elementOrNodeElementNodeText = element.previousSibling.nodeType() === Node.ELEMENT_NODE ?
+          `an element (uid=${element.previousSibling.backendNodeId()})` :
+          'a non element';
+      output += `\n* It has a previous sibling and it is ${elementOrNodeElementNodeText} node`;
+    }
+
+    if (element.isInShadowTree()) {
+      output += '\n* It is in a shadow DOM tree.';
+    }
+
+    const parentNode = element.parentNode;
+    if (parentNode) {
+      const parentChildrenNodes = await parentNode.getChildNodesPromise();
+      output += `\n* Its parent's selector is \`${parentNode.simpleSelector()}\` (uid=${parentNode.backendNodeId()})`;
+      const elementOrNodeElementNodeText = parentNode.nodeType() === Node.ELEMENT_NODE ? 'an element' : 'a non element';
+      output += `\n* Its parent is ${elementOrNodeElementNodeText} node`;
+      if (parentNode.isShadowRoot()) {
+        output += '\n* Its parent is a shadow root.';
+      }
+      if (parentChildrenNodes) {
+        const childElementNodes =
+            parentChildrenNodes.filter(siblingNode => siblingNode.nodeType() === Node.ELEMENT_NODE);
+        switch (childElementNodes.length) {
+          case 0:
+            break;
+          case 1:
+            output += '\n* Its parent has only 1 child element node';
+            break;
+          default:
+            output += `\n* Its parent has ${childElementNodes.length} child element nodes: ${
+                childElementNodes.map(node => `\`${node.simpleSelector()}\` (uid=${node.backendNodeId()})`)
+                    .join(', ')}`;
+            break;
+        }
+
+        const siblingTextNodes = parentChildrenNodes.filter(siblingNode => siblingNode.nodeType() === Node.TEXT_NODE);
+        switch (siblingTextNodes.length) {
+          case 0:
+            break;
+          case 1:
+            output += '\n* Its parent has only 1 child text node';
+            break;
+          default:
+            output += `\n* Its parent has ${siblingTextNodes.length} child text nodes: ${
+                siblingTextNodes.map(node => `\`${node.simpleSelector()}\``).join(', ')}`;
+            break;
+        }
+      }
+    }
+
+    return output.trim();
+  }
+}

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

@@ -1,6 +1,48 @@
 ---
 name: styling
 description: Helping with CSS and styling
-allowed-tools: []
+allowed-tools:
+  - executeJavaScript
+  - getStyles
 ---
-You are a CSS expert helping the user style elements.
+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 and executeJavaScript functions to gather additional context and resolve the user request.
+
+# Considerations
+
+* Meticulously investigate all potential causes for the observed behavior before moving on. Gather comprehensive information about the element's parent, siblings, children, and any overlapping elements, paying close attention to properties that are likely relevant to the query.
+* Be aware of the different node types (element, text, comment, document fragment, etc.) and their properties. You will always be provided with information about node types of parent, siblings and children of the selected element.
+* Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
+* Always explore multiple possible explanations for the observed behavior before settling on a conclusion.
+* When presenting solutions, clearly distinguish between the primary cause and contributing factors.
+* 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 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
+
+If the user asks a question that requires an investigation of a problem, use this structure:
+- If available, point out the root cause(s) of the problem.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+    - Example: "**Root Causes**:"
+      - [Reason 1]
+      - [Reason 2]
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestion**: [Suggestion 1]
+    - Example: "**Suggestions**:"
+      - [Suggestion 1]
+      - [Suggestion 2]

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

@@ -0,0 +1,140 @@
+// 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 {DOMNodeContext} from '../contexts/DOMNodeContext.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 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 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,
+    },
+                                            context.execJs);
+
+    return await executor.executeAction(params.code, options);
+  }
+}

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

@@ -0,0 +1,141 @@
+// 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 SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import type {ComputedStyleAiWidget, FunctionCallHandlerResult, FunctionHandlerOptions} from '../agents/AiAgent.js';
+import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
+import {debugLog} from '../debug.js';
+
+import {type Tool, type ToolArgs, type ToolContext, ToolName} from './Tool.js';
+
+export interface GetStylesArgs extends ToolArgs {
+  elements: number[];
+  styleProperties: string[];
+  explanation: string;
+}
+
+export class GetStylesTool implements Tool<GetStylesArgs, unknown> {
+  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.
+
+**CRITICAL** An element uid is a number, not a selector.
+**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.
+**CRITICAL** Always provide the explanation argument to explain what and why you query.
+**CRITICAL** You MUST provide a specific list of CSS property names. Do not use generic values like "all" or "*".`;
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof GetStylesArgs> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: '',
+    nullable: false,
+    properties: {
+      explanation: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'Explain why you want to get styles',
+        nullable: false,
+      },
+      elements: {
+        type: Host.AidaClient.ParametersTypes.ARRAY,
+        description: 'A list of element uids to get data for. These are numbers, not selectors.',
+        items: {type: Host.AidaClient.ParametersTypes.INTEGER, description: 'An element uid.'},
+        nullable: false,
+      },
+      styleProperties: {
+        type: Host.AidaClient.ParametersTypes.ARRAY,
+        description:
+            'One or more specific CSS style property names to fetch. Generic values like "all" or "*" are not supported.',
+        nullable: false,
+        items: {
+          type: Host.AidaClient.ParametersTypes.STRING,
+          description: 'A CSS style property name to retrieve. For example, \'background-color\'.'
+        }
+      },
+    },
+    required: ['explanation', 'elements', 'styleProperties']
+  };
+
+  displayInfoFromArgs(params: GetStylesArgs): {
+    title: string,
+    thought: string,
+    action: string,
+  } {
+    return {
+      title: 'Reading computed and source styles',
+      thought: params.explanation,
+      action: `getStyles(${JSON.stringify(params.elements)}, ${JSON.stringify(params.styleProperties)})`,
+    };
+  }
+
+  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>}> = {};
+
+    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.'};
+    }
+
+    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 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()) {
+        return {error: 'Error: Node does not belong to the current origin.'};
+      }
+      const styles = await resolved.domModel().cssModel().getComputedStyle(resolved.id);
+      if (!styles) {
+        return {error: 'Error: Could not get computed styles.'};
+      }
+      const matchedStyles = await resolved.domModel().cssModel().getMatchedStyles(resolved.id);
+      if (!matchedStyles) {
+        return {error: 'Error: Could not get authored styles.'};
+      }
+      widgets.push({
+        name: 'COMPUTED_STYLES',
+        data: {
+          computedStyles: styles,
+          backendNodeId: node.backendNodeId(),
+          matchedCascade: matchedStyles,
+          properties: params.styleProperties,
+        }
+      });
+      for (const prop of params.styleProperties) {
+        result[uid].computed[prop] = styles.get(prop);
+      }
+      for (const style of matchedStyles.nodeStyles()) {
+        for (const property of style.allProperties()) {
+          if (!params.styleProperties.includes(property.name)) {
+            continue;
+          }
+          const state = matchedStyles.propertyState(property);
+          if (state === SDK.CSSMatchedStyles.PropertyState.ACTIVE) {
+            result[uid].authored[property.name] = property.value;
+          }
+        }
+      }
+    }
+    return {
+      result: JSON.stringify(result, null, 2),
+      widgets,
+    };
+  }
+}

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

@@ -0,0 +1,64 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Host from '../../../core/host/host.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;
+}
+
+/**
+ * Base argument type for AI Tools.
+ */
+export type ToolArgs = Record<string, unknown>;
+
+export const enum ToolName {
+  EXECUTE_JAVASCRIPT = 'executeJavaScript',
+  GET_STYLES = 'getStyles',
+}
+
+/**
+ * Non-generic metadata interface for a Tool.
+ * Used for storing and retrieving tools generically without type-erasure concerns.
+ */
+export interface BaseTool {
+  readonly name: ToolName;
+  readonly description: string;
+  /**
+   * JSON schema representing the parameters this tool accepts.
+   */
+  readonly parameters: Host.AidaClient.FunctionObjectParam<string|number|symbol>;
+}
+
+/**
+ * Main generic interface for defining a Tool.
+ * Binds the parameter schema properties and the handler implementation to a strict `Args` contract.
+ *
+ * @template Args - The expected object type for tool arguments. Must be an object type.
+ * @template ReturnType - The type of data returned by the handler function.
+ */
+export interface Tool<Args extends ToolArgs = ToolArgs, ReturnType = unknown, > extends BaseTool {
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof Args>;
+  readonly displayInfoFromArgs?: (
+      args: Args,
+      ) => {
+    title?: string, thought?: string, action?: string, suggestions?: [string, ...string[]],
+  };
+  handler(
+      args: Args,
+      context: ToolContext,
+      options?: FunctionHandlerOptions,
+      ): Promise<FunctionCallHandlerResult<ReturnType>>;
+}

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

@@ -0,0 +1,36 @@
+// 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 {ExecuteJavaScriptTool} from './ExecuteJavaScript.js';
+import {GetStylesTool} from './GetStyles.js';
+import {type Tool, ToolName} from './Tool.js';
+
+/**
+ * Plain object registry containing concrete instantiated tools.
+ * 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(),
+};
+
+/**
+ * Registry class for registering and querying AI Assistance Tools.
+ */
+export class ToolRegistry {
+  /**
+   * Retrieves a tool by its literal name with 100% type safety.
+   *
+   * @template K - A key from the `TOOLS` registry.
+   * @returns The concrete class type of the requested tool.
+   */
+  static get<K extends keyof typeof TOOLS>(name: K): typeof TOOLS[K];
+  /**
+   * Fallback retrieval signature for general or runtime string lookups.
+   */
+  static get(name: string): Tool|undefined;
+  static get(name: string): Tool|undefined {
+    return Object.prototype.hasOwnProperty.call(TOOLS, name) ? TOOLS[name as keyof typeof TOOLS] as Tool : undefined;
+  }
+}

package/front_end/models/heap_snapshot/HeapSnapshotProxy.ts

@@ -244,8 +244,6 @@ export class HeapSnapshotLoaderProxy extends HeapSnapshotProxyObject implements
     const snapshotProxy = await this.callFactoryMethodPromise('buildSnapshot', HeapSnapshotProxy, [channel.port1]);
     secondWorker.dispose();
     this.dispose();
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // @ts-expect-error
     snapshotProxy.setProfileUid(this.profileUid);
     await snapshotProxy.updateStaticData();
     this.snapshotReceivedCallback(snapshotProxy);
@@ -254,7 +252,7 @@ export class HeapSnapshotLoaderProxy extends HeapSnapshotProxyObject implements
 
 export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
   staticData: HeapSnapshotModel.StaticData|null;
-  profileUid?: string;
+  profileUid?: number;
 
   constructor(worker: HeapSnapshotWorkerProxy, objectId: number) {
     super(worker, objectId);
@@ -279,7 +277,7 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
   }
 
   calculateSnapshotDiff(
-      baseSnapshotId: string,
+      baseSnapshotId: number,
       baseSnapshotAggregates: Record<string, HeapSnapshotModel.AggregateForDiff>,
       ): Promise<Record<string, HeapSnapshotModel.Diff>> {
     return this.callMethodPromise('calculateSnapshotDiff', baseSnapshotId, baseSnapshotAggregates);
@@ -301,7 +299,7 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callFactoryMethod('createRetainingEdgesProvider', HeapSnapshotProviderProxy, nodeIndex);
   }
 
-  createAddedNodesProvider(baseSnapshotId: string, classKey: string): HeapSnapshotProviderProxy {
+  createAddedNodesProvider(baseSnapshotId: number, classKey: string): HeapSnapshotProviderProxy {
     return this.callFactoryMethod('createAddedNodesProvider', HeapSnapshotProviderProxy, baseSnapshotId, classKey);
   }
 
@@ -391,11 +389,11 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.staticData.totalSize;
   }
 
-  get uid(): string|undefined {
+  get uid(): number|undefined {
     return this.profileUid;
   }
 
-  setProfileUid(profileUid: string): void {
+  setProfileUid(profileUid: number): void {
     this.profileUid = profileUid;
   }