chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

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, 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';
@@ -34,6 +35,7 @@ import {walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
 
 const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
+const {widget} = UI.Widget;
 
 const REPORT_URL = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
 const SCROLL_ROUNDING_OFFSET = 1;
@@ -100,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
    */
@@ -120,10 +126,6 @@ const UIStringsNotTranslate = {
    * @description Gemini (do not translate)
    */
   gemini: 'Gemini',
-  /**
-   * @description The fallback text when we can't find the user full name
-   */
-  you: 'You',
   /**
    * @description The fallback text when a step has no title yet
    */
@@ -156,10 +158,6 @@ const UIStringsNotTranslate = {
    * @description Alt text for the image input (displayed in the chat messages) that has been sent to the model.
    */
   imageInputSentToTheModel: 'Image input sent to the model',
-  /**
-   * @description Alt text for the account avatar.
-   */
-  accountAvatar: 'Account avatar',
   /**
    * @description Title for the link which wraps the image input rendered in chat messages.
    */
@@ -212,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;
@@ -272,7 +275,6 @@ export interface MessageInput {
   isReadOnly: boolean;
   isLastMessage: boolean;
   canShowFeedbackForm: boolean;
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'|'accountGivenName'>;
   markdownRenderer: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void;
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
@@ -289,14 +291,6 @@ export interface MessageInput {
 export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, target: HTMLElement): void => {
   const message = input.message;
   if (message.entity === ChatMessageEntity.USER) {
-    const givenName = AiAssistanceModel.AiUtils.isGeminiBranding() ? input.userInfo.accountGivenName : '';
-    const name = givenName || input.userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
-    const image = input.userInfo.accountImage ?
-        html`<img src="data:image/png;base64, ${input.userInfo.accountImage}" alt=${
-            UIStringsNotTranslate.accountAvatar} />` :
-        html`<devtools-icon
-          name="profile"
-        ></devtools-icon>`;
     const imageInput = message.imageInput && 'inlineData' in message.imageInput ?
         renderImageChatMessage(message.imageInput.inlineData) :
         Lit.nothing;
@@ -308,12 +302,6 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
         class="chat-message query ${input.isLastMessage ? 'is-last-message' : ''}"
         jslog=${VisualLogging.section('question')}
       >
-        <div class="message-info">
-          ${image}
-          <div class="message-name">
-            <h2>${name}</h2>
-          </div>
-        </div>
         ${imageInput}
         <div class="message-content">${renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
       </section>
@@ -349,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,
@@ -569,7 +560,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // clang-format off
   const walkthroughInline = input.walkthrough.isInlined ? html`
     <div class="walkthrough-container">
-      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(WalkthroughView, {
+      ${widget(WalkthroughView, {
         message: input.message as ModelChatMessage,
         isLoading: input.isLoading && input.isLastMessage,
         markdownRenderer: input.markdownRenderer,
@@ -577,7 +568,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
         isExpanded,
         onToggle: input.walkthrough.onToggle,
         onOpen: input.walkthrough.onOpen,
-      })}></devtools-widget>
+      })}
     </div>
   ` : Lit.nothing;
 
@@ -624,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,
@@ -648,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
 }
 
@@ -661,25 +648,31 @@ 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);
 
@@ -712,6 +705,27 @@ async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<Wid
   };
 }
 
+async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): Promise<WidgetMakerResponse|null> {
+  const domNodeForId = await resolveNode(widgetData.data.backendNodeId);
+  if (!domNodeForId) {
+    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 widget = html`<devtools-widget
+    class="styling-preview-widget"
+    .widgetConfig=${widgetConfig}
+  ></devtools-widget>`;
+  // clang-format on
+
+  return {renderedWidget: widget, revealable: domNodeForId};
+}
+
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
   if (response === null) {
     return Lit.nothing;
@@ -743,38 +757,43 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 }
 
 /**
- * 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);
+      response = await makeComputedStyleWidget(widgetData);
+    } else if (widgetData.name === 'CORE_VITALS') {
+      response = await makeCoreVitalsWidget(widgetData);
+    } else if (widgetData.name === 'STYLE_PROPERTIES') {
+      response = await makeStylePropertiesWidget(widgetData);
     }
-    if (widgetData.name === 'CORE_VITALS') {
-      const response = await makeCoreVitalsWidget(widgetData);
-      return renderWidgetResponse(response);
-    }
-    return Lit.nothing;
+    return renderWidgetResponse(response);
   }));
+
+  if (options.wrapperClass) {
+    return html`<div class=${options.wrapperClass}>${ui}</div>`;
+  }
+
   return html`${ui}`;
 }
 
@@ -829,6 +848,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>`;
@@ -1019,8 +1041,6 @@ export class ChatMessage extends UI.Widget.Widget {
   isReadOnly = false;
   canShowFeedbackForm = false;
   isLastMessage = false;
-  userInfo:
-      Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'|'accountGivenName'> = {};
   markdownRenderer!: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void = () => {};
   onFeedbackSubmit:
@@ -1067,7 +1087,6 @@ export class ChatMessage extends UI.Widget.Widget {
           isLoading: this.isLoading,
           isReadOnly: this.isReadOnly,
           canShowFeedbackForm: this.canShowFeedbackForm,
-          userInfo: this.userInfo,
           markdownRenderer: this.markdownRenderer,
           isLastMessage: this.isLastMessage,
           onSuggestionClick: this.onSuggestionClick,

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

@@ -25,6 +25,7 @@ const {
   repeat,
   classMap,
 } = Directives;
+const {widget} = UI.Widget;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -67,9 +68,8 @@ export interface Props {
   messages: Message[];
   context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
   isContextSelected: boolean;
-  isLoading: boolean;
   canShowFeedbackForm: boolean;
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountGivenName'>;
+  isLoading: boolean;
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType;
   isReadOnly: boolean;
   blockedByCrossOrigin: boolean;
@@ -91,7 +91,6 @@ export interface Props {
 }
 
 interface ChatWidgetInput extends Props {
-  accountGivenName: string;
   handleScroll: (ev: Event) => void;
   handleSuggestionClick: (title: string) => void;
   handleMessageContainerRef: (el: Element|undefined) => void;
@@ -116,12 +115,11 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           ${input.messages.length > 0 ? html`
             <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
               ${repeat(input.messages, message =>
-                html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
+                widget(ChatMessage, {
                   message,
                   isLoading: input.isLoading && input.messages.at(-1) === message,
                   isReadOnly: input.isReadOnly,
                   canShowFeedbackForm: input.canShowFeedbackForm,
-                  userInfo: input.userInfo,
                   markdownRenderer: input.markdownRenderer,
                   isLastMessage: input.messages.at(-1) === message,
                   onSuggestionClick: input.handleSuggestionClick,
@@ -130,14 +128,12 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   walkthrough: {
                     ...input.walkthrough,
                   }
-                })}></devtools-widget>`
+                })
               )}
-              ${input.isLoading ? nothing : html`<devtools-widget
-                .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
+              ${input.isLoading ? nothing : widget(PatchWidget, {
                   changeSummary: input.changeSummary ?? '',
                   changeManager: input.changeManager,
                 })}
-              ></devtools-widget>`}
             </div>
           ` : html`
             <div class="empty-state-container">
@@ -149,7 +145,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                 </div>
                 ${AiAssistanceModel.AiUtils.isGeminiBranding() ?
                   html`
-                    <h1 class='greeting'>Hello${input.accountGivenName ? `, ${input.accountGivenName}` : ''}</h1>
+                    <h1 class='greeting'>Hello</h1>
                     <p class='cta'>${lockedString(UIStringsNotTranslate.emptyStateTextGemini)}</p>
                   ` : html`<h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>`
                 }
@@ -354,7 +350,6 @@ export class ChatView extends HTMLElement {
     this.#view(
         {
           ...this.#props,
-          accountGivenName: this.#props.userInfo.accountGivenName ?? '',
           handleScroll: this.#handleScroll,
           handleSuggestionClick: this.#handleSuggestionClick,
           handleMessageContainerRef: this.#handleMessageContainerRef,

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

@@ -0,0 +1,200 @@
+// 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 * as Marked from '../../../third_party/marked/marked.js';
+import type * as MarkdownView from '../../../ui/components/markdown_view/MarkdownView.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 {ref, createRef} = Lit.Directives;
+
+export class StylingAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
+  constructor(
+      private mainFrameId = '',
+  ) {
+    super();
+  }
+
+  #renderTableFromJson(data: Array<Record<string, string>>): Lit.LitTemplate|null {
+    if (!Array.isArray(data) || data.length === 0 || typeof data[0] !== 'object' || data[0] === null) {
+      return null;
+    }
+
+    const headers = Object.keys(data[0]);
+    const requiredKeys = ['Problem', 'Element', 'NodeId', 'Details'];
+    if (!requiredKeys.every(key => headers.includes(key))) {
+      return null;  // Not the expected JSON structure
+    }
+
+    const problemIndex = headers.indexOf('Problem');
+    if (problemIndex > -1) {
+      const problemHeader = headers.splice(problemIndex, 1);
+      headers.unshift(...problemHeader);
+    }
+
+    return html`
+      <table style="width: 100%;">
+        <thead>
+          <tr>
+            ${headers.map(header => html`<th style="text-align: left;">${header === 'NodeId' ? '' : header}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${data.flatMap(row => {
+      return html`
+            <tr>
+              ${headers.map(header => {
+        if (header === 'NodeId') {
+          return html`<td>${this.#renderLinkifiedText(row[header])}</td>`;
+        }
+        if (header === 'Details') {
+          // eslint-disable-next-line @devtools/no-a-tags-in-lit
+          return html`<td><a href="#" @click=${this.#toggleDetailsRow}>Details</a></td>`;
+        }
+        return html`<td>${row[header]}</td>`;
+      })}
+            </tr>
+            <tr class="details-row" style="display: none;">
+              <td colspan=${headers.length} style="background-color: #f0f0f0; padding: 1em;">
+                <devtools-markdown-view .data=${{
+        tokens: Marked.Marked.lexer(row['Details']),
+        renderer: new StylingAgentMarkdownRenderer(this.mainFrameId),
+      } as MarkdownView.MarkdownViewData}></devtools-markdown-view>
+              </td>
+            </tr>
+          `;
+    })}
+        </tbody>
+      </table>
+      <br><div>To investigate these problems, please click one of the provided links (above), to set as context, and ask me further questions about the problem.</div>
+    `;
+  }
+
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (token.type === 'code') {
+      try {
+        const data = JSON.parse(token.text);
+        const table = this.#renderTableFromJson(data);
+        if (table) {
+          return table;
+        }
+      } catch {
+        // Not a JSON object, fallback to default rendering.
+      }
+    }
+
+    if (token.type === 'link' && token.href.startsWith('#')) {
+      let nodeId = undefined;
+      if (token.href.startsWith('#node-')) {
+        nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;
+      } else if (token.href.startsWith('#')) {
+        // So often does it ignore requests to prepend nodes with node-, frustratingly.
+        nodeId = Number(token.href.replace('#', '')) as Protocol.DOM.BackendNodeId;
+      }
+
+      if (nodeId) {
+        const templateRef = createRef();
+        void this.#linkifyNode(nodeId, token.text).then(node => {
+          if (!templateRef.value || !node) {
+            return;
+          }
+
+          templateRef.value.textContent = '';
+          templateRef.value.append(node);
+        });
+        return html`<span ${ref(templateRef)}>${token.text}</span>`;
+      }
+    }
+
+    return super.templateForToken(token);
+  }
+
+  #toggleDetailsRow(e: Event): void {
+    e.preventDefault();
+    const link = e.target as HTMLAnchorElement;
+    const currentRow = link.closest('tr');
+    if (!currentRow) {
+      return;
+    }
+    const detailsRow = currentRow.nextElementSibling as HTMLTableRowElement | null;
+    if (detailsRow?.classList.contains('details-row')) {
+      if (detailsRow.style.display === 'none') {
+        detailsRow.style.display = 'table-row';
+        link.textContent = 'Hide';
+      } else {
+        detailsRow.style.display = 'none';
+        link.textContent = 'Details';
+      }
+    }
+  }
+
+  #renderLinkifiedText(text: string): Lit.LitTemplate {
+    if (text.indexOf(',') === -1) {
+      const nodeId = Number(text) as Protocol.DOM.BackendNodeId;
+      if (isNaN(nodeId)) {
+        // Not a number, return as is.
+        return html`${text}`;
+      }
+      return this.#renderSingleLink(nodeId);
+    }
+
+    // Check for comma separated list.
+    const nodeIdsStr = text.split(',').map(s => s.trim()).filter(Boolean);
+    return html`${nodeIdsStr.map(idStr => {
+      const nodeId = Number(idStr) as Protocol.DOM.BackendNodeId;
+      if (isNaN(nodeId)) {
+        return html`<div>${idStr}</div>`;
+      }
+      return html`<div>${this.#renderSingleLink(nodeId)}</div>`;
+    })}`;
+  }
+
+  #renderSingleLink(nodeId: Protocol.DOM.BackendNodeId): Lit.LitTemplate {
+    const label = `link`;
+    const templateRef = createRef();
+    void this.#linkifyNode(nodeId, label).then(node => {
+      if (!templateRef.value) {
+        return;
+      }
+      templateRef.value.textContent = '';
+      if (node) {
+        templateRef.value.append(node);
+      } else {
+        // Fallback to plain text if linkification fails
+        templateRef.value.append(document.createTextNode(label));
+      }
+    });
+    // Placeholder for async link
+    return html`<span ${ref(templateRef)}>${label}</span>`;
+  }
+
+  async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Node|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;
+  }
+}

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

@@ -143,14 +143,6 @@
       gap: var(--sys-size-4);
       font: var(--sys-typescale-body4-bold);
 
-      img {
-        border: 0;
-        border-radius: var(--sys-shape-corner-full);
-        display: block;
-        height: var(--sys-size-9);
-        width: var(--sys-size-9);
-      }
-
       h2 {
         font: var(--sys-typescale-body4-bold);
       }
@@ -362,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;