chrome-devtools-frontend 1.0.1592362 → 1.0.1593518

package/front_end/models/emulation/DeviceModeModel.ts

@@ -113,7 +113,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #emulationModel: SDK.EmulationModel.EmulationModel|null;
   #onModelAvailable: (() => void)|null;
   #outlineRect?: Rect;
-  #screenOrientationLocked: boolean;
 
   private constructor() {
     super();
@@ -173,7 +172,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.#emulationModel = null;
     this.#onModelAvailable = null;
-    this.#screenOrientationLocked = false;
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.EmulationModel.EmulationModel, this);
   }
 
@@ -444,9 +442,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         this.#onModelAvailable = null;
         callback();
       }
-      emulationModel.addEventListener(
-          SDK.EmulationModel.EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED, this.onScreenOrientationLockChanged,
-          this);
       const resourceTreeModel = emulationModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
       if (resourceTreeModel) {
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameChange, this);
@@ -459,12 +454,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   modelRemoved(emulationModel: SDK.EmulationModel.EmulationModel): void {
     if (this.#emulationModel === emulationModel) {
-      emulationModel.removeEventListener(
-          SDK.EmulationModel.EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED, this.onScreenOrientationLockChanged,
-          this);
       this.#emulationModel = null;
-      this.#screenOrientationLocked = false;
-      this.dispatchEventToListeners(Events.UPDATED);
     }
   }
 
@@ -481,43 +471,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.showHingeIfApplicable(overlayModel);
   }
 
-  private onScreenOrientationLockChanged(
-      event: Common.EventTarget.EventTargetEvent<SDK.EmulationModel.ScreenOrientationLockChangedEvent>): void {
-    this.#screenOrientationLocked = event.data.locked;
-    if (event.data.locked && event.data.orientation) {
-      this.applyOrientationLock(event.data.orientation);
-    }
-    this.dispatchEventToListeners(Events.UPDATED);
-  }
-
-  private applyOrientationLock(orientation: Protocol.Emulation.ScreenOrientation): void {
-    const wantsLandscape = orientation.type === Protocol.Emulation.ScreenOrientationType.LandscapePrimary ||
-        orientation.type === Protocol.Emulation.ScreenOrientationType.LandscapeSecondary;
-
-    if (this.#type === Type.Device && this.#device && this.#mode) {
-      // For device emulation, switch to the matching orientation mode.
-      const isCurrentlyLandscape =
-          this.#mode.orientation === Horizontal || this.#mode.orientation === HorizontalSpanned;
-      if (wantsLandscape !== isCurrentlyLandscape) {
-        const rotationPartner = this.#device.getRotationPartner(this.#mode);
-        if (rotationPartner) {
-          this.emulate(this.#type, this.#device, rotationPartner);
-        }
-      }
-    } else if (this.#type === Type.Responsive) {
-      // For responsive mode, swap width/height if orientation doesn't match.
-      const appliedSize = this.appliedDeviceSize();
-      const isCurrentlyLandscape = appliedSize.width > appliedSize.height;
-      if (wantsLandscape !== isCurrentlyLandscape) {
-        this.setSizeAndScaleToFit(appliedSize.height, appliedSize.width);
-      }
-    }
-  }
-
-  isScreenOrientationLocked(): boolean {
-    return this.#screenOrientationLocked;
-  }
-
   private scaleSettingChanged(): void {
     this.calculateAndEmulate(false);
   }

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7322,16 +7322,16 @@ export const NativeFunctions = [
     signatures: [["type","eventInitDict"]]
   },
   {
-    name: "registerTool",
-    signatures: [["params"]]
+    name: "provideContext",
+    signatures: [["?options"]]
   },
   {
-    name: "unregisterTool",
-    signatures: [["tool_name"]]
+    name: "registerTool",
+    signatures: [["tool"]]
   },
   {
-    name: "provideContext",
-    signatures: [["params"]]
+    name: "unregisterTool",
+    signatures: [["name"]]
   },
   {
     name: "SnapEvent",

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -452,9 +452,11 @@ export class AXBreadcrumb {
 
     this.#element = document.createElement('div');
     this.#element.classList.add('ax-breadcrumb');
-    this.#element.setAttribute(
-        'jslog',
-        `${VisualLogging.treeItem().track({click: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'})}`);
+    this.#element.setAttribute('jslog', `${VisualLogging.treeItem().track({
+                                 click: true,
+                                 resize: true,
+                                 keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'
+                               })}`);
     elementsToAXBreadcrumb.set(this.#element, this);
 
     this.#nodeElement = document.createElement('div');

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -460,10 +460,23 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     }
   }
 
-  const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.walkthrough.isExpanded;
-
   if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled ||
     Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent')) {
+
+    const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.walkthrough.isExpanded;
+    /**
+     * We want to mark the walkthrough as loading only if it's showing the last
+     * message. Otherwise, a previous walkthrough will show as loading if we
+     * rely only on the isLoading flag.
+     */
+    let walkthroughIsForLastMessage = false;
+    if(input.state === ViewState.CHAT_VIEW) {
+      const lastMessage = input.props.messages.at(-1);
+      if(lastMessage && input.props.walkthrough.activeMessage === lastMessage) {
+        walkthroughIsForLastMessage = true;
+      }
+    }
+
     Lit.render(html`
       ${toolbarView(input)}
       <div class="ai-assistance-view-container">
@@ -481,7 +494,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
             ${shouldShowWalkthrough ? html`
               <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(WalkthroughView, {
                 message: input.props.walkthrough.activeMessage,
-                isLoading: input.props.isLoading,
+                isLoading: input.props.isLoading && walkthroughIsForLastMessage,
                 markdownRenderer: input.props.markdownRenderer,
                 onToggle: input.props.walkthrough.onToggle,
               })}></devtools-widget>` : Lit.nothing}
@@ -1439,11 +1452,19 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#updateConversationState();
   }
 
+  #clearWalkthrough(): void {
+    this.#walkthrough.isExpanded = false;
+    this.#walkthrough.activeMessage = null;
+  }
+
   #onDeleteClicked(): void {
     if (!this.#conversation) {
       return;
     }
 
+    // Ensure we clear the walkthrough so it doesn't hold onto a chat that is about to be deleted.
+    this.#clearWalkthrough();
+
     void AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().deleteHistoryEntry(this.#conversation.id);
     this.#updateConversationState();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.chatDeleted));
@@ -1650,7 +1671,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       let announcedAnswerLoading = false;
       let announcedAnswerReady = false;
       for await (const data of items) {
-        step.sideEffect = undefined;
+        step.requestApproval = undefined;
         switch (data.type) {
           case AiAssistanceModel.AiAgent.ResponseType.USER_QUERY: {
             this.#messages.push({
@@ -1711,10 +1732,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           case AiAssistanceModel.AiAgent.ResponseType.SIDE_EFFECT: {
             step.isLoading = false;
             step.code ??= data.code;
-            step.sideEffect = {
+            step.requestApproval = {
+              description: data.description,
               onAnswer: (result: boolean) => {
                 data.confirm(result);
-                step.sideEffect = undefined;
+                step.requestApproval = undefined;
                 this.requestUpdate();
               },
             };
@@ -1726,6 +1748,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             step.code ??= data.code;
             step.output ??= data.output;
             step.canceled = data.canceled;
+            step.widgets ??= data.widgets;
             commitStep();
             break;
           }

package/front_end/panels/ai_assistance/README.md

@@ -83,3 +83,64 @@ The spinner displayed next to a step in the UI is intentionally tied to the **co
 *   **Providing Continuous Feedback**: Using the conversation's `isLoading` ensures a persistent visual indicator that the AI is actively working on the query, even if individual steps are quickly parsed. This prevents the UI from appearing unresponsive.
 *   **Avoiding a "Stuck" Feeling**: If the spinner were tied to `step.isLoading`, it would flicker on and off rapidly, potentially making the user feel that the AI has stopped processing or is stuck.
 *   **Clear Progress Visualization**: The spinner is dynamically moved to the *last* active step in the list as long as the overall conversation is loading. Once a step is completed, it receives a checkmark, and the spinner moves to the next active step.
+
+## AI-Defined UI Widgets
+
+To provide a richer user experience, AI functions can now return data that represents UI widgets. These widgets are then rendered directly within the AI assistance panel, allowing for more interactive and contextual responses.
+
+### Data Structure for Widgets
+
+This is achieved through a new type of `ModelMessagePart`: the `WidgetPart`.
+
+-   **`WidgetPart`**: Represents a UI widget to be rendered. It contains a `widget` object with the following properties:
+    -   `name`: A string identifier for the widget to be rendered (e.g., `'freestyler'`). This name is used by the frontend to select the correct widget component.
+    -   `data`: An object containing the data required by the widget. The structure of this data is specific to each widget.
+
+A `ModelChatMessage` can contain one or more `WidgetPart`s, usually as part of the final answer.
+
+**Example `ModelChatMessage` with a `WidgetPart`:**
+
+```json
+{
+  "entity": "MODEL",
+  "parts": [
+    {
+      "type": "answer",
+      "text": "Here is a widget to help you with CSS."
+    },
+    {
+      "type": "widget",
+      "widget": {
+        "name": "freestyler",
+        "data": {
+          "css": "color: red;"
+        }
+      }
+    }
+  ]
+}
+```
+
+### From AI Function to UI
+
+The process of rendering an AI-defined UI widget begins within the AI function handler itself. AI functions, typically defined in `front_end/models/ai_assistance/agents/AiAgent.js`, can return an `AiWidget` type as part of their response.
+
+1.  **AI Function Output**: An AI function constructs an `AiWidget` object, specifying its `name` (e.g., `'freestyler'` or `'COMPUTED_STYLES'`) and a `data` payload that contains all the necessary information for the widget to render.
+
+2.  **`ModelChatMessage` Integration**: This `AiWidget` is then encapsulated within a `WidgetPart`, which is added to the `parts` array of a `ModelChatMessage`. This `ModelChatMessage` is what the `ChatMessage` UI component receives.
+
+3.  **`ChatMessage` Processing**: In `front_end/panels/ai_assistance/components/ChatMessage.ts`, the `ChatMessage` component is responsible for iterating through the `parts` of a `ModelChatMessage`. When it encounters a `WidgetPart`, it delegates the rendering to the `renderStepWidgets` function.
+
+4.  **`renderStepWidgets` Mapping**: The `renderStepWidgets` function acts as a registry and renderer for different widget types. It reads the `widget.name` from the `WidgetPart` and, based on this name, calls a specific `make...Widget` function (e.g., `makeComputedStyleWidget` for `'COMPUTED_STYLES'` widgets).
+
+5.  **Widget Instantiation and Rendering**: Each `make...Widget` function is responsible for taking the `widget.data` and converting it into a `UI.Widget.widgetConfig` object. This configuration is then used with the `<devtools-widget>` Lit component, which dynamically instantiates the corresponding `UI.Widget` subclass and renders it into the DOM.
+
+This modular approach ensures that new UI widgets can be introduced and managed by AI functions without requiring significant changes to the core messaging or rendering infrastructure.
+
+The `ChatMessage` component is responsible for handling `WidgetPart`s. When it encounters a `WidgetPart`, it will:
+
+1.  Look up the widget name (`widget.name`) in a registry of available widget components.
+2.  Instantiate the corresponding widget component.
+3.  Pass the `widget.data` to the component as properties.
+
+This allows for a flexible system where new widgets can be added to the frontend and then invoked by the AI without requiring changes to the core message handling logic.

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

@@ -10,7 +10,10 @@ 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 Root from '../../../core/root/root.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type {AiWidget, ComputedStyleAiWidget} 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';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
@@ -20,9 +23,10 @@ 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 Elements from '../../elements/elements.js';
 
 import chatMessageStyles from './chatMessage.css.js';
-import {WalkthroughView} from './WalkthroughView.js';
+import {walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
 
 const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
@@ -96,18 +100,14 @@ const UIStringsNotTranslate = {
    * @description Displayed when the user stop the response
    */
   stoppedResponse: 'You stopped this response',
-  /**
-   * @description Prompt for user to confirm code execution that may affect the page.
-   */
-  sideEffectConfirmationDescription: 'This code may modify page content. Continue?',
   /**
    * @description Button text that confirm code execution that may affect the page.
    */
-  positiveSideEffectConfirmation: 'Continue',
+  confirmActionRequestApproval: 'Continue',
   /**
    * @description Button text that cancels code execution that may affect the page.
    */
-  negativeSideEffectConfirmation: 'Cancel',
+  declineActionRequestApproval: 'Cancel',
   /**
    * @description The generic name of the AI agent (do not translate)
    */
@@ -168,6 +168,11 @@ const UIStringsNotTranslate = {
    * @description Title for the button that shows the thinking process (walkthrough).
    */
   showThinking: 'Show thinking',
+
+  /**
+   * @description Title for the button that takes the user into other DevTools panels to reveal items the AI references.
+   */
+  reveal: 'Reveal'
 } as const;
 
 export interface Step {
@@ -176,12 +181,14 @@ export interface Step {
   title?: string;
   code?: string;
   output?: string;
+  widgets?: AiWidget[];
   canceled?: boolean;
-  sideEffect?: ConfirmSideEffectDialog;
+  requestApproval?: ConfirmSideEffectDialog;
   contextDetails?: [AiAssistanceModel.AiAgent.ContextDetail, ...AiAssistanceModel.AiAgent.ContextDetail[]];
 }
 
 export interface ConfirmSideEffectDialog {
+  description: string|null;
   onAnswer: (result: boolean) => void;
 }
 
@@ -386,13 +393,14 @@ function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownLitRendere
   // clang-format on
 }
 
-function titleForStep(step: Step): string {
+export function titleForStep(step: Step): string {
   return step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
 }
 
 function renderTitle(step: Step): Lit.LitTemplate {
-  const paused =
-      step.sideEffect ? html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` : Lit.nothing;
+  const paused = step.requestApproval ?
+      html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
+      Lit.nothing;
 
   return html`<span class="title">${paused}${titleForStep(step)}</span>`;
 }
@@ -444,7 +452,7 @@ function renderStepDetails({
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
-  const sideEffects = isLast && step.sideEffect ? renderSideEffectConfirmationUi(step) : Lit.nothing;
+  const sideEffects = isLast && step.requestApproval ? renderSideEffectConfirmationUi(step) : Lit.nothing;
   const thought = step.thought ? html`<p>${renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` : Lit.nothing;
 
   // clang-format off
@@ -481,7 +489,10 @@ function renderWalkthroughSidebarButton(
   if (walkthrough.isInlined) {
     return Lit.nothing;
   }
-  const title = input.isLoading ? titleForStep(lastStep) : lockedString(UIStringsNotTranslate.showThinking);
+  const title = walkthroughTitle({
+    isLoading: input.isLoading,
+    lastStep,
+  });
 
   // clang-format off
   return html`
@@ -520,7 +531,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
     // No steps = no walkthrough UI in the chat view.
     return Lit.nothing;
   }
-  const sideEffectSteps = steps.filter(s => s.sideEffect);
+  const sideEffectSteps = steps.filter(s => s.requestApproval);
   // If the walkthrough is in the sidebar, we render a button into the
   // ChatView to open it.
   const openWalkThroughSidebarButton =
@@ -552,7 +563,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
         markdownRenderer: input.markdownRenderer,
         isInlined: true,
         isExpanded: input.isLastMessage &&
-            (input.walkthrough.isExpanded || steps.some(step => Boolean(step.sideEffect))),
+            (input.walkthrough.isExpanded || steps.some(step => Boolean(step.requestApproval))),
         onToggle: input.walkthrough.onToggle,
       })}></devtools-widget>
     </div>
@@ -571,14 +582,14 @@ function renderStepBadge({step, isLoading, isLast}: {
   isLoading: boolean,
   isLast: boolean,
 }): Lit.LitTemplate {
-  if (isLoading && isLast && !step.sideEffect) {
+  if (isLoading && isLast && !step.requestApproval) {
     return html`<devtools-spinner></devtools-spinner>`;
   }
 
   let iconName = 'checkmark';
   let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
   let role: 'button'|undefined = 'button';
-  if (isLast && step.sideEffect) {
+  if (isLast && step.requestApproval) {
     role = undefined;
     ariaLabel = undefined;
     iconName = 'pause-circle';
@@ -601,17 +612,18 @@ 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.sideEffect,
-    paused: Boolean(step.sideEffect),
+    empty: !step.thought && !step.code && !step.contextDetails && !step.requestApproval,
+    paused: Boolean(step.requestApproval),
     canceled: Boolean(step.canceled),
   });
   // clang-format off
   return html`
     <details class=${stepClasses}
       jslog=${VisualLogging.section('step')}
-      .open=${Boolean(step.sideEffect)}>
+      .open=${Boolean(step.requestApproval)}>
       <summary>
         <div class="summary">
           ${renderStepBadge({ step, isLoading, isLast })}
@@ -623,12 +635,114 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
         </div>
       </summary>
       ${renderStepDetails({step, markdownRenderer, isLast})}
-    </details>`;
+    </details>
+    ${shouldRenderWidgets ? html`
+      <div class="step-widgets-wrapper">
+        ${Lit.Directives.until(renderStepWidgets(step))}
+      </div>` : Lit.nothing
+     }`;
+  // clang-format on
+}
+
+interface WidgetMakerResponse {
+  renderedWidget: Lit.LitTemplate;
+  revealable: unknown;
+}
+
+async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
+  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;
+  }
+  const model = new ComputedStyle.ComputedStyleModel.ComputedStyleModel(resolved);
+  const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(resolved, 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,
+    computedStyleModel: model,
+    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>`;
   // clang-format on
+
+  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(resolved)};
+}
+
+function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
+  if (response === null) {
+    return Lit.nothing;
+  }
+
+  function onReveal(): void {
+    if (response === null) {
+      return;
+    }
+    void Common.Revealer.reveal(response?.revealable);
+  }
+
+  // clang-format off
+  return html`
+    <div class="widget-content-container">
+      ${response.renderedWidget}
+    </div>
+    <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>
+    </div>
+    `;
+  // clang-format on
+}
+
+/**
+ * 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`.
+ *
+ * Currently, only 'COMPUTED_STYLES' widgets are supported. For these, the
+ * `makeComputedStyleWidget` function is called to construct the necessary
+ * data and configuration for the `Elements.ComputedStyleWidget.ComputedStyleWidget`
+ * component. 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.
+ */
+async function renderStepWidgets(step: Step): Promise<Lit.LitTemplate> {
+  if (!step.widgets || step.widgets.length === 0) {
+    return Lit.nothing;
+  }
+  const ui = await Promise.all(step.widgets.map(async widgetData => {
+    if (widgetData.name === 'COMPUTED_STYLES') {
+      const response = await makeComputedStyleWidget(widgetData);
+      return renderWidgetResponse(response);
+    }
+    return Lit.nothing;
+  }));
+  return html`${ui}`;
 }
 
 function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
-  if (!step.sideEffect) {
+  if (!step.requestApproval) {
     return Lit.nothing;
   }
 
@@ -637,7 +751,7 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
     class="side-effect-confirmation"
     jslog=${VisualLogging.section('side-effect-confirmation')}
   >
-    <p>${lockedString(UIStringsNotTranslate.sideEffectConfirmationDescription)}</p>
+    ${step.requestApproval.description ? html`<p>${step.requestApproval.description}</p>` : Lit.nothing}
     <div class="side-effect-buttons-container">
       <devtools-button
         .data=${
@@ -646,9 +760,9 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
             jslogContext: 'decline-execute-code',
           } as Buttons.Button.ButtonData
         }
-        @click=${() => step.sideEffect?.onAnswer(false)}
+        @click=${() => step.requestApproval?.onAnswer(false)}
       >${lockedString(
-        UIStringsNotTranslate.negativeSideEffectConfirmation,
+        UIStringsNotTranslate.declineActionRequestApproval,
       )}</devtools-button>
       <devtools-button
         .data=${
@@ -658,9 +772,9 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
             iconName: 'play',
           } as Buttons.Button.ButtonData
         }
-        @click=${() => step.sideEffect?.onAnswer(true)}
+        @click=${() => step.requestApproval?.onAnswer(true)}
       >${
-          lockedString(UIStringsNotTranslate.positiveSideEffectConfirmation)
+          lockedString(UIStringsNotTranslate.confirmActionRequestApproval)
       }</devtools-button>
     </div>
   </div>`;

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

@@ -20,7 +20,11 @@ import chatViewStyles from './chatView.css.js';
 
 export {ChatInput, type ImageInputData} from './ChatInput.js';
 
-const {ref, repeat, classMap} = Directives;
+const {
+  ref,
+  repeat,
+  classMap,
+} = Directives;
 
 /*
 * Strings that don't need to be translated at this time.

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

@@ -10,9 +10,11 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import chatMessageStyles from './chatMessage.css.js';
-import {type ModelChatMessage, renderStep} from './ChatMessage.js';
+import {type ModelChatMessage, renderStep, type Step, titleForStep} from './ChatMessage.js';
 import walkthroughViewStyles from './walkthroughView.css.js';
 
+const lockedString = i18n.i18n.lockedString;
+
 const {html, render} = Lit;
 
 const UIStrings = {
@@ -25,9 +27,9 @@ const UIStrings = {
    */
   title: 'Investigation steps',
   /**
-   * @description Title for the inline walkthrough view.
+   * @description Title for the button that shows the thinking process (walkthrough).
    */
-  inlineTitle: 'Show thinking',
+  showThinking: 'Show thinking',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -41,8 +43,17 @@ export interface ViewInput {
   onToggle: (isOpen: boolean) => void;
 }
 
-function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate): Lit.LitTemplate {
-  if (!input.isInlined) {
+export function walkthroughTitle(input: {
+  isLoading: boolean,
+  lastStep: Step,
+}): string {
+  const title = input.isLoading ? titleForStep(input.lastStep) : lockedString(UIStrings.showThinking);
+  return title;
+}
+
+function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
+  const lastStep = steps.at(-1);
+  if (!input.isInlined || !lastStep) {
     return Lit.nothing;
   }
 
@@ -54,7 +65,8 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate)
   return html`
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
       <summary>
-        ${i18nString(UIStrings.inlineTitle)}
+        ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
+        ${walkthroughTitle({isLoading: input.isLoading, lastStep,})}
         <devtools-icon name="chevron-down"></devtools-icon>
       </summary>
       ${stepsOutput}
@@ -123,7 +135,7 @@ export const DEFAULT_VIEW = (
       ${chatMessageStyles}
       ${walkthroughViewStyles}
     </style>
-    ${input.isInlined ? renderInlineWalkthrough(input, stepsOutput)
+    ${input.isInlined ? renderInlineWalkthrough(input, stepsOutput, steps)
                      : renderSidebarWalkthrough(input, stepsOutput, steps.length)
     }`, target);
   // clang-format on