chrome-ai-bridge 1.0.3 → 1.0.5

package/build/node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.js

@@ -8,8 +8,8 @@ import { bytes, millis } from './UnitFormatters.js';
 /**
  * For a given frame ID and navigation ID, returns the LCP Event and the LCP Request, if the resource was an image.
  */
-function getLCPData(parsedTrace, frameId, navigationId) {
-    const navMetrics = parsedTrace.data.PageLoadMetrics.metricScoresByFrameId.get(frameId)?.get(navigationId);
+function getLCPData(parsedTrace, frameId, navigation) {
+    const navMetrics = parsedTrace.data.PageLoadMetrics.metricScoresByFrameId.get(frameId)?.get(navigation);
     if (!navMetrics) {
         return null;
     }
@@ -18,12 +18,14 @@ function getLCPData(parsedTrace, frameId, navigationId) {
         return null;
     }
     const lcpEvent = metric?.event;
-    if (!lcpEvent || !Trace.Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+    if (!lcpEvent || !Trace.Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
         return null;
     }
+    const navigationId = navigation.args.data?.navigationId;
     return {
         lcpEvent,
-        lcpRequest: parsedTrace.data.LargestImagePaint.lcpRequestByNavigationId.get(navigationId),
+        lcpRequest: navigationId ? parsedTrace.data.LargestImagePaint.lcpRequestByNavigationId.get(navigationId) :
+            undefined,
         metricScore: metric,
     };
 }
@@ -68,14 +70,14 @@ export class PerformanceInsightFormatter {
      * Information about LCP which we pass to the LLM for all insights that relate to LCP.
      */
     #lcpMetricSharedContext() {
-        if (!this.#insight.navigationId) {
+        if (!this.#insight.navigation) {
             // No navigation ID = no LCP.
             return '';
         }
-        if (!this.#insight.frameId || !this.#insight.navigationId) {
+        if (!this.#insight.frameId || !this.#insight.navigation) {
             return '';
         }
-        const data = getLCPData(this.#parsedTrace, this.#insight.frameId, this.#insight.navigationId);
+        const data = getLCPData(this.#parsedTrace, this.#insight.frameId, this.#insight.navigation);
         if (!data) {
             return '';
         }
@@ -97,12 +99,6 @@ export class PerformanceInsightFormatter {
         return parts.join('\n');
     }
     insightIsSupported() {
-        // Although our types don't show it, Insights can end up as Errors if there
-        // is an issue in the processing stage. In this case we should gracefully
-        // ignore this error.
-        if (this.#insight instanceof Error) {
-            return false;
-        }
         return this.#description().length > 0;
     }
     getSuggestions() {
@@ -179,7 +175,7 @@ export class PerformanceInsightFormatter {
                     { title: 'How can I reduce the amount of legacy JavaScript on my page?' },
                 ];
             default:
-                throw new Error('Unknown insight key');
+                throw new Error(`Unknown insight key '${this.#insight.insightKey}'`);
         }
     }
     /**
@@ -228,8 +224,6 @@ export class PerformanceInsightFormatter {
                 potentialRootCauses.push(animationInfoOutput.map(l => ' '.repeat(4) + l).join('\n'));
             });
             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/build/node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.js

@@ -1,6 +1,7 @@
 // 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 Annotations from '../../annotations/annotations.js';
 import * as CrUXManager from '../../crux-manager/crux-manager.js';
 import * as Trace from '../../trace/trace.js';
 import { AIQueries } from '../performance/AIQueries.js';
@@ -12,6 +13,8 @@ export class PerformanceTraceFormatter {
     #parsedTrace;
     #insightSet;
     #eventsSerializer;
+    #formattedFunctionCodes = new Set();
+    resolveFunctionCode;
     constructor(focus) {
         this.#focus = focus;
         this.#parsedTrace = focus.parsedTrace;
@@ -101,19 +104,19 @@ export class PerformanceTraceFormatter {
         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;
+            const lcp = Trace.Insights.Common.getLCP(insightSet);
+            const cls = Trace.Insights.Common.getCLS(insightSet);
+            const inp = Trace.Insights.Common.getINP(insightSet);
             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 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;
+                    const subparts = insightSet.model.LCPBreakdown?.subparts;
                     if (subparts) {
                         const serializeSubpart = (subpart) => {
                             return `${micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
@@ -135,6 +138,13 @@ export class PerformanceTraceFormatter {
                 if (cls) {
                     const eventText = cls.worstClusterEvent ? `, event: ${this.serializeEvent(cls.worstClusterEvent)}` : '';
                     parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
+                    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+                        const worstClusterEvent = cls.worstClusterEvent;
+                        const layoutShiftData = worstClusterEvent?.worstShiftEvent?.args?.data;
+                        if (layoutShiftData?.impacted_nodes && layoutShiftData.impacted_nodes?.length > 0) {
+                            Annotations.AnnotationRepository.instance().addElementsAnnotation('This element is impacted by a layout shift', layoutShiftData.impacted_nodes[0].node_id.toString());
+                        }
+                    }
                 }
             }
             else {
@@ -178,7 +188,7 @@ export class PerformanceTraceFormatter {
         }
         return parts.join('\n');
     }
-    #formatFactByInsightSet(options) {
+    async #formatFactByInsightSet(options) {
         const { insights, title, description, empty, cb } = options;
         const lines = [`# ${title}\n`];
         if (description) {
@@ -190,7 +200,7 @@ export class PerformanceTraceFormatter {
                 if (multipleInsightSets) {
                     lines.push(`## insight set id: ${insightSet.id}\n`);
                 }
-                lines.push((cb(insightSet) ?? empty) + '\n');
+                lines.push((await cb(insightSet) ?? empty) + '\n');
             }
         }
         else {
@@ -204,18 +214,18 @@ export class PerformanceTraceFormatter {
             insights: parsedTrace.insights,
             title: 'Critical network requests',
             empty: 'none',
-            cb: insightSet => {
+            cb: async (insightSet) => {
                 const criticalRequests = [];
                 const walkRequest = (node) => {
                     criticalRequests.push(node.request);
                     node.children.forEach(walkRequest);
                 };
-                insightSet.model.NetworkDependencyTree.rootNodes.forEach(walkRequest);
+                insightSet.model.NetworkDependencyTree?.rootNodes.forEach(walkRequest);
                 return criticalRequests.length ? this.formatNetworkRequests(criticalRequests, { verbose: false }) : null;
             },
         });
     }
-    #serializeBottomUpRootNode(rootNode, limit) {
+    async #serializeBottomUpRootNode(rootNode, limit) {
         // Sorted by selfTime.
         // No nodes less than 1 ms.
         // Limit.
@@ -223,15 +233,20 @@ export class PerformanceTraceFormatter {
             .filter(n => n.totalTime >= 1)
             .sort((a, b) => b.selfTime - a.selfTime)
             .slice(0, limit);
+        const callFrames = [];
         function nodeToText(node) {
             const event = node.event;
             let frame;
             if (Trace.Types.Events.isProfileCall(event)) {
                 frame = event.callFrame;
+                if (node.selfTime >= 100 && callFrames.length < 3) {
+                    callFrames.push(frame);
+                }
             }
             else {
                 frame = Trace.Helpers.Trace.getStackTraceTopCallFrameInEventPayload(event);
             }
+            // TODO(crbug.com/452333154): this is not source mapped.
             let source = Trace.Name.forEntry(event);
             if (frame?.url) {
                 source += ` (url: ${frame.url}`;
@@ -245,7 +260,8 @@ export class PerformanceTraceFormatter {
             }
             return `- self: ${millis(node.selfTime)}, total: ${millis(node.totalTime)}, source: ${source}`;
         }
-        return topNodes.map(node => nodeToText.call(this, node)).join('\n');
+        return topNodes.map(node => nodeToText.call(this, node)).join('\n') +
+            await this.#serializeRelevantFunctions(callFrames);
     }
     #getSerializeBottomUpRootNodeFormat(limit) {
         return `This is the bottom-up summary for the entire trace. Only the top ${limit} activities (sorted by self time) are shown. An activity is all the aggregated time spent on the same type of work. For example, it can be all the time spent in a specific JavaScript function, or all the time spent in a specific browser rendering stage (like layout, v8 compile, parsing html). "Self time" represents the aggregated time spent directly in an activity, across all occurrences. "Total time" represents the aggregated time spent in an activity or any of its children.`;
@@ -258,9 +274,9 @@ export class PerformanceTraceFormatter {
             title: 'Main thread bottom-up summary',
             description: this.#getSerializeBottomUpRootNodeFormat(limit),
             empty: 'no activity',
-            cb: insightSet => {
+            cb: async (insightSet) => {
                 const rootNode = AIQueries.mainThreadActivityBottomUpSingleNavigation(insightSet.navigation?.args.data?.navigationId, insightSet.bounds, parsedTrace);
-                return rootNode ? this.#serializeBottomUpRootNode(rootNode, limit) : null;
+                return rootNode ? await this.#serializeBottomUpRootNode(rootNode, limit) : null;
             },
         });
     }
@@ -283,7 +299,7 @@ export class PerformanceTraceFormatter {
             insights: parsedTrace.insights,
             title: '3rd party summary',
             empty: 'no 3rd parties',
-            cb: insightSet => {
+            cb: async (insightSet) => {
                 const thirdPartySummaries = Trace.Extras.ThirdParties.summarizeByThirdParty(parsedTrace.data, insightSet.bounds);
                 return thirdPartySummaries.length ? this.#formatThirdPartyEntitySummaries(thirdPartySummaries) : null;
             },
@@ -295,7 +311,7 @@ export class PerformanceTraceFormatter {
             insights: parsedTrace.insights,
             title: 'Longest tasks',
             empty: 'none',
-            cb: insightSet => {
+            cb: async (insightSet) => {
                 const longestTaskTrees = AIQueries.longestTasks(insightSet.navigation?.args.data?.navigationId, insightSet.bounds, parsedTrace, 3);
                 if (!longestTaskTrees?.length) {
                     return null;
@@ -342,7 +358,7 @@ export class PerformanceTraceFormatter {
         }
         return results.join('\n');
     }
-    formatMainThreadTrackSummary(bounds) {
+    async formatMainThreadTrackSummary(bounds) {
         if (!this.#parsedTrace.insights) {
             return 'No main thread activity found';
         }
@@ -351,14 +367,14 @@ export class PerformanceTraceFormatter {
         const topDownTree = AIQueries.mainThreadActivityTopDown(insightSet?.navigation?.args.data?.navigationId, bounds, this.#parsedTrace);
         if (topDownTree) {
             results.push('# Top-down main thread summary');
-            results.push(this.formatCallTree(topDownTree, 2 /* headerLevel */));
+            results.push(await this.formatCallTree(topDownTree, 2 /* headerLevel */));
         }
         const bottomUpRootNode = AIQueries.mainThreadActivityBottomUp(bounds, this.#parsedTrace);
         if (bottomUpRootNode) {
             results.push('# Bottom-up main thread summary');
             const limit = 20;
             results.push(this.#getSerializeBottomUpRootNodeFormat(limit));
-            results.push(this.#serializeBottomUpRootNode(bottomUpRootNode, limit));
+            results.push(await this.#serializeBottomUpRootNode(bottomUpRootNode, limit));
         }
         const thirdPartySummaries = Trace.Extras.ThirdParties.summarizeByThirdParty(this.#parsedTrace.data, bounds);
         if (thirdPartySummaries.length) {
@@ -390,8 +406,19 @@ export class PerformanceTraceFormatter {
         }
         return results.join('\n\n');
     }
-    formatCallTree(tree, headerLevel = 1) {
-        return `${tree.serialize(headerLevel)}\n\nIMPORTANT: Never show eventKey to the user.`;
+    async formatCallTree(tree, headerLevel = 1) {
+        let result = `${tree.serialize(headerLevel)}\n\nIMPORTANT: Never show eventKey to the user.\n`;
+        const relevantCallFrames = [];
+        if (tree.selectedNode && Trace.Types.Events.isProfileCall(tree.selectedNode.event)) {
+            relevantCallFrames.push(tree.selectedNode.event.callFrame);
+        }
+        const topCallFrameByTotalTime = tree.topCallFrameByTotalTime();
+        if (topCallFrameByTotalTime) {
+            relevantCallFrames.push(topCallFrameByTotalTime);
+        }
+        relevantCallFrames.push(...tree.topCallFramesBySelfTime(3));
+        result += await this.#serializeRelevantFunctions(relevantCallFrames);
+        return result;
     }
     formatNetworkRequests(requests, options) {
         if (requests.length === 0) {
@@ -424,7 +451,7 @@ export class PerformanceTraceFormatter {
         const initiators = [];
         let cur = request;
         while (cur) {
-            const initiator = parsedTrace.data.NetworkRequests.eventToInitiator.get(cur);
+            const initiator = Trace.Extras.Initiators.getNetworkInitiator(parsedTrace.data, cur);
             if (initiator) {
                 // Should never happen, but if it did that would be an infinite loop.
                 if (initiators.includes(initiator)) {
@@ -445,7 +472,7 @@ export class PerformanceTraceFormatter {
      * talk to jacktfranklin@.
      */
     #networkRequestVerbosely(request, options) {
-        const { url, statusCode, initialPriority, priority, fromServiceWorker, mimeType, responseHeaders, syntheticData, protocol } = request.args.data;
+        const { url, requestId, statusCode, initialPriority, priority, fromServiceWorker, mimeType, responseHeaders, syntheticData, protocol } = request.args.data;
         const parsedTrace = this.#parsedTrace;
         const titlePrefix = `## ${options?.customTitle ?? 'Network request'}`;
         // Note: unlike other agents, we do have the ability to include
@@ -464,7 +491,7 @@ export class PerformanceTraceFormatter {
         const mainThreadProcessingDuration = startTimesForLifecycle.processingCompletedAt - startTimesForLifecycle.downloadCompletedAt;
         const downloadTime = syntheticData.finishTime - syntheticData.downloadStart;
         const renderBlocking = Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(request);
-        const initiator = parsedTrace.data.NetworkRequests.eventToInitiator.get(request);
+        const initiator = Trace.Extras.Initiators.getNetworkInitiator(parsedTrace.data, request);
         const priorityLines = [];
         if (initialPriority === priority) {
             priorityLines.push(`Priority: ${priority}`);
@@ -483,7 +510,7 @@ export class PerformanceTraceFormatter {
         const initiatorUrls = initiators.map(initiator => initiator.args.data.url);
         const eventKey = this.#eventsSerializer.keyForEvent(request);
         const eventKeyLine = eventKey ? `eventKey: ${eventKey}\n` : '';
-        return `${titlePrefix}: ${url}
+        return `${titlePrefix}: ${url}${Annotations.AnnotationRepository.annotationsEnabled() ? `\nrequestId: ${requestId}` : ''}
 ${eventKeyLine}Timings:
 - Queued at: ${micros(startTimesForLifecycle.queuedAt)}
 - Request sent at: ${micros(startTimesForLifecycle.requestSentAt)}
@@ -648,17 +675,61 @@ The order of headers corresponds to an internal fixed list. If a header is not p
         ];
         return parts.join(';');
     }
+    resolveFunctionCodeAtLocation(url, line, column) {
+        if (!this.resolveFunctionCode) {
+            throw new Error('missing resolveFunctionCode');
+        }
+        return this.resolveFunctionCode(url, line, column);
+    }
     formatFunctionCode(code) {
+        return this.#getFormattedFunctionCodeExplainer() + '\n\n' + this.#formatFunctionCode(code);
+    }
+    #getFormattedFunctionCodeExplainer() {
+        return 'The following are markdown block(s) of code that ran in the page, each representing a separate function. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.';
+    }
+    #functionCodeToKey(code) {
+        return code.functionBounds.uiSourceCode.url() + ':' + code.functionBounds.range.toString();
+    }
+    #hasFormattedFunctionCode(code) {
+        return this.#formattedFunctionCodes.has(this.#functionCodeToKey(code));
+    }
+    #formatFunctionCode(code) {
+        this.#formattedFunctionCodes.add(this.#functionCodeToKey(code));
         const { startLine, startColumn } = code.range;
         const { startLine: contextStartLine, startColumn: contextStartColumn, endLine: contextEndLine, endColumn: contextEndColumn } = code.rangeWithContext;
-        const name = code.functionBounds.name;
+        const name = code.functionBounds.name || '(anonymous)';
         const url = code.functionBounds.uiSourceCode.url();
         const parts = [];
         parts.push(`${name} @ ${url}:${startLine}:${startColumn}. With added context, chunk is from ${contextStartLine}:${contextStartColumn} to ${contextEndLine}:${contextEndColumn}`);
-        parts.push('\nThe following is a markdown block of JavaScript. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.\n');
         parts.push('```');
         parts.push(code.codeWithContext);
         parts.push('```');
         return parts.join('\n');
     }
+    /**
+     * Appends the code of each call frame's function, but only if the function was not
+     * serialized previously.
+     */
+    async #serializeRelevantFunctions(callFrames) {
+        const resolveFunctionCode = this.resolveFunctionCode;
+        if (!resolveFunctionCode) {
+            return '';
+        }
+        const functionCodeStrings = [];
+        const functionCodes = await Promise.all(callFrames.map(frame => resolveFunctionCode(frame.url, frame.lineNumber, frame.columnNumber)));
+        for (const code of functionCodes) {
+            if (code && !this.#hasFormattedFunctionCode(code)) {
+                functionCodeStrings.push(this.#formatFunctionCode(code));
+            }
+        }
+        if (!functionCodeStrings.length) {
+            return '';
+        }
+        return '\n' + [
+            this.#getFormattedFunctionCodeExplainer(),
+            functionCodeStrings.length > 1 ? `Here are ${functionCodeStrings.length} relevant functions:` :
+                `Here is a relevant function:`,
+            ...functionCodeStrings,
+        ].join('\n\n');
+    }
 }

package/build/node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/performance/AICallTree.js

@@ -319,6 +319,41 @@ export class AICallTree {
         }
         return line;
     }
+    topCallFramesBySelfTime(limit) {
+        const functionNodesByCallFrame = new Map();
+        this.breadthFirstWalk(this.rootNode.children().values(), node => {
+            if (Trace.Types.Events.isProfileCall(node.event)) {
+                const callFrame = node.event.callFrame;
+                const callFrameKey = `${callFrame.scriptId}:${callFrame.lineNumber}:${callFrame.columnNumber}`;
+                const array = functionNodesByCallFrame.get(callFrameKey) ?? [];
+                array.push(node);
+                functionNodesByCallFrame.set(callFrameKey, array);
+            }
+        });
+        return [...functionNodesByCallFrame.values()]
+            .map(nodes => {
+            return {
+                callFrame: nodes[0].event.callFrame,
+                selfTime: nodes.reduce((total, cur) => total + cur.selfTime, 0),
+            };
+        })
+            .sort((a, b) => b.selfTime - a.selfTime)
+            .slice(0, limit)
+            .map(({ callFrame }) => callFrame);
+    }
+    topCallFrameByTotalTime() {
+        let topChild = null;
+        let topProfileCallEvent = null;
+        for (const child of this.rootNode.children().values()) {
+            if (Trace.Types.Events.isProfileCall(child.event)) {
+                if (!topChild || child.totalTime > topChild.totalTime) {
+                    topChild = child;
+                    topProfileCallEvent = child.event;
+                }
+            }
+        }
+        return topProfileCallEvent?.callFrame ?? null;
+    }
     // Only used for debugging.
     logDebug() {
         const str = this.serialize();

package/build/node_modules/chrome-devtools-frontend/front_end/models/annotations/AnnotationRepository.js

@@ -0,0 +1,163 @@
+// 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 Common from '../../core/common/common.js';
+import * as GreenDev from '../greendev/greendev.js';
+import { AnnotationType } from './AnnotationType.js';
+export class AnnotationRepository {
+    static #instance = null;
+    static #hasRepliedGreenDevDisabled = false;
+    static #hasShownFlagWarning = false;
+    #events = new Common.ObjectWrapper.ObjectWrapper();
+    #annotationData = [];
+    #nextId = 0;
+    static instance() {
+        if (!AnnotationRepository.#instance) {
+            AnnotationRepository.#instance = new AnnotationRepository();
+        }
+        return AnnotationRepository.#instance;
+    }
+    static annotationsEnabled() {
+        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;
+        }
+        else if (this.#hasRepliedGreenDevDisabled && !this.#hasShownFlagWarning) {
+            console.warn('Flag controlling GreenDev has flipped from false to true. ' +
+                'Only some callers will expect GreenDev to be enabled, which can lead to unexpected results.');
+            this.#hasShownFlagWarning = true;
+        }
+        return Boolean(enabled);
+    }
+    addEventListener(eventType, listener, thisObject) {
+        if (!AnnotationRepository.annotationsEnabled()) {
+            console.warn('Received request to add event listener with annotations disabled');
+        }
+        return this.#events.addEventListener(eventType, listener, thisObject);
+    }
+    getAnnotationDataByType(type) {
+        if (!AnnotationRepository.annotationsEnabled()) {
+            console.warn('Received query for annotation types with annotations disabled');
+            return [];
+        }
+        const annotations = this.#annotationData.filter(annotation => annotation.type === type);
+        return annotations;
+    }
+    getAnnotationDataById(id) {
+        if (!AnnotationRepository.annotationsEnabled()) {
+            console.warn('Received query for annotation type with annotations disabled');
+            return undefined;
+        }
+        return this.#annotationData.find(annotation => annotation.id === id);
+    }
+    #getExistingAnnotation(type, anchor) {
+        const annotations = this.getAnnotationDataByType(type);
+        const annotation = annotations.find(annotation => {
+            if (typeof anchor === 'string') {
+                return annotation.lookupId === anchor;
+            }
+            switch (type) {
+                case AnnotationType.ELEMENT_NODE: {
+                    const elementAnnotation = annotation;
+                    return elementAnnotation.anchor === anchor;
+                }
+                case AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS: {
+                    const networkRequestDetailsAnnotation = annotation;
+                    return networkRequestDetailsAnnotation.anchor === anchor;
+                }
+                default:
+                    console.warn('[AnnotationRepository] Unknown AnnotationType', type);
+                    return false;
+            }
+        });
+        return annotation;
+    }
+    #updateExistingAnnotationLabel(label, type, anchor) {
+        const annotation = this.#getExistingAnnotation(type, anchor);
+        if (annotation) {
+            // TODO(finnur): This should work for annotations that have not been displayed yet,
+            // but we need to also notify the AnnotationManager for those that have been shown.
+            annotation.message = label;
+            return true;
+        }
+        return false;
+    }
+    addElementsAnnotation(label, anchor, anchorToString) {
+        if (!AnnotationRepository.annotationsEnabled()) {
+            console.warn('Received annotation registration with annotations disabled');
+            return;
+        }
+        if (this.#updateExistingAnnotationLabel(label, AnnotationType.ELEMENT_NODE, anchor)) {
+            return;
+        }
+        const annotationData = {
+            id: this.#nextId++,
+            type: AnnotationType.ELEMENT_NODE,
+            message: label,
+            lookupId: typeof anchor === 'string' ? anchor : '',
+            anchor: typeof anchor !== 'string' ? anchor : undefined,
+            anchorToString,
+        };
+        this.#annotationData.push(annotationData);
+        // eslint-disable-next-line no-console
+        console.log('[AnnotationRepository] Added element annotation:', label, {
+            annotationData,
+            annotations: this.#annotationData.length,
+        });
+        this.#events.dispatchEventToListeners("AnnotationAdded" /* Events.ANNOTATION_ADDED */, annotationData);
+    }
+    addNetworkRequestAnnotation(label, anchor, anchorToString) {
+        if (!AnnotationRepository.annotationsEnabled()) {
+            console.warn('Received annotation registration with annotations disabled');
+            return;
+        }
+        // We only need to update the NETWORK_REQUEST_SUBPANEL_HEADERS because the
+        // NETWORK_REQUEST Annotation has no meaningful label.
+        if (this.#updateExistingAnnotationLabel(label, AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS, anchor)) {
+            return;
+        }
+        const annotationData = {
+            id: this.#nextId++,
+            type: AnnotationType.NETWORK_REQUEST,
+            message: '',
+            lookupId: typeof anchor === 'string' ? anchor : '',
+            anchor: typeof anchor !== 'string' ? anchor : undefined,
+            anchorToString,
+        };
+        this.#annotationData.push(annotationData);
+        // eslint-disable-next-line no-console
+        console.log('[AnnotationRepository] Added annotation:', label, {
+            annotationData,
+            annotations: this.#annotationData.length,
+        });
+        this.#events.dispatchEventToListeners("AnnotationAdded" /* Events.ANNOTATION_ADDED */, annotationData);
+        const annotationDetailsData = {
+            id: this.#nextId++,
+            type: AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS,
+            message: label,
+            lookupId: typeof anchor === 'string' ? anchor : '',
+            anchor: typeof anchor !== 'string' ? anchor : undefined,
+            anchorToString,
+        };
+        this.#annotationData.push(annotationDetailsData);
+        this.#events.dispatchEventToListeners("AnnotationAdded" /* Events.ANNOTATION_ADDED */, annotationDetailsData);
+    }
+    deleteAllAnnotations() {
+        this.#annotationData = [];
+        this.#events.dispatchEventToListeners("AllAnnotationsDeleted" /* Events.ALL_ANNOTATIONS_DELETED */);
+        // eslint-disable-next-line no-console
+        console.log('[AnnotationRepository] Deleting all annotations');
+    }
+    deleteAnnotation(id) {
+        const index = this.#annotationData.findIndex(annotation => annotation.id === id);
+        if (index === -1) {
+            console.warn(`[AnnotationRepository] Could not find annotation with id ${id}`);
+            return;
+        }
+        this.#annotationData.splice(index, 1);
+        this.#events.dispatchEventToListeners("AnnotationDeleted" /* Events.ANNOTATION_DELETED */, { id });
+        // eslint-disable-next-line no-console
+        console.log(`[AnnotationRepository] Deleted annotation with id ${id}`);
+    }
+}

package/build/node_modules/chrome-devtools-frontend/front_end/models/annotations/AnnotationType.js

@@ -0,0 +1,10 @@
+// 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 var AnnotationType;
+(function (AnnotationType) {
+    AnnotationType[AnnotationType["ELEMENT_NODE"] = 0] = "ELEMENT_NODE";
+    AnnotationType[AnnotationType["STYLE_RULE"] = 1] = "STYLE_RULE";
+    AnnotationType[AnnotationType["NETWORK_REQUEST"] = 2] = "NETWORK_REQUEST";
+    AnnotationType[AnnotationType["NETWORK_REQUEST_SUBPANEL_HEADERS"] = 3] = "NETWORK_REQUEST_SUBPANEL_HEADERS";
+})(AnnotationType || (AnnotationType = {}));

package/build/node_modules/chrome-devtools-frontend/front_end/models/annotations/annotations.js

@@ -0,0 +1,5 @@
+// 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 './AnnotationRepository.js';
+export * from './AnnotationType.js';

package/build/node_modules/chrome-devtools-frontend/front_end/models/bindings/CompilerScriptMapping.js

@@ -229,6 +229,7 @@ export class CompilerScriptMapping {
         if (!sourceMap) {
             return null;
         }
+        await sourceMap.waitForScopeInfo();
         const { lineNumber, columnNumber } = script.rawLocationToRelativeLocation(rawLocation);
         const { url, scope } = sourceMap.findOriginalFunctionScope({ line: lineNumber, column: columnNumber }) ?? {};
         if (!scope || !url) {
@@ -254,21 +255,22 @@ export class CompilerScriptMapping {
         const range = new TextUtils.TextRange.TextRange(scope.start.line, scope.start.column, scope.end.line, scope.end.column);
         return new Workspace.UISourceCode.UIFunctionBounds(uiSourceCode, range, name);
     }
-    translateRawFramesStep(rawFrames, translatedFrames) {
+    async translateRawFramesStep(rawFrames, translatedFrames) {
         const frame = rawFrames[0];
         if (StackTraceImpl.Trie.isBuiltinFrame(frame)) {
             return false;
         }
-        const sourceMapWithScopeInfoForFrame = (rawFrame) => {
+        const sourceMapWithScopeInfoForFrame = async (rawFrame) => {
             const script = this.#debuggerModel.scriptForId(rawFrame.scriptId ?? '');
             if (!script || this.#stubUISourceCodes.has(script)) {
                 // Use fallback while source map is being loaded.
                 return null;
             }
             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;
         }