chrome-devtools-frontend 1.0.1515796 → 1.0.1516909

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

@@ -4,6 +4,7 @@
 
 import '../../../ui/components/icon_button/icon_button.js';
 
+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 * as Platform from '../../../core/platform/platform.js';
@@ -11,7 +12,7 @@ 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 Trace from '../../trace/trace.js';
-import type {ConversationType} from '../AiHistoryStorage.js';
+import {ConversationType} from '../AiHistoryStorage.js';
 import {
   PerformanceInsightFormatter,
   TraceEventFormatter,
@@ -22,11 +23,10 @@ import {AICallTree} from '../performance/AICallTree.js';
 import {AgentFocus} from '../performance/AIContext.js';
 
 import {
-  type AgentOptions,
   AiAgent,
   type ContextResponse,
   ConversationContext,
-  type ConversationSuggestion,
+  type ConversationSuggestions,
   type ParsedResponse,
   type RequestOptions,
   type ResponseData,
@@ -38,7 +38,6 @@ const UIStringsNotTranslated = {
    *@description Shown when the agent is investigating a trace
    */
   analyzingTrace: 'Analyzing trace',
-  analyzingCallTree: 'Analyzing call tree',
   /**
    * @description Shown when the agent is investigating network activity
    */
@@ -82,6 +81,7 @@ The 3 main performance metrics are:
 
 Trace events referenced in the information given to you will be marked with an \`eventKey\`. For example: \`LCP element: <img src="..."> (eventKey: r-123, ts: 123456)\`
 You can use this key with \`getEventByKey\` to get more information about that trace event. For example: \`getEventByKey('r-123')\`
+You can also use this key with \`selectEventByKey\` to show the user a specific event
 
 ## Step-by-step instructions for debugging performance issues
 
@@ -173,6 +173,7 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   }
 
   #focus: AgentFocus;
+  external = false;
 
   constructor(focus: AgentFocus) {
     super();
@@ -196,50 +197,74 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
       url = new URL(focus.parsedTrace.data.Meta.mainFrameURL);
     }
 
-    return `Trace: ${url.hostname}`;
+    const parts = [`Trace: ${url.hostname}`];
+    if (focus.insight) {
+      parts.push(focus.insight.title);
+    }
+    if (focus.callTree) {
+      const node = focus.callTree.selectedNode ?? focus.callTree.rootNode;
+      parts.push(Trace.Name.forEntry(node.event));
+    }
+    return parts.join(' – ');
   }
 
   /**
    * Presents the default suggestions that are shown when the user first clicks
    * "Ask AI".
    */
-  override async getSuggestions(): Promise<[ConversationSuggestion, ...ConversationSuggestion[]]|undefined> {
-    const focus = this.#focus.data;
+  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
+    const data = this.#focus.data;
+
+    if (data.callTree) {
+      return [
+        {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
+        {title: 'Where is time being spent?', jslogContext: 'performance-default'},
+        {title: 'How can I optimize this?', jslogContext: 'performance-default'},
+      ];
+    }
 
-    if (focus.type !== 'insight') {
-      return;
+    if (data.insight) {
+      return new PerformanceInsightFormatter(data.parsedTrace, data.insight).getSuggestions();
+    }
+
+    const suggestions: ConversationSuggestions =
+        [{title: 'What performance issues exist with my page?', jslogContext: 'performance-default'}];
+
+    if (data.insightSet) {
+      const lcp = data.insightSet ? Trace.Insights.Common.getLCP(data.insightSet) : null;
+      const cls = data.insightSet ? Trace.Insights.Common.getCLS(data.insightSet) : null;
+      const inp = data.insightSet ? Trace.Insights.Common.getINP(data.insightSet) : null;
+
+      const ModelHandlers = Trace.Handlers.ModelHandlers;
+      const GOOD = Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD;
+
+      if (lcp && ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(lcp.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve LCP?', jslogContext: 'performance-default'});
+      }
+      if (inp && ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(inp.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve INP?', jslogContext: 'performance-default'});
+      }
+      if (cls && ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve CLS?', jslogContext: 'performance-default'});
+      }
     }
 
-    return new PerformanceInsightFormatter(focus.parsedTrace, focus.insight).getSuggestions();
+    return suggestions;
   }
 }
 
 // 16k Tokens * ~4 char per token.
 const MAX_FUNCTION_RESULT_BYTE_LENGTH = 16384 * 4;
 
-/**
- * Union of all the performance conversation types, which are all implemented by this file.
- * This temporary until all Performance Panel AI features use the "Full" type. go/chrome-devtools:more-powerful-performance-agent-design
- */
-type PerformanceConversationType =
-    ConversationType.PERFORMANCE_FULL|ConversationType.PERFORMANCE_CALL_TREE|ConversationType.PERFORMANCE_INSIGHT;
-
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
 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: AgentFocus|null = null;
-
-  constructor(opts: AgentOptions, conversationType: PerformanceConversationType) {
-    super(opts);
-    this.#conversationType = conversationType;
-  }
+  #hasShownAnalyzeTraceContext = false;
 
   /**
    * Cache of all function calls made by the agent. This allows us to include (as a
@@ -285,7 +310,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   }
 
   getConversationType(): ConversationType {
-    return this.#conversationType;
+    return ConversationType.PERFORMANCE;
   }
 
   #lookupEvent(key: Trace.Types.File.SerializableKey): Trace.Types.Events.Event|null {
@@ -311,38 +336,22 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       return;
     }
 
-    const focus = context.getItem();
-    if (this.#lastFocusHandledForContextDetails === focus) {
+    if (this.#hasShownAnalyzeTraceContext) {
       return;
     }
 
-    this.#lastFocusHandledForContextDetails = focus;
+    yield {
+      type: ResponseType.CONTEXT,
+      title: lockedString(UIStringsNotTranslated.analyzingTrace),
+      details: [
+        {
+          title: 'Trace',
+          text: this.#formatter?.formatTraceSummary() ?? '',
+        },
+      ],
+    };
 
-    if (focus.data.type === 'full' || focus.data.type === 'insight') {
-      yield {
-        type: ResponseType.CONTEXT,
-        title: lockedString(UIStringsNotTranslated.analyzingTrace),
-        details: [
-          {
-            title: 'Trace',
-            text: this.#formatter?.formatTraceSummary() ?? '',
-          },
-        ],
-      };
-    } else if (focus.data.type === 'call-tree') {
-      yield {
-        type: ResponseType.CONTEXT,
-        title: lockedString(UIStringsNotTranslated.analyzingCallTree),
-        details: [
-          {
-            title: 'Selected call tree',
-            text: focus.data.callTree.serialize(),
-          },
-        ],
-      };
-    } else {
-      Platform.assertNever(focus.data, 'Unknown agent focus');
-    }
+    this.#hasShownAnalyzeTraceContext = true;
   }
 
   #callTreeContextSet = new WeakSet();
@@ -368,7 +377,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     return super.parseTextResponse(response);
   }
 
-  override async enhanceQuery(query: string, context: ConversationContext<AgentFocus>|null): Promise<string> {
+  override async enhanceQuery(query: string, context: PerformanceTraceContext|null): Promise<string> {
     if (!context) {
       this.clearDeclaredFunctions();
       return query;
@@ -378,12 +387,9 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     this.#declareFunctions(context);
 
     const focus = context.getItem();
+    const selected: string[] = [];
 
-    if (focus.data.type === 'full') {
-      return query;
-    }
-
-    if (focus.data.type === 'call-tree') {
+    if (focus.data.callTree) {
       // 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.
       let contextString = '';
@@ -392,17 +398,12 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         this.#callTreeContextSet.add(focus.data.callTree);
       }
 
-      if (!contextString) {
-        return query;
+      if (contextString) {
+        selected.push(`User selected the following call tree:\n\n${contextString}\n\n`);
       }
-
-      let enhancedQuery = '';
-      enhancedQuery += `User selected the following call tree:\n\n${contextString}\n\n`;
-      enhancedQuery += `# User query\n\n${query}`;
-      return enhancedQuery;
     }
 
-    if (focus.data.type === 'insight') {
+    if (focus.data.insight) {
       // We only need to add Insight info to a prompt when the context changes. For example:
       // User clicks Insight A. We need to send info on Insight A with the prompt.
       // User asks follow up question. We do not need to resend Insight A with the prompt.
@@ -411,17 +412,17 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       const includeInsightInfo = focus.data.insight !== this.#lastInsightForEnhancedQuery;
       this.#lastInsightForEnhancedQuery = focus.data.insight;
 
-      if (!includeInsightInfo) {
-        return query;
+      if (includeInsightInfo) {
+        selected.push(`User selected the ${focus.data.insight.insightKey} insight.\n\n`);
       }
+    }
 
-      let enhancedQuery = '';
-      enhancedQuery += `User selected the ${focus.data.insight.insightKey} insight.\n\n`;
-      enhancedQuery += `# User query\n\n${query}`;
-      return enhancedQuery;
+    if (!selected.length) {
+      return query;
     }
 
-    Platform.assertNever(focus.data, 'Unknown agent focus');
+    selected.push(`# User query\n\n${query}`);
+    return selected.join('');
   }
 
   override async * run(initialQuery: string, options: {
@@ -552,7 +553,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     this.#functionCallCacheForFocus.set(focus, cache);
   }
 
-  #declareFunctions(context: ConversationContext<AgentFocus>): void {
+  #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
     const {parsedTrace, insightSet} = focus.data;
 
@@ -840,5 +841,38 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
       });
     }
+
+    if (!context.external) {
+      this.declareFunction<{eventKey: string}, {success: boolean}>('selectEventByKey', {
+        description:
+            'Selects the event in the flamechart for the user. If the user asks to show them something, it\'s likely a good idea to call this function.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            eventKey: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The key for the event.',
+              nullable: false,
+            }
+          },
+        },
+        displayInfoFromArgs: params => {
+          return {title: lockedString('Selecting event…'), action: `selectEventByKey('${params.eventKey}')`};
+        },
+        handler: async params => {
+          debugLog('Function call: selectEventByKey', params);
+          const event = this.#lookupEvent(params.eventKey as Trace.Types.File.SerializableKey);
+          if (!event) {
+            return {error: 'Invalid eventKey'};
+          }
+
+          const revealable = new SDK.TraceObject.RevealableEvent(event);
+          await Common.Revealer.reveal(revealable);
+          return {result: {success: true}};
+        },
+      });
+    }
   }
 }

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

@@ -116,7 +116,7 @@ export class PerformanceAnnotationsAgent extends AiAgent<AgentFocus> {
     }
 
     const focus = context.getItem();
-    if (focus.data.type !== 'call-tree') {
+    if (!focus.data.callTree) {
       throw new Error('unexpected context');
     }
 
@@ -140,7 +140,7 @@ export class PerformanceAnnotationsAgent extends AiAgent<AgentFocus> {
     }
 
     const focus = context.getItem();
-    if (focus.data.type !== 'call-tree') {
+    if (!focus.data.callTree) {
       throw new Error('unexpected context');
     }
 

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

@@ -18,7 +18,7 @@ import {
   AiAgent,
   type ContextResponse,
   ConversationContext,
-  type ConversationSuggestion,
+  type ConversationSuggestions,
   type FunctionCallHandlerResult,
   MultimodalInputType,
   type ParsedResponse,
@@ -182,7 +182,7 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
     throw new Error('Not implemented');
   }
 
-  override async getSuggestions(): Promise<[ConversationSuggestion, ...ConversationSuggestion[]]|undefined> {
+  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
     const layoutProps = await this.#node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.#node.id);
 
     if (!layoutProps) {