chrome-devtools-frontend 1.0.1597448 → 1.0.1598808

package/front_end/models/trace/insights/CharacterSet.ts

@@ -0,0 +1,172 @@
+// 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 i18n from '../../../core/i18n/i18n.js';
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+
+import {
+  type Checklist,
+  InsightCategory,
+  InsightKeys,
+  type InsightModel,
+  type InsightSetContext,
+  InsightWarning,
+  type PartialInsightModel,
+} from './types.js';
+
+export const UIStrings = {
+  /**
+   * @description Title of an insight that checks whether the page declares a character encoding early enough.
+   */
+  title: 'Declare a character encoding',
+  /**
+   * @description Description of an insight that checks whether the page has a proper character encoding declaration via HTTP header or early meta tag.
+   */
+  description:
+      'A character encoding declaration is required. It can be done with a meta charset tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more about declaring the character encoding](https://developer.chrome.com/docs/insights/charset/).',
+  /**
+   * @description Text to tell the user that the charset is declared in the Content-Type HTTP response header.
+   */
+  passingHttpHeader: 'Declares charset in HTTP header',
+  /**
+   * @description Text to tell the user that the charset is NOT declared in the Content-Type HTTP response header.
+   */
+  failedHttpHeader: 'Does not declare charset in HTTP header',
+  /**
+   * @description Text to tell the user that a meta charset tag was found in the first 1024 bytes of the HTML.
+   */
+  passingMetaCharsetEarly: 'Declares charset using a meta tag in the first 1024 bytes',
+  /**
+   * @description Text to tell the user that a meta charset tag was found, but too late in the HTML.
+   */
+  failedMetaCharsetLate: 'Declares charset using a meta tag after the first 1024 bytes',
+  /**
+   * @description Text to tell the user that no meta charset tag was found in the HTML.
+   */
+  failedMetaCharsetMissing: 'Does not declare charset using a meta tag',
+  /**
+   * @description Text to tell the user that trace data did not include the Blink signal for meta charset.
+   */
+  failedMetaCharsetUnknown: 'Could not determine meta charset declaration from trace',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/CharacterSet.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const CHARSET_HTTP_REGEX = /charset\s*=\s*[a-zA-Z0-9\-_:.()]{2,}/i;
+
+export type CharacterSetInsightModel = InsightModel<typeof UIStrings, {
+  data?: {
+    hasHttpCharset: boolean,
+    checklist: Checklist<'httpCharset'|'metaCharset'>,
+    metaCharsetDisposition?: Types.Events.MetaCharsetDisposition,
+    documentRequest?: Types.Events.SyntheticNetworkRequest,
+  },
+}>;
+
+export function isCharacterSetInsight(model: InsightModel): model is CharacterSetInsightModel {
+  return model.insightKey === InsightKeys.CHARACTER_SET;
+}
+
+function finalize(partialModel: PartialInsightModel<CharacterSetInsightModel>): CharacterSetInsightModel {
+  let hasFailure = false;
+  if (partialModel.data) {
+    hasFailure = !partialModel.data.checklist.httpCharset.value && !partialModel.data.checklist.metaCharset.value;
+  }
+
+  return {
+    insightKey: InsightKeys.CHARACTER_SET,
+    strings: UIStrings,
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/insights/charset/',
+    category: InsightCategory.ALL,
+    state: hasFailure ? 'fail' : 'pass',
+    ...partialModel,
+  };
+}
+
+function hasCharsetInContentType(request: Types.Events.SyntheticNetworkRequest): boolean {
+  if (!request.args.data.responseHeaders) {
+    return false;
+  }
+  for (const header of request.args.data.responseHeaders) {
+    if (header.name.toLowerCase() === 'content-type') {
+      return CHARSET_HTTP_REGEX.test(header.value);
+    }
+  }
+  return false;
+}
+
+function findMetaCharsetDisposition(
+    data: Handlers.Types.HandlerData,
+    context: InsightSetContext,
+    ): Types.Events.MetaCharsetDisposition|undefined {
+  if (!context.navigation) {
+    return undefined;
+  }
+  return data.PageLoadMetrics.metaCharsetCheckEventsByNavigation.get(context.navigation)
+      ?.at(-1)
+      ?.args.data?.disposition;
+}
+
+function metaCharsetLabel(disposition: Types.Events.MetaCharsetDisposition|undefined): ReturnType<typeof i18nString> {
+  switch (disposition) {
+    case 'found-in-first-1024-bytes':
+      return i18nString(UIStrings.passingMetaCharsetEarly);
+    case 'found-after-first-1024-bytes':
+      return i18nString(UIStrings.failedMetaCharsetLate);
+    case 'not-found':
+      return i18nString(UIStrings.failedMetaCharsetMissing);
+    default:
+      return i18nString(UIStrings.failedMetaCharsetUnknown);
+  }
+}
+
+export function generateInsight(
+    data: Handlers.Types.HandlerData, context: InsightSetContext): CharacterSetInsightModel {
+  if (!context.navigation) {
+    return finalize({});
+  }
+
+  const documentRequest = data.NetworkRequests.byId.get(context.navigationId);
+  if (!documentRequest) {
+    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
+  }
+
+  const hasHttpCharset = hasCharsetInContentType(documentRequest);
+  const metaCharsetDisposition = findMetaCharsetDisposition(data, context);
+  const hasMetaCharsetInFirst1024Bytes = metaCharsetDisposition === 'found-in-first-1024-bytes';
+
+  return finalize({
+    relatedEvents: [documentRequest],
+    data: {
+      hasHttpCharset,
+      metaCharsetDisposition,
+      documentRequest,
+      checklist: {
+        httpCharset: {
+          label: hasHttpCharset ? i18nString(UIStrings.passingHttpHeader) : i18nString(UIStrings.failedHttpHeader),
+          value: hasHttpCharset,
+        },
+        metaCharset: {
+          label: metaCharsetLabel(metaCharsetDisposition),
+          value: hasMetaCharsetInFirst1024Bytes,
+        },
+      },
+    },
+  });
+}
+
+export function createOverlays(model: CharacterSetInsightModel): Types.Overlays.Overlay[] {
+  if (!model.data?.documentRequest) {
+    return [];
+  }
+
+  return [{
+    type: 'ENTRY_SELECTED',
+    entry: model.data.documentRequest,
+  }];
+}

package/front_end/models/trace/insights/Models.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 export * as Cache from './Cache.js';
+export * as CharacterSet from './CharacterSet.js';
 export * as CLSCulprits from './CLSCulprits.js';
 export * as DocumentLatency from './DocumentLatency.js';
 export * as DOMSize from './DOMSize.js';

package/front_end/models/trace/insights/types.ts

@@ -164,4 +164,5 @@ export const enum InsightKeys {
   VIEWPORT = 'Viewport',
   MODERN_HTTP = 'ModernHTTP',
   CACHE = 'Cache',
+  CHARACTER_SET = 'CharacterSet',
 }

package/front_end/models/trace/types/TraceEvents.ts

@@ -1360,6 +1360,22 @@ export function isParseMetaViewport(event: Event): event is ParseMetaViewport {
   return event.name === Name.PARSE_META_VIEWPORT;
 }
 
+export type MetaCharsetDisposition = 'found-in-first-1024-bytes'|'found-after-first-1024-bytes'|'not-found';
+
+export interface MetaCharsetCheck extends Instant {
+  name: Name.META_CHARSET_CHECK;
+  args: Args&{
+    data: {
+      frame: string,
+      disposition: MetaCharsetDisposition,
+    },
+  };
+}
+
+export function isMetaCharsetCheck(event: Event): event is MetaCharsetCheck {
+  return event.name === Name.META_CHARSET_CHECK;
+}
+
 export interface LinkPreconnect extends Instant {
   name: Name.LINK_PRECONNECT;
   args: Args&{
@@ -3110,6 +3126,7 @@ export const enum Name {
   SELECTOR_STATS = 'SelectorStats',
   BEGIN_COMMIT_COMPOSITOR_FRAME = 'BeginCommitCompositorFrame',
   PARSE_META_VIEWPORT = 'ParseMetaViewport',
+  META_CHARSET_CHECK = 'MetaCharsetCheck',
 
   /* Paint */
   SCROLL_LAYER = 'ScrollLayer',

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -50,6 +50,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 =
@@ -465,16 +466,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 +507,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,
@@ -1699,8 +1696,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               parts: [],
             };
             this.#messages.push(systemMessage);
-            if (Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent') &&
-                this.#conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT) {
+            // If the walkthrough is currently expanded in the sidebar, we want to
+            // automatically swap it to the newly created message's walkthrough.
+            // This ensures that when a user asks a new question, the sidebar updates
+            // immediately to show the "loading" state of the new walkthrough.
+            const isSidebarWalkthroughOpen = this.#walkthrough.isExpanded && !this.#walkthrough.isInlined;
+            if (isSidebarWalkthroughOpen ||
+                (Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent') &&
+                 this.#conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT)) {
               this.#openWalkthrough(systemMessage);
             }
             break;
@@ -1788,6 +1791,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               systemMessage.parts.push(newPart);
             }
 
+            if (data.widgets && Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
+              systemMessage.parts.push({
+                type: 'widget',
+                widgets: data.widgets,
+              });
+            }
+
             // When there is an answer without any thinking steps, we don't want to show the thinking step.
             // TODO(crbug.com/463323934): Remove specially handling this case.
             if (systemMessage.parts.length > 1) {
@@ -1881,7 +1891,7 @@ export function getResponseMarkdown(message: ModelChatMessage): string {
   for (const part of message.parts) {
     if (part.type === 'answer') {
       contentParts.push(`### Answer\n\n${part.text}`);
-    } else {
+    } else if (part.type === 'step') {
       const step = part.step;
       if (step.title) {
         contentParts.push(`### ${step.title}`);

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/ChatMessage.ts

@@ -13,7 +13,8 @@ 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} from '../../../models/ai_assistance/agents/AiAgent.js';
+  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, 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';
@@ -101,6 +102,10 @@ const UIStringsNotTranslate = {
    * @description The error message when the LLM gets stuck in a loop (max steps reached).
    */
   maxStepsError: 'Seems like I am stuck with the investigation. It would be better if you start over.',
+  /**
+   * @description The error message when the LLM selects context from a different origin.
+   */
+  crossOriginError: 'I have selected the new context but you will have to start a new chat.',
   /**
    * @description Displayed when the user stop the response
    */
@@ -205,7 +210,12 @@ export interface StepPart {
   step: Step;
 }
 
-export type ModelMessagePart = AnswerPart|StepPart;
+export interface WidgetPart {
+  type: 'widget';
+  widgets: AiWidget[];
+}
+
+export type ModelMessagePart = AnswerPart|StepPart|WidgetPart;
 
 export interface UserChatMessage {
   entity: ChatMessageEntity.USER;
@@ -327,6 +337,9 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           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,
@@ -602,7 +615,6 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
-  const shouldRenderWidgets = Boolean(step.widgets?.length && Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
   const stepClasses = Lit.Directives.classMap({
     step: true,
     empty: !step.thought && !step.code && !step.contextDetails && !step.requestApproval,
@@ -626,11 +638,8 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
       </summary>
       ${renderStepDetails({step, markdownRenderer, isLast})}
     </details>
-    ${shouldRenderWidgets ? html`
-      <div class="step-widgets-wrapper">
-        ${Lit.Directives.until(renderStepWidgets(step))}
-      </div>` : Lit.nothing
-     }`;
+    ${Lit.Directives.until(renderWidgets(step.widgets, {wrapperClass: 'step-widgets-wrapper'}))}
+    `;
   // clang-format on
 }
 
@@ -639,55 +648,76 @@ interface WidgetMakerResponse {
   revealable: unknown;
 }
 
-const computedStyleNodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
+const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
+
+async function resolveNode(backendNodeId: Protocol.DOM.BackendNodeId): Promise<SDK.DOMModel.DOMNode|null> {
+  const cachedNode = nodeCache.get(backendNodeId);
+  if (cachedNode) {
+    return cachedNode;
+  }
+
+  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+  if (!target) {
+    return null;
+  }
+
+  const node = new SDK.DOMModel.DeferredDOMNode(target, backendNodeId);
+  const resolved = await node.resolvePromise();
+  if (resolved) {
+    nodeCache.set(backendNodeId, resolved);
+  }
+  return resolved;
+}
 
 async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
-  let domNodeForId = computedStyleNodeCache.get(widgetData.data.backendNodeId);
+  const domNodeForId = await resolveNode(widgetData.data.backendNodeId);
   if (!domNodeForId) {
-    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!target) {
-      return null;
-    }
-    const node = new SDK.DOMModel.DeferredDOMNode(
-        target,
-        widgetData.data.backendNodeId,
-    );
-    const resolved = await node.resolvePromise();
-    if (!resolved) {
-      return null;
-    }
-    domNodeForId = resolved;
-    computedStyleNodeCache.set(widgetData.data.backendNodeId, resolved);
+    return null;
   }
   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 renderedWidget = html`<devtools-widget
+      class="core-vitals-widget" ${widget(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data})}>
+  </devtools-widget>`;
+  // clang-format on
+
+  return {renderedWidget, revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)};
+}
+
+async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): Promise<WidgetMakerResponse|null> {
+  const domNodeForId = await resolveNode(widgetData.data.backendNodeId);
+  if (!domNodeForId) {
+    return null;
+  }
 
   // clang-format off
-  const widget = html`<devtools-widget class="core-vitals-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  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: widget,
-    revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)
-  };
+  return {renderedWidget, revealable: domNodeForId};
 }
 
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
@@ -720,39 +750,74 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
   // clang-format on
 }
 
+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,
+  });
+
+  // clang-format off
+  const widget = html`<devtools-widget class="dom-tree-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  // clang-format on
+
+  return {
+    renderedWidget: widget,
+    revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
+  };
+}
+
 /**
- * Renders AI-defined UI widgets within a step.
- * When a ModelChatMessage contains a WidgetPart, the ChatMessage component
- * iterates through the `step.widgets` array. For each widget, it determines
- * the appropriate rendering logic based on the `widgetData.name`.
+ * Renders AI-defined UI widgets.
+ * When a ModelChatMessage contains a WidgetPart, or a Step has widgets,
+ * the ChatMessage component iterates through the \`widgets\` array.
+ * For each widget, it determines the appropriate rendering logic based on
+ * the \`widgetData.name\`.
  *
- * Currently, only 'COMPUTED_STYLES' and 'CORE_VITALS' widgets are supported. For these, the
- * `makeComputedStyleWidget` and `makeCoreVitalsWidget` functions are called to construct the necessary
- * data and configuration for the `Elements.ComputedStyleWidget.ComputedStyleWidget`
- * and `TimelineComponents.CWVMetrics.CWVMetrics`
- * components. The widget is then rendered using the `<devtools-widget>`
- * custom element, which dynamically instantiates and displays the specified
- * UI.Widget subclass with the provided configuration.
+ * Currently, 'COMPUTED_STYLES', 'CORE_VITALS' and 'STYLE_PROPERTIES' widgets are supported.
+ * For these, the corresponding \`make...Widget\` functions are called to construct the necessary
+ * data and configuration for the UI components. The widget is then rendered using the
+ * \`<devtools-widget>\` custom element, which dynamically instantiates and displays the
+ * specified UI.Widget subclass with the provided configuration.
  *
  * 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.
  */
-async function renderStepWidgets(step: Step): Promise<Lit.LitTemplate> {
-  if (!step.widgets || step.widgets.length === 0) {
+async function renderWidgets(
+    widgets: AiWidget[]|undefined, options: {wrapperClass?: string} = {}): Promise<Lit.LitTemplate> {
+  if (!Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled || !widgets || widgets.length === 0) {
     return Lit.nothing;
   }
-  const ui = await Promise.all(step.widgets.map(async widgetData => {
+  const ui = await Promise.all(widgets.map(async widgetData => {
+    let response: WidgetMakerResponse|null = null;
     if (widgetData.name === 'COMPUTED_STYLES') {
-      const response = await makeComputedStyleWidget(widgetData);
-      return renderWidgetResponse(response);
-    }
-    if (widgetData.name === 'CORE_VITALS') {
-      const response = await makeCoreVitalsWidget(widgetData);
-      return renderWidgetResponse(response);
+      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);
     }
-    return Lit.nothing;
+    return renderWidgetResponse(response);
   }));
+
+  if (options.wrapperClass) {
+    return html`<div class=${options.wrapperClass}>${ui}</div>`;
+  }
+
   return html`${ui}`;
 }
 
@@ -807,6 +872,9 @@ function renderError(message: ModelChatMessage): Lit.LitTemplate {
       case AiAssistanceModel.AiAgent.ErrorType.MAX_STEPS:
         errorMessage = UIStringsNotTranslate.maxStepsError;
         break;
+      case AiAssistanceModel.AiAgent.ErrorType.CROSS_ORIGIN:
+        errorMessage = UIStringsNotTranslate.crossOriginError;
+        break;
       case AiAssistanceModel.AiAgent.ErrorType.ABORT:
         return html`<p class="aborted" jslog=${VisualLogging.section('aborted')}>${
             lockedString(UIStringsNotTranslate.stoppedResponse)}</p>`;

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/MarkdownRendererWithCodeBlock.ts

@@ -33,16 +33,21 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
     }}>${Platform.StringUtilities.trimEndWithMaxLength(label, 100)}</devtools-link>`;
   }
 
-  #renderLink(href: string): Lit.LitTemplate|null {
+  #renderLink(
+      href: string,
+      fallbackText: string,
+      ): Lit.LitTemplate|null {
     if (href.startsWith('#req-')) {
-      const request =
-          Logs.NetworkLog.NetworkLog.instance().requests().find(req => req.requestId() === href.substring(5));
+      const request = Logs.NetworkLog.NetworkLog.instance().requests().find(
+          req => req.requestId() === href.substring(5),
+      );
 
       if (request) {
         return this.#revealableLink(request, request.url());
       }
-
-    } else if (href.startsWith('#file-')) {
+      return html`${fallbackText}`;
+    }
+    if (href.startsWith('#file-')) {
       const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
           file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
               Number(href.substring(6)));
@@ -50,13 +55,14 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
       if (file) {
         return this.#revealableLink(file, file.name());
       }
+      return html`${fallbackText}`;
     }
     return null;
   }
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
     if (token.type === 'link') {
-      const link = this.#renderLink(token.href);
+      const link = this.#renderLink(token.href, token.text);
       if (link) {
         return link;
       }
@@ -73,9 +79,12 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
     if (token.type === 'codespan') {
       // LLM likes outputting the link inside a codespan block.
       // Remove the codespan and render the link directly
-      const matches = token.text.match(/^\[.*\]\((.+)\)$/);
-      if (matches?.[1]) {
-        const link = this.#renderLink(matches[1]);
+      const matches = token.text.match(/^\[(.*)\]\((.+)\)$/);
+      if (matches?.[2]) {
+        const link = this.#renderLink(
+            matches[2],
+            matches[1],
+        );
         if (link) {
           return link;
         }

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

@@ -354,6 +354,17 @@
     width: fit-content;
   }
 
+  .styling-preview-widget {
+    width: 100%;
+    min-height: 100px;
+  }
+
+  .main-widgets-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-5);
+  }
+
   .step-widgets-wrapper {
     width: fit-content;
     display: flex;