chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/models/ai_assistance/BuiltInAi.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 Root from '../../core/root/root.js';
 
@@ -23,11 +24,13 @@ export const enum LanguageModelAvailability {
   DISABLED = 'disabled',
 }
 
-export class BuiltInAi {
+export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #availability: LanguageModelAvailability|null = null;
   #hasGpu: boolean;
   #consoleInsightsSession?: LanguageModel;
   initDoneForTesting: Promise<void>;
+  #downloadProgress: number|null = null;
+  #currentlyCreatingSession = false;
 
   static instance(): BuiltInAi {
     if (builtInAiInstance === undefined) {
@@ -37,9 +40,10 @@ export class BuiltInAi {
   }
 
   constructor() {
+    super();
     this.#hasGpu = this.#isGpuAvailable();
     this.initDoneForTesting =
-        this.getLanguageModelAvailability().then(() => this.initialize()).then(() => this.#sendAvailabilityMetrics());
+        this.getLanguageModelAvailability().then(() => this.#sendAvailabilityMetrics()).then(() => this.initialize());
   }
 
   async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
@@ -49,14 +53,59 @@ export class BuiltInAi {
     }
     try {
       // @ts-expect-error
-      this.#availability = await window.LanguageModel.availability(
-                               {expectedOutputs: [{type: 'text', languages: ['en']}]}) as LanguageModelAvailability;
+      this.#availability = await window.LanguageModel.availability({
+        expectedInputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+        expectedOutputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+      }) as LanguageModelAvailability;
     } catch {
       this.#availability = LanguageModelAvailability.UNAVAILABLE;
     }
     return this.#availability;
   }
 
+  isDownloading(): boolean {
+    return this.#availability === LanguageModelAvailability.DOWNLOADING;
+  }
+
+  isEventuallyAvailable(): boolean {
+    if (!this.#hasGpu && !Boolean(Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu)) {
+      return false;
+    }
+    return this.#availability === LanguageModelAvailability.AVAILABLE ||
+        this.#availability === LanguageModelAvailability.DOWNLOADING ||
+        this.#availability === LanguageModelAvailability.DOWNLOADABLE;
+  }
+
+  #setDownloadProgress(newValue: number): void {
+    this.#downloadProgress = newValue;
+    this.dispatchEventToListeners(Events.DOWNLOAD_PROGRESS_CHANGED, this.#downloadProgress);
+  }
+
+  getDownloadProgress(): number|null {
+    return this.#downloadProgress;
+  }
+
+  startDownloadingModel(): void {
+    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
+      return;
+    }
+    if (this.#availability !== LanguageModelAvailability.DOWNLOADABLE) {
+      return;
+    }
+
+    void this.#createSession();
+    // Without the timeout, the returned availability would still be `downloadable`
+    setTimeout(() => {
+      void this.getLanguageModelAvailability();
+    }, 1000);
+  }
+
   #isGpuAvailable(): boolean {
     const canvas = document.createElement('canvas');
     try {
@@ -86,16 +135,29 @@ export class BuiltInAi {
     if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
       return;
     }
-    if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+    if (this.#availability !== LanguageModelAvailability.AVAILABLE &&
+        this.#availability !== LanguageModelAvailability.DOWNLOADING) {
       return;
     }
     await this.#createSession();
   }
 
   async #createSession(): Promise<void> {
+    if (this.#currentlyCreatingSession) {
+      return;
+    }
+    this.#currentlyCreatingSession = true;
+
+    const monitor = (m: EventTarget): void => {
+      m.addEventListener('downloadprogress', ((e: {loaded: number}) => {
+                                               this.#setDownloadProgress(e.loaded);
+                                             }) as unknown as EventListener);
+    };
+
     try {
       // @ts-expect-error
       this.#consoleInsightsSession = await window.LanguageModel.create({
+        monitor,
         initialPrompts: [{
           role: 'system',
           content: `
@@ -125,11 +187,13 @@ Your instructions are as follows:
         }],
       });
       if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+        this.dispatchEventToListeners(Events.DOWNLOADED_AND_SESSION_CREATED);
         void this.getLanguageModelAvailability();
       }
     } catch (e) {
       console.error('Error when creating LanguageModel session', e.message);
     }
+    this.#currentlyCreatingSession = false;
   }
 
   static removeInstance(): void {
@@ -198,3 +262,13 @@ Your instructions are as follows:
     }
   }
 }
+
+export const enum Events {
+  DOWNLOAD_PROGRESS_CHANGED = 'downloadProgressChanged',
+  DOWNLOADED_AND_SESSION_CREATED = 'downloadedAndSessionCreated',
+}
+
+export interface EventTypes {
+  [Events.DOWNLOAD_PROGRESS_CHANGED]: number;
+  [Events.DOWNLOADED_AND_SESSION_CREATED]: void;
+}

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

@@ -573,12 +573,14 @@ export abstract class AiAgent<T> {
         if (!('answer' in parsedResponse)) {
           throw new Error('Expected a completed response to have an answer');
         }
-        this.#history.push({
-          parts: [{
-            text: parsedResponse.answer,
-          }],
-          role: Host.AidaClient.Role.MODEL,
-        });
+        if (!functionCall) {
+          this.#history.push({
+            parts: [{
+              text: parsedResponse.answer,
+            }],
+            role: Host.AidaClient.Role.MODEL,
+          });
+        }
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceAnswerReceived);
         yield {
           type: ResponseType.ANSWER,
@@ -587,12 +589,17 @@ export abstract class AiAgent<T> {
           complete: true,
           rpcId,
         };
-        break;
+        if (!functionCall) {
+          break;
+        }
       }
 
       if (functionCall) {
         try {
-          const result = yield* this.#callFunction(functionCall.name, functionCall.args, options);
+          const result = yield* this.#callFunction(functionCall.name, functionCall.args, {
+            ...options,
+            explanation: textResponse,
+          });
           if (options.signal?.aborted) {
             yield this.#createErrorResponse(ErrorType.ABORT);
             break;
@@ -623,19 +630,26 @@ export abstract class AiAgent<T> {
       #callFunction(
           name: string,
           args: Record<string, unknown>,
-          options?: FunctionHandlerOptions,
+          options?: FunctionHandlerOptions&{explanation?: string},
           ): AsyncGenerator<FunctionCallResponseData, {result: unknown}> {
     const call = this.#functionDeclarations.get(name);
     if (!call) {
       throw new Error(`Function ${name} is not found.`);
     }
+    const parts: Host.AidaClient.Part[] = [];
+    if (options?.explanation) {
+      parts.push({
+        text: options.explanation,
+      });
+    }
+    parts.push({
+      functionCall: {
+        name,
+        args,
+      },
+    });
     this.#history.push({
-      parts: [{
-        functionCall: {
-          name,
-          args,
-        },
-      }],
+      parts,
       role: Host.AidaClient.Role.MODEL,
     });
 
@@ -744,6 +758,7 @@ export abstract class AiAgent<T> {
           rpcId,
           functionCall: aidaResponse.functionCalls[0],
           completed: true,
+          text: aidaResponse.explanation,
         };
         break;
       }

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

@@ -47,7 +47,6 @@ const UIStringsNotTranslated = {
   mainThreadActivity: 'Investigating main thread activity…',
 } as const;
 const lockedString = i18n.i18n.lockedString;
-const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
 
 /**
  * WARNING: preamble defined in code is only used when userTier is
@@ -55,14 +54,53 @@ const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled()
  * chrome_preambles.gcl). Sync local changes with the server-side.
  */
 
-const greenDevAdditionalFunction = `
-- CRITICAL:You also have access to a function called addElementAnnotation, which should be used to highlight elements.`;
+const greenDevAdditionalAnnotationsFunction = `
+- CRITICAL: You also have access to functions called addElementAnnotation and addNeworkRequestAnnotation,
+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.
+- These functions should be called as soon as you identify the entity that needs to be highlighted.
+- In addition to this, the addElementAnnotation function should always be called for the LCP element, if known.
+- The annotationMessage should be descriptive and relevant to why the element or network request is being highlighted.
+`;
 
-const greenDevAdditionalGuidelines = `
-- CRITICAL: Each time an element with a nodeId is mentioned, you MUST ALSO call the function addElementAnnotation for that element.
-- The addElementAnnotation function should be called as soon as you identify an element that needs to be highlighted.
-- The addElementAnnotation function should always be called for the LCP element, if known.
-- The annotationMessage should be descriptive and relevant to why the element is being highlighted.
+const greenDevAdditionalWidgetGuidelines = `
+- **Visualizing Insights**: When discussing the breakdown of specific metrics or a performance problem,
+you must render the appropriate Insight Overview component. Use these tags on a new line within your response:
+  - For LCP breakdown: <ai-insight value="LCPBreakdown">
+  - For INP breakdown: <ai-insight value="INPBreakdown">
+  - For CLS culprits: <ai-insight value="CLSCulprits">
+  - For third parties: <ai-insight value="ThirdParties">
+  - For document latency: <ai-insight value="DocumentLatency">
+  - For DOM size: <ai-insight value="DOMSize">
+  - For duplicate JavaScript: <ai-insight value="DuplicatedJavaScript">
+  - For font display: <ai-insight value="FontDisplay">
+  - For forced reflow: <ai-insight value="ForcedReflow">
+  - For image delivery: <ai-insight value="ImageDelivery">
+  - For LCP discovery: <ai-insight value="LCPDiscovery">
+  - For legacy JavaScript: <ai-insight value="LegacyJavaScript">
+  - For network dependency tree: <ai-insight value="NetworkDependencyTree">
+  - For render blocking: <ai-insight value="RenderBlocking">
+  - For slow CSS selector: <ai-insight value="SlowCSSSelector">
+  - For viewport: <ai-insight value="Viewport">
+  - For modern HTTP: <ai-insight value="ModernHTTP">
+  - For cache: <ai-insight value="Cache">
+- Do not place the <ai-insight> tag inside markdown code blocks (backticks). Output the tag directly as raw text.
+- **Visualizing Network Request Details**: When discussing a specific network request, represent its details in a structured widget for improved readability and focus.
+  - Use this tag on a new line within your response, replacing \`EVENT_KEY\` (only the number, no letters prefix or -) with the actual trace event key:
+    - For network event details: <network-request-widget value="EVENT_KEY">
+- **Visualizing Flamechart**: When discussing an interesting part of the trace, represent its details in a structured widget for improved readability and focus.
+  - Use this tag on a new line within your response, replacing "MIN_MICROSECONDS" and "MAX_MICROSECONDS" with the actual start and end times in microseconds:
+    - For a flame chart of a specific time range: <flame-chart-widget start="MIN_MICROSECONDS" end="MAX_MICROSECONDS">
+    - CRITICAL: MIN_MICROSECONDS and MAX_MICROSECONDS must be within the flamechart bounds and in microseconds.
+  - When you mention a specific performance event like LCP, INP, or a long task, you MUST also include a flamechart widget focused on the exact time range of that event.
+    - This provides essential visual context to your explanation.
+- CRITICAL: Avoid Redundancy - When using insight or network request widgets, do not repeat details in the text response.
+  - For example, for LCP, the phases like Time to First Byte will be part of the insight widget, so you must not state them in the text. This applies to other insights and network request timings.
+- Do not display any of the same widgets more than once. For example, if you have already displayed a network request widget for a specific event, do not display it again in the same response.
 `;
 
 /**
@@ -72,7 +110,10 @@ const greenDevAdditionalGuidelines = `
  *
  * Check token length in https://aistudio.google.com/
  */
-const preamble = `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
+const buildPreamble = (): string => {
+  const greenDevEnabled = Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled;
+  const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
+  return `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.
 
@@ -82,7 +123,7 @@ Don't mention anything about an insight without first getting more data about it
 
 You have many functions available to learn more about the trace. Use these to confirm hypotheses, or to further explore the trace when diagnosing performance issues.
 
-${annotationsEnabled ? greenDevAdditionalFunction : ''}
+${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.
 
@@ -124,7 +165,8 @@ 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 ? greenDevAdditionalGuidelines : ''}
+${annotationsEnabled ? greenDevAdditionalAnnotationsGuidelines : ''}
+${greenDevEnabled ? greenDevAdditionalWidgetGuidelines : ''}
 
 ## Strict Constraints
 
@@ -142,6 +184,7 @@ Adhere to the following critical requirements:
 - 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.
 `;
+};
 
 const extraPreambleWhenNotExternal = `Additional notes:
 
@@ -153,12 +196,27 @@ When referring to a trace event that has a corresponding \`eventKey\`, annotate
 When asking the user to make a choice between multiple 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 greenDevAdditionalGuidelineFreshTrace = `
-When referring to an element for which you know the nodeId, always call the function addElementAnnotation, specifying the id and an annotation reason.
+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 extraPreambleWhenFreshTrace = `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)
@@ -168,6 +226,9 @@ When referring to an element for which you know the nodeId, annotate your output
 
 ${annotationsEnabled ? greenDevAdditionalGuidelineFreshTrace : ''}`;
 
+  return extraPreambleWhenFreshTrace;
+};
+
 enum ScorePriority {
   REQUIRED = 3,
   CRITICAL = 2,
@@ -313,7 +374,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #freshTraceExtraPreambleFact: Host.AidaClient.RequestFact = {
-    text: extraPreambleWhenFreshTrace,
+    text: buildExtraPreambleWhenFreshTrace(),
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #networkDataDescriptionFact: Host.AidaClient.RequestFact = {
@@ -327,14 +388,16 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #traceFacts: Host.AidaClient.RequestFact[] = [];
 
   get preamble(): string {
-    return preamble;
+    return buildPreamble();
   }
 
   get clientFeature(): Host.AidaClient.ClientFeature {
     return Host.AidaClient.ClientFeature.CHROME_PERFORMANCE_FULL_AGENT;
   }
   get userTier(): string|undefined {
-    return annotationsEnabled ? 'TESTERS' : Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.userTier;
+    return Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) ?
+        'TESTERS' :
+        Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.userTier;
   }
   get options(): RequestOptions {
     const temperature = Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.temperature;
@@ -513,7 +576,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     // Clear any previous facts in case the user changed the active context.
     this.clearFacts();
     if (options.selected && focus) {
-      this.#addFacts(options.selected);
+      await this.#addFacts(options.selected);
     }
 
     yield* super.run(initialQuery, options);
@@ -533,12 +596,12 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         {text: `Trace summary:\n${text}`, metadata: {source: 'devtools', score: ScorePriority.REQUIRED}});
   }
 
-  #createFactForCriticalRequests(): void {
+  async #createFactForCriticalRequests(): Promise<void> {
     if (!this.#formatter) {
       return;
     }
 
-    const text = this.#formatter.formatCriticalRequests();
+    const text = await this.#formatter.formatCriticalRequests();
     if (!text) {
       return;
     }
@@ -549,12 +612,13 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
   }
 
-  #createFactForMainThreadBottomUpSummary(): void {
+  async #createFactForMainThreadBottomUpSummary(): Promise<void> {
     if (!this.#formatter) {
       return;
     }
 
-    const text = this.#formatter.formatMainThreadBottomUpSummary();
+    const formatter = this.#formatter;
+    const text = await formatter.formatMainThreadBottomUpSummary();
     if (!text) {
       return;
     }
@@ -565,12 +629,12 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
   }
 
-  #createFactForThirdPartySummary(): void {
+  async #createFactForThirdPartySummary(): Promise<void> {
     if (!this.#formatter) {
       return;
     }
 
-    const text = this.#formatter.formatThirdPartySummary();
+    const text = await this.#formatter.formatThirdPartySummary();
     if (!text) {
       return;
     }
@@ -581,12 +645,12 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
   }
 
-  #createFactForLongestTasks(): void {
+  async #createFactForLongestTasks(): Promise<void> {
     if (!this.#formatter) {
       return;
     }
 
-    const text = this.#formatter.formatLongestTasks();
+    const text = await this.#formatter.formatLongestTasks();
     if (!text) {
       return;
     }
@@ -597,7 +661,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
   }
 
-  #addFacts(context: PerformanceTraceContext): void {
+  async #addFacts(context: PerformanceTraceContext): Promise<void> {
     const focus = context.getItem();
 
     if (!context.external) {
@@ -613,12 +677,26 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     this.addFact(this.#networkDataDescriptionFact);
 
     if (!this.#traceFacts.length) {
+      const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+      if (!target) {
+        throw new Error('missing target');
+      }
+
       this.#formatter = new PerformanceTraceFormatter(focus);
+      this.#formatter.resolveFunctionCode =
+          async (url: Platform.DevToolsPath.UrlString, line: number, column: number) => {
+        if (!target) {
+          return null;
+        }
+
+        return await SourceMapScopes.FunctionCodeResolver.getFunctionCodeFromLocation(
+            target, url, line, column, {contextLength: 200, contextLineLength: 5, appendProfileData: true});
+      };
       this.#createFactForTraceSummary();
-      this.#createFactForCriticalRequests();
-      this.#createFactForMainThreadBottomUpSummary();
-      this.#createFactForThirdPartySummary();
-      this.#createFactForLongestTasks();
+      await this.#createFactForCriticalRequests();
+      await this.#createFactForMainThreadBottomUpSummary();
+      await this.#createFactForThirdPartySummary();
+      await this.#createFactForLongestTasks();
     }
 
     for (const fact of this.#traceFacts) {
@@ -686,9 +764,9 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           return {error: `Invalid insight set id. Valid insight set ids are: ${valid}`};
         }
 
-        const insight = insightSet?.model[params.insightName as keyof Trace.Insights.Types.InsightModels];
+        const insight = insightSet.model[params.insightName as keyof Trace.Insights.Types.InsightModels];
         if (!insight) {
-          const valid = Object.keys(insightSet?.model).join(', ');
+          const valid = Object.keys(insightSet.model).join(', ');
           return {error: `No insight available. Valid insight names are: ${valid}`};
         }
 
@@ -790,7 +868,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           return {error: 'invalid bounds'};
         }
 
-        const summary = this.#formatter.formatMainThreadTrackSummary(bounds);
+        const formatter = this.#formatter;
+        const summary = await formatter.formatMainThreadTrackSummary(bounds);
         if (this.#isFunctionResponseTooLarge(summary)) {
           return {
             error:
@@ -898,7 +977,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           return {error: 'No call tree found'};
         }
 
-        const callTree = this.#formatter.formatCallTree(tree);
+        const formatter = this.#formatter;
+        const callTree = await formatter.formatCallTree(tree);
 
         const key = `getDetailedCallTree(${args.eventKey})`;
         this.#cacheFunctionResult(focus, key, callTree);
@@ -907,7 +987,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
     });
 
-    if (annotationsEnabled) {
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
       this.declareFunction<{
         elementId: string,
         annotationMessage: string,
@@ -935,10 +1015,41 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           return await this.addElementAnnotation(params.elementId, params.annotationMessage);
         },
       });
+
+      this.declareFunction<{
+        eventKey: string,
+        annotationMessage: string,
+      }>('addNetworkRequestAnnotation', {
+        description:
+            'Adds a visual annotation in the Network panel, attached to the request with the specific UID provided. ' +
+            'Use it to highlight requests in the Network panel and provide contextual suggestions to the user ' +
+            'related to their queries.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            eventKey: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The event key of the network request to annotate.',
+              nullable: false,
+            },
+            annotationMessage: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The message the annotation should show to the user.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async params => {
+          return await this.addNetworkRequestAnnotation(params.eventKey, params.annotationMessage);
+        },
+      });
     }
 
     this.declareFunction<{scriptUrl: string, line: number, column: number}, {result: string}>('getFunctionCode', {
-      description: 'Returns the code for a function defined at the given location.',
+      description:
+          'Returns the code for a function defined at the given location. The result is annotated with the runtime performance of each line of code.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -988,8 +1099,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         }
 
         const url = args.scriptUrl as Platform.DevToolsPath.UrlString;
-        const code = await SourceMapScopes.FunctionCodeResolver.getFunctionCodeFromLocation(
-            target, url, args.line, args.column, {contextLength: 200, contextLineLength: 5, appendProfileData: true});
+        const code = await this.#formatter.resolveFunctionCodeAtLocation(url, args.line, args.column);
         if (!code) {
           return {error: 'Could not find code'};
         }
@@ -1007,7 +1117,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
     this.declareFunction<{url: string}, {content: string}>('getResourceContent', {
       description:
-          'Returns the content of the resource with the given url. Only use this for text resource types. Prefer getFunctionCode when possible.',
+          'Returns the content of the resource with the given url. Only use this for text resource types. This function is helpful for getting script contents in order to further analyze main thread activity and suggest code improvements. When analyzing the main thread activity, always call this function to get more detail. Always call this function when asked to provide specifics about what is happening in the code. Never ask permission to call this function, just do it.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -1095,7 +1205,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   async addElementAnnotation(elementId: string, annotationMessage: string):
       Promise<FunctionCallHandlerResult<unknown>> {
     if (!Annotations.AnnotationRepository.annotationsEnabled()) {
-      console.warn('Received agent request to add annotation with annotations disabled');
+      console.warn('Received agent request to add element annotation with annotations disabled');
       return {error: 'Annotations are not currently enabled'};
     }
 
@@ -1104,4 +1214,32 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     Annotations.AnnotationRepository.instance().addElementsAnnotation(annotationMessage, elementId);
     return {result: {success: true}};
   }
+
+  async addNetworkRequestAnnotation(eventKey: string, annotationMessage: string):
+      Promise<FunctionCallHandlerResult<unknown>> {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received agent request to add network request annotation with annotations disabled');
+      return {error: 'Annotations are not currently enabled'};
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(
+        `AI AGENT EVENT: Performance Agent adding annotation for network request ${eventKey}: '${annotationMessage}'`);
+
+    let requestId = undefined;
+    const focus = this.context?.getItem();
+    if (focus) {
+      const event = focus.lookupEvent(eventKey as Trace.Types.File.SerializableKey);
+      if (event && Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+        requestId = event.args.data.requestId;
+      }
+    }
+
+    if (!requestId) {
+      console.warn('Unable to lookup requestId for request with event key', eventKey);
+    }
+
+    Annotations.AnnotationRepository.instance().addNetworkRequestAnnotation(annotationMessage, requestId);
+    return {result: {success: true}};
+  }
 }

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

@@ -398,6 +398,11 @@ Content:
   {
     "type": "querying"
   },
+  {
+    "type": "answer",
+    "text": "this is my text before the actual answer",
+    "complete": true
+  },
   {
     "type": "thought",
     "thought": "I am thinking."