chrome-devtools-frontend 1.0.1642845 → 1.0.1643099

package/front_end/models/ai_assistance/ChangeManager.ts

@@ -9,8 +9,6 @@ import type * as Protocol from '../../generated/protocol.js';
 
 export interface Change {
   groupId: string;
-  // Optional turn ID to group changes from the same turn.
-  turnId?: number;
   // Optional about where in the source the selector was defined.
   sourceLocation?: string;
   // Selector used by the page or a simple selector as the fallback.
@@ -104,7 +102,6 @@ export class ChangeManager {
       // it currently causes crashes in the Styles tab when duplicate selectors exist (crbug.com/393515428).
       // This workaround avoids that crash.
       existingChange.groupId = change.groupId;
-      existingChange.turnId = change.turnId;
     } else {
       changes.push({
         ...change,
@@ -126,11 +123,11 @@ export class ChangeManager {
         .join('\n\n');
   }
 
-  getChangedNodesForGroupId(groupId: string, turnId?: number): Protocol.DOM.BackendNodeId[] {
+  getChangedNodesForGroupId(groupId: string): Protocol.DOM.BackendNodeId[] {
     const nodes = new Set<Protocol.DOM.BackendNodeId>();
     for (const changes of this.#stylesheetChanges.values()) {
       for (const change of changes) {
-        if (change.groupId === groupId && change.backendNodeId && (turnId === undefined || change.turnId === turnId)) {
+        if (change.groupId === groupId && change.backendNodeId) {
           nodes.add(change.backendNodeId);
         }
       }

package/front_end/models/ai_assistance/{agents/ConversationSummaryAgent.ts → ConversationSummary.ts}

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../../core/host/host.js';
-import * as Root from '../../../core/root/root.js';
+import * as Host from '../../core/host/host.js';
+import * as Root from '../../core/root/root.js';
 
-import {AiAgent, type ContextResponse, ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
+import {runOneShotPrompt} from './AiUtils.js';
 
 const preamble = `### Role
 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.
@@ -98,90 +98,53 @@ color: red;
 - Professional, objective, and dense.
 - Past tense for actions; Present tense for technical facts.`;
 
-export class ConversationSummaryContext extends ConversationContext<string> {
-  #conversation: string;
-  constructor(conversation: string) {
-    super();
-    this.#conversation = conversation;
-  }
-
-  override getURL(): string {
-    return 'devtools://ai-assistance';
-  }
-
-  getItem(): string {
-    return this.#conversation;
-  }
-
-  override getTitle(): string {
-    return 'Conversation';
-  }
+export interface ConversationSummaryOptions {
+  aidaClient: Host.AidaClient.AidaClient;
+  serverSideLoggingEnabled?: boolean;
 }
 
 /**
- * An agent that takes a full conversation between a user and an agent in markdown
+ * A class that takes a full conversation between a user and an agent in markdown
  * format and produces a succinct summary of the conversation.
  *
  * This summary is designed to be read by a local agent in the user's IDE and it
  * will be used to help apply fixes to the user's local codebase based on the
  * debugging information the devtools agent found.
- *
- * This agent is not intended to be used directly by users in the AI Assistance
- * panel when chatting with DevTools AI.
  */
-export class ConversationSummaryAgent extends AiAgent<string> {
-  override preamble = preamble;
+export class ConversationSummary {
+  readonly #aidaClient: Host.AidaClient.AidaClient;
+  readonly #serverSideLoggingEnabled: boolean;
 
-  get clientFeature(): Host.AidaClient.ClientFeature {
-    return Host.AidaClient.ClientFeature.CHROME_CONVERSATION_SUMMARY_AGENT;
+  constructor(options: ConversationSummaryOptions) {
+    this.#aidaClient = options.aidaClient;
+    this.#serverSideLoggingEnabled = options.serverSideLoggingEnabled ?? false;
   }
 
-  get userTier(): string|undefined {
-    // TODO(b/491772868): tidy up userTier & feature flags in the backend.
-    return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
-  }
+  async summarizeConversation(conversation: string): Promise<string> {
+    const enhancedQuery = `Summarize the following conversation:\n\n${conversation}`;
 
-  get options(): RequestOptions {
     // TODO(b/491772868): tidy up userTier & feature flags in the backend.
     const temperature = Root.Runtime.hostConfig.devToolsFreestyler?.temperature;
     const modelId = Root.Runtime.hostConfig.devToolsFreestyler?.modelId;
+    const userTier = Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
 
-    return {
+    const resultText = await runOneShotPrompt({
+      aidaClient: this.#aidaClient,
+      preamble,
+      query: enhancedQuery,
+      clientFeature: Host.AidaClient.ClientFeature.CHROME_CONVERSATION_SUMMARY_AGENT,
       temperature,
       modelId,
-    };
-  }
+      userTier,
+      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
+    });
 
-  async * handleContextDetails(context: ConversationContext<string>|null): AsyncGenerator<ContextResponse, void, void> {
-    if (!context) {
-      return;
+    if (!resultText) {
+      throw new Error('Failed to summarize conversation');
     }
 
-    yield {
-      type: ResponseType.CONTEXT,
-      details: [
-        {
-          title: 'Conversation transcript',
-          text: context.getItem(),
-        },
-      ],
-    };
-  }
-
-  override async enhanceQuery(query: string, context: ConversationContext<string>|null): Promise<string> {
-    const conversation = context ? context.getItem() : query;
-    return `Summarize the following conversation:\n\n${conversation}`;
-  }
-
-  async summarizeConversation(conversation: string): Promise<string> {
-    const context = new ConversationSummaryContext(conversation);
-    const response = await Array.fromAsync(this.run('', {selected: context}));
-    const lastResponse = response.at(-1);
-    if (lastResponse && lastResponse.type === ResponseType.ANSWER && lastResponse.complete === true) {
-      const disclaimer =
-          '*Note: The code fixes and findings above were identified on a live page in DevTools. When applying them to your codebase, please adapt them to your project\'s specific technical stack (e.g., Tailwind CSS classes, CSS modules, framework components) rather than applying them as literal CSS overrides.*';
-      return `${lastResponse.text.trim()}\n\n${disclaimer}`;
-    }
-    throw new Error('Failed to summarize conversation');
+    const disclaimer =
+        '*Note: The code fixes and findings above were identified on a live page in DevTools. When applying them to your codebase, please adapt them to your project\'s specific technical stack (e.g., Tailwind CSS classes, CSS modules, framework components) rather than applying them as literal CSS overrides.*';
+    return `${resultText.trim()}\n\n${disclaimer}`;
   }
 }

package/front_end/models/ai_assistance/ExtensionScope.ts

@@ -34,7 +34,6 @@ export class ExtensionScope {
                     }) => Promise<void>> = [];
   #changeManager: ChangeManager;
   #agentId: string;
-  #turnId?: number;
   /** Don't use directly use the getter */
   #frameId?: Protocol.Page.FrameId|null;
   /** Don't use directly use the getter */
@@ -42,12 +41,11 @@ export class ExtensionScope {
 
   readonly #bindingMutex = new Common.Mutex.Mutex();
 
-  constructor(changes: ChangeManager, agentId: string, selectedNode: SDK.DOMModel.DOMNode|null, turnId?: number) {
+  constructor(changes: ChangeManager, agentId: string, selectedNode: SDK.DOMModel.DOMNode|null) {
     this.#changeManager = changes;
     const frameId = selectedNode?.frameId();
     const target = selectedNode?.domModel().target();
     this.#agentId = agentId;
-    this.#turnId = turnId;
     this.#target = target;
     this.#frameId = frameId;
   }
@@ -357,7 +355,6 @@ export class ExtensionScope {
         const sanitizedStyles = await this.sanitizedStyleChanges(context.selector, arg.styles);
         const styleChanges = await this.#changeManager.addChange(cssModel, this.frameId, {
           groupId: this.#agentId,
-          turnId: this.#turnId,
           sourceLocation: context.sourceLocation,
           selector: context.selector,
           simpleSelector: context.simpleSelector,

package/front_end/models/ai_assistance/{agents/PerformanceAnnotationsAgent.ts → PerformanceAnnotations.ts}

@@ -2,21 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../../core/host/host.js';
-import * as Root from '../../../core/root/root.js';
-import type {AICallTree} from '../performance/AICallTree.js';
-import type {AgentFocus} from '../performance/AIContext.js';
-
-import {AiAgent, type ContextResponse, type ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
-import {PerformanceTraceContext} from './PerformanceAgent.js';
-
-/**
- * Preamble clocks in at ~970 tokens.
- *   The prose is around 4.5 chars per token.
- * The data can be as bad as 1.8 chars per token
- *
- * Check token length in https://aistudio.google.com/
- */
+import * as Host from '../../core/host/host.js';
+import * as Root from '../../core/root/root.js';
+
+import {runOneShotPrompt} from './AiUtils.js';
+import type {AICallTree} from './performance/AICallTree.js';
+
 const callTreePreamble = `You are an expert performance analyst embedded within Chrome DevTools.
 You meticulously examine web application behavior captured by the Chrome DevTools Performance Panel and Chrome tracing.
 You will receive a structured text representation of a call tree, derived from a user-selected call frame within a performance trace's flame chart.
@@ -79,80 +70,6 @@ The 'calculatePosition' function, taking 80ms, is a potential bottleneck.
 Consider optimizing the position calculation logic or reducing the frequency of calls to improve animation performance.
 `;
 
-export class PerformanceAnnotationsAgent extends AiAgent<AgentFocus> {
-  override preamble = callTreePreamble;
-
-  get clientFeature(): Host.AidaClient.ClientFeature {
-    return Host.AidaClient.ClientFeature.CHROME_PERFORMANCE_ANNOTATIONS_AGENT;
-  }
-
-  get userTier(): string|undefined {
-    return Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.userTier;
-  }
-
-  get options(): RequestOptions {
-    const temperature = Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.temperature;
-    const modelId = Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.modelId;
-
-    return {
-      temperature,
-      modelId,
-    };
-  }
-
-  async *
-      handleContextDetails(context: ConversationContext<AgentFocus>|null): AsyncGenerator<ContextResponse, void, void> {
-    if (!context) {
-      return;
-    }
-
-    const focus = context.getItem();
-    if (!focus.callTree) {
-      throw new Error('unexpected context');
-    }
-
-    const callTree = focus.callTree;
-
-    yield {
-      type: ResponseType.CONTEXT,
-      details: [
-        {
-          title: 'Selected call tree',
-          text: callTree.serialize(),
-        },
-      ],
-    };
-  }
-
-  override async enhanceQuery(query: string, context: ConversationContext<AgentFocus>|null): Promise<string> {
-    if (!context) {
-      return query;
-    }
-
-    const focus = context.getItem();
-    if (!focus.callTree) {
-      throw new Error('unexpected context');
-    }
-
-    const callTree = focus.callTree;
-    const contextString = callTree.serialize();
-    return `${contextString}\n\n# User request\n\n${query}`;
-  }
-
-  /**
-   * Used in the Performance panel to automatically generate a label for a selected entry.
-   */
-  async generateAIEntryLabel(callTree: AICallTree): Promise<string> {
-    const context = PerformanceTraceContext.fromCallTree(callTree);
-    const response = await Array.fromAsync(this.run(AI_LABEL_GENERATION_PROMPT, {selected: context}));
-    const lastResponse = response.at(-1);
-    if (lastResponse && lastResponse.type === ResponseType.ANSWER && lastResponse.complete === true) {
-      return lastResponse.text.trim();
-    }
-    throw new Error('Failed to generate AI entry label');
-  }
-}
-
 const AI_LABEL_GENERATION_PROMPT = `## Instruction:
 Generate a concise label (max 60 chars, single line) describing the *user-visible effect* of the selected call tree's activity, based solely on the provided call tree data.
 
@@ -168,3 +85,44 @@ Generate a concise label (max 60 chars, single line) describing the *user-visibl
 - Only include third-party script names if their identification is highly confident.
 - Very important: Only output the 60 character label text, your response will be used in full to show to the user as an annotation in the timeline.
 `;
+
+export interface PerformanceAnnotationsOptions {
+  aidaClient: Host.AidaClient.AidaClient;
+  serverSideLoggingEnabled?: boolean;
+}
+
+export class PerformanceAnnotations {
+  readonly #aidaClient: Host.AidaClient.AidaClient;
+  readonly #serverSideLoggingEnabled: boolean;
+
+  constructor(options: PerformanceAnnotationsOptions) {
+    this.#aidaClient = options.aidaClient;
+    this.#serverSideLoggingEnabled = options.serverSideLoggingEnabled ?? false;
+  }
+
+  async generateAIEntryLabel(callTree: AICallTree): Promise<string> {
+    const contextString = callTree.serialize();
+    const query = `${contextString}\n\n# User request\n\n${AI_LABEL_GENERATION_PROMPT}`;
+
+    const temperature = Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.temperature;
+    const modelId = Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.modelId;
+    const userTier = Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.userTier;
+
+    const resultText = await runOneShotPrompt({
+      aidaClient: this.#aidaClient,
+      preamble: callTreePreamble,
+      query,
+      clientFeature: Host.AidaClient.ClientFeature.CHROME_PERFORMANCE_ANNOTATIONS_AGENT,
+      temperature,
+      modelId,
+      userTier,
+      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
+    });
+
+    if (!resultText) {
+      throw new Error('Failed to generate AI entry label');
+    }
+
+    return resultText.trim();
+  }
+}

package/front_end/models/ai_assistance/README.md

@@ -38,6 +38,14 @@ This work is currently in progress and behind a feature flag.
 To support dynamic loading of skills, we generate JavaScript files from Markdown files containing skill definitions.
 We use a nested `BUILD.gn` file in the `skills/` subdirectory specifically for this purpose. This ensures that GN's `target_gen_dir` points to `gen/front_end/models/ai_assistance/skills/`, placing the generated `.skill.js` files in the same relative structure as their source `.md` files. This allows TypeScript files in the `skills/` directory (like `map.ts`) to import the generated files using relative paths (e.g., `./styling.skill.js`) seamlessly.
 
+### Tools and ToolRegistry
+
+To support skills requiring execution of code or fetching page state (like computed styles), the architecture defines **Tools** in the `tools/` directory.
+
+- **BaseTool**: A non-generic base interface capturing tool metadata (`name`, `description`, `parameters`). This acts as the type-erased representation for generic registry storage and fallback string lookups.
+- **Tool**: A generic interface extending `BaseTool` that binds argument types (`Args`) to the schema `parameters` and the `handler()` method. This ensures compile-time safety and alignment inside each tool implementation.
+- **ToolRegistry**: A static registry (`ToolRegistry`) storing instantiated tools. It uses TypeScript function overloading and generic lookups (`static get<K extends keyof typeof TOOLS>(name: K): typeof TOOLS[K]`) to return the precise class type of each tool, preventing type-erasure and escape-hatches (such as `any` or `as unknown` type assertions) at integration points like `AiAgent.ts`.
+
 ## Performance specific documentation
 
 ### `TimelineUtils.AIContext.AgentFocus`

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

@@ -120,17 +120,15 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
   #javascriptExecutor: JavascriptExecutor;
   #changes: ChangeManager;
   #createExtensionScope: CreateExtensionScopeFunction;
-  #currentTurnId = 0;
 
   constructor(opts: ExecuteJsAgentOptions) {
     super(opts);
     this.#lighthouseRecording = opts.lighthouseRecording;
     this.#changes = opts.changeManager || new ChangeManager();
     this.#execJs = opts.execJs ?? executeJsCode;
-    this.#createExtensionScope =
-        opts.createExtensionScope ?? ((changes: ChangeManager) => {
-          return new ExtensionScope(changes, this.sessionId, this.#getDocumentBodyNode(), this.#currentTurnId);
-        });
+    this.#createExtensionScope = opts.createExtensionScope ?? ((changes: ChangeManager) => {
+                                   return new ExtensionScope(changes, this.sessionId, this.#getDocumentBodyNode());
+                                 });
     this.#javascriptExecutor = new JavascriptExecutor(
         {
           executionMode: this.executionMode,
@@ -162,7 +160,6 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
   }
 
   protected override async preRun(): Promise<void> {
-    this.#currentTurnId++;
     const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     const domModel = target?.model(SDK.DOMModel.DOMModel);
     // We need to ensure the document is requested so that #getDocumentBodyNode()
@@ -235,85 +232,103 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
   }
 
   #declareFunctions(): void {
-    this.declareFunction('executeJavaScript', executeJavaScriptFunction(this.#javascriptExecutor));
+    const isImported = this.context?.getItem().isImported;
 
-    this.declareFunction<{explanation: string}, {audits: string}>('runAccessibilityAudits', {
+    this.declareFunction<{categoryId: LHModel.RunTypes.CategoryId}, {audits: string}>('getLighthouseAudits', {
       description:
-          'Triggers new Lighthouse accessibility audits in snapshot mode. Use this if the user has made changes to the page and you want to re-evaluate the accessibility audits.',
+          'Returns the audits for a specific Lighthouse category. Use this to get more information about the performance, accessibility, best-practices, or seo audits.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
         nullable: false,
         properties: {
-          explanation: {
+          categoryId: {
             type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'Explain why you want to run new audits.',
+            description:
+                'The category of audits to retrieve. Valid values are "performance", "accessibility", "best-practices", "seo".',
             nullable: false,
           },
         },
-        required: ['explanation'],
+        required: ['categoryId'],
       },
       displayInfoFromArgs: params => {
         return {
-          title: i18n.i18n.lockedString('Running accessibility audits'),
-          thought: params.explanation,
-          action: 'runAccessibilityAudits()'
+          title: i18n.i18n.lockedString(`Getting Lighthouse audits for ${params.categoryId}`),
+          action: `getLighthouseAudits('${params.categoryId}')`
         };
       },
       handler: async params => {
-        debugLog('Function call: runAccessibilityAudits', params);
-        if (!this.#lighthouseRecording) {
-          return {error: 'Lighthouse recording is not available.'};
-        }
-        const report = await this.#lighthouseRecording({
-          mode: 'snapshot',
-          categoryIds: ['accessibility'],
-          isAIControlled: true,
-        });
+        debugLog('Function call: getLighthouseAudits', params);
+        const report = this.context?.getItem();
         if (!report) {
-          return {error: 'Failed to run accessibility audits.'};
+          return {error: 'No Lighthouse report available.'};
         }
-        const audits = new LighthouseFormatter().audits(report, 'accessibility');
+        const audits = new LighthouseFormatter().audits(report, params.categoryId);
         return {
           result: {audits},
-          widgets: [{name: 'LIGHTHOUSE_REPORT', data: {report, snapshotReport: true}}],
+          widgets: [{name: 'LIGHTHOUSE_REPORT', data: {report}}],
         };
       }
     });
 
-    this.declareFunction<{categoryId: LHModel.RunTypes.CategoryId}, {audits: string}>('getLighthouseAudits', {
+    const executeJsDeclaration = executeJavaScriptFunction(this.#javascriptExecutor);
+    this.declareFunction('executeJavaScript', {
+      ...executeJsDeclaration,
+      handler: async (params, options) => {
+        if (isImported) {
+          return {
+            error: 'Cannot use this tool on an imported file.',
+          };
+        }
+        return await executeJsDeclaration.handler(params, options);
+      },
+    });
+
+    this.declareFunction<{explanation: string}, {audits: string}>('runAccessibilityAudits', {
       description:
-          'Returns the audits for a specific Lighthouse category. Use this to get more information about the performance, accessibility, best-practices, or seo audits.',
+          'Triggers new Lighthouse accessibility audits in snapshot mode. Use this if the user has made changes to the page and you want to re-evaluate the accessibility audits.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
         nullable: false,
         properties: {
-          categoryId: {
+          explanation: {
             type: Host.AidaClient.ParametersTypes.STRING,
-            description:
-                'The category of audits to retrieve. Valid values are "performance", "accessibility", "best-practices", "seo".',
+            description: 'Explain why you want to run new audits.',
             nullable: false,
           },
         },
-        required: ['categoryId'],
+        required: ['explanation'],
       },
       displayInfoFromArgs: params => {
         return {
-          title: i18n.i18n.lockedString(`Getting Lighthouse audits for ${params.categoryId}`),
-          action: `getLighthouseAudits('${params.categoryId}')`
+          title: i18n.i18n.lockedString('Running accessibility audits'),
+          thought: params.explanation,
+          action: 'runAccessibilityAudits()'
         };
       },
       handler: async params => {
-        debugLog('Function call: getLighthouseAudits', params);
-        const report = this.context?.getItem();
+        debugLog('Function call: runAccessibilityAudits', params);
+        if (isImported) {
+          return {
+            error: 'Cannot use this tool on an imported file.',
+          };
+        }
+        if (!this.#lighthouseRecording) {
+          return {error: 'Lighthouse recording is not available.'};
+        }
+        const report = await this.#lighthouseRecording({
+          mode: 'snapshot',
+          categoryIds: ['accessibility'],
+          isAIControlled: true,
+        });
         if (!report) {
-          return {error: 'No Lighthouse report available.'};
+          return {error: 'Failed to run accessibility audits.'};
         }
-        const audits = new LighthouseFormatter().audits(report, params.categoryId);
+        const audits = new LighthouseFormatter().audits(report, 'accessibility');
         return {
           result: {audits},
-          widgets: [{name: 'LIGHTHOUSE_REPORT', data: {report}}],
+          widgets: [{name: 'LIGHTHOUSE_REPORT', data: {report, snapshotReport: true}}],
         };
       }
     });
@@ -363,6 +378,11 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
       },
       handler: async params => {
         debugLog('Function call: getStyles', params);
+        if (isImported) {
+          return {
+            error: 'Cannot use this tool on an imported file.',
+          };
+        }
         const node = await this.#resolvePathToNode(params.path);
         if (!node) {
           return {error: `Could not find the element with path: ${params.path}`};
@@ -433,6 +453,11 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
       },
       handler: async params => {
         debugLog('Function call: getElementAccessibilityDetails', params);
+        if (isImported) {
+          return {
+            error: 'Cannot use this tool on an imported file.',
+          };
+        }
         const node = await this.#resolvePathToNode(params.path);
         if (!node) {
           return {error: `Could not find the element with path: ${params.path}`};

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

@@ -226,6 +226,22 @@ export abstract class ConversationContext<T> {
   async getSuggestions(): Promise<ConversationSuggestions|undefined> {
     return;
   }
+
+  /**
+   * Returns a detailed description of the context item for inclusion in the AI model prompt.
+   * Currently only used by AiAgent2.
+   */
+  async getPromptDetails(): Promise<string|null> {
+    return null;
+  }
+
+  /**
+   * Returns a list of context details to display to the user in the UI.
+   * Currently only used by AiAgent2.
+   */
+  async getUserFacingDetails(): Promise<[ContextDetail, ...ContextDetail[]]|null> {
+    return null;
+  }
 }
 
 export interface ComputedStyleAiWidget {
@@ -316,6 +332,13 @@ export interface SourceFilesListAiWidget {
   };
 }
 
+export interface NetworkRequestsListAiWidget {
+  name: 'NETWORK_REQUESTS_LIST';
+  data: {
+    requests: SDK.NetworkRequest.NetworkRequest[],
+  };
+}
+
 export interface LighthouseReportAiWidget {
   name: 'LIGHTHOUSE_REPORT';
   data: {
@@ -350,10 +373,10 @@ export interface SourceCodeAiWidget {
   };
 }
 
-export type AiWidget =
-    ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|PerformanceTraceAiWidget|
-    PerfInsightAiWidget|TimelineRangeSummaryAiWidget|BottomUpTreeAiWidget|SourceFileAiWidget|LighthouseReportAiWidget|
-    TimelineEventSummaryAiWidget|NetworkRequestGeneralHeadersAiWidget|SourceCodeAiWidget|SourceFilesListAiWidget;
+export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
+    PerformanceTraceAiWidget|PerfInsightAiWidget|TimelineRangeSummaryAiWidget|BottomUpTreeAiWidget|SourceFileAiWidget|
+    LighthouseReportAiWidget|TimelineEventSummaryAiWidget|NetworkRequestGeneralHeadersAiWidget|SourceCodeAiWidget|
+    SourceFilesListAiWidget|NetworkRequestsListAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,
@@ -447,7 +470,7 @@ export abstract class AiAgent<T> {
 
   readonly #sessionId: string;
   readonly #aidaClient: Host.AidaClient.AidaClient;
-  readonly #serverSideLoggingEnabled: boolean;
+  #serverSideLoggingEnabled: boolean;
   readonly confirmSideEffect: typeof Promise.withResolvers;
   readonly #functionDeclarations = new Map<string, FunctionDeclaration<Record<string, unknown>, unknown>>();
   readonly #allowedOrigin?: () => AllowedOriginResult;
@@ -526,6 +549,10 @@ export abstract class AiAgent<T> {
   clearCache(): void {
   }
 
+  protected disableServerSideLogging(): void {
+    this.#serverSideLoggingEnabled = false;
+  }
+
   popPendingMultimodalInput(): MultimodalInput|undefined {
     return undefined;
   }
@@ -677,6 +704,10 @@ export abstract class AiAgent<T> {
     this.#functionDeclarations.clear();
   }
 
+  /**
+   * Executed immediately after the current context is populated with the selected
+   * context and before the request is built.
+   */
   protected async preRun(): Promise<void> {
   }
 
@@ -689,11 +720,11 @@ export abstract class AiAgent<T> {
           },
           multimodalInput?: MultimodalInput,
           ): AsyncGenerator<ResponseData, void, void> {
-    await this.preRun();
     await options.selected?.refresh();
     if (options.selected) {
       this.context = options.selected;
     }
+    await this.preRun();
 
     const enhancedQuery = await this.enhanceQuery(initialQuery, options.selected, multimodalInput?.type);
     Host.userMetrics.freestylerQueryLength(enhancedQuery.length);

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

@@ -129,6 +129,17 @@ Content:
         "required": [],
         "properties": {}
       }
+    },
+    {
+      "name": "analyzeStorage",
+      "description": "Selects the page storage. Use this when asked about browser storage (localStorage, sessionStorage, cookies) and issues related to these.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": true,
+        "required": [],
+        "properties": {}
+      }
     }
   ],
   "options": {},