chrome-devtools-frontend 1.0.1605219 → 1.0.1606789

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

@@ -0,0 +1,88 @@
+// 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 SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import type * as Marked from '../../../third_party/marked/marked.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as PanelsCommon from '../../common/common.js';
+
+import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
+
+const {html} = Lit.StaticHtml;
+const {until} = Lit.Directives;
+
+export class AccessibilityAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
+  constructor(
+      private mainFrameId = '',
+  ) {
+    super();
+  }
+
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (token.type === 'link' && token.href.startsWith('#')) {
+      if (token.href.startsWith('#path-')) {
+        const path = token.href.replace('#path-', '');
+        return html`<span>${
+            until(this.#linkifyPath(path, token.text).then(node => node || token.text), token.text)}</span>`;
+      }
+
+      let nodeId = undefined;
+      if (token.href.startsWith('#node-')) {
+        nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;
+      } else if (token.href.startsWith('#')) {
+        nodeId = Number(token.href.replace('#', '')) as Protocol.DOM.BackendNodeId;
+      }
+
+      if (nodeId) {
+        return html`<span>${
+            until(this.#linkifyNode(nodeId, token.text).then(node => node || token.text), token.text)}</span>`;
+      }
+    }
+
+    return super.templateForToken(token);
+  }
+
+  async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Lit.LitTemplate|undefined> {
+    if (backendNodeId === undefined) {
+      return;
+    }
+
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
+    const node = domNodesMap?.get(backendNodeId);
+    if (!node) {
+      return;
+    }
+
+    if (node.frameId() !== this.mainFrameId) {
+      return;
+    }
+
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+
+  async #linkifyPath(path: string, label: string): Promise<Lit.LitTemplate|undefined> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const nodeId = await domModel.pushNodeByPathToFrontend(path);
+    if (!nodeId) {
+      return;
+    }
+    const node = domModel.nodeForId(nodeId);
+    if (!node) {
+      return;
+    }
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+}

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';
@@ -44,6 +45,7 @@ const {widget} = UI.Widget;
 
 const REPORT_URL = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
 const SCROLL_ROUNDING_OFFSET = 1;
+const MAX_NUM_LINES_IN_CODEBLOCK = 11;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -193,7 +195,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 +270,7 @@ export interface RatingViewInput {
 export interface ActionViewInput {
   onReportClick: () => void;
   onCopyResponseClick: () => void;
+  onExportClick?: () => void;
   showActions: boolean;
 }
 
@@ -293,11 +304,14 @@ 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;
+  changeSummary?: string;
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
     isExpanded: boolean,
@@ -309,22 +323,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 +361,62 @@ 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.isLastMessage && hasAiV2 && !input.isLoading && input.changeSummary ? html`
+          <devtools-code-block
+            .code=${input.changeSummary}
+            .codeLang=${'css'}
+            .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
+            .displayNotice=${true}
+            class="ai-css-change"
+          ></devtools-code-block>
+        ` : Lit.nothing}
+        ${input.showActions ? renderActions(input, output) : Lit.nothing}
+      </div>
     </section>
   `, target);
   // clang-format on
@@ -439,6 +482,7 @@ function renderStepCode(step: Step): Lit.LitTemplate {
       <devtools-code-block
         .code=${step.code.trim()}
         .codeLang=${'js'}
+        .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
         .displayNotice=${!Boolean(step.output)}
         .header=${codeHeadingText}
         .showCopyButton=${true}
@@ -449,6 +493,7 @@ function renderStepCode(step: Step): Lit.LitTemplate {
     <devtools-code-block
       .code=${step.output}
       .codeLang=${'js'}
+      .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
       .displayNotice=${true}
       .header=${lockedString(UIStringsNotTranslate.dataReturned)}
       .showCopyButton=${false}
@@ -481,6 +526,7 @@ function renderStepDetails({
       <devtools-code-block
         .code=${contextDetail.text}
         .codeLang=${contextDetail.codeLang || ''}
+        .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
         .displayNotice=${false}
         .header=${contextDetail.title}
         .showCopyButton=${true}
@@ -739,10 +785,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 +847,34 @@ 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,
+    maxLinkLength: 15,
+  })}></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 +984,7 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
       rootDOMNode: root,
       visibleWidth: 400,
       wrap: true,
+      maxRows: 10,
     })}></devtools-widget>
   `;
   // clang-format on
@@ -951,7 +1025,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 +1042,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 +1143,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
@@ -1097,7 +1179,7 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
             } as Buttons.Button.ButtonData}
             @click=${() => input.onRatingClick(Host.AidaClient.Rating.NEGATIVE)}
           ></devtools-button>
-          <div class="vertical-separator"></div>
+          ${aiAssistanceV2 ? Lit.nothing : html`<div class="vertical-separator"></div>`}
         `: Lit.nothing}
         <devtools-button
           .data=${
@@ -1111,7 +1193,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 +1205,17 @@ 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`
+          <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>
+          ${input.suggestions ? html`<div class="vertical-separator"></div>` : Lit.nothing}
+        ` : Lit.nothing}
       </div>
       ${input.suggestions ? html`<div class="suggestions-container">
         <div class="scroll-button-container left hidden" ${ref(element => { output.suggestionsLeftScrollButtonContainer = element; } )}>
@@ -1225,11 +1319,14 @@ 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 = () => {};
+  changeSummary?: string;
   walkthrough: MessageInput['walkthrough'] = {
     onOpen: () => {},
     onToggle: () => {},
@@ -1272,6 +1369,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 +1378,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),
@@ -1296,6 +1395,7 @@ export class ChatMessage extends UI.Widget.Widget {
           currentRating: this.#currentRating,
           isShowingFeedbackForm: this.#isShowingFeedbackForm,
           onFeedbackSubmit: this.onFeedbackSubmit,
+          changeSummary: this.changeSummary,
           walkthrough: this.walkthrough,
         },
         this.#viewOutput, this.contentElement);
@@ -1436,7 +1536,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(),
               },

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

@@ -104,9 +104,12 @@ interface ChatWidgetInput extends Props {
 }
 
 const DEFAULT_VIEW: View = (input, output, target) => {
+  const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
+
   const chatUiClasses = classMap({
     'chat-ui': true,
     gemini: AiAssistanceModel.AiUtils.isGeminiBranding(),
+    'ai-v2': hasAiV2,
   });
 
   const inputWidgetClasses = classMap({
@@ -114,8 +117,7 @@ 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;
+  const shouldShowPatchWidget = !hasAiV2 && !input.isLoading;
 
   // clang-format off
     render(html`
@@ -132,27 +134,21 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   canShowFeedbackForm: input.canShowFeedbackForm,
                   markdownRenderer: input.markdownRenderer,
                   isLastMessage: input.messages.at(-1) === message,
+                  isFirstMessage: input.messages.at(0) === message,
                   onSuggestionClick: input.handleSuggestionClick,
                   onFeedbackSubmit: input.onFeedbackSubmit,
                   onCopyResponseClick: input.onCopyResponseClick,
+                  onExportClick: input.exportForAgentsClick,
+                  changeSummary: input.changeSummary,
                   walkthrough: {
                     ...input.walkthrough,
                   }
                 })
               )}
-              ${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,
-                })}
+              ${shouldShowPatchWidget ? widget(PatchWidget, {
+                changeSummary: input.changeSummary ?? '',
+                changeManager: input.changeManager,
+              }) : nothing}
             </div>
           ` : html`
             <div class="empty-state-container">

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/spinners/spinners.js';
+
 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';
@@ -17,7 +19,7 @@ const UIStrings = {
   /**
    * @description Title for the export for agents dialog.
    */
-  exportForAgents: 'Export for agents',
+  exportForAgents: 'Copy for your coding agent',
   /**
    * @description Button text for copying to clipboard.
    */
@@ -80,6 +82,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
       i18nString(UIStrings.generatingSummary) :
       (isPrompt ? input.state.promptText : input.state.conversationText);
   // clang-format off
+
   render(html`
     <style>${styles}</style>
     <div class="export-for-agents-dialog">
@@ -111,9 +114,15 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
         </label>
       </div>
       <main>
-        <textarea readonly .value=${exportText}></textarea>
+        ${input.state.isPromptLoading ? html`
+          <span class="prompt-loading">
+            <devtools-spinner></devtools-spinner>
+            ${i18nString(UIStrings.generatingSummary)}
+          </span>
+          ` : Lit.nothing}
+        <textarea readonly .value=${input.state.isPromptLoading ? '' : exportText}></textarea>
       </main>
-      ${isPrompt ? html`<div class="disclaimer">${i18nString(UIStrings.disclaimer)}</div>` : Lit.nothing}
+      <div class="disclaimer">${i18nString(UIStrings.disclaimer)}</div>
       <footer>
         <div class="right-buttons">
           <devtools-button
@@ -156,7 +165,7 @@ export class ExportForAgentsDialog extends UI.Widget.VBox {
     this.#onConversationSaveAs = options.onConversationSaveAs;
     this.#view = view;
 
-    if (options.promptText instanceof Promise) {
+    if (typeof options.promptText !== 'string') {
       void options.promptText.then(promptText => {
         this.#state.promptText = promptText;
         this.#state.isPromptLoading = false;

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -9,10 +9,15 @@
     font-family: var(--default-font-family);
     width: 100%;
     display: flex;
-    gap: var(--sys-size-8);
     justify-content: space-between;
     align-items: center;
     margin-block: calc(-1 * var(--sys-size-3));
+    margin-top: var(--sys-size-5);
+
+    &.not-v2 {
+      /* Can be removed when AIv2 ships */
+      gap: var(--sys-size-8);
+    }
 
     .action-buttons {
       display: flex;
@@ -119,6 +124,13 @@
     }
   }
 
+  .user-query-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 var(--sys-size-5);
+    align-items: center;
+  }
+
   .chat-message {
     user-select: text;
     cursor: initial;
@@ -132,6 +144,42 @@
     overflow-wrap: anywhere;
     border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
+
+    &.query.ai-v2 {
+      width: fit-content;
+      max-width: 80%;
+      text-align: left;
+      padding: var(--sys-size-4) var(--sys-size-6);
+      font: var(--sys-typescale-body4-regular);
+      /* top left - top right - bottom right - bottom left */
+      border-radius: var(--sys-shape-corner-medium) var(--sys-shape-corner-extra-small) var(--sys-shape-corner-medium) var(--sys-shape-corner-medium);
+      background-color: var(--sys-color-surface5);
+      color: var(--sys-color-on-surface);
+
+      &.is-first-message {
+        /* So the first message doesn't bump right against the top
+         * toolbar */
+        margin-top: var(--sys-size-6);
+      }
+    }
+
+    &.ai-v2 {
+      border-bottom: none;
+    }
+
+    .ai-css-change {
+      margin: var(--sys-size-6) 0;
+    }
+
+    &.ai-v2 .answer-body-wrapper {
+      @container(min-width: 700px) {
+        /* Purposefully not using design system variables, this is a
+         * specific size to indent the content in and align it with the
+         * walkthrough CTA. */
+        padding-left: 35px;
+      }
+    }
+
     &.is-last-message {
       border-bottom: 0;
     }
@@ -395,6 +443,10 @@
 
     .widget-name {
       font: var(--sys-typescale-body4-regular);
+      max-width: 80%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; /* stop the titles going onto multiple lines */
     }
 
     .widget-reveal-container {