chrome-devtools-mcp-for-extension 0.19.2 → 0.20.0

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

@@ -239,7 +239,9 @@ export class PerformanceInsightFormatter {
         const rootCauseText = potentialRootCauses.length ? `- Potential root causes:\n  ${potentialRootCauses.join('\n')}` :
             '- No potential root causes identified';
         const startTime = Trace.Helpers.Timing.microToMilli(Trace.Types.Timing.Micro(shift.ts - baseTime));
-        return `### Layout shift ${index + 1}:
+        const impactedNodeNames = shift.rawSourceEvent.args.data?.impacted_nodes?.map(n => n.debug_name).filter(name => name !== undefined) ?? [];
+        const impactedNodeText = impactedNodeNames.length ? `\n- Impacted elements:\n  - ${impactedNodeNames.join('\n  - ')}\n` : '';
+        return `### Layout shift ${index + 1}:${impactedNodeText}
 - Start time: ${millis(startTime)}
 - Score: ${shift.args.data?.weighted_score_delta.toFixed(4)}
 ${rootCauseText}`;
@@ -432,7 +434,7 @@ Duplication grouped by Node modules: ${filesFormatted}`;
             output += 'No top-level functions causing forced reflows were identified.\n';
         }
         if (insight.aggregatedBottomUpData.length > 0) {
-            output += '\n' + Trace.Insights.Models.ForcedReflow.UIStrings.relatedStackTrace + ' (including total time):\n';
+            output += '\n' + Trace.Insights.Models.ForcedReflow.UIStrings.reflowCallFrames + ' (including total time):\n';
             for (const data of insight.aggregatedBottomUpData) {
                 output += `\n - ${this.#formatMicro(data.totalTime)} in ${callFrameToString(data.bottomUpData)}`;
             }
@@ -845,55 +847,69 @@ ${this.#links()}`;
             .join(', ');
     }
     #links() {
+        const links = [];
+        if (this.#insight.docs) {
+            links.push(this.#insight.docs);
+        }
         switch (this.#insight.insightKey) {
             case 'CLSCulprits':
-                return `- https://web.dev/articles/cls
-- https://web.dev/articles/optimize-cls`;
+                links.push('https://web.dev/articles/cls');
+                links.push('https://web.dev/articles/optimize-cls');
+                break;
             case 'DocumentLatency':
-                return '- https://web.dev/articles/optimize-ttfb';
+                links.push('https://web.dev/articles/optimize-ttfb');
+                break;
             case 'DOMSize':
-                return '- https://developer.chrome.com/docs/lighthouse/performance/dom-size/';
-            case 'DuplicatedJavaScript':
-                return '';
+                links.push('https://developer.chrome.com/docs/lighthouse/performance/dom-size/');
+                break;
             case 'FontDisplay':
-                return `- https://web.dev/articles/preload-optional-fonts
-- https://fonts.google.com/knowledge/glossary/foit
-- https://developer.chrome.com/blog/font-fallbacks`;
+                links.push('https://web.dev/articles/preload-optional-fonts');
+                links.push('https://fonts.google.com/knowledge/glossary/foit');
+                links.push('https://developer.chrome.com/blog/font-fallbacks');
+                break;
             case 'ForcedReflow':
-                return '- https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts';
+                links.push('https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts');
+                break;
             case 'ImageDelivery':
-                return '- https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/';
+                links.push('https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/');
+                break;
             case 'INPBreakdown':
-                return `- https://web.dev/articles/inp
-- https://web.dev/explore/how-to-optimize-inp
-- https://web.dev/articles/optimize-long-tasks
-- https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing`;
-            case 'LCPDiscovery':
-                return `- https://web.dev/articles/lcp
-- https://web.dev/articles/optimize-lcp`;
+                links.push('https://web.dev/articles/inp');
+                links.push('https://web.dev/explore/how-to-optimize-inp');
+                links.push('https://web.dev/articles/optimize-long-tasks');
+                links.push('https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing');
+                break;
             case 'LCPBreakdown':
-                return `- https://web.dev/articles/lcp
-- https://web.dev/articles/optimize-lcp`;
-            case 'NetworkDependencyTree':
-                return `- https://web.dev/learn/performance/understanding-the-critical-path
-- https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/`;
+            case 'LCPDiscovery':
             case 'RenderBlocking':
-                return `- https://web.dev/articles/lcp
-- https://web.dev/articles/optimize-lcp`;
+                links.push('https://web.dev/articles/lcp');
+                links.push('https://web.dev/articles/optimize-lcp');
+                break;
+            case 'NetworkDependencyTree':
+                links.push('https://web.dev/learn/performance/understanding-the-critical-path');
+                links.push('https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/');
+                break;
             case 'SlowCSSSelector':
-                return '- https://developer.chrome.com/docs/devtools/performance/selector-stats';
+                links.push('https://developer.chrome.com/docs/devtools/performance/selector-stats');
+                break;
             case 'ThirdParties':
-                return '- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/';
+                links.push('https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/');
+                break;
             case 'Viewport':
-                return '- https://developer.chrome.com/blog/300ms-tap-delay-gone-away/';
+                links.push('https://developer.chrome.com/blog/300ms-tap-delay-gone-away/');
+                break;
             case 'Cache':
-                return '- https://web.dev/uses-long-cache-ttl/';
+                links.push('https://web.dev/uses-long-cache-ttl/');
+                break;
             case 'ModernHTTP':
-                return '- https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2';
+                links.push('https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2');
+                break;
             case 'LegacyJavaScript':
-                return `- https://web.dev/articles/baseline-and-polyfills
-- https://philipwalton.com/articles/the-state-of-es5-on-the-web/`;
+                links.push('https://web.dev/articles/baseline-and-polyfills');
+                links.push('https://philipwalton.com/articles/the-state-of-es5-on-the-web/');
+                break;
         }
+        return links.map(link => '- ' + link).join('\n');
     }
     #description() {
         switch (this.#insight.insightKey) {

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

@@ -15,7 +15,7 @@ export class PerformanceTraceFormatter {
     constructor(focus) {
         this.#focus = focus;
         this.#parsedTrace = focus.parsedTrace;
-        this.#insightSet = focus.insightSet;
+        this.#insightSet = focus.primaryInsightSet;
         this.#eventsSerializer = focus.eventsSerializer;
     }
     serializeEvent(event) {
@@ -91,58 +91,62 @@ export class PerformanceTraceFormatter {
     }
     formatTraceSummary() {
         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) => {
-                        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) => {
+                            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}`);
                 }
             }
-            if (inp) {
-                parts.push(`  - INP: ${Math.round(inp.value / 1000)} ms, event: ${this.serializeEvent(inp.event)}`);
+            else {
+                parts.push('Metrics (lab / observed): n/a');
             }
-            if (cls) {
-                const eventText = cls.worstClusterEvent ? `, event: ${this.serializeEvent(cls.worstClusterEvent)}` : '';
-                parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
+            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');
             }
-        }
-        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');
-        }
-        if (insightSet) {
             parts.push('Available insights:');
             for (const [insightName, model] of Object.entries(insightSet.model)) {
                 if (model.state === 'pass') {
@@ -172,23 +176,44 @@ export class PerformanceTraceFormatter {
                 parts.push(`  - ${insightPartsText}`);
             }
         }
+        return parts.join('\n');
+    }
+    #formatFactByInsightSet(options) {
+        const { insights, title, description, empty, cb } = options;
+        const lines = [`# ${title}\n`];
+        if (description) {
+            lines.push(`${description}\n`);
+        }
+        if (insights?.size) {
+            const multipleInsightSets = insights.size > 1;
+            for (const insightSet of insights.values()) {
+                if (multipleInsightSets) {
+                    lines.push(`## insight set id: ${insightSet.id}\n`);
+                }
+                lines.push((cb(insightSet) ?? empty) + '\n');
+            }
+        }
         else {
-            parts.push('Available insights: none');
+            lines.push(empty + '\n');
         }
-        return parts.join('\n');
+        return lines.join('\n');
     }
     formatCriticalRequests() {
-        const insightSet = this.#insightSet;
-        const criticalRequests = [];
-        const walkRequest = (node) => {
-            criticalRequests.push(node.request);
-            node.children.forEach(walkRequest);
-        };
-        insightSet?.model.NetworkDependencyTree.rootNodes.forEach(walkRequest);
-        if (!criticalRequests.length) {
-            return '';
-        }
-        return 'Critical network requests:\n' + this.formatNetworkRequests(criticalRequests, { verbose: false });
+        const parsedTrace = this.#parsedTrace;
+        return this.#formatFactByInsightSet({
+            insights: parsedTrace.insights,
+            title: 'Critical network requests',
+            empty: 'none',
+            cb: insightSet => {
+                const criticalRequests = [];
+                const walkRequest = (node) => {
+                    criticalRequests.push(node.request);
+                    node.children.forEach(walkRequest);
+                };
+                insightSet.model.NetworkDependencyTree.rootNodes.forEach(walkRequest);
+                return criticalRequests.length ? this.formatNetworkRequests(criticalRequests, { verbose: false }) : null;
+            },
+        });
     }
     #serializeBottomUpRootNode(rootNode, limit) {
         // Sorted by selfTime.
@@ -220,19 +245,24 @@ export class PerformanceTraceFormatter {
             }
             return `- self: ${millis(node.selfTime)}, total: ${millis(node.totalTime)}, source: ${source}`;
         }
-        const listText = topNodes.map(node => nodeToText.call(this, node)).join('\n');
-        const format = `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.`;
-        return `${format}\n\n${listText}`;
+        return topNodes.map(node => nodeToText.call(this, node)).join('\n');
+    }
+    #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.`;
     }
     formatMainThreadBottomUpSummary() {
         const parsedTrace = this.#parsedTrace;
-        const insightSet = this.#insightSet;
-        const bounds = parsedTrace.data.Meta.traceBounds;
-        const rootNode = AIQueries.mainThreadActivityBottomUp(insightSet?.navigation?.args.data?.navigationId, bounds, parsedTrace);
-        if (!rootNode) {
-            return '';
-        }
-        return this.#serializeBottomUpRootNode(rootNode, 10);
+        const limit = 10;
+        return this.#formatFactByInsightSet({
+            insights: parsedTrace.insights,
+            title: 'Main thread bottom-up summary',
+            description: this.#getSerializeBottomUpRootNodeFormat(limit),
+            empty: 'no activity',
+            cb: insightSet => {
+                const rootNode = AIQueries.mainThreadActivityBottomUpSingleNavigation(insightSet.navigation?.args.data?.navigationId, insightSet.bounds, parsedTrace);
+                return rootNode ? this.#serializeBottomUpRootNode(rootNode, limit) : null;
+            },
+        });
     }
     #formatThirdPartyEntitySummaries(summaries) {
         const topMainThreadTimeEntries = summaries.toSorted((a, b) => b.mainThreadTime - a.mainThreadTime).slice(0, 5);
@@ -248,36 +278,36 @@ export class PerformanceTraceFormatter {
         return listText;
     }
     formatThirdPartySummary() {
-        const insightSet = this.#insightSet;
-        if (!insightSet) {
-            return '';
-        }
-        const thirdParties = insightSet.model.ThirdParties;
-        let summaries = thirdParties.entitySummaries ?? [];
-        if (thirdParties.firstPartyEntity) {
-            summaries = summaries.filter(s => s.entity !== thirdParties?.firstPartyEntity || null);
-        }
-        const listText = this.#formatThirdPartyEntitySummaries(summaries);
-        if (!listText) {
-            return '';
-        }
-        return `Third party summary:\n${listText}`;
+        const parsedTrace = this.#parsedTrace;
+        return this.#formatFactByInsightSet({
+            insights: parsedTrace.insights,
+            title: '3rd party summary',
+            empty: 'no 3rd parties',
+            cb: insightSet => {
+                const thirdPartySummaries = Trace.Extras.ThirdParties.summarizeByThirdParty(parsedTrace.data, insightSet.bounds);
+                return thirdPartySummaries.length ? this.#formatThirdPartyEntitySummaries(thirdPartySummaries) : null;
+            },
+        });
     }
     formatLongestTasks() {
         const parsedTrace = this.#parsedTrace;
-        const insightSet = this.#insightSet;
-        const bounds = parsedTrace.data.Meta.traceBounds;
-        const longestTaskTrees = AIQueries.longestTasks(insightSet?.navigation?.args.data?.navigationId, bounds, parsedTrace, 3);
-        if (!longestTaskTrees || longestTaskTrees.length === 0) {
-            return 'Longest tasks: none';
-        }
-        const listText = longestTaskTrees
-            .map(tree => {
-            const time = millis(tree.rootNode.totalTime);
-            return `- total time: ${time}, event: ${this.serializeEvent(tree.rootNode.event)}`;
-        })
-            .join('\n');
-        return `Longest ${longestTaskTrees.length} tasks:\n${listText}`;
+        return this.#formatFactByInsightSet({
+            insights: parsedTrace.insights,
+            title: 'Longest tasks',
+            empty: 'none',
+            cb: insightSet => {
+                const longestTaskTrees = AIQueries.longestTasks(insightSet.navigation?.args.data?.navigationId, insightSet.bounds, parsedTrace, 3);
+                if (!longestTaskTrees?.length) {
+                    return null;
+                }
+                return longestTaskTrees
+                    .map(tree => {
+                    const time = millis(tree.rootNode.totalTime);
+                    return `- total time: ${time}, event: ${this.serializeEvent(tree.rootNode.event)}`;
+                })
+                    .join('\n');
+            },
+        });
     }
     #serializeRelatedInsightsForEvents(events) {
         if (!events.length) {
@@ -313,16 +343,22 @@ export class PerformanceTraceFormatter {
         return results.join('\n');
     }
     formatMainThreadTrackSummary(bounds) {
+        if (!this.#parsedTrace.insights) {
+            return 'No main thread activity found';
+        }
         const results = [];
-        const topDownTree = AIQueries.mainThreadActivityTopDown(this.#insightSet?.navigation?.args.data?.navigationId, bounds, this.#parsedTrace);
+        const insightSet = this.#parsedTrace.insights?.values().find(insightSet => Trace.Helpers.Timing.boundsIncludeTimeRange({ bounds, timeRange: insightSet.bounds }));
+        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 */));
         }
-        const bottomUpRootNode = AIQueries.mainThreadActivityBottomUp(this.#insightSet?.navigation?.args.data?.navigationId, bounds, this.#parsedTrace);
+        const bottomUpRootNode = AIQueries.mainThreadActivityBottomUp(bounds, this.#parsedTrace);
         if (bottomUpRootNode) {
             results.push('# Bottom-up main thread summary');
-            results.push(this.#serializeBottomUpRootNode(bottomUpRootNode, 20));
+            const limit = 20;
+            results.push(this.#getSerializeBottomUpRootNodeFormat(limit));
+            results.push(this.#serializeBottomUpRootNode(bottomUpRootNode, limit));
         }
         const thirdPartySummaries = Trace.Extras.ThirdParties.summarizeByThirdParty(this.#parsedTrace.data, bounds);
         if (thirdPartySummaries.length) {
@@ -496,7 +532,7 @@ Network requests data:
     }
     static callFrameDataFormatDescription = `Each call frame is presented in the following format:
 
-'id;eventKey;name;duration;selfTime;urlIndex;childRange;[S]'
+'id;eventKey;name;duration;selfTime;urlIndex;childRange;[line];[column];[S]'
 
 Key definitions:
 
@@ -507,15 +543,17 @@ Key definitions:
 * selfTime: The time spent directly within the call frame, excluding its children's execution.
 * urlIndex: Index referencing the "All URLs" list. Empty if no specific script URL is associated.
 * childRange: Specifies the direct children of this node using their IDs. If empty ('' or 'S' at the end), the node has no children. If a single number (e.g., '4'), the node has one child with that ID. If in the format 'firstId-lastId' (e.g., '4-5'), it indicates a consecutive range of child IDs from 'firstId' to 'lastId', inclusive.
+* line: An optional field for a call frame's line number. This is where the function is defined.
+* column: An optional field for a call frame's column number. This is where the function is defined.
 * S: _Optional_. The letter 'S' terminates the line if that call frame was selected by the user.
 
 Example Call Tree:
 
-1;r-123;main;500;100;;
-2;r-124;update;200;50;;3
-3;p-49575-15428179-2834-374;animate;150;20;0;4-5;S
-4;p-49575-15428179-3505-1162;calculatePosition;80;80;;
-5;p-49575-15428179-5391-2767;applyStyles;50;50;;
+1;r-123;main;500;100;0;1;;
+2;r-124;update;200;50;;3;0;1;
+3;p-49575-15428179-2834-374;animate;150;20;0;4-5;0;1;S
+4;p-49575-15428179-3505-1162;calculatePosition;80;80;0;1;;
+5;p-49575-15428179-5391-2767;applyStyles;50;50;0;1;;
 `;
     /**
      * Network requests format description that is sent to the model as a fact.
@@ -610,4 +648,17 @@ The order of headers corresponds to an internal fixed list. If a header is not p
         ];
         return parts.join(';');
     }
+    formatFunctionCode(code) {
+        const { startLine, startColumn } = code.range;
+        const { startLine: contextStartLine, startColumn: contextStartColumn, endLine: contextEndLine, endColumn: contextEndColumn } = code.rangeWithContext;
+        const name = code.functionBounds.name;
+        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');
+    }
 }

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

@@ -1,7 +1,6 @@
 // Copyright 2024 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 Root from '../../../core/root/root.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 /** Iterates from a node down through its descendents. If the callback returns true, the loop stops. */
@@ -122,7 +121,7 @@ export class AICallTree {
         if (!data.Renderer.entryToNode.has(selectedEvent) && !data.Samples.entryToNode.has(selectedEvent)) {
             return null;
         }
-        const allEventsEnabled = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
+        const showAllEvents = parsedTrace.data.Meta.config.showAllEvents;
         const { startTime, endTime } = Trace.Helpers.Timing.eventTimingsMilliSeconds(selectedEvent);
         const selectedEventBounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(Trace.Helpers.Timing.milliToMicro(startTime), Trace.Helpers.Timing.milliToMicro(endTime));
         let threadEvents = data.Renderer.processes.get(selectedEvent.pid)?.threads.get(selectedEvent.tid)?.entries;
@@ -139,7 +138,7 @@ export class AICallTree {
         // If the "Show all events" experiment is on, we don't filter out any
         // events here, otherwise the generated call tree will not match what the
         // user is seeing.
-        if (!allEventsEnabled) {
+        if (!showAllEvents) {
             filters.push(new Trace.Extras.TraceFilter.VisibleEventsFilter(Trace.Styles.visibleTypes()));
         }
         // Build a tree bounded by the selected event's timestamps, and our other filters applied
@@ -245,10 +244,12 @@ export class AICallTree {
     *   5. `urlIndex`: An index referencing a URL in the `allUrls` array. If no URL is present, this is an empty string.
     *   6. `childRange`: A string indicating the range of IDs for the node's children. Children should always have consecutive IDs.
     *                    If there is only one child, it's a single ID.
-    *   7. `[S]`: An optional marker indicating that this node is the selected node.
+    *   7. `[line]`: An optional field for a call frame's line number.
+    *   8. `[column]`: An optional field for a call frame's column number.
+    *   9. `[S]`: An optional marker indicating that this node is the selected node.
     *
     * Example:
-    *   `1;Parse HTML;2.5;0.3;0;2-5;S`
+    *   `1;Parse HTML;2.5;0.3;0;2-5;10;11;S`
     *   This represents:
     *     - Node ID 1
     *     - Name "Parse HTML"
@@ -256,6 +257,7 @@ export class AICallTree {
     *     - Self time of 0.3ms
     *     - URL index 0 (meaning the URL is the first one in the `allUrls` array)
     *     - Child range of IDs 2 to 5
+    *     - Line, column is 10:11
     *     - This node is the selected node (S marker)
     */
     stringifyNode(node, nodeId, parsedTrace, selectedNode, allUrls, childStartingNodeIndex) {
@@ -281,7 +283,8 @@ export class AICallTree {
         // 5. Self Time
         const selfTimeStr = roundToTenths(node.selfTime);
         // 6. URL Index
-        const url = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(parsedTrace, event);
+        const location = SourceMapsResolver.SourceMapsResolver.codeLocationForEntry(parsedTrace, event);
+        const url = location?.url;
         let urlIndexStr = '';
         if (url) {
             const existingIndex = allUrls.indexOf(url);
@@ -309,6 +312,8 @@ export class AICallTree {
         line += ';' + selfTimeStr;
         line += ';' + urlIndexStr;
         line += ';' + childRangeStr;
+        line += ';' + (location?.line ?? '');
+        line += ';' + (location?.column ?? '');
         if (selectedMarker) {
             line += ';' + selectedMarker;
         }

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

@@ -3,21 +3,30 @@
 // found in the LICENSE file.
 import * as Trace from '../../../models/trace/trace.js';
 import { AICallTree } from './AICallTree.js';
-function getFirstInsightSet(insights) {
-    // Currently only support a single insight set. Pick the first one with a navigation.
-    // TODO(cjamcl): we should just give the agent the entire insight set, and give
-    // summary detail about all of them + the ability to query each.
-    return [...insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
+/**
+ * Gets the first, most relevant InsightSet to use, following the logic of:
+ * 1. If there is only one InsightSet, use that.
+ * 2. If there are more, prefer the first we find that has a navigation associated with it.
+ * 3. If none with a navigation are found, fallback to the first one.
+ * 4. Otherwise, return null.
+ */
+function getPrimaryInsightSet(insights) {
+    const insightSets = Array.from(insights.values());
+    if (insightSets.length === 0) {
+        return null;
+    }
+    if (insightSets.length === 1) {
+        return insightSets[0];
+    }
+    return insightSets.filter(set => set.navigation).at(0) ?? insightSets.at(0) ?? null;
 }
 export class AgentFocus {
     static fromParsedTrace(parsedTrace) {
         if (!parsedTrace.insights) {
             throw new Error('missing insights');
         }
-        const insightSet = getFirstInsightSet(parsedTrace.insights);
         return new AgentFocus({
             parsedTrace,
-            insightSet,
             event: null,
             callTree: null,
             insight: null,
@@ -27,10 +36,8 @@ export class AgentFocus {
         if (!parsedTrace.insights) {
             throw new Error('missing insights');
         }
-        const insightSet = getFirstInsightSet(parsedTrace.insights);
         return new AgentFocus({
             parsedTrace,
-            insightSet,
             event: null,
             callTree: null,
             insight,
@@ -40,35 +47,27 @@ export class AgentFocus {
         if (!parsedTrace.insights) {
             throw new Error('missing insights');
         }
-        const insightSet = getFirstInsightSet(parsedTrace.insights);
         const result = AgentFocus.#getCallTreeOrEvent(parsedTrace, event);
-        return new AgentFocus({ parsedTrace, insightSet, event: result.event, callTree: result.callTree, insight: null });
+        return new AgentFocus({ parsedTrace, event: result.event, callTree: result.callTree, insight: null });
     }
     static fromCallTree(callTree) {
-        const insights = callTree.parsedTrace.insights;
-        // Select the insight set containing the call tree.
-        // If for some reason that fails, fallback to the first one.
-        let insightSet = null;
-        if (insights) {
-            const callTreeTimeRange = Trace.Helpers.Timing.traceWindowFromEvent(callTree.rootNode.event);
-            insightSet = insights.values().find(set => Trace.Helpers.Timing.boundsIncludeTimeRange({
-                timeRange: callTreeTimeRange,
-                bounds: set.bounds,
-            })) ??
-                getFirstInsightSet(insights);
-        }
-        return new AgentFocus({ parsedTrace: callTree.parsedTrace, insightSet, event: null, callTree, insight: null });
+        return new AgentFocus({ parsedTrace: callTree.parsedTrace, event: null, callTree, insight: null });
     }
     #data;
+    #primaryInsightSet;
     eventsSerializer = new Trace.EventsSerializer.EventsSerializer();
     constructor(data) {
+        if (!data.parsedTrace.insights) {
+            throw new Error('missing insights');
+        }
         this.#data = data;
+        this.#primaryInsightSet = getPrimaryInsightSet(data.parsedTrace.insights);
     }
     get parsedTrace() {
         return this.#data.parsedTrace;
     }
-    get insightSet() {
-        return this.#data.insightSet;
+    get primaryInsightSet() {
+        return this.#primaryInsightSet;
     }
     /** Note: at most one of event or callTree is non-null. */
     get event() {