chrome-devtools-frontend 1.0.1592129 → 1.0.1592362

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

@@ -0,0 +1,87 @@
+// 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.
+
+/**
+ * This file contains the overlay script that is injected into the page when the
+ * BreakpointDebuggerAgent is waiting for a user action.
+ *
+ * This is a temporary solution for the prototype. In the long term, we should
+ * use a proper overlay or a different mechanism to communicate with the user,
+ * rather than injecting a script into the page. This approach is fine for the
+ * prototype but should be replaced before production.
+ */
+
+import * as SDK from '../../../core/sdk/sdk.js';
+
+export async function injectOverlay(): Promise<void> {
+  const targetManager = SDK.TargetManager.TargetManager.instance();
+  const primaryTarget = targetManager.primaryPageTarget();
+
+  await primaryTarget?.runtimeAgent().invoke_evaluate({
+    expression: WAIT_FOR_USER_ACTION_OVERLAY_SCRIPT,
+  });
+}
+
+export async function removeOverlay(): Promise<void> {
+  const targetManager = SDK.TargetManager.TargetManager.instance();
+  const primaryTarget = targetManager.primaryPageTarget();
+
+  await primaryTarget?.runtimeAgent().invoke_evaluate({
+    expression: REMOVE_OVERLAY_SCRIPT,
+  });
+}
+
+const WAIT_FOR_USER_ACTION_OVERLAY_SCRIPT = `
+(function() {
+  const devtoolsOverlayId = 'devtools-waiting-overlay';
+  let overlay = document.getElementById(devtoolsOverlayId);
+  if (!overlay) {
+    overlay = document.createElement('div');
+    overlay.id = devtoolsOverlayId;
+    overlay.style.position = 'fixed';
+    overlay.style.top = '0';
+    overlay.style.left = '0';
+    overlay.style.width = '100vw';
+    overlay.style.height = '100vh';
+    overlay.style.pointerEvents = 'none';
+    overlay.style.zIndex = '2147483647';
+    overlay.style.boxSizing = 'border-box';
+    overlay.style.border = '10px solid red';
+    overlay.style.animation = 'devtools-fade 1.5s infinite alternate';
+    const text = document.createElement('div');
+    text.innerText = 'Trigger the breakpoint again';
+    text.style.position = 'absolute';
+    text.style.top = '10px';
+    text.style.left = '50%';
+    text.style.transform = 'translateX(-50%)';
+    text.style.backgroundColor = 'red';
+    text.style.color = 'white';
+    text.style.padding = '10px 20px';
+    text.style.borderRadius = '5px';
+    text.style.fontFamily = 'system-ui, sans-serif';
+    text.style.fontSize = '16px';
+    text.style.fontWeight = 'bold';
+    text.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
+    overlay.appendChild(text);
+
+    const style = document.createElement('style');
+    style.id = devtoolsOverlayId + '-style';
+    style.innerText = '@keyframes devtools-fade { from { opacity: 0.5; } to { opacity: 1; } }';
+    // Head might not exist immediately on a completely blank page, fallback to documentElement
+    (document.head || document.documentElement).appendChild(style);
+
+    document.documentElement.appendChild(overlay);
+  }
+})();
+`;
+
+const REMOVE_OVERLAY_SCRIPT = `
+(function() {
+  const devtoolsOverlayId = 'devtools-waiting-overlay';
+  const overlay = document.getElementById(devtoolsOverlayId);
+  if (overlay) overlay.remove();
+  const style = document.getElementById(devtoolsOverlayId + '-style');
+  if (style) style.remove();
+})();
+`;

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.snapshot.txt

@@ -48,12 +48,12 @@ Content:
         "description": "",
         "nullable": true,
         "required": [
-          "url"
+          "id"
         ],
         "properties": {
-          "url": {
+          "id": {
             "type": 1,
-            "description": "The url of the requests",
+            "description": "The id of the network request",
             "nullable": false
           }
         }
@@ -72,18 +72,18 @@ Content:
     },
     {
       "name": "selectSourceFile",
-      "description": "Selects a source file. Use this when asked about files on the page. Use listSourceFiles if you don't know the full path name.",
+      "description": "Selects a source file. Use this when asked about files on the page. Use listSourceFiles to find the file ID.",
       "parameters": {
         "type": 6,
         "description": "",
         "nullable": true,
         "required": [
-          "name"
+          "id"
         ],
         "properties": {
-          "name": {
-            "type": 1,
-            "description": "The full path name of the file you want to select.",
+          "id": {
+            "type": 3,
+            "description": "The id (URL) of the file you want to select.",
             "nullable": false
           }
         }

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

@@ -5,7 +5,6 @@
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Logs from '../../logs/logs.js';
@@ -35,13 +34,12 @@ You are a Web Development Assistant integrated into Chrome DevTools. Your tone i
 You aim to help developers of all levels, prioritizing teaching web concepts as the primary entry point for any solution.
 
 # Considerations
-* Determine what the question the domain of the question is - styling, network, sources, performance or other part of DevTools.
+* Determine what is the domain of the question - styling, network, sources, performance or other part of DevTools.
 * Proactively try to gather additional data. If a select specific data can be selected, select one.
 * Always try select single specific context before answering the question.
 * Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
 * When presenting solutions, clearly distinguish between the primary cause and contributing factors.
 * Please answer only if you are sure about the answer. Otherwise, explain why you're not able to answer.
-* When answering, always consider MULTIPLE possible solutions.
 * If you are unable to gather more information provide a comprehensive guide to how to fix the issue using Chrome DevTools and explain how and why.
 * You can suggest any panel or flow in Chrome DevTools that may help the user out
 
@@ -50,9 +48,13 @@ You aim to help developers of all levels, prioritizing teaching web concepts as
 * Always specify the language for code blocks (e.g., \`\`\`css, \`\`\`javascript).
 * Keep text responses concise and scannable.
 
+* **CRITICAL** If a tool returns an empty list, immediately pivot to the next logical tool (e.g., from sources to network).
+* **CRITICAL** Always exhaust all possible way to find and select context from different domains.
 * **CRITICAL** NEVER write full Python programs - you should only write individual statements that invoke a single function from the provided library.
 * **CRITICAL** NEVER output text before a function call. Always do a function call first.
 * **CRITICAL** You are a debugging assistant in DevTools. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.
+* **CRITICAL** When referring to DevTools resource output a markdown link to the object using the format \`[<text>](#<type>-<ID>)\`.
+* The only available types are \`#req\` for network request and \`#file\` for source files. Only use ID inside the link, never ask about user selecting by ID.
 `;
 
 /**
@@ -117,6 +119,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
           }
 
           requests.push({
+            id: request.requestId(),
             url: request.url(),
             statusCode: request.statusCode,
             duration: i18n.TimeUtilities.secondsToString(request.duration),
@@ -135,18 +138,18 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
     });
 
-    this.declareFunction<{url: string}>('selectNetworkRequest', {
+    this.declareFunction<{id: string}>('selectNetworkRequest', {
       description:
           `Selects a specific network request to further provide information about. Use this when asked about network requests issues.`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
         nullable: true,
-        required: ['url'],
+        required: ['id'],
         properties: {
-          url: {
+          id: {
             type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The url of the requests',
+            description: 'The id of the network request',
             nullable: false,
           },
         },
@@ -154,15 +157,12 @@ export class ContextSelectionAgent extends AiAgent<never> {
       displayInfoFromArgs: args => {
         return {
           title: lockedString('Getting network request…'),
-          action: `selectNetworkRequest(${args.url})`,
+          action: `selectNetworkRequest(${args.id})`,
         };
       },
-      handler: async ({url}) => {
-        // TODO: Switch to using IDs to make is easier to link to as well.
+      handler: async ({id}) => {
         const request = Logs.NetworkLog.NetworkLog.instance().requests().find(req => {
-          return req.url() === Platform.DevToolsPath.urlString`${url}` ||
-              req.url() === Platform.DevToolsPath.urlString`${url.slice(0, -1)}` ||
-              req.url() === Platform.DevToolsPath.urlString`${url}/`;
+          return req.requestId() === id;
         });
 
         if (request) {
@@ -195,32 +195,32 @@ export class ContextSelectionAgent extends AiAgent<never> {
         };
       },
       handler: async () => {
-        // We get multiple of the same file name
-        // so we create a set and the pick based
-        // on heuristics in the select function
-        const files = new Set();
-        for (const file of this.#getUISourceCodes()) {
-          files.add(file.fullDisplayName());
+        const files: Array<{file: string, id: number | undefined}> = [];
+        for (const file of ContextSelectionAgent.getUISourceCodes()) {
+          files.push({
+            file: file.fullDisplayName(),
+            id: ContextSelectionAgent.uiSourceCodeId.get(file),
+          });
         }
 
         return {
-          result: [...files],
+          result: files,
         };
       },
     });
 
-    this.declareFunction<{name: string}>('selectSourceFile', {
+    this.declareFunction<{id: number}>('selectSourceFile', {
       description:
-          `Selects a source file. Use this when asked about files on the page. Use listSourceFiles if you don't know the full path name.`,
+          `Selects a source file. Use this when asked about files on the page. Use listSourceFiles to find the file ID.`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
         nullable: true,
-        required: ['name'],
+        required: ['id'],
         properties: {
-          name: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The full path name of the file you want to select.',
+          id: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The id (URL) of the file you want to select.',
             nullable: false,
           },
         },
@@ -228,22 +228,19 @@ export class ContextSelectionAgent extends AiAgent<never> {
       displayInfoFromArgs: args => {
         return {
           title: lockedString('Getting source file…'),
-          action: `selectSourceFile(${args.name})`,
+          action: `selectSourceFile(${args.id})`,
         };
       },
       handler: async params => {
-        // In some cases we get multiple files
-        // use the heuristics bellow to pick the better one
-        const files = this.#getUISourceCodes().filter(file => file.fullDisplayName() === params.name);
+        const file = ContextSelectionAgent.getUISourceCodes().find(
+            file => ContextSelectionAgent.uiSourceCodeId.get(file) === params.id);
 
-        if (files.length === 0) {
+        if (!file) {
           return {
             error: 'Unable to find file.',
           };
         }
 
-        // This help us pick the file that is resolved source map.
-        const file = files.find(f => f.contentType().isFromSourceMap()) ?? files[0];
         return {
           context: new FileContext(file),
           description: 'User selected a source file',
@@ -315,27 +312,51 @@ export class ContextSelectionAgent extends AiAgent<never> {
     });
   }
 
-  #getUISourceCodes = (): Workspace.UISourceCode.UISourceCode[] => {
+  async * handleContextDetails(): AsyncGenerator<ContextResponse, void, void> {
+  }
+
+  override async enhanceQuery(query: string): Promise<string> {
+    return query;
+  }
+
+  static lastSourceId = 0;
+  static uiSourceCodeId = new WeakMap<Workspace.UISourceCode.UISourceCode, number>();
+  /**
+   * This is a heuristic algorithm that gets all the source files coming from the
+   * network and assigns unique ids to be linked from the LLM Markdown response.
+   * Steps we do:
+   * 1. Get all project that are coming from the Network. This scopes down
+   * sources exposed to the LLM
+   * 2. Remove all ignore listed source code. We further reduce thing that the
+   * user most likely does not have interest in, from global setting.
+   * 3.1. Source files don't have an uniqueId so we use the URL to differentiate
+   * them.
+   * 3.2. In cases where we encounter a duplicated URLs we prefer the latest one
+   * coming from SourceMaps (usually only one) as that has simple code and
+   * usually is what the user authored.
+   */
+  static getUISourceCodes(): Workspace.UISourceCode.UISourceCode[] {
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const projects =
         workspace.projects().filter(project => project.type() === Workspace.Workspace.projectTypes.Network);
-    const uiSourceCodes = [];
+    const uiSourceCodes = new Map<string, Workspace.UISourceCode.UISourceCode>();
+
     for (const project of projects) {
       for (const uiSourceCode of project.uiSourceCodes()) {
         if (uiSourceCode.isIgnoreListed()) {
           continue;
         }
-        uiSourceCodes.push(uiSourceCode);
+        const url = uiSourceCode.url();
+        // This helps us pick the file that is a resolved source map.
+        if (!uiSourceCodes.get(url) || uiSourceCode.contentType().isFromSourceMap()) {
+          uiSourceCodes.set(url, uiSourceCode);
+          if (!ContextSelectionAgent.uiSourceCodeId.has(uiSourceCode)) {
+            ContextSelectionAgent.uiSourceCodeId.set(uiSourceCode, ++ContextSelectionAgent.lastSourceId);
+          }
+        }
       }
     }
 
-    return uiSourceCodes;
-  };
-
-  async * handleContextDetails(): AsyncGenerator<ContextResponse, void, void> {
-  }
-
-  override async enhanceQuery(query: string): Promise<string> {
-    return query;
+    return [...uiSourceCodes.values()];
   }
 }

package/front_end/models/computed_style/ComputedStyleModel.ts

@@ -12,17 +12,18 @@ import * as SDK from '../../core/sdk/sdk.js';
  * Model trackComputedStyleUpdatesForNode method.
  */
 export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  #node: SDK.DOMModel.DOMNode|null;
-  #cssModel: SDK.CSSModel.CSSModel|null;
-  private eventListeners: Common.EventTarget.EventDescriptor[];
+  #node: SDK.DOMModel.DOMNode|null = null;
+  #cssModel: SDK.CSSModel.CSSModel|null = null;
+  private eventListeners: Common.EventTarget.EventDescriptor[] = [];
   private frameResizedTimer?: number;
   private computedStylePromise?: Promise<ComputedStyle|null>;
 
   constructor(node?: SDK.DOMModel.DOMNode|null) {
     super();
-    this.#cssModel = null;
-    this.eventListeners = [];
-    this.#node = node ?? null;
+    if (node) {
+      // Call the explicit setter to trigger the setup and event binding.
+      this.node = node;
+    }
   }
 
   get node(): SDK.DOMModel.DOMNode|null {
@@ -39,6 +40,21 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     return this.#cssModel?.isEnabled() ? this.#cssModel : null;
   }
 
+  /**
+   * Clears all event listeners to ensure the instance can be GC'd without leaking memory.
+   */
+  dispose(): void {
+    Common.EventTarget.removeEventListeners(this.eventListeners);
+    this.eventListeners = [];
+    this.node = null;
+    this.#cssModel = null;
+    this.computedStylePromise = undefined;
+    if (this.frameResizedTimer) {
+      clearTimeout(this.frameResizedTimer);
+      this.frameResizedTimer = undefined;
+    }
+  }
+
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
     if (this.#cssModel === cssModel) {
       return;
@@ -168,6 +184,24 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
     return matchedStyles.node() === this.node ? matchedStyles : null;
   }
+
+  computePropertyTraces(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
+      Map<string, SDK.CSSProperty.CSSProperty[]> {
+    const result = new Map<string, SDK.CSSProperty.CSSProperty[]>();
+    for (const style of matchedStyles.nodeStyles()) {
+      const allProperties = style.allProperties();
+      for (const property of allProperties) {
+        if (!property.activeInStyle() || !matchedStyles.propertyState(property)) {
+          continue;
+        }
+
+        const matches = result.get(property.name) ?? [];
+        matches.push(property);
+        result.set(property.name, matches);
+      }
+    }
+    return result;
+  }
 }
 
 export const enum Events {

package/front_end/models/emulation/DeviceModeModel.ts

@@ -113,6 +113,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #emulationModel: SDK.EmulationModel.EmulationModel|null;
   #onModelAvailable: (() => void)|null;
   #outlineRect?: Rect;
+  #screenOrientationLocked: boolean;
 
   private constructor() {
     super();
@@ -172,6 +173,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.#emulationModel = null;
     this.#onModelAvailable = null;
+    this.#screenOrientationLocked = false;
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.EmulationModel.EmulationModel, this);
   }
 
@@ -442,6 +444,9 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         this.#onModelAvailable = null;
         callback();
       }
+      emulationModel.addEventListener(
+          SDK.EmulationModel.EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED, this.onScreenOrientationLockChanged,
+          this);
       const resourceTreeModel = emulationModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
       if (resourceTreeModel) {
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameChange, this);
@@ -454,7 +459,12 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   modelRemoved(emulationModel: SDK.EmulationModel.EmulationModel): void {
     if (this.#emulationModel === emulationModel) {
+      emulationModel.removeEventListener(
+          SDK.EmulationModel.EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED, this.onScreenOrientationLockChanged,
+          this);
       this.#emulationModel = null;
+      this.#screenOrientationLocked = false;
+      this.dispatchEventToListeners(Events.UPDATED);
     }
   }
 
@@ -471,6 +481,43 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.showHingeIfApplicable(overlayModel);
   }
 
+  private onScreenOrientationLockChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.EmulationModel.ScreenOrientationLockChangedEvent>): void {
+    this.#screenOrientationLocked = event.data.locked;
+    if (event.data.locked && event.data.orientation) {
+      this.applyOrientationLock(event.data.orientation);
+    }
+    this.dispatchEventToListeners(Events.UPDATED);
+  }
+
+  private applyOrientationLock(orientation: Protocol.Emulation.ScreenOrientation): void {
+    const wantsLandscape = orientation.type === Protocol.Emulation.ScreenOrientationType.LandscapePrimary ||
+        orientation.type === Protocol.Emulation.ScreenOrientationType.LandscapeSecondary;
+
+    if (this.#type === Type.Device && this.#device && this.#mode) {
+      // For device emulation, switch to the matching orientation mode.
+      const isCurrentlyLandscape =
+          this.#mode.orientation === Horizontal || this.#mode.orientation === HorizontalSpanned;
+      if (wantsLandscape !== isCurrentlyLandscape) {
+        const rotationPartner = this.#device.getRotationPartner(this.#mode);
+        if (rotationPartner) {
+          this.emulate(this.#type, this.#device, rotationPartner);
+        }
+      }
+    } else if (this.#type === Type.Responsive) {
+      // For responsive mode, swap width/height if orientation doesn't match.
+      const appliedSize = this.appliedDeviceSize();
+      const isCurrentlyLandscape = appliedSize.width > appliedSize.height;
+      if (wantsLandscape !== isCurrentlyLandscape) {
+        this.setSizeAndScaleToFit(appliedSize.height, appliedSize.width);
+      }
+    }
+  }
+
+  isScreenOrientationLocked(): boolean {
+    return this.#screenOrientationLocked;
+  }
+
   private scaleSettingChanged(): void {
     this.calculateAndEmulate(false);
   }

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -13,6 +13,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
+import * as Greendev from '../../models/greendev/greendev.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -461,7 +462,8 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
 
   const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.walkthrough.isExpanded;
 
-  if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
+  if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled ||
+    Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent')) {
     Lit.render(html`
       ${toolbarView(input)}
       <div class="ai-assistance-view-container">
@@ -915,7 +917,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
-  async handleBreakpointConversation(uiLocation: Workspace.UISourceCode.UILocation): Promise<void> {
+  async handleBreakpointConversation(uiLocation: Workspace.UISourceCode.UILocation, errorMsg?: string): Promise<void> {
     const context = new AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext(uiLocation);
     this.#selectedBreakpoint = context;
     const conversation = new AiAssistanceModel.AiConversation.AiConversation(
@@ -934,6 +936,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#conversation?.setContext(context);
     this.requestUpdate();
     await UI.ViewManager.ViewManager.instance().showView(AiAssistancePanel.panelName);
+    const prompt = errorMsg ? `debug the error "${errorMsg}" using breakpoint debugging agent` :
+                              'debug the error using breakpoint debugging agent';
+    await this.#startConversation(prompt);
   }
 
   override wasShown(): void {
@@ -1658,6 +1663,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               parts: [],
             };
             this.#messages.push(systemMessage);
+            if (Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent') &&
+                this.#conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT) {
+              this.#openWalkthrough(systemMessage);
+            }
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.QUERYING: {

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

@@ -2,9 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as Logs from '../../../models/logs/logs.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
 import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
-import type * as Lit from '../../../ui/lit/lit.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+const {html} = Lit;
 
 /**
  * The model returns multiline code blocks in an erroneous way with the language being in new line.
@@ -19,7 +25,43 @@ import type * as Lit from '../../../ui/lit/lit.js';
  * ```
  **/
 export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  #revealableLink(revealable: unknown, label: string): Lit.LitTemplate {
+    return html`<devtools-link @click=${(e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+      void Common.Revealer.reveal(revealable);
+    }}>${Platform.StringUtilities.trimEndWithMaxLength(label, 100)}</devtools-link>`;
+  }
+
+  #renderLink(href: string): Lit.LitTemplate|null {
+    if (href.startsWith('#req-')) {
+      const request =
+          Logs.NetworkLog.NetworkLog.instance().requests().find(req => req.requestId() === href.substring(5));
+
+      if (request) {
+        return this.#revealableLink(request, request.url());
+      }
+
+    } else if (href.startsWith('#file-')) {
+      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
+          file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
+              Number(href.substring(6)));
+
+      if (file) {
+        return this.#revealableLink(file, file.name());
+      }
+    }
+    return null;
+  }
+
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (token.type === 'link') {
+      const link = this.#renderLink(token.href);
+      if (link) {
+        return link;
+      }
+    }
+
     if (token.type === 'code') {
       const lines = (token.text).split('\n');
       if (lines[0]?.trim() === 'css') {
@@ -28,6 +70,18 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
       }
     }
 
+    if (token.type === 'codespan') {
+      // LLM likes outputting the link inside a codespan block.
+      // Remove the codespan and render the link directly
+      const matches = token.text.match(/^\[.*\]\((.+)\)$/);
+      if (matches?.[1]) {
+        const link = this.#renderLink(matches[1]);
+        if (link) {
+          return link;
+        }
+      }
+    }
+
     return super.templateForToken(token);
   }
 }