chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

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

@@ -14,12 +14,11 @@ import * as Tracing from '../../../services/tracing/tracing.js';
 import * as Logs from '../../logs/logs.js';
 import * as Trace from '../../trace/trace.js';
 import {canResourceContentsBeReadForTrace} from '../AiOrigins.js';
-import type {PerformanceTraceContext} from '../contexts/PerformanceTraceContext.js';
-import {sanitizeHeaders} from '../data_formatters/NetworkRequestFormatter.js';
+import type {MainThreadSectionLabel, PerformanceTraceContext} from '../contexts/PerformanceTraceContext.js';
 import {
   PerformanceInsightFormatter,
 } from '../data_formatters/PerformanceInsightFormatter.js';
-import {PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceFormatter.js';
+import {formatEventForAI, PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceFormatter.js';
 import {debugLog} from '../debug.js';
 import {AICallTree} from '../performance/AICallTree.js';
 import type {AgentFocus} from '../performance/AIContext.js';
@@ -49,13 +48,6 @@ const UIStringsNotTranslated = {
 } as const;
 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.
- */
-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
  * TESTERS. Otherwise, a server-side preamble is used (see
@@ -196,14 +188,6 @@ enum ScorePriority {
 // 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',
-};
-
 function getInsightModel(
     model: Trace.Insights.Types.InsightModels,
     key: string,
@@ -214,33 +198,6 @@ function getInsightModel(
   return undefined;
 }
 
-/**
- * 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 (Object.prototype.hasOwnProperty.call(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 = getInsightModel(insightSet.model, label);
-    if (model) {
-      return `${model.title} insight`;
-    }
-  }
-
-  return label;
-}
-
 export interface PerformanceAgentOptions extends AgentOptions {
   tracker?: Tracing.FreshRecording.Tracker;
   networkLog?: Logs.NetworkLog.NetworkLog;
@@ -816,9 +773,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         const insightSet = parsedTrace.insights?.get(params.insightSetId);
         if (!insightSet) {
           const valid = ([...parsedTrace.insights?.values() ?? []])
-                            .map(
-                                insightSet => `id: ${insightSet.id}, url: ${insightSet.url}, bounds: ${
-                                    this.#formatter?.serializeBounds(insightSet.bounds)}`)
+                            .map(insightSet => `id: ${insightSet.id}, url: ${insightSet.url}, bounds: ${
+                                     this.#formatter?.serializeBounds(insightSet.bounds)}`)
                             .join('; ');
           return {error: `Invalid insight set id. Valid insight set ids are: ${valid}`};
         }
@@ -939,20 +895,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
     });
 
-    const createBounds =
-        (min?: Trace.Types.Timing.Micro, max?: Trace.Types.Timing.Micro): Trace.Types.Timing.TraceWindowMicro|null => {
-          const {min: bMin, max: bMax} = parsedTrace.data.Meta.traceBounds;
-          const clampedMin = Math.max(min ?? bMin, bMin);
-          const clampedMax = Math.min(max ?? bMax, bMax);
-
-          if (clampedMin > clampedMax) {
-            return null;
-          }
-
-          return Trace.Helpers.Timing.traceWindowFromMicroSeconds(
-              clampedMin as Trace.Types.Timing.Micro, clampedMax as Trace.Types.Timing.Micro);
-        };
-
     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.',
@@ -971,7 +913,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         required: ['label'],
       },
       displayInfoFromArgs: args => {
-        const labelName = getLabelName(args.label, focus);
+        const labelName = context.getLabelName(args.label);
         return {
           title: lockedString(`${UIStringsNotTranslated.mainThreadActivity}: ${labelName}`),
           action: `getMainThreadTrackSummaryByLabel('${args.label}')`,
@@ -980,7 +922,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       handler: async args => {
         debugLog('Function call: getMainThreadTrackSummaryByLabel');
 
-        const bounds = this.#getBoundsForLabel(args.label, focus);
+        const bounds = context.getBoundsForLabel(args.label);
         if (!bounds) {
           return {error: `Invalid label: ${args.label}`};
         }
@@ -1028,7 +970,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           throw new Error('missing formatter');
         }
 
-        const bounds = createBounds(args.min, args.max);
+        const bounds = context.createBounds(args.min, args.max);
         if (!bounds) {
           return {error: 'invalid bounds'};
         }
@@ -1326,67 +1268,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
   }
 
-  #getBoundsForLabel(label: MainThreadSectionLabel, focus: AgentFocus): Trace.Types.Timing.TraceWindowMicro|null {
-    const {parsedTrace} = focus;
-    const insightSet = focus.primaryInsightSet;
-
-    if (label === 'nav-to-lcp') {
-      if (insightSet) {
-        const lcp = Trace.Insights.Common.getLCP(insightSet);
-        if (lcp) {
-          return Trace.Helpers.Timing.traceWindowFromMicroSeconds(
-              insightSet.bounds.min, lcp.event.ts as Trace.Types.Timing.Micro);
-        }
-      }
-      return null;
-    }
-
-    if (label === 'lcp-ttfb') {
-      if (insightSet) {
-        const subparts = insightSet.model.LCPBreakdown?.subparts;
-        if (subparts?.ttfb) {
-          return subparts.ttfb;
-        }
-      }
-      return null;
-    }
-
-    if (label === 'lcp-render-delay') {
-      if (insightSet) {
-        const subparts = insightSet.model.LCPBreakdown?.subparts;
-        if (subparts?.renderDelay) {
-          return subparts.renderDelay;
-        }
-      }
-      return null;
-    }
-
-    if (label === 'trace-bounds') {
-      return parsedTrace.data.Meta.traceBounds;
-    }
-
-    const insightSetById = parsedTrace.insights?.get(label as Trace.Types.Events.NavigationId);
-    if (insightSetById) {
-      return insightSetById.bounds;
-    }
-
-    if (insightSet) {
-      const model = getInsightModel(insightSet.model, label);
-      if (model) {
-        return Trace.Insights.Common.insightBounds(model, insightSet.bounds);
-      }
-    }
-
-    for (const is of parsedTrace.insights?.values() ?? []) {
-      const model = getInsightModel(is.model, label);
-      if (model) {
-        return Trace.Insights.Common.insightBounds(model, is.bounds);
-      }
-    }
-
-    return null;
-  }
-
   async #getNetworkRequestImageData(lcpRequest: Trace.Types.Events.SyntheticNetworkRequest):
       Promise<TextUtils.ContentData.ContentData|undefined> {
     const target = this.targetManager.primaryPageTarget();
@@ -1408,71 +1289,3 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     return undefined;
   }
 }
-
-/**
- * Serializes a trace event to a JSON string for AI consumption,
- * ensuring sensitive data (like headers and raw script source code)
- * is sanitized or redacted.
- */
-function formatEventForAI(event: Trace.Types.Events.Event): string {
-  if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
-    return JSON.stringify({
-      ...event,
-      args: {
-        ...event.args,
-        data: {
-          ...event.args.data,
-          responseHeaders: event.args.data.responseHeaders ? sanitizeHeaders(event.args.data.responseHeaders) : null,
-        },
-      },
-    });
-  }
-
-  if (Trace.Types.Events.isResourceReceiveResponse(event)) {
-    return JSON.stringify({
-      ...event,
-      args: {
-        ...event.args,
-        data: {
-          ...event.args.data,
-          headers: event.args.data.headers ? sanitizeHeaders(event.args.data.headers) : undefined,
-        },
-      },
-    });
-  }
-
-  if (Trace.Types.Events.isRundownScriptSource(event)) {
-    // Redact sensitive cross-origin script source text.
-    const safeData: Omit<Trace.Types.Events.RundownScriptSource['args']['data'], 'sourceText'> = {
-      isolate: event.args.data.isolate,
-      scriptId: event.args.data.scriptId,
-      length: event.args.data.length,
-    };
-    return JSON.stringify({
-      ...event,
-      args: {
-        ...event.args,
-        data: safeData,
-      },
-    });
-  }
-
-  if (Trace.Types.Events.isRundownScriptSourceLarge(event)) {
-    // Redact sensitive cross-origin script source text.
-    const safeData: Omit<Trace.Types.Events.RundownScriptSourceLarge['args']['data'], 'sourceText'> = {
-      isolate: event.args.data.isolate,
-      scriptId: event.args.data.scriptId,
-      splitIndex: event.args.data.splitIndex,
-      splitCount: event.args.data.splitCount,
-    };
-    return JSON.stringify({
-      ...event,
-      args: {
-        ...event.args,
-        data: safeData,
-      },
-    });
-  }
-
-  return JSON.stringify(event);
-}

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

@@ -14,8 +14,7 @@ import {
   type AgentOptions,
   AiAgent,
   type ContextResponse,
-  ConversationContext,
-  type ConversationSuggestions,
+  type ConversationContext,
   type RequestOptions,
   ResponseType,
 } from './AiAgent.js';
@@ -68,7 +67,7 @@ function isSamePrimaryPageOrigin(targetManager: SDK.TargetManager.TargetManager,
   return isSamePageOrigin(primaryPageTarget, context);
 }
 
-export function isSamePageOrigin(target: SDK.Target.Target|null, context?: ConversationContext<StorageItem>): boolean {
+export function isSamePageOrigin(target: SDK.Target.Target|null, context?: ConversationContext<unknown>): boolean {
   if (!target || !context) {
     return false;
   }
@@ -85,84 +84,6 @@ function resolveTargetOrigins(context?: ConversationContext<StorageItem>, origin
   return uniqueOrigins.slice(0, MAX_TARGET_ORIGINS);
 }
 
-export class StorageContext extends ConversationContext<StorageItem> {
-  #item: StorageItem;
-
-  constructor(item: StorageItem) {
-    super();
-    this.#item = item;
-  }
-
-  override getURL(): string {
-    return this.#item.primaryTargetOrigin;
-  }
-
-  override getItem(): StorageItem {
-    return this.#item;
-  }
-
-  override getTitle(): string {
-    if (this.#item instanceof CookieItem) {
-      if (this.#item.name) {
-        return `cookie: ${this.#item.name}${this.#item.origin ? ` ${this.#item.origin}` : ''}`;
-      }
-      return `cookies${this.#item.isGenericContext ? '' : `: ${this.#item.origin}`}`;
-    }
-    if (this.#item instanceof DOMStorageItem) {
-      if (this.#item.key) {
-        return `entry: ${this.#item.key}${this.#item.origin ? ` ${this.#item.origin}` : ''}`;
-      }
-      const prefix = this.#item.type === 'localStorage' ? 'local storage' : 'session storage';
-      return `${prefix}${this.#item.isGenericContext ? '' : `: ${this.#item.origin}`}`;
-    }
-    return `Storage: ${this.getOrigin()}`;
-  }
-
-  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
-    if (this.#item instanceof CookieItem) {
-      if (this.#item.name) {
-        return [
-          {
-            title: 'Why is this cookie set?',
-            jslogContext: 'storage-cookie',
-          },
-          {
-            title: 'Explain the value of this cookie',
-            jslogContext: 'storage-cookie',
-          },
-        ];
-      }
-      return [
-        {
-          title: 'Explain the cookies set by this page',
-          jslogContext: 'storage-cookie',
-        },
-      ];
-    }
-    if (this.#item instanceof DOMStorageItem) {
-      if (this.#item.key) {
-        return [
-          {
-            title: 'What is the purpose of this storage entry?',
-            jslogContext: 'storage-domstorage',
-          },
-          {
-            title: 'Explain the value of this storage entry',
-            jslogContext: 'storage-domstorage',
-          },
-        ];
-      }
-      return [
-        {
-          title: 'Explain these storage items',
-          jslogContext: 'storage-domstorage',
-        },
-      ];
-    }
-    return undefined;
-  }
-}
-
 // Maximum character length of values allowed.
 const MAX_NUM_CHAR_LENGTH = 10000;
 
@@ -281,7 +202,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async args => {
-        this.disableServerSideLogging();
+        this.setServerSideLoggingActive(false);
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -367,7 +288,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async (args, options) => {
-        this.disableServerSideLogging();
+        this.setServerSideLoggingActive(false);
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -467,7 +388,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async args => {
-        this.disableServerSideLogging();
+        this.setServerSideLoggingActive(false);
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -527,7 +448,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async (args, options) => {
-        this.disableServerSideLogging();
+        this.setServerSideLoggingActive(false);
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -657,6 +578,19 @@ export class StorageAgent extends AiAgent<StorageItem> {
           result: {
             usageBreakdown,
           },
+          widgets: [
+            {
+              name: 'STORAGE_BREAKDOWN',
+              data: {
+                totalUsageBytes: response.usage,
+                totalQuotaBytes: response.quota,
+                usageBreakdown: rawUsageBreakdown.map(entry => ({
+                                                        storageType: entry.storageType,
+                                                        bytes: entry.rawUsage,
+                                                      })),
+              },
+            },
+          ],
         };
       },
     });
@@ -684,9 +618,9 @@ export class StorageAgent extends AiAgent<StorageItem> {
   protected override async preRun(): Promise<void> {
     const item = this.context?.getItem();
     if (item instanceof CookieItem && Boolean(item.name)) {
-      this.disableServerSideLogging();
+      this.setServerSideLoggingActive(false);
     } else if (item instanceof DOMStorageItem && Boolean(item.key)) {
-      this.disableServerSideLogging();
+      this.setServerSideLoggingActive(false);
     }
   }
 

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

@@ -365,7 +365,8 @@ Content:
     "type": "action",
     "code": "console.log('hello');",
     "output": "hello",
-    "canceled": false
+    "canceled": false,
+    "toolName": "executeJavaScript"
   },
   {
     "type": "querying"

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -22,6 +22,7 @@ import * as DOMNodeContext from './contexts/DOMNodeContext.js';
 import * as FileContext from './contexts/FileContext.js';
 import * as PerformanceTraceContext from './contexts/PerformanceTraceContext.js';
 import * as RequestContext from './contexts/RequestContext.js';
+import * as StorageContext from './contexts/StorageContext.js';
 import * as ConversationSummary from './ConversationSummary.js';
 import * as FileFormatter from './data_formatters/FileFormatter.js';
 import * as LighthouseFormatter from './data_formatters/LighthouseFormatter.js';
@@ -39,13 +40,24 @@ import * as AIQueries from './performance/AIQueries.js';
 import * as PerformanceAnnotations from './PerformanceAnnotations.js';
 import * as StorageItem from './StorageItem.js';
 import * as ExecuteJavaScript from './tools/ExecuteJavaScript.js';
+import * as GetDetailedCallTree from './tools/GetDetailedCallTree.js';
 import * as GetElementAccessibilityDetails from './tools/GetElementAccessibilityDetails.js';
+import * as GetFunctionCode from './tools/GetFunctionCode.js';
 import * as GetLighthouseAudits from './tools/GetLighthouseAudits.js';
 import * as GetNetworkRequestDetails from './tools/GetNetworkRequestDetails.js';
+import * as GetResourceContent from './tools/GetResourceContent.js';
+import * as GetSourceContent from './tools/GetSourceContent.js';
 import * as GetStyles from './tools/GetStyles.js';
+import * as GetTraceEventByKey from './tools/GetTraceEventByKey.js';
+import * as GetTraceMainThreadSummary from './tools/GetTraceMainThreadSummary.js';
+import * as GetTraceNetworkSummary from './tools/GetTraceNetworkSummary.js';
 import * as ListNetworkRequests from './tools/ListNetworkRequests.js';
+import * as ListPageOrigins from './tools/ListPageOrigins.js';
+import * as ListSources from './tools/ListSources.js';
 import * as RecordPerformanceTrace from './tools/RecordPerformanceTrace.js';
 import * as ResolveDevtoolsNodePath from './tools/ResolveDevtoolsNodePath.js';
+import * as RunLighthouse from './tools/RunLighthouse.js';
+import * as SelectTraceEventByKey from './tools/SelectTraceEventByKey.js';
 import * as Tool from './tools/Tool.js';
 import * as ToolRegistry from './tools/ToolRegistry.js';
 
@@ -74,13 +86,22 @@ export {
   FileAgent,
   FileContext,
   FileFormatter,
+  GetDetailedCallTree,
   GetElementAccessibilityDetails,
+  GetFunctionCode,
   GetLighthouseAudits,
   GetNetworkRequestDetails,
+  GetResourceContent,
+  GetSourceContent,
   GetStyles,
+  GetTraceEventByKey,
+  GetTraceMainThreadSummary,
+  GetTraceNetworkSummary,
   Injected,
   LighthouseFormatter,
   ListNetworkRequests,
+  ListPageOrigins,
+  ListSources,
   NetworkAgent,
   NetworkRequestFormatter,
   PerformanceAgent,
@@ -91,7 +112,10 @@ export {
   RecordPerformanceTrace,
   RequestContext,
   ResolveDevtoolsNodePath,
+  RunLighthouse,
+  SelectTraceEventByKey,
   StorageAgent,
+  StorageContext,
   StorageItem,
   StylingAgent,
   Tool,

package/front_end/models/ai_assistance/contexts/PerformanceTraceContext.ts

@@ -23,6 +23,13 @@ import {PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceForm
 import type {AICallTree} from '../performance/AICallTree.js';
 import {AgentFocus} from '../performance/AIContext.js';
 
+/**
+ * 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.
+ */
+export type MainThreadSectionLabel = 'nav-to-lcp'|'lcp-ttfb'|'lcp-render-delay'|'trace-bounds'|'NO_NAVIGATION'|
+                                     `NAVIGATION_${string}`|keyof Trace.Insights.Types.InsightModels;
+
 /**
  * The conversation context for AI queries regarding performance traces.
  * Encapsulates the user's active trace selection/focus and handles formatting
@@ -339,4 +346,121 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
 
     return details.length > 0 ? (details as [ContextDetail, ...ContextDetail[]]) : null;
   }
+
+  getBoundsForLabel(label: MainThreadSectionLabel): Trace.Types.Timing.TraceWindowMicro|null {
+    const focus = this.#focus;
+    const {parsedTrace} = focus;
+    const insightSet = focus.primaryInsightSet;
+
+    if (label === 'nav-to-lcp') {
+      if (insightSet) {
+        const lcp = Trace.Insights.Common.getLCP(insightSet);
+        if (lcp) {
+          return Trace.Helpers.Timing.traceWindowFromMicroSeconds(insightSet.bounds.min,
+                                                                  lcp.event.ts as Trace.Types.Timing.Micro);
+        }
+      }
+      return null;
+    }
+
+    if (label === 'lcp-ttfb') {
+      if (insightSet) {
+        const subparts = insightSet.model.LCPBreakdown?.subparts;
+        if (subparts?.ttfb) {
+          return subparts.ttfb;
+        }
+      }
+      return null;
+    }
+
+    if (label === 'lcp-render-delay') {
+      if (insightSet) {
+        const subparts = insightSet.model.LCPBreakdown?.subparts;
+        if (subparts?.renderDelay) {
+          return subparts.renderDelay;
+        }
+      }
+      return null;
+    }
+
+    if (label === 'trace-bounds') {
+      return parsedTrace.data.Meta.traceBounds;
+    }
+
+    const insightSetById = parsedTrace.insights?.get(label as Trace.Types.Events.NavigationId);
+    if (insightSetById) {
+      return insightSetById.bounds;
+    }
+
+    if (insightSet) {
+      const model = getInsightModel(insightSet.model, label);
+      if (model) {
+        return Trace.Insights.Common.insightBounds(model, insightSet.bounds);
+      }
+    }
+
+    for (const is of parsedTrace.insights?.values() ?? []) {
+      const model = getInsightModel(is.model, label);
+      if (model) {
+        return Trace.Insights.Common.insightBounds(model, is.bounds);
+      }
+    }
+
+    return null;
+  }
+
+  getLabelName(label: MainThreadSectionLabel): string {
+    return getLabelName(label, this.#focus.parsedTrace);
+  }
+
+  createBounds(min?: number, max?: number): Trace.Types.Timing.TraceWindowMicro|null {
+    const {min: bMin, max: bMax} = this.#focus.parsedTrace.data.Meta.traceBounds;
+    const clampedMin = Math.round(Math.max(min ?? bMin, bMin));
+    const clampedMax = Math.round(Math.min(max ?? bMax, bMax));
+
+    if (clampedMin > clampedMax) {
+      return null;
+    }
+
+    return Trace.Helpers.Timing.traceWindowFromMicroSeconds(clampedMin as Trace.Types.Timing.Micro,
+                                                            clampedMax as Trace.Types.Timing.Micro);
+  }
+}
+
+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',
+};
+
+function getInsightModel(
+    model: Trace.Insights.Types.InsightModels,
+    key: string,
+    ): Trace.Insights.Types.InsightModels[keyof Trace.Insights.Types.InsightModels]|undefined {
+  if (Object.prototype.hasOwnProperty.call(model, key)) {
+    return model[key as keyof Trace.Insights.Types.InsightModels];
+  }
+  return undefined;
+}
+
+function getLabelName(label: MainThreadSectionLabel, parsedTrace: Trace.TraceModel.ParsedTrace): string {
+  if (Object.prototype.hasOwnProperty.call(STATIC_LABEL_NAMES, label)) {
+    return STATIC_LABEL_NAMES[label];
+  }
+
+  const insightSetById = parsedTrace.insights?.get(label as Trace.Types.Events.NavigationId);
+  if (insightSetById) {
+    return `navigation to ${insightSetById.url.href}`;
+  }
+
+  for (const insightSet of parsedTrace.insights?.values() ?? []) {
+    const model = getInsightModel(insightSet.model, label);
+    if (model) {
+      return `${model.title} insight`;
+    }
+  }
+
+  return label;
 }