chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/generated/protocol-mapping.d.ts

@@ -1227,7 +1227,7 @@ export namespace ProtocolMapping {
       returnType: void;
     };
     /**
-     * Set permission settings for given origin.
+     * Set permission settings for given requesting and embedding origins.
      */
     'Browser.setPermission': {
       paramsType: [Protocol.Browser.SetPermissionRequest];
@@ -3254,6 +3254,13 @@ export namespace ProtocolMapping {
       paramsType: [];
       returnType: Protocol.Network.GetIPProtectionProxyStatusResponse;
     };
+    /**
+     * Sets bypass IP Protection Proxy boolean.
+     */
+    'Network.setIPProtectionProxyBypassEnabled': {
+      paramsType: [Protocol.Network.SetIPProtectionProxyBypassEnabledRequest];
+      returnType: void;
+    };
     /**
      * Sets a list of content encodings that will be accepted. Empty list means no encoding is accepted.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -591,7 +591,7 @@ declare namespace ProtocolProxyApi {
 
   export interface BrowserApi {
     /**
-     * Set permission settings for given origin.
+     * Set permission settings for given requesting and embedding origins.
      */
     invoke_setPermission(params: Protocol.Browser.SetPermissionRequest): Promise<Protocol.ProtocolResponseWithError>;
 
@@ -2445,6 +2445,11 @@ declare namespace ProtocolProxyApi {
      */
     invoke_getIPProtectionProxyStatus(): Promise<Protocol.Network.GetIPProtectionProxyStatusResponse>;
 
+    /**
+     * Sets bypass IP Protection Proxy boolean.
+     */
+    invoke_setIPProtectionProxyBypassEnabled(params: Protocol.Network.SetIPProtectionProxyBypassEnabledRequest): Promise<Protocol.ProtocolResponseWithError>;
+
     /**
      * Sets a list of content encodings that will be accepted. Empty list means no encoding is accepted.
      */

package/front_end/generated/protocol.ts

@@ -2263,9 +2263,15 @@ export namespace Browser {
      */
     setting: PermissionSetting;
     /**
-     * Origin the permission applies to, all origins if not specified.
+     * Requesting origin the permission applies to, all origins if not specified.
      */
     origin?: string;
+    /**
+     * Embedding origin the permission applies to. It is ignored unless the requesting origin is
+     * present and valid. If the requesting origin is provided but the embedding origin isn't, the
+     * requesting origin is used as the embedding origin.
+     */
+    embeddingOrigin?: string;
     /**
      * Context to override. When omitted, default browser context is used.
      */
@@ -11183,6 +11189,13 @@ export namespace Network {
     status: IpProxyStatus;
   }
 
+  export interface SetIPProtectionProxyBypassEnabledRequest {
+    /**
+     * Whether IP Proxy is being bypassed by devtools; false by default.
+     */
+    enabled: boolean;
+  }
+
   export interface SetAcceptedEncodingsRequest {
     /**
      * List of accepted content encodings.
@@ -14411,9 +14424,9 @@ export namespace Page {
     IndexedDBEvent = 'IndexedDBEvent',
     Dummy = 'Dummy',
     JsNetworkRequestReceivedCacheControlNoStoreResource = 'JsNetworkRequestReceivedCacheControlNoStoreResource',
-    WebRTCSticky = 'WebRTCSticky',
-    WebTransportSticky = 'WebTransportSticky',
-    WebSocketSticky = 'WebSocketSticky',
+    WebRTCUsedWithCCNS = 'WebRTCUsedWithCCNS',
+    WebTransportUsedWithCCNS = 'WebTransportUsedWithCCNS',
+    WebSocketUsedWithCCNS = 'WebSocketUsedWithCCNS',
     SmartCard = 'SmartCard',
     LiveMediaStreamTrack = 'LiveMediaStreamTrack',
     UnloadHandler = 'UnloadHandler',

package/front_end/models/ai_assistance/ConversationHandler.ts

@@ -8,10 +8,9 @@ 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 Tracing from '../../services/tracing/tracing.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import type * as Trace from '../trace/trace.js';
+import * as NetworkTimeCalculator from '../network_time_calculator/network_time_calculator.js';
 
 import {
   type AiAgent,
@@ -22,7 +21,7 @@ import {
 } from './agents/AiAgent.js';
 import {FileAgent} from './agents/FileAgent.js';
 import {NetworkAgent, RequestContext} from './agents/NetworkAgent.js';
-import {PerformanceAgent, PerformanceTraceContext} from './agents/PerformanceAgent.js';
+import {PerformanceAgent, type PerformanceTraceContext} from './agents/PerformanceAgent.js';
 import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
 import {
   Conversation,
@@ -43,17 +42,17 @@ interface ExternalNetworkRequestParameters {
   requestUrl: string;
 }
 
-export interface ExternalPerformanceInsightsRequestParameters {
-  conversationType: ConversationType.PERFORMANCE_INSIGHT;
-  prompt: string;
-  insightTitle: string;
-  traceModel: Trace.TraceModel.Model;
+export interface ExternalPerformanceAIConversationData {
+  conversationHandler: ConversationHandler;
+  conversation: Conversation;
+  agent: AiAgent<unknown>;
+  selected: PerformanceTraceContext;
 }
 
 export interface ExternalPerformanceRequestParameters {
   conversationType: ConversationType.PERFORMANCE_FULL;
   prompt: string;
-  traceModel: Trace.TraceModel.Model;
+  data: ExternalPerformanceAIConversationData;
 }
 
 const UIStrings = {
@@ -184,7 +183,7 @@ export class ConversationHandler {
    */
   async handleExternalRequest(
       parameters: ExternalStylingRequestParameters|ExternalNetworkRequestParameters|
-      ExternalPerformanceInsightsRequestParameters|ExternalPerformanceRequestParameters,
+      ExternalPerformanceRequestParameters,
       ): Promise<AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse>> {
     try {
       Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.externalRequestReceived)});
@@ -202,15 +201,8 @@ export class ConversationHandler {
         case ConversationType.STYLING: {
           return await this.#handleExternalStylingConversation(parameters.prompt, parameters.selector);
         }
-        case ConversationType.PERFORMANCE_INSIGHT:
-          if (!parameters.insightTitle) {
-            return this.#generateErrorResponse(
-                'The insightTitle parameter is required for debugging a Performance Insight.');
-          }
-          return await this.#handleExternalPerformanceInsightsConversation(
-              parameters.prompt, parameters.insightTitle, parameters.traceModel);
         case ConversationType.PERFORMANCE_FULL:
-          return await this.#handleExternalPerformanceConversation(parameters.prompt, parameters.traceModel);
+          return await this.#handleExternalPerformanceConversation(parameters.prompt, parameters.data);
         case ConversationType.NETWORK:
           if (!parameters.requestUrl) {
             return this.#generateErrorResponse('The url is required for debugging a network request.');
@@ -235,22 +227,32 @@ export class ConversationHandler {
     }
   }
 
-  async * #doExternalConversation(opts: {
+  async * #createAndDoExternalConversation(opts: {
     conversationType: ConversationType,
     aiAgent: AiAgent<unknown>,
     prompt: string,
     selected: NodeContext|PerformanceTraceContext|RequestContext|null,
   }): AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse> {
     const {conversationType, aiAgent, prompt, selected} = opts;
-    const externalConversation = new Conversation(
+    const conversation = new Conversation(
         conversationType,
         [],
         aiAgent.id,
         /* isReadOnly */ true,
         /* isExternal */ true,
     );
+    return yield* this.#doExternalConversation({conversation, aiAgent, prompt, selected});
+  }
+
+  async * #doExternalConversation(opts: {
+    conversation: Conversation,
+    aiAgent: AiAgent<unknown>,
+    prompt: string,
+    selected: NodeContext|PerformanceTraceContext|RequestContext|null,
+  }): AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse> {
+    const {conversation, aiAgent, prompt, selected} = opts;
     const generator = aiAgent.run(prompt, {selected});
-    const generatorWithHistory = this.handleConversationWithHistory(generator, externalConversation);
+    const generatorWithHistory = this.handleConversationWithHistory(generator, conversation);
     const devToolsLogs: object[] = [];
     for await (const data of generatorWithHistory) {
       if (data.type !== ResponseType.ANSWER || data.complete) {
@@ -287,7 +289,7 @@ export class ConversationHandler {
       await node.setAsInspectedNode();
     }
     const selected = node ? new NodeContext(node) : null;
-    return this.#doExternalConversation({
+    return this.#createAndDoExternalConversation({
       conversationType: ConversationType.STYLING,
       aiAgent: stylingAgent,
       prompt,
@@ -295,39 +297,13 @@ export class ConversationHandler {
     });
   }
 
-  async #handleExternalPerformanceInsightsConversation(
-      prompt: string, insightTitle: string,
-      traceModel: Trace.TraceModel.Model): Promise<AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse>> {
-    const insightsAgent = this.createAgent(ConversationType.PERFORMANCE_INSIGHT);
-    const focusOrError = await Tracing.ExternalRequests.getInsightAgentFocusToDebug(
-        traceModel,
-        insightTitle,
-    );
-    if ('error' in focusOrError) {
-      return this.#generateErrorResponse(focusOrError.error);
-    }
-    return this.#doExternalConversation({
-      conversationType: ConversationType.PERFORMANCE_INSIGHT,
-      aiAgent: insightsAgent,
-      prompt,
-      selected: new PerformanceTraceContext(focusOrError.focus),
-    });
-  }
-
-  async #handleExternalPerformanceConversation(prompt: string, traceModel: Trace.TraceModel.Model):
+  async #handleExternalPerformanceConversation(prompt: string, data: ExternalPerformanceAIConversationData):
       Promise<AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse>> {
-    const agent = this.createAgent(ConversationType.PERFORMANCE_FULL);
-    const focusOrError = await Tracing.ExternalRequests.getPerformanceAgentFocusToDebug(
-        traceModel,
-    );
-    if ('error' in focusOrError) {
-      return this.#generateErrorResponse(focusOrError.error);
-    }
     return this.#doExternalConversation({
-      conversationType: ConversationType.PERFORMANCE_FULL,
-      aiAgent: agent,
+      conversation: data.conversation,
+      aiAgent: data.agent,
       prompt,
-      selected: new PerformanceTraceContext(focusOrError.focus),
+      selected: data.selected,
     });
   }
 
@@ -338,11 +314,15 @@ export class ConversationHandler {
     if (!request) {
       return this.#generateErrorResponse(`Can't find request with the given selector ${requestUrl}`);
     }
-    return this.#doExternalConversation({
+
+    const calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
+    calculator.updateBoundaries(request);
+
+    return this.#createAndDoExternalConversation({
       conversationType: ConversationType.NETWORK,
       aiAgent: networkAgent,
       prompt,
-      selected: new RequestContext(request),
+      selected: new RequestContext(request, calculator),
     });
   }
 

package/front_end/models/ai_assistance/ExtensionScope.ts

@@ -6,7 +6,6 @@ import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import * as Bindings from '../bindings/bindings.js';
 
 import type {ChangeManager} from './ChangeManager.js';
@@ -41,10 +40,8 @@ export class ExtensionScope {
 
   readonly #bindingMutex = new Common.Mutex.Mutex();
 
-  constructor(changes: ChangeManager, agentId: string) {
+  constructor(changes: ChangeManager, agentId: string, selectedNode: SDK.DOMModel.DOMNode|null) {
     this.#changeManager = changes;
-    const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
-
     const frameId = selectedNode?.frameId();
     const target = selectedNode?.domModel().target();
     this.#agentId = agentId;
@@ -53,16 +50,10 @@ export class ExtensionScope {
   }
 
   get target(): SDK.Target.Target {
-    if (this.#target) {
-      return this.#target;
-    }
-
-    const target = UI.Context.Context.instance().flavor(SDK.Target.Target);
-    if (!target) {
+    if (!this.#target) {
       throw new Error('Target is not found for executing code');
     }
-
-    return target;
+    return this.#target;
   }
 
   get frameId(): Protocol.Page.FrameId {

package/front_end/models/ai_assistance/README.md

@@ -14,7 +14,7 @@ Each agent has a _context_ defined, which represents the selected data that form
 When defining a context, they must extend the `ConversationContext` interface, which defines a few methods which must be implemented, including:
 
 - `getOrigin()`: the origin of the data. This is important as for security concerns if the user swaps to a new context with a different origin, a new conversation must be started to avoid any concerns of sharing data across origins.
-- `getIcon()` and `getTitle()` which are used to represent the context in the UI.
+- `getTitle()` which are used to represent the context in the UI.
 
 When the user begins a conversation with the AI, we want to include information based on the active context to send as part of the prompt. This is done in the agent implementation by overriding the `enhanceQuery()` method, which takes the active context as the second argument. This method can be used to enrich the query with contextual information.
 

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

@@ -4,7 +4,6 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as Root from '../../../core/root/root.js';
-import type * as Lit from '../../../ui/lit/lit.js';
 import {debugLog, isStructuredLogEnabled} from '../debug.js';
 
 export const enum ResponseType {
@@ -176,8 +175,7 @@ export type ExternalRequestResponse = ExternalRequestAnswer|ExternalRequestNotif
 export abstract class ConversationContext<T> {
   abstract getOrigin(): string;
   abstract getItem(): T;
-  abstract getIcon(): Lit.TemplateResult|undefined;
-  abstract getTitle(opts?: {disabled: boolean}): string|ReturnType<typeof Lit.Directives.until>;
+  abstract getTitle(): string;
 
   isOriginAllowed(agentOrigin: string|undefined): boolean {
     if (!agentOrigin) {

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

@@ -5,8 +5,6 @@
 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 * as PanelUtils from '../../../panels/utils/utils.js';
-import type {TemplateResult} from '../../../ui/lit/lit.js';
 import type * as Workspace from '../../workspace/workspace.js';
 import {FileFormatter} from '../data_formatters/FileFormatter.js';
 
@@ -92,10 +90,6 @@ export class FileContext extends ConversationContext<Workspace.UISourceCode.UISo
     return this.#file;
   }
 
-  override getIcon(): TemplateResult {
-    return PanelUtils.PanelUtils.getIconForSourceFile(this.#file);
-  }
-
   override getTitle(): string {
     return this.#file.displayName();
   }

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

@@ -6,8 +6,7 @@ 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 SDK from '../../../core/sdk/sdk.js';
-import * as PanelUtils from '../../../panels/utils/utils.js';
-import type {TemplateResult} from '../../../ui/lit/lit.js';
+import type * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
 
 import {
@@ -95,10 +94,13 @@ const lockedString = i18n.i18n.lockedString;
 
 export class RequestContext extends ConversationContext<SDK.NetworkRequest.NetworkRequest> {
   #request: SDK.NetworkRequest.NetworkRequest;
+  #calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+  constructor(
+      request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator) {
     super();
     this.#request = request;
+    this.#calculator = calculator;
   }
 
   override getOrigin(): string {
@@ -109,8 +111,8 @@ export class RequestContext extends ConversationContext<SDK.NetworkRequest.Netwo
     return this.#request;
   }
 
-  override getIcon(): TemplateResult {
-    return PanelUtils.PanelUtils.getIconForNetworkRequest(this.#request);
+  get calculator(): NetworkTimeCalculator.NetworkTimeCalculator {
+    return this.#calculator;
   }
 
   override getTitle(): string {
@@ -139,8 +141,7 @@ export class NetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkRequest> {
   }
 
   async *
-      handleContextDetails(selectedNetworkRequest: ConversationContext<SDK.NetworkRequest.NetworkRequest>|null):
-          AsyncGenerator<ContextResponse, void, void> {
+      handleContextDetails(selectedNetworkRequest: RequestContext|null): AsyncGenerator<ContextResponse, void, void> {
     if (!selectedNetworkRequest) {
       return;
     }
@@ -148,25 +149,25 @@ export class NetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkRequest> {
     yield {
       type: ResponseType.CONTEXT,
       title: lockedString(UIStringsNotTranslate.analyzingNetworkData),
-      details: createContextDetailsForNetworkAgent(selectedNetworkRequest.getItem()),
+      details: createContextDetailsForNetworkAgent(selectedNetworkRequest),
     };
   }
 
-  override async enhanceQuery(
-      query: string,
-      selectedNetworkRequest: ConversationContext<SDK.NetworkRequest.NetworkRequest>|null): Promise<string> {
+  override async enhanceQuery(query: string, selectedNetworkRequest: RequestContext|null): Promise<string> {
     const networkEnchantmentQuery = selectedNetworkRequest ?
         `# Selected network request \n${
-            new NetworkRequestFormatter(selectedNetworkRequest.getItem())
+            new NetworkRequestFormatter(selectedNetworkRequest.getItem(), selectedNetworkRequest.calculator)
                 .formatNetworkRequest()}\n\n# User request\n\n` :
         '';
     return `${networkEnchantmentQuery}${query}`;
   }
 }
 
-function createContextDetailsForNetworkAgent(request: SDK.NetworkRequest.NetworkRequest):
-    [ContextDetail, ...ContextDetail[]] {
-  const formatter = new NetworkRequestFormatter(request);
+function createContextDetailsForNetworkAgent(
+    selectedNetworkRequest: RequestContext,
+    ): [ContextDetail, ...ContextDetail[]] {
+  const request = selectedNetworkRequest.getItem();
+  const formatter = new NetworkRequestFormatter(request, selectedNetworkRequest.calculator);
   const requestContextDetail: ContextDetail = {
     title: lockedString(UIStringsNotTranslate.request),
     text: lockedString(UIStringsNotTranslate.requestUrl) + ': ' + request.url() + '\n\n' +

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

@@ -11,11 +11,14 @@ 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 {html, type TemplateResult} from '../../../ui/lit/lit.js';
 import * as Trace from '../../trace/trace.js';
 import {ConversationType} from '../AiHistoryStorage.js';
-import {PerformanceInsightFormatter, TraceEventFormatter} from '../data_formatters/PerformanceInsightFormatter.js';
+import {
+  PerformanceInsightFormatter,
+  TraceEventFormatter,
+} from '../data_formatters/PerformanceInsightFormatter.js';
 import {PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceFormatter.js';
+import type {UnitFormatters} from '../data_formatters/Types.js';
 import {debugLog} from '../debug.js';
 
 import {
@@ -245,7 +248,7 @@ const callFrameDataFormatDescription = `Each call frame is presented in the foll
 
 Key definitions:
 
-* id: A unique numerical identifier for the call frame.
+* id: A unique numerical identifier for the call frame. Never mention this id in the output to the user.
 * name: A concise string describing the call frame (e.g., 'Evaluate Script', 'render', 'fetchData').
 * duration: The total execution time of the call frame, including its children.
 * selfTime: The time spent directly within the call frame, excluding its children's execution.
@@ -284,11 +287,24 @@ enum ScorePriority {
   DEFAULT = 1,
 }
 
+export const PERF_AGENT_UNIT_FORMATTERS: UnitFormatters = {
+  micros(x) {
+    const milli = Trace.Helpers.Timing.microToMilli(x as Trace.Types.Timing.Micro);
+    return PERF_AGENT_UNIT_FORMATTERS.millis(milli);
+  },
+  millis(x) {
+    return i18n.TimeUtilities.preciseMillisToString(x, 1, ' ');
+  },
+  bytes(x) {
+    return i18n.ByteUtilities.bytesToString(x);
+  },
+};
+
 export class PerformanceTraceContext extends ConversationContext<TimelineUtils.AIContext.AgentFocus> {
   static full(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, insightSet: Trace.Insights.Types.InsightSet|null,
+      parsedTrace: Trace.Handlers.Types.ParsedTrace, insights: Trace.Insights.Types.TraceInsightSets,
       traceMetadata: Trace.Types.File.MetaData): PerformanceTraceContext {
-    return new PerformanceTraceContext(TimelineUtils.AIContext.AgentFocus.full(parsedTrace, insightSet, traceMetadata));
+    return new PerformanceTraceContext(TimelineUtils.AIContext.AgentFocus.full(parsedTrace, insights, traceMetadata));
   }
 
   static fromInsight(
@@ -356,10 +372,6 @@ export class PerformanceTraceContext extends ConversationContext<TimelineUtils.A
     return this.#focus;
   }
 
-  override getIcon(): TemplateResult {
-    return html`<devtools-icon name="performance" title="Performance"></devtools-icon>`;
-  }
-
   override getTitle(): string {
     const focus = this.#focus.data;
 
@@ -393,7 +405,8 @@ export class PerformanceTraceContext extends ConversationContext<TimelineUtils.A
       return;
     }
 
-    return new PerformanceInsightFormatter(focus.parsedTrace, focus.insight).getSuggestions();
+    return new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, focus.parsedTrace, focus.insight)
+        .getSuggestions();
   }
 }
 
@@ -538,7 +551,8 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
     }
 
     if (focus.data.type === 'insight') {
-      const formatter = new PerformanceInsightFormatter(focus.data.parsedTrace, focus.data.insight);
+      const formatter =
+          new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, focus.data.parsedTrace, focus.data.insight);
       return formatter.formatInsight();
     }
 
@@ -782,7 +796,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
     this.addFact(this.#networkDataDescriptionFact);
 
     if (!this.#traceFacts.length) {
-      this.#formatter = new PerformanceTraceFormatter(focus, this.#eventsSerializer);
+      this.#formatter = new PerformanceTraceFormatter(PERF_AGENT_UNIT_FORMATTERS, focus, this.#eventsSerializer);
       this.#createFactForTraceSummary(focus);
       this.#createFactForCriticalRequests();
       this.#createFactForMainThreadBottomUpSummary();
@@ -847,7 +861,8 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
           return {error: 'No insight available'};
         }
 
-        const details = new PerformanceInsightFormatter(parsedTrace, insight).formatInsight();
+        const details =
+            new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight).formatInsight();
 
         const key = `getInsightDetails('${params.insightName}')`;
         this.#cacheFunctionResult(focus, key, details);
@@ -1026,7 +1041,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
         }
 
         const tree = TimelineUtils.AICallTree.AICallTree.fromEvent(event, parsedTrace);
-        const callTree = tree?.serialize() ?? 'No call tree found';
+        const callTree = tree ? this.#formatter.formatCallTree(tree) : 'No call tree found';
 
         const key = `getDetailedCallTree(${args.eventKey})`;
         this.#cacheFunctionResult(focus, key, callTree);
@@ -1122,7 +1137,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
             insightSetBounds,
             parsedTrace,
         );
-        const formatted = TraceEventFormatter.networkRequests(requests, parsedTrace);
+        const formatted = TraceEventFormatter.networkRequests(PERF_AGENT_UNIT_FORMATTERS, requests, parsedTrace);
 
         const byteCount = Platform.StringUtilities.countWtf8Bytes(formatted);
         Host.userMetrics.performanceAINetworkSummaryResponseSize(byteCount);
@@ -1179,7 +1194,8 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
         if (!request) {
           return {error: 'Request not found'};
         }
-        const formatted = TraceEventFormatter.networkRequests([request], parsedTrace, {verbose: true});
+        const formatted =
+            TraceEventFormatter.networkRequests(PERF_AGENT_UNIT_FORMATTERS, [request], parsedTrace, {verbose: true});
 
         const byteCount = Platform.StringUtilities.countWtf8Bytes(formatted);
         Host.userMetrics.performanceAINetworkRequestDetailResponseSize(byteCount);