chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

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

@@ -8,7 +8,6 @@ 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 * as Tracing from '../../../services/tracing/tracing.js';
 import * as Annotations from '../../annotations/annotations.js';
 import * as Logs from '../../logs/logs.js';
@@ -53,8 +52,8 @@ const lockedString = i18n.i18n.lockedString;
  * Labels used to identify specific periods or categories in the trace for getting main thread summary.
  * Supports hardcoded phases, dynamic navigation IDs (`NAVIGATION_X`), and insight models.
  */
-type MainThreadSectionLabel = 'nav-to-lcp'|'lcp-ttfb'|'lcp-render-delay'|'trace-bounds'|'NO_NAVIGATION'|
-                              `NAVIGATION_${string}`|keyof Trace.Insights.Types.InsightModels;
+export type MainThreadSectionLabel = 'nav-to-lcp'|'lcp-ttfb'|'lcp-render-delay'|'trace-bounds'|'NO_NAVIGATION'|
+                                     `NAVIGATION_${string}`|keyof Trace.Insights.Types.InsightModels;
 
 /**
  * WARNING: preamble defined in code is only used when userTier is
@@ -62,11 +61,10 @@ type MainThreadSectionLabel = 'nav-to-lcp'|'lcp-ttfb'|'lcp-render-delay'|'trace-
  * chrome_preambles.gcl). Sync local changes with the server-side.
  */
 
-const greenDevAdditionalAnnotationsFunction = `
+const GREEN_DEV_ANNOTATIONS_INSTRUCTIONS = `
 - CRITICAL: You also have access to functions called addElementAnnotation and addNeworkRequestAnnotation,
-which should be used to highlight elements and network requests (respectively).`;
+which should be used to highlight elements and network requests (respectively).
 
-const greenDevAdditionalAnnotationsGuidelines = `
 - CRITICAL: Each time an element or a network request is mentioned, you MUST ALSO call the functions
   addElementAnnotation (for an element) or addNeworkRequestAnnotation (for a network request).
 - CRITICAL: Don't add more than one annotation per element or network request.
@@ -75,6 +73,24 @@ const greenDevAdditionalAnnotationsGuidelines = `
 - The annotationMessage should be descriptive and relevant to why the element or network request is being highlighted.
 `;
 
+const GREEN_DEV_FRESH_TRACE_ANNOTATIONS_INSTRUCTIONS = `
+When referring to an element for which you know the nodeId, always call the function addElementAnnotation, specifying
+the id and an annotation reason.
+When referring to a network request for which you know the eventKey for, always call the function
+addNetworkRequestAnnotation, specifying the id and an annotation reason.
+- CRITICAL: Each time you add an annotating link you MUST ALSO call the function addElementAnnotation.
+- CRITICAL: Each time you describe an element or network request as being problematic you MUST call the function
+addElementAnnotation and specify an annotation reason.
+- CRITICAL: Each time you describe a network request as being problematic you MUST call the function
+addNetworkRequestAnnotation and specify an annotation reason.
+- CRITICAL: If you spot ANY of the following problems:
+  - Render-blocking elements/network requests.
+  - Significant long task (especially on main thread).
+  - Layout shifts (e.g. due to unsized images).
+  ... then you MUST call addNetworkRequestAnnotation for ALL network requests and addaddElementAnnotation for all
+  elements described in your conclusion.
+`;
+
 /**
  * Preamble clocks in at ~1341 tokens.
  *   The prose is around 4.5 chars per token.
@@ -82,9 +98,7 @@ const greenDevAdditionalAnnotationsGuidelines = `
  *
  * Check token length in https://aistudio.google.com/
  */
-const buildPreamble = (): string => {
-  const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
-  return `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
+const preamble = `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
 
 Your primary goal is to provide actionable advice to web developers about their web page by using the Chrome Performance Panel and analyzing a trace. You may need to diagnose problems yourself, or you may be given direction for what to focus on by the user.
 
@@ -94,8 +108,6 @@ Always call getInsightDetails to gather more data on an insight or the actual LC
 
 You have functions available to learn more about the trace. Use these to confirm hypotheses, or to further explore the trace when diagnosing performance issues.
 
-${annotationsEnabled ? greenDevAdditionalAnnotationsFunction : ''}
-
 You will be given bounds representing a time range within the trace. Bounds include a min and a max time in microseconds. max is always bigger than min in a bounds.
 
 The 3 main performance metrics are:
@@ -146,15 +158,14 @@ Note: if the user asks a specific question about the trace (such as "What is my
 
 ## Guidelines
 
-- You must call \`getMainThreadTrackSummary\` (by specifying a time range) or \`getMainThreadTrackSummaryByLabel\` (with the relevant label) to investigate the main thread activity before giving the user a reply or suggesting solutions for any performance problem or insight. Call \`getMainThreadTrackSummary\` with specific bounds when you identify a specific time range of interest from the initial data. This applies even if you already have some information about that period from \`getInsightDetails\` or the initial trace summary.
-- Dig Deeper: Before replying, you should really dig into the main thread activity to uncover what the performance issues actually are. Use the initially provided main thread data as a reference to identify interesting tasks or time ranges, and then use those time bounds to call functions like \`getMainThreadTrackSummary\` to get more detailed data. Do not solely rely on the information from the initial data; ensure you identify the root cause before suggesting solutions.
-- No Shortcutting: Even if the initial facts contain specific line numbers or function names, you are not allowed to reply using only that information. You MUST call \`getMainThreadTrackSummary\` with the time bounds of the task to inspect its full context and children before describing it to the user.
-- Look for Aggregated Cost: Performance issues are not always caused by a single "Long Task". Many small, frequent events (like unthrottled \`mousemove\` or \`scroll\` handlers) can add up to significant main thread blockage. Use the Bottom-Up summary in \`getMainThreadTrackSummary\` to identify functions with high total time, even if they are not associated with a Long Task.
+- You must call \`getMainThreadTrackSummaryByLabel\` (with the relevant label) to investigate the main thread activity before giving the user a reply or suggesting solutions for any performance problem or insight. This applies even if you already have some information about that period from \`getInsightDetails\` or the initial trace summary.
+- Dig Deeper: Before replying, you should really dig into the main thread activity to uncover what the performance issues actually are. Do not solely rely on the information from the initial data; ensure you identify the root cause before suggesting solutions.
+- No Shortcutting: Even if the initial facts contain specific line numbers or function names, you are not allowed to reply using only that information. You MUST call \`getMainThreadTrackSummaryByLabel\` to inspect its context before describing it to the user.
+- Look for Aggregated Cost: Performance issues are not always caused by a single "Long Task". Many small, frequent events (like unthrottled \`mousemove\` or \`scroll\` handlers) can add up to significant main thread blockage. Use the Bottom-Up summary in \`getMainThreadTrackSummaryByLabel\` to identify functions with high total time, even if they are not associated with a Long Task.
 - Use the provided functions to get detailed performance data. Prioritize functions that provide context relevant to the performance issue being investigated.
 - Before finalizing your advice, look over it and validate using any relevant functions. If something seems off, refine the advice before giving it to the user.
 - Base your analysis and advice solely on the data retrieved through the provided functions. Always use the provided functions to gather sufficient data when needed.
 - Use absolute microsecond timestamps for any function that requires a \`min\` and \`max\` bounds. These timestamps can be found in the trace summary or within the details of an insight.
-- Example: If the trace bounds are {min: 1000, max: 5000} and you want to investigate a specific interaction that happened between 2000 and 3000, you should call \`getMainThreadTrackSummary({min: 2000, max: 3000})\`.
 - Available labels for \`getMainThreadTrackSummaryByLabel\` include:
   - \`trace-bounds\` (entire trace)
   - \`nav-to-lcp\` (navigation to LCP)
@@ -168,8 +179,6 @@ Note: if the user asks a specific question about the trace (such as "What is my
 - Structure your response using markdown headings and bullet points for improved readability.
 - Be direct and to the point. Avoid unnecessary introductory phrases or filler content. Focus on delivering actionable advice efficiently.
 
-${annotationsEnabled ? greenDevAdditionalAnnotationsGuidelines : ''}
-
 ## Strict Constraints
 
 Adhere to the following critical requirements:
@@ -181,13 +190,12 @@ Adhere to the following critical requirements:
 - Ensure comprehensive data retrieval through function calls to provide accurate and complete recommendations.
 - If the user asks a specific question about web performance that doesn't have anything to do with the trace, don't call any functions and be succinct in your answer.
 - Before suggesting changing the format of an image, consider what format it is already in. For example, if the mime type is image/webp, do not suggest to the user that the image is converted to WebP, as the image is already in that format.
-- Do not mention the functions you call to gather information about the trace (e.g., \`getEventByKey\`, \`getMainThreadTrackSummary\`) in your output. These are internal implementation details that should be hidden from the user.
+- Do not mention the functions you call to gather information about the trace (e.g., \`getEventByKey\`, \`getMainThreadTrackSummaryByLabel\`) in your output. These are internal implementation details that should be hidden from the user.
 - Do not mention that you are an AI, or refer to yourself in the third person. You are simulating a performance expert.
 - If asked about sensitive topics (religion, race, politics, sexuality, gender, etc.), respond with: "My expertise is limited to website performance analysis. I cannot provide information on that topic.".
 - Do not provide answers on non-web-development topics, such as legal, financial, medical, or personal advice.
 - 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.
 `;
-};
 
 const extraPreambleWhenNotExternal = `Additional notes:
 
@@ -199,38 +207,14 @@ When referring to a trace event that has a corresponding \`eventKey\`, annotate
 When asking the user to make a choice between options, output a list of choices at the end of your text response. The format is \`SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]\`. This MUST start on a newline, and be a single line.
 `;
 
-const buildExtraPreambleWhenFreshTrace = (): string => {
-  const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
-  const greenDevAdditionalGuidelineFreshTrace = `
-When referring to an element for which you know the nodeId, always call the function addElementAnnotation, specifying
-the id and an annotation reason.
-When referring to a network request for which you know the eventKey for, always call the function
-addNetworkRequestAnnotation, specifying the id and an annotation reason.
-- CRITICAL: Each time you add an annotating link you MUST ALSO call the function addElementAnnotation.
-- CRITICAL: Each time you describe an element or network request as being problematic you MUST call the function
-addElementAnnotation and specify an annotation reason.
-- CRITICAL: Each time you describe a network request as being problematic you MUST call the function
-addNetworkRequestAnnotation and specify an annotation reason.
-- CRITICAL: If you spot ANY of the following problems:
-  - Render-blocking elements/network requests.
-  - Significant long task (especially on main thread).
-  - Layout shifts (e.g. due to unsized images).
-  ... then you MUST call addNetworkRequestAnnotation for ALL network requests and addaddElementAnnotation for all
-  elements described in your conclusion.
-`;
-
-  const extraPreambleWhenFreshTrace = `Additional notes:
+const freshTracePreamble = `Additional notes:
 
 When referring to an element for which you know the nodeId, annotate your output using markdown link syntax:
 - For example, if nodeId is 23: [LCP element](#node-23)
 - This link will reveal the element in the Elements panel
 - Never mention node or nodeId when referring to the element, and especially not in the link text.
 - When referring to the LCP, it's useful to also mention what the LCP element is via its nodeId. Use the markdown link syntax to do so.
-
-${annotationsEnabled ? greenDevAdditionalGuidelineFreshTrace : ''}`;
-
-  return extraPreambleWhenFreshTrace;
-};
+`;
 
 enum ScorePriority {
   REQUIRED = 3,
@@ -367,11 +351,47 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
 // 16k Tokens * ~4 char per token.
 const MAX_FUNCTION_RESULT_BYTE_LENGTH = 16384 * 4;
 
+const STATIC_LABEL_NAMES: Record<string, string> = {
+  'nav-to-lcp': 'navigation to LCP',
+  'lcp-ttfb': 'LCP to TTFB',
+  'lcp-render-delay': 'LCP render delay',
+  'trace-bounds': 'the entire trace',
+  NO_NAVIGATION: 'the period before the first navigation',
+};
+
+/**
+ * Converts the label name we use in the code to a human readable one that is
+ * shown to the user.
+ */
+export function getLabelName(label: MainThreadSectionLabel, focus: AgentFocus): string {
+  if (STATIC_LABEL_NAMES[label]) {
+    return STATIC_LABEL_NAMES[label];
+  }
+
+  const {parsedTrace} = focus;
+  const insightSetById = parsedTrace.insights?.get(label as Trace.Types.Events.NavigationId);
+  if (insightSetById) {
+    return `navigation to ${insightSetById.url.href}`;
+  }
+
+  // Go through all the insights we have to find the first one that matches to find the title.
+  // TODO(b/505291090): make it easier to look up Insight titles from a key.
+  for (const insightSet of parsedTrace.insights?.values() ?? []) {
+    const model = insightSet.model[label as keyof Trace.Insights.Types.InsightModels];
+    if (model) {
+      return `${model.title} insight`;
+    }
+  }
+
+  return label;
+}
+
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
 export class PerformanceAgent extends AiAgent<AgentFocus> {
+  readonly preamble = preamble;
   #formatter: PerformanceTraceFormatter|null = null;
   #lastEventForEnhancedQuery: Trace.Types.Events.Event|undefined;
   #lastInsightForEnhancedQuery: Trace.Insights.Types.InsightModel|undefined;
@@ -394,7 +414,15 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #freshTraceExtraPreambleFact: Host.AidaClient.RequestFact = {
-    text: buildExtraPreambleWhenFreshTrace(),
+    text: freshTracePreamble,
+    metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
+  };
+  #greenDevAnnotationsFact: Host.AidaClient.RequestFact = {
+    text: GREEN_DEV_ANNOTATIONS_INSTRUCTIONS,
+    metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
+  };
+  #greenDevFreshTraceAnnotationsFact: Host.AidaClient.RequestFact = {
+    text: GREEN_DEV_FRESH_TRACE_ANNOTATIONS_INSTRUCTIONS,
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #networkDataDescriptionFact: Host.AidaClient.RequestFact = {
@@ -416,6 +444,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     this.#networkDataDescriptionFact,
     this.#freshTraceExtraPreambleFact,
     this.#notExternalExtraPreambleFact,
+    this.#greenDevAnnotationsFact,
+    this.#greenDevFreshTraceAnnotationsFact,
   ]);
 
   /**
@@ -425,20 +455,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
    */
   #additionalSelectionsForQuery: string[] = [];
 
-  /**
-   * The CWV widget is shown when we analyze the trace summary, but we don't
-   * want to show it on every single "Analyzing data..." pill, as we show one
-   * after every prompt. So we make sure for a given Insight Set (which is based on navigation)
-   * we only show it once.
-   */
-  #hasShownWidgetForInsightSet = new WeakSet<Trace.Insights.Types.InsightSet>();
-  #hasShownWidgetForCallTree = new WeakSet<AICallTree>();
-  #hasShownWidgetForInsight = new WeakSet<Trace.Insights.Types.InsightModel>();
-
-  get preamble(): string {
-    return buildPreamble();
-  }
-
   get clientFeature(): Host.AidaClient.ClientFeature {
     return Host.AidaClient.ClientFeature.CHROME_PERFORMANCE_FULL_AGENT;
   }
@@ -497,35 +513,31 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
     // Case 1: Specific task (call tree) -> timeline summary & bottom up tree widgets
     if (focus.callTree) {
-      if (!this.#hasShownWidgetForCallTree.has(focus.callTree)) {
-        const event = focus.callTree.selectedNode?.event;
-        if (event) {
-          const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(event);
-          const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(startTime, endTime);
-          widgets.push({
-            name: 'TIMELINE_RANGE_SUMMARY',
-            data: {
-              bounds,
-              parsedTrace: focus.parsedTrace,
-              track: 'main',
-            },
-          });
-          widgets.push({
-            name: 'BOTTOM_UP_TREE',
-            data: {
-              bounds,
-              parsedTrace: focus.parsedTrace,
-            },
-          });
-          this.#hasShownWidgetForCallTree.add(focus.callTree);
-        }
+      const event = focus.callTree.selectedNode?.event;
+      if (event) {
+        const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(event);
+        const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(startTime, endTime);
+        widgets.push({
+          name: 'TIMELINE_RANGE_SUMMARY',
+          data: {
+            bounds,
+            parsedTrace: focus.parsedTrace,
+            track: 'main',
+          },
+        });
+        widgets.push({
+          name: 'BOTTOM_UP_TREE',
+          data: {
+            bounds,
+            parsedTrace: focus.parsedTrace,
+          },
+        });
       }
       return widgets;
     }
 
     // Case 2: LCP Insight -> LCP breakdown & CWV widgets
-    if (focus.insight && Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(focus.insight) &&
-        !this.#hasShownWidgetForInsight.has(focus.insight)) {
+    if (focus.insight && Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(focus.insight)) {
       widgets.push({
         name: 'PERF_INSIGHT',
         data: {
@@ -533,12 +545,11 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           insightData: focus.insight,
         },
       });
-      this.#hasShownWidgetForInsight.add(focus.insight);
     }
 
     // Case 3: Whole Trace or insight other than LCP -> CWV widget
     const primaryInsightSet = focus.primaryInsightSet;
-    if (primaryInsightSet && !this.#hasShownWidgetForInsightSet.has(primaryInsightSet)) {
+    if (primaryInsightSet) {
       widgets.push({
         name: 'CORE_VITALS',
         data: {
@@ -546,7 +557,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           insightSetKey: primaryInsightSet.id,
         },
       });
-      this.#hasShownWidgetForInsightSet.add(primaryInsightSet);
     }
 
     return widgets;
@@ -799,9 +809,17 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       this.addFact(this.#notExternalExtraPreambleFact);
     }
 
+    const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
+    if (annotationsEnabled) {
+      this.addFact(this.#greenDevAnnotationsFact);
+    }
+
     const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(focus.parsedTrace);
     if (isFresh) {
       this.addFact(this.#freshTraceExtraPreambleFact);
+      if (annotationsEnabled) {
+        this.addFact(this.#greenDevFreshTraceAnnotationsFact);
+      }
     }
 
     this.addFact(this.#callFrameDataDescriptionFact);
@@ -901,7 +919,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
     const {parsedTrace} = focus;
-    const processedNodeIds = new Set<Protocol.DOM.BackendNodeId>();
 
     this.declareFunction<{insightSetId: string, insightName: string}, {details: string}>('getInsightDetails', {
       description:
@@ -958,9 +975,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           const lcpEvent = lcpMetric?.event;
           if (lcpEvent && Trace.Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
             const nodeId = lcpEvent.args.data?.nodeId;
-            // We want to show only one DOM tree widget per walkthrough per node.
-            // We do want to show the widget for the same node again, if it's within a new walkthrough.
-            if (nodeId && !processedNodeIds.has(nodeId)) {
+            if (nodeId) {
               const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
               const domModel = target?.model(SDK.DOMModel.DOMModel);
               if (domModel) {
@@ -987,7 +1002,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
                       networkRequest,
                     },
                   });
-                  processedNodeIds.add(nodeId);
                 }
               }
             }
@@ -1058,53 +1072,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
               clampedMin as Trace.Types.Timing.Micro, clampedMax as Trace.Types.Timing.Micro);
         };
 
-    this.declareFunction<{min?: Trace.Types.Timing.Micro, max?: Trace.Types.Timing.Micro}, {
-      summary: string,
-    }>('getMainThreadTrackSummary', {
-      description:
-          'Returns a summary of the main thread for the given bounds. The result includes a top-down summary, bottom-up summary, third-parties summary, and a list of related insights for the events within the given bounds.',
-      parameters: {
-        type: Host.AidaClient.ParametersTypes.OBJECT,
-        description: '',
-        nullable: false,
-        properties: {
-          min: {
-            type: Host.AidaClient.ParametersTypes.INTEGER,
-            description: `The minimum time of the bounds, in microseconds (the current trace starts at ${
-                parsedTrace.data.Meta.traceBounds.min})`,
-            nullable: true,
-          },
-          max: {
-            type: Host.AidaClient.ParametersTypes.INTEGER,
-            description: `The maximum time of the bounds, in microseconds (the current trace ends at ${
-                parsedTrace.data.Meta.traceBounds.max})`,
-            nullable: true,
-          },
-        },
-        required: []
-      },
-      displayInfoFromArgs: args => {
-        const min = args.min ?? parsedTrace.data.Meta.traceBounds.min;
-        const max = args.max ?? parsedTrace.data.Meta.traceBounds.max;
-        return {
-          title: lockedString(UIStringsNotTranslated.mainThreadActivity),
-          action: `getMainThreadTrackSummary({min: ${min}, max: ${max}})`
-        };
-      },
-      handler: async args => {
-        debugLog('Function call: getMainThreadTrackSummary');
-
-        const bounds = createBounds(args.min, args.max);
-        if (!bounds) {
-          return {error: 'invalid bounds'};
-        }
-
-        const key = `getMainThreadTrackSummary({min: ${bounds.min}, max: ${bounds.max}})`;
-        return await this.#handleMainThreadTrackSummary(bounds, focus, 'getMainThreadTrackSummary', key);
-      },
-
-    });
-
     this.declareFunction<{label: MainThreadSectionLabel}, {summary: string}>('getMainThreadTrackSummaryByLabel', {
       description:
           'Returns a focused, detailed summary of the main thread for a predefined labeled period. Use this to get more relevant detail than the initial trace summary before diagnosing issues.',
@@ -1123,8 +1090,9 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         required: ['label']
       },
       displayInfoFromArgs: args => {
+        const labelName = getLabelName(args.label, focus);
         return {
-          title: lockedString(UIStringsNotTranslated.mainThreadActivity),
+          title: lockedString(`${UIStringsNotTranslated.mainThreadActivity}: ${labelName}`),
           action: `getMainThreadTrackSummaryByLabel('${args.label}')`
         };
       },
@@ -1531,10 +1499,9 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       return parsedTrace.data.Meta.traceBounds;
     }
 
-    for (const is of parsedTrace.insights?.values() ?? []) {
-      if (is.id === label) {
-        return is.bounds;
-      }
+    const insightSetById = parsedTrace.insights?.get(label as Trace.Types.Events.NavigationId);
+    if (insightSetById) {
+      return insightSetById.bounds;
     }
 
     if (insightSet) {

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

@@ -43,11 +43,6 @@ The agent can request additional data by calling functions. Here is the data the
 - **Arguments**: `eventKey` (string)
 - **Data Returned to Agent**: The full JSON representation of the specific trace event.
 
-#### `getMainThreadTrackSummary`
-- **Arguments**: `min` (integer, optional), `max` (integer, optional)
-- **Data Returned to Agent**: A comprehensive text summary of main thread activity *within the specified bounds*.
-  - **Note**: This differs from the initial "Main Thread Activity Data" fact as it is scoped to the provided time range and includes significantly more data: a **top-down tree**, a **bottom-up tree**, a **third-parties summary**, and a list of **related insights** for events in that range.
-
 #### `getNetworkTrackSummary`
 - **Arguments**: `min` (integer, optional), `max` (integer, optional)
 - **Data Returned to Agent**: A text summary of network requests and activity within the bounds.

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

@@ -47,14 +47,7 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
-function getPreamble(): string {
-  /**
-   * WARNING: preamble defined in code is only used when userTier is
-   * TESTERS. Otherwise, a server-side preamble is used (see
-   * chrome_preambles.gcl). Sync local changes with the server-side.
-   */
-  /* clang-format off */
-  let preamble = `You are the most advanced CSS/DOM/HTML debugging assistant integrated into Chrome DevTools.
+const preamble = `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 functions to gather additional context and resolve the user request.
@@ -92,9 +85,7 @@ If the user asks a question that requires an investigation of a problem, use thi
       - [Suggestion 1]
       - [Suggestion 2]`;
 
-  const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
-  if (greenDevEmulationEnabled) {
-    preamble += `
+const emulationInstructions = `
 # Emulation and Screenshots
 
 * If asked to verify whether the page is visually broken or if there are display problems with specific devices, use the \`activateDeviceEmulation\` tool. This tool will activate emulation for a specified device and capture a screenshot.
@@ -127,10 +118,6 @@ When referring to an element for which you know the nodeId, annotate your output
 - Always prefix the nodeId with the 'node-' prefix when using the markdown syntax.
 - This link will reveal the element in the Elements panel
 - Never mention node or nodeId when referring to the element, and especially not in the link text.`;
-}
-
-  return preamble;
-}
 
 /* clang-format on */
 
@@ -242,7 +229,7 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
  * instance for a new conversation.
  */
 export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
-  preamble = getPreamble();
+  readonly preamble = preamble;
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_STYLING_AGENT;
   get userTier(): string|undefined {
     const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
@@ -278,6 +265,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   #createExtensionScope: CreateExtensionScopeFunction;
   #greenDevEmulationScreenshot: string|null = null;
   #greenDevEmulationAxTree: string|null = null;
+  #hasAddedEmulationInstructions = false;
   #currentTurnId = 0;
 
   constructor(opts: ExecuteJsAgentOptions) {
@@ -821,6 +809,11 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       this.#greenDevEmulationAxTree = null;
     }
 
+    if (Greendev.Prototypes.instance().isEnabled('emulationCapabilities') && !this.#hasAddedEmulationInstructions) {
+      multimodalInputEnhancementQuery = emulationInstructions + '\n' + multimodalInputEnhancementQuery;
+      this.#hasAddedEmulationInstructions = true;
+    }
+
     const elementEnchancementQuery = selectedElement ?
         `# Inspected element\n\n${
             await StylingAgent.describeElement(selectedElement.getItem())}\n\n# User request\n\n` :

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -9,6 +9,7 @@ import * as BreakpointDebuggerAgent from './agents/BreakpointDebuggerAgent.js';
 import * as ContextSelectionAgent from './agents/ContextSelectionAgent.js';
 import * as ConversationSummaryAgent from './agents/ConversationSummaryAgent.js';
 import * as FileAgent from './agents/FileAgent.js';
+import * as GreenDevAgent from './agents/GreenDevAgent.js';
 import * as NetworkAgent from './agents/NetworkAgent.js';
 import * as PatchAgent from './agents/PatchAgent.js';
 import * as PerformanceAgent from './agents/PerformanceAgent.js';
@@ -53,6 +54,7 @@ export {
   ExtensionScope,
   FileAgent,
   FileFormatter,
+  GreenDevAgent,
   Injected,
   LighthouseFormatter,
   NetworkAgent,

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -134,6 +134,9 @@ const console = {
 };`;
 /* clang-format on */
 
+const MIN_CHARACTER_THRESHOLD = 5;
+const EMPTY_RESPONSE_DIFF_THRESHOLD = 3;
+
 /**
  * The AiCodeCompletion class is responsible for fetching code completion suggestions
  * from the AIDA backend.
@@ -142,6 +145,7 @@ export class AiCodeCompletion {
   #stopSequences: string[];
   #renderingTimeout?: number;
   #aidaRequestCache?: CachedRequest;
+  #lastEmptyResponseText?: string;
   // TODO(b/445394511): Remove panel from the class
   #panel: ContextFlavor;
   #callbacks?: Callbacks;
@@ -316,14 +320,28 @@ export class AiCodeCompletion {
     response: Host.AidaClient.CompletionResponse | null,
     fromCache: boolean,
   }> {
+    const combinedText = prefix + suffix;
+    if (combinedText.length < MIN_CHARACTER_THRESHOLD) {
+      return {response: null, fromCache: false};
+    }
+    if (this.#lastEmptyResponseText) {
+      if (Math.abs(combinedText.length - this.#lastEmptyResponseText.length) < EMPTY_RESPONSE_DIFF_THRESHOLD) {
+        return {response: null, fromCache: false};
+      }
+    }
+
     const request = this.#buildRequest(prefix, suffix, inferenceLanguage, additionalFiles);
     const {response, fromCache} = await this.#completeCodeCached(request);
 
     debugLog('At cursor position', cursorPositionAtRequest, {request, response, fromCache});
-    if (!response) {
+    if (!response || response.generatedSamples.length === 0) {
+      this.#lastEmptyResponseText = combinedText;
       return {response: null, fromCache: false};
     }
 
+    // Clear on successful response
+    this.#lastEmptyResponseText = undefined;
+
     return {response, fromCache};
   }