chrome-devtools-frontend 1.0.1651641 → 1.0.1654411

package/front_end/models/ai_assistance/contexts/PerformanceTraceContext.ts

@@ -0,0 +1,295 @@
+// Copyright 2026 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 type {UrlString} from '../../../core/platform/DevToolsPath.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import * as Tracing from '../../../services/tracing/tracing.js';
+import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
+import * as Trace from '../../trace/trace.js';
+import {
+  type ContextDetail,
+  ConversationContext,
+  type ConversationSuggestions,
+} from '../agents/AiAgent.js';
+import {extractContextOrigin} from '../AiOrigins.js';
+import {
+  PerformanceInsightFormatter,
+} from '../data_formatters/PerformanceInsightFormatter.js';
+import {PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceFormatter.js';
+import type {AICallTree} from '../performance/AICallTree.js';
+import {AgentFocus} from '../performance/AIContext.js';
+
+/**
+ * The conversation context for AI queries regarding performance traces.
+ * Encapsulates the user's active trace selection/focus and handles formatting
+ * the context data for the LLM prompt and user-facing accordion disclosures.
+ */
+export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
+  static fromParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace): PerformanceTraceContext {
+    return new PerformanceTraceContext(AgentFocus.fromParsedTrace(parsedTrace));
+  }
+
+  static fromInsight(parsedTrace: Trace.TraceModel.ParsedTrace,
+                     insight: Trace.Insights.Types.InsightModel): PerformanceTraceContext {
+    return new PerformanceTraceContext(AgentFocus.fromInsight(parsedTrace, insight));
+  }
+
+  static fromCallTree(callTree: AICallTree): PerformanceTraceContext {
+    return new PerformanceTraceContext(AgentFocus.fromCallTree(callTree));
+  }
+
+  readonly #focus: AgentFocus;
+
+  constructor(focus: AgentFocus) {
+    super();
+    this.#focus = focus;
+  }
+
+  /**
+   * Returns a PerformanceTraceFormatter configured to resolve function
+   * code from source maps using the active page target.
+   *
+   * Note: Function code resolution from source maps is only supported for fresh
+   * recordings (recorded in the current session on the active target page). For
+   * imported traces, it returns null to prevent mismatched source resolution.
+   */
+  createFormatter(): PerformanceTraceFormatter {
+    const focus = this.#focus;
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const formatter = new PerformanceTraceFormatter(focus);
+    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(focus.parsedTrace);
+
+    formatter.resolveFunctionCode = async (url: UrlString, line: number, column: number) => {
+      if (!target || !isFresh) {
+        return null;
+      }
+      return await SourceMapScopes.FunctionCodeResolver.getFunctionCodeFromLocation(
+          target, url, line, column, {contextLength: 200, contextLineLength: 5, appendProfileData: true});
+    };
+    return formatter;
+  }
+
+  override getURL(): string {
+    const url = this.#focus.parsedTrace.data.Meta.mainFrameURL;
+    try {
+      new URL(url);
+      return url;
+    } catch {
+      const {min, max} = this.#focus.parsedTrace.data.Meta.traceBounds;
+      return `trace-${min}-${max}`;
+    }
+  }
+
+  /**
+   * Returns the origin for a performance trace in the AI context.
+   *
+   * To prevent cross-origin prompt injection attacks, imported traces
+   * are isolated from live pages. We assign them a virtual origin
+   * (`imported-trace://${domain}`) so they do not share the origin of live pages
+   * (e.g., `https://${domain}`). This forces a conversation reset when transitioning
+   * between imported trace data and live pages.
+   */
+  override getOrigin(): string {
+    const parsedTrace = this.#focus.parsedTrace;
+    const url = this.getURL();
+    const origin = extractContextOrigin(url);
+    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace);
+    if (!isFresh) {
+      const parsed = Common.ParsedURL.ParsedURL.fromString(origin as Platform.DevToolsPath.UrlString);
+      return `imported-trace://${parsed ? parsed.domain() : origin}`;
+    }
+    return origin;
+  }
+
+  override getItem(): AgentFocus {
+    return this.#focus;
+  }
+
+  override getTitle(): string {
+    const focus = this.#focus;
+
+    let url = focus.primaryInsightSet?.url;
+    if (!url) {
+      url = new URL(focus.parsedTrace.data.Meta.mainFrameURL);
+    }
+
+    const parts = [`Trace: ${url.hostname}`];
+    if (focus.insight) {
+      parts.push(focus.insight.title);
+    }
+    if (focus.event) {
+      parts.push(Trace.Name.forEntry(focus.event));
+    }
+    if (focus.callTree) {
+      const node = focus.callTree.selectedNode ?? focus.callTree.rootNode;
+      parts.push(Trace.Name.forEntry(node.event));
+    }
+    return parts.join(' – ');
+  }
+
+  /**
+   * Presents the default suggestions that are shown when the user first clicks
+   * "Ask AI".
+   */
+  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
+    const focus = this.#focus;
+
+    if (focus.callTree) {
+      return [
+        {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
+        {title: 'Where is time being spent?', jslogContext: 'performance-default'},
+        {title: 'How can I optimize this?', jslogContext: 'performance-default'},
+      ];
+    }
+
+    if (focus.insight) {
+      return new PerformanceInsightFormatter(focus, focus.insight).getSuggestions();
+    }
+
+    const suggestions: ConversationSuggestions =
+        [{title: 'What performance issues exist with my page?', jslogContext: 'performance-default'}];
+
+    const insightSet = focus.primaryInsightSet;
+    if (insightSet) {
+      const lcp = Trace.Insights.Common.getLCP(insightSet);
+      const cls = Trace.Insights.Common.getCLS(insightSet);
+      const inp = Trace.Insights.Common.getINP(insightSet);
+
+      const ModelHandlers = Trace.Handlers.ModelHandlers;
+      const GOOD = Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD;
+
+      const poorMetrics = new Set<Trace.Insights.Types.InsightKeys>();
+
+      if (lcp && ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(lcp.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve LCP?', jslogContext: 'performance-default'});
+        poorMetrics.add(Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN);
+        poorMetrics.add(Trace.Insights.Types.InsightKeys.LCP_DISCOVERY);
+      }
+      if (inp && ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(inp.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve INP?', jslogContext: 'performance-default'});
+        poorMetrics.add(Trace.Insights.Types.InsightKeys.INP_BREAKDOWN);
+      }
+      if (cls && ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve CLS?', jslogContext: 'performance-default'});
+        poorMetrics.add(Trace.Insights.Types.InsightKeys.CLS_CULPRITS);
+      }
+
+      // Add up to 4 suggestions total (including those already added) from the top failing insights
+      // that aren't already covered by CWV suggestions.
+      const additionalSuggestionsRequired = Math.max(0, 4 - suggestions.length);
+      if (additionalSuggestionsRequired > 0) {
+        const failingInsightSuggestions =
+            Object.values(insightSet.model)
+                .filter(model => {
+                  return model.state !== 'pass' && Trace.Insights.Common.isInsightKey(model.insightKey) &&
+                      !poorMetrics.has(model.insightKey);
+                })
+                .map(model => new PerformanceInsightFormatter(focus, model).getSuggestions().at(-1))
+                .filter((suggestion): suggestion is ConversationSuggestions[number] => !!suggestion)
+                .slice(0, additionalSuggestionsRequired);
+        suggestions.push(...failingInsightSuggestions);
+      }
+    }
+
+    return suggestions;
+  }
+
+  /**
+   * Returns a markdown-formatted payload containing the trace data facts
+   * (summary, critical requests, activities, third-party code, and longest tasks)
+   * to be included directly in the LLM's prompt.
+   *
+   * Invariant: The content returned here must align with the user-facing details
+   * returned by `getUserFacingDetails()` to ensure complete data transparency.
+   */
+  override async getPromptDetails(): Promise<string|null> {
+    const formatter = this.createFormatter();
+
+    const details: string[] = [];
+
+    const traceSummary = formatter.formatTraceSummary();
+    if (traceSummary) {
+      details.push(`Trace summary:\n${traceSummary}`);
+    }
+
+    const criticalRequests = await formatter.formatCriticalRequests();
+    if (criticalRequests) {
+      details.push(criticalRequests);
+    }
+
+    const mainThreadBottomUp = await formatter.formatMainThreadBottomUpSummary();
+    if (mainThreadBottomUp) {
+      details.push(mainThreadBottomUp);
+    }
+
+    const thirdPartySummary = await formatter.formatThirdPartySummary();
+    if (thirdPartySummary) {
+      details.push(thirdPartySummary);
+    }
+
+    const longestTasks = await formatter.formatLongestTasks();
+    if (longestTasks) {
+      details.push(longestTasks);
+    }
+
+    return details.length > 0 ? details.join('\n\n') : null;
+  }
+
+  /**
+   * Returns structured trace context details to be displayed to the user in the UI
+   * (under the "Analyzing data" disclosure accordion).
+   *
+   * Invariant: The details shown here must correspond exactly to the data sent to
+   * the LLM prompt via `getPromptDetails()`.
+   */
+  override async getUserFacingDetails(): Promise<[ContextDetail, ...ContextDetail[]]|null> {
+    const formatter = this.createFormatter();
+
+    const details: ContextDetail[] = [];
+
+    const traceSummary = formatter.formatTraceSummary();
+    if (traceSummary) {
+      details.push({
+        title: 'Trace summary',
+        text: traceSummary,
+      });
+    }
+
+    const criticalRequests = await formatter.formatCriticalRequests();
+    if (criticalRequests) {
+      details.push({
+        title: 'Critical requests',
+        text: criticalRequests,
+      });
+    }
+
+    const mainThreadBottomUp = await formatter.formatMainThreadBottomUpSummary();
+    if (mainThreadBottomUp) {
+      details.push({
+        title: 'Main thread activities',
+        text: mainThreadBottomUp,
+      });
+    }
+
+    const thirdPartySummary = await formatter.formatThirdPartySummary();
+    if (thirdPartySummary) {
+      details.push({
+        title: 'Third party summary',
+        text: thirdPartySummary,
+      });
+    }
+
+    const longestTasks = await formatter.formatLongestTasks();
+    if (longestTasks) {
+      details.push({
+        title: 'Longest tasks',
+        text: longestTasks,
+      });
+    }
+
+    return details.length > 0 ? (details as [ContextDetail, ...ContextDetail[]]) : null;
+  }
+}

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

@@ -3,7 +3,7 @@ Content:
 ## Insight Title: LCP breakdown
 
 ## Insight Summary:
-This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 phases (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.
+This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 subparts (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 240 ms.
@@ -45,7 +45,7 @@ Response headers
 - server: Apache
 - access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
 
-We can break this time down into the 4 phases that combine to make the LCP time:
+We can break this time down into the 4 subparts that combine to make the LCP time:
 
 - Time to first byte: 2 ms (0.7% of total LCP time)
 - Resource load delay: 53 ms (22.1% of total LCP time)
@@ -65,7 +65,7 @@ Content:
 ## Insight Title: LCP breakdown
 
 ## Insight Summary:
-This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 phases (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.
+This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 subparts (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 129 ms.
@@ -91,7 +91,7 @@ From a service worker: No
 Initiators (root request to the request that directly loaded this one): none
 
 
-We can break this time down into the 4 phases that combine to make the LCP time:
+We can break this time down into the 4 subparts that combine to make the LCP time:
 
 - Time to first byte: 8 ms (6.1% of total LCP time)
 - Resource load delay: 33 ms (25.7% of total LCP time)
@@ -106,18 +106,18 @@ We can break this time down into the 4 phases that combine to make the LCP time:
 - https://web.dev/articles/optimize-lcp
 === end content
 
-Title: PerformanceInsightFormatter LCP breakdown formats correctly when the LCP is text based and has no load delay or time phases
+Title: PerformanceInsightFormatter LCP breakdown formats correctly when the LCP is text based and has no load delay or time subparts
 Content:
 ## Insight Title: LCP breakdown
 
 ## Insight Summary:
-This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 phases (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.
+This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 subparts (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 106 ms.
 The LCP element is text and was not fetched from the network.
 
-We can break this time down into the 2 phases that combine to make the LCP time:
+We can break this time down into the 2 subparts that combine to make the LCP time:
 
 - Time to first byte: 6 ms (5.7% of total LCP time)
 - Element render delay: 100 ms (94.3% of total LCP time)
@@ -561,15 +561,15 @@ Interaction to Next Paint (INP) is a metric that tracks the responsiveness of th
 - Needs improvement: more than 200 milliseconds and 500 milliseconds or less.
 - Bad: over 500 milliseconds.
 
-For a given slow interaction, we can break it down into 3 phases:
+For a given slow interaction, we can break it down into 3 subparts:
 1. Input delay: starts when the user initiates an interaction with the page, and ends when the event callbacks for the interaction begin to run.
 2. Processing duration: the time it takes for the event callbacks to run to completion.
 3. Presentation delay: the time it takes for the browser to present the next frame which contains the visual result of the interaction.
 
-The sum of these three phases is the total latency. It is important to optimize each of these phases to ensure interactions take as little time as possible. Focusing on the phase that has the largest score is a good way to start optimizing.
+The sum of these three subparts is the total latency. It is important to optimize each of these subparts to ensure interactions take as little time as possible. Focusing on the subpart that has the largest score is a good way to start optimizing.
 
 ## Detailed analysis:
-The longest interaction on the page was a `click` which had a total duration of `980 ms`. The timings of each of the three phases were:
+The longest interaction on the page was a `click` which had a total duration of `980 ms`. The timings of each of the three subparts were:
 
 1. Input delay: 1 ms
 2. Processing duration: 977 ms

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

@@ -177,7 +177,7 @@ export class PerformanceInsightFormatter {
         ];
       case 'LCPBreakdown':
         return [
-          {title: 'Help me optimize my LCP score'}, {title: 'Which LCP phase was most problematic?'},
+          {title: 'Help me optimize my LCP score'}, {title: 'Which LCP subpart was most problematic?'},
           {title: 'What can I do to reduce the LCP time for this page load?'}
         ];
       case 'NetworkDependencyTree':
@@ -575,7 +575,7 @@ The following images could be optimized:\n\n${imageDetails}`;
 
     const inpInfoForEvent =
         `The longest interaction on the page was a \`${event.type}\` which had a total duration of \`${
-            this.#formatMicro(event.dur)}\`. The timings of each of the three phases were:
+            this.#formatMicro(event.dur)}\`. The timings of each of the three subparts were:
 
 1. Input delay: ${this.#formatMicro(event.inputDelay)}
 2. Processing duration: ${this.#formatMicro(event.mainThreadHandling)}
@@ -600,20 +600,21 @@ The following images could be optimized:\n\n${imageDetails}`;
     // Note that we expect every trace + LCP to have TTFB + Render delay, but
     // very old traces are missing the data, so we have to code defensively
     // in case the subparts are not present.
-    const phaseBulletPoints: Array<{name: string, value: string, percentage: string}> = [];
+    const subpartBulletPoints: Array<{name: string, value: string, percentage: string}> = [];
 
     Object.values(subparts).forEach((subpart: Trace.Insights.Models.LCPBreakdown.Subpart) => {
-      const phaseMilli = Trace.Helpers.Timing.microToMilli(subpart.range);
-      const percentage = (phaseMilli / lcpMs * 100).toFixed(1);
-      phaseBulletPoints.push({name: subpart.label, value: this.#formatMilli(phaseMilli), percentage});
+      const subpartMilli = Trace.Helpers.Timing.microToMilli(subpart.range);
+      const percentage = (subpartMilli / lcpMs * 100).toFixed(1);
+      subpartBulletPoints.push({name: subpart.label, value: this.#formatMilli(subpartMilli), percentage});
     });
 
     return `${this.#lcpMetricSharedContext()}
 
-We can break this time down into the ${phaseBulletPoints.length} phases that combine to make the LCP time:
+We can break this time down into the ${subpartBulletPoints.length} subparts that combine to make the LCP time:
 
 ${
-        phaseBulletPoints.map(phase => `- ${phase.name}: ${phase.value} (${phase.percentage}% of total LCP time)`)
+        subpartBulletPoints
+            .map(subpart => `- ${subpart.name}: ${subpart.value} (${subpart.percentage}% of total LCP time)`)
             .join('\n')}`;
   }
 
@@ -1139,12 +1140,12 @@ ${this.#links()}`;
 - Needs improvement: more than 200 milliseconds and 500 milliseconds or less.
 - Bad: over 500 milliseconds.
 
-For a given slow interaction, we can break it down into 3 phases:
+For a given slow interaction, we can break it down into 3 subparts:
 1. Input delay: starts when the user initiates an interaction with the page, and ends when the event callbacks for the interaction begin to run.
 2. Processing duration: the time it takes for the event callbacks to run to completion.
 3. Presentation delay: the time it takes for the browser to present the next frame which contains the visual result of the interaction.
 
-The sum of these three phases is the total latency. It is important to optimize each of these phases to ensure interactions take as little time as possible. Focusing on the phase that has the largest score is a good way to start optimizing.`;
+The sum of these three subparts is the total latency. It is important to optimize each of these subparts to ensure interactions take as little time as possible. Focusing on the subpart that has the largest score is a good way to start optimizing.`;
       case 'LCPDiscovery':
         return `This insight analyzes the time taken to discover the LCP resource and request it on the network. It only applies if the LCP element was a resource like an image that has to be fetched over the network. There are 3 checks this insight makes:
 1. Did the resource have \`fetchpriority=high\` applied?
@@ -1153,7 +1154,7 @@ The sum of these three phases is the total latency. It is important to optimize
 
 It is important that all of these checks pass to minimize the delay between the initial page load and the LCP resource being loaded.`;
       case 'LCPBreakdown':
-        return 'This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 phases (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.';
+        return 'This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 subparts (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.';
       case 'NetworkDependencyTree':
         return `This insight analyzes the network dependency tree to identify:
 - The maximum critical path latency (the longest chain of network requests that the browser must download before it can render the page).

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

@@ -486,7 +486,7 @@ Available insights:
     description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
     relevant trace bounds: {min: 1020034834921µs, max: 1020034953358µs}
     example question: Help me optimize my LCP score
-    example question: Which LCP phase was most problematic?
+    example question: Which LCP subpart was most problematic?
     example question: What can I do to reduce the LCP time for this page load?
   - insight name: DocumentLatency
     description: Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-latency) by avoiding redirects, ensuring a fast server response, and enabling text compression.
@@ -534,7 +534,7 @@ Available insights:
     description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
     relevant trace bounds: {min: 157423488682µs, max: 157423953162µs}
     example question: Help me optimize my LCP score
-    example question: Which LCP phase was most problematic?
+    example question: Which LCP subpart was most problematic?
     example question: What can I do to reduce the LCP time for this page load?
   - insight name: CLSCulprits
     description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://developer.chrome.com/docs/performance/insights/cls-culprit), such as elements being added, removed, or their fonts changing as the page loads.
@@ -603,7 +603,7 @@ Available insights:
     description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
     relevant trace bounds: {min: 171607579779µs, max: 171608897210µs}
     example question: Help me optimize my LCP score
-    example question: Which LCP phase was most problematic?
+    example question: Which LCP subpart was most problematic?
     example question: What can I do to reduce the LCP time for this page load?
   - insight name: RenderBlocking
     description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.
@@ -631,7 +631,7 @@ Available insights:
     description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
     relevant trace bounds: {min: 171613750571µs, max: 171615060776µs}
     example question: Help me optimize my LCP score
-    example question: Which LCP phase was most problematic?
+    example question: Which LCP subpart was most problematic?
     example question: What can I do to reduce the LCP time for this page load?
   - insight name: RenderBlocking
     description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.
@@ -686,7 +686,7 @@ Available insights:
     description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
     relevant trace bounds: {min: 59728649746µs, max: 59729312744µs}
     example question: Help me optimize my LCP score
-    example question: Which LCP phase was most problematic?
+    example question: Which LCP subpart was most problematic?
     example question: What can I do to reduce the LCP time for this page load?
   - insight name: LCPDiscovery
     description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading
@@ -770,7 +770,7 @@ Available insights:
     description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
     relevant trace bounds: {min: 59728649746µs, max: 59729312744µs}
     example question: Help me optimize my LCP score
-    example question: Which LCP phase was most problematic?
+    example question: Which LCP subpart was most problematic?
     example question: What can I do to reduce the LCP time for this page load?
   - insight name: LCPDiscovery
     description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading

package/front_end/models/ai_assistance/skills/accessibility.md

@@ -3,11 +3,13 @@ name: accessibility
 description: Accessibility audits and report querying.
 allowed-tools:
   - getLighthouseAudits
-  - resolveLighthousePath
+  - resolveDevtoolsNodePath
   - getStyles
+  - getElementAccessibilityDetails
 ---
 You are an expert accessibility debugging assistant.
 Use getLighthouseAudits to query details from the active report.
 
-* ALWAYS use resolveLighthousePath to resolve failing element paths to backend node IDs.
+* ALWAYS use resolveDevtoolsNodePath to resolve failing element paths to backend node IDs.
 * Once resolved, use getStyles on the backend node ID to inspect layout and styling properties.
+* Use getElementAccessibilityDetails to query detailed accessibility properties (ARIA properties, role, name, focus state) for a resolved element backend node ID.

package/front_end/models/ai_assistance/tools/GetElementAccessibilityDetails.ts

@@ -0,0 +1,142 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
+import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
+
+import {
+  type BaseToolCapability,
+  type OriginLockCapability,
+  type TargetCapability,
+  type Tool,
+  type ToolArgs,
+  ToolName,
+} from './Tool.js';
+
+/**
+ * Arguments for getting accessibility details of an element.
+ */
+export interface GetElementAccessibilityDetailsArgs extends ToolArgs {
+  /**
+   * The backend node ID of the element to inspect.
+   */
+  element: number;
+  explanation: string;
+}
+
+/**
+ * A tool that retrieves fine-grained accessibility properties (role, name, ARIA properties, focus state)
+ * for a resolved element backend node ID. It also returns a DOM snapshot of the element's subtree.
+ */
+export class GetElementAccessibilityDetailsTool implements
+    Tool<GetElementAccessibilityDetailsArgs, string, BaseToolCapability&TargetCapability&OriginLockCapability> {
+  readonly name = ToolName.GET_ELEMENT_ACCESSIBILITY_DETAILS;
+  readonly description =
+      'Get detailed accessibility information for an element on the inspected page by its backend node ID.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof GetElementAccessibilityDetailsArgs> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: 'Arguments for getting element accessibility details.',
+    nullable: false,
+    properties: {
+      explanation: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'Reason for requesting accessibility details.',
+        nullable: false,
+      },
+      element: {
+        type: Host.AidaClient.ParametersTypes.INTEGER,
+        description: 'The backend node ID of the element.',
+        nullable: false,
+      },
+    },
+    required: ['explanation', 'element'],
+  };
+
+  displayInfoFromArgs(params: GetElementAccessibilityDetailsArgs): {
+    title: string,
+    thought: string,
+    action: string,
+  } {
+    return {
+      title: 'Reading accessibility details',
+      thought: params.explanation,
+      action: `getElementAccessibilityDetails(${params.element})`,
+    };
+  }
+
+  /**
+   * Handles the request to retrieve accessibility details.
+   *
+   * Resolves the element backend node ID, validates its origin against the locked origin,
+   * requests the AX subtree via AccessibilityModel, and maps the relevant attributes.
+   */
+  async handler(
+      params: GetElementAccessibilityDetailsArgs,
+      context: BaseToolCapability&TargetCapability&OriginLockCapability,
+      ): Promise<FunctionCallHandlerResult<string>> {
+    const establishedOrigin = context.getEstablishedOrigin();
+    if (!establishedOrigin) {
+      return {error: 'Error: Origin lock is not established.'};
+    }
+
+    const target = context.getTarget();
+    if (!target) {
+      return {error: 'Error: Inspected target not found.'};
+    }
+
+    // Resolve the backend node ID to an SDK DOMNode. We use DeferredDOMNode
+    // because the backend node ID is the stable identifier received from external
+    // sources (like Lighthouse audits), and we need to fetch the local node object to query it.
+    const deferredNode = new SDK.DOMModel.DeferredDOMNode(target, params.element as Protocol.DOM.BackendNodeId);
+    const resolved = await deferredNode.resolvePromise();
+    if (!resolved) {
+      return {error: 'Error: Could not resolve element by ID.'};
+    }
+
+    const nodeContext = new DOMNodeContext(resolved);
+    // Security check: Ensure the element matches the active conversation's origin lock.
+    if (!nodeContext.isOriginAllowed(establishedOrigin)) {
+      return {error: 'Error: Node does not belong to the locked origin.'};
+    }
+
+    const axModel = target.model(SDK.AccessibilityModel.AccessibilityModel);
+    if (!axModel) {
+      return {error: 'Error: Accessibility model not found.'};
+    }
+
+    // Accessibility data is not loaded by default for all nodes to optimize performance.
+    // We must explicitly request and load the accessibility subtree for the resolved node before querying.
+    await axModel.requestAndLoadSubTreeToNode(resolved);
+    const axNode = axModel.axNodeForDOMNode(resolved);
+    if (!axNode) {
+      return {error: 'Error: AX node details not found.'};
+    }
+
+    const properties = {
+      role: axNode.role()?.value,
+      name: axNode.name()?.value,
+      properties: axNode.properties()?.map(p => ({name: p.name, value: p.value?.value})) ?? [],
+    };
+
+    // Take a snapshot of the resolved node's DOM structure. This is required
+    // by the DOM_TREE UI widget to render the element's local tree in the AI response panel.
+    const snapshot = await resolved.takeSnapshot();
+    return {
+      result: JSON.stringify(properties, null, 2),
+      widgets: [{
+        name: 'DOM_TREE',
+        data: {
+          root: snapshot,
+          title: i18n.i18n.lockedString('Element details'),
+          accessibleRevealLabel: i18n.i18n.lockedString('Reveal element'),
+        },
+      }],
+    };
+  }
+}

package/front_end/models/ai_assistance/tools/GetStyles.ts

@@ -105,7 +105,7 @@ export class GetStylesTool implements
         return {error: 'Error: Could not find the element with uid=' + uid};
       }
       const newContext = new DOMNodeContext(resolved);
-      if (establishedOrigin !== newContext.getOrigin()) {
+      if (!newContext.isOriginAllowed(establishedOrigin)) {
         return {error: 'Error: Node does not belong to the current origin.'};
       }
       const styles = await resolved.domModel().cssModel().getComputedStyle(resolved.id);