[AI] Persist conversation for external PERFORMANCE_ANALYZE

Persists the conversation data for the new external performance request
type. The TimelinePanel stores the state, and invalidates it whenever a
new trace is recorded.

This enables this flow:

* MCP client records a trace
* MCP client asks a performance question via performance tool, AIDA
  agent perhaps asks a follow up question
* Developer responds (ex: "let's look at LCP")
* MCP client calls the performance tool again, just passing the next
  prompt (ex: "let's look at LCP"), and the same AIDA conversation agent
  is used (so all the context is still there)
* etc... Developer can continue asking performance questions about the
  trace, and the MCP client will continue calling the performance tool
  to communicate with the same AIDA agent

Bug: 425270067
Change-Id: I6376f61c9d17f1e6f47947c4aca821dde9f76b05
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6885880
Auto-Submit: Connor Clark <cjamcl@chromium.org>
Commit-Queue: Connor Clark <cjamcl@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>

Author: Connor Clark

front_end/entrypoints/main/MainImpl.ts

@@ -1109,15 +1109,8 @@ export async function handleExternalRequestGenerator(input: ExternalRequestInput
       });
     }
     case 'PERFORMANCE_ANALYZE': {
-      const AiAssistanceModel = await import('../../models/ai_assistance/ai_assistance.js');
       const TimelinePanel = await import('../../panels/timeline/timeline.js');
-      const traceModel = TimelinePanel.TimelinePanel.TimelinePanel.instance().model;
-      const conversationHandler = AiAssistanceModel.ConversationHandler.instance();
-      return await conversationHandler.handleExternalRequest({
-        conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_FULL,
-        prompt: input.args.prompt,
-        traceModel,
-      });
+      return await TimelinePanel.TimelinePanel.TimelinePanel.handleExternalAnalyzeRequest(input.args.prompt);
     }
     case 'NETWORK_DEBUGGER': {
       const AiAssistanceModel = await import('../../models/ai_assistance/ai_assistance.js');

front_end/models/ai_assistance/ConversationHandler.ts

@@ -50,10 +50,17 @@ export interface ExternalPerformanceInsightsRequestParameters {
   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 = {
@@ -210,7 +217,7 @@ export class ConversationHandler {
           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 +242,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 +304,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,
@@ -306,28 +323,21 @@ export class ConversationHandler {
     if ('error' in focusOrError) {
       return this.#generateErrorResponse(focusOrError.error);
     }
-    return this.#doExternalConversation({
+    return this.#createAndDoExternalConversation({
       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,7 +348,7 @@ export class ConversationHandler {
     if (!request) {
       return this.#generateErrorResponse(`Can't find request with the given selector ${requestUrl}`);
     }
-    return this.#doExternalConversation({
+    return this.#createAndDoExternalConversation({
       conversationType: ConversationType.NETWORK,
       aiAgent: networkAgent,
       prompt,

front_end/panels/timeline/TimelinePanel.ts

@@ -392,6 +392,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private traceLoadStart!: Trace.Types.Timing.Milli|null;
 
   #traceEngineModel: Trace.TraceModel.Model;
+  #externalAIConversationData: AiAssistanceModel.ExternalPerformanceAIConversationData|null = null;
   #sourceMapsResolver: Utils.SourceMapsResolver.SourceMapsResolver|null = null;
   #entityMapper: Utils.EntityMapper.EntityMapper|null = null;
   #onSourceMapsNodeNamesResolvedBound = this.#onSourceMapsNodeNamesResolved.bind(this);
@@ -929,6 +930,40 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return this.#traceEngineModel;
   }
 
+  getOrCreateExternalAIConversationData(): AiAssistanceModel.ExternalPerformanceAIConversationData {
+    if (!this.#externalAIConversationData) {
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance();
+      const focus = Utils.AIContext.getPerformanceAgentFocusFromModel(this.model);
+      if (!focus) {
+        throw new Error('could not create performance agent focus');
+      }
+
+      const agent = conversationHandler.createAgent(AiAssistanceModel.ConversationType.PERFORMANCE_FULL);
+      const conversation = new AiAssistanceModel.Conversation(
+          AiAssistanceModel.ConversationType.PERFORMANCE_FULL,
+          [],
+          agent.id,
+          /* isReadOnly */ true,
+          /* isExternal */ true,
+      );
+
+      const selected = new AiAssistanceModel.PerformanceTraceContext(focus);
+
+      this.#externalAIConversationData = {
+        conversationHandler,
+        conversation,
+        agent,
+        selected,
+      };
+    }
+
+    return this.#externalAIConversationData;
+  }
+
+  invalidateExternalAIConversationData(): void {
+    this.#externalAIConversationData = null;
+  }
+
   /**
    * NOTE: this method only exists to enable some layout tests to be migrated to the new engine.
    * DO NOT use this method within DevTools. It is marked as deprecated so
@@ -1142,33 +1177,17 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   // Currently for debugging purposes only.
   #onClickAskAIButton(): void {
-    const traceIndex = this.#activeTraceIndex();
-    if (traceIndex === null) {
-      return;
-    }
-
-    const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
-    if (parsedTrace === null) {
-      return;
-    }
-
-    const insights = this.#traceEngineModel.traceInsights(traceIndex);
-    if (insights === null) {
-      return;
-    }
-
-    const traceMetadata = this.#traceEngineModel.metadata(traceIndex);
-    if (traceMetadata === null) {
+    const actionId = 'drjones.performance-panel-full-context';
+    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction(actionId)) {
       return;
     }
 
-    const actionId = 'drjones.performance-panel-full-context';
-    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction(actionId)) {
+    const focus = Utils.AIContext.getPerformanceAgentFocusFromModel(this.#traceEngineModel);
+    if (!focus) {
       return;
     }
 
-    const context = Utils.AIContext.AgentFocus.full(parsedTrace, insights, traceMetadata);
-    UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, context);
+    UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, focus);
 
     // Trigger the AI Assistance panel to open.
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction(actionId);
@@ -3000,6 +3019,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       type: AiAssistanceModel.ExternalRequestResponseType.NOTIFICATION,
       message: 'Recording performance trace',
     };
+    TimelinePanel.instance().invalidateExternalAIConversationData();
     void VisualLogging.logFunctionCall('timeline.record-reload', 'external');
     Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.externalRequestReceived)});
 
@@ -3096,6 +3116,16 @@ ${responseTextForPassedInsights}`;
       panelInstance.recordReload();
     });
   }
+
+  static async handleExternalAnalyzeRequest(prompt: string):
+      Promise<AsyncGenerator<AiAssistanceModel.ExternalRequestResponse, AiAssistanceModel.ExternalRequestResponse>> {
+    const data = TimelinePanel.instance().getOrCreateExternalAIConversationData();
+    return await data.conversationHandler.handleExternalRequest({
+      conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_FULL,
+      prompt,
+      data,
+    });
+  }
 }
 
 export const enum State {

front_end/panels/timeline/utils/AIContext.ts

@@ -67,3 +67,14 @@ export class AgentFocus {
     return this.#data;
   }
 }
+
+export function getPerformanceAgentFocusFromModel(model: Trace.TraceModel.Model): AgentFocus|null {
+  const parsedTrace = model.parsedTrace();
+  const insights = model.traceInsights();
+  const traceMetadata = model.metadata();
+  if (!insights || !parsedTrace || !traceMetadata) {
+    return null;
+  }
+
+  return AgentFocus.full(parsedTrace, insights, traceMetadata);
+}

front_end/services/tracing/ExternalRequests.ts

@@ -5,7 +5,7 @@
 import * as Trace from '../../models/trace/trace.js';
 import * as TimelineUtils from '../../panels/timeline/utils/utils.js';
 
-type InsightResponse = {
+type PerformanceAgentResponse = {
   focus: TimelineUtils.AIContext.AgentFocus,
 }|{error: string};
 
@@ -18,7 +18,7 @@ type InsightResponse = {
  *   some extra input data to figure it out.
  */
 export async function getInsightAgentFocusToDebug(
-    model: Trace.TraceModel.Model, insightTitle: string): Promise<InsightResponse> {
+    model: Trace.TraceModel.Model, insightTitle: string): Promise<PerformanceAgentResponse> {
   const parsedTrace = model.parsedTrace();
   const latestInsights = model.traceInsights();
   if (!latestInsights || !parsedTrace) {
@@ -54,18 +54,3 @@ export async function getInsightAgentFocusToDebug(
   const focus = TimelineUtils.AIContext.AgentFocus.fromInsight(parsedTrace, insight, insights.bounds);
   return {focus};
 }
-
-export async function getPerformanceAgentFocusToDebug(model: Trace.TraceModel.Model): Promise<InsightResponse> {
-  const parsedTrace = model.parsedTrace();
-  const insights = model.traceInsights();
-  const traceMetadata = model.metadata();
-  if (!insights || !parsedTrace || !traceMetadata) {
-    return {
-      error:
-          'No trace has been recorded, so we cannot analyze the performance. Must run the devtools_performance_run_trace tool first.',
-    };
-  }
-
-  const focus = TimelineUtils.AIContext.AgentFocus.full(parsedTrace, insights, traceMetadata);
-  return {focus};
-}