chrome-devtools-frontend 1.0.1592129 → 1.0.1593518

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.ts

@@ -5,7 +5,6 @@
 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 * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Logs from '../../logs/logs.js';
@@ -35,13 +34,12 @@ You are a Web Development Assistant integrated into Chrome DevTools. Your tone i
 You aim to help developers of all levels, prioritizing teaching web concepts as the primary entry point for any solution.
 
 # Considerations
-* Determine what the question the domain of the question is - styling, network, sources, performance or other part of DevTools.
+* Determine what is the domain of the question - styling, network, sources, performance or other part of DevTools.
 * Proactively try to gather additional data. If a select specific data can be selected, select one.
 * Always try select single specific context before answering the question.
 * Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
 * When presenting solutions, clearly distinguish between the primary cause and contributing factors.
 * Please answer only if you are sure about the answer. Otherwise, explain why you're not able to answer.
-* When answering, always consider MULTIPLE possible solutions.
 * If you are unable to gather more information provide a comprehensive guide to how to fix the issue using Chrome DevTools and explain how and why.
 * You can suggest any panel or flow in Chrome DevTools that may help the user out
 
@@ -50,9 +48,13 @@ You aim to help developers of all levels, prioritizing teaching web concepts as
 * Always specify the language for code blocks (e.g., \`\`\`css, \`\`\`javascript).
 * Keep text responses concise and scannable.
 
+* **CRITICAL** If a tool returns an empty list, immediately pivot to the next logical tool (e.g., from sources to network).
+* **CRITICAL** Always exhaust all possible way to find and select context from different domains.
 * **CRITICAL** NEVER write full Python programs - you should only write individual statements that invoke a single function from the provided library.
 * **CRITICAL** NEVER output text before a function call. Always do a function call first.
 * **CRITICAL** You are a debugging assistant in DevTools. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.
+* **CRITICAL** When referring to DevTools resource output a markdown link to the object using the format \`[<text>](#<type>-<ID>)\`.
+* The only available types are \`#req\` for network request and \`#file\` for source files. Only use ID inside the link, never ask about user selecting by ID.
 `;
 
 /**
@@ -117,9 +119,11 @@ export class ContextSelectionAgent extends AiAgent<never> {
           }
 
           requests.push({
+            id: request.requestId(),
             url: request.url(),
             statusCode: request.statusCode,
             duration: i18n.TimeUtilities.secondsToString(request.duration),
+            transferSize: i18n.ByteUtilities.formatBytesToKb(request.transferSize),
           });
         }
 
@@ -135,18 +139,18 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
     });
 
-    this.declareFunction<{url: string}>('selectNetworkRequest', {
+    this.declareFunction<{id: string}>('selectNetworkRequest', {
       description:
           `Selects a specific network request to further provide information about. Use this when asked about network requests issues.`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
         nullable: true,
-        required: ['url'],
+        required: ['id'],
         properties: {
-          url: {
+          id: {
             type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The url of the requests',
+            description: 'The id of the network request',
             nullable: false,
           },
         },
@@ -154,15 +158,12 @@ export class ContextSelectionAgent extends AiAgent<never> {
       displayInfoFromArgs: args => {
         return {
           title: lockedString('Getting network request…'),
-          action: `selectNetworkRequest(${args.url})`,
+          action: `selectNetworkRequest(${args.id})`,
         };
       },
-      handler: async ({url}) => {
-        // TODO: Switch to using IDs to make is easier to link to as well.
+      handler: async ({id}) => {
         const request = Logs.NetworkLog.NetworkLog.instance().requests().find(req => {
-          return req.url() === Platform.DevToolsPath.urlString`${url}` ||
-              req.url() === Platform.DevToolsPath.urlString`${url.slice(0, -1)}` ||
-              req.url() === Platform.DevToolsPath.urlString`${url}/`;
+          return req.requestId() === id;
         });
 
         if (request) {
@@ -195,32 +196,32 @@ export class ContextSelectionAgent extends AiAgent<never> {
         };
       },
       handler: async () => {
-        // We get multiple of the same file name
-        // so we create a set and the pick based
-        // on heuristics in the select function
-        const files = new Set();
-        for (const file of this.#getUISourceCodes()) {
-          files.add(file.fullDisplayName());
+        const files: Array<{file: string, id: number | undefined}> = [];
+        for (const file of ContextSelectionAgent.getUISourceCodes()) {
+          files.push({
+            file: file.fullDisplayName(),
+            id: ContextSelectionAgent.uiSourceCodeId.get(file),
+          });
         }
 
         return {
-          result: [...files],
+          result: files,
         };
       },
     });
 
-    this.declareFunction<{name: string}>('selectSourceFile', {
+    this.declareFunction<{id: number}>('selectSourceFile', {
       description:
-          `Selects a source file. Use this when asked about files on the page. Use listSourceFiles if you don't know the full path name.`,
+          `Selects a source file. Use this when asked about files on the page. Use listSourceFiles to find the file ID.`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
         nullable: true,
-        required: ['name'],
+        required: ['id'],
         properties: {
-          name: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The full path name of the file you want to select.',
+          id: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The id (URL) of the file you want to select.',
             nullable: false,
           },
         },
@@ -228,22 +229,19 @@ export class ContextSelectionAgent extends AiAgent<never> {
       displayInfoFromArgs: args => {
         return {
           title: lockedString('Getting source file…'),
-          action: `selectSourceFile(${args.name})`,
+          action: `selectSourceFile(${args.id})`,
         };
       },
       handler: async params => {
-        // In some cases we get multiple files
-        // use the heuristics bellow to pick the better one
-        const files = this.#getUISourceCodes().filter(file => file.fullDisplayName() === params.name);
+        const file = ContextSelectionAgent.getUISourceCodes().find(
+            file => ContextSelectionAgent.uiSourceCodeId.get(file) === params.id);
 
-        if (files.length === 0) {
+        if (!file) {
           return {
             error: 'Unable to find file.',
           };
         }
 
-        // This help us pick the file that is resolved source map.
-        const file = files.find(f => f.contentType().isFromSourceMap()) ?? files[0];
         return {
           context: new FileContext(file),
           description: 'User selected a source file',
@@ -293,14 +291,23 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       displayInfoFromArgs: () => {
         return {
-          title: lockedString('Please select an element on the page…'),
-          action: 'selectElement()',
+          title: lockedString('Select an element on the page or in the Elements panel'),
         };
       },
-      handler: async () => {
+      handler: async (_params, options) => {
         if (!this.#onInspectElement) {
-          return {error: 'The inspect element action is not available.'};
+          return {
+            error: 'The inspect element action is not available.',
+          };
         }
+
+        if (!options?.approved) {
+          return {
+            requiresApproval: true,
+            description: null,
+          };
+        }
+
         const node = await this.#onInspectElement();
         if (node) {
           return {
@@ -315,27 +322,51 @@ export class ContextSelectionAgent extends AiAgent<never> {
     });
   }
 
-  #getUISourceCodes = (): Workspace.UISourceCode.UISourceCode[] => {
+  async * handleContextDetails(): AsyncGenerator<ContextResponse, void, void> {
+  }
+
+  override async enhanceQuery(query: string): Promise<string> {
+    return query;
+  }
+
+  static lastSourceId = 0;
+  static uiSourceCodeId = new WeakMap<Workspace.UISourceCode.UISourceCode, number>();
+  /**
+   * This is a heuristic algorithm that gets all the source files coming from the
+   * network and assigns unique ids to be linked from the LLM Markdown response.
+   * Steps we do:
+   * 1. Get all project that are coming from the Network. This scopes down
+   * sources exposed to the LLM
+   * 2. Remove all ignore listed source code. We further reduce thing that the
+   * user most likely does not have interest in, from global setting.
+   * 3.1. Source files don't have an uniqueId so we use the URL to differentiate
+   * them.
+   * 3.2. In cases where we encounter a duplicated URLs we prefer the latest one
+   * coming from SourceMaps (usually only one) as that has simple code and
+   * usually is what the user authored.
+   */
+  static getUISourceCodes(): Workspace.UISourceCode.UISourceCode[] {
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const projects =
         workspace.projects().filter(project => project.type() === Workspace.Workspace.projectTypes.Network);
-    const uiSourceCodes = [];
+    const uiSourceCodes = new Map<string, Workspace.UISourceCode.UISourceCode>();
+
     for (const project of projects) {
       for (const uiSourceCode of project.uiSourceCodes()) {
         if (uiSourceCode.isIgnoreListed()) {
           continue;
         }
-        uiSourceCodes.push(uiSourceCode);
+        const url = uiSourceCode.url();
+        // This helps us pick the file that is a resolved source map.
+        if (!uiSourceCodes.get(url) || uiSourceCode.contentType().isFromSourceMap()) {
+          uiSourceCodes.set(url, uiSourceCode);
+          if (!ContextSelectionAgent.uiSourceCodeId.has(uiSourceCode)) {
+            ContextSelectionAgent.uiSourceCodeId.set(uiSourceCode, ++ContextSelectionAgent.lastSourceId);
+          }
+        }
       }
     }
 
-    return uiSourceCodes;
-  };
-
-  async * handleContextDetails(): AsyncGenerator<ContextResponse, void, void> {
-  }
-
-  override async enhanceQuery(query: string): Promise<string> {
-    return query;
+    return [...uiSourceCodes.values()];
   }
 }

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -18,6 +18,7 @@ import {FREESTYLER_WORLD_NAME} from '../injected.js';
 import {
   type AgentOptions as BaseAgentOptions,
   AiAgent,
+  type ComputedStyleAiWidget,
   type ContextResponse,
   ConversationContext,
   type ConversationSuggestions,
@@ -325,7 +326,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
         };
       },
       handler: async params => {
-        return await this.getStyles(params.elements, params.styleProperties);
+        return await this.#getStyles(params.elements, params.styleProperties);
       },
     });
 
@@ -606,7 +607,9 @@ const data = {
     return this.context?.getItem() ?? null;
   }
 
-  async getStyles(elements: number[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
+  async #getStyles(elements: number[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
+    const widgets: ComputedStyleAiWidget[] = [];
+
     const result:
         Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
     for (const uid of elements) {
@@ -630,6 +633,15 @@ const data = {
       if (!matchedStyles) {
         return {error: 'Error: Could not get authored styles.'};
       }
+      widgets.push({
+        name: 'COMPUTED_STYLES',
+        data: {
+          computedStyles: styles,
+          backendNodeId: node.backendNodeId(),
+          matchedCascade: matchedStyles,
+          properties,
+        }
+      });
       for (const prop of properties) {
         result[uid].computed[prop] = styles.get(prop);
       }
@@ -647,6 +659,7 @@ const data = {
     }
     return {
       result: JSON.stringify(result, null, 2),
+      widgets,
     };
   }
 
@@ -701,6 +714,7 @@ const data = {
 
         return {
           requiresApproval: true,
+          description: lockedString('This code may modify page content. Continue?'),
         };
       }
       if (result.canceled) {

package/front_end/models/computed_style/ComputedStyleModel.ts

@@ -12,17 +12,18 @@ import * as SDK from '../../core/sdk/sdk.js';
  * Model trackComputedStyleUpdatesForNode method.
  */
 export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  #node: SDK.DOMModel.DOMNode|null;
-  #cssModel: SDK.CSSModel.CSSModel|null;
-  private eventListeners: Common.EventTarget.EventDescriptor[];
+  #node: SDK.DOMModel.DOMNode|null = null;
+  #cssModel: SDK.CSSModel.CSSModel|null = null;
+  private eventListeners: Common.EventTarget.EventDescriptor[] = [];
   private frameResizedTimer?: number;
   private computedStylePromise?: Promise<ComputedStyle|null>;
 
   constructor(node?: SDK.DOMModel.DOMNode|null) {
     super();
-    this.#cssModel = null;
-    this.eventListeners = [];
-    this.#node = node ?? null;
+    if (node) {
+      // Call the explicit setter to trigger the setup and event binding.
+      this.node = node;
+    }
   }
 
   get node(): SDK.DOMModel.DOMNode|null {
@@ -39,6 +40,21 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     return this.#cssModel?.isEnabled() ? this.#cssModel : null;
   }
 
+  /**
+   * Clears all event listeners to ensure the instance can be GC'd without leaking memory.
+   */
+  dispose(): void {
+    Common.EventTarget.removeEventListeners(this.eventListeners);
+    this.eventListeners = [];
+    this.node = null;
+    this.#cssModel = null;
+    this.computedStylePromise = undefined;
+    if (this.frameResizedTimer) {
+      clearTimeout(this.frameResizedTimer);
+      this.frameResizedTimer = undefined;
+    }
+  }
+
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
     if (this.#cssModel === cssModel) {
       return;
@@ -168,6 +184,24 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
     return matchedStyles.node() === this.node ? matchedStyles : null;
   }
+
+  computePropertyTraces(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
+      Map<string, SDK.CSSProperty.CSSProperty[]> {
+    const result = new Map<string, SDK.CSSProperty.CSSProperty[]>();
+    for (const style of matchedStyles.nodeStyles()) {
+      const allProperties = style.allProperties();
+      for (const property of allProperties) {
+        if (!property.activeInStyle() || !matchedStyles.propertyState(property)) {
+          continue;
+        }
+
+        const matches = result.get(property.name) ?? [];
+        matches.push(property);
+        result.set(property.name, matches);
+      }
+    }
+    return result;
+  }
 }
 
 export const enum Events {

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

@@ -13,6 +13,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
+import * as Greendev from '../../models/greendev/greendev.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -459,9 +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;
+      }
+    }
 
-  if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
     Lit.render(html`
       ${toolbarView(input)}
       <div class="ai-assistance-view-container">
@@ -479,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}
@@ -915,7 +930,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
-  async handleBreakpointConversation(uiLocation: Workspace.UISourceCode.UILocation): Promise<void> {
+  async handleBreakpointConversation(uiLocation: Workspace.UISourceCode.UILocation, errorMsg?: string): Promise<void> {
     const context = new AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext(uiLocation);
     this.#selectedBreakpoint = context;
     const conversation = new AiAssistanceModel.AiConversation.AiConversation(
@@ -934,6 +949,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#conversation?.setContext(context);
     this.requestUpdate();
     await UI.ViewManager.ViewManager.instance().showView(AiAssistancePanel.panelName);
+    const prompt = errorMsg ? `debug the error "${errorMsg}" using breakpoint debugging agent` :
+                              'debug the error using breakpoint debugging agent';
+    await this.#startConversation(prompt);
   }
 
   override wasShown(): void {
@@ -1434,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));
@@ -1645,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({
@@ -1658,6 +1684,10 @@ 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) {
+              this.#openWalkthrough(systemMessage);
+            }
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.QUERYING: {
@@ -1702,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();
               },
             };
@@ -1717,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.