chrome-devtools-frontend 1.0.1605219 → 1.0.1605390

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

@@ -4,7 +4,6 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
@@ -13,9 +12,8 @@ import * as Annotations from '../../annotations/annotations.js';
 import * as Emulation from '../../emulation/emulation.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {debugLog} from '../debug.js';
-import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
 import {ExtensionScope} from '../ExtensionScope.js';
-import {AI_ASSISTANCE_CSS_CLASS_NAME, FREESTYLER_WORLD_NAME} from '../injected.js';
+import {AI_ASSISTANCE_CSS_CLASS_NAME} from '../injected.js';
 
 import {
   type AgentOptions as BaseAgentOptions,
@@ -25,12 +23,12 @@ import {
   ConversationContext,
   type ConversationSuggestions,
   type FunctionCallHandlerResult,
-  type FunctionHandlerOptions,
   type MultimodalInput,
   MultimodalInputType,
   type RequestOptions,
   ResponseType
 } from './AiAgent.js';
+import {executeJavaScriptFunction, executeJsCode, JavascriptExecutor} from './ExecuteJavascript.js';
 
 /*
 * Strings that don't need to be translated at this time.
@@ -145,51 +143,6 @@ const MULTIMODAL_ENHANCEMENT_PROMPTS: Record<MultimodalInputType, string> = {
   [MultimodalInputType.UPLOADED_IMAGE]: promptForUploadedImage + considerationsForMultimodalInputEvaluation,
 };
 
-async function executeJsCode(
-    functionDeclaration: string,
-    {throwOnSideEffect, contextNode}: {throwOnSideEffect: boolean, contextNode: SDK.DOMModel.DOMNode|null}):
-    Promise<string> {
-  if (!contextNode) {
-    throw new Error('Cannot execute JavaScript because of missing context node');
-  }
-  const target = contextNode.domModel().target();
-
-  if (!target) {
-    throw new Error('Target is not found for executing code');
-  }
-
-  const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
-  const frameId = contextNode.frameId() ?? resourceTreeModel?.mainFrame?.id;
-
-  if (!frameId) {
-    throw new Error('Main frame is not found for executing code');
-  }
-
-  const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
-  const pageAgent = target.pageAgent();
-
-  // This returns previously created world if it exists for the frame.
-  const {executionContextId} = await pageAgent.invoke_createIsolatedWorld({frameId, worldName: FREESTYLER_WORLD_NAME});
-  const executionContext = runtimeModel?.executionContext(executionContextId);
-  if (!executionContext) {
-    throw new Error('Execution context is not found for executing code');
-  }
-
-  if (executionContext.debuggerModel.selectedCallFrame()) {
-    return formatError('Cannot evaluate JavaScript because the execution is paused on a breakpoint.');
-  }
-
-  const remoteObject = await contextNode.resolveToObject(undefined, executionContextId);
-  if (!remoteObject) {
-    throw new Error('Cannot execute JavaScript because remote object cannot be resolved');
-  }
-
-  return await EvaluateAction.execute(functionDeclaration, [remoteObject], executionContext, {throwOnSideEffect});
-}
-
-const MAX_OBSERVATION_BYTE_LENGTH = 25_000;
-const OBSERVATION_TIMEOUT = 5_000;
-
 export const AI_ASSISTANCE_FILTER_REGEX = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
 
 type CreateExtensionScopeFunction = (changes: ChangeManager) => {
@@ -310,6 +263,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   }
 
   #execJs: typeof executeJsCode;
+  #javascriptExecutor: JavascriptExecutor;
 
   #changes: ChangeManager;
   #createExtensionScope: CreateExtensionScopeFunction;
@@ -326,6 +280,14 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
         opts.createExtensionScope ?? ((changes: ChangeManager) => {
           return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null, this.#currentTurnId);
         });
+    this.#javascriptExecutor = new JavascriptExecutor(
+        {
+          executionMode: this.executionMode,
+          getContextNode: () => this.#getSelectedNode(),
+          createExtensionScope: this.#createExtensionScope.bind(this),
+          changes: this.#changes,
+        },
+        this.#execJs);
 
     this.declareFunction<{
       elements: number[],
@@ -378,91 +340,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       },
     });
 
-    this.declareFunction<{
-      title: string,
-      explanation: string,
-      code: string,
-    }>('executeJavaScript', {
-      description:
-          `This function allows you to run JavaScript code on the inspected page to access the element styles and page content.
-Call this function to gather additional information or modify the page state. Call this function enough times to investigate the user request.`,
-      parameters: {
-        type: Host.AidaClient.ParametersTypes.OBJECT,
-        description: '',
-        nullable: false,
-        properties: {
-          code: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description:
-                `JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.
-
-# Instructions
-
-* To return data, define a top-level \`data\` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to \`data\`.
-* If you modify styles on an element, ALWAYS call the pre-defined global \`async setElementStyles(el: Element, styles: object)\` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.
-* **CRITICAL** Only get styles that might be relevant to the user request.
-* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.
-* **CRITICAL** Consider that \`data\` variable from the previous function calls are not available in a new function call.
-
-For example, the code to change element styles:
-
-\`\`\`
-await setElementStyles($0, {
-  color: 'blue',
-});
-\`\`\`
-
-For example, the code to get overlapping elements:
-
-\`\`\`
-const data = {
-  overlappingElements: Array.from(document.querySelectorAll('*'))
-    .filter(el => {
-      const rect = el.getBoundingClientRect();
-      const popupRect = $0.getBoundingClientRect();
-      return (
-        el !== $0 &&
-        rect.left < popupRect.right &&
-        rect.right > popupRect.left &&
-        rect.top < popupRect.bottom &&
-        rect.bottom > popupRect.top
-      );
-    })
-    .map(el => ({
-      tagName: el.tagName,
-      id: el.id,
-      className: el.className,
-      zIndex: window.getComputedStyle(el)['z-index']
-    }))
-};
-\`\`\`
-`,
-          },
-          explanation: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'Explain why you want to run this code',
-          },
-          title: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'Provide a summary of what the code does. For example, "Checking related element styles".',
-          },
-        },
-        required: ['code', 'explanation', 'title']
-      },
-      displayInfoFromArgs: params => {
-        return {
-          title: params.title,
-          thought: params.explanation,
-          action: params.code,
-        };
-      },
-      handler: async (
-          params,
-          options,
-          ) => {
-        return await this.executeAction(params.code, options);
-      },
-    });
+    this.declareFunction('executeJavaScript', executeJavaScriptFunction(this.#javascriptExecutor));
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       this.declareFunction<{
@@ -528,68 +406,6 @@ const data = {
     });
   }
 
-  async generateObservation(
-      action: string,
-      {
-        throwOnSideEffect,
-      }: {
-        throwOnSideEffect: boolean,
-      },
-      ): Promise<{
-    observation: string,
-    sideEffect: boolean,
-    canceled: boolean,
-  }> {
-    const functionDeclaration = `async function ($0) {
-  try {
-    ${action}
-    ;
-    return ((typeof data !== "undefined") ? data : undefined);
-  } catch (error) {
-    return error;
-  }
-}`;
-    try {
-      const result = await Promise.race([
-        this.#execJs(
-            functionDeclaration,
-            {
-              throwOnSideEffect,
-              contextNode: this.context?.getItem() || null,
-            },
-            ),
-        new Promise<never>((_, reject) => {
-          setTimeout(
-              () => reject(new Error('Script execution exceeded the maximum allowed time.')), OBSERVATION_TIMEOUT);
-        }),
-      ]);
-      const byteCount = Platform.StringUtilities.countWtf8Bytes(result);
-      Host.userMetrics.freestylerEvalResponseSize(byteCount);
-      if (byteCount > MAX_OBSERVATION_BYTE_LENGTH) {
-        throw new Error('Output exceeded the maximum allowed length.');
-      }
-      return {
-        observation: result,
-        sideEffect: false,
-        canceled: false,
-      };
-    } catch (error) {
-      if (error instanceof SideEffectError) {
-        return {
-          observation: error.message,
-          sideEffect: true,
-          canceled: false,
-        };
-      }
-
-      return {
-        observation: `Error: ${error.message}`,
-        sideEffect: false,
-        canceled: false,
-      };
-    }
-  }
-
   static async describeElement(element: SDK.DOMModel.DOMNode): Promise<string> {
     let output = `* Element's uid is ${element.backendNodeId()}.
 * Its selector is \`${element.simpleSelector()}\``;
@@ -742,74 +558,6 @@ const data = {
     };
   }
 
-  async executeAction(action: string, options?: FunctionHandlerOptions): Promise<FunctionCallHandlerResult<unknown>> {
-    debugLog(`Action to execute: ${action}`);
-
-    if (options?.approved === false) {
-      return {
-        error: 'Error: User denied code execution with side effects.',
-      };
-    }
-
-    if (this.executionMode === Root.Runtime.HostConfigFreestylerExecutionMode.NO_SCRIPTS) {
-      return {
-        error: 'Error: JavaScript execution is currently disabled.',
-      };
-    }
-
-    const selectedNode = this.#getSelectedNode();
-    if (!selectedNode) {
-      return {error: 'Error: no selected node found.'};
-    }
-    const target = selectedNode.domModel().target();
-    if (target.model(SDK.DebuggerModel.DebuggerModel)?.selectedCallFrame()) {
-      return {
-        error: 'Error: Cannot evaluate JavaScript because the execution is paused on a breakpoint.',
-      };
-    }
-
-    const scope = this.#createExtensionScope(this.#changes);
-    await scope.install();
-    try {
-      let throwOnSideEffect = true;
-      if (options?.approved) {
-        throwOnSideEffect = false;
-      }
-
-      const result = await this.generateObservation(action, {throwOnSideEffect});
-      debugLog(`Action result: ${JSON.stringify(result)}`);
-      if (result.sideEffect) {
-        if (this.executionMode === Root.Runtime.HostConfigFreestylerExecutionMode.SIDE_EFFECT_FREE_SCRIPTS_ONLY) {
-          return {
-            error: 'Error: JavaScript execution that modifies the page is currently disabled.',
-          };
-        }
-
-        if (options?.signal?.aborted) {
-          return {
-            error: 'Error: evaluation has been cancelled',
-          };
-        }
-
-        return {
-          requiresApproval: true,
-          description: lockedString('This code may modify page content. Continue?'),
-        };
-      }
-      if (result.canceled) {
-        return {
-          error: result.observation,
-        };
-      }
-
-      return {
-        result: result.observation,
-      };
-    } finally {
-      await scope.uninstall();
-    }
-  }
-
   async addElementAnnotation(elementId: string, annotationMessage: string):
       Promise<FunctionCallHandlerResult<unknown>> {
     if (!Annotations.AnnotationRepository.annotationsEnabled()) {

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -13,8 +13,9 @@ import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type {
-  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LcpBreakdownAiWidget, PerformanceTraceAiWidget,
-  StylePropertiesAiWidget, TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+  AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LcpBreakdownAiWidget,
+  PerformanceTraceAiWidget, StylePropertiesAiWidget,
+  TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Trace from '../../../models/trace/trace.js';
@@ -193,7 +194,15 @@ const UIStringsNotTranslate = {
   /**
    * @description Title for the performance summary widget.
    */
-  performanceSummary: 'Performance summary'
+  performanceSummary: 'Performance summary',
+  /**
+   * @description The title of the button that allows exporting the conversation for agents.
+   */
+  exportForAgents: 'Copy for your coding agent',
+  /**
+   * @description Title for the bottom up thread activity widget.
+   */
+  bottomUpTree: 'Bottom-up thread activity',
 } as const;
 
 export interface Step {
@@ -260,6 +269,7 @@ export interface RatingViewInput {
 export interface ActionViewInput {
   onReportClick: () => void;
   onCopyResponseClick: () => void;
+  onExportClick?: () => void;
   showActions: boolean;
 }
 
@@ -293,11 +303,13 @@ export interface MessageInput {
   isLoading: boolean;
   isReadOnly: boolean;
   isLastMessage: boolean;
+  isFirstMessage: boolean;
   canShowFeedbackForm: boolean;
   markdownRenderer: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void;
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
   onCopyResponseClick: (message: ModelChatMessage) => void;
+  onExportClick?: () => void;
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
     isExpanded: boolean,
@@ -309,22 +321,37 @@ export interface MessageInput {
 }
 
 export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, target: HTMLElement): void => {
+  const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
   const message = input.message;
+
   if (message.entity === ChatMessageEntity.USER) {
     const imageInput = message.imageInput && 'inlineData' in message.imageInput ?
         renderImageChatMessage(message.imageInput.inlineData) :
         Lit.nothing;
+
+    const messageClasses = Lit.Directives.classMap({
+      'chat-message': true,
+      query: true,
+      'is-last-message': input.isLastMessage,
+      'is-first-message': input.isFirstMessage,
+      'ai-v2': hasAiV2,
+    });
+
+    const userQueryWrapperClasses = Lit.Directives.classMap({
+      // Don't need to style at all unless we are on the V2 flag.
+      // Once we ship this can be removed entirely.
+      'user-query-wrapper': hasAiV2
+    });
     // clang-format off
     Lit.render(html`
       <style>${Input.textInputStyles}</style>
       <style>${chatMessageStyles}</style>
-      <section
-        class="chat-message query ${input.isLastMessage ? 'is-last-message' : ''}"
-        jslog=${VisualLogging.section('question')}
-      >
-        ${imageInput}
-        <div class="message-content">${renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
-      </section>
+      <div class=${userQueryWrapperClasses}>
+        <section class=${messageClasses} jslog=${VisualLogging.section('question')}>
+          ${imageInput}
+          <div class="message-content">${renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
+        </section>
+      </div>
     `, target);
     // clang-format on
     return;
@@ -332,48 +359,53 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
 
   const steps = message.parts.filter(part => part.type === 'step').map(part => part.step);
   const icon = AiAssistanceModel.AiUtils.getIconName();
-  const aiAssistanceV2 = Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled;
 
+  const messageClasses = Lit.Directives.classMap({
+    'chat-message': true,
+    answer: true,
+    'is-last-message': input.isLastMessage,
+    'is-first-message': input.isFirstMessage,
+    'ai-v2': hasAiV2,
+  });
   // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
     <style>${chatMessageStyles}</style>
-    <section
-      class="chat-message answer ${input.isLastMessage ? 'is-last-message' : ''}"
-      jslog=${VisualLogging.section('answer')}
-    >
-      ${aiAssistanceV2 ? Lit.nothing : html`
+    <section class=${messageClasses} jslog=${VisualLogging.section('answer')}>
+      ${hasAiV2 ? Lit.nothing : html`
         <div class="message-info">
           <devtools-icon name=${icon}></devtools-icon>
           <div class="message-name">
             <h2>${AiAssistanceModel.AiUtils.isGeminiBranding() ? lockedString(UIStringsNotTranslate.gemini) : lockedString(UIStringsNotTranslate.ai)}</h2>
           </div>
         </div>`}
-      ${aiAssistanceV2 ? renderWalkthroughUI(input, steps) : Lit.nothing}
-      ${Lit.Directives.repeat(
-        message.parts,
-        (_, index) => index,
-        (part, index) => {
-          const isLastPart = index === message.parts.length - 1;
-          if (part.type === 'answer') {
-            return html`<p>${renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
-          }
-          if (part.type === 'widget') {
-            return html`${Lit.Directives.until(renderWidgets(part.widgets, {wrapperClass: 'main-widgets-wrapper'}))}`;
-          }
-          if (!aiAssistanceV2 && part.type === 'step') {
-            return renderStep({
-              step: part.step,
-              isLoading: input.isLoading,
-              markdownRenderer: input.markdownRenderer,
-              isLast: isLastPart,
-            });
-          }
-          return Lit.nothing;
-        },
-      )}
-      ${renderError(message)}
-      ${input.showActions ? renderActions(input, output) : Lit.nothing}
+      ${hasAiV2 ? renderWalkthroughUI(input, steps) : Lit.nothing}
+      <div class="answer-body-wrapper">
+        ${Lit.Directives.repeat(
+          message.parts,
+          (_, index) => index,
+          (part, index) => {
+            const isLastPart = index === message.parts.length - 1;
+            if (part.type === 'answer') {
+              return html`<p>${renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
+            }
+            if (part.type === 'widget') {
+              return html`${Lit.Directives.until(renderWidgets(part.widgets, {wrapperClass: 'main-widgets-wrapper'}))}`;
+            }
+            if (!hasAiV2 && part.type === 'step') {
+              return renderStep({
+                step: part.step,
+                isLoading: input.isLoading,
+                markdownRenderer: input.markdownRenderer,
+                isLast: isLastPart,
+              });
+            }
+            return Lit.nothing;
+          },
+        )}
+        ${renderError(message)}
+        ${input.showActions ? renderActions(input, output) : Lit.nothing}
+      </div>
     </section>
   `, target);
   // clang-format on
@@ -739,10 +771,9 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   };
 }
 
-async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
+async function makeCoreWebVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
   // clang-format off
-  const renderedWidget = html`<devtools-widget
-      class="core-vitals-widget" ${widget(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data})}>
+  const renderedWidget = html`<devtools-widget class="core-vitals-widget" ${widget(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data, skipBottomBorder: true})}>
   </devtools-widget>`;
   // clang-format on
 
@@ -802,6 +833,33 @@ async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise
   };
 }
 
+async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget): Promise<WidgetMakerResponse|null> {
+  const bottomUpRootNode = AiAssistanceModel.AIQueries.AIQueries.mainThreadActivityBottomUp(
+      widgetData.data.bounds, widgetData.data.parsedTrace);
+  if (!bottomUpRootNode) {
+    return null;
+  }
+  const events = bottomUpRootNode.events;
+  const startTime = Trace.Helpers.Timing.microToMilli(widgetData.data.bounds.min);
+  const endTime = Trace.Helpers.Timing.microToMilli(widgetData.data.bounds.max);
+
+  const renderedWidget = html`<devtools-widget
+      class="bottom-up-timeline-tree-widget"
+      ${widget(Timeline.TimelineTreeView.BottomUpTimelineTreeView, {
+    selectedEvents: events,
+    parsedTrace: widgetData.data.parsedTrace,
+    startTime,
+    endTime,
+    compactMode: true,
+  })}></devtools-widget>`;
+
+  return {
+    renderedWidget,
+    revealable: new TimelineUtils.Helpers.RevealableBottomUpProfile(widgetData.data.bounds),
+    title: lockedString(UIStringsNotTranslate.bottomUpTree)
+  };
+}
+
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
   if (response === null) {
     return Lit.nothing;
@@ -911,6 +969,7 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
       rootDOMNode: root,
       visibleWidth: 400,
       wrap: true,
+      maxRows: 10,
     })}></devtools-widget>
   `;
   // clang-format on
@@ -951,7 +1010,7 @@ async function renderWidgets(
         response = await makeComputedStyleWidget(widgetData);
         break;
       case 'CORE_VITALS':
-        response = await makeCoreVitalsWidget(widgetData);
+        response = await makeCoreWebVitalsWidget(widgetData);
         break;
       case 'STYLE_PROPERTIES':
         response = await makeStylePropertiesWidget(widgetData);
@@ -968,6 +1027,9 @@ async function renderWidgets(
       case 'TIMELINE_RANGE_SUMMARY':
         response = await makeTimelineRangeSummaryWidget(widgetData);
         break;
+      case 'BOTTOM_UP_TREE':
+        response = await makeBottomUpTimelineTreeWidget(widgetData);
+        break;
       default:
         Platform.assertNever(widgetData, 'Unknown AiWidget name');
     }
@@ -1066,9 +1128,14 @@ function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitT
 }
 
 function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.LitTemplate {
+  const aiAssistanceV2 = Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled;
+  const rowClasses = Lit.Directives.classMap({
+    'ai-assistance-feedback-row': true,
+    'not-v2': !aiAssistanceV2,
+  });
   // clang-format off
   return html`
-    <div class="ai-assistance-feedback-row">
+    <div class=${rowClasses}>
       <div class="action-buttons">
         ${input.showRateButtons ? html`
           <devtools-button
@@ -1111,7 +1178,8 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
           }
           @click=${input.onReportClick}
         ></devtools-button>
-        <div class="vertical-separator"></div>
+        ${aiAssistanceV2 ? Lit.nothing : html`
+          <div class="vertical-separator"></div>
           <devtools-button
             .data=${{
               variant: Buttons.Button.Variant.ICON,
@@ -1122,6 +1190,18 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
             } as Buttons.Button.ButtonData}
             aria-label=${lockedString(UIStringsNotTranslate.copyResponse)}
             @click=${input.onCopyResponseClick}></devtools-button>
+        `}
+        ${input.onExportClick && aiAssistanceV2 && input.isLastMessage ? html`
+        <div class="vertical-separator"></div>
+          <devtools-button
+            class="export-for-agents-button"
+            .jslogContext=${'ai-export-for-agents'}
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            .iconName=${'copy'}
+            @click=${input.onExportClick}
+          >${lockedString(UIStringsNotTranslate.exportForAgents)}</devtools-button>
+          <div class="vertical-separator"></div>
+        ` : Lit.nothing}
       </div>
       ${input.suggestions ? html`<div class="suggestions-container">
         <div class="scroll-button-container left hidden" ${ref(element => { output.suggestionsLeftScrollButtonContainer = element; } )}>
@@ -1225,11 +1305,13 @@ export class ChatMessage extends UI.Widget.Widget {
   isReadOnly = false;
   canShowFeedbackForm = false;
   isLastMessage = false;
+  isFirstMessage = false;
   markdownRenderer!: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void = () => {};
   onFeedbackSubmit:
       (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void = () => {};
   onCopyResponseClick: (message: ModelChatMessage) => void = () => {};
+  onExportClick: () => void = () => {};
   walkthrough: MessageInput['walkthrough'] = {
     onOpen: () => {},
     onToggle: () => {},
@@ -1272,6 +1354,7 @@ export class ChatMessage extends UI.Widget.Widget {
           canShowFeedbackForm: this.canShowFeedbackForm,
           markdownRenderer: this.markdownRenderer,
           isLastMessage: this.isLastMessage,
+          isFirstMessage: this.isFirstMessage,
           onSuggestionClick: this.onSuggestionClick,
           onRatingClick: this.#handleRateClick.bind(this),
           onReportClick: () => UIHelpers.openInNewTab(REPORT_URL),
@@ -1280,6 +1363,7 @@ export class ChatMessage extends UI.Widget.Widget {
               this.onCopyResponseClick(this.message);
             }
           },
+          onExportClick: this.onExportClick,
           scrollSuggestionsScrollContainer: this.#scrollSuggestionsScrollContainer.bind(this),
           onSuggestionsScrollOrResize: this.#handleSuggestionsScrollOrResize.bind(this),
           onSubmit: this.#handleSubmit.bind(this),
@@ -1436,7 +1520,7 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
             widget(Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget, {
               maxRows: 10,
               model: {
-                selectedEvents: thirdPartyTree.selectedEvents() ?? null,
+                selectedEvents: thirdPartyTree.selectedEvents ?? null,
                 parsedTrace,
                 entityMapper: thirdPartyTree.entityMapper(),
               },