chrome-devtools-frontend 1.0.1646286 → 1.0.1649421

package/front_end/generated/protocol.ts

@@ -2918,6 +2918,28 @@ export namespace CSS {
     specificity?: Specificity;
   }
 
+  /**
+   * Contribution of an individual simple selector to specificity.
+   */
+  export interface SpecificityComponent {
+    /**
+     * The simple selector text that contributes to specificity.
+     */
+    text: string;
+    /**
+     * The a component contribution.
+     */
+    a: integer;
+    /**
+     * The b component contribution.
+     */
+    b: integer;
+    /**
+     * The c component contribution.
+     */
+    c: integer;
+  }
+
   /**
    * Specificity:
    * https://drafts.csswg.org/selectors/#specificity-rules
@@ -2936,6 +2958,10 @@ export namespace CSS {
      * The c component, which represents the number of type selectors and pseudo-elements.
      */
     c: integer;
+    /**
+     * Per-simple-selector contributions used to explain this specificity.
+     */
+    components?: SpecificityComponent[];
   }
 
   /**

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -26,6 +26,7 @@ import {ToolRegistry} from './tools/ToolRegistry.js';
 
 const SKILL_DISPLAY_NAMES: Record<SkillName, string> = {
   styling: 'CSS and styling',
+  network: 'Network requests',
 };
 
 const preamble = `You are the most advanced unified AI assistant integrated into Chrome DevTools.
@@ -61,7 +62,6 @@ export class AiAgent2 extends AiAgent<unknown> {
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DEVTOOLS_V2_AGENT;
   readonly userTier = 'TESTERS';
 
-  #skillsInjected = false;
   #changes = new ChangeManager();
   #execJs: typeof executeJsCode;
   readonly #allowedOrigin?: () => AllowedOriginResult;
@@ -78,9 +78,12 @@ export class AiAgent2 extends AiAgent<unknown> {
     this.#execJs = opts.execJs ?? executeJsCode;
     this.#allowedOrigin = opts.allowedOrigin;
     this.#declaredTools.add('learnSkills');
-    const skillsList = Object.keys(SKILLS).join(', ');
     this.declareFunction<{skills: SkillName[]}>('learnSkills', {
-      description: `Load skills to help with the task. Available skills: ${skillsList}.`,
+      description: () => {
+        const unloadedSkills = Object.keys(SKILLS).filter(name => !this.#activeSkills.has(name as SkillName));
+        return `Loads the specified skills to gain access to their specialized tools. Call this if the user's query relates to an available skill that is not yet loaded. Available skills: ${
+            unloadedSkills.join(', ')}.`;
+      },
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: 'Parameters for learning skills',
@@ -130,16 +133,18 @@ QUERY: ${query}`;
       }
     }
 
-    if (this.#skillsInjected) {
+    const unloadedSkills =
+        Object.entries(this.getSkills()).filter(([name]) => !this.#activeSkills.has(name as SkillName));
+    if (unloadedSkills.length === 0) {
       return enhancedQuery;
     }
-    this.#skillsInjected = true;
-    const skillsManifest =
-        Object.entries(this.getSkills()).map(([name, skill]) => `- ${name}: ${skill.description}`).join('\n');
-    return `Available skills:
+
+    const skillsManifest = unloadedSkills.map(([name, skill]) => `- ${name}: ${skill.description}`).join('\n');
+    return `Available skills that are not yet loaded:
 ${skillsManifest}
 
-You must call \`learnSkills\` to load a skill before you can use it.
+You must call \`learnSkills\` to load a skill before you can use its tools.
+If the user's request requires a skill that is not currently loaded, you MUST call \`learnSkills\` to load that skill first, instead of attempting to solve the query using tools from other skills.
 
 User query: ${enhancedQuery}`;
   }

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

@@ -338,6 +338,13 @@ export interface NetworkRequestsListAiWidget {
     requests: SDK.NetworkRequest.NetworkRequest[],
   };
 }
+export interface NetworkTrackAiWidget {
+  name: 'NETWORK_TRACK';
+  data: {
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+    bounds: Trace.Types.Timing.TraceWindowMicro,
+  };
+}
 
 export interface LighthouseReportAiWidget {
   name: 'LIGHTHOUSE_REPORT';
@@ -376,7 +383,7 @@ export interface SourceCodeAiWidget {
 export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
     PerformanceTraceAiWidget|PerfInsightAiWidget|TimelineRangeSummaryAiWidget|BottomUpTreeAiWidget|SourceFileAiWidget|
     LighthouseReportAiWidget|TimelineEventSummaryAiWidget|NetworkRequestGeneralHeadersAiWidget|SourceCodeAiWidget|
-    SourceFilesListAiWidget|NetworkRequestsListAiWidget;
+    SourceFilesListAiWidget|NetworkRequestsListAiWidget|NetworkTrackAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,
@@ -410,7 +417,7 @@ export interface FunctionDeclaration<Args extends Record<string, unknown>, Retur
    * Description of function, this is send to the LLM
    * to explain what will the function do.
    */
-  description: string;
+  description: string|(() => string);
   /**
    * JSON schema like representation of the parameters
    * the function needs to be called with.
@@ -582,7 +589,7 @@ export abstract class AiAgent<T> {
     for (const [name, definition] of this.#functionDeclarations.entries()) {
       declarations.push({
         name,
-        description: definition.description,
+        description: typeof definition.description === 'function' ? definition.description() : definition.description,
         parameters: definition.parameters,
       });
     }

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

@@ -1232,6 +1232,13 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         this.#cacheFunctionResult(focus, key, summary);
         return {
           result: {summary},
+          widgets: [{
+            name: 'NETWORK_TRACK',
+            data: {
+              parsedTrace,
+              bounds,
+            },
+          }],
         };
       },
 

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

@@ -14,6 +14,7 @@ import {
   AiAgent,
   type ContextResponse,
   ConversationContext,
+  type ConversationSuggestions,
   type RequestOptions,
   ResponseType,
 } from './AiAgent.js';
@@ -97,6 +98,50 @@ export class StorageContext extends ConversationContext<StorageItem> {
     }
     return `Storage: ${this.getOrigin()}`;
   }
+
+  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
+    if (this.#item instanceof CookieItem) {
+      if (this.#item.name) {
+        return [
+          {
+            title: 'Why is this cookie set?',
+            jslogContext: 'storage-cookie',
+          },
+          {
+            title: 'Explain the value of this cookie',
+            jslogContext: 'storage-cookie',
+          },
+        ];
+      }
+      return [
+        {
+          title: 'Explain the cookies set by this page',
+          jslogContext: 'storage-cookie',
+        },
+      ];
+    }
+    if (this.#item instanceof DOMStorageItem) {
+      if (this.#item.key) {
+        return [
+          {
+            title: 'What is the purpose of this storage entry?',
+            jslogContext: 'storage-domstorage',
+          },
+          {
+            title: 'Explain the value of this storage entry',
+            jslogContext: 'storage-domstorage',
+          },
+        ];
+      }
+      return [
+        {
+          title: 'Explain these storage items',
+          jslogContext: 'storage-domstorage',
+        },
+      ];
+    }
+    return undefined;
+  }
 }
 
 // Maximum character length of values allowed.

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -42,7 +42,9 @@ import * as AIQueries from './performance/AIQueries.js';
 import * as PerformanceAnnotations from './PerformanceAnnotations.js';
 import * as StorageItem from './StorageItem.js';
 import * as ExecuteJavaScript from './tools/ExecuteJavaScript.js';
+import * as GetNetworkRequestDetails from './tools/GetNetworkRequestDetails.js';
 import * as GetStyles from './tools/GetStyles.js';
+import * as ListNetworkRequests from './tools/ListNetworkRequests.js';
 import * as Tool from './tools/Tool.js';
 import * as ToolRegistry from './tools/ToolRegistry.js';
 
@@ -70,12 +72,14 @@ export {
   FileAgent,
   FileContext,
   FileFormatter,
+  GetNetworkRequestDetails,
   GetStyles,
   GreenDevAgent,
   GreenDevAgentAntigravityCliSocketClient,
   GreenDevAgentGeminiCliSocketClient,
   Injected,
   LighthouseFormatter,
+  ListNetworkRequests,
   NetworkAgent,
   NetworkRequestFormatter,
   PatchAgent,

package/front_end/models/ai_assistance/skills/Skill.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 // This will become a union type as we add more skills (e.g. 'styling' | 'network').
-export type SkillName = 'styling';
+export type SkillName = 'styling'|'network';
 
 export interface Skill {
   name: SkillName;

package/front_end/models/ai_assistance/skills/SkillRegistry.ts

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {skill as networkSkill} from './network.skill.js';
 import type {Skill, SkillName} from './Skill.js';
 import {skill as stylingSkill} from './styling.skill.js';
 
 export const SKILLS: Record<SkillName, Skill> = {
   styling: stylingSkill,
+  network: networkSkill,
 };

package/front_end/models/ai_assistance/skills/network.md

@@ -0,0 +1,16 @@
+---
+name: network
+description: Analyzing network traffic, network requests, HTTP/HTTPS headers, status codes, payload details, timing/performance, and request sizes.
+allowed-tools:
+  - listNetworkRequests
+  - getNetworkRequestDetails
+---
+You are the most advanced network request debugging assistant integrated into Chrome DevTools.
+Provide a comprehensive analysis of network requests, focusing on areas crucial for a software engineer. Your analysis should include:
+* Briefly explain the purpose of the request based on the URL, method, and any relevant headers or payload.
+* Analyze timing information to identify potential bottlenecks or areas for optimization.
+* Highlight potential issues indicated by the status code.
+
+# Considerations
+* If the response payload or request payload contains sensitive data, redact or generalize it in your analysis to ensure privacy.
+* Tailor your explanations and suggestions to the specific context of the request and the technologies involved (if discernible from the provided details).

package/front_end/models/ai_assistance/skills/styling.md

@@ -1,6 +1,6 @@
 ---
 name: styling
-description: Helping with CSS and styling
+description: CSS, styling, layouts, positioning, computed styles, DOM tree structure, and page styles.
 allowed-tools:
   - executeJavaScript
   - getStyles

package/front_end/models/ai_assistance/tools/GetNetworkRequestDetails.ts

@@ -0,0 +1,118 @@
+// 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.
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Logs from '../../logs/logs.js';
+import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
+import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
+import {isOpaqueOrigin} from '../AiOrigins.js';
+import {getRequestContextOrigin} from '../contexts/RequestContext.js';
+import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
+
+import {
+  type BaseToolCapability,
+  type OriginLockCapability,
+  type Tool,
+  type ToolArgs,
+  ToolName,
+} from './Tool.js';
+const UIStringsNotTranslate = {
+  gettingNetworkRequestDetails: 'Getting network request details',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+export interface GetNetworkRequestDetailsArgs extends ToolArgs {
+  id: string;
+}
+
+/**
+ * A tool that retrieves detailed information about a specific network request.
+ * The details include request/response headers, status code, timings, and the response body.
+ */
+export class GetNetworkRequestDetailsTool implements
+    Tool<GetNetworkRequestDetailsArgs, unknown, BaseToolCapability&OriginLockCapability> {
+  readonly name = ToolName.GET_NETWORK_REQUEST_DETAILS;
+  readonly description =
+      'Retrieves the full headers, timing, status, and body details of a specific network request by ID.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof GetNetworkRequestDetailsArgs> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: 'Arguments for retrieving detailed information about a specific network request.',
+    nullable: false,
+    properties: {
+      id: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'The id of the network request to inspect.',
+        nullable: false,
+      },
+    },
+    required: ['id'],
+  };
+
+  displayInfoFromArgs(args: GetNetworkRequestDetailsArgs): {
+    title: string,
+    action: string,
+  } {
+    return {
+      title: lockedString(UIStringsNotTranslate.gettingNetworkRequestDetails),
+      action: `getNetworkRequestDetails(${args.id})`,
+    };
+  }
+
+  /**
+   * Handles the request to retrieve details for a network request by its ID.
+   * Filters by the conversation's established origin to prevent cross-origin data exposure.
+   */
+  async handler(
+      args: GetNetworkRequestDetailsArgs,
+      context: BaseToolCapability&OriginLockCapability,
+      ): Promise<FunctionCallHandlerResult<unknown>> {
+    // A conversation is locked to an origin once the first query is made.
+    // We only allow inspecting requests matching the conversation's established origin.
+    const origin = context.getEstablishedOrigin();
+
+    // Opaque origins are never allowed to be used as context.
+    if (origin && isOpaqueOrigin(origin)) {
+      return {
+        error: 'Opaque origin not allowed',
+      };
+    }
+
+    const request = Logs.NetworkLog.NetworkLog.instance().requests().find(req => {
+      if (req.requestId() !== args.id) {
+        return false;
+      }
+
+      // To prevent cross-origin prompt injection attacks, HAR-imported requests
+      // are assigned a virtual origin (e.g., `imported-har://${domain}`) rather than
+      // sharing the origin of live pages.
+      const requestOrigin = getRequestContextOrigin(req);
+
+      // If the conversation is locked to an origin, only allow accessing requests from that origin.
+      return !origin || requestOrigin === origin;
+    });
+
+    if (!request) {
+      return {
+        error: 'No request found',
+      };
+    }
+
+    const calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
+    const formatter = new NetworkRequestFormatter(request, calculator);
+    const formattedDetails = await formatter.formatNetworkRequest();
+
+    return {
+      result: formattedDetails,
+      widgets: [{
+        name: 'NETWORK_REQUEST_GENERAL_HEADERS',
+        data: {
+          request,
+        },
+      }],
+    };
+  }
+}

package/front_end/models/ai_assistance/tools/ListNetworkRequests.ts

@@ -0,0 +1,124 @@
+// 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.
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+import * as Logs from '../../logs/logs.js';
+import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
+import {isOpaqueOrigin} from '../AiOrigins.js';
+import {getRequestContextOrigin} from '../contexts/RequestContext.js';
+
+import {
+  type BaseToolCapability,
+  type OriginLockCapability,
+  type Tool,
+  ToolName,
+} from './Tool.js';
+
+const UIStringsNotTranslate = {
+  listingNetworkRequests: 'Listing network requests',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+interface NetworkRequestSummary {
+  id: string;
+  url: string;
+  statusCode: number;
+  duration: string;
+  transferSize: string;
+}
+
+/**
+ * A tool that lists all network requests recorded by DevTools.
+ * Filters the list by the conversation's established origin to prevent cross-origin data exposure.
+ */
+export class ListNetworkRequestsTool implements
+    Tool<Record<string, never>, unknown, BaseToolCapability&OriginLockCapability> {
+  readonly name = ToolName.LIST_NETWORK_REQUESTS;
+  readonly description = 'Gives a list of network requests including URL, status code, and duration.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<never> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: '',
+    nullable: true,
+    required: [],
+    properties: {},
+  };
+
+  displayInfoFromArgs(): {
+    title: string,
+    action: string,
+  } {
+    return {
+      title: lockedString(UIStringsNotTranslate.listingNetworkRequests),
+      action: 'listNetworkRequests()',
+    };
+  }
+
+  /**
+   * Handles the request to list network requests.
+   * Returns requests matching the conversation's established origin, if set.
+   */
+  async handler(
+      _params: Record<string, never>,
+      context: BaseToolCapability&OriginLockCapability,
+      ): Promise<FunctionCallHandlerResult<unknown>> {
+    const requests: NetworkRequestSummary[] = [];
+    // A conversation is locked to an origin once the first query is made.
+    // We only allow inspecting requests matching the conversation's established origin.
+    const origin = context.getEstablishedOrigin();
+
+    // Opaque origins are never allowed to be used as context.
+    if (origin && isOpaqueOrigin(origin)) {
+      return {
+        error: 'Opaque origin not allowed',
+      };
+    }
+
+    let hasCrossOriginRequest = false;
+    const requestsToShow: SDK.NetworkRequest.NetworkRequest[] = [];
+    for (const request of Logs.NetworkLog.NetworkLog.instance().requests()) {
+      // To prevent cross-origin prompt injection attacks, HAR-imported requests
+      // are assigned a virtual origin (e.g., `imported-har://${domain}`) rather than
+      // sharing the origin of live pages.
+      const requestOrigin = getRequestContextOrigin(request);
+
+      // If the conversation is locked to an origin, skip requests from other origins.
+      if (origin && requestOrigin !== origin) {
+        hasCrossOriginRequest = true;
+        continue;
+      }
+
+      requests.push({
+        id: request.requestId(),
+        url: request.url(),
+        statusCode: request.statusCode,
+        duration: i18n.TimeUtilities.secondsToString(request.duration),
+        transferSize: i18n.ByteUtilities.formatBytesToKb(request.transferSize),
+      });
+      requestsToShow.push(request);
+    }
+
+    if (requests.length === 0) {
+      return {
+        // If there were requests but they were filtered out due to the origin lock,
+        // we ask the user to start a new chat so they can select a request from the other origin.
+        error: hasCrossOriginRequest ? `No requests showing with origin ${origin}. Tell the user to start a new chat` :
+                                       'No requests recorded by DevTools',
+      };
+    }
+
+    return {
+      result: JSON.stringify(requests),
+      widgets: [{
+        name: 'NETWORK_REQUESTS_LIST',
+        data: {
+          requests: requestsToShow,
+        },
+      }],
+    };
+  }
+}

package/front_end/models/ai_assistance/tools/Tool.ts

@@ -87,6 +87,8 @@ export type ToolArgs = Record<string, unknown>;
 export const enum ToolName {
   EXECUTE_JAVASCRIPT = 'executeJavaScript',
   GET_STYLES = 'getStyles',
+  LIST_NETWORK_REQUESTS = 'listNetworkRequests',
+  GET_NETWORK_REQUEST_DETAILS = 'getNetworkRequestDetails',
 }
 
 /**

package/front_end/models/ai_assistance/tools/ToolRegistry.ts

@@ -3,7 +3,9 @@
 // found in the LICENSE file.
 
 import {ExecuteJavaScriptTool} from './ExecuteJavaScript.js';
+import {GetNetworkRequestDetailsTool} from './GetNetworkRequestDetails.js';
 import {GetStylesTool} from './GetStyles.js';
+import {ListNetworkRequestsTool} from './ListNetworkRequests.js';
 import {type AllToolsContext, type Tool, type ToolArgs, ToolName} from './Tool.js';
 
 /**
@@ -17,6 +19,8 @@ import {type AllToolsContext, type Tool, type ToolArgs, ToolName} from './Tool.j
 export const TOOLS = {
   [ToolName.EXECUTE_JAVASCRIPT]: new ExecuteJavaScriptTool(),
   [ToolName.GET_STYLES]: new GetStylesTool(),
+  [ToolName.LIST_NETWORK_REQUESTS]: new ListNetworkRequestsTool(),
+  [ToolName.GET_NETWORK_REQUEST_DETAILS]: new GetNetworkRequestDetailsTool(),
 };
 
 /**