RPP: Introduce AICallTree, rewrite of TreeHelper AINode

Revamp of the data structure and serialization format of a flame chart call tree, being passed to Freestyler. This impl leverages TimelineProfileTree for faster/easier tree construction and manipulation. We build our tree with only the events from the same track that overlap the selected event.

Serialization: We switch from JSON to a YAML-like format that's 35% more efficient with the tokenizer. A few variants were tested and this format was chosen to be token-efficient and meaningfully clear to the LLM. Notably:
 - rather than nested children, we use adjacency lists.
 - URLs are particularly token-inefficient. To avoid repeating, we output a lookup table.

Within the Freestyler chat UI, the Call frame chip is now clickable. It relies on a new Revealable class: SDK.TraceObject.RevealableEvent

Bug: 370436840,372658699
Change-Id: I89baabfd9e7b1fdd183a6a9ea12bf2a318125fbc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5963059
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Auto-Submit: Paul Irish <[email protected]>

Author: paulirish

config/gni/devtools_grd_files.gni

@@ -1865,6 +1865,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/timelinePaintProfiler.css.js",
   "front_end/panels/timeline/timelinePanel.css.js",
   "front_end/panels/timeline/timelineStatusDialog.css.js",
+  "front_end/panels/timeline/utils/AICallTree.js",
   "front_end/panels/timeline/utils/EntryName.js",
   "front_end/panels/timeline/utils/EntryStyles.js",
   "front_end/panels/timeline/utils/Helpers.js",

front_end/core/sdk/TraceObject.ts

@@ -13,3 +13,11 @@ export class TraceObject {
     this.metadata = metadata;
   }
 }
+
+// Another thin wrapper class to enable revealing individual trace events (aka entries) in Timeline panel.
+export class RevealableEvent {
+  // Only Trace.Types.Events.Event are passed in, but we can't depend on that type from SDK
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  constructor(public event: any) {
+  }
+}

front_end/models/timeline_model/TimelineModelFilter.ts

@@ -24,11 +24,11 @@ export class TimelineVisibleEventsFilter extends TimelineModelFilter {
 
   static eventType(event: Trace.Types.Events.Event): Trace.Types.Events.Name {
     // Any blink.console category events are treated as ConsoleTime events
-    if (Trace.Helpers.Trace.eventHasCategory(event, 'blink.console')) {
+    if (event.cat.includes('blink.console')) {
       return Trace.Types.Events.Name.CONSOLE_TIME;
     }
     // Any blink.user_timing egory events are treated as UserTiming events
-    if (Trace.Helpers.Trace.eventHasCategory(event, 'blink.user_timing')) {
+    if (event.cat.includes('blink.user_timing')) {
       return Trace.Types.Events.Name.USER_TIMING;
     }
     return event.name as Trace.Types.Events.Name;

front_end/panels/freestyler/BUILD.gn

@@ -42,6 +42,7 @@ devtools_module("freestyler") {
     "../../models/trace:bundle",
     "../../models/workspace:bundle",
     "../../panels/network:bundle",
+    "../../panels/timeline/utils:bundle",
     "../../panels/utils:bundle",
     "../../third_party/marked:bundle",
     "../../ui/components/markdown_view:bundle",
@@ -99,6 +100,7 @@ ts_library("unittests") {
     "../../generated:protocol",
     "../../models/bindings:bundle",
     "../../models/trace:bundle",
+    "../../panels/timeline/utils:bundle",
     "../../testing",
   ]
 }

front_end/panels/freestyler/DrJonesPerformanceAgent.test.ts

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 
 import type * as Host from '../../core/host/host.js';
-import * as Trace from '../../models/trace/trace.js';
 import {describeWithEnvironment, getGetHostConfigStub} from '../../testing/EnvironmentHelpers.js';
-import {makeCompleteEvent, makeProfileCall} from '../../testing/TraceHelpers.js';
+import {TraceLoader} from '../../testing/TraceLoader.js';
+import * as TimelineUtils from '../timeline/utils/utils.js';
 
 import {DrJonesPerformanceAgent, ResponseType} from './freestyler.js';
 
@@ -110,30 +110,15 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
     });
   });
   describe('run', function() {
-    const evaluateScript = makeCompleteEvent(Trace.Types.Events.Name.EVALUATE_SCRIPT, 0, 500);
-    const v8Run = makeCompleteEvent('v8.run', 10, 490);
-    const parseFunction = makeCompleteEvent('V8.ParseFunction', 12, 1);
-    const traceEvents: Trace.Types.Events.Event[] = [evaluateScript, v8Run, parseFunction];
-    const profileCalls = [makeProfileCall('a', 100, 200), makeProfileCall('b', 300, 200)];
-
-    // Roughly this looks like:
-    // 0                                          500
-    // |------------- EvaluateScript -------------|
-    //  |-        v8.run                         -|
-    //    |--|   |-    a   -||-          b        |
-    //      ^ V8.ParseFunction
-
-    const allEntries = Trace.Helpers.Trace.mergeEventsInOrder(traceEvents, profileCalls);
-    const {entryToNode} = Trace.Helpers.TreeHelpers.treify(allEntries, {filter: {has: () => true}});
-    const selectedNode = entryToNode.get(v8Run);
-    assert.exists(selectedNode);
-
-    const aiNodeTree = Trace.Helpers.TreeHelpers.AINode.fromEntryNode(selectedNode, () => true);
-    const v8RunNode = Trace.Helpers.TreeHelpers.AINode.getSelectedNodeWithinTree(aiNodeTree);
-    assert.exists(aiNodeTree);
-    assert.exists(v8RunNode);
-
-    it('generates an answer', async () => {
+    it('generates an answer', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-outermost-frames.json.gz');
+      // A basic Layout.
+      const layoutEvt = parsedTrace.Renderer.allTraceEntries.find(event => event.ts === 465457096322);
+      assert.exists(layoutEvt);
+      const aiCallTree =
+          TimelineUtils.AICallTree.AICallTree.from(layoutEvt, parsedTrace.Renderer.allTraceEntries, parsedTrace);
+      assert.exists(aiCallTree);
+
       async function* generateAnswer() {
         yield {
           explanation: 'This is the answer',
@@ -148,9 +133,23 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
         aidaClient: mockAidaClient(generateAnswer),
       });
 
-      // Select the v8.run node
-      v8RunNode.selected = true;
-      const responses = await Array.fromAsync(agent.run('test', {selected: aiNodeTree}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: aiCallTree}));
+      const expectedData = '\n\n' +
+          `
+
+
+# Call tree:
+
+Node: 1 – Task
+dur: 3
+Children:
+  * 2 – Layout
+
+Node: 2 – Layout
+Selected: true
+dur: 3
+self: 3
+`.trim();
 
       assert.deepStrictEqual(responses, [
         {
@@ -159,33 +158,14 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
         },
         {
           type: ResponseType.CONTEXT,
-          title: 'Analyzing stack',
+          title: 'Analyzing call tree',
           details: [
-            {
-              title: 'Selected stack',
-              text: JSON.stringify({
-                name: 'EvaluateScript',
-                dur: 0.5,
-                self: 0,
-                children: [{
-                  selected: true,
-                  name: 'v8.run',
-                  dur: 0.5,
-                  self: 0.1,
-                  children: [
-                    {name: 'V8.ParseFunction', dur: 0, self: 0},
-                    {name: 'a', url: '', dur: 0.2, self: 0.2},
-                    {name: 'b', url: '', dur: 0.2, self: 0.2},
-                  ],
-                }],
-              }),
-            },
+            {title: 'Selected call tree', text: expectedData},
           ],
         },
         {
           type: ResponseType.QUERYING,
-          query:
-              '# Selected stack trace\n{\"name\":\"EvaluateScript\",\"dur\":0.5,\"self\":0}\n\n# User request\n\ntest',
+          query: `\n${expectedData}\n\n# User request\n\ntest`,
         },
         {
           type: ResponseType.ANSWER,
@@ -198,7 +178,7 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
       assert.deepStrictEqual(agent.chatHistoryForTesting, [
         {
           entity: 1,
-          text: `# Selected stack trace\n${JSON.stringify(aiNodeTree)}\n\n# User request\n\ntest`,
+          text: `\n${aiCallTree.serialize()}\n\n# User request\n\ntest`,
         },
         {
           entity: 2,

front_end/panels/freestyler/DrJonesPerformanceAgent.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Trace from '../../models/trace/trace.js';
+import type * as TimelineUtils from '../../panels/timeline/utils/utils.js';
 
 import {
   AiAgent,
@@ -15,39 +15,91 @@ import {
   ResponseType,
 } from './AiAgent.js';
 
+/**
+ * Preamble clocks in at ~950 tokens.
+ *   The prose is around 4.5 chars per token.
+ * The data can be as bad as 1.8 chars per token
+ *
+ * Check token length in https://aistudio.google.com/
+ */
 const preamble = `You are a performance expert deeply integrated with Chrome DevTools.
-You specialize in analyzing web application behavior captured by Chrome DevTools Performance Panel.
-You will be provided with a string containing the JSON.stringify representation of a tree of events captured in a Chrome DevTools performance recording.
-This tree originates from the root task of a specific event that was selected by a user in the Performance panel's flame chart.
-Each node in this tree represents an event and contains the following information:
-
-* name:  The name of the event or JavaScript function
-* url:  The URL of the JavaScript file where the event originated. If present, this event is a JavaScript function. If not, it's a native browser task.
-* dur: The total duration of the event, including the time spent in its children, in milliseconds.
-* self:  The duration of the event itself, excluding the time spent in its children, in milliseconds.
-* selected: A boolean value indicating whether this is the event the user selected in the Performance panel.
-* children: An array of child events, each represented as another node with the same structure.
-
-Your task is to analyze this event and its surrounding context within the performance recording. Your analysis may include:
-* Clearly state the name and purpose of the selected event based on its properties (e.g., function name, URL, line number). Explain what the task is broadly doing. You can also mention the function
+You specialize in analyzing web application behavior captured by Chrome DevTools Performance Panel and Chrome tracing.
+You will be provided a text representation of a call tree of native and JavaScript callframes selected by the user from a performance trace's flame chart.
+This tree originates from the root task of a specific callframe.
+
+The format of each callframe is:
+
+    Node: $id – $name
+    Selected: true
+    dur: $duration
+    self: $self
+    URL #: $url_number
+    Children:
+      * $child.id – $child.name
+
+The fields are:
+
+* name:  A short string naming the callframe (e.g. 'Evaluate Script' or the JS function name 'InitializeApp')
+* id:  A numerical identifier for the callframe
+* Selected:  Set to true if this callframe is the one the user selected.
+* url_number:  The number of the URL referenced in the "All URLs" list
+* dur:  The total duration of the callframe (includes time spent in its descendants), in milliseconds.
+* self:  The self duration of the callframe (excludes time spent in its descendants), in milliseconds. If omitted, assume the value is 0.
+* children:  An list of child callframes, each denoted by their id and name
+
+Your task is to analyze this callframe and its surrounding context within the performance recording. Your analysis may include:
+* Clearly state the name and purpose of the selected callframe based on its properties (e.g., name, URL). Explain what the task is broadly doing.
 * Describe its execution context:
-  * Ancestors: Trace back through the tree to identify the chain of parent events that led to the execution of the selected event. Describe this execution path.
-  * Descendants:  Analyze the children of the selected event. What tasks did it initiate? Did it spawn any long-running or resource-intensive sub-tasks?
+  * Ancestors: Trace back through the tree to identify the chain of parent callframes that led to the execution of the selected callframe. Describe this execution path.
+  * Descendants:  Analyze the children of the selected callframe. What tasks did it initiate? Did it spawn any long-running or resource-intensive sub-tasks?
 * Quantify performance:
     * Duration
-    * Relative Cost:  How much did this event contribute to the overall duration of its parent tasks and the entire recorded trace?
-    * Potential Bottlenecks: Analyze the totalTime and selfTime of the selected event and its children to identify any potential performance bottlenecks. Are there any excessively long tasks or periods of idle time?
-4. (Only provide if you have specific suggestions) Based on your analysis, provide specific and actionable suggestions for improving the performance of the selected event and its related tasks.  Are there any resources being acquired or held for longer than necessary?
+    * Relative Cost:  How much did this callframe contribute to the overall duration of its parent tasks and the entire recorded trace?
+    * Potential Bottlenecks: Analyze the total and self duration of the selected callframe and its children to identify any potential performance bottlenecks. Are there any excessively long tasks or periods of idle time?
+4. Based on your analysis, provide specific and actionable suggestions for improving the performance of the selected callframe and its related tasks.  Are there any resources being acquired or held for longer than necessary? Only provide if you have specific suggestions.
 
 # Considerations
 * Keep your analysis concise and focused, highlighting only the most critical aspects for a software engineer.
-* Do not mention id of the event in your response.
+* Do not mention id of the callframe or the URL number in your response.
 * **CRITICAL** If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about performance of websites."
 
 ## Example session
 
-Selected call tree
-'{"id":"1","function":"main","start":0,"totalTime":500,"selfTime":100,"children":[{"id":"2","function":"update","start":100,"totalTime":200,"selfTime":50,"children":[{"id":"3","function":"animate","url":"[invalid URL removed]","line":120,"column":10,"start":150,"totalTime":150,"selfTime":20,"selected":true,"children":[{"id":"4","function":"calculatePosition","start":160,"totalTime":80,"selfTime":80,"children":[]},{"id":"5","function":"applyStyles","start":240,"totalTime":50,"selfTime":50,"children":[]}]}]}]}'
+All URL #s:
+
+* 0 – app.js
+
+Call tree:
+
+Node: 1 – main
+dur: 500
+self: 100
+Children:
+  * 2 – update
+
+Node: 2 – update
+dur: 200
+self: 50
+Children:
+  * 3 – animate
+
+Node: 3 – animate
+Selected: true
+dur: 150
+self: 20
+URL #: 0
+Children:
+  * 4 – calculatePosition
+  * 5 – applyStyles
+
+Node: 4 – calculatePosition
+dur: 80
+self: 80
+
+Node: 5 – applyStyles
+dur: 50
+self: 50
+
 Explain the selected task.
 
 
@@ -62,7 +114,7 @@ Perhaps there's room for optimization there. You could investigate whether the c
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
-  analyzingStackTrace: 'Analyzing stack',
+  analyzingCallTree: 'Analyzing call tree',
 };
 
 const lockedString = i18n.i18n.lockedString;
@@ -71,7 +123,7 @@ const lockedString = i18n.i18n.lockedString;
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
-export class DrJonesPerformanceAgent extends AiAgent<Trace.Helpers.TreeHelpers.AINode> {
+export class DrJonesPerformanceAgent extends AiAgent<TimelineUtils.AICallTree.AICallTree> {
   readonly preamble = preamble;
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DRJONES_PERFORMANCE_AGENT;
   get userTier(): string|undefined {
@@ -90,25 +142,24 @@ export class DrJonesPerformanceAgent extends AiAgent<Trace.Helpers.TreeHelpers.A
   }
 
   async *
-      handleContextDetails(selectedStackTrace: Trace.Helpers.TreeHelpers.AINode|null):
+      handleContextDetails(aiCallTree: TimelineUtils.AICallTree.AICallTree|null):
           AsyncGenerator<ContextResponse, void, void> {
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslate.analyzingStackTrace),
+      title: lockedString(UIStringsNotTranslate.analyzingCallTree),
       details: [
         {
-          title: 'Selected stack',
-          text: JSON.stringify(selectedStackTrace),
+          title: 'Selected call tree',
+          text: aiCallTree?.serialize() ?? '',
         },
       ],
     };
   }
 
-  override async enhanceQuery(query: string, selectedStackTrace: Trace.Helpers.TreeHelpers.AINode|null):
-      Promise<string> {
-    selectedStackTrace?.sanitize();
-    const stackStr = JSON.stringify(selectedStackTrace).trim();
-    const perfEnhancementQuery = selectedStackTrace ? `# Selected stack trace\n${stackStr}\n\n# User request\n\n` : '';
+  override async enhanceQuery(query: string, aiCallTree: TimelineUtils.AICallTree.AICallTree|null): Promise<string> {
+    const treeStr = aiCallTree?.serialize();
+
+    const perfEnhancementQuery = aiCallTree ? `\n${treeStr}\n\n# User request\n\n` : '';
     return `${perfEnhancementQuery}${query}`;
   }