chrome-devtools-frontend 1.0.1590494 → 1.0.1592129

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

@@ -171,7 +171,7 @@ addElementAnnotation and specify an annotation reason.
 - CRITICAL: Each time you describe a network request as being problematic you MUST call the function
 addNetworkRequestAnnotation and specify an annotation reason.
 - CRITICAL: If you spot ANY of the following problems:
-  - Render blocking elements/network requests.
+  - Render-blocking elements/network requests.
   - Significant long task (especially on main thread).
   - Layout shifts (e.g. due to unsized images).
   ... then you MUST call addNetworkRequestAnnotation for ALL network requests and addaddElementAnnotation for all

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -4,6 +4,7 @@
 
 import * as AgentProject from './AgentProject.js';
 import * as AiAgent from './agents/AiAgent.js';
+import * as BreakpointDebuggerAgent from './agents/BreakpointDebuggerAgent.js';
 import * as ContextSelectionAgent from './agents/ContextSelectionAgent.js';
 import * as FileAgent from './agents/FileAgent.js';
 import * as NetworkAgent from './agents/NetworkAgent.js';
@@ -39,6 +40,7 @@ export {
   AiHistoryStorage,
   AIQueries,
   AiUtils,
+  BreakpointDebuggerAgent,
   BuiltInAi,
   ChangeManager,
   ContextSelectionAgent,

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

@@ -25,7 +25,7 @@ Status code: 200
 MIME Type: image/webp
 Protocol: h2
 Priority: High
-Render blocking: No
+Render-blocking: No
 From a service worker: No
 Initiators (root request to the request that directly loaded this one): file:///Users/cjamcl/surge/misc/display-dpr/index.html
 Response headers
@@ -86,7 +86,7 @@ Status code: 200
 MIME Type: image/svg+xml
 Protocol: unknown
 Priority: VeryHigh
-Render blocking: No
+Render-blocking: No
 From a service worker: No
 Initiators (root request to the request that directly loaded this one): none
 
@@ -130,15 +130,15 @@ We can break this time down into the 2 phases that combine to make the LCP time:
 - https://web.dev/articles/optimize-lcp
 === end content
 
-Title: PerformanceInsightFormatter Render blocking requests tells the LLM if there are no render blocking requests
+Title: PerformanceInsightFormatter Render-blocking requests tells the LLM if there are no render-blocking requests
 Content:
-## Insight Title: Render blocking requests
+## Insight Title: Render-blocking requests
 
 ## Insight Summary:
-This insight identifies network requests that were render blocking. Render blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render blocking network request and prioritize your suggestions to the user based on the impact of each render blocking request.
+This insight identifies network requests that were render-blocking. Render-blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render-blocking network request and prioritize your suggestions to the user based on the impact of each render-blocking request.
 
 ## Detailed analysis:
-There are no network requests that are render blocking.
+There are no network requests that are render-blocking.
 
 ## Estimated savings: FCP 0 ms, LCP 0 ms
 
@@ -148,15 +148,15 @@ There are no network requests that are render blocking.
 - https://web.dev/articles/optimize-lcp
 === end content
 
-Title: PerformanceInsightFormatter Render blocking requests serializes the correct details
+Title: PerformanceInsightFormatter Render-blocking requests serializes the correct details
 Content:
-## Insight Title: Render blocking requests
+## Insight Title: Render-blocking requests
 
 ## Insight Summary:
-This insight identifies network requests that were render blocking. Render blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render blocking network request and prioritize your suggestions to the user based on the impact of each render blocking request.
+This insight identifies network requests that were render-blocking. Render-blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render-blocking network request and prioritize your suggestions to the user based on the impact of each render-blocking request.
 
 ## Detailed analysis:
-Here is a list of the network requests that were render blocking on this page and their duration:
+Here is a list of the network requests that were render-blocking on this page and their duration:
 
 
 Network requests data:
@@ -210,7 +210,7 @@ MIME Type: image/jpeg
 Protocol: http/1.1
 Initial priority: Low
 Final priority: High
-Render blocking: No
+Render-blocking: No
 From a service worker: No
 Initiators (root request to the request that directly loaded this one): http://localhost:8787/lcp-discovery-delay/index.html, http://localhost:8787/lcp-discovery-delay/app.js
 Response headers
@@ -276,7 +276,7 @@ Status code: 200
 MIME Type: text/html
 Protocol: http/1.1
 Priority: VeryHigh
-Render blocking: No
+Render-blocking: No
 From a service worker: No
 Initiators (root request to the request that directly loaded this one): none
 Response headers

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

@@ -182,8 +182,8 @@ export class PerformanceInsightFormatter {
         return [{title: 'How do I optimize my network dependency tree?'}];
       case 'RenderBlocking':
         return [
-          {title: 'Show me the most impactful render blocking requests that I should focus on'},
-          {title: 'How can I reduce the number of render blocking requests?'}
+          {title: 'Show me the most impactful render-blocking requests that I should focus on'},
+          {title: 'How can I reduce the number of render-blocking requests?'}
         ];
       case 'SlowCSSSelector':
         return [{title: 'How can I optimize my CSS to increase the performance of CSS selectors?'}];
@@ -769,18 +769,18 @@ ${requestSummary}`;
   }
 
   /**
-   * Create an AI prompt string out of the Render Blocking Insight model to use with Ask AI.
-   * @param insight The Render Blocking Model to query.
+   * Create an AI prompt string out of the Render-blocking Insight model to use with Ask AI.
+   * @param insight The Render-blocking Model to query.
    * @returns a string formatted for sending to Ask AI.
    */
   formatRenderBlockingInsight(insight: Trace.Insights.Models.RenderBlocking.RenderBlockingInsightModel): string {
     const requestSummary = this.#traceFormatter.formatNetworkRequests(insight.renderBlockingRequests);
 
     if (requestSummary.length === 0) {
-      return 'There are no network requests that are render blocking.';
+      return 'There are no network requests that are render-blocking.';
     }
 
-    return `Here is a list of the network requests that were render blocking on this page and their duration:
+    return `Here is a list of the network requests that were render-blocking on this page and their duration:
 
 ${requestSummary}`;
   }
@@ -1136,7 +1136,7 @@ It is important that all of these checks pass to minimize the delay between the
    3. The maximum of 4 preconnects should be respected.
 - Opportunities to add [preconnect] for a faster loading experience.`;
       case 'RenderBlocking':
-        return 'This insight identifies network requests that were render blocking. Render blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render blocking network request and prioritize your suggestions to the user based on the impact of each render blocking request.';
+        return 'This insight identifies network requests that were render-blocking. Render-blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render-blocking network request and prioritize your suggestions to the user based on the impact of each render-blocking request.';
       case 'SlowCSSSelector':
         return `This insight identifies CSS selectors that are slowing down your page's rendering performance.`;
       case 'ThirdParties':

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

@@ -615,8 +615,8 @@ Available insights:
   - insight name: RenderBlocking
     description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.
     relevant trace bounds: {min: 171608170438, max: 171608877165}
-    example question: Show me the most impactful render blocking requests that I should focus on
-    example question: How can I reduce the number of render blocking requests?
+    example question: Show me the most impactful render-blocking requests that I should focus on
+    example question: How can I reduce the number of render-blocking requests?
 
 ## insight set id: NAVIGATION_1
 
@@ -639,8 +639,8 @@ Available insights:
   - insight name: RenderBlocking
     description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.
     relevant trace bounds: {min: 171614330544, max: 171615043224}
-    example question: Show me the most impactful render blocking requests that I should focus on
-    example question: How can I reduce the number of render blocking requests?
+    example question: Show me the most impactful render-blocking requests that I should focus on
+    example question: How can I reduce the number of render-blocking requests?
 === end content
 
 Title: PerformanceTraceFormatter formatTraceSummary deals with CrUX manager errors
@@ -1064,7 +1064,7 @@ Status code: 200
 MIME Type: text/html
 Protocol: http/1.1
 Priority: VeryHigh
-Render blocking: No
+Render-blocking: No
 From a service worker: No
 Initiators (root request to the request that directly loaded this one): none
 Response headers
@@ -1094,7 +1094,7 @@ Status code: 200
 MIME Type: text/css
 Protocol: unknown
 Priority: VeryHigh
-Render blocking: Yes
+Render-blocking: Yes
 From a service worker: No
 Initiators (root request to the request that directly loaded this one): https://chromedevtools.github.io/performance-stories/lcp-large-image/index.html
 Response headers
@@ -1134,7 +1134,7 @@ Status code: 200
 MIME Type: text/css
 Protocol: unknown
 Priority: VeryHigh
-Render blocking: Yes
+Render-blocking: Yes
 From a service worker: No
 Initiators (root request to the request that directly loaded this one): https://chromedevtools.github.io/performance-stories/lcp-large-image/index.html
 Response headers

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

@@ -675,7 +675,7 @@ Status code: ${statusCode}
 MIME Type: ${mimeType}
 Protocol: ${protocol}
 ${priorityLines.join('\n')}
-Render blocking: ${renderBlocking ? 'Yes' : 'No'}
+Render-blocking: ${renderBlocking ? 'Yes' : 'No'}
 From a service worker: ${fromServiceWorker ? 'Yes' : 'No'}
 Initiators (root request to the request that directly loaded this one): ${initiatorUrls.join(', ') || 'none'}
 ${NetworkRequestFormatter.formatHeaders('Response headers', responseHeaders ?? [], true)}`;

package/front_end/models/greendev/Prototypes.ts

@@ -10,6 +10,7 @@ let instance: Prototypes|null = null;
 export interface GreenDevSettings {
   aiAnnotations: Common.Settings.Setting<boolean>;
   copyToGemini: Common.Settings.Setting<boolean>;
+  breakpointDebuggerAgent: Common.Settings.Setting<boolean>;
 }
 
 export class Prototypes {
@@ -42,7 +43,12 @@ export class Prototypes {
     );
     const copyToGemini =
         settings.createSetting('greendev-copy-to-gemini-enabled', false, Common.Settings.SettingStorageType.LOCAL);
+    const breakpointDebuggerAgent = settings.createSetting(
+        'greendev-breakpoint-debugger-agent-enabled',
+        false,
+        Common.Settings.SettingStorageType.LOCAL,
+    );
 
-    return {aiAnnotations, copyToGemini};
+    return {aiAnnotations, copyToGemini, breakpointDebuggerAgent};
   }
 }

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6716,7 +6716,7 @@ export const NativeFunctions = [
     signatures: [["?options"]]
   },
   {
-    name: "getValueRange",
+    name: "createValueRange",
     signatures: [["start","end"]]
   },
   {
@@ -7021,6 +7021,10 @@ export const NativeFunctions = [
     name: "Highlight",
     signatures: [["...initRanges"]]
   },
+  {
+    name: "CanvasPaintEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "getElementTransform",
     signatures: [["element","draw_transform"]]

package/front_end/models/trace/handlers/NetworkRequestsHandler.ts

@@ -512,9 +512,9 @@ export async function finalize(): Promise<void> {
     const requestingFrameUrl =
         Helpers.Trace.activeURLForFrameAtTime(frame, finalSendRequest.ts, rendererProcessesByFrame) || '';
 
-    // A resource that is preloaded (and not marked as render blocking) can
-    // become render blocked later via a PreloadRenderBlockingStatusChange. In
-    // this case, we take the render blocking value of the last
+    // A resource that is preloaded (and not marked as render-blocking) can
+    // become render-blocked later via a PreloadRenderBlockingStatusChange. In
+    // this case, we take the render-blocking value of the last
     // PreloadRenderBlockingStatusChange for this request.
     const preloadRenderBlockingStatusChange =
         request.preloadRenderBlockingStatusChange?.at(-1)?.args.data.renderBlocking;

package/front_end/models/trace/helpers/Network.ts

@@ -12,7 +12,7 @@ import type {RenderBlocking, SyntheticNetworkRequest} from '../types/TraceEvents
 //    browser.
 // 3. Therefore, from a developer's point of view, there is nothing more they
 //    can do if they've put `async` on, and within the context of Insights, we
-//    shouldn't report an async script as render blocking.
+//    shouldn't report an async script as render-blocking.
 // In the future we may want to consider suggesting the use of `defer` over
 // `async`, as it doesn't have this concern, but for now we'll allow `async`
 // and not report it as an issue.

package/front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -194,7 +194,7 @@ function isCritical(request: Types.Events.SyntheticNetworkRequest, context: Insi
     return false;
   }
 
-  // Iframes are considered High Priority but they are not render blocking
+  // Iframes are considered High Priority but they are not render-blocking
   const isIframe = request.args.data.resourceType === Protocol.Network.ResourceType.Document &&
       request.args.data.frame !== context.frameId;
 

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -24,7 +24,7 @@ export const UIStrings = {
   /**
    * @description Title of an insight that provides the user with the list of network requests that blocked and therefore slowed down the page rendering and becoming visible to the user.
    */
-  title: 'Render blocking requests',
+  title: 'Render-blocking requests',
   /**
    * @description Text to describe that there are requests blocking rendering, which may affect LCP.
    */
@@ -42,7 +42,7 @@ export const UIStrings = {
   /**
    * @description Text status indicating that no requests blocked the initial render of a navigation
    */
-  noRenderBlocking: 'No render blocking requests for this navigation',
+  noRenderBlocking: 'No render-blocking requests for this navigation',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/RenderBlocking.ts', UIStrings);
@@ -154,7 +154,7 @@ function computeSavings(
   if (requestIdToWastedMs.size) {
     metricSavings.FCP = estimateSavingsWithGraphs(deferredNodeIds, context.lantern);
 
-    // In most cases, render blocking resources only affect LCP if LCP isn't an image.
+    // In most cases, render-blocking resources only affect LCP if LCP isn't an image.
     if (!hasImageLCP(data, context)) {
       metricSavings.LCP = metricSavings.FCP;
     }
@@ -209,12 +209,12 @@ export function generateInsight(
       continue;
     }
 
-    // If a request is marked `in_body_parser_blocking` it should only be considered render blocking if it is a
+    // If a request is marked `in_body_parser_blocking` it should only be considered render-blocking if it is a
     // high enough priority. Some requests (e.g. scripts) are not marked as high priority if they are fetched
     // after a non-preloaded image. (See "early" definition in https://web.dev/articles/fetch-priority)
     //
     // There are edge cases and exceptions (e.g. priority hints) but this gives us the best approximation
-    // of render blocking resources in the document body.
+    // of render-blocking resources in the document body.
     if (req.args.data.renderBlocking === 'in_body_parser_blocking') {
       const priority = req.args.data.priority;
       const isScript = req.args.data.resourceType === Protocol.Network.ResourceType.Script;

package/front_end/models/trace/lantern/metrics/FirstContentfulPaint.ts

@@ -51,8 +51,8 @@ class FirstContentfulPaint extends Metric {
     const cpuNodes: Graph.CPUNode[] = [];
     graph.traverse(node => {
       if (node.type === Graph.BaseNode.types.CPU) {
-        // A task is *possibly* render blocking if it *started* before cutoffTimestamp.
-        // We use startTime here because the paint event can be *inside* the task that was render blocking.
+        // A task is *possibly* render-blocking if it *started* before cutoffTimestamp.
+        // We use startTime here because the paint event can be *inside* the task that was render-blocking.
         if (node.startTime <= cutoffTimestamp) {
           cpuNodes.push(node);
         }
@@ -69,7 +69,7 @@ class FirstContentfulPaint extends Metric {
 
     cpuNodes.sort((a, b) => a.startTime - b.startTime);
 
-    // A script is *possibly* render blocking if it finished loading before cutoffTimestamp.
+    // A script is *possibly* render-blocking if it finished loading before cutoffTimestamp.
     const possiblyRenderBlockingScriptUrls = Metric.getScriptUrls(graph, node => {
       // The optimistic LCP treatNodeAsRenderBlocking fn wants to exclude some images in the graph,
       // but here it only receives scripts to evaluate. It's a no-op in this case, but it will
@@ -77,7 +77,7 @@ class FirstContentfulPaint extends Metric {
       return node.endTime <= cutoffTimestamp && treatNodeAsRenderBlocking(node);
     });
 
-    // A script is *definitely not* render blocking if its EvaluateScript task started after cutoffTimestamp.
+    // A script is *definitely not* render-blocking if its EvaluateScript task started after cutoffTimestamp.
     const definitelyNotRenderBlockingScriptUrls = new Set<string>();
     const renderBlockingCpuNodeIds = new Set<string>();
     for (const url of possiblyRenderBlockingScriptUrls) {
@@ -156,7 +156,7 @@ class FirstContentfulPaint extends Metric {
           return false;
         }
 
-        // Lastly, build up the FCP graph of all nodes we consider render blocking
+        // Lastly, build up the FCP graph of all nodes we consider render-blocking
         return treatNodeAsRenderBlocking(node);
       }
       // If it's a CPU node, just check if it was blocking.
@@ -168,7 +168,7 @@ class FirstContentfulPaint extends Metric {
       dependencyGraph: Graph.Node<T>, processedNavigation: Types.Simulation.ProcessedNavigation): Graph.Node<T> {
     return this.getFirstPaintBasedGraph(dependencyGraph, {
       cutoffTimestamp: processedNavigation.timestamps.firstContentfulPaint,
-      // In the optimistic graph we exclude resources that appeared to be render blocking but were
+      // In the optimistic graph we exclude resources that appeared to be render-blocking but were
       // initiated by a script. While they typically have a very high importance and tend to have a
       // significant impact on the page's content, these resources don't technically block rendering.
       treatNodeAsRenderBlocking: node => node.hasRenderBlockingPriority() && node.initiatorType !== 'script',

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -278,6 +278,13 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
         {title: 'What performance issues exist with my page?', jslogContext: 'performance-default'},
       ];
     }
+    case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT: {
+      return [
+        {title: 'Why did the code pause here?'},
+        {title: 'What function does this breakpoint belong to?'},
+        {title: 'Why is this error thrown?'},
+      ];
+    }
 
     case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE: {
       return [
@@ -504,6 +511,14 @@ function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): AiAs
   return new AiAssistanceModel.FileAgent.FileContext(file);
 }
 
+function createBreakpointContext(uiLocation: Workspace.UISourceCode.UILocation|null):
+    AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext|null {
+  if (!uiLocation) {
+    return null;
+  }
+  return new AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext(uiLocation);
+}
+
 function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null):
     AiAssistanceModel.NetworkAgent.RequestContext|null {
   if (!request) {
@@ -564,6 +579,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedElement: AiAssistanceModel.StylingAgent.NodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
+  #selectedBreakpoint: AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext|null = null;
   // Messages displayed in the `ChatView` component.
   #messages: Message[] = [];
 
@@ -804,6 +820,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
     } else if (isNetworkPanelVisible && hostConfig.devToolsAiAssistanceNetworkAgent?.enabled) {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK;
+    } else if (
+        isSourcesPanelVisible &&
+        this.#conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT) {
+      targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT;
     } else if (isSourcesPanelVisible && hostConfig.devToolsAiAssistanceFileAgent?.enabled) {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.FILE;
     } else if (isPerformancePanelVisible && hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {
@@ -895,6 +915,27 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
+  async handleBreakpointConversation(uiLocation: Workspace.UISourceCode.UILocation): Promise<void> {
+    const context = new AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext(uiLocation);
+    this.#selectedBreakpoint = context;
+    const conversation = new AiAssistanceModel.AiConversation.AiConversation(
+        AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT,
+        [],
+        undefined,
+        false,
+        this.#aidaClient,
+        this.#changeManager,
+        false,
+        this.#handlePerformanceRecordAndReload.bind(this),
+        this.#handleInspectElement.bind(this),
+        NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
+    );
+    this.#updateConversationState(conversation);
+    this.#conversation?.setContext(context);
+    this.requestUpdate();
+    await UI.ViewManager.ViewManager.instance().showView(AiAssistancePanel.panelName);
+  }
+
   override wasShown(): void {
     super.wasShown();
     this.#viewOutput.chatView?.restoreScrollPosition();
@@ -907,6 +948,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#selectedPerformanceTrace =
         createPerformanceTraceContext(UI.Context.Context.instance().flavor(AiAssistanceModel.AIContext.AgentFocus));
     this.#selectedFile = createFileContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode));
+    this.#selectedBreakpoint =
+        createBreakpointContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UILocation));
     this.#updateConversationState(this.#conversation);
 
     this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
@@ -921,6 +964,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         AiAssistanceModel.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        Workspace.UISourceCode.UILocation, this.#handleBreakpointFlavorChange);
 
     UI.ViewManager.ViewManager.instance().addEventListener(
         UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, this.#selectDefaultAgentIfNeeded, this);
@@ -1050,6 +1095,17 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         this.#updateConversationState(this.#conversation);
       };
 
+  #handleBreakpointFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UILocation>): void => {
+        const newBreakpoint = ev.data;
+
+        if (!newBreakpoint || this.#selectedBreakpoint?.getItem() === newBreakpoint) {
+          return;
+        }
+        this.#selectedBreakpoint = new AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext(newBreakpoint);
+        this.#updateConversationState(this.#conversation);
+      };
+
   #getChangeSummary(): string|undefined {
     if (!isAiAssistancePatchingEnabled() || !this.#conversation || this.#conversation?.isReadOnly) {
       return;
@@ -1146,6 +1202,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
         return lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceWithNoRecording);
       }
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContext);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
         if (AiAssistanceModel.AiUtils.isGeminiBranding()) {
           return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContextBranded);
@@ -1186,6 +1244,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         }
         return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformance);
 
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
         if (noLogging) {
           return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContextEnterpriseNoLogging);
@@ -1441,6 +1500,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return this.#selectedRequest;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE:
         return this.#selectedPerformanceTrace;
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
+        return this.#selectedBreakpoint;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
       case undefined:
         return null;
@@ -1456,6 +1517,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#selectedRequest = data;
     } else if (data instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
       this.#selectedPerformanceTrace = data;
+    } else if (data instanceof AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext) {
+      this.#selectedBreakpoint = data;
     }
 
     void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);

package/front_end/panels/ai_assistance/README.md

@@ -69,3 +69,17 @@ The key to the walkthrough feature lies in the `parts` array of a `ModelChatMess
     -   `text`: The markdown-formatted text of the answer.
 
 A single `ModelChatMessage` will typically have **zero or more `StepPart`s** followed by **one `AnswerPart`**. This structure allows the UI to first show the final answer and provide the option to progressively disclose the "thinking" steps that led to it via the `WalkthroughView`.
+
+## Understanding Step Loading States
+
+There are two distinct `isLoading` properties related to the AI's response generation, serving different purposes:
+
+1.  **`step.isLoading`**: This property resides within a single `Step` object and indicates the immediate parsing status of that specific step from the AI's response stream. It becomes `true` when a new step begins (e.g., "Querying...") and is set to `false` almost immediately once the first piece of meaningful information for that step (like a "thought" or a "code" block) is received. Essentially, it's a short-lived internal parsing state.
+
+2.  **Conversation `isLoading`** (passed down to the `ChatMessage` component): This top-level property reflects the overall state of the entire conversation's response generation process. It is set to `true` as soon as the user submits a query and remains `true` until the AI has completed its entire thought process, including all steps, and has provided the final answer.
+
+The spinner displayed next to a step in the UI is intentionally tied to the **conversation `isLoading`** property, not the individual `step.isLoading`. This design choice provides a better user experience by:
+
+*   **Providing Continuous Feedback**: Using the conversation's `isLoading` ensures a persistent visual indicator that the AI is actively working on the query, even if individual steps are quickly parsed. This prevents the UI from appearing unresponsive.
+*   **Avoiding a "Stuck" Feeling**: If the spinner were tied to `step.isLoading`, it would flicker on and off rapidly, potentially making the user feel that the AI has stopped processing or is stuck.
+*   **Clear Progress Visualization**: The spinner is dynamically moved to the *last* active step in the list as long as the overall conversation is loading. Once a step is completed, it receives a checkmark, and the spinner moves to the next active step.

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -321,10 +321,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                           ></devtools-button>`
                         : Lit.nothing}
                       <div
-                        class=${Lit.Directives.classMap({
-                          'resource-link': true,
-                          'has-picker-behavior': input.conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
-                        })}
+                        class="resource-link"
                       >
                         ${
                           input.selectedContext instanceof AiAssistanceModel.StylingAgent.NodeContext ?