chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/freestyler/DrJonesPerformanceAgent.test.ts

@@ -2,19 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../core/host/host.js';
-import * as Trace from '../../models/trace/trace.js';
-import {
-  describeWithEnvironment,
-  getGetHostConfigStub,
-} from '../../testing/EnvironmentHelpers.js';
+import type * as Host from '../../core/host/host.js';
+import {describeWithEnvironment, getGetHostConfigStub} from '../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../testing/TraceLoader.js';
+import * as TimelineUtils from '../timeline/utils/utils.js';
 
-import {DrJonesPerformanceAgent, ResponseType} from './freestyler.js';
+import {CallTreeContext, DrJonesPerformanceAgent, ResponseType} from './freestyler.js';
 
 describeWithEnvironment('DrJonesPerformanceAgent', () => {
   function mockHostConfig(modelId?: string, temperature?: number) {
     getGetHostConfigStub({
-      devToolsAiAssistancePerformanceAgentDogfood: {
+      devToolsAiAssistancePerformanceAgent: {
         modelId,
         temperature,
       },
@@ -65,20 +63,16 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
         serverSideLoggingEnabled: true,
       });
       sinon.stub(agent, 'preamble').value('preamble');
-      agent.chatHistoryForTesting = new Map([[
+      agent.chatNewHistoryForTesting = new Map([[
         0,
         [
           {
-            text: 'first',
-            entity: Host.AidaClient.Entity.UNKNOWN,
+            type: ResponseType.QUERYING,
+            query: 'question',
           },
           {
-            text: 'second',
-            entity: Host.AidaClient.Entity.SYSTEM,
-          },
-          {
-            text: 'third',
-            entity: Host.AidaClient.Entity.USER,
+            type: ResponseType.ANSWER,
+            text: 'answer',
           },
         ],
       ]]);
@@ -92,16 +86,12 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
             preamble: 'preamble',
             chat_history: [
               {
-                entity: 0,
-                text: 'first',
+                entity: 1,
+                text: 'question',
               },
               {
                 entity: 2,
-                text: 'second',
-              },
-              {
-                entity: 1,
-                text: 'third',
+                text: 'answer',
               },
             ],
             metadata: {
@@ -113,33 +103,22 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
               model_id: 'test model',
               temperature: undefined,
             },
-            client_feature: 2,
+            client_feature: 8,
             functionality_type: 1,
           },
       );
     });
   });
-  describe('run', () => {
-    const rootNodeEntry =
-        new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('RunTask', Trace.Types.Timing.MilliSeconds(0));
-    const node1 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(1));
-    const node2 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(2));
-    const node3 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(10));
-    const node4 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(11));
-    const node5 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(15));
+  describe('run', function() {
+    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);
 
-    beforeEach(() => {
-      rootNodeEntry.children = [node1, node3];
-      node1.function = 'foo';
-      node1.children = [node2];
-      node2.function = 'foofoo';
-      node3.function = 'foo2';
-      node3.children = [node4, node5];
-      node4.function = 'foo2foo';
-      node5.function = 'foo2foo2';
-    });
-
-    it('generates an answer', async () => {
       async function* generateAnswer() {
         yield {
           explanation: 'This is the answer',
@@ -154,28 +133,44 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
         aidaClient: mockAidaClient(generateAnswer),
       });
 
-      // Select node3
-      node3.selected = true;
-      const responses = await Array.fromAsync(agent.run('test', {selectedStackTrace: rootNodeEntry}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: new CallTreeContext(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, [
         {
-          type: ResponseType.TITLE,
-          title: 'Analyzing stack trace',
+          type: ResponseType.USER_QUERY,
+          query: 'test',
         },
         {
-          type: ResponseType.THOUGHT,
-          thought: 'Data used to generate this response',
-          contextDetails: [
-            {
-              title: 'Selected stack trace',
-              text: JSON.stringify(rootNodeEntry),
-            },
+          type: ResponseType.CONTEXT,
+          title: 'Analyzing call tree',
+          details: [
+            {title: 'Selected call tree', text: expectedData},
           ],
         },
+        {
+          type: ResponseType.QUERYING,
+          query: `${expectedData}\n\n# User request\n\ntest`,
+        },
         {
           type: ResponseType.ANSWER,
           text: 'This is the answer',
+          suggestions: undefined,
           rpcId: 123,
         },
       ]);
@@ -183,7 +178,7 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
       assert.deepStrictEqual(agent.chatHistoryForTesting, [
         {
           entity: 1,
-          text: `# Selected stack trace\n${JSON.stringify(rootNodeEntry)}\n\n# User request\n\ntest`,
+          text: `${aiCallTree.serialize()}\n\n# User request\n\ntest`,
         },
         {
           entity: 2,
@@ -192,4 +187,55 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
       ]);
     });
   });
+
+  describe('enhanceQuery', () => {
+    it('does not send the serialized calltree again if it is a followup chat about the same calltree', async () => {
+      const agent = new DrJonesPerformanceAgent({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+      });
+
+      const mockAiCallTree = {
+        serialize: () => 'Mock call tree',
+      } as unknown as TimelineUtils.AICallTree.AICallTree;
+
+      const enhancedQuery1 = await agent.enhanceQuery('What is this?', new CallTreeContext(mockAiCallTree));
+      assert.strictEqual(enhancedQuery1, 'Mock call tree\n\n# User request\n\nWhat is this?');
+
+      // Create history state of the above query
+      agent.chatNewHistoryForTesting = new Map([[
+        0,
+        [
+          {
+            type: ResponseType.CONTEXT,
+            title: 'Analyzing call tree',
+            details: [
+              {
+                title: 'Selected call tree',
+                text: mockAiCallTree.serialize(),
+              },
+            ],
+          },
+          {
+            type: ResponseType.QUERYING,
+            query: enhancedQuery1,
+          },
+          {
+            type: ResponseType.ANSWER,
+            text: 'test answer',
+          },
+        ],
+      ]]);
+
+      const query2 = 'But what about this follow-up question?';
+      const enhancedQuery2 = await agent.enhanceQuery(query2, new CallTreeContext(mockAiCallTree));
+      assert.strictEqual(enhancedQuery2, query2);
+      assert.isFalse(enhancedQuery2.includes(mockAiCallTree.serialize()));
+
+      // Just making sure any subsequent chat doesnt include it either.
+      const query3 = 'And this 3rd question?';
+      const enhancedQuery3 = await agent.enhanceQuery(query3, new CallTreeContext(mockAiCallTree));
+      assert.strictEqual(enhancedQuery3, query3);
+      assert.isFalse(enhancedQuery3.includes(mockAiCallTree.serialize()));
+    });
+  });
 });

package/front_end/panels/freestyler/DrJonesPerformanceAgent.ts

@@ -5,56 +5,104 @@
 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 * as TimelineUtils from '../../panels/timeline/utils/utils.js';
+import * as PanelUtils from '../utils/utils.js';
 
 import {
+  AgentType,
   AiAgent,
   type AidaRequestOptions,
-  type ContextDetail,
-  debugLog,
-  ErrorType,
-  isDebugMode,
-  type ResponseData,
+  type ContextResponse,
+  ConversationContext,
+  type ParsedResponse,
   ResponseType,
-  type ThoughtResponse,
-  type TitleResponse,
 } 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 graph.
-Each node in this tree represents an event and contains the following information:
-* id: A unique identifier for the event.
-* url:  The URL of the JavaScript file where the event originated (if applicable).
-* line: The line number in the JavaScript file where the event originated (if applicable).
-* column: The column number in the JavaScript file where the event originated (if applicable).
-* function: The name of the function associated with this event.
-* start: The start time of the event in milliseconds.
-* totalTime: The total duration of the event, including the time spent in its children, in milliseconds.
-* selfTime:  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.
 
 
@@ -69,118 +117,114 @@ 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 trace',
-  /**
-   *@description Thought text for thinking step of DrJones Performance agent.
-   */
-  dataUsedToGenerateThisResponse: 'Data used to generate this response',
+  analyzingCallTree: 'Analyzing call tree',
 };
 
 const lockedString = i18n.i18n.lockedString;
 
+export class CallTreeContext extends ConversationContext<TimelineUtils.AICallTree.AICallTree> {
+  #callTree: TimelineUtils.AICallTree.AICallTree;
+
+  constructor(callTree: TimelineUtils.AICallTree.AICallTree) {
+    super();
+    this.#callTree = callTree;
+  }
+
+  override getOrigin(): string {
+    // TODO: implement cross-origin checks for the PerformanceAgent.
+    return '';
+  }
+
+  override getItem(): TimelineUtils.AICallTree.AICallTree {
+    return this.#callTree;
+  }
+
+  override getIcon(): HTMLElement {
+    const iconData = {
+      iconName: 'performance',
+      color: 'var(--sys-color-on-surface-subtle)',
+    };
+    const icon = PanelUtils.PanelUtils.createIconElement(iconData, 'Performance');
+    icon.classList.add('icon');
+    return icon;
+  }
+
+  override getTitle(): string {
+    const {event} = this.#callTree.selectedNode;
+    if (!event) {
+      return 'unknown';
+    }
+
+    return TimelineUtils.EntryName.nameForEntry(event);
+  }
+}
+
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
-export class DrJonesPerformanceAgent extends AiAgent {
+export class DrJonesPerformanceAgent extends AiAgent<TimelineUtils.AICallTree.AICallTree> {
+  override type = AgentType.DRJONES_PERFORMANCE;
   readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_FREESTYLER;
-  // TODO(b/369822364): use a feature param instead.
-  readonly userTier = 'BETA';
+  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DRJONES_PERFORMANCE_AGENT;
+  get userTier(): string|undefined {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    return config.devToolsAiAssistancePerformanceAgent?.userTier;
+  }
   get options(): AidaRequestOptions {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    const temperature = AiAgent.validTemperature(config.devToolsAiAssistancePerformanceAgentDogfood?.temperature);
-    const modelId = config.devToolsAiAssistancePerformanceAgentDogfood?.modelId;
+    const temperature = config.devToolsAiAssistancePerformanceAgent?.temperature;
+    const modelId = config.devToolsAiAssistancePerformanceAgent?.modelId;
 
     return {
       temperature,
-      model_id: modelId,
+      modelId,
     };
   }
 
-  *
-      handleContextDetails(selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null):
-          Generator<ThoughtResponse|TitleResponse, void, void> {
-    yield {
-      type: ResponseType.TITLE,
-      title: lockedString(UIStringsNotTranslate.analyzingStackTrace),
-    };
+  async *
+      handleContextDetails(aiCallTree: ConversationContext<TimelineUtils.AICallTree.AICallTree>|null):
+          AsyncGenerator<ContextResponse, void, void> {
     yield {
-      type: ResponseType.THOUGHT,
-      thought: lockedString(UIStringsNotTranslate.dataUsedToGenerateThisResponse),
-      contextDetails: createContextDetailsForDrJonesPerformanceAgent(selectedStackTrace),
+      type: ResponseType.CONTEXT,
+      title: lockedString(UIStringsNotTranslate.analyzingCallTree),
+      details: [
+        {
+          title: 'Selected call tree',
+          text: aiCallTree?.getItem().serialize() ?? '',
+        },
+      ],
     };
   }
 
-  async enhanceQuery(query: string, selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null):
+  override async enhanceQuery(query: string, aiCallTree: ConversationContext<TimelineUtils.AICallTree.AICallTree>|null):
       Promise<string> {
-    const networkEnchantmentQuery =
-        selectedStackTrace ? `# Selected stack trace\n${JSON.stringify(selectedStackTrace)}\n\n# User request\n\n` : '';
-    return `${networkEnchantmentQuery}${query}`;
-  }
+    const treeStr = aiCallTree?.getItem().serialize();
 
-  #runId = 0;
-  async * run(query: string, options: {
-    signal?: AbortSignal, selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null,
-  }): AsyncGenerator<ResponseData, void, void> {
-    yield* this.handleContextDetails(options.selectedStackTrace);
-
-    query = await this.enhanceQuery(query, options.selectedStackTrace);
-    const currentRunId = ++this.#runId;
-
-    let response: string;
-    let rpcId: number|undefined;
-    try {
-      const fetchResult = await this.aidaFetch(query, {signal: options.signal});
-      response = fetchResult.response;
-      rpcId = fetchResult.rpcId;
-    } catch (err) {
-      debugLog('Error calling the AIDA API', err);
-      if (err instanceof Host.AidaClient.AidaAbortError) {
-        this.removeHistoryRun(currentRunId);
-        yield {
-          type: ResponseType.ERROR,
-          error: ErrorType.ABORT,
-          rpcId,
-        };
-        return;
+    // Collect the queries from previous messages in this session
+    const prevQueries: string[] = [];
+    for await (const data of this.runFromHistory()) {
+      if (data.type === ResponseType.QUERYING) {
+        prevQueries.push(data.query);
       }
-
-      yield {
-        type: ResponseType.ERROR,
-        error: ErrorType.UNKNOWN,
-        rpcId,
-      };
-      return;
+    }
+    // If this is a followup chat about the same call tree, don't include the call tree serialization again.
+    // We don't need to repeat it and we'd rather have more the context window space.
+    if (prevQueries.length && treeStr && prevQueries.find(q => q.startsWith(treeStr))) {
+      aiCallTree = null;
     }
 
-    this.addToHistory({
-      id: currentRunId,
-      query,
-      output: response,
-    });
+    const perfEnhancementQuery = aiCallTree ? `${treeStr}\n\n# User request\n\n` : '';
+    return `${perfEnhancementQuery}${query}`;
+  }
 
-    yield {
-      type: ResponseType.ANSWER,
-      text: response,
-      rpcId,
+  override parseResponse(response: string): ParsedResponse {
+    return {
+      answer: response,
     };
-    if (isDebugMode()) {
-      window.dispatchEvent(new CustomEvent('freestylerdone'));
-    }
   }
 }
 
-function createContextDetailsForDrJonesPerformanceAgent(
-    selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null): [ContextDetail, ...ContextDetail[]] {
-  return [
-    {
-      title: 'Selected stack trace',
-      text: JSON.stringify(selectedStackTrace),
-    },
-  ];
-}
-
 function setDebugFreestylerEnabled(enabled: boolean): void {
   if (enabled) {
     localStorage.setItem('debugFreestylerEnabled', 'true');