chrome-devtools-frontend 1.0.1592129 → 1.0.1593518

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

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Bindings from '../../bindings/bindings.js';
@@ -20,9 +21,18 @@ import {
   type ContextResponse,
   ConversationContext,
   type FunctionCallHandlerResult,
+  type FunctionHandlerOptions,
+  type MultimodalInput,
   type RequestOptions,
+  type ResponseData,
   ResponseType,
 } from './AiAgent.js';
+import {
+  injectOverlay,
+  removeOverlay,
+} from './BreakpointDebuggerAgentOverlay.js';
+
+const lockedString = i18n.i18n.lockedString;
 
 // This is a temporary agent for a GreenDev prototype.
 // The preamble is not on the server and you should not build on top of this.
@@ -39,20 +49,24 @@ You have two modes of operation that you can switch between and control:
 **Workflow**:
 1. **Hypothesize**: Read the code ('getFunctionSource', 'getPreviousLines', 'getNextLines') to understand the logic.
 2. **Set Trap**: Identify the critical line where state corruption likely occurred or lines that can lead you to that place. Use 'setBreakpoint' on that line.
-3. **Wait**: Call 'waitForBreakpoint'. This will suspend your execution until the user triggers the breakpoint. You CANNOT proceed until this tool returns.
+3. **Wait**: Call 'waitForUserActionToTriggerBreakpoint'. This will suspend your execution until the user triggers the breakpoint. You CANNOT proceed until this tool returns.
 4. **Inspect**: Using 'getExecutionLocation' check exactly where you are paused.
 5. **Analyze**: When paused (Runtime Mode), use 'getScopeVariables' and 'getCallStack' to verify your hypothesis. Check variables in multiple scopes and look up the call stack to see where bad data came from.
 6. **Step**: Use 'stepInto' to investigate function calls on the current line. Use 'stepOut' to return to the caller. Use 'stepOver' to move to the next line.
 7. **Trace Back**: If the current function isn't the root cause, use 'getCallStack' to find the caller, and repeat the analysis there.
 8. **Root Cause**: Explain exactly how the runtime state contradicts the expected logic and point to the specific line of code that is the root cause.
+9. **Apply Fix**: Use the 'testFixInConsole' tool to overwrite the problematic code in the current session.
+10. **Verify**: The fix is applied but NOT verified. You MUST run the code again to verify the fix worked.
+11. **Finish**: If the fix worked, you may output the solution and finish the execution.
 
 **Rules**:
-- **NEVER FINISH** execution until you have found the root cause or answer.
-- **ACTION OVER TALK**: If you need the user to trigger a breakpoint, do NOT just ask them in text. You **MUST** call 'waitForBreakpoint'. This tool will block and wait for the user to act.
-- **STATIC MODE**: If you are in STATIC MODE and need to see variables: 1. 'setBreakpoint', 2. 'waitForBreakpoint'. **DO NOT STOP** to ask the user. Investigate code and set breakpoints to find the root cause.
-- **ALREADY PAUSED?**: If 'setBreakpoint' warns you that you are already paused, **DO NOT** call 'waitForBreakpoint'. Start inspecting immediately. You can set more breakpoints while paused, but to call 'waitForBreakpoint' again you MUST be in static state.
+- **NEVER FINISH** execution until you have found the root cause and verified the fix.
+- **ACTION OVER TALK**: If you need the user to trigger a breakpoint, do NOT just ask them in text. You **MUST** call 'waitForUserActionToTriggerBreakpoint'. This tool will block and wait for the user to act.
+- **STATIC MODE**: If you are in STATIC MODE and need to see variables: 1. 'setBreakpoint', 2. 'waitForUserActionToTriggerBreakpoint'. **DO NOT STOP** to ask the user. Investigate code and set breakpoints to find the root cause.
+- **ALREADY PAUSED?**: If 'setBreakpoint' warns you that you are already paused, **DO NOT** call 'waitForUserActionToTriggerBreakpoint'. Start inspecting immediately. You can set more breakpoints while paused, but to call 'waitForUserActionToTriggerBreakpoint' again you MUST be in static state.
 - **USE TOOLS EXCESSIVELY**: checking one thing is often not enough. Check everything you can thinks of.
-- **CHECK LOCATION**: If you are not sure where you are, call 'getExecutionLocation' after 'waitForBreakpoint' or any step command to confirm where you are.
+- **CHECK LOCATION**: If you are not sure where you are, call 'getExecutionLocation' after 'waitForUserActionToTriggerBreakpoint' or any step command to confirm where you are.
+- **INITIAL CONTEXT**: The breakpoint provided in the context is ALREADY SET. Do NOT set it again. Start by setting additional breakpoints if needed, or, if no additional breakpoints within the code you see make sense, call 'waitForUserActionToTriggerBreakpoint'.
 
 **Execution Control when you are currently on a breakpoint**:
 - **stepInto**: ESSENTIAL for entering function calls on the current line. Use this heavily when you suspect the issue is inside a called function.
@@ -60,6 +74,8 @@ You have two modes of operation that you can switch between and control:
 - **stepOut**: Return to the caller. If you are currently on a breakpoint, 'stepOut' will move you to the caller and pause again. **It often makes sense to 'stepOut' after you have investigated a function with 'stepInto' and verified it is correct.**
 - **stepInto, stepOver, stepOut**: After any step command, always call 'getScopeVariables' to see how the state evolved.
 - **listBreakpoints**: Use this to see all active breakpoints. Do not try to set a breakpoint that is already active.
+- **removeBreakpoint / removeAllBreakpoints**: Use this to remove breakpoints. This is especially useful when you want to speed up verifying a fix.
+- **CLEANUP AFTER FIX**: After a fix is suggested and worked, you MUST remove all breakpoints and call 'resume' to resume the execution of the page.
 `;
 
 export class BreakpointContext extends ConversationContext<Workspace.UISourceCode.UILocation> {
@@ -108,6 +124,13 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         },
         required: ['url', 'lineNumber'],
       },
+      displayInfoFromArgs: (args: {url: string, lineNumber: number}) => {
+        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
+            args.url as Platform.DevToolsPath.UrlString);
+        return {
+          title: `Reading function source for ${uiSourceCode?.displayName()}:${args.lineNumber}`,
+        };
+      },
       handler: async (args: {url: string, lineNumber: number}) => {
         const result = await this.#getFunctionSource(args);
         debugLog('getFunctionSource for ', JSON.stringify(args), '->', JSON.stringify(result));
@@ -137,6 +160,13 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         },
         required: ['url', 'lineNumber', 'direction'],
       },
+      displayInfoFromArgs: (args: {url: string, lineNumber: number, direction: 'before'|'after'}) => {
+        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
+            args.url as Platform.DevToolsPath.UrlString);
+        return {
+          title: `Reading code ${args.direction} ${uiSourceCode?.displayName()}:${args.lineNumber}`,
+        };
+      },
       handler: async (args: {url: string, lineNumber: number, direction: 'before'|'after'}) => {
         const result = await this.#getCodeLines(args);
         debugLog('getCodeLines result', JSON.stringify(result));
@@ -151,6 +181,11 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         properties: {},
         required: [],
       },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Reading call stack',
+        };
+      },
       handler: async () => {
         const result = await this.#getCallStack();
         debugLog('getCallStack result', JSON.stringify(result));
@@ -165,6 +200,11 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         properties: {},
         required: [],
       },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Reading scope variables',
+        };
+      },
       handler: async () => {
         const result = await this.#getScopeVariables();
         debugLog('getScopeVariables result', JSON.stringify(result));
@@ -179,6 +219,11 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         properties: {},
         required: [],
       },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Listing breakpoints',
+        };
+      },
       handler: async () => {
         const result = await this.#listBreakpoints();
         debugLog('listBreakpoints result', JSON.stringify(result));
@@ -202,6 +247,13 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         },
         required: ['url', 'lineNumber'],
       },
+      displayInfoFromArgs: (args: {url: string, lineNumber: number}) => {
+        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
+            args.url as Platform.DevToolsPath.UrlString);
+        return {
+          title: `Setting breakpoint at ${uiSourceCode?.displayName() ?? args.url}:${args.lineNumber}`,
+        };
+      },
       handler: async (args: {url: string, lineNumber: number}) => {
         debugLog('setBreakpoint requested', args);
         const result = await this.#setBreakpoint(args);
@@ -209,18 +261,80 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         return result;
       },
     });
+    this.declareFunction('removeBreakpoint', {
+      description: 'Remove a breakpoint at a specific location.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: 'Location to remove the breakpoint from',
+        properties: {
+          url: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The URL of the file',
+          },
+          lineNumber: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The 1-based line number to remove the breakpoint from',
+          },
+        },
+        required: ['url', 'lineNumber'],
+      },
+      displayInfoFromArgs: (args: {url: string, lineNumber: number}) => {
+        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
+            args.url as Platform.DevToolsPath.UrlString);
+        return {
+          title: `Removing breakpoint at ${uiSourceCode?.displayName() ?? args.url}:${args.lineNumber}`,
+        };
+      },
+      handler: async (args: {url: string, lineNumber: number}) => {
+        debugLog('removeBreakpoint requested', args);
+        const result = await this.#removeBreakpoint(args);
+        debugLog('removeBreakpoint result', JSON.stringify(result));
+        return result;
+      },
+    });
+    this.declareFunction('removeAllBreakpoints', {
+      description: 'Remove all active breakpoints.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: 'No parameters required',
+        properties: {},
+        required: [],
+      },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Removing all breakpoints',
+        };
+      },
+      handler: async () => {
+        debugLog('removeAllBreakpoints requested');
+        const breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance();
+        const allBreakpoints = breakpointManager.allBreakpointLocations();
+        for (const bp of allBreakpoints) {
+          await bp.breakpoint.remove(false);
+        }
+        return {result: {status: 'All breakpoints removed.'}};
+      },
+    });
     this.declareFunction('resume', {
-      description: 'Resume execution until the next breakpoint is hit.',
+      description: 'Resume execution. Always use this after applying a fix to resume the page execution.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: 'No parameters required',
         properties: {},
         required: [],
       },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Resuming execution',
+        };
+      },
       handler: async () => {
-        const result = await this.#debuggerAction(model => model.resume());
-        debugLog('resume result', JSON.stringify(result));
-        return result;
+        const targetManager = SDK.TargetManager.TargetManager.instance();
+        const debuggerModel = targetManager.models(SDK.DebuggerModel.DebuggerModel).find(m => m.isPaused());
+        if (debuggerModel) {
+          debuggerModel.resume();
+        }
+        return {result: {status: 'Execution resumed.'}};
       },
     });
     this.declareFunction('stepOver', {
@@ -231,6 +345,11 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         properties: {},
         required: [],
       },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Stepping over',
+        };
+      },
       handler: async () => {
         const result = await this.#debuggerAction(model => model.stepOver());
         debugLog('stepOver result', JSON.stringify(result));
@@ -246,6 +365,11 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         properties: {},
         required: [],
       },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Stepping into',
+        };
+      },
       handler: async () => {
         const result = await this.#debuggerAction(model => model.stepInto());
         debugLog('stepInto result', JSON.stringify(result));
@@ -261,6 +385,11 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         properties: {},
         required: [],
       },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Stepping out',
+        };
+      },
       handler: async () => {
         const result = await this.#debuggerAction(model => model.stepOut());
         debugLog('stepOut result', JSON.stringify(result));
@@ -298,12 +427,97 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         properties: {},
         required: [],
       },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Getting execution location',
+        };
+      },
       handler: async () => {
         const result = await this.#getExecutionLocation();
         debugLog('getExecutionLocation ', JSON.stringify(result));
         return result;
       },
     });
+
+    this.declareFunction('testFixInConsole', {
+      description:
+          'Tests a JavaScript code snippet in the current execution context to overwrite the problematic code or state. After running this, verify the fix worked.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: 'Provide the code to evaluate to test the fix',
+        properties: {
+          code: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The JavaScript code to evaluate in the console to test the fix.',
+          },
+          explanation: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'Explanation for why this code fixes the issue.',
+          },
+        },
+        required: ['code', 'explanation'],
+      },
+      displayInfoFromArgs: (args: {code: string, explanation: string}) => {
+        return {
+          title: 'Testing a fix in console',
+          thought: args.explanation,
+          action: args.code,
+        };
+      },
+      handler: async (args: {code: string, explanation: string}, options?: FunctionHandlerOptions) => {
+        debugLog('testFixInConsole requested', args);
+        if (options?.approved === false) {
+          return {error: 'Fix rejected by the user.'};
+        }
+        if (!options?.approved) {
+          return {
+            requiresApproval: true,
+            description: lockedString('This code may modify page content. Continue?'),
+          };
+        }
+
+        const targetManager = SDK.TargetManager.TargetManager.instance();
+        const debuggerModel = targetManager.models(SDK.DebuggerModel.DebuggerModel).find(m => m.isPaused());
+
+        if (!debuggerModel) {
+          return {error: 'Execution is not paused.'};
+        }
+
+        const details = debuggerModel.debuggerPausedDetails();
+        const callFrame = details?.callFrames[0];
+        if (!callFrame) {
+          return {error: 'No call frame available.'};
+        }
+
+        const result = await callFrame.evaluate({
+          expression: args.code,
+          objectGroup: 'console',
+          includeCommandLineAPI: true,
+          silent: false,
+          returnByValue: false,
+          generatePreview: true
+        });
+
+        if (!result) {
+          return {error: 'Failed to evaluate the fix.'};
+        }
+
+        if ('error' in result) {
+          return {error: 'Error applying fix: ' + (result as unknown as {error: string}).error};
+        }
+
+        if (result.exceptionDetails) {
+          return {error: 'Fix threw an exception: ' + result.exceptionDetails.text};
+        }
+
+        return {
+          result: {
+            status:
+                'Code evaluated successfully. Fix applied. PROCEED TO VERIFICATION: Call "resume" and ask the user to "run the code again" to verify.'
+          }
+        };
+      },
+    });
   }
 
   async #getFunctionSource(args: {url: string, lineNumber: number}):
@@ -407,7 +621,7 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
     if (!debuggerModel) {
       return {
         error:
-            'Execution is not paused. I cannot access runtime variables or the call stack. I am currently in STATIC MODE. I must set a breakpoint and use waitForBreakpoint to enter RUNTIME MODE.'
+            'Execution is not paused. I cannot access runtime variables or the call stack. I am currently in STATIC MODE. I must set a breakpoint and use waitForUserActionToTriggerBreakpoint to enter RUNTIME MODE.'
       };
     }
 
@@ -439,7 +653,7 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
     if (!debuggerModel) {
       return {
         error:
-            'Execution is not paused. I cannot access runtime variables or the call stack. I am currently in STATIC MODE. I must set a breakpoint and use waitForBreakpoint to enter RUNTIME MODE.'
+            'Execution is not paused. I cannot access runtime variables or the call stack. I am currently in STATIC MODE. I must set a breakpoint and use waitForUserActionToTriggerBreakpoint to enter RUNTIME MODE.'
       };
     }
 
@@ -566,7 +780,7 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
       if (callFrame) {
         const pausedLoc = `${callFrame.script.contentURL()}:${callFrame.location().lineNumber + 1}`;
         warning = ` WARNING: You are already PAUSED at ${
-            pausedLoc}. \n1. If this is where you want to be, call 'getExecutionLocation' and inspect variables. \n2. If you want to wait for the NEW breakpoint, you MUST call 'waitForBreakpoint' (which will resume execution).`;
+            pausedLoc}. \n1. If this is where you want to be, call 'getExecutionLocation' and inspect variables. \n2. If you want to wait for the NEW breakpoint, you MUST call 'waitForUserActionToTriggerBreakpoint' (which will resume execution).`;
       }
     }
 
@@ -575,8 +789,9 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         result: {
           status: `Breakpoint requested at ${args.url}:${args.lineNumber}, but ACTUALLY resolved to line ${
               actualLineNumber}.${
-              warning ? '\n' + warning :
-                        ' You must now call waitForBreakpoint and ask the user to trigger the action.'}`
+              warning ?
+                  '\n' + warning :
+                  ' You must now call waitForUserActionToTriggerBreakpoint and ask the user to trigger the action.'}`
         }
       };
     }
@@ -584,11 +799,33 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
     return {
       result: {
         status: `Breakpoint set at ${args.url}:${args.lineNumber}.${
-            warning ? '\n' + warning : ' You must now call waitForBreakpoint and ask the user to trigger the action.'}`
+            warning ?
+                '\n' + warning :
+                ' You must now call waitForUserActionToTriggerBreakpoint and ask the user to trigger the action.'}`
       }
     };
   }
 
+  async #removeBreakpoint(args: {url: string, lineNumber: number}):
+      Promise<FunctionCallHandlerResult<{status: string}>> {
+    const uiSourceCode =
+        Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(args.url as Platform.DevToolsPath.UrlString);
+    if (!uiSourceCode) {
+      return {error: `File not found: ${args.url}`};
+    }
+
+    const breakpointLocations =
+        Breakpoints.BreakpointManager.BreakpointManager.instance().breakpointLocationsForUISourceCode(uiSourceCode);
+    const breakpointLocation = breakpointLocations.find(bp => bp.uiLocation.lineNumber === args.lineNumber - 1);
+
+    if (!breakpointLocation) {
+      return {result: {status: `Breakpoint not found at ${args.url}:${args.lineNumber}.`}};
+    }
+
+    await breakpointLocation.breakpoint.remove(false);
+    return {result: {status: `Breakpoint removed at ${args.url}:${args.lineNumber}.`}};
+  }
+
   async #debuggerAction(action: (model: SDK.DebuggerModel.DebuggerModel) => void):
       Promise<FunctionCallHandlerResult<{status: string}>> {
     const targetManager = SDK.TargetManager.TargetManager.instance();
@@ -598,8 +835,8 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
       return {error: 'Execution is not paused. I cannot step or resume in STATIC MODE.'};
     }
 
-    // Only resolve when next pause event is triggered
-    return await this.#waitForNextPause(() => action(debuggerModel));
+    // Only resolve when next pause event is triggered (with a 3 second timeout so the agent doesn't hang)
+    return await this.#waitForNextPause(() => action(debuggerModel), 3000);
   }
 
   async #waitForUserActionToTriggerBreakpoint(): Promise<FunctionCallHandlerResult<{status: string}>> {
@@ -610,14 +847,23 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
       return {error: 'No debugger attached'};
     }
 
-    return await this.#waitForNextPause(() => {
-      // Resume all paused models before waiting for the next breakpoint
-      for (const model of debuggerModels) {
-        if (model.isPaused()) {
-          model.resume();
+    // While waiting for the user to trigger the breakpoint, show an overlay on top of the page.
+    // This is to make it clear to the user that they need to trigger the
+    // breakpoint for the agent to continue the debugging process.
+    void injectOverlay();
+
+    try {
+      return await this.#waitForNextPause(() => {
+        // Resume all paused models before waiting for the next breakpoint
+        for (const model of debuggerModels) {
+          if (model.isPaused()) {
+            model.resume();
+          }
         }
-      }
-    });
+      });
+    } finally {
+      void removeOverlay();
+    }
   }
 
   /**
@@ -626,14 +872,20 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
    *
    * @param triggerAction Optional action to execute (e.g. resume, step) that is expected to lead to a pause.
    */
-  async #waitForNextPause(triggerAction: () => void = () => {}): Promise<FunctionCallHandlerResult<{status: string}>> {
+  async #waitForNextPause(triggerAction: () => void = () => {}, timeoutMs?: number):
+      Promise<FunctionCallHandlerResult<{status: string}>> {
     const targetManager = SDK.TargetManager.TargetManager.instance();
 
     return await new Promise(resolve => {
+      let timeoutId: ReturnType<typeof setTimeout>;
+
       const listener =
           async(event: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.DebuggerModel>): Promise<void> => {
         targetManager.removeModelListener(
             SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, listener);
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
         const model = event.data;
         const details = model.debuggerPausedDetails();
         const callFrame = details?.callFrames[0];
@@ -655,6 +907,19 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
       targetManager.addModelListener(
           SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, listener);
 
+      if (timeoutMs !== undefined) {
+        timeoutId = setTimeout(() => {
+          targetManager.removeModelListener(
+              SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, listener);
+          resolve({
+            result: {
+              status:
+                  'Execution resumed but did not pause again. There is nothing to step into or the execution finished.'
+            }
+          });
+        }, timeoutMs);
+      }
+
       // Execute the action that will eventually trigger the pause
       triggerAction();
     });
@@ -719,4 +984,33 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
   get options(): RequestOptions {
     return {temperature: 0, modelId: undefined};
   }
+
+  override async *
+      run(
+          initialQuery: string,
+          options: {
+            selected: ConversationContext<Workspace.UISourceCode.UILocation>|null,
+            signal?: AbortSignal,
+          },
+          multimodalInput?: MultimodalInput,
+          ): AsyncGenerator<ResponseData, void, void> {
+    try {
+      yield* super.run(initialQuery, options, multimodalInput);
+    } finally {
+      // When the agent is done, remove all breakpoints and exit paused state.
+      const breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance();
+      const allBreakpoints = breakpointManager.allBreakpointLocations();
+      for (const bp of allBreakpoints) {
+        await bp.breakpoint.remove(false);
+      }
+
+      const targetManager = SDK.TargetManager.TargetManager.instance();
+      const debuggerModels = targetManager.models(SDK.DebuggerModel.DebuggerModel);
+      for (const model of debuggerModels) {
+        if (model.isPaused()) {
+          model.resume();
+        }
+      }
+    }
+  }
 }

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
           }
         }