chrome-devtools-frontend 1.0.1604514 → 1.0.1605390

package/front_end/core/sdk/CookieModel.ts

@@ -99,8 +99,9 @@ export class CookieModel extends SDKModel<EventTypes> {
     if (cookie.expires()) {
       expires = Math.floor(Date.parse(`${cookie.expires()}`) / 1000);
     }
-    const enabled =
-        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.EXPERIMENTAL_COOKIE_FEATURES);
+    const schemeBindingEnabled =
+        Boolean(Root.Runtime.hostConfig.devToolsEnableOriginBoundCookies?.schemeBindingEnabled);
+    const portBindingEnabled = Boolean(Root.Runtime.hostConfig.devToolsEnableOriginBoundCookies?.portBindingEnabled);
     const preserveUnset = (scheme: Protocol.Network.CookieSourceScheme): Protocol.Network.CookieSourceScheme.Unset|
                           undefined => scheme === Protocol.Network.CookieSourceScheme.Unset ? scheme : undefined;
     const protocolCookie = {
@@ -115,8 +116,8 @@ export class CookieModel extends SDKModel<EventTypes> {
       expires,
       priority: cookie.priority(),
       partitionKey: cookie.partitionKey(),
-      sourceScheme: enabled ? cookie.sourceScheme() : preserveUnset(cookie.sourceScheme()),
-      sourcePort: enabled ? cookie.sourcePort() : undefined,
+      sourceScheme: schemeBindingEnabled ? cookie.sourceScheme() : preserveUnset(cookie.sourceScheme()),
+      sourcePort: portBindingEnabled ? cookie.sourcePort() : undefined,
     };
     const response = await this.target().networkAgent().invoke_setCookie(protocolCookie);
     const error = response.getError();

package/front_end/core/sdk/DOMDebuggerModel.ts

@@ -4,7 +4,7 @@
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as Common from '../common/common.js';
+import type * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
 
 import {CategorizedBreakpoint, Category} from './CategorizedBreakpoint.js';
@@ -38,7 +38,7 @@ export class DOMDebuggerModel extends SDKModel<EventTypes> {
     this.#domModel.addEventListener(DOMModelEvents.NodeRemoved, this.nodeRemoved, this);
 
     this.#domBreakpoints = [];
-    this.#domBreakpointsSetting = Common.Settings.Settings.instance().createLocalSetting('dom-breakpoints', []);
+    this.#domBreakpointsSetting = this.target().targetManager().settings.createLocalSetting('dom-breakpoints', []);
     if (this.#domModel.existingDocument()) {
       void this.documentUpdated();
     }
@@ -498,9 +498,11 @@ export class CSPViolationBreakpoint extends CategorizedBreakpoint {
 
 export class DOMEventListenerBreakpoint extends CategorizedBreakpoint {
   readonly eventTargetNames: string[];
-  constructor(eventName: string, eventTargetNames: string[], category: Category) {
+  readonly #targetManager: TargetManager;
+  constructor(eventName: string, eventTargetNames: string[], category: Category, targetManager: TargetManager) {
     super(category, eventName);
     this.eventTargetNames = eventTargetNames;
+    this.#targetManager = targetManager;
   }
 
   override setEnabled(enabled: boolean): void {
@@ -508,7 +510,7 @@ export class DOMEventListenerBreakpoint extends CategorizedBreakpoint {
       return;
     }
     super.setEnabled(enabled);
-    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+    for (const model of this.#targetManager.models(DOMDebuggerModel)) {
       this.updateOnModel(model);
     }
   }
@@ -534,9 +536,11 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
 
   readonly #cspViolationsToBreakOn: CSPViolationBreakpoint[] = [];
   readonly #eventListenerBreakpoints: DOMEventListenerBreakpoint[] = [];
+  readonly #targetManager: TargetManager;
 
-  constructor() {
-    this.#xhrBreakpointsSetting = Common.Settings.Settings.instance().createLocalSetting('xhr-breakpoints', []);
+  constructor(targetManager: TargetManager = TargetManager.instance()) {
+    this.#targetManager = targetManager;
+    this.#xhrBreakpointsSetting = this.#targetManager.settings.createLocalSetting('xhr-breakpoints', []);
     for (const breakpoint of this.#xhrBreakpointsSetting.get()) {
       this.#xhrBreakpoints.set(breakpoint.url, breakpoint.enabled);
     }
@@ -659,15 +663,16 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
         Category.XHR, ['readystatechange', 'load', 'loadstart', 'loadend', 'abort', 'error', 'progress', 'timeout'],
         ['xmlhttprequest', 'xmlhttprequestupload']);
 
-    TargetManager.instance().observeModels(DOMDebuggerModel, this);
+    this.#targetManager.observeModels(DOMDebuggerModel, this);
   }
 
   static instance(opts: {
     forceNew: boolean|null,
+    targetManager?: TargetManager,
   } = {forceNew: null}): DOMDebuggerManager {
-    const {forceNew} = opts;
+    const {forceNew, targetManager} = opts;
     if (!domDebuggerManagerInstance || forceNew) {
-      domDebuggerManagerInstance = new DOMDebuggerManager();
+      domDebuggerManagerInstance = new DOMDebuggerManager(targetManager);
     }
 
     return domDebuggerManagerInstance;
@@ -679,7 +684,8 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
 
   private createEventListenerBreakpoints(category: Category, eventNames: string[], eventTargetNames: string[]): void {
     for (const eventName of eventNames) {
-      this.#eventListenerBreakpoints.push(new DOMEventListenerBreakpoint(eventName, eventTargetNames, category));
+      this.#eventListenerBreakpoints.push(
+          new DOMEventListenerBreakpoint(eventName, eventTargetNames, category, this.#targetManager));
     }
   }
 
@@ -710,7 +716,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
 
   updateCSPViolationBreakpoints(): void {
     const violationTypes = this.#cspViolationsToBreakOn.filter(v => v.enabled()).map(v => v.type());
-    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+    for (const model of this.#targetManager.models(DOMDebuggerModel)) {
       this.updateCSPViolationBreakpointsForModel(model, violationTypes);
     }
   }
@@ -735,7 +741,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   addXHRBreakpoint(url: string, enabled: boolean): void {
     this.#xhrBreakpoints.set(url, enabled);
     if (enabled) {
-      for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+      for (const model of this.#targetManager.models(DOMDebuggerModel)) {
         void model.agent.invoke_setXHRBreakpoint({url});
       }
     }
@@ -746,7 +752,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
     const enabled = this.#xhrBreakpoints.get(url);
     this.#xhrBreakpoints.delete(url);
     if (enabled) {
-      for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+      for (const model of this.#targetManager.models(DOMDebuggerModel)) {
         void model.agent.invoke_removeXHRBreakpoint({url});
       }
     }
@@ -755,7 +761,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
 
   toggleXHRBreakpoint(url: string, enabled: boolean): void {
     this.#xhrBreakpoints.set(url, enabled);
-    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+    for (const model of this.#targetManager.models(DOMDebuggerModel)) {
       if (enabled) {
         void model.agent.invoke_setXHRBreakpoint({url});
       } else {

package/front_end/core/sdk/DebuggerModel.ts

@@ -173,30 +173,19 @@ export class DebuggerModel extends SDKModel<EventTypes> {
         (compiledURL, sourceMappingURL, payload, script) =>
             new SourceMap(compiledURL, sourceMappingURL, payload, script));
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-exception-enabled')
-        .addChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-caught-exception')
-        .addChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-uncaught-exception')
-        .addChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('disable-async-stack-traces')
-        .addChangeListener(this.asyncStackTracesStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('breakpoints-active')
-        .addChangeListener(this.breakpointsActiveChanged, this);
+    const settings = this.target().targetManager().settings;
+    settings.moduleSetting('pause-on-exception-enabled').addChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('pause-on-caught-exception').addChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('pause-on-uncaught-exception').addChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('disable-async-stack-traces').addChangeListener(this.asyncStackTracesStateChanged, this);
+    settings.moduleSetting('breakpoints-active').addChangeListener(this.breakpointsActiveChanged, this);
 
     if (!target.suspended()) {
       void this.enableDebugger();
     }
 
-    this.#sourceMapManager.setEnabled(
-        Common.Settings.Settings.instance().moduleSetting('js-source-maps-enabled').get());
-    Common.Settings.Settings.instance()
-        .moduleSetting('js-source-maps-enabled')
+    this.#sourceMapManager.setEnabled(settings.moduleSetting('js-source-maps-enabled').get());
+    settings.moduleSetting('js-source-maps-enabled')
         .addChangeListener(event => this.#sourceMapManager.setEnabled((event.data as boolean)));
 
     const resourceTreeModel = (target.model(ResourceTreeModel) as ResourceTreeModel);
@@ -273,7 +262,8 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     }
     this.pauseOnExceptionStateChanged();
     void this.asyncStackTracesStateChanged();
-    if (!Common.Settings.Settings.instance().moduleSetting('breakpoints-active').get()) {
+    const settings = this.target().targetManager().settings;
+    if (!settings.moduleSetting('breakpoints-active').get()) {
       this.breakpointsActiveChanged();
     }
     this.dispatchEventToListeners(Events.DebuggerWasEnabled, this);
@@ -364,11 +354,11 @@ export class DebuggerModel extends SDKModel<EventTypes> {
   }
 
   private pauseOnExceptionStateChanged(): void {
-    const pauseOnCaughtEnabled = Common.Settings.Settings.instance().moduleSetting('pause-on-caught-exception').get();
+    const settings = this.target().targetManager().settings;
+    const pauseOnCaughtEnabled = settings.moduleSetting('pause-on-caught-exception').get();
     let state: Protocol.Debugger.SetPauseOnExceptionsRequestState;
 
-    const pauseOnUncaughtEnabled =
-        Common.Settings.Settings.instance().moduleSetting('pause-on-uncaught-exception').get();
+    const pauseOnUncaughtEnabled = settings.moduleSetting('pause-on-uncaught-exception').get();
     if (pauseOnCaughtEnabled && pauseOnUncaughtEnabled) {
       state = Protocol.Debugger.SetPauseOnExceptionsRequestState.All;
     } else if (pauseOnCaughtEnabled) {
@@ -383,15 +373,15 @@ export class DebuggerModel extends SDKModel<EventTypes> {
 
   private asyncStackTracesStateChanged(): Promise<Protocol.ProtocolResponseWithError> {
     const maxAsyncStackChainDepth = 32;
-    const enabled =
-        !Common.Settings.Settings.instance().moduleSetting('disable-async-stack-traces').get() && this.#debuggerEnabled;
+    const settings = this.target().targetManager().settings;
+    const enabled = !settings.moduleSetting('disable-async-stack-traces').get() && this.#debuggerEnabled;
     const maxDepth = enabled ? maxAsyncStackChainDepth : 0;
     return this.agent.invoke_setAsyncCallStackDepth({maxDepth});
   }
 
   private breakpointsActiveChanged(): void {
-    void this.agent.invoke_setBreakpointsActive(
-        {active: Common.Settings.Settings.instance().moduleSetting('breakpoints-active').get()});
+    const settings = this.target().targetManager().settings;
+    void this.agent.invoke_setBreakpointsActive({active: settings.moduleSetting('breakpoints-active').get()});
   }
 
   setComputeAutoStepRangesCallback(callback: ((arg0: StepMode, arg1: CallFrame) => Promise<LocationRange[]>)|null):
@@ -872,15 +862,10 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     if (this.#debuggerId) {
       debuggerIdToModel.delete(this.#debuggerId);
     }
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-exception-enabled')
-        .removeChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-caught-exception')
-        .removeChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('disable-async-stack-traces')
-        .removeChangeListener(this.asyncStackTracesStateChanged, this);
+    const settings = this.target().targetManager().settings;
+    settings.moduleSetting('pause-on-exception-enabled').removeChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('pause-on-caught-exception').removeChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('disable-async-stack-traces').removeChangeListener(this.asyncStackTracesStateChanged, this);
   }
 
   override async suspendModel(): Promise<void> {

package/front_end/core/sdk/EventBreakpointsModel.ts

@@ -56,12 +56,18 @@ export class EventBreakpointsModel extends SDKModel<void> {
  * instrumentation breakpoints in targets that run JS but do not have a DOM.
  **/
 class EventListenerBreakpoint extends CategorizedBreakpoint {
+  readonly #targetManager: TargetManager;
+  constructor(category: Category, name: string, targetManager: TargetManager) {
+    super(category, name);
+    this.#targetManager = targetManager;
+  }
+
   override setEnabled(enabled: boolean): void {
     if (this.enabled() === enabled) {
       return;
     }
     super.setEnabled(enabled);
-    for (const model of TargetManager.instance().models(EventBreakpointsModel)) {
+    for (const model of this.#targetManager.models(EventBreakpointsModel)) {
       this.updateOnModel(model);
     }
   }
@@ -81,8 +87,10 @@ let eventBreakpointManagerInstance: EventBreakpointsManager;
 
 export class EventBreakpointsManager implements SDKModelObserver<EventBreakpointsModel> {
   readonly #eventListenerBreakpoints: EventListenerBreakpoint[] = [];
+  readonly #targetManager: TargetManager;
 
-  constructor() {
+  constructor(targetManager: TargetManager = TargetManager.instance()) {
+    this.#targetManager = targetManager;
     this.createInstrumentationBreakpoints(Category.AUCTION_WORKLET, [
       InstrumentationNames.BEFORE_BIDDER_WORKLET_BIDDING_START,
       InstrumentationNames.BEFORE_BIDDER_WORKLET_REPORTING_START,
@@ -135,15 +143,16 @@ export class EventBreakpointsManager implements SDKModelObserver<EventBreakpoint
       InstrumentationNames.AUDIO_CONTEXT_SUSPENDED,
     ]);
 
-    TargetManager.instance().observeModels(EventBreakpointsModel, this);
+    this.#targetManager.observeModels(EventBreakpointsModel, this);
   }
 
   static instance(opts: {
     forceNew: boolean|null,
+    targetManager?: TargetManager,
   } = {forceNew: null}): EventBreakpointsManager {
-    const {forceNew} = opts;
+    const {forceNew, targetManager} = opts;
     if (!eventBreakpointManagerInstance || forceNew) {
-      eventBreakpointManagerInstance = new EventBreakpointsManager();
+      eventBreakpointManagerInstance = new EventBreakpointsManager(targetManager);
     }
 
     return eventBreakpointManagerInstance;
@@ -151,7 +160,8 @@ export class EventBreakpointsManager implements SDKModelObserver<EventBreakpoint
 
   private createInstrumentationBreakpoints(category: Category, instrumentationNames: InstrumentationNames[]): void {
     for (const instrumentationName of instrumentationNames) {
-      this.#eventListenerBreakpoints.push(new EventListenerBreakpoint(category, instrumentationName));
+      this.#eventListenerBreakpoints.push(
+          new EventListenerBreakpoint(category, instrumentationName, this.#targetManager));
     }
   }
 

package/front_end/core/sdk/IsolateManager.ts

@@ -19,18 +19,21 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
   #isolateIdByModel = new Map<RuntimeModel, string|null>();
   #observers = new Set<Observer>();
   #pollId = 0;
+  readonly #targetManager: TargetManager;
 
-  constructor() {
+  constructor(targetManager: TargetManager = TargetManager.instance()) {
     super();
+    this.#targetManager = targetManager;
 
-    TargetManager.instance().observeModels(RuntimeModel, this);
+    this.#targetManager.observeModels(RuntimeModel, this);
   }
 
-  static instance({forceNew}: {
+  static instance({forceNew, targetManager}: {
     forceNew: boolean,
+    targetManager?: TargetManager,
   } = {forceNew: false}): IsolateManager {
     if (!isolateManagerInstance || forceNew) {
-      isolateManagerInstance = new IsolateManager();
+      isolateManagerInstance = new IsolateManager(targetManager);
     }
 
     return isolateManagerInstance;
@@ -67,7 +70,7 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     this.#isolateIdByModel.set(model, isolateId);
     let isolate = this.#isolates.get(isolateId);
     if (!isolate) {
-      isolate = new Isolate(isolateId);
+      isolate = new Isolate(isolateId, this);
       this.#isolates.set(isolateId, isolate);
     }
     isolate.models().add(model);
@@ -145,9 +148,11 @@ export class Isolate {
   readonly #models: Set<RuntimeModel>;
   #usedHeapSize: number;
   readonly #memoryTrend: MemoryTrend;
+  readonly #manager: IsolateManager;
 
-  constructor(id: string) {
+  constructor(id: string, manager: IsolateManager) {
     this.#id = id;
+    this.#manager = manager;
     this.#models = new Set();
     this.#usedHeapSize = 0;
     const count = MemoryTrendWindowMs / PollIntervalMs;
@@ -179,7 +184,7 @@ export class Isolate {
     }
     this.#usedHeapSize = usage.usedSize + (usage.embedderHeapUsedSize ?? 0) + (usage.backingStorageSize ?? 0);
     this.#memoryTrend.add(this.#usedHeapSize);
-    IsolateManager.instance().dispatchEventToListeners(Events.MEMORY_CHANGED, this);
+    this.#manager.dispatchEventToListeners(Events.MEMORY_CHANGED, this);
   }
 
   samplesCount(): number {

package/front_end/core/sdk/WebMCPModel.ts

@@ -13,15 +13,32 @@ import {Capability, type Target} from './Target.js';
 export const enum Events {
   TOOLS_ADDED = 'ToolsAdded',
   TOOLS_REMOVED = 'ToolsRemoved',
+  TOOL_INVOKED = 'ToolInvoked',
+  TOOL_RESPONDED = 'ToolResponded',
+}
+
+export interface Call {
+  invocationId: string;
+  input: string;
+  tool: Protocol.WebMCP.Tool;
+  result?: {
+    status: Protocol.WebMCP.InvocationStatus,
+    output?: unknown,
+    errorText?: string,
+    exception?: Protocol.Runtime.RemoteObject,
+  };
 }
 
 export interface EventTypes {
   [Events.TOOLS_ADDED]: ReadonlyArray<Readonly<Protocol.WebMCP.Tool>>;
   [Events.TOOLS_REMOVED]: ReadonlyArray<Readonly<Protocol.WebMCP.Tool>>;
+  [Events.TOOL_INVOKED]: Call;
+  [Events.TOOL_RESPONDED]: Call;
 }
 
 export class WebMCPModel extends SDKModel<EventTypes> {
   readonly #tools = new Map<Protocol.Page.FrameId, Map<string, Protocol.WebMCP.Tool>>();
+  readonly #calls = new Map<string, Call>();
   readonly agent: ProtocolProxyApi.WebMCPApi;
   #enabled = false;
 
@@ -43,6 +60,14 @@ export class WebMCPModel extends SDKModel<EventTypes> {
     return this.#tools.values().flatMap(toolMap => toolMap.values());
   }
 
+  get toolCalls(): Call[] {
+    return [...this.#calls.values()];
+  }
+
+  clearCalls(): void {
+    this.#calls.clear();
+  }
+
   async enable(): Promise<void> {
     if (this.#enabled) {
       return;
@@ -78,6 +103,34 @@ export class WebMCPModel extends SDKModel<EventTypes> {
     }
     this.dispatchEventToListeners(Events.TOOLS_ADDED, tools);
   }
+
+  toolInvoked(params: Protocol.WebMCP.ToolInvokedEvent): void {
+    const tool = this.#tools.get(params.frameId)?.get(params.toolName);
+    if (!tool) {
+      return;
+    }
+    const call: Call = {
+      invocationId: params.invocationId,
+      input: params.input,
+      tool,
+    };
+    this.#calls.set(params.invocationId, call);
+    this.dispatchEventToListeners(Events.TOOL_INVOKED, call);
+  }
+
+  toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void {
+    const call = this.#calls.get(params.invocationId);
+    if (!call) {
+      return;
+    }
+    call.result = {
+      status: params.status,
+      output: params.output,
+      errorText: params.errorText,
+      exception: params.exception,
+    };
+    this.dispatchEventToListeners(Events.TOOL_RESPONDED, call);
+  }
 }
 
 class WebMCPDispatcher implements ProtocolProxyApi.WebMCPDispatcher {
@@ -94,10 +147,12 @@ class WebMCPDispatcher implements ProtocolProxyApi.WebMCPDispatcher {
     this.#model.onToolsRemoved(params.tools);
   }
 
-  toolInvoked(): void {
+  toolInvoked(params: Protocol.WebMCP.ToolInvokedEvent): void {
+    this.#model.toolInvoked(params);
   }
 
-  toolResponded(): void {
+  toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void {
+    this.#model.toolResponded(params);
   }
 }
 

package/front_end/entrypoints/main/MainImpl.ts

@@ -397,10 +397,6 @@ export class MainImpl {
         Root.ExperimentNames.ExperimentName.FONT_EDITOR, 'New font editor in the Styles tab',
         'https://developer.chrome.com/blog/new-in-devtools-89/#font');
 
-    // New cookie features.
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.EXPERIMENTAL_COOKIE_FEATURES, 'Experimental cookie features');
-
     Root.Runtime.experiments.registerHostExperiment({
       name: Root.ExperimentNames.ExperimentName.DURABLE_MESSAGES,
       title: 'Durable Messages',

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

@@ -290,9 +290,17 @@ export interface TimelineRangeSummaryAiWidget {
   };
 }
 
+export interface BottomUpTreeAiWidget {
+  name: 'BOTTOM_UP_TREE';
+  data: {
+    bounds: Trace.Types.Timing.TraceWindowMicro,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+  };
+}
+
 // This type will grow as we add more widgets.
 export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
-    PerformanceTraceAiWidget|LcpBreakdownAiWidget|TimelineRangeSummaryAiWidget;
+    PerformanceTraceAiWidget|LcpBreakdownAiWidget|TimelineRangeSummaryAiWidget|BottomUpTreeAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,

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

@@ -8,30 +8,31 @@ import * as Root from '../../../core/root/root.js';
 import {AiAgent, type ContextResponse, ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
 
 const preamble = `### Role
-You are a Performance Expert. Your task is to extract a diagnostic narrative from raw DevTools logs and present it as a self-contained, actionable Markdown summary. You provide high-density technical analysis without conversational fluff.
+You are a Conversation Summarizer. Your task is to take a transcript of a conversation between a user and a DevTools AI agent and produce a succinct, actionable Markdown summary. This summary will be used to help apply fixes in an IDE, so it must capture all relevant technical details, findings, and proposed code changes without any conversational fluff.
 
 ### Critical Constraints
 - **Persona:** Do not mention that you are an AI or refer to yourself in the third person.
 - **Domain Scope:** Do not provide answers on non-web-development topics (e.g., legal, financial, medical, or personal advice).
-- **Sensitive Topics:** If the conversation history touches on sensitive topics (religion, race, politics, sexuality, gender, etc.), respond only with: "My expertise is limited to website performance analysis. I cannot provide information on that topic."
-- **Data Portability:** The recipient of this summary does NOT have access to the raw logs.
+- **Sensitive Topics:** If the conversation history touches on sensitive topics (religion, race, politics, sexuality, gender, etc.), respond only with: "My expertise is limited to summarizing DevTools AI conversations. I cannot provide information on that topic."
+- **Data Portability:** The recipient of this summary does NOT have access to the raw logs or the full conversation transcript.
     - **No UIDs/Internal IDs:** Never refer to elements by internal IDs (e.g., \`uid=123\`).
     - **Standard Selectors:** Identify elements using HTML tags, classes, or IDs (e.g., \`button.submit-form\`).
     - **No Metadata:** Remove internal constants like \`NAVIGATION_0\` or \`INSIGHT_0\`.
-- **No Process Narration:** Do not describe internal "thinking" or API calls. Skip phrases like "The agent investigated..." or "The user then asked...". Jump straight to the findings.
+- **No Process Narration:** Do not describe internal "thinking" or API calls. Skip phrases like "The agent investigated..." or "The user then asked...". Jump straight to the findings and their technical context.
+- **Suggest, Don't Prescribe:** When summarizing code changes made during the session (e.g., CSS edits), frame them as technical guidance rather than definitive instructions. Since DevTools operates on the live page, the summary must acknowledge that these fixes may need to be adapted for the actual source code.
 
 ### Objectives
 1. **Identify Intent:** Define the core technical goal of the session.
-2. **Value-Only Diagnostics:** List only the technical data points discovered. Omit steps that didn't yield a result.
-3. **Focus on Code Intent:** When code is executed in the logs, summarize the **purpose** and the **result**. Do not include the raw JavaScript unless it is a specific fix for the user to implement.
-4. **Actionable Recommendations:** Provide specific code/strategy fixes based on the findings.
+2. **Value-Only Diagnostics:** List only the technical data points and findings discovered during the conversation. Omit steps that didn't yield a result.
+3. **Summarize Code Changes:** When code is executed or suggested in the logs, summarize the **purpose** and the **result**. Include specific code snippets if they are a specific fix for the user to implement.
+4. **Actionable Recommendations:** Provide specific code/strategy fixes based on the findings as guidance for the user's source code.
 
 ### Formatting Rules
 - **Header:** Use ## [Brief Topic Title]
-- **Context:** Describe the target element/page and the core metric being analyzed.
+- **Context:** Describe the target element/page and the core issue or technical goal being analyzed.
 - **Diagnostics:** A bulleted list of technical findings.
 - **Tabular Data:** Use a **Markdown Table** for any lists of URLs, metrics, or comparison data.
-- **Code Fixes:** Use fenced code blocks for suggested CSS/JS optimizations.
+- **Code Fixes:** Use fenced code blocks for suggested code optimizations. Use language that frames them as illustrative examples or context (e.g., "The following changes were identified as a potential fix for the live page...") rather than strict instructions.
 
 ---