chrome-devtools-frontend 1.0.1522585 → 1.0.1525561

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

@@ -1,21 +1,24 @@
 Title: StylingAgent describeElement should describe an element with no children, siblings, or parent
 Content:
+* Element's uid is 99.
 * Its selector is `div#myElement`
 === end content
 
 Title: StylingAgent describeElement should describe an element with child element and text nodes
 Content:
+* Element's uid is 99.
 * Its selector is `div#parentElement`
-* It has 2 child element nodes: `span.child1`, `span.child2`
+* It has 2 child element nodes: `span.child1` (uid=undefined), `span.child2` (uid=undefined)
 * It only has 1 child text node
 === end content
 
 Title: StylingAgent describeElement should describe an element with siblings and a parent
 Content:
+* Element's uid is 99.
 * Its selector is `div#parentElement`
-* It has a next sibling and it is an element node
+* It has a next sibling and it is an element (uid=undefined) node
 * It has a previous sibling and it is a non element node
-* Its parent's selector is `div#grandparentElement`
+* Its parent's selector is `div#grandparentElement` (uid=undefined)
 * Its parent is a non element node
 * Its parent has only 1 child element node
 * Its parent has only 1 child text node
@@ -52,6 +55,40 @@ Content:
     }
   ],
   "function_declarations": [
+    {
+      "name": "getStyles",
+      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": false,
+        "properties": {
+          "explanation": {
+            "type": 1,
+            "description": "Explain why you want to get styles",
+            "nullable": false
+          },
+          "elements": {
+            "type": 5,
+            "description": "A list of element uids to get data for",
+            "items": {
+              "type": 1,
+              "description": "An element uid."
+            },
+            "nullable": false
+          },
+          "styleProperties": {
+            "type": 5,
+            "description": "One or more CSS style property names to fetch.",
+            "nullable": false,
+            "items": {
+              "type": 1,
+              "description": "A CSS style property name to retrieve. For example, 'background-color'."
+            }
+          }
+        }
+      }
+    },
     {
       "name": "executeJavaScript",
       "description": "This function allows you to run JavaScript code on the inspected page to access the element styles and page content.\nCall this function to gather additional information or modify the page state. Call this function enough times to investigate the user request.",
@@ -62,7 +99,7 @@ Content:
         "properties": {
           "code": {
             "type": 1,
-            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* To return data, define a top-level `data` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to `data`.\n* If you modify styles on an element, ALWAYS call the pre-defined global `async setElementStyles(el: Element, styles: object)` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.\n* Use `window.getComputedStyle` to gather **computed** styles and make sure that you take the distinction between authored styles and computed styles into account.\n* **CRITICAL** Only get styles that might be relevant to the user request.\n* **CRITICAL** Call `window.getComputedStyle` only once per element and store results into a local variable. Never try to return all the styles of the element in `data`.\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Consider that `data` variable from the previous function calls are not available in a new function call.\n\nFor example, the code to return basic styles:\n\n```\nconst styles = window.getComputedStyle($0);\nconst data = {\n    display: styles['display'],\n    visibility: styles['visibility'],\n    position: styles['position'],\n    left: styles['right'],\n    top: styles['top'],\n    width: styles['width'],\n    height: styles['height'],\n    zIndex: styles['z-index']\n};\n```\n\nFor example, the code to change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get current and parent styles at once:\n\n```\nconst styles = window.getComputedStyle($0);\nconst parentStyles = window.getComputedStyle($0.parentElement);\nconst data = {\n    currentElementStyles: {\n      display: styles['display'],\n      visibility: styles['visibility'],\n      position: styles['position'],\n      left: styles['right'],\n      top: styles['top'],\n      width: styles['width'],\n      height: styles['height'],\n      zIndex: styles['z-index'],\n    },\n    parentElementStyles: {\n      display: parentStyles['display'],\n      visibility: parentStyles['visibility'],\n      position: parentStyles['position'],\n      left: parentStyles['right'],\n      top: parentStyles['top'],\n      width: parentStyles['width'],\n      height: parentStyles['height'],\n      zIndex: parentStyles['z-index'],\n    },\n};\n```\n\nFor example, the code to get check siblings and overlapping elements:\n\n```\nconst computedStyles = window.getComputedStyle($0);\nconst parentComputedStyles = window.getComputedStyle($0.parentElement);\nconst data = {\n  numberOfChildren: $0.children.length,\n  numberOfSiblings: $0.parentElement.children.length,\n  hasPreviousSibling: !!$0.previousElementSibling,\n  hasNextSibling: !!$0.nextElementSibling,\n  elementStyles: {\n    display: computedStyles['display'],\n    visibility: computedStyles['visibility'],\n    position: computedStyles['position'],\n    clipPath: computedStyles['clip-path'],\n    zIndex: computedStyles['z-index']\n  },\n  parentStyles: {\n    display: parentComputedStyles['display'],\n    visibility: parentComputedStyles['visibility'],\n    position: parentComputedStyles['position'],\n    clipPath: parentComputedStyles['clip-path'],\n    zIndex: parentComputedStyles['z-index']\n  },\n  overlappingElements: Array.from(document.querySelectorAll('*'))\n    .filter(el => {\n      const rect = el.getBoundingClientRect();\n      const popupRect = $0.getBoundingClientRect();\n      return (\n        el !== $0 &&\n        rect.left < popupRect.right &&\n        rect.right > popupRect.left &&\n        rect.top < popupRect.bottom &&\n        rect.bottom > popupRect.top\n      );\n    })\n    .map(el => ({\n      tagName: el.tagName,\n      id: el.id,\n      className: el.className,\n      zIndex: window.getComputedStyle(el)['z-index']\n    }))\n};\n```\n"
+            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* To return data, define a top-level `data` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to `data`.\n* If you modify styles on an element, ALWAYS call the pre-defined global `async setElementStyles(el: Element, styles: object)` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.\n* **CRITICAL** Only get styles that might be relevant to the user request.\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Consider that `data` variable from the previous function calls are not available in a new function call.\n\nFor example, the code to change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get overlapping elements:\n\n```\nconst data = {\n  overlappingElements: Array.from(document.querySelectorAll('*'))\n    .filter(el => {\n      const rect = el.getBoundingClientRect();\n      const popupRect = $0.getBoundingClientRect();\n      return (\n        el !== $0 &&\n        rect.left < popupRect.right &&\n        rect.right > popupRect.left &&\n        rect.top < popupRect.bottom &&\n        rect.bottom > popupRect.top\n      );\n    })\n    .map(el => ({\n      tagName: el.tagName,\n      id: el.id,\n      className: el.className,\n      zIndex: window.getComputedStyle(el)['z-index']\n    }))\n};\n```\n"
           },
           "thought": {
             "type": 1,
@@ -153,7 +190,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -174,7 +211,7 @@ Content:
   {
     "parts": [
       {
-        "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+        "text": "# Inspected element\n\n* Element's uid is 99.\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
       }
     ],
     "role": 1
@@ -194,13 +231,13 @@ Title: StylingAgent run correctly handles historical_contexts in AIDA requests
 Content:
 [
   {
-    "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+    "text": "# Inspected element\n\n* Element's uid is 99.\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
   },
   [
     {
       "parts": [
         {
-          "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+          "text": "# Inspected element\n\n* Element's uid is 99.\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
         }
       ],
       "role": 1
@@ -237,7 +274,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -266,7 +303,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -298,7 +335,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -327,7 +364,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -354,7 +391,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -388,7 +425,7 @@ Content:
   {
     "parts": [
       {
-        "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+        "text": "# Inspected element\n\n* Element's uid is 99.\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
       }
     ],
     "role": 1
@@ -492,6 +529,7 @@ Title: StylingAgent enhanceQuery does not add multimodal input evaluation prompt
 Content:
 # Inspected element
 
+* Element's uid is 99.
 * Its selector is `div#myElement`
 
 # User request
@@ -503,6 +541,7 @@ Title: StylingAgent enhanceQuery does not add multimodal input evaluation prompt
 Content:
 # Inspected element
 
+* Element's uid is 99.
 * Its selector is `div#myElement`
 
 # User request
@@ -528,6 +567,7 @@ In case query is related to the image, ALWAYS first use image evaluation to get
 
 # Inspected element
 
+* Element's uid is 99.
 * Its selector is `div#myElement`
 
 # User request
@@ -551,6 +591,7 @@ In case query is related to the image, ALWAYS first use image evaluation to get
 
 # Inspected element
 
+* Element's uid is 99.
 * Its selector is `div#myElement`
 
 # User request

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

@@ -7,6 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
@@ -228,10 +229,6 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
   }
 }
 
-type Relation = 'currentElement'|'parentElement';
-
-const enableDedicatedStyleFunctions = false;
-
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
@@ -289,107 +286,57 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
         this,
     );
 
-    if (enableDedicatedStyleFunctions) {
-      this.declareFunction<{
-        relations: Relation[],
-        properties: string[],
-        thought: string,
-      }>('getComputedStyles', {
-        description:
-            'Call this function to get the computed styles for the current or the parent element. Use executeJavaScript for more complex queries.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
-            thought: {
-              type: Host.AidaClient.ParametersTypes.STRING,
-              description: 'Explain why you want to get computed styles',
-            },
-            relations: {
-              type: Host.AidaClient.ParametersTypes.ARRAY,
-              description: 'A list of relations describing which elements to query.',
-              items: {
-                type: Host.AidaClient.ParametersTypes.STRING,
-                description: 'Which element to query. Either \'currentElement\' or \'parentElement\'',
-              }
-            },
-            properties: {
-              type: Host.AidaClient.ParametersTypes.ARRAY,
-              description: 'One or more style property names to fetch',
-              nullable: false,
-              items: {
-                type: Host.AidaClient.ParametersTypes.STRING,
-                description: 'A computed style property name to retrieve. For example, \'background-color\'.'
-              }
-            },
-          }
-        },
-        displayInfoFromArgs: params => {
-          return {
-            title: 'Reading computed styles',
-            thought: params.thought,
-            action: `getComputedStyles(${JSON.stringify(params.relations)}, ${JSON.stringify(params.properties)})`,
-          };
-        },
-        handler: async (
-            params,
-            options,
-            ) => {
-          return await this.getComputedStyles(params.relations, params.properties, options);
-        },
-      });
-
-      this.declareFunction<{
-        relations: Relation[],
-        properties: string[],
-        thought: string,
-      }>('getAuthoredStyles', {
-        description: 'Call this function to get the styles as specified by the page author.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
-            thought: {
+    this.declareFunction<{
+      elements: string[],
+      styleProperties: string[],
+      explanation: string,
+    }>('getStyles', {
+      description:
+          `Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.
+
+**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.`,
+      parameters: {
+        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',
+            items: {type: Host.AidaClient.ParametersTypes.STRING, description: `An element uid.`},
+            nullable: false,
+          },
+          styleProperties: {
+            type: Host.AidaClient.ParametersTypes.ARRAY,
+            description: 'One or more CSS style property names to fetch.',
+            nullable: false,
+            items: {
               type: Host.AidaClient.ParametersTypes.STRING,
-              description: 'Explain why you want to get computed styles',
-            },
-            relations: {
-              type: Host.AidaClient.ParametersTypes.ARRAY,
-              description:
-                  'A list of relations describing which elements to query. Possible values: \'currentElement\', \'parentElement\'',
-              items: {
-                type: Host.AidaClient.ParametersTypes.STRING,
-                description: 'Which element to query. Either \'currentElement\' or \'parentElement\'',
-              }
-            },
-            properties: {
-              type: Host.AidaClient.ParametersTypes.ARRAY,
-              description: 'One or more style property names to fetch',
-              nullable: false,
-              items: {
-                type: Host.AidaClient.ParametersTypes.STRING,
-                description: 'A computed style property name to retrieve. For example, \'background-color\'.'
-              }
-            },
-          }
-        },
-        displayInfoFromArgs: params => {
-          return {
-            title: 'Reading authored styles',
-            thought: params.thought,
-            action: `getAuthoredStyles(${JSON.stringify(params.relations)}, ${JSON.stringify(params.properties)})`,
-          };
-        },
-        handler: async (
-            params,
-            options,
-            ) => {
-          return await this.getAuthoredStyles(params.relations, params.properties, options);
-        },
-      });
-    }
+              description: 'A CSS style property name to retrieve. For example, \'background-color\'.'
+            }
+          },
+        }
+      },
+      displayInfoFromArgs: params => {
+        return {
+          title: 'Reading computed and source styles',
+          thought: params.explanation,
+          action: `getStyles(${JSON.stringify(params.elements)}, ${JSON.stringify(params.styleProperties)})`,
+        };
+      },
+      handler: async (
+          params,
+          options,
+          ) => {
+        return await this.getStyles(params.elements, params.styleProperties, options);
+      },
+    });
 
     this.declareFunction<{
       title: string,
@@ -413,28 +360,10 @@ Call this function to gather additional information or modify the page state. Ca
 
 * 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.
-* Use \`window.getComputedStyle\` to gather **computed** styles and make sure that you take the distinction between authored styles and computed styles into account.
 * **CRITICAL** Only get styles that might be relevant to the user request.
-* **CRITICAL** Call \`window.getComputedStyle\` only once per element and store results into a local variable. Never try to return all the styles of the element in \`data\`.
 * **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 return basic styles:
-
-\`\`\`
-const styles = window.getComputedStyle($0);
-const data = {
-    display: styles['display'],
-    visibility: styles['visibility'],
-    position: styles['position'],
-    left: styles['right'],
-    top: styles['top'],
-    width: styles['width'],
-    height: styles['height'],
-    zIndex: styles['z-index']
-};
-\`\`\`
-
 For example, the code to change element styles:
 
 \`\`\`
@@ -443,59 +372,10 @@ await setElementStyles($0, {
 });
 \`\`\`
 
-For example, the code to get current and parent styles at once:
-
-\`\`\`
-const styles = window.getComputedStyle($0);
-const parentStyles = window.getComputedStyle($0.parentElement);
-const data = {
-    currentElementStyles: {
-      display: styles['display'],
-      visibility: styles['visibility'],
-      position: styles['position'],
-      left: styles['right'],
-      top: styles['top'],
-      width: styles['width'],
-      height: styles['height'],
-      zIndex: styles['z-index'],
-    },
-    parentElementStyles: {
-      display: parentStyles['display'],
-      visibility: parentStyles['visibility'],
-      position: parentStyles['position'],
-      left: parentStyles['right'],
-      top: parentStyles['top'],
-      width: parentStyles['width'],
-      height: parentStyles['height'],
-      zIndex: parentStyles['z-index'],
-    },
-};
-\`\`\`
-
-For example, the code to get check siblings and overlapping elements:
+For example, the code to get overlapping elements:
 
 \`\`\`
-const computedStyles = window.getComputedStyle($0);
-const parentComputedStyles = window.getComputedStyle($0.parentElement);
 const data = {
-  numberOfChildren: $0.children.length,
-  numberOfSiblings: $0.parentElement.children.length,
-  hasPreviousSibling: !!$0.previousElementSibling,
-  hasNextSibling: !!$0.nextElementSibling,
-  elementStyles: {
-    display: computedStyles['display'],
-    visibility: computedStyles['visibility'],
-    position: computedStyles['position'],
-    clipPath: computedStyles['clip-path'],
-    zIndex: computedStyles['z-index']
-  },
-  parentStyles: {
-    display: parentComputedStyles['display'],
-    visibility: parentComputedStyles['visibility'],
-    position: parentComputedStyles['position'],
-    clipPath: parentComputedStyles['clip-path'],
-    zIndex: parentComputedStyles['z-index']
-  },
   overlappingElements: Array.from(document.querySelectorAll('*'))
     .filter(el => {
       const rect = el.getBoundingClientRect();
@@ -611,7 +491,8 @@ const data = {
   }
 
   static async describeElement(element: SDK.DOMModel.DOMNode): Promise<string> {
-    let output = `* Its selector is \`${element.simpleSelector()}\``;
+    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);
@@ -625,7 +506,7 @@ const data = {
           break;
         default:
           output += `\n* It has ${elementChildNodes.length} child element nodes: ${
-              elementChildNodes.map(node => `\`${node.simpleSelector()}\``).join(', ')}`;
+              elementChildNodes.map(node => `\`${node.simpleSelector()}\` (uid=${node.backendNodeId()})`).join(', ')}`;
       }
 
       switch (textChildNodes.length) {
@@ -641,14 +522,16 @@ const data = {
     }
 
     if (element.nextSibling) {
-      const elementOrNodeElementNodeText =
-          element.nextSibling.nodeType() === Node.ELEMENT_NODE ? 'an element' : 'a non element';
+      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' : 'a non element';
+      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`;
     }
 
@@ -659,7 +542,7 @@ const data = {
     const parentNode = element.parentNode;
     if (parentNode) {
       const parentChildrenNodes = await parentNode.getChildNodesPromise();
-      output += `\n* Its parent's selector is \`${parentNode.simpleSelector()}\``;
+      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()) {
@@ -676,7 +559,8 @@ const data = {
             break;
           default:
             output += `\n* Its parent has ${childElementNodes.length} child element nodes: ${
-                childElementNodes.map(node => `\`${node.simpleSelector()}\``).join(', ')}`;
+                childElementNodes.map(node => `\`${node.simpleSelector()}\` (uid=${node.backendNodeId()})`)
+                    .join(', ')}`;
             break;
         }
 
@@ -702,58 +586,35 @@ const data = {
     return this.context?.getItem() ?? null;
   }
 
-  async getComputedStyles(relations: Relation[], properties: string[], _options?: {
+  async getStyles(elements: string[], properties: string[], _options?: {
     signal?: AbortSignal,
     approved?: boolean,
   }): Promise<FunctionCallHandlerResult<unknown>> {
-    const result: Record<string, Record<string, string|undefined>|undefined> = {};
-    for (const relation of relations) {
-      result[relation] = {};
-      debugLog(`Action to execute: ${relation}`);
-      let selectedNode = this.#getSelectedNode();
+    const result:
+        Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
+    for (const uid of elements) {
+      result[uid] = {computed: {}, authored: {}};
+      debugLog(`Action to execute: uid=${uid}`);
+      const selectedNode = this.#getSelectedNode();
       if (!selectedNode) {
         return {error: 'Error: Could not find the currently selected element.'};
       }
-      if (relation === 'parentElement') {
-        selectedNode = selectedNode.parentNode;
-      }
-      if (!selectedNode) {
-        return {error: 'Error: Could not find the parent element.'};
+      const node = new SDK.DOMModel.DeferredDOMNode(
+          selectedNode.domModel().target(), Number(uid) as unknown as Protocol.DOM.BackendNodeId);
+      const resolved = await node.resolvePromise();
+      if (!resolved) {
+        return {error: 'Error: Could not find the element with uid=' + uid};
       }
-      const styles = await selectedNode.domModel().cssModel().getComputedStyle(selectedNode.id);
+      const styles = await resolved.domModel().cssModel().getComputedStyle(resolved.id);
       if (!styles) {
         return {error: 'Error: Could not get computed styles.'};
       }
-      for (const prop of properties) {
-        result[relation][prop] = styles.get(prop);
-      }
-    }
-    return {
-      result: JSON.stringify(result, null, 2),
-    };
-  }
-
-  async getAuthoredStyles(relations: Relation[], properties: string[], _options?: {
-    signal?: AbortSignal,
-    approved?: boolean,
-  }): Promise<FunctionCallHandlerResult<unknown>> {
-    const result: Record<string, Record<string, string|undefined>|undefined> = {};
-    for (const relation of relations) {
-      result[relation] = {};
-      debugLog(`Action to execute: ${relation}`);
-      let selectedNode = this.#getSelectedNode();
-      if (!selectedNode) {
-        return {error: 'Error: Could not find the currently selected element.'};
-      }
-      if (relation === 'parentElement') {
-        selectedNode = selectedNode.parentNode;
-      }
-      if (!selectedNode) {
-        return {error: 'Error: Could not find the parent element.'};
-      }
-      const matchedStyles = await selectedNode.domModel().cssModel().getMatchedStyles(selectedNode.id);
+      const matchedStyles = await resolved.domModel().cssModel().getMatchedStyles(resolved.id);
       if (!matchedStyles) {
-        return {error: 'Error: Could not get computed styles.'};
+        return {error: 'Error: Could not get authored styles.'};
+      }
+      for (const prop of properties) {
+        result[uid].computed[prop] = styles.get(prop);
       }
       for (const style of matchedStyles.nodeStyles()) {
         for (const property of style.allProperties()) {
@@ -762,7 +623,7 @@ const data = {
           }
           const state = matchedStyles.propertyState(property);
           if (state === SDK.CSSMatchedStyles.PropertyState.ACTIVE) {
-            result[relation][property.name] = property.value;
+            result[uid].authored[property.name] = property.value;
           }
         }
       }

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

@@ -731,6 +731,29 @@ Available insights:
     example question: Which third parties are having the largest impact on my page performance?
 === end content
 
+Title: PerformanceTraceFormatter formatTraceSummary includes INP insight when there is no navigation
+Content:
+URL: https://b2607f8b04800100000289cb1c0a82ba72253000000000000000001.proxy.googlers.com/long-interaction/index.html?x=35
+Bounds: {min: 337943614456, max: 337947260898}
+CPU throttling: none
+Network throttling: none
+Metrics (lab / observed):
+  - INP: 139 ms, event: (eventKey: s-3347, ts: 337944870984)
+  - CLS: 0.00
+Metrics (field / real users): n/a – no data for this page in CrUX
+Available insights:
+  - insight name: INPBreakdown
+    description: Start investigating with the longest subpart. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.
+    relevant trace bounds: {min: 337944870984, max: 337945010222}
+    example question: Suggest fixes for my longest interaction
+    example question: Why is a large INP score problematic?
+    example question: What's the biggest contributor to my longest interaction?
+  - insight name: ThirdParties
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+    relevant trace bounds: {min: 337944792445, max: 337944809570}
+    example question: Which third parties are having the largest impact on my page performance?
+=== end content
+
 Title: PerformanceTraceFormatter formatNetworkRequests formats network requests that have redirects
 Content:
 ## Network request: http://localhost:3000/redirect3