chrome-devtools-frontend 1.0.1555430 → 1.0.1558690

package/front_end/models/ai_assistance/AiConversation.ts

@@ -58,7 +58,7 @@ export class AiConversation {
   }
 
   readonly id: string;
-  type: ConversationType;
+  #type: ConversationType;
   #isReadOnly: boolean;
   readonly history: ResponseData[];
   #isExternal: boolean;
@@ -66,6 +66,9 @@ export class AiConversation {
   #aidaClient: Host.AidaClient.AidaClient;
   #changeManager: ChangeManager|undefined;
   #agent: AiAgent<unknown>;
+  #origin?: string;
+
+  #contexts: Array<ConversationContext<unknown>> = [];
 
   constructor(
       type: ConversationType,
@@ -78,13 +81,13 @@ export class AiConversation {
   ) {
     this.#changeManager = changeManager;
     this.#aidaClient = aidaClient;
-    this.type = type;
-    this.#agent = this.#createAgent();
+    this.#type = type;
 
     this.id = id;
     this.#isReadOnly = isReadOnly;
     this.#isExternal = isExternal;
     this.history = this.#reconstructHistory(data);
+    this.#agent = this.#createAgent();
   }
 
   get isReadOnly(): boolean {
@@ -109,6 +112,25 @@ export class AiConversation {
     return this.history.length === 0;
   }
 
+  #setOriginIfEmpty(newOrigin: string|undefined): void {
+    if (!this.#origin) {
+      this.#origin = newOrigin;
+    }
+  }
+
+  setContext(updateContext: ConversationContext<unknown>|null): void {
+    if (!updateContext) {
+      this.#contexts = [];
+      return;
+    }
+
+    this.#contexts = [updateContext];
+  }
+
+  get selectedContext(): ConversationContext<unknown>|undefined {
+    return this.#contexts.at(0);
+  }
+
   #reconstructHistory(historyWithoutImages: ResponseData[]): ResponseData[] {
     const imageHistory = AiHistoryStorage.instance().getImageHistory();
     if (imageHistory && imageHistory.length > 0) {
@@ -214,7 +236,7 @@ export class AiConversation {
         }
         return item;
       }),
-      type: this.type,
+      type: this.#type,
       isExternal: this.#isExternal,
     };
   }
@@ -223,10 +245,11 @@ export class AiConversation {
     const options = {
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
+      sessionId: this.id,
       changeManager: this.#changeManager,
     };
     let agent: AiAgent<unknown>;
-    switch (this.type) {
+    switch (this.#type) {
       case ConversationType.STYLING: {
         agent = new StylingAgent(options);
         break;
@@ -326,24 +349,62 @@ Time: ${micros(time)}`;
   async *
       run(
           initialQuery: string,
-          options: {selected: ConversationContext<unknown>|null, signal?: AbortSignal, extraContext?: ExtraContext[]},
-          multimodalInput?: MultimodalInput,
+          options: {
+
+            signal?: AbortSignal,
+            extraContext?: ExtraContext[],
+            multimodalInput?: MultimodalInput,
+          } = {},
           ): AsyncGenerator<ResponseData, void, void> {
     if (options.extraContext) {
       await this.#createFactsForExtraContext(options.extraContext);
     }
-    for await (const data of this.#agent.run(initialQuery, options, multimodalInput)) {
+    this.#setOriginIfEmpty(this.selectedContext?.getOrigin());
+
+    if (this.isBlockedByOrigin) {
+      throw new Error('Cross-origin context data should not be included');
+    }
+
+    function shouldAddToHistory(data: ResponseData): boolean {
       // We don't want to save partial responses to the conversation history.
       // TODO(crbug.com/463325400): We should save interleaved answers to the history as well.
-      if (data.type !== ResponseType.ANSWER || data.complete) {
+      if (data.type === ResponseType.ANSWER && !data.complete) {
+        return false;
+      }
+
+      return true;
+    }
+
+    for await (const data of this.#agent.run(
+        initialQuery,
+        {
+          signal: options.signal,
+          selected: this.selectedContext ?? null,
+        },
+        options.multimodalInput,
+        )) {
+      if (shouldAddToHistory(data)) {
         void this.addHistoryItem(data);
       }
       yield data;
     }
   }
 
+  /**
+   * Indicates whether the new conversation context is blocked due to cross-origin restrictions.
+   * This happens when the conversation's context has a different
+   * origin than the selected context.
+   */
+  get isBlockedByOrigin(): boolean {
+    return !this.#contexts.every(context => context.isOriginAllowed(this.#origin));
+  }
+
   get origin(): string|undefined {
-    return this.#agent.origin;
+    return this.#origin;
+  }
+
+  get type(): ConversationType {
+    return this.#type;
   }
 }
 

package/front_end/models/ai_assistance/ArtifactsManager.ts

@@ -0,0 +1,67 @@
+// 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 type * as SDK from '../../core/sdk/sdk.js';
+import type * as Trace from '../../models/trace/trace.js';
+import type {InsightKeys} from '../trace/insights/types.js';
+
+export interface InsightArtifact {
+  type: 'insight';
+  insightType: InsightKeys;
+}
+
+export interface NetworkRequestArtifact {
+  type: 'network-request';
+  request: SDK.NetworkRequest.NetworkRequest|Trace.Types.Events.SyntheticNetworkRequest;
+}
+
+export interface FlameChartArtifact {
+  type: 'flamechart';
+  start: Trace.Types.Timing.Micro;
+  end: Trace.Types.Timing.Micro;
+}
+
+export type Artifact = InsightArtifact|NetworkRequestArtifact|FlameChartArtifact;
+
+export class ArtifactAddedEvent extends Event {
+  static readonly eventName = 'artifactadded';
+
+  constructor(public artifact: Artifact) {
+    super(ArtifactAddedEvent.eventName);
+  }
+}
+
+let instance: ArtifactsManager|null = null;
+
+export class ArtifactsManager extends EventTarget {
+  #artifacts: Artifact[] = [];
+
+  static instance(): ArtifactsManager {
+    if (!instance) {
+      instance = new ArtifactsManager();
+    }
+    return instance;
+  }
+
+  static removeInstance(): void {
+    instance = null;
+  }
+
+  private constructor() {
+    super();
+  }
+
+  get artifacts(): Artifact[] {
+    return this.#artifacts;
+  }
+
+  addArtifact(artifact: Artifact): void {
+    this.#artifacts.push(artifact);
+    this.dispatchEvent(new ArtifactAddedEvent(artifact));
+  }
+
+  clear(): void {
+    this.#artifacts = [];
+  }
+}

package/front_end/models/ai_assistance/ConversationHandler.ts

@@ -213,7 +213,7 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
     const conversation = new AiConversation(
         conversationType,
         [],
-        aiAgent.id,
+        aiAgent.sessionId,
         /* isReadOnly */ true,
         this.#aidaClient,
         undefined,
@@ -228,7 +228,8 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
     selected: NodeContext|PerformanceTraceContext|RequestContext|null,
   }): AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse> {
     const {conversation, prompt, selected} = opts;
-    const generator = conversation.run(prompt, {selected});
+    conversation.setContext(selected);
+    const generator = conversation.run(prompt);
     const devToolsLogs: object[] = [];
     for await (const data of generator) {
       if (data.type !== ResponseType.ANSWER || data.complete) {

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

@@ -125,6 +125,7 @@ export interface RequestOptions {
 export interface AgentOptions {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;
+  sessionId?: string;
   confirmSideEffectForTest?: typeof Promise.withResolvers;
 }
 
@@ -270,7 +271,7 @@ export abstract class AiAgent<T> {
   abstract readonly userTier: string|undefined;
   abstract handleContextDetails(select: ConversationContext<T>|null): AsyncGenerator<ContextResponse, void, void>;
 
-  readonly #sessionId: string = crypto.randomUUID();
+  readonly #sessionId: string;
   readonly #aidaClient: Host.AidaClient.AidaClient;
   readonly #serverSideLoggingEnabled: boolean;
   readonly confirmSideEffect: typeof Promise.withResolvers;
@@ -284,12 +285,6 @@ export abstract class AiAgent<T> {
     aidaResponse: Host.AidaClient.DoConversationResponse,
   }> = [];
 
-  /**
-   * Might need to be part of history in case we allow chatting in
-   * historical conversations.
-   */
-  #origin?: string;
-
   /**
    * `context` does not change during `AiAgent.run()`, ensuring that calls to JS
    * have the correct `context`. We don't want element selection by the user to
@@ -297,7 +292,6 @@ export abstract class AiAgent<T> {
    */
   protected context?: ConversationContext<T>;
 
-  #id: string = crypto.randomUUID();
   #history: Host.AidaClient.Content[] = [];
 
   #facts: Set<Host.AidaClient.RequestFact> = new Set<Host.AidaClient.RequestFact>();
@@ -305,6 +299,7 @@ export abstract class AiAgent<T> {
   constructor(opts: AgentOptions) {
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
+    this.#sessionId = opts.sessionId ?? crypto.randomUUID();
     this.confirmSideEffect = opts.confirmSideEffectForTest ?? (() => Promise.withResolvers());
   }
 
@@ -393,12 +388,8 @@ export abstract class AiAgent<T> {
     return request;
   }
 
-  get id(): string {
-    return this.#id;
-  }
-
-  get origin(): string|undefined {
-    return this.#origin;
+  get sessionId(): string {
+    return this.#sessionId;
   }
 
   /**
@@ -496,15 +487,8 @@ export abstract class AiAgent<T> {
           multimodalInput?: MultimodalInput,
           ): AsyncGenerator<ResponseData, void, void> {
     await options.selected?.refresh();
-
     if (options.selected) {
-      // First context set on the agent determines its origin from now on.
-      if (this.#origin === undefined) {
-        this.#origin = options.selected.getOrigin();
-      }
-      if (options.selected.isOriginAllowed(this.#origin)) {
-        this.context = options.selected;
-      }
+      this.context = options.selected;
     }
 
     const enhancedQuery = await this.enhanceQuery(initialQuery, options.selected, multimodalInput?.type);
@@ -596,10 +580,16 @@ export abstract class AiAgent<T> {
 
       if (functionCall) {
         try {
-          const result = yield* this.#callFunction(functionCall.name, functionCall.args, {
-            ...options,
-            explanation: textResponse,
-          });
+          const result = yield*
+              this.#callFunction(
+                  functionCall.name,
+                  functionCall.args,
+                  {
+                    ...options,
+                    explanation: textResponse,
+                  },
+              );
+
           if (options.signal?.aborted) {
             yield this.#createErrorResponse(ErrorType.ABORT);
             break;
@@ -720,7 +710,7 @@ export abstract class AiAgent<T> {
 
       result = await call.handler(args, {
         ...options,
-        approved: approvedRun,
+        approved: true,
       });
     }
 

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

@@ -10,8 +10,10 @@ import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Tracing from '../../../services/tracing/tracing.js';
 import * as Annotations from '../../annotations/annotations.js';
+import * as Logs from '../../logs/logs.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';
+import {ArtifactsManager} from '../ArtifactsManager.js';
 import {
   PerformanceInsightFormatter,
 } from '../data_formatters/PerformanceInsightFormatter.js';
@@ -67,7 +69,49 @@ const greenDevAdditionalAnnotationsGuidelines = `
 - The annotationMessage should be descriptive and relevant to why the element or network request is being highlighted.
 `;
 
-const greenDevAdditionalWidgetGuidelines = `
+const getGreenDevAdditionalWidgetGuidelines = (): string => {
+  // GreenDev is experimenting with multiple ways to display widget:
+  // if widgetsFromFunctionCalls is true, then we use function calls to add widgets
+  // otherwise we use ai-insight tags
+  const widgetsFromFunctionCalls = true;
+
+  if (widgetsFromFunctionCalls) {
+    return `
+- CRITICAL: You have access to three functions for adding rich, interactive widgets to your response:
+  \`addInsightWidget\`, \`addNetworkRequestWidget\`, and \`addFlameChartWidget\`.
+  You MUST use these functions whenever you refer to a corresponding entity.
+
+- **\`addInsightWidget({insightType: '...'})\`**:
+  - **When to use**: Call this function every time you mention a specific performance insight (e.g., LCP, INP,
+    CLS culprits).
+  - **Purpose**: It embeds an interactive widget that provides a detailed breakdown and visualization of the
+    insight.
+  - **Example**: If you are explaining the causes of a poor LCP score, you MUST also call
+    \`addInsightWidget({insightType: 'LCPBreakdown'})\`. This provides the user with the data to explore
+    alongside your explanation.
+- **\`addNetworkRequestWidget({eventKey: '...'})\`**:
+  - **When to use**: Call this function whenever you discuss a specific network request.
+  - **Purpose**: It adds a widget displaying the full details of the network request, such as its timing,
+    headers, and priority.
+  - **Critical**: The eventKey should be the trace event key (only the number, no letters prefix or -) of that
+    script's network request.
+  - **Example**: If you identify a render-blocking script, you MUST also call
+    \`addNetworkRequestWidget({eventKey: '...'})\` with the trace event key (only the number, no letters prefix
+    or -) of that script's network request.
+- **\`addFlameChartWidget({start: ..., end: ...})\`**:
+  - **When to use**: Call this function to highlight a specific time range within the trace, especially when
+    discussing long tasks, specific events, or periods of high activity.
+    - **Purpose**: It embeds a focused flame chart visualization for the given time range (in microseconds).
+    - **Example**: If you find a long task that is blocking the main thread, you MUST also call
+      \`addFlameChartWidget({start: 123456, end: 789012})\`. This provides the user with the data to explore
+      alongside your explanation.
+- **General Rules**:
+  - You MUST call these functions as soon as you identify the entity you are discussing.
+  - Do NOT add more than one widget for the same insight, network request, or time range to avoid redundancy.
+`;
+  }
+
+  return `
 - **Visualizing Insights**: When discussing the breakdown of specific metrics or a performance problem,
 you must render the appropriate Insight Overview component. Use these tags on a new line within your response:
   - For LCP breakdown: <ai-insight value="LCPBreakdown">
@@ -102,6 +146,7 @@ you must render the appropriate Insight Overview component. Use these tags on a
   - For example, for LCP, the phases like Time to First Byte will be part of the insight widget, so you must not state them in the text. This applies to other insights and network request timings.
 - Do not display any of the same widgets more than once. For example, if you have already displayed a network request widget for a specific event, do not display it again in the same response.
 `;
+};
 
 /**
  * Preamble clocks in at ~1341 tokens.
@@ -111,7 +156,7 @@ you must render the appropriate Insight Overview component. Use these tags on a
  * Check token length in https://aistudio.google.com/
  */
 const buildPreamble = (): string => {
-  const greenDevEnabled = Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled;
+  const greenDevEnabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
   const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
   return `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
 
@@ -166,7 +211,7 @@ Note: if the user asks a specific question about the trace (such as "What is my
 - Be direct and to the point. Avoid unnecessary introductory phrases or filler content. Focus on delivering actionable advice efficiently.
 
 ${annotationsEnabled ? greenDevAdditionalAnnotationsGuidelines : ''}
-${greenDevEnabled ? greenDevAdditionalWidgetGuidelines : ''}
+${greenDevEnabled ? getGreenDevAdditionalWidgetGuidelines() : ''}
 
 ## Strict Constraints
 
@@ -1200,6 +1245,109 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         },
       });
     }
+
+    if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+      this.declareFunction<{insightType: Trace.Insights.Types.InsightKeys}>('addInsightWidget', {
+        description:
+            'Adds an insight widget to the response. When mentioning an insight, call this function to also display an appropriate widget.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            insightType: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description:
+                  'The name of the insight. Only use the insight names given in the "Available insights" list.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          ArtifactsManager.instance().addArtifact({type: 'insight', insightType: _params.insightType});
+          return {result: {success: true}};
+        },
+      });
+
+      this.declareFunction<{eventKey: string}, object|{error: string}>('addNetworkRequestWidget', {
+        description:
+            'Adds a network request widget to the response. When mentioning a network request, call this function with its trace event key.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            eventKey: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The trace event key for the network request.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          const rawTraceEvent =
+              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(
+                  Number(_params.eventKey));
+          // Get the trace event object if it is available.
+          // If the trace is uploaded, we need to use the synthetic event.
+          if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
+            const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
+            const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
+            const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
+                                                       .requestsForId(rawTraceEventId)
+                                                       .find(r => r.url() === rawTraceEventUrl) :
+                                                   null;
+            if (networkRequest) {
+              ArtifactsManager.instance().addArtifact({type: 'network-request', request: networkRequest});
+              return {result: {success: true}};
+            }
+          }
+
+          const syntheticRequest =
+              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
+                  Number(_params.eventKey));
+
+          if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
+            ArtifactsManager.instance().addArtifact({
+              type: 'network-request',
+              request: syntheticRequest,
+            });
+            return {result: {success: true}};
+          }
+
+          return {result: {error: 'Could not find network request'}};
+        },
+      });
+
+      this.declareFunction<{start: number, end: number}, object|{error: string}>('addFlameChartWidget', {
+        description: 'Adds a flame chart widget to the response.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            start: {
+              type: Host.AidaClient.ParametersTypes.INTEGER,
+              description: 'The start time of the flame chart in microseconds.',
+              nullable: false,
+            },
+            end: {
+              type: Host.AidaClient.ParametersTypes.INTEGER,
+              description: 'The end time of the flame chart in microseconds.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          ArtifactsManager.instance().addArtifact({
+            type: 'flamechart',
+            start: Trace.Types.Timing.Micro(_params.start),
+            end: Trace.Types.Timing.Micro(_params.end),
+          });
+          return {result: {success: true}};
+        },
+      });
+    }
   }
 
   async addElementAnnotation(elementId: string, annotationMessage: string):

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

@@ -275,7 +275,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
     this.#changes = opts.changeManager || new ChangeManager();
     this.#execJs = opts.execJs ?? executeJsCode;
     this.#createExtensionScope = opts.createExtensionScope ?? ((changes: ChangeManager) => {
-                                   return new ExtensionScope(changes, this.id, this.context?.getItem() ?? null);
+                                   return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null);
                                  });
 
     this.declareFunction<{

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -13,6 +13,7 @@ import * as StylingAgent from './agents/StylingAgent.js';
 import * as AiConversation from './AiConversation.js';
 import * as AiHistoryStorage from './AiHistoryStorage.js';
 import * as AiUtils from './AiUtils.js';
+import * as ArtifactsManager from './ArtifactsManager.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
 import * as ConversationHandler from './ConversationHandler.js';
@@ -38,6 +39,7 @@ export {
   AiHistoryStorage,
   AIQueries,
   AiUtils,
+  ArtifactsManager,
   BuiltInAi,
   ChangeManager,
   ConversationHandler,

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

@@ -262,8 +262,6 @@ export class PerformanceInsightFormatter {
       });
 
       rootCauses.unsizedImages.forEach(img => {
-        // TODO(b/413284569): if we store a nice human readable name for this
-        // image in the trace metadata, we can do something much nicer here.
         const url = img.paintImageEvent.args.data.url;
         const nodeName = img.paintImageEvent.args.data.nodeName;
         const extraText = url ? `url: ${this.#formatUrl(url)}` : `id: ${img.backendNodeId}`;

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

@@ -534,7 +534,7 @@ Metrics (lab / observed):
     - Load delay: 90 ms, bounds: {min: 157423704371, max: 157423794709}
     - Load duration: 64 ms, bounds: {min: 157423794709, max: 157423858674}
     - Render delay: 94 ms, bounds: {min: 157423858674, max: 157423953162}
-  - CLS: 0.04, event: (eventKey: s--1, ts: 157425604232)
+  - CLS: 0.04, event: (eventKey: s-166266, ts: 157425604232)
 Metrics (field / real users): n/a – no data for this page in CrUX
 Available insights:
   - insight name: LCPBreakdown
@@ -665,7 +665,7 @@ Metrics (lab / observed):
     - Load delay: 46 ms, bounds: {min: 59728656735, max: 59728702313}
     - Load duration: 506 ms, bounds: {min: 59728702313, max: 59729208600}
     - Render delay: 104 ms, bounds: {min: 59729208600, max: 59729312744}
-  - CLS: 0.31, event: (eventKey: s--1, ts: 59729100192)
+  - CLS: 0.31, event: (eventKey: s-14787, ts: 59729100192)
 Metrics (field / real users): n/a – no data for this page in CrUX
 Available insights:
   - insight name: Cache
@@ -738,7 +738,7 @@ Metrics (lab / observed):
     - Load delay: 46 ms, bounds: {min: 59728656735, max: 59728702313}
     - Load duration: 506 ms, bounds: {min: 59728702313, max: 59729208600}
     - Render delay: 104 ms, bounds: {min: 59729208600, max: 59729312744}
-  - CLS: 0.31, event: (eventKey: s--1, ts: 59729100192)
+  - CLS: 0.31, event: (eventKey: s-14787, ts: 59729100192)
 Metrics (field / real users):
   - LCP: 1740 ms (scope: url)
   - INP: 185 ms (scope: url)

package/front_end/models/annotations/AnnotationRepository.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import * as GreenDev from '../greendev/greendev.js';
 
 import {AnnotationType} from './AnnotationType.js';
 
@@ -63,7 +63,7 @@ export class AnnotationRepository {
   }
 
   static annotationsEnabled(): boolean {
-    const enabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+    const enabled = GreenDev.Prototypes.instance().isEnabled('aiAnnotations');
     // TODO(finnur): Fix race when Repository is created before feature flags have been set properly.
     if (!enabled) {
       this.#hasRepliedGreenDevDisabled = true;

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -281,6 +281,7 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
     if (!sourceMap) {
       return null;
     }
+    await sourceMap.waitForScopeInfo();
 
     const {lineNumber, columnNumber} = script.rawLocationToRelativeLocation(rawLocation);
     const {url, scope} = sourceMap.findOriginalFunctionScope({line: lineNumber, column: columnNumber}) ?? {};
@@ -313,17 +314,16 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
     return new Workspace.UISourceCode.UIFunctionBounds(uiSourceCode, range, name);
   }
 
-  translateRawFramesStep(
+  async translateRawFramesStep(
       rawFrames: StackTraceImpl.Trie.RawFrame[],
-      translatedFrames: Awaited<ReturnType<StackTraceImpl.StackTraceModel.TranslateRawFrames>>): boolean {
+      translatedFrames: Awaited<ReturnType<StackTraceImpl.StackTraceModel.TranslateRawFrames>>): Promise<boolean> {
     const frame = rawFrames[0];
     if (StackTraceImpl.Trie.isBuiltinFrame(frame)) {
       return false;
     }
 
-    const sourceMapWithScopeInfoForFrame =
-        (rawFrame: StackTraceImpl.Trie.RawFrame): {sourceMap: SDK.SourceMap.SourceMap, script: SDK.Script.Script}|
-        null => {
+    const sourceMapWithScopeInfoForFrame = async(rawFrame: StackTraceImpl.Trie.RawFrame):
+        Promise<{sourceMap: SDK.SourceMap.SourceMap, script: SDK.Script.Script}|null> => {
           const script = this.#debuggerModel.scriptForId(rawFrame.scriptId ?? '');
           if (!script || this.#stubUISourceCodes.has(script)) {
             // Use fallback while source map is being loaded.
@@ -331,10 +331,11 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
           }
 
           const sourceMap = script.sourceMap();
+          await sourceMap?.waitForScopeInfo();
           return sourceMap?.hasScopeInfo() ? {sourceMap, script} : null;
         };
 
-    const sourceMapAndScript = sourceMapWithScopeInfoForFrame(frame);
+    const sourceMapAndScript = await sourceMapWithScopeInfoForFrame(frame);
     if (!sourceMapAndScript) {
       return false;
     }