chrome-devtools-frontend 1.0.1597624 → 1.0.1599001

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -23,6 +23,7 @@ import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as LighthousePanel from '../lighthouse/lighthouse.js';
 import * as NetworkForward from '../network/forward/forward.js';
 import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
@@ -50,6 +51,7 @@ import {
 import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 
 const {html} = Lit;
+const {widget} = UI.Widget;
 
 const AI_ASSISTANCE_SEND_FEEDBACK = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
 const AI_ASSISTANCE_HELP =
@@ -128,6 +130,10 @@ const UIStringsNotTranslate = {
    * @description Announcement text for screen readers when the answer comes.
    */
   answerReady: 'Answer ready',
+  /**
+   * @description Title for the first step of the walkthrough.
+   */
+  analyzingData: 'Analyzing data',
   /**
    * @description Placeholder text for the input shown when the conversation is blocked because a cross-origin context was selected.
    */
@@ -226,6 +232,24 @@ const UIStringsNotTranslate = {
    */
   inputDisclaimerForNoContextEnterpriseNoLogging:
       'Chat messages, any data the inspected page can see using Web APIs, and the items you select such as files, network requests, and performance traces are sent to Google. This data will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+  /**
+   * @description Placeholder text for the chat UI input.
+   */
+  inputPlaceholderForAccessibility: 'Ask a question about the selected Lighthouse report',
+  /**
+   * @description Placeholder text for the chat UI input when there is no context selected.
+   */
+  inputPlaceholderForAccessibilityNoContext: 'Generate a Lighthouse report to ask a question',
+  /**
+   * @description Disclaimer text right after the chat input.
+   */
+  inputDisclaimerForAccessibility:
+      'Chat messages and the selected Lighthouse report are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
+  /**
+   * @description Disclaimer text right after the chat input.
+   */
+  inputDisclaimerForAccessibilityEnterpriseNoLogging:
+      'Chat messages and the selected Lighthouse report are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/AiAssistancePanel.ts', UIStrings);
@@ -278,7 +302,14 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
         {title: 'Is the script optimized for performance?', jslogContext: 'file-default'},
         {title: 'Does the script handle user input safely?', jslogContext: 'file-default'},
       ];
+    case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
+      return [
+        {title: 'What are the accessibility issues on this page?', jslogContext: 'accessibility-default'},
+        {title: 'How can I fix these accessibility issues?', jslogContext: 'accessibility-default'},
+        {title: 'What does this Lighthouse report say about accessibility?', jslogContext: 'accessibility-default'},
+      ];
     case AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK:
+
       return [
         {title: 'Why is this network request taking so long?', jslogContext: 'network-default'},
         {title: 'Are there any security headers present?', jslogContext: 'network-default'},
@@ -465,16 +496,12 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
         ></devtools-ai-chat-view>`;
       }
       case ViewState.EXPLORE_VIEW:
-        return html`<devtools-widget
-          class="fill-panel"
-          .widgetConfig=${UI.Widget.widgetConfig(ExploreWidget)}
-        ></devtools-widget>`;
+        return html`<devtools-widget class="fill-panel" ${widget(ExploreWidget)}>
+                    </devtools-widget>`;
 
       case ViewState.DISABLED_VIEW:
-        return html`<devtools-widget
-          class="fill-panel"
-          .widgetConfig=${UI.Widget.widgetConfig(DisabledWidget, input.props)}
-        ></devtools-widget>`;
+        return html`<devtools-widget class="fill-panel" ${widget(DisabledWidget, input.props)}>
+                    </devtools-widget>`;
     }
   }
 
@@ -510,7 +537,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
           </div>
           <div slot="sidebar" class="sidebar-view">
             ${shouldShowWalkthrough ? html`
-              <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(WalkthroughView, {
+              <devtools-widget ${widget(WalkthroughView, {
                 message: input.props.walkthrough.activeMessage,
                 isLoading: input.props.isLoading && walkthroughIsForLastMessage,
                 markdownRenderer: input.props.markdownRenderer,
@@ -552,6 +579,14 @@ function createBreakpointContext(uiLocation: Workspace.UISourceCode.UILocation|n
   return new AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext(uiLocation);
 }
 
+function createAccessibilityContext(report: LighthousePanel.LighthousePanel.ActiveLighthouseReport|null):
+    AiAssistanceModel.AccessibilityAgent.AccessibilityContext|null {
+  if (!report) {
+    return null;
+  }
+  return new AiAssistanceModel.AccessibilityAgent.AccessibilityContext(report.report);
+}
+
 function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null):
     AiAssistanceModel.NetworkAgent.RequestContext|null {
   if (!request) {
@@ -613,7 +648,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
   #selectedBreakpoint: AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext|null = null;
+  #selectedAccessibility: AiAssistanceModel.AccessibilityAgent.AccessibilityContext|null = null;
   // Messages displayed in the `ChatView` component.
+
   #messages: Message[] = [];
 
   // Whether the UI should show loading or not.
@@ -841,6 +878,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const isNetworkPanelVisible = viewManager.isViewVisible('network');
     const isSourcesPanelVisible = viewManager.isViewVisible('sources');
     const isPerformancePanelVisible = viewManager.isViewVisible('timeline');
+    const isLighthousePanelVisible = viewManager.isViewVisible('lighthouse');
 
     let targetConversationType: AiAssistanceModel.AiHistoryStorage.ConversationType|undefined;
     if (isElementsPanelVisible && hostConfig.devToolsFreestyler?.enabled) {
@@ -855,6 +893,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.FILE;
     } else if (isPerformancePanelVisible && hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE;
+    } else if (isLighthousePanelVisible && hostConfig.devToolsAiAssistanceAccessibilityAgent?.enabled) {
+      targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY;
     }
 
     if (isAiAssistanceContextSelectionAgentEnabled() && !targetConversationType) {
@@ -930,7 +970,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     if (this.#conversation) {
       if (this.#conversation.isEmpty && isAiAssistanceContextSelectionAgentEnabled()) {
-        this.#conversation.setContext(this.#getConversationContext(this.#getDefaultConversationType()));
+        const context = this.#getConversationContext(this.#getDefaultConversationType());
+        this.#conversation.setContext(context);
       } else {
         const context = this.#getConversationContext(this.#conversation.type);
         // Don't reset to the context selection agent if
@@ -983,6 +1024,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#selectedFile = createFileContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode));
     this.#selectedBreakpoint =
         createBreakpointContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UILocation));
+    this.#selectedAccessibility = createAccessibilityContext(
+        UI.Context.Context.instance().flavor(LighthousePanel.LighthousePanel.ActiveLighthouseReport));
     this.#updateConversationState(this.#conversation);
 
     this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
@@ -999,6 +1042,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UILocation, this.#handleBreakpointFlavorChange);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        LighthousePanel.LighthousePanel.ActiveLighthouseReport, this.#handleLighthouseReportFlavorChange);
 
     UI.ViewManager.ViewManager.instance().addEventListener(
         UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, this.#selectDefaultAgentIfNeeded, this);
@@ -1033,6 +1078,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         AiAssistanceModel.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        LighthousePanel.LighthousePanel.ActiveLighthouseReport, this.#handleLighthouseReportFlavorChange);
+
     UI.ViewManager.ViewManager.instance().removeEventListener(
         UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, this.#selectDefaultAgentIfNeeded, this);
     UI.Context.Context.instance().removeFlavorChangeListener(
@@ -1132,6 +1180,17 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         this.#updateConversationState(this.#conversation);
       };
 
+  #handleLighthouseReportFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<LighthousePanel.LighthousePanel.ActiveLighthouseReport>): void => {
+        const newReport = ev.data;
+
+        if (this.#selectedAccessibility?.getItem() === newReport?.report) {
+          return;
+        }
+        this.#selectedAccessibility = createAccessibilityContext(newReport);
+        this.#updateConversationState(this.#conversation);
+      };
+
   #getChangeSummary(): string|undefined {
     if (!isAiAssistancePatchingEnabled() || !this.#conversation || this.#conversation?.isReadOnly) {
       return;
@@ -1230,7 +1289,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       }
       case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
         return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContext);
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
+        return this.#conversation.selectedContext ?
+            lockedString(UIStringsNotTranslate.inputPlaceholderForAccessibility) :
+            lockedString(UIStringsNotTranslate.inputPlaceholderForAccessibilityNoContext);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+
         if (AiAssistanceModel.AiUtils.isGeminiBranding()) {
           return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContextBranded);
         }
@@ -1270,7 +1334,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         }
         return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformance);
 
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
+        if (noLogging) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForAccessibilityEnterpriseNoLogging);
+        }
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForAccessibility);
+
       case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
+
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
         if (noLogging) {
           return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContextEnterpriseNoLogging);
@@ -1536,7 +1607,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return this.#selectedPerformanceTrace;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
         return this.#selectedBreakpoint;
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
+        return this.#selectedAccessibility;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+
       case undefined:
         return null;
     }
@@ -1553,6 +1627,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#selectedPerformanceTrace = data;
     } else if (data instanceof AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext) {
       this.#selectedBreakpoint = data;
+    } else if (data instanceof AiAssistanceModel.AccessibilityAgent.AccessibilityContext) {
+      this.#selectedAccessibility = data;
     }
 
     void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);
@@ -1720,7 +1796,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.CONTEXT: {
-            step.title = data.title;
+            step.title = lockedString(UIStringsNotTranslate.analyzingData);
             step.contextDetails = data.details;
             step.widgets = data.widgets;
             step.isLoading = false;
@@ -1839,9 +1915,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           case AiAssistanceModel.AiAgent.ResponseType.CONTEXT_CHANGE: {
             this.#handleConversationContextChange(data.context);
             step.isLoading = false;
+            step.widgets = data.widgets;
             commitStep();
             step = {isLoading: true};
-
             break;
           }
         }
@@ -1860,12 +1936,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           }
 
           // Announce as status update to screen readers when:
-          // * Context is received (e.g. Analyzing the prompt)
+          // * Context is received (e.g. Analyzing data)
           // * Answer started streaming
           // * Answer finished streaming
           switch (data.type) {
             case AiAssistanceModel.AiAgent.ResponseType.CONTEXT:
-              UI.ARIAUtils.LiveAnnouncer.status(data.title);
+              UI.ARIAUtils.LiveAnnouncer.status(lockedString(UIStringsNotTranslate.analyzingData));
               break;
             case AiAssistanceModel.AiAgent.ResponseType.ANSWER: {
               if (!data.complete && !announcedAnswerLoading) {

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -280,7 +280,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
 
     // clang-format off
     return html`<devtools-widget class="copy-to-prompt"
-      .widgetConfig=${UI.Widget.widgetConfig(PanelCommon.CopyChangesToPrompt, {
+      ${widget(PanelCommon.CopyChangesToPrompt, {
         workspaceDiff: input.workspaceDiff,
         patchAgentCSSChange: changedCode,
       })}></devtools-widget>`;

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

@@ -347,6 +347,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             PanelUtils.PanelUtils.getIconForNetworkRequest(input.context.getItem()) :
                             input.context instanceof AiAssistanceModel.FileAgent.FileContext ?
                             PanelUtils.PanelUtils.getIconForSourceFile(input.context.getItem()) :
+                            input.context instanceof AiAssistanceModel.AccessibilityAgent.AccessibilityContext ?
+                            html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :
                             input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
                             Lit.nothing}

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, 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 {
@@ -644,8 +651,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>();
@@ -676,33 +685,29 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   }
   const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(domNodeForId, widgetData.data.computedStyles);
 
-  const widgetConfig = UI.Widget.widgetConfig(Elements.ComputedStyleWidget.ComputedStyleWidget, {
-    nodeStyle: styles,
-    matchedStyles: widgetData.data.matchedCascade,
-    // This disables showing the nested traces and detailed information in the widget.
-    propertyTraces: null,
-    allowUserControl: false,
-    filterText: new RegExp(widgetData.data.properties.join('|'), 'i')
-  });
-
   // clang-format off
-  const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  const renderedWidget = html`<devtools-widget
+      class="computed-styles-widget" ${widget(Elements.ComputedStyleWidget.ComputedStyleWidget, {
+        nodeStyle: styles,
+        matchedStyles: widgetData.data.matchedCascade,
+        // This disables showing the nested traces and detailed information in the widget.
+        propertyTraces: null,
+        allowUserControl: false,
+        filterText: new RegExp(widgetData.data.properties.join('|'), 'i')
+      })}></devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
+  return {renderedWidget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
 }
 
 async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
-  const widgetConfig = UI.Widget.widgetConfig(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data});
-
   // clang-format off
-  const widget = html`<devtools-widget class="core-vitals-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  const renderedWidget = html`<devtools-widget
+      class="core-vitals-widget" ${widget(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data})}>
+  </devtools-widget>`;
   // clang-format on
 
-  return {
-    renderedWidget: widget,
-    revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)
-  };
+  return {renderedWidget, revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)};
 }
 
 async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): Promise<WidgetMakerResponse|null> {
@@ -711,19 +716,37 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
     return null;
   }
 
-  const widgetConfig = UI.Widget.widgetConfig(Elements.StandaloneStylesContainer.StandaloneStylesContainer, {
-    domNode: domNodeForId,
-    filter: widgetData.data.selector ? new RegExp(widgetData.data.selector) : null,
+  // clang-format off
+  const renderedWidget = html`<devtools-widget
+      class="styling-preview-widget"
+      ${widget(Elements.StandaloneStylesContainer.StandaloneStylesContainer, {
+      domNode: domNodeForId,
+      filter: widgetData.data.selector ? new RegExp(widgetData.data.selector) : null,
+    })}>
+  </devtools-widget>`;
+  // clang-format on
+
+  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 widget = html`<devtools-widget
-    class="styling-preview-widget"
-    .widgetConfig=${widgetConfig}
-  ></devtools-widget>`;
+  const renderedWidget = html`<devtools-widget
+    class="lcp-breakdown-widget"
+    .widgetConfig=${widgetConfig}></devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget: widget, revealable: domNodeForId};
+  return {renderedWidget, revealable: new TimelineUtils.Helpers.RevealableInsight(insight)};
 }
 
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
@@ -738,24 +761,97 @@ 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)) {
+    return null;
+  }
+
+  const widgetConfig = UI.Widget.widgetConfig(Elements.ElementsTreeOutline.DOMTreeWidget, {
+    maxTreeDepth: 2,
+    enableContextMenu: false,
+    showComments: false,
+    showAIButton: false,
+    disableEdits: true,
+    expandRoot: true,
+    rootDOMNode: root,
+    visibleWidth: 400,
+    wrap: true,
+  });
+
+  const networkRequest = widgetData.data.networkRequest;
+
+  // clang-format off
+  const renderedWidget = html`
+    ${networkRequest ? renderNetworkRequestPreview(networkRequest) : Lit.nothing}
+    <devtools-widget class="dom-tree-widget" .widgetConfig=${widgetConfig}></devtools-widget>
+  `;
+  // clang-format on
+
+  return {
+    renderedWidget,
+    revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
+  };
+}
+
 /**
  * Renders AI-defined UI widgets.
  * When a ModelChatMessage contains a WidgetPart, or a Step has widgets,
@@ -780,12 +876,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);
+    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

@@ -169,7 +169,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
               </div>
             </div>
           `}
-          <devtools-widget class=${inputWidgetClasses} .widgetConfig=${UI.Widget.widgetConfig(ChatInput, {
+          <devtools-widget class=${inputWidgetClasses} ${widget(ChatInput, {
             isLoading: input.isLoading,
             blockedByCrossOrigin: input.blockedByCrossOrigin,
             isTextInputDisabled: input.isTextInputDisabled,

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

@@ -380,6 +380,11 @@
     padding: 0 var(--sys-size-4) var(--sys-size-4) 0;
   }
 
+  .revealer-only .widget-reveal-container {
+    background: none;
+    border-radius: unset;
+  }
+
   .widget-content-container {
     padding: var(--sys-size-4);
     border-top-left-radius: var(--sys-shape-corner-medium);
@@ -389,4 +394,60 @@
 
     --override-computed-style-property-white-space: normal;
   }
+
+  .network-request-preview {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-4);
+    margin-bottom: var(--sys-size-5);
+    padding-bottom: var(--sys-size-5);
+    border-bottom: 1px solid var(--sys-color-divider);
+
+    .network-request-header {
+      display: flex;
+      align-items: center;
+      gap: var(--sys-size-5);
+
+      .network-request-icon {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--sys-color-surface1);
+        border-radius: var(--sys-shape-corner-small);
+        border: 1px solid var(--sys-color-divider);
+        overflow: hidden;
+
+        img {
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+        }
+
+        devtools-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      .network-request-details {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        .network-request-name {
+          font: var(--sys-typescale-body4-bold);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .network-request-size {
+          font: var(--sys-typescale-body4-regular);
+          color: var(--sys-color-on-surface-subtle);
+        }
+      }
+    }
+  }
 }