[AI] Use full trace agent for insights AI feature

This replaces the original insights agent with the new, "full" trace
agent, and removes the support code that is no longer needed.

* when providing context to the agent, instead of directly including
  the insights summary in the initial query via enhanceQuery, denote
  that the user just clicked a specific insight. The trace summary will
  have some details about the insight, and the agent reliably calls
  getInsightDetails to learn more.
* ensure createBounds never produces invalid bounds.
* stop giving so much data to BaseInsightComponent to support the AI
  feature. Instead, just give it an agent focus directly.

Bug: 442392194
Change-Id: Id3e03a7f66b672684c1e21d39dcc65aa919bd346
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6914156
Commit-Queue: Paul Irish <paulirish@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

Author: Connor Clark

front_end/core/host/AidaClient.ts

@@ -131,10 +131,12 @@ export enum ClientFeature {
   CHROME_FILE_AGENT = 9,
   // Chrome AI Patch Agent.
   CHROME_PATCH_AGENT = 12,
-  // Chrome AI Assistance Performance Insights Agent.
-  CHROME_PERFORMANCE_INSIGHTS_AGENT = 13,
   // Chrome AI Assistance Performance Agent.
   CHROME_PERFORMANCE_FULL_AGENT = 24,
+
+  // Removed features (for reference).
+  // Chrome AI Assistance Performance Insights Agent.
+  // CHROME_PERFORMANCE_INSIGHTS_AGENT = 13,
 }
 
 export enum UserTier {

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

@@ -18,7 +18,7 @@ export class PerformanceTraceFormatter {
   constructor(
       formatters: UnitFormatters, focus: TimelineUtils.AIContext.AgentFocus,
       eventsSerializer: Trace.EventsSerializer.EventsSerializer) {
-    if (focus.data.type !== 'full') {
+    if (focus.data.type !== 'full' && focus.data.type !== 'insight') {
       throw new Error('unexpected agent focus');
     }
 

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -283,7 +283,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
         flavor: TimelineUtils.AIContext.AgentFocus,
         createContext: () => {
           // @ts-expect-error: don't need any data.
-          const context = AiAssistanceModel.PerformanceTraceContext.fromInsight(null, null, null);
+          const context = AiAssistanceModel.PerformanceTraceContext.fromInsight(null, new Map());
           sinon.stub(AiAssistanceModel.PerformanceTraceContext.prototype, 'getSuggestions')
               .returns(Promise.resolve([{title: 'test suggestion'}]));
           return context;

front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -12,6 +12,7 @@ import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {md} from '../utils/Helpers.js';
+import * as Utils from '../utils/utils.js';
 
 import type {BaseInsightComponent} from './insights/BaseInsightComponent.js';
 import {shouldRenderForCategory} from './insights/Helpers.js';
@@ -426,6 +427,12 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
     const renderInsightComponent = (insightData: CategorizedInsightData): Lit.TemplateResult => {
       const {componentClass, model} = insightData;
+      if (!this.#data.parsedTrace || !this.#data.insights || !this.#data.traceMetadata) {
+        return html``;
+      }
+
+      const agentFocus = Utils.AIContext.AgentFocus.fromInsight(
+          this.#data.parsedTrace, this.#data.insights, this.#data.traceMetadata, model);
       // clang-format off
       return html`<div>
         <${componentClass.litTagName}
@@ -438,7 +445,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
           .model=${model}
           .bounds=${insightSet.bounds}
           .insightSetKey=${insightSetKey}
-          .parsedTrace=${this.#data.parsedTrace}
+          .agentFocus=${agentFocus}
           .fieldMetrics=${fieldMetrics}>
         </${componentClass.litTagName}>
       </div>`;

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -212,7 +212,6 @@ describeWithEnvironment('BaseInsightComponent', () => {
   });
 
   describe('Ask AI Insights', () => {
-    const FAKE_PARSED_TRACE = {} as unknown as Trace.Handlers.Types.ParsedTrace;
     const FAKE_LCP_MODEL = {
       insightKey: 'LCPBreakdown',
       strings: {},
@@ -231,7 +230,6 @@ describeWithEnvironment('BaseInsightComponent', () => {
       component.selected = true;
       component.model = FAKE_LCP_MODEL;
       // We don't need a real trace for these tests.
-      component.parsedTrace = FAKE_PARSED_TRACE;
       component.bounds = FAKE_INSIGHT_SET_BOUNDS;
       renderElementIntoDOM(component);
 
@@ -315,6 +313,8 @@ describeWithEnvironment('BaseInsightComponent', () => {
     });
 
     it('sets the context when the user clicks the button', async () => {
+      const focus =
+          new Utils.AIContext.AgentFocus({type: 'insight'} as unknown as Utils.AIContext.AgentFocusDataInsight);
       updateHostConfig({
         aidaAvailability: {
           enabled: true,
@@ -325,6 +325,7 @@ describeWithEnvironment('BaseInsightComponent', () => {
         }
       });
       const component = await renderComponent({insightHasAISupport: true});
+      component.agentFocus = focus;
       assert.isOk(component.shadowRoot);
       const button = component.shadowRoot.querySelector('devtools-button[data-insights-ask-ai]');
       assert.isOk(button);
@@ -343,9 +344,11 @@ describeWithEnvironment('BaseInsightComponent', () => {
     });
 
     it('clears the active context when it gets toggled shut', async () => {
-      const focus = {data: {type: 'insight'}} as unknown as Utils.AIContext.AgentFocus;
+      const focus =
+          new Utils.AIContext.AgentFocus({type: 'insight'} as unknown as Utils.AIContext.AgentFocusDataInsight);
       UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, focus);
       const component = await renderComponent({insightHasAISupport: true});
+      component.agentFocus = focus;
       const header = component.shadowRoot?.querySelector('header');
       assert.isOk(header);
       dispatchClickEvent(header);

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -86,7 +86,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
 
   #selected = false;
   #model: T|null = null;
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
+  #agentFocus: Utils.AIContext.AgentFocus|null = null;
   #fieldMetrics: Trace.Insights.Common.CrUXFieldMetricResults|null = null;
 
   get model(): T|null {
@@ -158,8 +158,8 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
-  set parsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
-    this.#parsedTrace = parsedTrace;
+  set agentFocus(agentFocus: Utils.AIContext.AgentFocus) {
+    this.#agentFocus = agentFocus;
   }
 
   set fieldMetrics(fieldMetrics: Trace.Insights.Common.CrUXFieldMetricResults) {
@@ -349,7 +349,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
   }
 
   #askAIButtonClick(): void {
-    if (!this.#model || !this.#parsedTrace || !this.data.bounds) {
+    if (!this.#agentFocus) {
       return;
     }
 
@@ -359,8 +359,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
       return;
     }
 
-    const context = Utils.AIContext.AgentFocus.fromInsight(this.#parsedTrace, this.#model, this.data.bounds);
-    UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, context);
+    UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, this.#agentFocus);
 
     // Trigger the AI Assistance panel to open.
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction(actionId);

front_end/panels/timeline/components/insights/BaseInsightComponent.test.ts

@@ -19,11 +19,12 @@ interface AgentFocusDataCallTree {
   callTree: AICallTree;
 }
 
-interface AgentFocusDataInsight {
+export interface AgentFocusDataInsight {
   type: 'insight';
   parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  insightSet: Trace.Insights.Types.InsightSet|null;
+  traceMetadata: Trace.Types.File.MetaData;
   insight: Trace.Insights.Types.InsightModel;
-  insightSetBounds: Trace.Types.Timing.TraceWindowMicro;
 }
 
 type AgentFocusData = AgentFocusDataCallTree|AgentFocusDataInsight|AgentFocusDataFull;
@@ -43,13 +44,16 @@ export class AgentFocus {
   }
 
   static fromInsight(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, insight: Trace.Insights.Types.InsightModel,
-      insightSetBounds: Trace.Types.Timing.TraceWindowMicro): AgentFocus {
+      parsedTrace: Trace.Handlers.Types.ParsedTrace, insights: Trace.Insights.Types.TraceInsightSets,
+      traceMetadata: Trace.Types.File.MetaData, insight: Trace.Insights.Types.InsightModel): AgentFocus {
+    // Currently only support a single insight set. Pick the first one with a navigation.
+    const insightSet = [...insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
     return new AgentFocus({
       type: 'insight',
       parsedTrace,
+      insightSet,
+      traceMetadata,
       insight,
-      insightSetBounds,
     });
   }
 

front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -2,119 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Trace from '../../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import {getFirstOrError, getInsightOrError, getInsightSetOrError} from '../../../testing/InsightHelpers.js';
+import {getFirstOrError, getInsightSetOrError} from '../../../testing/InsightHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 
 import * as Utils from './utils.js';
 
 describeWithEnvironment('AIQueries', () => {
-  it('can query for network events relevant to the given insight', async function() {
+  it('can query for the longest tasks', async function() {
     const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     assert.isOk(insights);
-    const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
-    const insightSet = getInsightSetOrError(insights, firstNav);
-    const insight = getInsightOrError('LCPBreakdown', insights, firstNav);
-
-    const requests = Utils.InsightAIContext.AIQueries.networkRequests(insight, insightSet.bounds, parsedTrace);
-    const expected = [
-      'https://web.dev/',
-      'https://web.dev/css/next.css?v=013a61aa',
-      'https://web.dev/fonts/material-icons/regular.woff2',
-      'https://web.dev/fonts/google-sans/regular/latin.woff2',
-      'https://web.dev/fonts/google-sans/bold/latin.woff2',
-      'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/zrBPJq27O4Hs8haszVnK.svg',
-      'https://web-dev.imgix.net/image/kheDArv5csY6rvQUJDbWRscckLr1/4i7JstVZvgTFk9dxCe4a.svg',
-      'https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/3164So5aDk7vKTkhx9Vm.png?auto=format&w=1140',
-      'https://web.dev/js/app.js?v=fedf5fbe',
-      'https://web.dev/js/home.js?v=73b0d143',
-      'https://web.dev/js/index-7e29abb6.js',
-      'https://web.dev/js/index-578d2db7.js',
-      'https://web.dev/js/index-f45448ab.js',
-      'https://web.dev/js/actions-f0eb5c8e.js',
-    ];
-    assert.deepEqual(requests.map(r => r.args.data.url), expected);
-  });
-
-  it('correctly calculates the bounds when there are multiple navigations', async function() {
-    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'multiple-navigations-render-blocking.json.gz');
-    assert.isOk(insights);
-    const [firstNav, secondNav] = parsedTrace.Meta.mainFrameNavigations;
-    assert.isOk(firstNav);
-    assert.isOk(secondNav);
-    const insightSet1 = getInsightSetOrError(insights, firstNav);
-    const insightSet2 = getInsightSetOrError(insights, secondNav);
-    const lcpNav1 = getInsightOrError('LCPBreakdown', insights, firstNav);
-    const lcpNav2 = getInsightOrError('LCPBreakdown', insights, secondNav);
 
-    const requests1 = Utils.InsightAIContext.AIQueries.networkRequests(lcpNav1, insightSet1.bounds, parsedTrace);
-    const requests2 = Utils.InsightAIContext.AIQueries.networkRequests(lcpNav2, insightSet2.bounds, parsedTrace);
-
-    // Both navigations load the same page, so we expect the set of URLs to be the same.
-    const expected = ['http://localhost:8080/render-blocking', 'http://localhost:8080/render-blocking/script.js'];
-    assert.deepEqual(requests1.map(r => r.args.data.url), expected);
-    assert.deepEqual(requests2.map(r => r.args.data.url), expected);
-
-    // But we can check that the requests are not equal to each other,
-    // and that we got the right ones for each insight.
-    // For the first Insight requests, they all happen before the second navigation.
-    assert.isTrue(requests1.every(req => req.ts < secondNav.ts));
-    // For the second Insight requests, they all happen after second navigation
-    assert.isTrue(requests2.every(req => req.ts > secondNav.ts));
-  });
-
-  it('can query for main thread activity for an insight', async function() {
-    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'lcp-discovery-delay.json.gz');
-    assert.isOk(insights);
     const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
     const insightSet = getInsightSetOrError(insights, firstNav);
-    const insight = getInsightOrError('LCPBreakdown', insights, firstNav);
-    const activity =
-        Utils.InsightAIContext.AIQueries.mainThreadActivityForInsight(insight, insightSet.bounds, parsedTrace);
-    assert.instanceOf(activity, Utils.AICallTree.AICallTree);
-    // There are a few smaller tasks but for this test we want to make sure we
-    // found the long task of ~999ms.
-    const rootNode = activity.rootNode;
-    const children = Array.from(rootNode.children().values()).map(n => n.event);
-    const longTaskDuration = Trace.Types.Timing.Micro(999544);
-    assert.isTrue(children.some(event => event.dur === longTaskDuration));
-  });
-
-  it('limits the time bounds for DocumentRequestLatency to the timestamp of the document request', async function() {
-    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    assert.isOk(insights);
-    const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
-    const insightSet = getInsightSetOrError(insights, firstNav);
-    const insight = getInsightOrError('DocumentLatency', insights, firstNav);
-
-    const requests = Utils.InsightAIContext.AIQueries.networkRequests(insight, insightSet.bounds, parsedTrace);
-    assert.isOk(insight.data?.documentRequest);
-    // The only relevant request is the document request itself.
-    assert.deepEqual(requests, [insight.data.documentRequest]);
-  });
-
-  it('limits the trace bounds for an INP insight to just the interaction', async function() {
-    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
-    assert.isOk(insights);
-    const insightSet = getInsightSetOrError(insights);
-    const insight = getInsightOrError('INPBreakdown', insights);
-
-    const activity =
-        Utils.InsightAIContext.AIQueries.mainThreadActivityForInsight(insight, insightSet.bounds, parsedTrace);
-    assert.isOk(activity);
-
-    // These are the first 3 nodes that we expect. The structure of the
-    // timeline under the long keydown interaction are:
-    // X YYYYYYYYYYYYYYY
-    // A ..............
-    // Where X = Node 1 below, A = Node 2 below, and YYYYYYY is the long
-    // interaction = Node 3 below.
-    const expectedToContain = `# Call tree:
+    const tasks =
+        Utils.InsightAIContext.AIQueries.longestTasks(firstNav.args.data?.navigationId, insightSet.bounds, parsedTrace);
+    assert.isOk(tasks);
 
-1;Task;1.1;0.2;;3
-2;Task;143.2;0.1;;4
-3;Event: keydown;1;1;;`;
-    assert.include(activity.serialize(), expectedToContain);
+    const expected = [33, 21, 16];
+    assert.deepEqual(tasks.map(task => Math.round(task.rootNode.totalTime)), expected);
   });
 });