chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/models/ai_assistance/AiHistoryStorage.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import {SnapshotTester} from '../../testing/SnapshotTester.js';
 
 import * as AiAssistance from './ai_assistance.js';
 
@@ -334,6 +335,7 @@ describe('AiHistoryStorage', () => {
     await storage.upsertImage(serializedImage1);
     await storage.upsertImage(serializedImage2);
     await storage.upsertHistoryEntry(agent4);
+    const historyDeletedPromise = storage.once('AiHistoryDeleted' as AiAssistance.Events.HISTORY_DELETED);
     await storage.deleteAll();
     assert.deepEqual(
         storage.getHistory(),
@@ -343,6 +345,7 @@ describe('AiHistoryStorage', () => {
         storage.getImageHistory(),
         [],
     );
+    await historyDeletedPromise;
   });
 
   it('should limit the amount of stored images', async () => {
@@ -508,9 +511,8 @@ describe('AiHistoryStorage', () => {
         assert.lengthOf(imageHistory, 1);
         const historyWithoutImages = storage.getHistory();
         assert.lengthOf(historyWithoutImages, 2);
-        const conversationFromHistory = historyWithoutImages.map(item => {
-          return new AiAssistance.Conversation(item.type, item.history, item.id, true);
-        });
+        const conversationFromHistory =
+            historyWithoutImages.map(item => AiAssistance.Conversation.fromSerializedConversation(item));
         assert.lengthOf(conversationFromHistory, 2);
         assert.deepEqual(conversationFromHistory[0].history, [{
                            type: AiAssistance.ResponseType.USER_QUERY,
@@ -537,4 +539,81 @@ describe('AiHistoryStorage', () => {
       });
     });
   });
+
+  describe('getConversationMarkdown', () => {
+    let snapshotTester: SnapshotTester;
+    before(async () => {
+      snapshotTester = new SnapshotTester(import.meta);
+      await snapshotTester.load();
+    });
+
+    after(async () => {
+      await snapshotTester.finish();
+    });
+
+    it('should generate markdown from a conversation', function() {
+      const fakeTime = new Date('2024-01-01T00:00:00.000Z');
+      const clock = sinon.useFakeTimers(fakeTime);
+
+      const history: AiAssistance.ResponseData[] = [
+        {
+          type: AiAssistance.ResponseType.USER_QUERY,
+          query: 'What is the color of the sky?',
+        },
+        {
+          type: AiAssistance.ResponseType.CONTEXT,
+          title: 'Analyzing context',
+          details: [
+            {title: 'Detail 1', text: 'Some detail'},
+            {title: 'Detail 2', text: 'const a = 1;', codeLang: 'js'},
+          ],
+        },
+        {
+          type: AiAssistance.ResponseType.TITLE,
+          title: 'Thinking about it',
+        },
+        {
+          type: AiAssistance.ResponseType.THOUGHT,
+          thought: 'The user is asking about colors.',
+        },
+        {
+          type: AiAssistance.ResponseType.ACTION,
+          code: 'console.log("blue")',
+          output: 'blue',
+          canceled: false,
+        },
+        {
+          type: AiAssistance.ResponseType.ACTION,
+          code: 'console.log("red")',
+          output: 'Error: User denied code execution with side effects',
+          canceled: true,
+        },
+        {
+          type: AiAssistance.ResponseType.ACTION,
+          code: 'console.log("no output")',
+          canceled: false,
+        },
+        {
+          type: AiAssistance.ResponseType.ANSWER,
+          text: 'The sky is blue.',
+          complete: true,
+        },
+        {
+          type: AiAssistance.ResponseType.USER_QUERY,
+          query: 'And what about this image?',
+          imageInput: {inlineData: {data: 'test', mimeType: 'image/png'}},
+        },
+        {
+          type: AiAssistance.ResponseType.ANSWER,
+          text: 'This image contains a red apple.',
+          complete: true,
+        },
+      ];
+      const conversation = new AiAssistance.Conversation(AiAssistance.ConversationType.STYLING, history);
+      const markdown = conversation.getConversationMarkdown();
+
+      snapshotTester.assert(this, markdown);
+      clock.restore();
+    });
+  });
 });

package/front_end/models/ai_assistance/AiHistoryStorage.ts

@@ -5,7 +5,7 @@
 
 import * as Common from '../../core/common/common.js';
 
-import {type ResponseData, ResponseType} from './agents/AiAgent.js';
+import {type ContextDetail, type ResponseData, ResponseType, type SerializedResponseData} from './agents/AiAgent.js';
 
 const MAX_TITLE_LENGTH = 80;
 
@@ -13,8 +13,9 @@ export const enum ConversationType {
   STYLING = 'freestyler',
   FILE = 'drjones-file',
   NETWORK = 'drjones-network-request',
-  PERFORMANCE = 'drjones-performance',
+  PERFORMANCE_CALL_TREE = 'drjones-performance',
   PERFORMANCE_INSIGHT = 'performance-insight',
+  PERFORMANCE_FULL = 'drjones-performance-full',
 }
 
 export const NOT_FOUND_IMAGE_DATA = '';
@@ -22,7 +23,7 @@ export const NOT_FOUND_IMAGE_DATA = '';
 export interface SerializedConversation {
   id: string;
   type: ConversationType;
-  history: ResponseData[];
+  history: SerializedResponseData[];
   isExternal: boolean;
 }
 
@@ -43,6 +44,15 @@ export class Conversation {
   readonly history: ResponseData[];
   #isExternal: boolean;
 
+  static generateContextDetailsMarkdown(details: ContextDetail[]): string {
+    const detailsMarkdown: string[] = [];
+    for (const detail of details) {
+      const text = `\`\`\`\`${detail.codeLang || ''}\n${detail.text.trim()}\n\`\`\`\``;
+      detailsMarkdown.push(`**${detail.title}:**\n${text}`);
+    }
+    return detailsMarkdown.join('\n\n');
+  }
+
   constructor(
       type: ConversationType, data: ResponseData[] = [], id: string = crypto.randomUUID(), isReadOnly = true,
       isExternal = false) {
@@ -94,11 +104,67 @@ export class Conversation {
     return historyWithoutImages;
   }
 
+  getConversationMarkdown(): string {
+    const contentParts: string[] = [];
+    contentParts.push(
+        '# Exported Chat from Chrome DevTools AI Assistance\n\n' +
+            `**Export Timestamp (UTC):** ${new Date().toISOString()}\n\n` +
+            '---',
+    );
+    for (const item of this.history) {
+      switch (item.type) {
+        case ResponseType.USER_QUERY: {
+          contentParts.push(`## User\n\n${item.query}`);
+          if (item.imageInput) {
+            contentParts.push('User attached an image');
+          }
+          contentParts.push('## AI');
+          break;
+        }
+        case ResponseType.CONTEXT: {
+          contentParts.push(`### ${item.title}`);
+          if (item.details && item.details.length > 0) {
+            contentParts.push(Conversation.generateContextDetailsMarkdown(item.details));
+          }
+          break;
+        }
+        case ResponseType.TITLE: {
+          contentParts.push(`### ${item.title}`);
+          break;
+        }
+        case ResponseType.THOUGHT: {
+          contentParts.push(`${item.thought}`);
+          break;
+        }
+        case ResponseType.ACTION: {
+          // We want to export only actions with output field
+          if (!item.output) {
+            break;
+          }
+          if (item.code) {
+            contentParts.push(`**Code executed:**\n\`\`\`\n${item.code.trim()}\n\`\`\``);
+          }
+          contentParts.push(`**Data returned:**\n\`\`\`\n${item.output}\n\`\`\``);
+          break;
+        }
+        case ResponseType.ANSWER: {
+          if (item.complete) {
+            contentParts.push(`### Answer\n\n${item.text.trim()}`);
+          }
+          break;
+        }
+      }
+    }
+    return contentParts.join('\n\n');
+  }
+
   archiveConversation(): void {
     this.#isReadOnly = true;
   }
 
   async addHistoryItem(item: ResponseData): Promise<void> {
+    this.history.push(item);
+    await AiHistoryStorage.instance().upsertHistoryEntry(this.serialize());
     if (item.type === ResponseType.USER_QUERY) {
       if (item.imageId && item.imageInput && 'inlineData' in item.imageInput) {
         const inlineData = item.imageInput.inlineData;
@@ -106,8 +172,6 @@ export class Conversation {
             {id: item.imageId, data: inlineData.data, mimeType: inlineData.mimeType});
       }
     }
-    this.history.push(item);
-    await AiHistoryStorage.instance().upsertHistoryEntry(this.serialize());
   }
 
   serialize(): SerializedConversation {
@@ -117,25 +181,49 @@ export class Conversation {
         if (item.type === ResponseType.USER_QUERY) {
           return {...item, imageInput: undefined};
         }
+        // Remove the `confirm()`-function because `structuredClone()` throws on functions
+        if (item.type === ResponseType.SIDE_EFFECT) {
+          return {...item, confirm: undefined};
+        }
         return item;
       }),
       type: this.type,
       isExternal: this.#isExternal,
     };
   }
+
+  static fromSerializedConversation(serializedConversation: SerializedConversation): Conversation {
+    const history = serializedConversation.history.map(entry => {
+      if (entry.type === ResponseType.SIDE_EFFECT) {
+        return {...entry, confirm: () => {}};
+      }
+      return entry;
+    });
+    return new Conversation(
+        serializedConversation.type, history, serializedConversation.id, true, serializedConversation.isExternal);
+  }
 }
 
 let instance: AiHistoryStorage|null = null;
 
 const DEFAULT_MAX_STORAGE_SIZE = 50 * 1024 * 1024;
 
-export class AiHistoryStorage {
+export const enum Events {
+  HISTORY_DELETED = 'AiHistoryDeleted',
+}
+
+export interface EventTypes {
+  [Events.HISTORY_DELETED]: void;
+}
+
+export class AiHistoryStorage extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #historySetting: Common.Settings.Setting<SerializedConversation[]>;
   #imageHistorySettings: Common.Settings.Setting<SerializedImage[]>;
   #mutex = new Common.Mutex.Mutex();
   #maxStorageSize: number;
 
   constructor(maxStorageSize = DEFAULT_MAX_STORAGE_SIZE) {
+    super();
     this.#historySetting = Common.Settings.Settings.instance().createSetting('ai-assistance-history-entries', []);
     this.#imageHistorySettings = Common.Settings.Settings.instance().createSetting(
         'ai-assistance-history-images',
@@ -229,6 +317,7 @@ export class AiHistoryStorage {
       this.#imageHistorySettings.set([]);
     } finally {
       release();
+      this.dispatchEventToListeners(Events.HISTORY_DELETED);
     }
   }
 

package/front_end/models/ai_assistance/AiUtils.ts

@@ -22,7 +22,7 @@ const UIStrings = {
    */
   offline: 'This feature is only available with an active internet connection.',
   /**
-   *@description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
+   * @description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
    */
   notAvailableInIncognitoMode: 'AI assistance is not available in Incognito mode or Guest mode.',
 } as const;

package/front_end/models/ai_assistance/ConversationHandler.test.ts

@@ -0,0 +1,355 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as Trace from '../../models/trace/trace.js';
+import * as AiAssistancePanel from '../../panels/ai_assistance/ai_assistance.js';
+import * as Timeline from '../../panels/timeline/timeline.js';
+import {
+  createAiAssistancePanel,
+  createNetworkRequest,
+  mockAidaClient,
+  openHistoryContextMenu
+} from '../../testing/AiAssistanceHelpers.js';
+import {createTarget, registerNoopActions, updateHostConfig} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
+import {TraceLoader} from '../../testing/TraceLoader.js';
+import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+const {urlString} = Platform.DevToolsPath;
+
+describeWithMockConnection('ConversationHandler', () => {
+  describe('handleExternalRequest', () => {
+    const explanation = 'I need more information';
+    let performSearchStub: sinon.SinonStub;
+
+    beforeEach(async () => {
+      AiAssistanceModel.ConversationHandler.removeInstance();  // maybe move out
+      registerNoopActions([
+        'elements.toggle-element-search', 'timeline.record-reload', 'timeline.toggle-recording',
+        'timeline.show-history', 'components.collect-garbage'
+      ]);
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+      updateHostConfig({
+        devToolsFreestyler: {
+          enabled: true,
+
+        },
+        devToolsAiAssistanceNetworkAgent: {
+          enabled: true,
+        }
+      });
+
+      const target = createTarget();
+      performSearchStub = sinon.stub(target.domAgent(), 'invoke_performSearch')
+                              .resolves({searchId: 'uniqueId', resultCount: 0, getError: () => undefined});
+    });
+
+    describe('can be blocked', () => {
+      it('by a setting', async () => {
+        Common.Settings.moduleSetting('ai-assistance-enabled').set(false);
+        const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+          aidaClient: mockAidaClient([[{explanation}]]),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+        });
+        const generator = await conversationHandler.handleExternalRequest({
+          prompt: 'Please help me debug this problem',
+          conversationType: AiAssistanceModel.ConversationType.STYLING,
+        });
+        const response = await generator.next();
+        assert.strictEqual(response.value.type, 'error');
+        assert.strictEqual(
+            response.value.message,
+            'For AI features to be available, you need to enable AI assistance in DevTools settings.');
+      });
+
+      it('by feature availability', async () => {
+        const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+          aidaClient: mockAidaClient([[{explanation}]]),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED,
+        });
+        const generator = await conversationHandler.handleExternalRequest({
+          prompt: 'Please help me debug this problem',
+          conversationType: AiAssistanceModel.ConversationType.STYLING,
+        });
+        const response = await generator.next();
+        assert.strictEqual(response.value.type, 'error');
+        assert.strictEqual(
+            response.value.message,
+            'This feature is only available when you sign into Chrome with your Google account.');
+      });
+
+      it('by user age', async () => {
+        updateHostConfig({
+          aidaAvailability: {
+            blockedByAge: true,
+          },
+          devToolsFreestyler: {
+            enabled: true,
+          },
+        });
+        const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+          aidaClient: mockAidaClient([[{explanation}]]),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+        });
+        const generator = await conversationHandler.handleExternalRequest({
+          prompt: 'Please help me debug this problem',
+          conversationType: AiAssistanceModel.ConversationType.STYLING
+        });
+        const response = await generator.next();
+        assert.strictEqual(response.value.type, 'error');
+        assert.strictEqual(
+            response.value.message, 'This feature is only available to users who are 18 years of age or older.');
+      });
+    });
+
+    it('returns an explanation for styling assistance requests', async () => {
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+        aidaClient: mockAidaClient([[{explanation}]]),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      });
+      const snackbarShowStub = sinon.stub(Snackbars.Snackbar.Snackbar, 'show');
+      const generator = await conversationHandler.handleExternalRequest(
+          {prompt: 'Please help me debug this problem', conversationType: AiAssistanceModel.ConversationType.STYLING});
+      const response = await generator.next();
+      assert.strictEqual(response.value.message, explanation);
+      sinon.assert.calledOnceWithExactly(snackbarShowStub, {message: 'DevTools received an external request'});
+    });
+
+    it('handles styling assistance requests which contain a selector', async () => {
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+        aidaClient: mockAidaClient([[{explanation}]]),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      });
+      const generator = await conversationHandler.handleExternalRequest({
+        prompt: 'Please help me debug this problem',
+        conversationType: AiAssistanceModel.ConversationType.STYLING,
+        selector: 'h1'
+      });
+      const response = await generator.next();
+      assert.strictEqual(response.value.message, explanation);
+      sinon.assert.calledOnce(performSearchStub);
+      assert.strictEqual(performSearchStub.getCall(0).args[0].query, 'h1');
+    });
+
+    it('returns an error if no answer could be generated', async () => {
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+        aidaClient: mockAidaClient([
+          [{
+            functionCalls: [{
+              name: 'executeJavaScript',
+              args: {code: '$0.style.backgroundColor = \'red\';'},
+            }],
+            explanation: '',
+          }],
+        ]),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      });
+      const generator = await conversationHandler.handleExternalRequest(
+          {prompt: 'Please help me debug this problem', conversationType: AiAssistanceModel.ConversationType.STYLING});
+      const response = await generator.next();
+      assert.strictEqual(response.value.type, 'error');
+      assert.strictEqual(response.value.message, 'Something went wrong. No answer was generated.');
+    });
+
+    it('persists external conversations to history', async () => {
+      const aidaClient = mockAidaClient([[{explanation}]]);
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+        aidaClient,
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      });
+      const {view} = await createAiAssistancePanel({aidaClient});
+      const generator = await conversationHandler.handleExternalRequest(
+          {prompt: 'Please help me debug this problem', conversationType: AiAssistanceModel.ConversationType.STYLING});
+      await generator.next();
+      const {contextMenu, id} = openHistoryContextMenu(view.input, '[External] Please help me debug this problem');
+      assert.isDefined(id);
+      contextMenu.invokeHandler(id);
+      assert.isTrue((await view.nextInput).isReadOnly);
+      assert.deepEqual(view.input.messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          imageInput: undefined,
+          text: 'Please help me debug this problem',
+        },
+        {
+          answer: explanation,
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
+    });
+
+    it('can switch contexts', async () => {
+      const steps = [
+        {
+          contextDetails: [
+            {
+              text: 'Request URL: https://a.test\n\nRequest headers:\ncontent-type: bar1',
+              title: 'Request',
+            },
+            {
+              text: 'Response Status: 200 \n\nResponse headers:\ncontent-type: bar2\nx-forwarded-for: bar3',
+              title: 'Response',
+            },
+            {
+              text:
+                  'Queued at (timestamp): 0 μs\nStarted at (timestamp): 0 μs\nConnection start (stalled) (duration): -\nDuration (duration): -',
+              title: 'Timing',
+            },
+            {
+              text: '- URL: https://a.test',
+              title: 'Request initiator chain',
+            },
+          ],
+          isLoading: false,
+          sideEffect: undefined,
+          title: 'Analyzing network data',
+        },
+      ] as AiAssistancePanel.Step[];
+
+      await createNetworkPanelForMockConnection();
+      updateHostConfig({
+        devToolsFreestyler: {
+          enabled: true,
+        },
+      });
+      const networkRequest = createNetworkRequest({
+        url: urlString`https://a.test`,
+      });
+      UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+      const aidaClient = mockAidaClient([[{explanation: 'test'}], [{explanation: 'test2'}], [{explanation: 'test3'}]]);
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+        aidaClient,
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      });
+      const {panel, view} = await createAiAssistancePanel({aidaClient});
+
+      panel.handleAction('drjones.network-floating-button');
+      (await view.nextInput).onTextSubmit('User question to DrJones?');
+      assert.deepEqual((await view.nextInput).messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'User question to DrJones?',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps,
+        },
+      ]);
+
+      const generator = await conversationHandler.handleExternalRequest(
+          {prompt: 'Please help me debug this problem', conversationType: AiAssistanceModel.ConversationType.STYLING});
+      const response = await generator.next();
+      assert.strictEqual(response.value.message, 'test2');
+
+      view.input.onTextSubmit('Follow-up question to DrJones?');
+      assert.deepEqual((await view.nextInput).messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'User question to DrJones?',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps,
+        },
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'Follow-up question to DrJones?',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test3',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps,
+        },
+      ]);
+    });
+
+    it('returns an explanation for network assistance requests', async () => {
+      await createNetworkPanelForMockConnection();
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+        aidaClient: mockAidaClient([[{explanation}]]),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      });
+      const snackbarShowStub = sinon.stub(Snackbars.Snackbar.Snackbar, 'show');
+
+      const request = createNetworkRequest();
+      const networkManager = sinon.createStubInstance(SDK.NetworkManager.NetworkManager, {
+        requestForURL: request,
+      });
+      sinon.stub(SDK.TargetManager.TargetManager.instance(), 'models').returns([networkManager]);
+
+      const generator = await conversationHandler.handleExternalRequest({
+        prompt: 'Please help me debug this problem',
+        conversationType: AiAssistanceModel.ConversationType.NETWORK,
+        requestUrl: 'https://localhost:8080/'
+      });
+      let response = await generator.next();
+      assert.strictEqual(response.value.message, 'Analyzing network data');
+      response = await generator.next();
+      assert.strictEqual(response.value.message, explanation);
+      sinon.assert.calledOnceWithExactly(snackbarShowStub, {message: 'DevTools received an external request'});
+    });
+
+    it('handles performance insight requests with an insight title', async function() {
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+        aidaClient: mockAidaClient([[{explanation}]]),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      });
+
+      // Create a timeline panel that has a trace imported with insights.
+      const events = await TraceLoader.rawEvents(this, 'web-dev-with-commit.json.gz');
+      const traceModel = Trace.TraceModel.Model.createWithAllHandlers();
+      await traceModel.parse(events);
+      Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, isNode: false, traceModel});
+
+      const generator = await conversationHandler.handleExternalRequest({
+        prompt: 'Please help me debug this problem',
+        conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT,
+        insightTitle: 'LCP breakdown',
+        traceModel,
+      });
+      let response = await generator.next();
+      assert.strictEqual(response.value.message, 'Analyzing insight: LCP breakdown');
+      response = await generator.next();
+      assert.strictEqual(response.value.message, explanation);
+    });
+
+    it('errors for performance insight requests with no insightTitle', async () => {
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance({
+        aidaClient: mockAidaClient([[{explanation}]]),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      });
+      const generator = await conversationHandler.handleExternalRequest({
+        prompt: 'Please help me debug this problem',
+        conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT
+      } as AiAssistanceModel.ExternalPerformanceInsightsRequestParameters);
+      const response = await generator.next();
+      assert.strictEqual(response.value.type, 'error');
+      assert.strictEqual(
+          response.value.message, 'The insightTitle parameter is required for debugging a Performance Insight.');
+    });
+  });
+});