chrome-devtools-frontend 1.0.1514545 → 1.0.1515796

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

@@ -9,7 +9,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
+import * as Tracing from '../../../services/tracing/tracing.js';
 import * as Trace from '../../trace/trace.js';
 import type {ConversationType} from '../AiHistoryStorage.js';
 import {
@@ -18,6 +18,8 @@ import {
 } from '../data_formatters/PerformanceInsightFormatter.js';
 import {PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceFormatter.js';
 import {debugLog} from '../debug.js';
+import {AICallTree} from '../performance/AICallTree.js';
+import {AgentFocus} from '../performance/AIContext.js';
 
 import {
   type AgentOptions,
@@ -156,23 +158,23 @@ enum ScorePriority {
   DEFAULT = 1,
 }
 
-export class PerformanceTraceContext extends ConversationContext<TimelineUtils.AIContext.AgentFocus> {
+export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   static full(parsedTrace: Trace.TraceModel.ParsedTrace): PerformanceTraceContext {
-    return new PerformanceTraceContext(TimelineUtils.AIContext.AgentFocus.full(parsedTrace));
+    return new PerformanceTraceContext(AgentFocus.full(parsedTrace));
   }
 
   static fromInsight(parsedTrace: Trace.TraceModel.ParsedTrace, insight: Trace.Insights.Types.InsightModel):
       PerformanceTraceContext {
-    return new PerformanceTraceContext(TimelineUtils.AIContext.AgentFocus.fromInsight(parsedTrace, insight));
+    return new PerformanceTraceContext(AgentFocus.fromInsight(parsedTrace, insight));
   }
 
-  static fromCallTree(callTree: TimelineUtils.AICallTree.AICallTree): PerformanceTraceContext {
-    return new PerformanceTraceContext(TimelineUtils.AIContext.AgentFocus.fromCallTree(callTree));
+  static fromCallTree(callTree: AICallTree): PerformanceTraceContext {
+    return new PerformanceTraceContext(AgentFocus.fromCallTree(callTree));
   }
 
-  #focus: TimelineUtils.AIContext.AgentFocus;
+  #focus: AgentFocus;
 
-  constructor(focus: TimelineUtils.AIContext.AgentFocus) {
+  constructor(focus: AgentFocus) {
     super();
     this.#focus = focus;
   }
@@ -182,7 +184,7 @@ export class PerformanceTraceContext extends ConversationContext<TimelineUtils.A
     return `trace-${min}-${max}`;
   }
 
-  override getItem(): TimelineUtils.AIContext.AgentFocus {
+  override getItem(): AgentFocus {
     return this.#focus;
   }
 
@@ -226,13 +228,13 @@ type PerformanceConversationType =
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
-export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus> {
+export class PerformanceAgent extends AiAgent<AgentFocus> {
   // TODO: would make more sense on AgentOptions
   #conversationType: PerformanceConversationType;
   #formatter: PerformanceTraceFormatter|null = null;
   #lastInsightForEnhancedQuery: Trace.Insights.Types.InsightModel|undefined;
   #eventsSerializer = new Trace.EventsSerializer.EventsSerializer();
-  #lastFocusHandledForContextDetails: TimelineUtils.AIContext.AgentFocus|null = null;
+  #lastFocusHandledForContextDetails: AgentFocus|null = null;
 
   constructor(opts: AgentOptions, conversationType: PerformanceConversationType) {
     super(opts);
@@ -250,8 +252,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
    *
    * The record key is the result of a function's displayInfoFromArgs.
    */
-  #functionCallCacheForFocus =
-      new Map<TimelineUtils.AIContext.AgentFocus, Record<string, Host.AidaClient.RequestFact>>();
+  #functionCallCacheForFocus = new Map<AgentFocus, Record<string, Host.AidaClient.RequestFact>>();
 
   #networkDataDescriptionFact: Host.AidaClient.RequestFact = {
     text: TraceEventFormatter.networkDataFormatDescription,
@@ -305,8 +306,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
   }
 
   async *
-      handleContextDetails(context: ConversationContext<TimelineUtils.AIContext.AgentFocus>|null):
-          AsyncGenerator<ContextResponse, void, void> {
+      handleContextDetails(context: ConversationContext<AgentFocus>|null): AsyncGenerator<ContextResponse, void, void> {
     if (!context) {
       return;
     }
@@ -368,8 +368,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
     return super.parseTextResponse(response);
   }
 
-  override async enhanceQuery(query: string, context: ConversationContext<TimelineUtils.AIContext.AgentFocus>|null):
-      Promise<string> {
+  override async enhanceQuery(query: string, context: ConversationContext<AgentFocus>|null): Promise<string> {
     if (!context) {
       this.clearDeclaredFunctions();
       return query;
@@ -426,7 +425,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
   }
 
   override async * run(initialQuery: string, options: {
-    selected: ConversationContext<TimelineUtils.AIContext.AgentFocus>|null,
+    selected: ConversationContext<AgentFocus>|null,
     signal?: AbortSignal,
   }): AsyncGenerator<ResponseData, void, void> {
     const focus = options.selected?.getItem();
@@ -518,7 +517,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
     });
   }
 
-  #addFacts(focus: TimelineUtils.AIContext.AgentFocus): void {
+  #addFacts(focus: AgentFocus): void {
     this.addFact(this.#callFrameDataDescriptionFact);
     this.addFact(this.#networkDataDescriptionFact);
 
@@ -543,7 +542,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
     }
   }
 
-  #cacheFunctionResult(focus: TimelineUtils.AIContext.AgentFocus, key: string, result: string): void {
+  #cacheFunctionResult(focus: AgentFocus, key: string, result: string): void {
     const fact: Host.AidaClient.RequestFact = {
       text: `This is the result of calling ${key}:\n${result}`,
       metadata: {source: key, score: ScorePriority.DEFAULT},
@@ -553,7 +552,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
     this.#functionCallCacheForFocus.set(focus, cache);
   }
 
-  #declareFunctions(context: ConversationContext<TimelineUtils.AIContext.AgentFocus>): void {
+  #declareFunctions(context: ConversationContext<AgentFocus>): void {
     const focus = context.getItem();
     const {parsedTrace, insightSet} = focus.data;
 
@@ -786,7 +785,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
           return {error: 'Invalid eventKey'};
         }
 
-        const tree = TimelineUtils.AICallTree.AICallTree.fromEvent(event, parsedTrace);
+        const tree = AICallTree.fromEvent(event, parsedTrace);
         const callTree = tree ? this.#formatter.formatCallTree(tree) : 'No call tree found';
 
         const key = `getDetailedCallTree(${args.eventKey})`;
@@ -796,7 +795,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
 
     });
 
-    const isFresh = TimelineUtils.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace);
+    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace);
     const hasScriptContents =
         parsedTrace.metadata.enhancedTraceVersion && parsedTrace.data.Scripts.scripts.some(s => s.content);
 

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

@@ -5,7 +5,8 @@
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
-import type * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
+import type {AICallTree} from '../performance/AICallTree.js';
+import type {AgentFocus} from '../performance/AIContext.js';
 
 import {AiAgent, type ContextResponse, type ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
 import {PerformanceTraceContext} from './PerformanceAgent.js';
@@ -87,7 +88,7 @@ The 'calculatePosition' function, taking 80ms, is a potential bottleneck.
 Consider optimizing the position calculation logic or reducing the frequency of calls to improve animation performance.
 `;
 
-export class PerformanceAnnotationsAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus> {
+export class PerformanceAnnotationsAgent extends AiAgent<AgentFocus> {
   override preamble = callTreePreamble;
 
   get clientFeature(): Host.AidaClient.ClientFeature {
@@ -109,8 +110,7 @@ export class PerformanceAnnotationsAgent extends AiAgent<TimelineUtils.AIContext
   }
 
   async *
-      handleContextDetails(context: ConversationContext<TimelineUtils.AIContext.AgentFocus>|null):
-          AsyncGenerator<ContextResponse, void, void> {
+      handleContextDetails(context: ConversationContext<AgentFocus>|null): AsyncGenerator<ContextResponse, void, void> {
     if (!context) {
       return;
     }
@@ -134,8 +134,7 @@ export class PerformanceAnnotationsAgent extends AiAgent<TimelineUtils.AIContext
     };
   }
 
-  override async enhanceQuery(query: string, context: ConversationContext<TimelineUtils.AIContext.AgentFocus>|null):
-      Promise<string> {
+  override async enhanceQuery(query: string, context: ConversationContext<AgentFocus>|null): Promise<string> {
     if (!context) {
       return query;
     }
@@ -153,7 +152,7 @@ export class PerformanceAnnotationsAgent extends AiAgent<TimelineUtils.AIContext
   /**
    * Used in the Performance panel to automatically generate a label for a selected entry.
    */
-  async generateAIEntryLabel(callTree: TimelineUtils.AICallTree.AICallTree): Promise<string> {
+  async generateAIEntryLabel(callTree: AICallTree): Promise<string> {
     const context = PerformanceTraceContext.fromCallTree(callTree);
     const response = await Array.fromAsync(this.run(AI_LABEL_GENERATION_PROMPT, {selected: context}));
     const lastResponse = response.at(-1);

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -23,3 +23,6 @@ export * from './data_formatters/PerformanceTraceFormatter.js';
 export * from './data_formatters/UnitFormatters.js';
 export * from './ConversationHandler.js';
 export * from './injected.js';
+export * from './performance/AICallTree.js';
+export * from './performance/AIContext.js';
+export * from './performance/AIQueries.js';

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

@@ -830,11 +830,13 @@ URL: https://web.dev/cls/
 Bounds: {min: 1020034823047, max: 1020036087961}
 CPU throttling: none
 Network throttling: none
-Metrics:
+Metrics (lab / observed):
   - LCP: 118 ms, event: (eventKey: r-1802, ts: 1020034953358)
+  - LCP breakdown:
     - TTFB: 31.3 ms, bounds: {min: 1020034834921, max: 1020034866264}
     - Render delay: 87.1 ms, bounds: {min: 1020034866264, max: 1020034953358}
   - CLS: 0.00
+Metrics (field / real users): n/a – no data for this page in CrUX
 Available insights:
   - insight name: LCPBreakdown
     description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
@@ -861,13 +863,15 @@ URL: https://news.yahoo.com/
 Bounds: {min: 157423484442, max: 157427277166}
 CPU throttling: none
 Network throttling: none
-Metrics:
+Metrics (lab / observed):
   - LCP: 464 ms, event: (eventKey: r-33210, ts: 157423953162)
+  - LCP breakdown:
     - TTFB: 215.7 ms, bounds: {min: 157423488682, max: 157423704371}
     - Load delay: 90.3 ms, bounds: {min: 157423704371, max: 157423794709}
     - Load duration: 64 ms, bounds: {min: 157423794709, max: 157423858674}
     - Render delay: 94.5 ms, bounds: {min: 157423858674, max: 157423953162}
   - CLS: 0.04, event: (eventKey: s--1, ts: 157425604232)
+Metrics (field / real users): n/a – no data for this page in CrUX
 Available insights:
   - insight name: LCPBreakdown
     description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
@@ -914,3 +918,138 @@ Available insights:
     example question: Is my site polyfilling modern JavaScript features?
     example question: How can I reduce the amount of legacy JavaScript on my page?
 === end content
+
+Title: PerformanceTraceFormatter formatTraceSummary deals with CrUX manager errors
+Content:
+URL: http://localhost/image-delivery-cases.html
+Bounds: {min: 59728641874, max: 59734400108}
+CPU throttling: 1x
+Network throttling: No throttling
+Metrics (lab / observed):
+  - LCP: 663 ms, event: (eventKey: r-14753, ts: 59729312744)
+  - LCP breakdown:
+    - TTFB: 7 ms, bounds: {min: 59728649746, max: 59728656735}
+    - Load delay: 45.6 ms, bounds: {min: 59728656735, max: 59728702313}
+    - Load duration: 506.3 ms, bounds: {min: 59728702313, max: 59729208600}
+    - Render delay: 104.1 ms, bounds: {min: 59729208600, max: 59729312744}
+  - CLS: 0.31, event: (eventKey: s--1, ts: 59729100192)
+Metrics (field / real users): n/a – no data for this page in CrUX
+Available insights:
+  - insight name: Cache
+    description: A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).
+    relevant trace bounds: {min: 59728702014, max: 59728867430}
+    estimated metric savings: FCP 0 ms, LCP 150 ms
+    estimated wasted bytes: 971.5 kB
+    example question: What caching strategies can I apply to improve my page performance?
+  - insight name: ImageDelivery
+    description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
+    relevant trace bounds: {min: 59728701403, max: 59729395208}
+    estimated metric savings: FCP 0 ms, LCP 100 ms
+    estimated wasted bytes: 2 MB
+    example question: What should I do to improve and optimize the time taken to fetch and display images on the page?
+    example question: Are all images on my site optimized?
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 59728649746, max: 59729312744}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: LCPDiscovery
+    description: Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)
+    relevant trace bounds: {min: 59728656735, max: 59729209036}
+    example question: Suggest fixes to reduce my LCP
+    example question: What can I do to reduce my LCP discovery time?
+    example question: Why is LCP discovery time important?
+  - insight name: CLSCulprits
+    description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.
+    relevant trace bounds: {min: 59729100192, max: 59730317334}
+    example question: Help me optimize my CLS score
+    example question: How can I prevent layout shifts on this page?
+  - insight name: DocumentLatency
+    description: Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
+    relevant trace bounds: {min: 59728651057, max: 59728790724}
+    estimated metric savings: FCP 0 ms, LCP 0 ms
+    estimated wasted bytes: 1.6 kB
+    example question: How do I decrease the initial loading time of my page?
+    example question: Did anything slow down the request for this document?
+  - insight name: Viewport
+    description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.
+    relevant trace bounds: {min: 59728649746, max: 59734400108}
+    estimated metric savings: INP 0 ms
+    example question: How do I make sure my page is optimized for mobile viewing?
+  - insight name: ThirdParties
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+    relevant trace bounds: {min: 59728701403, max: 59729465969}
+    example question: Which third parties are having the largest impact on my page performance?
+=== end content
+
+Title: PerformanceTraceFormatter formatTraceSummary image-delivery.json.gz
+Content:
+URL: http://localhost/image-delivery-cases.html
+Bounds: {min: 59728641874, max: 59734400108}
+CPU throttling: 1x
+Network throttling: No throttling
+Metrics (lab / observed):
+  - LCP: 663 ms, event: (eventKey: r-14753, ts: 59729312744)
+  - LCP breakdown:
+    - TTFB: 7 ms, bounds: {min: 59728649746, max: 59728656735}
+    - Load delay: 45.6 ms, bounds: {min: 59728656735, max: 59728702313}
+    - Load duration: 506.3 ms, bounds: {min: 59728702313, max: 59729208600}
+    - Render delay: 104.1 ms, bounds: {min: 59729208600, max: 59729312744}
+  - CLS: 0.31, event: (eventKey: s--1, ts: 59729100192)
+Metrics (field / real users):
+  - LCP: 1740 ms (scope: url)
+  - INP: 185 ms (scope: url)
+  - CLS: 0.08 (scope: url)
+  - The above data is from CrUX–Chrome User Experience Report. It's how the page performs for real users.
+  - The values shown above are the p75 measure of all real Chrome users
+  - The scope indicates if the data came from the entire origin, or a specific url
+  - Lab metrics describe how this specific page load performed, while field metrics are an aggregation of results from real-world users. Best practice is to prioritize metrics that are bad in field data. Lab metrics may be better or worse than fields metrics depending on the developer's machine, network, or the actions performed while tracing.
+Available insights:
+  - insight name: Cache
+    description: A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).
+    relevant trace bounds: {min: 59728702014, max: 59728867430}
+    estimated metric savings: FCP 0 ms, LCP 150 ms
+    estimated wasted bytes: 971.5 kB
+    example question: What caching strategies can I apply to improve my page performance?
+  - insight name: ImageDelivery
+    description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
+    relevant trace bounds: {min: 59728701403, max: 59729395208}
+    estimated metric savings: FCP 0 ms, LCP 100 ms
+    estimated wasted bytes: 2 MB
+    example question: What should I do to improve and optimize the time taken to fetch and display images on the page?
+    example question: Are all images on my site optimized?
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 59728649746, max: 59729312744}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: LCPDiscovery
+    description: Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)
+    relevant trace bounds: {min: 59728656735, max: 59729209036}
+    example question: Suggest fixes to reduce my LCP
+    example question: What can I do to reduce my LCP discovery time?
+    example question: Why is LCP discovery time important?
+  - insight name: CLSCulprits
+    description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.
+    relevant trace bounds: {min: 59729100192, max: 59730317334}
+    example question: Help me optimize my CLS score
+    example question: How can I prevent layout shifts on this page?
+  - insight name: DocumentLatency
+    description: Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
+    relevant trace bounds: {min: 59728651057, max: 59728790724}
+    estimated metric savings: FCP 0 ms, LCP 0 ms
+    estimated wasted bytes: 1.6 kB
+    example question: How do I decrease the initial loading time of my page?
+    example question: Did anything slow down the request for this document?
+  - insight name: Viewport
+    description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.
+    relevant trace bounds: {min: 59728649746, max: 59734400108}
+    estimated metric savings: INP 0 ms
+    example question: How do I make sure my page is optimized for mobile viewing?
+  - insight name: ThirdParties
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+    relevant trace bounds: {min: 59728701403, max: 59729465969}
+    example question: Which third parties are having the largest impact on my page performance?
+=== end content

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -2,8 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
+import * as CrUXManager from '../../crux-manager/crux-manager.js';
 import * as Trace from '../../trace/trace.js';
+import type {AICallTree} from '../performance/AICallTree.js';
+import type {AgentFocus} from '../performance/AIContext.js';
+import {AIQueries} from '../performance/AIQueries.js';
 
 import {PerformanceInsightFormatter, TraceEventFormatter} from './PerformanceInsightFormatter.js';
 import {bytes, micros, millis} from './UnitFormatters.js';
@@ -13,7 +16,7 @@ export class PerformanceTraceFormatter {
   #insightSet: Trace.Insights.Types.InsightSet|null;
   #eventsSerializer: Trace.EventsSerializer.EventsSerializer;
 
-  constructor(focus: TimelineUtils.AIContext.AgentFocus, eventsSerializer: Trace.EventsSerializer.EventsSerializer) {
+  constructor(focus: AgentFocus, eventsSerializer: Trace.EventsSerializer.EventsSerializer) {
     this.#parsedTrace = focus.data.parsedTrace;
     this.#insightSet = focus.data.insightSet;
     this.#eventsSerializer = eventsSerializer;
@@ -28,6 +31,81 @@ export class PerformanceTraceFormatter {
     return `{min: ${bounds.min}, max: ${bounds.max}}`;
   }
 
+  /**
+   * Fetching the Crux summary can error outside of DevTools, hence the
+   * try-catch around it here.
+   */
+  #getCruxTraceSummary(insightSet: Trace.Insights.Types.InsightSet|null): string[] {
+    if (insightSet === null) {
+      return [];
+    }
+    try {
+      const cruxScope = CrUXManager.CrUXManager.instance().getSelectedScope();
+      const parts: string[] = [];
+      const fieldMetrics =
+          Trace.Insights.Common.getFieldMetricsForInsightSet(insightSet, this.#parsedTrace.metadata, cruxScope);
+      const fieldLcp = fieldMetrics?.lcp;
+      const fieldInp = fieldMetrics?.inp;
+      const fieldCls = fieldMetrics?.cls;
+
+      if (fieldLcp || fieldInp || fieldCls) {
+        parts.push('Metrics (field / real users):');
+
+        const serializeFieldMetricTimingResult =
+            (fieldMetric: Trace.Insights.Common.CrUXFieldMetricTimingResult): string => {
+              return `${Math.round(fieldMetric.value / 1000)} ms (scope: ${fieldMetric.pageScope})`;
+            };
+
+        const serializeFieldMetricNumberResult =
+            (fieldMetric: Trace.Insights.Common.CrUXFieldMetricNumberResult): string => {
+              return `${fieldMetric.value.toFixed(2)} (scope: ${fieldMetric.pageScope})`;
+            };
+
+        if (fieldLcp) {
+          parts.push(`  - LCP: ${serializeFieldMetricTimingResult(fieldLcp)}`);
+
+          const fieldLcpBreakdown = fieldMetrics?.lcpBreakdown;
+          if (fieldLcpBreakdown &&
+              (fieldLcpBreakdown.ttfb || fieldLcpBreakdown.loadDelay || fieldLcpBreakdown.loadDuration ||
+               fieldLcpBreakdown.renderDelay)) {
+            parts.push('  - LCP breakdown:');
+            if (fieldLcpBreakdown.ttfb) {
+              parts.push(`    - TTFB: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.ttfb)}`);
+            }
+            if (fieldLcpBreakdown.loadDelay) {
+              parts.push(`    - Load delay: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.loadDelay)}`);
+            }
+            if (fieldLcpBreakdown.loadDuration) {
+              parts.push(`    - Load duration: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.loadDuration)}`);
+            }
+            if (fieldLcpBreakdown.renderDelay) {
+              parts.push(`    - Render delay: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.renderDelay)}`);
+            }
+          }
+        }
+        if (fieldInp) {
+          parts.push(`  - INP: ${serializeFieldMetricTimingResult(fieldInp)}`);
+        }
+        if (fieldCls) {
+          parts.push(`  - CLS: ${serializeFieldMetricNumberResult(fieldCls)}`);
+        }
+
+        parts.push(
+            '  - The above data is from CrUX–Chrome User Experience Report. It\'s how the page performs for real users.');
+        parts.push('  - The values shown above are the p75 measure of all real Chrome users');
+        parts.push('  - The scope indicates if the data came from the entire origin, or a specific url');
+        parts.push(
+            '  - Lab metrics describe how this specific page load performed, while field metrics are an aggregation ' +
+            'of results from real-world users. Best practice is to prioritize metrics that are bad in field data. ' +
+            'Lab metrics may be better or worse than fields metrics depending on the developer\'s machine, network, or the ' +
+            'actions performed while tracing.');
+      }
+      return parts;
+    } catch {
+      return [];
+    }
+  }
+
   formatTraceSummary(): string {
     const parsedTrace = this.#parsedTrace;
     const insightSet = this.#insightSet;
@@ -45,7 +123,7 @@ export class PerformanceTraceFormatter {
     parts.push('CPU throttling: ' + (traceMetadata.cpuThrottling ? `${traceMetadata.cpuThrottling}x` : 'none'));
     parts.push(`Network throttling: ${traceMetadata.networkThrottling ?? 'none'}`);
     if (lcp || cls || inp) {
-      parts.push('Metrics:');
+      parts.push('Metrics (lab / observed):');
       if (lcp) {
         parts.push(`  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}`);
         const subparts = insightSet?.model.LCPBreakdown.subparts;
@@ -53,6 +131,7 @@ export class PerformanceTraceFormatter {
           const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
             return `${micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
           };
+          parts.push('  - LCP breakdown:');
           parts.push(`    - TTFB: ${serializeSubpart(subparts.ttfb)}`);
           if (subparts.loadDelay !== undefined) {
             parts.push(`    - Load delay: ${serializeSubpart(subparts.loadDelay)}`);
@@ -71,7 +150,14 @@ export class PerformanceTraceFormatter {
         parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
       }
     } else {
-      parts.push('Metrics: n/a');
+      parts.push('Metrics (lab / observed): n/a');
+    }
+
+    const cruxParts = insightSet && this.#getCruxTraceSummary(insightSet);
+    if (cruxParts?.length) {
+      parts.push(...cruxParts);
+    } else {
+      parts.push('Metrics (field / real users): n/a – no data for this page in CrUX');
     }
 
     if (insightSet) {
@@ -176,7 +262,7 @@ export class PerformanceTraceFormatter {
     const insightSet = this.#insightSet;
 
     const bounds = parsedTrace.data.Meta.traceBounds;
-    const rootNode = TimelineUtils.InsightAIContext.AIQueries.mainThreadActivityBottomUp(
+    const rootNode = AIQueries.mainThreadActivityBottomUp(
         insightSet?.navigation?.args.data?.navigationId,
         bounds,
         parsedTrace,
@@ -229,8 +315,8 @@ export class PerformanceTraceFormatter {
     const insightSet = this.#insightSet;
 
     const bounds = parsedTrace.data.Meta.traceBounds;
-    const longestTaskTrees = TimelineUtils.InsightAIContext.AIQueries.longestTasks(
-        insightSet?.navigation?.args.data?.navigationId, bounds, parsedTrace, 3);
+    const longestTaskTrees =
+        AIQueries.longestTasks(insightSet?.navigation?.args.data?.navigationId, bounds, parsedTrace, 3);
     if (!longestTaskTrees || longestTaskTrees.length === 0) {
       return 'Longest tasks: none';
     }
@@ -288,7 +374,7 @@ export class PerformanceTraceFormatter {
   formatMainThreadTrackSummary(bounds: Trace.Types.Timing.TraceWindowMicro): string {
     const results = [];
 
-    const topDownTree = TimelineUtils.InsightAIContext.AIQueries.mainThreadActivityTopDown(
+    const topDownTree = AIQueries.mainThreadActivityTopDown(
         this.#insightSet?.navigation?.args.data?.navigationId,
         bounds,
         this.#parsedTrace,
@@ -298,7 +384,7 @@ export class PerformanceTraceFormatter {
       results.push(this.formatCallTree(topDownTree, 2 /* headerLevel */));
     }
 
-    const bottomUpRootNode = TimelineUtils.InsightAIContext.AIQueries.mainThreadActivityBottomUp(
+    const bottomUpRootNode = AIQueries.mainThreadActivityBottomUp(
         this.#insightSet?.navigation?.args.data?.navigationId,
         bounds,
         this.#parsedTrace,
@@ -349,7 +435,7 @@ export class PerformanceTraceFormatter {
     return results.join('\n\n');
   }
 
-  formatCallTree(tree: TimelineUtils.AICallTree.AICallTree, headerLevel = 1): string {
+  formatCallTree(tree: AICallTree, headerLevel = 1): string {
     const results = [tree.serialize(headerLevel), ''];
 
     // TODO(b/425270067): add eventKey to tree.serialize, but need to wait for other