chrome-devtools-frontend 1.0.1598808 → 1.0.1601661

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

@@ -8,13 +8,13 @@ import '../../../ui/kit/kit.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 type * as Platform from '../../../core/platform/platform.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 type * as Protocol from '../../../generated/protocol.js';
 import type {
-  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, StylePropertiesAiWidget} from
-  '../../../models/ai_assistance/agents/AiAgent.js';
+  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LcpBreakdownAiWidget, PerformanceTraceAiWidget,
+  StylePropertiesAiWidget} 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 Marked from '../../../third_party/marked/marked.js';
@@ -28,7 +28,10 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../../elements/elements.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
+import * as TimelineInsights from '../../timeline/components/insights/insights.js';
+import * as Timeline from '../../timeline/timeline.js';
 import * as TimelineUtils from '../../timeline/utils/utils.js';
+import {PanelUtils} from '../../utils/utils.js';
 
 import chatMessageStyles from './chatMessage.css.js';
 import {walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
@@ -174,7 +177,11 @@ const UIStringsNotTranslate = {
   /**
    * @description Title for the button that takes the user into other DevTools panels to reveal items the AI references.
    */
-  reveal: 'Reveal'
+  reveal: 'Reveal',
+  /**
+   * @description Title used for revealing the performance trace.
+   */
+  revealTrace: 'Reveal trace'
 } as const;
 
 export interface Step {
@@ -522,8 +529,8 @@ function renderWalkthroughSidebarButton(
 /**
  * Responsible for rendering the AI Walkthrough UI. This can take different
  * shapes and involve different parts depending on if the walkthrough is
- * inlined, expanded, or if we have side-effect steps that need the user to
- * view them.
+ * inlined, expanded, or if we have side-effect steps. In cases where the
+ * walkthrough is closed, side-effect steps are rendered inline in the chat.
  */
 function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.LitTemplate {
   const lastStep = steps.at(-1);
@@ -537,11 +544,17 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   const openWalkThroughSidebarButton =
       !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, steps) : Lit.nothing;
 
-  // If there are side-effect steps, and the walkthrough is not open, we render
-  // those inline so that the user can see them and approve them.
-  // Note: this is a temporary approach and needs more UX discussion; b/487921578
+  // A message's walkthrough is considered expanded if the walkthrough is
+  // open and it is specifically targeting this message. This is necessary
+  // because the walkthrough state is shared across all messages in the chat.
+  const isExpanded = (input.walkthrough.isExpanded && input.walkthrough.activeMessage === input.message);
+
+  // When a side-effect step is present, it's shown in the main chat UI if the
+  // walkthrough is closed, allowing the user to approve it without opening
+  // the walkthrough. If the walkthrough is already open, the side-effect
+  // step is displayed within the walkthrough instead.
   // clang-format off
-  const sideEffectStepsUI = !input.walkthrough.isInlined && !input.walkthrough.isExpanded && sideEffectSteps.length > 0 ? sideEffectSteps.map(step => html`
+  const sideEffectStepsUI = !isExpanded && sideEffectSteps.length > 0 ? sideEffectSteps.map(step => html`
     <div class="side-effect-container">
       ${renderStep({
          step,
@@ -552,11 +565,6 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
     </div> `) : Lit.nothing;
   // clang-format on
 
-  // If the walkthrough is inlined (narrow width screens), render it here.
-  // Note that we force it open if there is a side-effect.
-
-  const isExpanded = (input.walkthrough.isExpanded && input.walkthrough.activeMessage === input.message) ||
-      steps.some(s => s.requestApproval);
   // clang-format off
   const walkthroughInline = input.walkthrough.isInlined ? html`
     <div class="walkthrough-container">
@@ -574,8 +582,8 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
 
   return html`
     ${openWalkThroughSidebarButton}
-    ${sideEffectStepsUI}
     ${walkthroughInline}
+    ${sideEffectStepsUI}
   `;
   // clang-format on
 }
@@ -644,8 +652,10 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
 }
 
 interface WidgetMakerResponse {
-  renderedWidget: Lit.LitTemplate;
+  // Can be null if the widget is only used to add the Reveal CTA.
+  renderedWidget: Lit.LitTemplate|null;
   revealable: unknown;
+  customRevealTitle?: Platform.UIString.LocalizedString;
 }
 
 const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
@@ -720,6 +730,26 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
   return {renderedWidget, revealable: domNodeForId};
 }
 
+async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise<WidgetMakerResponse|null> {
+  const insight = widgetData.data.lcpData;
+  if (!insight) {
+    return null;
+  }
+
+  const widgetConfig = UI.Widget.widgetConfig(TimelineInsights.LCPBreakdown.LCPBreakdown, {
+    model: insight,
+    minimal: true,
+  });
+
+  // clang-format off
+  const renderedWidget = html`<devtools-widget
+    class="lcp-breakdown-widget"
+    .widgetConfig=${widgetConfig}></devtools-widget>`;
+  // clang-format on
+
+  return {renderedWidget, revealable: new TimelineUtils.Helpers.RevealableInsight(insight)};
+}
+
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
   if (response === null) {
     return Lit.nothing;
@@ -732,24 +762,64 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     void Common.Revealer.reveal(response?.revealable);
   }
 
+  const classes = Lit.Directives.classMap({
+    'widget-and-revealer-container': true,
+    'revealer-only': response.renderedWidget === null,
+  });
   // clang-format off
   return html`
-    <div class="widget-and-revealer-container">
-      <div class="widget-content-container">
-        ${response.renderedWidget}
-      </div>
+    <div class=${classes}>
+      ${response.renderedWidget ? html`
+        <div class="widget-content-container">
+          ${response.renderedWidget}
+        </div>` : Lit.nothing
+      }
       <div class="widget-reveal-container">
         <devtools-button class="widget-reveal"
           .iconName=${'tab-move'}
           .variant=${Buttons.Button.Variant.TEXT}
           @click=${onReveal}
-        >${lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
+        >${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
       </div>
     </div>
     `;
   // clang-format on
 }
 
+async function makePerformanceTraceWidget(widgetData: PerformanceTraceAiWidget): Promise<WidgetMakerResponse|null> {
+  return {
+    renderedWidget: null,
+    revealable: new Timeline.TimelinePanel.ParsedTraceRevealable(widgetData.data.parsedTrace),
+    customRevealTitle: lockedString(UIStringsNotTranslate.revealTrace),
+  };
+}
+
+function renderNetworkRequestPreview(networkRequest: NonNullable<DomTreeAiWidget['data']['networkRequest']>):
+    Lit.TemplateResult {
+  const filename = networkRequest.url.split('/').pop() || networkRequest.url;
+  const size = i18n.ByteUtilities.bytesToString(networkRequest.size);
+  const resourceType = Common.ResourceType.resourceTypes[networkRequest.resourceType];
+  const {iconName, color} = PanelUtils.iconDataForResourceType(resourceType);
+
+  return html`
+    <div class="network-request-preview">
+      <div class="network-request-header">
+        <div class="network-request-icon">
+          ${
+      resourceType.isImage() ? html`<img src=${networkRequest.imageUrl ?? networkRequest.url} alt=${filename} />` :
+                               html`<devtools-icon name=${iconName} style=${Lit.Directives.styleMap({
+                                 color: color ?? ''
+                               })}></devtools-icon>`}
+        </div>
+        <div class="network-request-details">
+          <div class="network-request-name" title=${networkRequest.url}>${filename}</div>
+          <div class="network-request-size">${size}</div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMakerResponse|null> {
   const root = widgetData.data.root;
   if (!(root instanceof SDK.DOMModel.DOMNodeSnapshot)) {
@@ -768,12 +838,17 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
     wrap: true,
   });
 
+  const networkRequest = widgetData.data.networkRequest;
+
   // clang-format off
-  const widget = html`<devtools-widget class="dom-tree-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  const renderedWidget = html`
+    ${networkRequest ? renderNetworkRequestPreview(networkRequest) : Lit.nothing}
+    <devtools-widget class="dom-tree-widget" .widgetConfig=${widgetConfig}></devtools-widget>
+  `;
   // clang-format on
 
   return {
-    renderedWidget: widget,
+    renderedWidget,
     revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
   };
 }
@@ -802,14 +877,27 @@ async function renderWidgets(
   }
   const ui = await Promise.all(widgets.map(async widgetData => {
     let response: WidgetMakerResponse|null = null;
-    if (widgetData.name === 'COMPUTED_STYLES') {
-      response = await makeComputedStyleWidget(widgetData);
-    } else if (widgetData.name === 'CORE_VITALS') {
-      response = await makeCoreVitalsWidget(widgetData);
-    } else if (widgetData.name === 'STYLE_PROPERTIES') {
-      response = await makeStylePropertiesWidget(widgetData);
-    } else if (widgetData.name === 'DOM_TREE') {
-      response = await makeDomTreeWidget(widgetData);
+    switch (widgetData.name) {
+      case 'COMPUTED_STYLES':
+        response = await makeComputedStyleWidget(widgetData);
+        break;
+      case 'CORE_VITALS':
+        response = await makeCoreVitalsWidget(widgetData);
+        break;
+      case 'STYLE_PROPERTIES':
+        response = await makeStylePropertiesWidget(widgetData);
+        break;
+      case 'DOM_TREE':
+        response = await makeDomTreeWidget(widgetData);
+        break;
+      case 'PERFORMANCE_TRACE':
+        response = await makePerformanceTraceWidget(widgetData);
+        break;
+      case 'LCP_BREAKDOWN':
+        response = await makeLcpBreakdownWidget(widgetData);
+        break;
+      default:
+        Platform.assertNever(widgetData, 'Unknown AiWidget name');
     }
     return renderWidgetResponse(response);
   }));

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

@@ -7,6 +7,7 @@ import '../../../ui/components/spinners/spinners.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
+import * as Root from '../../../core/root/root.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
@@ -17,6 +18,7 @@ import {PatchWidget} from '../PatchWidget.js';
 import {ChatInput} from './ChatInput.js';
 import {ChatMessage, type Message, type ModelChatMessage} from './ChatMessage.js';
 import chatViewStyles from './chatView.css.js';
+import {ExportForAgentsDialog} from './ExportForAgentsDialog.js';
 
 export {ChatInput, type ImageInputData} from './ChatInput.js';
 
@@ -63,6 +65,8 @@ export interface Props {
   onCopyResponseClick: (message: ModelChatMessage) => void;
   onContextRemoved: (() => void)|null;
   onContextAdd: (() => void)|null;
+  conversationMarkdown: string;
+  onExportConversation: (() => void)|null;
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
   messages: Message[];
@@ -81,6 +85,7 @@ export interface Props {
   disclaimerText: Platform.UIString.LocalizedString;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
+  generateConversationSummary: (markdown: string) => Promise<string>;
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
     onToggle: (isOpen: boolean) => void,
@@ -94,6 +99,7 @@ interface ChatWidgetInput extends Props {
   handleScroll: (ev: Event) => void;
   handleSuggestionClick: (title: string) => void;
   handleMessageContainerRef: (el: Element|undefined) => void;
+  exportForAgentsClick: () => void;
 }
 
 const DEFAULT_VIEW: View = (input, output, target) => {
@@ -107,6 +113,9 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     sticky: !input.isReadOnly,
   });
 
+  const hasAiV2Flag = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
+  const shouldShowExportToAgent = !input.isLoading && input.messages.length > 0 && hasAiV2Flag;
+
   // clang-format off
     render(html`
       <style>${chatViewStyles}</style>
@@ -130,6 +139,15 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   }
                 })
               )}
+              ${shouldShowExportToAgent ? html`
+                <devtools-button
+                  class="export-for-agents-button"
+                  .jslogContext=${'ai-export-for-agents'}
+                  .variant=${Buttons.Button.Variant.TEXT}
+                  .iconName=${'copy'}
+                  @click=${input.exportForAgentsClick}
+                >Export for agents</devtools-button>
+              ` : nothing}
               ${input.isLoading ? nothing : widget(PatchWidget, {
                   changeSummary: input.changeSummary ?? '',
                   changeManager: input.changeManager,
@@ -233,6 +251,7 @@ export class ChatView extends HTMLElement {
    */
   #isProgrammaticScroll = false;
   #view: View;
+  #cachedSummary: {markdown: string, summary: string}|null = null;
 
   constructor(props: Props, view = DEFAULT_VIEW) {
     super();
@@ -346,6 +365,30 @@ export class ChatView extends HTMLElement {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
+  async #getSummary(): Promise<string> {
+    if (this.#cachedSummary?.markdown === this.#props.conversationMarkdown) {
+      return this.#cachedSummary.summary;
+    }
+    try {
+      const summary = await this.#props.generateConversationSummary(this.#props.conversationMarkdown);
+      this.#cachedSummary = {markdown: this.#props.conversationMarkdown, summary};
+      return summary;
+    } catch (err) {
+      console.error(err);
+      return 'Failed to generate summary.';
+    }
+  }
+
+  async #exportForAgentsClick(): Promise<void> {
+    const summaryPromise = this.#getSummary();
+
+    void ExportForAgentsDialog.show({
+      promptText: summaryPromise,
+      markdownText: this.#props.conversationMarkdown,
+      onConversationSaveAs: this.#props.onExportConversation ?? (async () => {}),
+    });
+  }
+
   #render(): void {
     this.#view(
         {
@@ -353,6 +396,7 @@ export class ChatView extends HTMLElement {
           handleScroll: this.#handleScroll,
           handleSuggestionClick: this.#handleSuggestionClick,
           handleMessageContainerRef: this.#handleMessageContainerRef,
+          exportForAgentsClick: this.#exportForAgentsClick.bind(this),
         },
         this.#output, this.#shadow);
   }

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

@@ -0,0 +1,240 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+import styles from './exportForAgentsDialog.css.js';
+
+const {html, render} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Title for the export for agents dialog.
+   */
+  exportForAgents: 'Export for agents',
+  /**
+   * @description Button text for copying to clipboard.
+   */
+  copyToClipboard: 'Copy to clipboard',
+  /**
+   * @description Text displayed in a toast to indicate that the content was copied to the clipboard.
+   */
+  copiedToClipboard: 'Copied to clipboard',
+  /**
+   * @description Label for the 'as prompt' radio button in the export for agents dialog.
+   */
+  asPrompt: 'As prompt',
+  /**
+   * @description Label for the 'as markdown' radio button in the export for agents dialog.
+   */
+  asMarkdown: 'As markdown',
+  /**
+   * @description Button text for saving content as a markdown file.
+   */
+  saveAsMarkdown: 'Save as…',
+  /**
+   * @description Text displayed while the summary is being generated.
+   */
+  generatingSummary: 'Generating summary…',
+  /**
+   * @description Disclaimer text for the export for agents dialog.
+   */
+  disclaimer:
+      'This is an experimental AI feature and won’t always get it right. Double check this text before pasting into another tool.',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ExportForAgentsDialog.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export const enum StateType {
+  PROMPT = 'prompt',
+  CONVERSATION = 'conversation',
+}
+
+export interface State {
+  activeType: StateType;
+  promptText: string;
+  conversationText: string;
+  isPromptLoading: boolean;
+}
+
+interface ViewInput {
+  onButtonClick: (event: Event) => void;
+  state: State;
+  onStateChange: (stateType: StateType) => void;
+  jslogContext: string;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target): void => {
+  const isPrompt = input.state.activeType === StateType.PROMPT;
+  const buttonText = isPrompt ? i18nString(UIStrings.copyToClipboard) : i18nString(UIStrings.saveAsMarkdown);
+  const exportText = isPrompt && input.state.isPromptLoading ?
+      i18nString(UIStrings.generatingSummary) :
+      (isPrompt ? input.state.promptText : input.state.conversationText);
+  // clang-format off
+  render(html`
+    <style>${styles}</style>
+    <div class="export-for-agents-dialog">
+      <header>
+        <h2 tabindex="-1">
+          ${i18nString(UIStrings.exportForAgents)}
+        </h2>
+      </header>
+      <div class="state-selection">
+        <label>
+          <input
+            type="radio"
+            value="prompt"
+            name="export-state"
+            .checked=${isPrompt}
+            @change=${() => input.onStateChange(StateType.PROMPT)}
+          >
+          ${i18nString(UIStrings.asPrompt)}
+        </label>
+        <label>
+          <input
+            type="radio"
+            value="conversation"
+            name="export-state"
+            .checked=${!isPrompt}
+            @change=${() => input.onStateChange(StateType.CONVERSATION)}
+          >
+          ${i18nString(UIStrings.asMarkdown)}
+        </label>
+      </div>
+      <main>
+        <textarea readonly .value=${exportText}></textarea>
+      </main>
+      ${isPrompt ? html`<div class="disclaimer">${i18nString(UIStrings.disclaimer)}</div>` : Lit.nothing}
+      <footer>
+        <div class="right-buttons">
+          <devtools-button
+            @click=${input.onButtonClick}
+            .jslogContext=${input.jslogContext}
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            .disabled=${isPrompt && input.state.isPromptLoading}
+          >
+            ${buttonText}
+          </devtools-button>
+        </div>
+      </footer>
+    </div>
+  `, target);
+  // clang-format on
+};
+
+export class ExportForAgentsDialog extends UI.Widget.VBox {
+  readonly #view: View;
+  readonly #dialog: UI.Dialog.Dialog;
+  #state: State;
+  #onConversationSaveAs: () => void;
+
+  constructor(
+      options: {
+        dialog: UI.Dialog.Dialog,
+        promptText: string|Promise<string>,
+        markdownText: string,
+        onConversationSaveAs: () => void,
+      },
+      view: View = DEFAULT_VIEW) {
+    super();
+    this.#dialog = options.dialog;
+    this.#state = {
+      activeType: StateType.PROMPT,
+      promptText: typeof options.promptText === 'string' ? options.promptText : '',
+      conversationText: options.markdownText,
+      isPromptLoading: typeof options.promptText !== 'string',
+    };
+    this.#onConversationSaveAs = options.onConversationSaveAs;
+    this.#view = view;
+
+    if (options.promptText instanceof Promise) {
+      void options.promptText.then(promptText => {
+        this.#state.promptText = promptText;
+        this.#state.isPromptLoading = false;
+        this.requestUpdate();
+      });
+    }
+
+    this.requestUpdate();
+  }
+
+  #onStateChange = (newState: StateType): void => {
+    this.#state.activeType = newState;
+    this.requestUpdate();
+  };
+
+  override performUpdate(): void {
+    let onButtonClick: (event: Event) => void;
+    let jslogContext = '';
+
+    switch (this.#state.activeType) {
+      case StateType.PROMPT:
+        jslogContext = 'ai-export-for-agents.copy-to-clipboard';
+        onButtonClick = (event: Event): void => {
+          event.preventDefault();
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#state.promptText);
+          Snackbars.Snackbar.Snackbar.show({
+            message: i18nString(UIStrings.copiedToClipboard),
+          });
+          this.#dialog.hide();
+        };
+        break;
+      case StateType.CONVERSATION:
+        jslogContext = 'ai-export-for-agents.save-as-markdown';
+        onButtonClick = (): void => {
+          this.#dialog.hide();
+          this.#onConversationSaveAs();
+        };
+        break;
+    }
+
+    const viewInput = {
+      onButtonClick,
+      state: this.#state,
+      onStateChange: this.#onStateChange,
+      jslogContext,
+    };
+
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+
+  static show({
+    promptText,
+    markdownText,
+    onConversationSaveAs,
+  }: {
+    promptText: string|Promise<string>,
+    markdownText: string,
+    onConversationSaveAs: () => void,
+  }): void {
+    const dialog = new UI.Dialog.Dialog();
+    dialog.setAriaLabel(i18nString(UIStrings.exportForAgents));
+
+    dialog.setOutsideClickCallback(ev => {
+      ev.consume(true);
+      dialog.hide();
+    });
+
+    dialog.addCloseButton();
+    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+    dialog.setDimmed(true);
+
+    const exportDialog = new ExportForAgentsDialog({dialog, promptText, markdownText, onConversationSaveAs});
+    exportDialog.show(dialog.contentElement);
+    // Because the Dialog sets its height based off its content, we need
+    // the Export Dialog widget to have rendered fully before we show
+    // the dialog with its contents.
+    void exportDialog.updateComplete.then(() => {
+      dialog.show();
+    });
+  }
+}

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

@@ -13,7 +13,7 @@ import * as PanelsCommon from '../../common/common.js';
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 
 const {html} = Lit.StaticHtml;
-const {ref, createRef} = Lit.Directives;
+const {until} = Lit.Directives;
 
 export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
   constructor(
@@ -27,16 +27,8 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
       if (token.href.startsWith('#node-')) {
         const nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;
 
-        const templateRef = createRef();
-        void this.#linkifyNode(nodeId, token.text).then(node => {
-          if (!templateRef.value || !node) {
-            return;
-          }
-
-          templateRef.value.textContent = '';
-          templateRef.value.append(node);
-        });
-        return html`<span ${ref(templateRef)}>${token.text}</span>`;
+        return html`<span>${
+            until(this.#linkifyNode(nodeId, token.text).then(node => node || token.text), token.text)}</span>`;
       }
 
       const event = this.lookupEvent(token.href.slice(1) as Trace.Types.File.SerializableKey);
@@ -65,7 +57,7 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
   // Taken from front_end/panels/timeline/components/insights/NodeLink.ts
   // Would be nice to move the above component to somewhere that allows the AI
   // Assistance panel to also use it.
-  async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Node|undefined> {
+  async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Lit.LitTemplate|undefined> {
     if (backendNodeId === undefined) {
       return;
     }