chrome-devtools-frontend 1.0.1622369 → 1.0.1624409

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

@@ -7,6 +7,7 @@ import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Greendev from '../../greendev/greendev.js';
+import * as Workspace from '../../workspace/workspace.js';
 
 import {
   type AgentOptions,
@@ -20,12 +21,6 @@ import {
 const preamble = `You are a general purpose web page troubleshooting agent.
 You are an expert in Chrome DevTools and you can help users with a wide range of issues.
 
-You are expected to find the root cause for web page problems described by the user, such as:
-- Why does nothing happen when I click this Submit button?
-- Why is this ad not loading?
-- Why is this text not using the correct font?
-- ... and other similar requests.
-
 Your job is to use the provided information to understand the problem, connect the dots to
 find the root cause of the problem and explain what the user can do to fix the problem.
 
@@ -33,65 +28,69 @@ The user will start the process by selecting a DOM element and send a query abou
 selected DOM element. First, examine the provided context, then use function calls to gather
 additional context and resolve the user request.
 
+### Your Debugging Strategy
+
+1.  **Analyze the User-Selected Node**: This is your primary clue. Understand its attributes,
+    children, and position in the DOM. For interactive elements like buttons, your main goal is
+    to figure out what happens when a user interacts with it.
+
+2.  **Find the Event Handler**: When a user reports an issue like "nothing happens when I click
+    this", your top priority is to find the JavaScript event handler associated with the action
+    (e.g., a 'click' handler for a button).
+
+3.  **Note on Modern Frameworks (React, etc.)**: Be aware that event handlers are often not
+    visible as simple HTML attributes (like 'onclick'). In frameworks like React, events are
+    attached dynamically via JavaScript. You will need to investigate the JavaScript source
+    files (like 'bundle.js') to find the component and its event handler logic.
+
+4.  **Investigate the Code**: Once you have a lead on the relevant script, use 'getSourceLine'
+    to examine the code. Look for common issues: infinite loops, unhandled promises, incorrect
+    state management, or logic that doesn't match the user's expectation.
+
+5.  **Use Console and Network Logs as Evidence**: Treat console and network logs as supporting
+    evidence. If there are errors, they are strong clues. However, **be critical of
+    informational messages** (like 'info' or 'verbose' logs) and ignore them unless they are
+    directly relevant to the user's problem. Do not get distracted by generic framework
+    messages.
+
+6.  **Formulate a Hypothesis**: Based on your code investigation, explain the likely root
+    cause to the user and suggest a concrete fix or next step. If you suspect an issue in a
+    JavaScript function, point it out.
+
+### Available Information
+
 To help you root-cause the problem, you will be provided with the following information:
-- Information about the user-selected DOM element, which is potentially relevant to the question
-  from the user.
+- Information about the user-selected DOM element.
 - The full accessibility tree for the web page.
-- A list of the most recent network requests, whether the request was successful and whether it is
-  considered to be ad-related. This list is capped to the most recent requests, but you can request
-  more. If you think the error is relevant to the problem described by the user, make sure to mention
-  the url of the failed network request in your reply to the user.
-- The most recent console messages, including their index. This list is also capped to the most
-  recent requests, but you can request more. Errors should have a source location, such
-  as: file, line number and column number, for example: (filex.html:10:50) if an error occurs on line
-  10, column 50 in filex.html. If you think the error is relevant to the problem described by the user,
-  make sure to mention the console error in your reply to the user.
-
-** IMPORTANT ** Never use the index when referring to individual console messages or network requests,
-  because the values of the indicies is not visible to the user.
-
-To help you further with root-causing problems, especially those indicated to originate in source
-locations, you can call the following functions to request more information:
-- 'getSourceLine': This function takes a file name, a line number, and a buffer (number of lines before
-  and after) to return a snippet of the source code.
-- 'getConsoleMessages': This function allows you to fetch specific slices of the console log based on the
-  indices provided in the initial context. It takes optional parameters: 'beforeIndex' (to get historical
-  messages before a certain index), 'afterIndex' (to get new messages that arrived after a certain index),
-  'filter' ('errors', 'warnings', or 'all'), and 'limit' (max number of messages to return, defaults to 50).
-- 'getNetworkRequests': This function allows you to fetch specific slices of the network request list based
-   on the indices provided in the initial context. It takes optional parameters: 'beforeIndex' (to get
-   historical messages before a certain index), 'afterIndex' (to get new messages that arrived after a
-   certain index), 'filter' ('failed', or 'all', defaults to 'all'), and 'limit' (max number of messages
-   to return, defaults to 50).
-
-Start by using the selected node as a guide to figure out which problem the user wants to focus on. There
-can be evidence of multiple failures (for example: multiple errors in the console log), but some might be
-benign and others unrelated. You should focus on the ones that seem related to the user-selected problem.
-
-Once you believe you have found the root cause, focus on applying a fix or explaining what the user can do
-to fix the problem.
-
-If you detect multiple possible problems, focus only on the root cause you think is most likely
-to be related and explain what the user can do to fix it. For example, if the url used is obviously
-incorrect, just say something like:
-
-  "There are a few possible reasons for the problem you are describing. One is that it could be caused by
-  the URL being incorrect. Try changing the url to 'xyz'. Let me know if you to suggest alternative
-  solutions."
-
-If the user suggests your fix not being the right solution, go through the remaining possible root causes
-(one at a time).
-
-Stick to what you have evidence for being the problem and refrain from speculating on things you
-don't have concrete evidence for, such as CORS or Ad-blockers blocking requests. But feel free to
-list those concerns after asking the user if they would like additional (general-purpose) details and
-getting a favorable response.
-
-**CRITICAL** You are a web age 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.
-`;
+- A list of the most recent network requests.
+- The most recent console messages, including their index.
+
+** IMPORTANT ** Never use the index when referring to individual console messages or network
+  requests, because the values of the indicies is not visible to the user.
+
+### Available Tools
+
+To help you further, you can call the following functions:
+- 'findInSource': This function takes a filename and a search string and returns an array of
+  line numbers containing that string.
+- 'getEventListeners': This function takes a uid (the backend DOM node id) and returns a list
+  of event listeners attached to it.
+- 'getSourceLine': This function takes a file name, a line number, and a buffer (number of
+  lines before and after) to return a snippet of the source code.
+- 'getConsoleMessages': This function allows you to fetch specific slices of the console log.
+- 'getNetworkRequests': This function allows you to fetch specific slices of the network
+  request list.
+- 'getReactComponentProps': This function takes a uid (the backend DOM node id) and returns
+  the React component props for that element.
+
+Stick to what you have evidence for and refrain from speculating on things you
+don't have concrete evidence for, such as CORS or Ad-blockers.
+
+**CRITICAL** You are a web page 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.`;
 
 export class GreenDevContext extends ConversationContext<string> {
   #context: string;
@@ -151,9 +150,9 @@ export class GreenDevAgent extends AiAgent<string> {
         required: ['fileName', 'lineNumber', 'buffer'],
       },
       handler: async (params: {fileName: string, lineNumber: number, buffer: number}) => {
-        const result = await this.getSourceLine(params.fileName, params.lineNumber, params.buffer);
+        const result = await this.getSourceLine(params.fileName, params.lineNumber, params.buffer, true);
         return {
-          result,
+          result: result.join('\n'),
         };
       },
     });
@@ -247,6 +246,87 @@ export class GreenDevAgent extends AiAgent<string> {
         };
       },
     });
+
+    this.declareFunction<{
+      uid: number,
+    }>('getEventListeners', {
+      description: 'Get event listeners attached to a DOM element.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          uid: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The backend node id of the DOM element.',
+            nullable: false,
+          },
+        },
+        required: ['uid'],
+      },
+      handler: async (params: {uid: number}) => {
+        const result = await this.getEventListeners(params.uid);
+        return {
+          result,
+        };
+      },
+    });
+
+    this.declareFunction<{
+      fileName: string,
+      query: string,
+    }>('findInSource', {
+      description: 'Find lines in a file that contain the given search string.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          fileName: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The full path of the file to search within.',
+            nullable: false,
+          },
+          query: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The string to search for.',
+            nullable: false,
+          },
+        },
+        required: ['fileName', 'query'],
+      },
+      handler: async (params: {fileName: string, query: string}) => {
+        const result = await this.findInSource(params.fileName, params.query);
+        return {
+          result: JSON.stringify(result),
+        };
+      },
+    });
+
+    this.declareFunction<{
+      uid: number,
+    }>('getReactComponentProps', {
+      description: 'Get the React component props for a given DOM element.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          uid: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The backend node id of the DOM element.',
+            nullable: false,
+          },
+        },
+        required: ['uid'],
+      },
+      handler: async (params: {uid: number}) => {
+        const result = await this.getReactComponentProps(params.uid, true);
+        return {
+          result,
+        };
+      },
+    });
   }
 
   override preamble = preamble;
@@ -349,6 +429,57 @@ export class GreenDevAgent extends AiAgent<string> {
     return networkContextStrings;
   }
 
+  async getEventListeners(uid: number): Promise<string> {
+    console.warn('[GreenDevAgent] AI Agent is calling getEventListeners with uid:', uid);
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!target) {
+      return 'Target not found.';
+    }
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return 'DOM model not found.';
+    }
+    const domDebuggerModel = target.model(SDK.DOMDebuggerModel.DOMDebuggerModel);
+    if (!domDebuggerModel) {
+      return 'DOM debugger model not found.';
+    }
+    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+    if (!debuggerModel) {
+      return 'Debugger model not found.';
+    }
+
+    const nodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([uid as Protocol.DOM.BackendNodeId]));
+    const node = nodesMap?.get(uid as Protocol.DOM.BackendNodeId) || null;
+    if (!node) {
+      return `Node with uid ${uid} not found.`;
+    }
+
+    const remoteObject = await node.resolveToObject();
+    if (!remoteObject) {
+      return `Could not resolve node with uid ${uid} to a remote object.`;
+    }
+
+    const listeners = await domDebuggerModel.eventListeners(remoteObject);
+
+    const formattedListeners = listeners.map(listener => {
+      const location = listener.location();
+      const script = debuggerModel.scriptForId(location.scriptId);
+      const handler = listener.handler();
+      const handlerName = handler?.description || 'anonymous';
+
+      return {
+        type: listener.type(),
+        handlerName,
+        sourceFile: script?.sourceURL || 'unknown',
+        lineNumber: location.lineNumber + 1,
+        columnNumber: location.columnNumber,
+      };
+    });
+
+    console.warn('[GreenDevAgent] getEventListeners returning:', formattedListeners);
+    return JSON.stringify(formattedListeners, null, 2);
+  }
+
   async getNetworkRequests(params: {filter?: string, beforeIndex?: number, afterIndex?: number, limit?: number}):
       Promise<string> {
     console.warn(
@@ -450,63 +581,193 @@ export class GreenDevAgent extends AiAgent<string> {
     return resultString;
   }
 
-  async getSourceLine(fileName: string, lineNumber: number, buffer: number): Promise<string> {
-    console.warn(`getSourceLine called with fileName: ${fileName}, lineNumber: ${lineNumber}, buffer: ${buffer}`);
-    let url: string;
-    try {
-      new URL(fileName);
-      url = fileName;
-    } catch {
-      const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-      const resourceTreeModel = primaryPageTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
-      const mainFrame = resourceTreeModel?.mainFrame;
-      if (mainFrame) {
-        url = new URL(fileName, mainFrame.url).href;
-      } else {
-        return `Could not resolve relative path: ${fileName}`;
+  #findUiSourceCode(fileName: string): Workspace.UISourceCode.UISourceCode|null {
+    const workspace = Workspace.Workspace.WorkspaceImpl.instance();
+    const allUiSourceCodes = workspace.uiSourceCodes().filter(code => !code.url().startsWith('debugger:///'));
+
+    // The fileName could be a full URL, a partial path, or just the filename.
+    // We prioritize matches that are more specific.
+
+    // 1. Exact match
+    for (const code of allUiSourceCodes) {
+      if (code.url() === fileName) {
+        return code;
       }
     }
 
-    let content = '';
-    if (url.startsWith('http://') || url.startsWith('https://')) {
-      try {
-        const response = await fetch(url);
-        if (response.ok) {
-          content = await response.text();
-        } else {
-          console.error(`Failed to load resource ${url}: status ${response.status}`);
-          return `Could not read file content: status ${response.status}`;
-        }
-      } catch (e) {
-        console.error(`Failed to load resource ${url}:`, e);
-        return `Could not read file content: ${e instanceof Error ? e.message : 'Unknown error'}`;
+    // 2. Ends with match
+    const candidates = allUiSourceCodes.filter(code => code.url().endsWith(fileName));
+    if (candidates.length > 0) {
+      // If multiple candidates, it's ambiguous. Log a warning and return the first.
+      if (candidates.length > 1) {
+        console.warn(
+            `[GreenDevAgent] Ambiguous file name "${fileName}". Found multiple matches:`, candidates.map(c => c.url()));
       }
-    } else {
-      content = await new Promise<string>(resolve => {
-        Host.ResourceLoader.load(
-            url,
-            null,
-            (success, _headers, content, errorDescription) => {
-              if (!success) {
-                console.error(`Failed to load resource ${url}:`, errorDescription);
-                resolve('');
-              } else {
-                resolve(content);
-              }
-            },
-            true /* allowRemoteFilePaths */,
-        );
-      });
+      return candidates[0];
+    }
+
+    return null;
+  }
+
+  async getSourceLine(fileName: string, lineNumber: number, buffer: number, calledFromAI = false): Promise<string[]> {
+    if (calledFromAI) {
+      console.warn(`getSourceLine called with fileName: ${fileName}, lineNumber: ${lineNumber}, buffer: ${buffer}`);
+    }
+    const uiSourceCode = this.#findUiSourceCode(fileName);
+    if (!uiSourceCode) {
+      const error = `Could not find UISourceCode for: ${fileName}`;
+      console.error(error);
+      return [error];
+    }
+
+    const contentData = await uiSourceCode.requestContentData();
+    if ('error' in contentData) {
+      const error = `Could not read file content for: ${fileName}, error: ${contentData.error}`;
+      console.error(error);
+      return [error];
     }
+    const content = contentData.text;
 
-    if (!content) {
-      return 'Could not read file content.';
+    if (typeof content !== 'string') {
+      const error = `Could not read file content for: ${fileName}, content is not a string`;
+      console.error(error);
+      return [error];
     }
 
     const lines = content.split('\n');
     const start = Math.max(0, lineNumber - buffer - 1);
     const end = Math.min(lines.length, lineNumber + buffer);
-    console.warn('AI requested source code for:', lines.slice(start, end));
-    return lines.slice(start, end).join('\n');
+    const slicedLines = lines.slice(start, end);
+
+    const formattedLines = slicedLines.map((line: string, index: number) => {
+      const currentLineNumber = start + index + 1;
+      return `[${currentLineNumber}] ${line}`;
+    });
+
+    if (calledFromAI) {
+      console.warn('AI requested source code for:', formattedLines);
+    }
+    return formattedLines;
+  }
+
+  async findInSource(fileName: string, query: string): Promise<Array<{line: number, source: string[]}>> {
+    console.warn(`findInSource called with fileName: ${fileName}, query: ${query}`);
+    const uiSourceCode = this.#findUiSourceCode(fileName);
+    if (!uiSourceCode) {
+      console.error(`Could not find UISourceCode for: ${fileName}`);
+      return [];
+    }
+
+    const contentData = await uiSourceCode.requestContentData();
+    if ('error' in contentData) {
+      console.warn(`Could not read file content for findInSource: ${fileName}, error: ${contentData.error}`);
+      return [];
+    }
+    const content = contentData.text;
+
+    if (typeof content !== 'string') {
+      console.warn(`Could not read file content for findInSource: ${fileName}, content is not a string`);
+      return [];
+    }
+
+    const lines = content.split('\n');
+    const matchingLines: Array<{line: number, source: string[]}> = [];
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].includes(query)) {
+        const sourceLine = i + 1;
+        const source = await this.getSourceLine(fileName, sourceLine, 15, false);
+        matchingLines.push({line: sourceLine, source});
+      }
+    }
+
+    console.warn(`findInSource returning for query '${query}':`, matchingLines);
+    return matchingLines;
+  }
+
+  async getReactComponentProps(uid: number, calledFromAI = false): Promise<string> {
+    if (calledFromAI) {
+      console.warn('[GreenDevAgent] AI Agent is calling getReactComponentProps with uid:', uid);
+    }
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!target) {
+      return 'Target not found.';
+    }
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return 'DOM model not found.';
+    }
+    const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
+    if (!runtimeModel) {
+      return 'Runtime model not found.';
+    }
+
+    const nodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([uid as Protocol.DOM.BackendNodeId]));
+    const node = nodesMap?.get(uid as Protocol.DOM.BackendNodeId) || null;
+    if (!node) {
+      return `Node with uid ${uid} not found.`;
+    }
+
+    const remoteObject = await node.resolveToObject();
+    if (!remoteObject) {
+      return `Could not resolve node with uid ${uid} to a remote object.`;
+    }
+
+    const reactComponentPropsResult = await target.runtimeAgent().invoke_callFunctionOn({
+      functionDeclaration: `
+          function() {
+              const getCircularReplacer = () => {
+                const seen = new WeakSet();
+                return (key, value) => {
+                  if (typeof value === 'function') {
+                    return '[Function: ' + (value.name || '(anonymous)') + ']';
+                  }
+                  if (key === 'return' || key === 'alternate' || key === 'sibling' || key === 'debugOwner' || key === '_debugOwner') {
+                    return undefined;
+                  }
+                  if (typeof value === 'object' && value !== null) {
+                    if (seen.has(value)) {
+                      return;
+                    }
+                    seen.add(value);
+                  }
+                  return value;
+                };
+              };
+
+              // Find the key for the internal Fiber node instance
+              const reactInternalInstanceKey = Object.keys(this).find(
+                key => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$')
+              );
+
+              if (!reactInternalInstanceKey) {
+                return 'React internal instance key not found';
+              }
+
+              const fiberNode = this[reactInternalInstanceKey];
+
+              if (fiberNode) {
+                return JSON.stringify(fiberNode, getCircularReplacer(), 2);
+              }
+
+              return 'React component type not found';
+            }
+          `,
+      objectId: remoteObject.objectId,
+      objectGroup: 'console',
+      silent: false,
+      returnByValue: true,
+      awaitPromise: false,
+      userGesture: true,
+    });
+    remoteObject.release();
+
+    const reactComponentProps = reactComponentPropsResult.result.value;
+    if (!reactComponentProps) {
+      return 'None found.';
+    }
+    if (calledFromAI) {
+      console.warn('[GreenDevAgent] getReactComponentProps returning', reactComponentProps);
+    }
+    return reactComponentProps;
   }
 }

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

@@ -0,0 +1,57 @@
+Title: NetworkAgent run generates an answer
+Content:
+[
+  {
+    "type": "context",
+    "details": [
+      {
+        "title": "Request",
+        "text": "Request URL: https://www.example.com\n\nRequest headers:\ncontent-type: bar1"
+      },
+      {
+        "title": "Response",
+        "text": "Response headers:\ncontent-type: bar2\nx-forwarded-for: bar3\n\nResponse body:\n{\"request\":\"body\"}\n\nResponse status: 200 \nNetwork request status: pending\n"
+      },
+      {
+        "title": "Timing",
+        "text": "Queued at (timestamp): 0 s\nStarted at (timestamp): 501 s\nQueueing (duration): 501 s\nConnection start (stalled) (duration): 800 ms\nRequest sent (duration): 100 ms\nDuration (duration): 501 s"
+      },
+      {
+        "title": "Request initiator chain",
+        "text": "- URL: <redacted cross-origin initiator URL>\n\t- URL: https://www.example.com\n\t\t- URL: https://www.example.com/1\n\t\t- URL: https://www.example.com/2"
+      }
+    ]
+  },
+  {
+    "type": "querying"
+  },
+  {
+    "type": "answer",
+    "text": "This is the answer",
+    "complete": true,
+    "rpcId": 123
+  }
+]
+=== end content
+
+Title: NetworkAgent run builds historical contexts
+Content:
+[
+  {
+    "parts": [
+      {
+        "text": "# Selected network request \nRequest: https://www.example.com\n\nRequest headers:\ncontent-type: bar1\n\nResponse headers:\ncontent-type: bar2\nx-forwarded-for: bar3\n\nResponse body:\n{\"request\":\"body\"}\n\nResponse status: 200 \nNetwork request status: pending\n\nRequest timing:\nQueued at (timestamp): 0 s\nStarted at (timestamp): 501 s\nQueueing (duration): 501 s\nConnection start (stalled) (duration): 800 ms\nRequest sent (duration): 100 ms\nDuration (duration): 501 s\n\nRequest initiator chain:\n- URL: <redacted cross-origin initiator URL>\n\t- URL: https://www.example.com\n\t\t- URL: https://www.example.com/1\n\t\t- URL: https://www.example.com/2\n\n# User request\n\ntest"
+      }
+    ],
+    "role": 1
+  },
+  {
+    "parts": [
+      {
+        "text": "This is the answer"
+      }
+    ],
+    "role": 2
+  }
+]
+=== end content

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
@@ -116,7 +117,7 @@ export class RequestContext extends ConversationContext<SDK.NetworkRequest.Netwo
    * inspect all network requests that were made for that given target URL.
    */
   override getOrigin(): string {
-    return this.#request.documentURL;
+    return Common.ParsedURL.ParsedURL.extractOrigin(this.#request.documentURL);
   }
 
   override getItem(): SDK.NetworkRequest.NetworkRequest {

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

@@ -171,7 +171,7 @@ Note: if the user asks a specific question about the trace (such as "What is my
   - \`nav-to-lcp\` (navigation to LCP)
   - \`lcp-ttfb\` (LCP TTFB phase)
   - \`lcp-render-delay\` (LCP render delay phase)
-  - Insight names: \`LCPBreakdown\`, \`CLSCulprits\`, \`RenderBlocking\`, \`NetworkDependencyTree\`, \`ImageDelivery\`, \`FontDisplay\`, \`ThirdParties\`, \`ForcedReflow\`, \`Cache\`, \`DOMSize\`
+  - Insight names: \`LCPBreakdown\`, \`INPBreakdown\`, \`CLSCulprits\`, \`ThirdParties\`, \`DocumentLatency\`, \`DOMSize\`, \`DuplicatedJavaScript\`, \`FontDisplay\`, \`ForcedReflow\`, \`ImageDelivery\`, \`LCPDiscovery\`, \`LegacyJavaScript\`, \`NetworkDependencyTree\`, \`RenderBlocking\`, \`SlowCSSSelector\`, \`Viewport\`, \`ModernHTTP\`, \`Cache\`, \`CharacterSet\`
   - Navigation IDs: \`NAVIGATION_0\`, \`NAVIGATION_1\`, etc.
 - Use \`getEventByKey\` to get data on a specific trace event. This is great for root-cause analysis or validating any assumptions.
 - Provide clear, actionable recommendations. Avoid technical jargon unless necessary, and explain any technical terms used.
@@ -222,13 +222,6 @@ enum ScorePriority {
   DEFAULT = 1,
 }
 
-const SUPPORTED_INSIGHT_WIDGETS = new Set<Trace.Insights.Types.InsightKeys>([
-  Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN,
-  Trace.Insights.Types.InsightKeys.RENDER_BLOCKING,
-  Trace.Insights.Types.InsightKeys.LCP_DISCOVERY,
-  Trace.Insights.Types.InsightKeys.CLS_CULPRITS,
-]);
-
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   static fromParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace): PerformanceTraceContext {
     return new PerformanceTraceContext(AgentFocus.fromParsedTrace(parsedTrace));
@@ -546,7 +539,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     // Case 2: Insight -> PERF_INSIGHT widget
     if (focus.insight) {
       const insightKey = focus.insight.insightKey;
-      if (Trace.Insights.Common.isInsightKey(insightKey) && SUPPORTED_INSIGHT_WIDGETS.has(insightKey)) {
+      if (Trace.Insights.Common.isInsightKey(insightKey)) {
         widgets.push({
           name: 'PERF_INSIGHT',
           data: {
@@ -1019,7 +1012,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         }
 
         const insightKey = params.insightName;
-        if (Trace.Insights.Common.isInsightKey(insightKey) && SUPPORTED_INSIGHT_WIDGETS.has(insightKey)) {
+        if (Trace.Insights.Common.isInsightKey(insightKey)) {
           widgets.push({
             name: 'PERF_INSIGHT',
             data: {