chrome-devtools-frontend 1.0.1537268 → 1.0.1538310

package/front_end/core/common/SettingRegistration.ts

@@ -299,21 +299,24 @@ export interface SettingRegistration {
    * jump to the experiment. If a setting is not disabled, the experiment entry will be ignored.
    */
   deprecationNotice?: {disabled: boolean, warning: () => Platform.UIString.LocalizedString, experiment?: string};
-
   /**
-   * Optional information to learn more about the setting. If provided, a `(?)` icon will show next to the setting
-   * in the Settings panel with a link to learn more, and the `tooltip` will be presented to the user when hovering
-   * the `(?)` icon.
+   * See {@link LearnMore} for more info.
    */
   learnMore?: LearnMore;
 }
 
 /**
- * Metadata to learn more about a setting. The `url` will be used to construct
- * a `(?)` icon link and the `tooltip` will be shown when hovering the icon.
+ * Optional information to learn more about the setting.
+ *
+ * If tooltip is provided creates a (i) icon with rich tooltip with said tooltip
+ *
+ * If url is provided creates a (?) icon with a link to said url
+ *
+ * If both tooltip is provided creates a (i) icon with rich tooltip
+ * and a link inside the rich tool tip with text `Learn more`
  */
 export interface LearnMore {
-  tooltip: () => Platform.UIString.LocalizedString;
+  tooltip?: () => Platform.UIString.LocalizedString;
   url?: Platform.DevToolsPath.UrlString;
 }
 

package/front_end/core/common/Settings.ts

@@ -565,6 +565,9 @@ export class Setting<V> {
     return null;
   }
 
+  /**
+   * See {@link LearnMore} for more info
+   */
   learnMore(): LearnMore|null {
     return this.#registration?.learnMore ?? null;
   }

package/front_end/core/host/AidaClient.ts

@@ -342,6 +342,7 @@ export interface AidaRegisterClientEvent {
   disable_user_content_logging: boolean;
   do_conversation_client_event?: DoConversationClientEvent;
   complete_code_client_event?: {user_acceptance: UserAcceptance}|{user_impression: UserImpression};
+  generate_code_client_event?: {user_acceptance: UserAcceptance}|{user_impression: UserImpression};
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

package/front_end/core/host/UserMetrics.ts

@@ -527,7 +527,9 @@ export enum Action {
   InsightTeaserGenerationCompleted = 192,
   InsightTeaserGenerationAborted = 193,
   InsightTeaserGenerationErrored = 194,
-  MAX_VALUE = 195,
+  AiCodeGenerationSuggestionDisplayed = 195,
+  AiCodeGenerationSuggestionAccepted = 196,
+  MAX_VALUE = 197,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/core/root/Runtime.ts

@@ -422,6 +422,13 @@ export interface HostConfigAiCodeCompletion {
   userTier: string;
 }
 
+export interface HostConfigAiCodeGeneration {
+  modelId: string;
+  temperature: number;
+  enabled: boolean;
+  userTier: string;
+}
+
 export interface HostConfigDeepLinksViaExtensibilityApi {
   enabled: boolean;
 }
@@ -556,6 +563,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
   devToolsAiCodeCompletion: HostConfigAiCodeCompletion,
+  devToolsAiCodeGeneration: HostConfigAiCodeGeneration,
   devToolsVeLogging: HostConfigVeLogging,
   devToolsWellKnown: HostConfigWellKnown,
   devToolsPrivacyUI: HostConfigPrivacyUI,

package/front_end/core/sdk/sdk-meta.ts

@@ -353,8 +353,11 @@ const UIStrings = {
   /**
    * @description Label of a checkbox in the DevTools settings UI.
    */
-  enableRemoteFileLoading:
-      'Allow `DevTools` to load resources, such as source maps, from remote file paths. Disabled by default for security reasons.',
+  enableRemoteFileLoading: 'Allow loading remote file path resources in DevTools',
+  /**
+   * @description Tooltip text for a setting that controls whether external resource can be loaded in DevTools.
+   */
+  remoteFileLoadingInfo: 'Example resource are source maps. Disabled by default for security reasons.',
   /**
    * @description Tooltip text for a setting that controls the network cache. Disabling the network cache can simulate the network connections of users that are visiting a page for the first time.
    */
@@ -1160,4 +1163,7 @@ Common.Settings.registerSettingExtension({
   settingName: 'network.enable-remote-file-loading',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
+  learnMore: {
+    tooltip: i18nLazyString(UIStrings.remoteFileLoadingInfo),
+  }
 });

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -7,6 +7,7 @@
 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 SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -278,15 +279,15 @@ export class RenderingOptionsView extends UI.Widget.VBox {
 
   #appendCheckbox(
       label: Common.UIString.LocalizedString, subtitle: Common.UIString.LocalizedString,
-      setting: Common.Settings.Setting<boolean>, metric?: UI.SettingsUI.UserMetricOptions): UI.UIUtils.CheckboxLabel {
+      setting: Common.Settings.Setting<boolean>, metric?: UI.UIUtils.UserMetricOptions): UI.UIUtils.CheckboxLabel {
     const checkbox = UI.UIUtils.CheckboxLabel.create(label, false, subtitle, setting.name);
-    UI.SettingsUI.bindCheckbox(checkbox, setting, metric);
+    UI.UIUtils.bindCheckbox(checkbox, setting, metric);
     this.contentElement.appendChild(checkbox);
     return checkbox;
   }
 
   #appendSelect(label: string, setting: Common.Settings.Setting<unknown>): void {
-    const control = UI.SettingsUI.createControlForSetting(setting, label);
+    const control = SettingsUI.SettingsUI.createControlForSetting(setting, label);
     if (control) {
       this.contentElement.appendChild(control);
     }

package/front_end/generated/SupportedCSSProperties.js

@@ -519,6 +519,7 @@ export const generatedProperties = [
    "inset-block-start",
    "inset-inline-end",
    "inset-inline-start",
+   "interactivity",
    "interest-delay-end",
    "interest-delay-start",
    "interpolate-size",

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

@@ -627,19 +627,24 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
     const {parsedTrace} = focus;
-    const insightSet = focus.primaryInsightSet;
 
-    this.declareFunction<{insightName: string}, {details: string}>('getInsightDetails', {
+    this.declareFunction<{insightSetId: string, insightName: string}, {details: string}>('getInsightDetails', {
       description:
-          'Returns detailed information about a specific insight. Use this before commenting on any specific issue to get more information.',
+          'Returns detailed information about a specific insight of an insight set. Use this before commenting on any specific issue to get more information.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
         nullable: false,
         properties: {
+          insightSetId: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description:
+                'The id for the specific insight set. Only use the ids given in the "Available insight sets" list.',
+            nullable: false,
+          },
           insightName: {
             type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The name of the insight. Only use the insight names given in the Available Insights list.',
+            description: 'The name of the insight. Only use the insight names given in the "Available insights" list.',
             nullable: false,
           }
         },
@@ -647,19 +652,30 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       displayInfoFromArgs: params => {
         return {
           title: lockedString(`Investigating insight ${params.insightName}…`),
-          action: `getInsightDetails('${params.insightName}')`
+          action: `getInsightDetails('${params.insightSetId}', '${params.insightName}')`
         };
       },
       handler: async params => {
         debugLog('Function call: getInsightDetails', params);
+        const insightSet = parsedTrace.insights?.get(params.insightSetId);
+        if (!insightSet) {
+          const valid = ([...parsedTrace.insights?.values() ?? []])
+                            .map(
+                                insightSet => `id: ${insightSet.id}, url: ${insightSet.url}, bounds: ${
+                                    this.#formatter?.serializeBounds(insightSet.bounds)}`)
+                            .join('; ');
+          return {error: `Invalid insight set id. Valid insight set ids are: ${valid}`};
+        }
+
         const insight = insightSet?.model[params.insightName as keyof Trace.Insights.Types.InsightModels];
         if (!insight) {
-          return {error: 'No insight available'};
+          const valid = Object.keys(insightSet?.model).join(', ');
+          return {error: `No insight available. Valid insight names are: ${valid}`};
         }
 
         const details = new PerformanceInsightFormatter(focus, insight).formatInsight();
 
-        const key = `getInsightDetails('${params.insightName}')`;
+        const key = `getInsightDetails('${params.insightSetId}', '${params.insightName}')`;
         this.#cacheFunctionResult(focus, key, details);
         return {result: {details}};
       },

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -504,9 +504,18 @@ IMPORTANT: Never show eventKey to the user.
 Title: PerformanceTraceFormatter formatTraceSummary web-dev.json.gz
 Content:
 URL: https://web.dev/cls/
-Bounds: {min: 1020034823047, max: 1020036087961}
+Trace bounds: {min: 1020034823047, max: 1020036087961}
 CPU throttling: none
 Network throttling: none
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 86EB5E5C401E3E17ECE461B3FC627867
+
+URL: https://web.dev/cls/
+Bounds: {min: 1020034834921, max: 1020036087961}
 Metrics (lab / observed):
   - LCP: 118 ms, event: (eventKey: r-1802, ts: 1020034953358), nodeId: 209
   - LCP breakdown:
@@ -537,9 +546,18 @@ Available insights:
 Title: PerformanceTraceFormatter formatTraceSummary yahoo-news.json.gz
 Content:
 URL: https://news.yahoo.com/
-Bounds: {min: 157423484442, max: 157427277166}
+Trace bounds: {min: 157423484442, max: 157427277166}
 CPU throttling: none
 Network throttling: none
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 513BDA1E9EC088611B53BFF7A859B5DD
+
+URL: https://news.yahoo.com/
+Bounds: {min: 157423488682, max: 157427277166}
 Metrics (lab / observed):
   - LCP: 464 ms, event: (eventKey: r-33210, ts: 157423953162), nodeId: 8
   - LCP breakdown:
@@ -596,12 +614,81 @@ Available insights:
     example question: How can I reduce the amount of legacy JavaScript on my page?
 === end content
 
+Title: PerformanceTraceFormatter formatTraceSummary multiple-navigations-render-blocking.json.gz
+Content:
+URL: http://localhost:8080/render-blocking
+Trace bounds: {min: 171605647473, max: 171616667355}
+CPU throttling: 1x
+Network throttling: Fast 3G
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 8671F33ECE0C8DBAEFBC2F9A2D1D6107
+
+URL: http://localhost:8080/render-blocking
+Bounds: {min: 171607579779, max: 171613750571}
+Metrics (lab / observed):
+  - LCP: 1317 ms, event: (eventKey: r-6686, ts: 171608897210), nodeId: 10
+  - LCP breakdown:
+    - TTFB: 10 ms, bounds: {min: 171607579779, max: 171607589981.99997}
+    - Render delay: 1,307 ms, bounds: {min: 171607589981.99997, max: 171608897210}
+  - CLS: 0.00
+Metrics (field / real users): n/a – no data for this page in CrUX
+Available insights:
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 171607579779, max: 171608897210}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: RenderBlocking
+    description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.
+    relevant trace bounds: {min: 171608170438, max: 171608877165}
+    example question: Show me the most impactful render blocking requests that I should focus on
+    example question: How can I reduce the number of render blocking requests?
+
+## insight set id: 1AE2016BBCC48AA090FDAE2CBBA01900
+
+URL: http://localhost:8080/render-blocking
+Bounds: {min: 171613750571, max: 171616667355}
+Metrics (lab / observed):
+  - LCP: 1310 ms, event: (eventKey: r-15639, ts: 171615060776), nodeId: 18
+  - LCP breakdown:
+    - TTFB: 3 ms, bounds: {min: 171613750571, max: 171613753188}
+    - Render delay: 1,308 ms, bounds: {min: 171613753188, max: 171615060776}
+  - CLS: 0.00
+Metrics (field / real users): n/a – no data for this page in CrUX
+Available insights:
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 171613750571, max: 171615060776}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: RenderBlocking
+    description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.
+    relevant trace bounds: {min: 171614330544, max: 171615043224}
+    example question: Show me the most impactful render blocking requests that I should focus on
+    example question: How can I reduce the number of render blocking requests?
+=== end content
+
 Title: PerformanceTraceFormatter formatTraceSummary deals with CrUX manager errors
 Content:
 URL: http://localhost/image-delivery-cases.html
-Bounds: {min: 59728641874, max: 59734400108}
+Trace bounds: {min: 59728641874, max: 59734400108}
 CPU throttling: 1x
 Network throttling: No throttling
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 9094E106056B51D078CE44F3356FE194
+
+URL: http://localhost/image-delivery-cases.html
+Bounds: {min: 59728649746, max: 59734400108}
 Metrics (lab / observed):
   - LCP: 663 ms, event: (eventKey: r-14753, ts: 59729312744), nodeId: 12
   - LCP breakdown:
@@ -663,9 +750,18 @@ Available insights:
 Title: PerformanceTraceFormatter formatTraceSummary image-delivery.json.gz
 Content:
 URL: http://localhost/image-delivery-cases.html
-Bounds: {min: 59728641874, max: 59734400108}
+Trace bounds: {min: 59728641874, max: 59734400108}
 CPU throttling: 1x
 Network throttling: No throttling
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 9094E106056B51D078CE44F3356FE194
+
+URL: http://localhost/image-delivery-cases.html
+Bounds: {min: 59728649746, max: 59734400108}
 Metrics (lab / observed):
   - LCP: 663 ms, event: (eventKey: r-14753, ts: 59729312744), nodeId: 12
   - LCP breakdown:
@@ -734,9 +830,18 @@ Available insights:
 Title: PerformanceTraceFormatter formatTraceSummary includes INP insight when there is no navigation
 Content:
 URL: https://b2607f8b04800100000289cb1c0a82ba72253000000000000000001.proxy.googlers.com/long-interaction/index.html?x=35
-Bounds: {min: 337943614456, max: 337947260898}
+Trace bounds: {min: 337943614456, max: 337947260898}
 CPU throttling: none
 Network throttling: none
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: NO_NAVIGATION
+
+URL: https://b2607f8b04800100000289cb1c0a82ba72253000000000000000001.proxy.googlers.com/long-interaction/index.html?x=35
+Bounds: {min: 337943614456, max: 337947260898}
 Metrics (lab / observed):
   - INP: 139 ms, event: (eventKey: s-3347, ts: 337944870984)
   - CLS: 0.00

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -116,62 +116,69 @@ export class PerformanceTraceFormatter {
 
   formatTraceSummary(): string {
     const parsedTrace = this.#parsedTrace;
-    const insightSet = this.#insightSet;
     const traceMetadata = this.#parsedTrace.metadata;
     const data = parsedTrace.data;
 
     const parts = [];
 
-    const lcp = insightSet ? Trace.Insights.Common.getLCP(insightSet) : null;
-    const cls = insightSet ? Trace.Insights.Common.getCLS(insightSet) : null;
-    const inp = insightSet ? Trace.Insights.Common.getINP(insightSet) : null;
-
     parts.push(`URL: ${data.Meta.mainFrameURL}`);
-    parts.push(`Bounds: ${this.serializeBounds(data.Meta.traceBounds)}`);
+    parts.push(`Trace bounds: ${this.serializeBounds(data.Meta.traceBounds)}`);
     parts.push('CPU throttling: ' + (traceMetadata.cpuThrottling ? `${traceMetadata.cpuThrottling}x` : 'none'));
     parts.push(`Network throttling: ${traceMetadata.networkThrottling ?? 'none'}`);
-    if (lcp || cls || inp) {
-      parts.push('Metrics (lab / observed):');
-      if (lcp) {
-        const nodeId = insightSet?.model.LCPBreakdown.lcpEvent?.args.data?.nodeId;
-        const nodeIdText = nodeId !== undefined ? `, nodeId: ${nodeId}` : '';
-        parts.push(
-            `  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}${nodeIdText}`);
-        const subparts = insightSet?.model.LCPBreakdown.subparts;
-        if (subparts) {
-          const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
-            return `${micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
-          };
-          parts.push('  - LCP breakdown:');
-          parts.push(`    - TTFB: ${serializeSubpart(subparts.ttfb)}`);
-          if (subparts.loadDelay !== undefined) {
-            parts.push(`    - Load delay: ${serializeSubpart(subparts.loadDelay)}`);
-          }
-          if (subparts.loadDuration !== undefined) {
-            parts.push(`    - Load duration: ${serializeSubpart(subparts.loadDuration)}`);
+
+    parts.push('\n# Available insight sets\n');
+    parts.push(
+        'The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.');
+
+    for (const insightSet of parsedTrace.insights?.values() ?? []) {
+      const lcp = insightSet ? Trace.Insights.Common.getLCP(insightSet) : null;
+      const cls = insightSet ? Trace.Insights.Common.getCLS(insightSet) : null;
+      const inp = insightSet ? Trace.Insights.Common.getINP(insightSet) : null;
+
+      parts.push(`\n## insight set id: ${insightSet.id}\n`);
+      parts.push(`URL: ${insightSet.url}`);
+      parts.push(`Bounds: ${this.serializeBounds(insightSet.bounds)}`);
+      if (lcp || cls || inp) {
+        parts.push('Metrics (lab / observed):');
+        if (lcp) {
+          const nodeId = insightSet?.model.LCPBreakdown.lcpEvent?.args.data?.nodeId;
+          const nodeIdText = nodeId !== undefined ? `, nodeId: ${nodeId}` : '';
+          parts.push(
+              `  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}${nodeIdText}`);
+          const subparts = insightSet?.model.LCPBreakdown.subparts;
+          if (subparts) {
+            const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
+              return `${micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
+            };
+            parts.push('  - LCP breakdown:');
+            parts.push(`    - TTFB: ${serializeSubpart(subparts.ttfb)}`);
+            if (subparts.loadDelay !== undefined) {
+              parts.push(`    - Load delay: ${serializeSubpart(subparts.loadDelay)}`);
+            }
+            if (subparts.loadDuration !== undefined) {
+              parts.push(`    - Load duration: ${serializeSubpart(subparts.loadDuration)}`);
+            }
+            parts.push(`    - Render delay: ${serializeSubpart(subparts.renderDelay)}`);
           }
-          parts.push(`    - Render delay: ${serializeSubpart(subparts.renderDelay)}`);
         }
+        if (inp) {
+          parts.push(`  - INP: ${Math.round(inp.value / 1000)} ms, event: ${this.serializeEvent(inp.event)}`);
+        }
+        if (cls) {
+          const eventText = cls.worstClusterEvent ? `, event: ${this.serializeEvent(cls.worstClusterEvent)}` : '';
+          parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
+        }
+      } else {
+        parts.push('Metrics (lab / observed): n/a');
       }
-      if (inp) {
-        parts.push(`  - INP: ${Math.round(inp.value / 1000)} ms, event: ${this.serializeEvent(inp.event)}`);
-      }
-      if (cls) {
-        const eventText = cls.worstClusterEvent ? `, event: ${this.serializeEvent(cls.worstClusterEvent)}` : '';
-        parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
-      }
-    } else {
-      parts.push('Metrics (lab / observed): n/a');
-    }
 
-    const cruxParts = insightSet && this.#getCruxTraceSummary(insightSet);
-    if (cruxParts?.length) {
-      parts.push(...cruxParts);
-    } else {
-      parts.push('Metrics (field / real users): n/a – no data for this page in CrUX');
-    }
+      const cruxParts = insightSet && this.#getCruxTraceSummary(insightSet);
+      if (cruxParts?.length) {
+        parts.push(...cruxParts);
+      } else {
+        parts.push('Metrics (field / real users): n/a – no data for this page in CrUX');
+      }
 
-    if (insightSet) {
       parts.push('Available insights:');
       for (const [insightName, model] of Object.entries(insightSet.model)) {
         if (model.state === 'pass') {
@@ -202,8 +209,6 @@ export class PerformanceTraceFormatter {
         const insightPartsText = insightParts.join('\n    ');
         parts.push(`  - ${insightPartsText}`);
       }
-    } else {
-      parts.push('Available insights: none');
     }
 
     return parts.join('\n');

package/front_end/models/ai_code_generation/AiCodeGeneration.ts

@@ -0,0 +1,151 @@
+// Copyright 2025 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 Host from '../../core/host/host.js';
+import * as Root from '../../core/root/root.js';
+
+import {debugLog} from './debug.js';
+
+export const basePreamble =
+    `You are a highly skilled senior software engineer with deep expertise across multiple web technologies and programming languages, including JavaScript, TypeScript, HTML, and CSS.
+Your role is to act as an expert pair programmer within the Chrome DevTools environment.
+
+**Core Directives (Adhere to these strictly):**
+
+1.  **Language and Quality:**
+    *   Generate code that is modern, efficient, and idiomatic for the inferred language (e.g., modern JavaScript/ES6+, semantic HTML5, efficient CSS).
+    *   Where appropriate, include basic error handling (e.g., for API calls).
+`;
+
+export const additionalContextForConsole = `
+You are operating within the execution environment of the Chrome DevTools Console.
+The console has direct access to the inspected page's \`window\` and \`document\`.
+
+*   **Utilize Console Utilities:** You have access to the Console Utilities API. You **should** use these helper functions and variables when they are the most direct way to accomplish the user's goal.
+`;
+
+interface Options {
+  aidaClient: Host.AidaClient.AidaClient;
+  serverSideLoggingEnabled?: boolean;
+  confirmSideEffectForTest?: typeof Promise.withResolvers;
+}
+
+interface RequestOptions {
+  temperature?: number;
+  modelId?: string;
+}
+
+/**
+ * The AiCodeGeneration class is responsible for fetching generated code suggestions
+ * from the AIDA backend.
+ */
+export class AiCodeGeneration {
+  readonly #sessionId: string = crypto.randomUUID();
+  readonly #aidaClient: Host.AidaClient.AidaClient;
+  readonly #serverSideLoggingEnabled: boolean;
+
+  constructor(opts: Options) {
+    this.#aidaClient = opts.aidaClient;
+    this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
+  }
+
+  #buildRequest(
+      prompt: string,
+      preamble: string,
+      inferenceLanguage: Host.AidaClient.AidaInferenceLanguage = Host.AidaClient.AidaInferenceLanguage.JAVASCRIPT,
+      ): Host.AidaClient.GenerateCodeRequest {
+    const userTier = Host.AidaClient.convertToUserTierEnum(this.#userTier);
+    function validTemperature(temperature: number|undefined): number|undefined {
+      return typeof temperature === 'number' && temperature >= 0 ? temperature : undefined;
+    }
+    return {
+      client: Host.AidaClient.CLIENT_NAME,
+      preamble,
+      current_message: {
+        parts: [{
+          text: prompt,
+        }],
+        role: Host.AidaClient.Role.USER,
+      },
+      use_case: Host.AidaClient.UseCase.CODE_GENERATION,
+      options: {
+        inference_language: inferenceLanguage,
+        temperature: validTemperature(this.#options.temperature),
+        model_id: this.#options.modelId || undefined,
+      },
+      metadata: {
+        disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
+        string_session_id: this.#sessionId,
+        user_tier: userTier,
+        client_version: Root.Runtime.getChromeVersion(),
+      },
+    };
+  }
+
+  get #userTier(): string|undefined {
+    return Root.Runtime.hostConfig.devToolsAiCodeGeneration?.userTier;
+  }
+
+  get #options(): RequestOptions {
+    const temperature = Root.Runtime.hostConfig.devToolsAiCodeGeneration?.temperature;
+    const modelId = Root.Runtime.hostConfig.devToolsAiCodeGeneration?.modelId;
+
+    return {
+      temperature,
+      modelId,
+    };
+  }
+
+  registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number): void {
+    const seconds = Math.floor(latency / 1_000);
+    const remainingMs = latency % 1_000;
+    const nanos = Math.floor(remainingMs * 1_000_000);
+
+    void this.#aidaClient.registerClientEvent({
+      corresponding_aida_rpc_global_id: rpcGlobalId,
+      disable_user_content_logging: true,
+      generate_code_client_event: {
+        user_impression: {
+          sample: {
+            sample_id: sampleId,
+          },
+          latency: {
+            duration: {
+              seconds,
+              nanos,
+            },
+          }
+        },
+      },
+    });
+    debugLog('Registered user impression with latency {seconds:', seconds, ', nanos:', nanos, '}');
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationSuggestionDisplayed);
+  }
+
+  registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
+    void this.#aidaClient.registerClientEvent({
+      corresponding_aida_rpc_global_id: rpcGlobalId,
+      disable_user_content_logging: true,
+      generate_code_client_event: {
+        user_acceptance: {
+          sample: {
+            sample_id: sampleId,
+          }
+        },
+      },
+    });
+    debugLog('Registered user acceptance');
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationSuggestionAccepted);
+  }
+
+  async generateCode(prompt: string, preamble: string, inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage):
+      Promise<Host.AidaClient.GenerateCodeResponse|null> {
+    const request = this.#buildRequest(prompt, preamble, inferenceLanguage);
+    const response = await this.#aidaClient.generateCode(request);
+
+    debugLog({request, response});
+
+    return response;
+  }
+}

package/front_end/models/ai_code_generation/ai_code_generation.ts

@@ -0,0 +1,6 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * from './debug.js';
+export * as AiCodeGeneration from './AiCodeGeneration.js';