chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/front_end/models/web_mcp/WebMCPModel.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 type {JSONSchema7} from 'json-schema';
+
 import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
@@ -115,6 +117,18 @@ export class Tool {
     return this.#protocolTool.description;
   }
 
+  get inputSchema(): JSONSchema7 {
+    let rawSchema = this.#protocolTool.inputSchema;
+    if (typeof rawSchema === 'string') {
+      try {
+        rawSchema = JSON.parse(rawSchema);
+      } catch {
+        rawSchema = {};
+      }
+    }
+    return (typeof rawSchema === 'object' && rawSchema !== null) ? rawSchema as JSONSchema7 : {};
+  }
+
   get frame(): SDK.ResourceTreeModel.ResourceTreeFrame|undefined {
     return this.#target.deref()
                ?.model(SDK.ResourceTreeModel.ResourceTreeModel)
@@ -131,6 +145,14 @@ export class Tool {
     return this.#protocolTool.backendNodeId && target &&
         new SDK.DOMModel.DeferredDOMNode(target, this.#protocolTool.backendNodeId);
   }
+
+  async invoke(input: unknown): Promise<Protocol.WebMCP.InvokeToolResponse|undefined> {
+    return await this.#target.deref()?.webMCPAgent().invoke_invokeTool({
+      toolName: this.name,
+      frameId: this.#protocolTool.frameId,
+      input,
+    });
+  }
 }
 export interface EventTypes {
   [Events.TOOLS_ADDED]: readonly Tool[];

package/front_end/models/workspace/UISourceCode.ts

@@ -508,8 +508,8 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#disableEdit;
   }
 
-  isIgnoreListed(): boolean {
-    return IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(this);
+  isIgnoreListed(ignoreListManager: IgnoreListManager = IgnoreListManager.instance()): boolean {
+    return ignoreListManager.isUserOrSourceMapIgnoreListedUISourceCode(this);
   }
 }
 
@@ -613,8 +613,8 @@ export class UILocation {
     return this.columnNumber - other.columnNumber;
   }
 
-  isIgnoreListed(): boolean {
-    return this.uiSourceCode.isIgnoreListed();
+  isIgnoreListed(ignoreListManager: IgnoreListManager = IgnoreListManager.instance()): boolean {
+    return this.uiSourceCode.isIgnoreListed(ignoreListManager);
   }
 }
 

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -37,7 +37,7 @@ interface ViewInput {
   attributes: SDK.DOMModel.Attribute[];
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const MAX_CONTENT_LENGTH = 10000;
 
@@ -92,10 +92,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
              </ul>
            `}></devtools-tree>`,
       // clang-format on
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.section('aria-attributes')}`}}});
 };
 
-export class ARIAAttributesPane extends AccessibilitySubPane {
+export class ARIAAttributesPane extends AccessibilitySubPane<ShadowRoot> {
   readonly #view: View;
   #attributeBeingEdited: SDK.DOMModel.Attribute|null = null;
 
@@ -103,7 +103,7 @@ export class ARIAAttributesPane extends AccessibilitySubPane {
     super({
       title: i18nString(UIStrings.ariaAttributes),
       viewId: 'aria-attributes',
-      jslog: `${VisualLogging.section('aria-attributes')}`,
+      useShadowDom: 'pure',
     });
 
     this.#view = view;

package/front_end/panels/accessibility/AccessibilitySubPane.ts

@@ -11,11 +11,12 @@ import * as UI from '../../ui/legacy/legacy.js';
 import accessibilityNodeStyles from './accessibilityNode.css.js';
 import accessibilityPropertiesStyles from './accessibilityProperties.css.js';
 
-export class AccessibilitySubPane extends UI.View.SimpleView {
+export class AccessibilitySubPane<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElement> extends
+    UI.View.SimpleView<ContentTypeT> {
   axNode: SDK.AccessibilityModel.AccessibilityNode|null;
   protected nodeInternal?: SDK.DOMModel.DOMNode|null;
 
-  constructor(options: UI.View.SimpleViewOptions) {
+  constructor(options: UI.View.SimpleViewOptions<ContentTypeT>) {
     super(options);
     this.registerRequiredCSS(accessibilityPropertiesStyles);
 

package/front_end/panels/accessibility/SourceOrderView.ts

@@ -43,7 +43,7 @@ interface ViewInput {
   onShowSourceOrderChanged: (showSourceOrder: boolean) => void;
 }
 
-type View = (input: ViewInput, output: unknown, target: HTMLElement) => void;
+type View = (input: ViewInput, output: unknown, target: HTMLElement|DocumentFragment) => void;
 
 const DEFAULT_VIEW: View = (input, _output, target) => {
   function onShowSourceOrderChanged(event: Event): void {
@@ -78,11 +78,11 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       </devtools-checkbox>
       `
     }
-  `, target);
+  `, target, {container: {attributes: {jslog: `${VisualLogging.section('source-order-viewer')}`}}});
   // clang-format on
 };
 
-export class SourceOrderPane extends AccessibilitySubPane {
+export class SourceOrderPane extends AccessibilitySubPane<ShadowRoot> {
   #childCount = 0;
   #showSourceOrder: boolean|undefined = undefined;
   readonly #view: View;
@@ -91,7 +91,7 @@ export class SourceOrderPane extends AccessibilitySubPane {
     super({
       title: i18nString(UIStrings.sourceOrderViewer),
       viewId: 'source-order-viewer',
-      jslog: `${VisualLogging.section('source-order-viewer')}`,
+      useShadowDom: 'pure',
     });
     this.#view = view;
   }

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -14,5 +14,6 @@ export * as ExportForAgentsDialog from './components/ExportForAgentsDialog.js';
 export * as OptInChangeDialog from './components/OptInChangeDialog.js';
 export * as PatchWidget from './PatchWidget.js';
 export * as DisabledWidget from './components/DisabledWidget.js';
+export * as WalkthroughUtils from './components/WalkthroughUtils.js';
 export * as WalkthroughView from './components/WalkthroughView.js';
 export * as ExportConversation from './ExportConversation.js';

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

@@ -507,10 +507,23 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
 
   #textAreaRef = createRef<HTMLTextAreaElement>();
   #imageInput?: ImageInputData;
+  /**
+   * Tracks the user's position when navigating through prompt history.
+   * -1 means the user is at the newest "uncommitted" position (the current input).
+   * 0 to N-1 are indices into the recent prompts array (newest to oldest).
+   */
+  #historyOffset = -1;
+  /**
+   * Stores the text the user had typed before they started navigating through history,
+   * so it can be restored if they navigate back to the newest position.
+   */
+  #uncommittedText = '';
 
   setInputValue(text: string): void {
     if (this.#textAreaRef.value) {
       this.#textAreaRef.value.value = text;
+      // Place the cursor at the end of the new value.
+      this.#textAreaRef.value.setSelectionRange(text.length, text.length);
     }
     this.performUpdate();
   }
@@ -529,6 +542,35 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   onContextRemoved: (() => void)|null = null;
   onContextAdd: (() => void)|null = null;
 
+  /**
+   * Navigates the prompt history.
+   * @param dir direction to navigate. -1 for older, 1 for newer.
+   */
+  #navigatePromptHistory(dir: -1|1): void {
+    const prompts = AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().getRecentPrompts();
+    if (!prompts.length) {
+      return;
+    }
+
+    if (dir === -1) {
+      // ArrowUp
+      if (this.#historyOffset === -1) {
+        this.#uncommittedText = this.#textAreaRef.value?.value || '';
+      }
+      if (this.#historyOffset < prompts.length - 1) {
+        this.#historyOffset++;
+        this.setInputValue(prompts[this.#historyOffset]);
+      }
+    } else if (this.#historyOffset > 0) {
+      // ArrowDown
+      this.#historyOffset--;
+      this.setInputValue(prompts[this.#historyOffset]);
+    } else if (this.#historyOffset === 0) {
+      this.#historyOffset = -1;
+      this.setInputValue(this.#uncommittedText);
+    }
+  }
+
   async #handleTakeScreenshot(): Promise<void> {
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     if (!mainTarget) {
@@ -730,6 +772,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
         undefined;
     this.onTextSubmit(this.#textAreaRef.value?.value ?? '', imageInput, this.#imageInput?.inputType);
     this.#imageInput = undefined;
+    this.#historyOffset = -1;
+    this.#uncommittedText = '';
     this.setInputValue('');
   };
 
@@ -738,6 +782,26 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
       return;
     }
 
+    if (event.key === 'ArrowUp') {
+      const {value, selectionStart, selectionEnd} = event.target;
+      // Only navigate history if the cursor is on the first line and no text is selected.
+      if (selectionStart === selectionEnd && value.lastIndexOf('\n', selectionStart - 1) === -1) {
+        event.preventDefault();
+        this.#navigatePromptHistory(-1);
+      }
+      return;
+    }
+
+    if (event.key === 'ArrowDown') {
+      const {selectionEnd, selectionStart, value} = event.target;
+      // Only navigate history if the cursor is on the last line and no text is selected.
+      if (selectionStart === selectionEnd && value.indexOf('\n', selectionEnd) === -1) {
+        event.preventDefault();
+        this.#navigatePromptHistory(1);
+      }
+      return;
+    }
+
     // Go to a new line on Shift+Enter. On Enter, submit unless the
     // user is in IME composition.
     if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
@@ -750,6 +814,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           undefined;
       this.onTextSubmit(event.target.value, imageInput, this.#imageInput?.inputType);
       this.#imageInput = undefined;
+      this.#historyOffset = -1;
+      this.#uncommittedText = '';
       this.setInputValue('');
     }
   };

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

@@ -37,6 +37,7 @@ import * as TimelineUtils from '../../timeline/utils/utils.js';
 import {PanelUtils} from '../../utils/utils.js';
 
 import chatMessageStyles from './chatMessage.css.js';
+import {getButtonLabel} from './WalkthroughUtils.js';
 import {walkthroughCloseTitle, walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
 
 const {html, Directives: {ref, ifDefined}} = Lit;
@@ -184,6 +185,34 @@ const UIStringsNotTranslate = {
    * @description Title used for revealing the performance trace.
    */
   revealTrace: 'Reveal trace',
+  /**
+   * @description Accessible label for the reveal button in the computed styles widget.
+   */
+  revealComputedStyles: 'Reveal computed styles',
+  /**
+   * @description Accessible label for the reveal button in the core web vitals widget.
+   */
+  revealCoreWebVitals: 'Reveal Core Web Vitals',
+  /**
+   * @description Accessible label for the reveal button in the style properties widget.
+   */
+  revealStyleProperties: 'Reveal style properties',
+  /**
+   * @description Accessible label for the reveal button in the LCP breakdown widget.
+   */
+  revealLcpBreakdown: 'Reveal LCP breakdown',
+  /**
+   * @description Accessible label for the reveal button in the LCP element widget.
+   */
+  revealLcpElement: 'Reveal LCP element',
+  /**
+   * @description Accessible label for the reveal button in the performance summary widget.
+   */
+  revealPerformanceSummary: 'Reveal performance summary',
+  /**
+   * @description Accessible label for the reveal button in the bottom up thread activity widget.
+   */
+  revealBottomUpTree: 'Reveal bottom-up thread activity',
   /**
    * @description Title for the core web vitals widget.
    */
@@ -208,14 +237,6 @@ const UIStringsNotTranslate = {
    * @description Title for the bottom up thread activity widget.
    */
   bottomUpTree: 'Bottom-up thread activity',
-  /**
-   * @description Accessilility label for the button that shows the walkthrough when there are no widgets in the walkthrough.
-   */
-  showThinking: 'Show thinking',
-  /**
-   * @description Accessilility label for the button that hides the walkthrough when there are no widgets in the walkthrough.
-   */
-  hideThinking: 'Hide thinking',
 } as const;
 
 export interface Step {
@@ -251,6 +272,12 @@ export interface StepPart {
   step: Step;
 }
 
+/**
+ * Represents a part of the message that consists of one or more widgets.
+ * The agent can yield widgets directly as part of its response, separate
+ * from those returned by a specific tool call (which are encapsulated
+ * within a StepPart).
+ */
 export interface WidgetPart {
   type: 'widget';
   widgets: AiWidget[];
@@ -317,6 +344,8 @@ export interface MessageInput {
   isReadOnly: boolean;
   isLastMessage: boolean;
   isFirstMessage: boolean;
+  prompt: string;
+  shouldShowCSSChangeSummary: boolean;
   canShowFeedbackForm: boolean;
   markdownRenderer: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void;
@@ -418,7 +447,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           },
         )}
         ${renderError(message)}
-        ${input.isLastMessage && hasAiV2 && !input.isLoading && input.changeSummary ? html`
+        ${input.shouldShowCSSChangeSummary && hasAiV2 && input.changeSummary ? html`
           <devtools-code-block
             .code=${input.changeSummary}
             .codeLang=${'css'}
@@ -475,7 +504,7 @@ function renderTitle(step: Step): Lit.LitTemplate {
       html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
       Lit.nothing;
 
-  return html`<span class="title" aria-label=${titleForStep(step)}>${paused}${titleForStep(step)}</span>`;
+  return html`<h3 class="title" aria-label=${titleForStep(step)}>${paused}${titleForStep(step)}</h3>`;
 }
 
 function renderStepCode(step: Step): Lit.LitTemplate {
@@ -584,12 +613,13 @@ function renderWalkthroughSidebarButton(
     'has-widgets': hasOneStepWithWidget && !input.isLoading,
   });
 
-  let accessibleLabel = title;
-  // If the agent is still thinking we want the accessibility label to include the current step title followed by Show/Hide thinking.
-  if (input.isLoading) {
-    const suffix = isExpanded ? UIStringsNotTranslate.hideThinking : UIStringsNotTranslate.showThinking;
-    accessibleLabel = `${titleForStep(lastStep)} ${i18n.i18n.lockedString(suffix)}`;
-  }
+  const accessibleLabel = getButtonLabel({
+    isExpanded,
+    isLoading: input.isLoading,
+    hasWidgets: hasOneStepWithWidget,
+    prompt: input.prompt,
+    stepTitle: titleForStep(lastStep),
+  });
 
   // clang-format off
   return html`
@@ -652,6 +682,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
         markdownRenderer: input.markdownRenderer,
         isInlined: true,
         isExpanded,
+        prompt: input.prompt,
         onToggle: input.walkthrough.onToggle,
         onOpen: input.walkthrough.onOpen,
       })}
@@ -756,6 +787,7 @@ interface WidgetMakerResponse {
   // Can be null if the widget is only used to add the Reveal CTA.
   title: Lit.LitTemplate|Platform.UIString.LocalizedString|null;
   jslogContext?: string;
+  accessibleRevealLabel: string;
 }
 
 const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
@@ -811,6 +843,7 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   return {
     renderedWidget,
     revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealComputedStyles),
     // clang-format off
     title: html`
       <span class="computed-style-title-wrapper">
@@ -837,6 +870,7 @@ async function makeCoreWebVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<
   return {
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealCoreWebVitals),
     title: lockedString(UIStringsNotTranslate.coreVitals),
     jslogContext: 'core-web-vitals',
   };
@@ -870,6 +904,7 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
   return {
     renderedWidget,
     revealable: domNodeForId,
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealStyleProperties),
     title: html`<devtools-widget
       ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {
       node: domNodeForId,
@@ -898,6 +933,7 @@ async function makePerfInsightWidget(widgetData: PerfInsightAiWidget): Promise<W
       return {
         renderedWidget,
         revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
+        accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealLcpBreakdown),
         title: lockedString(UIStringsNotTranslate.lcpBreakdown),
         jslogContext: 'lcp-breakdown',
       };
@@ -932,6 +968,7 @@ async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget):
   return {
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableBottomUpProfile(widgetData.data.bounds),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealBottomUpTree),
     title: lockedString(UIStringsNotTranslate.bottomUpTree),
     jslogContext: 'bottom-up',
   };
@@ -957,7 +994,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
   const revealButton = html`
     <devtools-button class="widget-reveal-button"
       .variant=${Buttons.Button.Variant.TEXT}
-      .accessibleLabel=${lockedString(UIStringsNotTranslate.reveal)}
+      .accessibleLabel=${response.accessibleRevealLabel}
       .jslogContext=${'reveal'}
       @click=${onReveal}
     >
@@ -971,7 +1008,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     <div class=${classes} jslog=${ifDefined(response.jslogContext ? VisualLogging.section(response.jslogContext) : undefined)}>
       ${response.title ? html`
         <div class="widget-header">
-          <h3 class="widget-name">${response.title}</h3>
+          <h4 class="widget-name">${response.title}</h4>
           <div class="widget-reveal-container">
             ${revealButton}
           </div>
@@ -993,11 +1030,13 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 }
 
 async function makePerformanceTraceWidget(widgetData: PerformanceTraceAiWidget): Promise<WidgetMakerResponse|null> {
+  const customRevealTitle = lockedString(UIStringsNotTranslate.revealTrace);
   return {
     renderedWidget: null,
     title: null,
     revealable: new Timeline.TimelinePanel.ParsedTraceRevealable(widgetData.data.parsedTrace),
-    customRevealTitle: lockedString(UIStringsNotTranslate.revealTrace),
+    customRevealTitle,
+    accessibleRevealLabel: customRevealTitle,
     jslogContext: 'performance-trace',
   };
 }
@@ -1057,6 +1096,7 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
   return {
     renderedWidget,
     revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealLcpElement),
     title: lockedString(UIStringsNotTranslate.lcpElement),
     jslogContext: 'dom-snapshot',
   };
@@ -1077,8 +1117,82 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
  *
  * This allows for a flexible and extensible system where new widget types
  * can be added to the AI responses and rendered in DevTools by adding
- * corresponding \`make...Widget\` functions and handling them here.
+ * corresponding `make...Widget` functions and handling them here.
+ */
+/**
+ * Generates a deterministic unique identifier for a given AiWidget based on
+ * its name and identifying data. This signature is used for widget deduplication.
  */
+export function getWidgetSignature(widget: AiWidget): string {
+  switch (widget.name) {
+    case 'COMPUTED_STYLES':
+      return `${widget.name}:${widget.data.backendNodeId}`;
+    case 'CORE_VITALS':
+      return `${widget.name}:${widget.data.insightSetKey}`;
+    case 'STYLE_PROPERTIES':
+      return `${widget.name}:${widget.data.backendNodeId}:${widget.data.selector ?? ''}`;
+    case 'DOM_TREE':
+      return `${widget.name}:${widget.data.root.backendNodeId()}`;
+    case 'PERFORMANCE_TRACE':
+      return `${widget.name}`;
+    case 'PERF_INSIGHT':
+      return `${widget.name}:${widget.data.insight}:${widget.data.insightData.insightKey}:${
+          widget.data.insightData.navigation?.args?.data?.navigationId ?? 'no-nav-id'}`;
+    case 'TIMELINE_RANGE_SUMMARY':
+      return `${widget.name}:${widget.data.track}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
+    case 'BOTTOM_UP_TREE':
+      return `${widget.name}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
+    default:
+      Platform.assertNever(widget, 'Unknown AiWidget name');
+  }
+}
+
+/**
+ * Returns a new ModelChatMessage where widgets have been deduplicated
+ * across all parts and steps of the message. The first occurrence of each
+ * unique widget (determined by its signature) is preserved.
+ */
+export function getDeduplicatedWidgetsMessage(message: ModelChatMessage): ModelChatMessage {
+  const seenWidgets = new Set<string>();
+
+  const filterWidgets = (widgets: AiWidget[]): AiWidget[] => {
+    return widgets.filter(widget => {
+      const signature = getWidgetSignature(widget);
+      if (seenWidgets.has(signature)) {
+        return false;
+      }
+      seenWidgets.add(signature);
+      return true;
+    });
+  };
+
+  const deduplicatedParts = message.parts.map(part => {
+    if (part.type === 'widget') {
+      return {
+        ...part,
+        widgets: filterWidgets(part.widgets),
+      };
+    }
+
+    if (part.type === 'step' && part.step.widgets) {
+      return {
+        ...part,
+        step: {
+          ...part.step,
+          widgets: filterWidgets(part.step.widgets),
+        },
+      };
+    }
+
+    return part;
+  });
+
+  return {
+    ...message,
+    parts: deduplicatedParts,
+  };
+}
+
 async function renderWidgets(
     widgets: AiWidget[]|undefined, options: {wrapperClass?: string} = {}): Promise<Lit.LitTemplate> {
   if (!Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled || !widgets || widgets.length === 0) {
@@ -1384,9 +1498,11 @@ export class ChatMessage extends UI.Widget.Widget {
   message: Message = {entity: ChatMessageEntity.USER, text: ''};
   isLoading = false;
   isReadOnly = false;
+  prompt = '';
   canShowFeedbackForm = false;
   isLastMessage = false;
   isFirstMessage = false;
+  shouldShowCSSChangeSummary = false;
   markdownRenderer!: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void = () => {};
   onFeedbackSubmit:
@@ -1428,15 +1544,19 @@ export class ChatMessage extends UI.Widget.Widget {
   }
 
   override performUpdate(): Promise<void>|void {
+    const message =
+        this.message.entity === ChatMessageEntity.MODEL ? getDeduplicatedWidgetsMessage(this.message) : this.message;
     this.#view(
         {
-          message: this.message,
+          message,
           isLoading: this.isLoading,
           isReadOnly: this.isReadOnly,
           canShowFeedbackForm: this.canShowFeedbackForm,
           markdownRenderer: this.markdownRenderer,
           isLastMessage: this.isLastMessage,
           isFirstMessage: this.isFirstMessage,
+          prompt: this.prompt,
+          shouldShowCSSChangeSummary: this.shouldShowCSSChangeSummary,
           onSuggestionClick: this.onSuggestionClick,
           onRatingClick: this.#handleRateClick.bind(this),
           onReportClick: () => UIHelpers.openInNewTab(REPORT_URL),
@@ -1597,11 +1717,13 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
         data: {
           parsedTrace,
           events,
+          isInAIWidget: true,
           startTime: Trace.Helpers.Timing.microToMilli(bounds.min),
           endTime: Trace.Helpers.Timing.microToMilli(bounds.max),
           thirdPartyTreeTemplate: html`${
             widget(Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget, {
               maxRows: 10,
+              isInAIWidget: true,
               model: {
                 selectedEvents: thirdPartyTree.selectedEvents ?? null,
                 parsedTrace,
@@ -1620,6 +1742,7 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
   return {
     renderedWidget: template,
     revealable: new TimelineUtils.Helpers.RevealableTimeRange(bounds),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealPerformanceSummary),
     title: lockedString(UIStringsNotTranslate.performanceSummary),
     jslogContext: 'timeline-range-summary',
   };