chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/models/ai_assistance/AiConversation.ts

@@ -31,6 +31,7 @@ import {StorageAgent} from './agents/StorageAgent.js';
 import {StylingAgent} from './agents/StylingAgent.js';
 import {AiAgent2} from './AiAgent2.js';
 import {AiHistoryStorage, ConversationType, type SerializedConversation} from './AiHistoryStorage.js';
+import {isContextSelectionEnabled} from './AiUtils.js';
 import type {ChangeManager} from './ChangeManager.js';
 import {AccessibilityContext} from './contexts/AccessibilityContext.js';
 import {DOMNodeContext} from './contexts/DOMNodeContext.js';
@@ -106,7 +107,7 @@ export class AiConversation {
 
   #aidaClient: Host.AidaClient.AidaClient;
   #changeManager: ChangeManager|undefined;
-  #origin?: string;
+  #origin?: string|SDK.SecurityOrigin.SecurityOrigin;
   #navigationOccurredDuringRun = false;
 
   #contexts: Array<ConversationContext<unknown>> = [];
@@ -180,7 +181,7 @@ export class AiConversation {
     return this.history.length === 0;
   }
 
-  #setOriginIfEmpty(newOrigin: string|undefined): void {
+  #setOriginIfEmpty(newOrigin: string|SDK.SecurityOrigin.SecurityOrigin|undefined): void {
     if (!this.#origin) {
       this.#origin = newOrigin;
     }
@@ -189,7 +190,7 @@ export class AiConversation {
   setContext(updateContext: ConversationContext<unknown>|null): void {
     if (!updateContext) {
       this.#contexts = [];
-      if (isAiAssistanceContextSelectionAgentEnabled()) {
+      if (isContextSelectionEnabled()) {
         this.#updateAgent(ConversationType.NONE);
       }
 
@@ -198,7 +199,7 @@ export class AiConversation {
 
     this.#contexts = [updateContext];
 
-    if (isAiAssistanceContextSelectionAgentEnabled()) {
+    if (isContextSelectionEnabled()) {
       if (updateContext instanceof FileContext) {
         this.#updateAgent(ConversationType.FILE);
       } else if (updateContext instanceof DOMNodeContext) {
@@ -365,11 +366,23 @@ export class AiConversation {
       return;
     }
 
-    const isTransitioningFromStorage = this.#type === ConversationType.STORAGE && type !== ConversationType.STORAGE;
-    const history = isTransitioningFromStorage ? [] : this.#filterHistoryForNewAgent();
-
+    const previousType = this.#type;
     this.#type = type;
 
+    // In AI Architecture V2, DevTools uses a single unified agent (AiAgent2) that
+    // dynamically loads skills on demand. Reusing the existing agent instance across
+    // context changes preserves its loaded activeSkills and declared tools so the model
+    // does not need to re-learn skills it already acquired earlier in the conversation.
+    if (Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled && this.#agent instanceof AiAgent2) {
+      return;
+    }
+
+    // In legacy V1 architecture, agents are recreated when switching conversation types.
+    // Discard conversation history when transitioning away from Storage to prevent
+    // sensitive data (e.g. cookies or storage items) from leaking into subsequent agent queries.
+    const isTransitioningFromStorage = previousType === ConversationType.STORAGE && type !== ConversationType.STORAGE;
+    const history = isTransitioningFromStorage ? [] : this.#filterHistoryForNewAgent();
+
     const options = {
       aidaClient: this.#aidaClient,
       serverSideLoggingAllowed: isAiAssistanceServerSideLoggingAllowed(),
@@ -531,7 +544,7 @@ export class AiConversation {
   }
 
   get origin(): string|undefined {
-    return this.#origin;
+    return this.#origin instanceof SDK.SecurityOrigin.SecurityOrigin ? this.#origin.siteId() : this.#origin;
   }
 
   get type(): ConversationType {
@@ -543,11 +556,11 @@ export class AiConversation {
       return {blocked: true};
     }
     if (this.#origin) {
-      return {origin: this.#origin};
+      return {origin: this.origin};
     }
     this.#origin = getPrimaryPageOrigin(this.#targetManager);
 
-    return {origin: this.#origin};
+    return {origin: this.origin};
   };
 }
 
@@ -561,10 +574,6 @@ function isAiAssistanceServerSideLoggingAllowed(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }
 
-function isAiAssistanceContextSelectionAgentEnabled(): boolean {
-  return Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceContextSelectionAgent?.enabled);
-}
-
 function getPrimaryPageOrigin(
     targetManager: SDK.TargetManager.TargetManager,
     ): Platform.DevToolsPath.UrlString|undefined {

package/front_end/models/ai_assistance/AiHistoryStorage.ts

@@ -37,7 +37,7 @@ export interface SerializedImage {
 const DEFAULT_MAX_STORAGE_SIZE = 50 * 1024 * 1024;
 export const MAX_RECENT_PROMPTS_COUNT = 20;
 export const MAX_CONVERSATIONS_COUNT = 50;
-export const RECENT_PROMPTS_SIZE_LIMIT = 100 * 1024;
+export const RECENT_PROMPTS_SIZE_LIMIT: number = 100 * 1024;
 
 export const enum Events {
   HISTORY_DELETED = 'AiHistoryDeleted',
@@ -57,7 +57,7 @@ export class AiHistoryStorage extends Common.ObjectWrapper.ObjectWrapper<EventTy
   constructor(
       // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       settings: Common.Settings.Settings = Common.Settings.Settings.instance(),
-      maxStorageSize = DEFAULT_MAX_STORAGE_SIZE,
+      maxStorageSize: number = DEFAULT_MAX_STORAGE_SIZE,
   ) {
     super();
     this.#historySetting = settings.createSetting('ai-assistance-history-entries', []);

package/front_end/models/ai_assistance/AiUtils.ts

@@ -123,6 +123,22 @@ export function isGeminiBranding(): boolean {
   return !!Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled;
 }
 
+/**
+ * Returns true if context selection / dynamic context switching is enabled.
+ *
+ * In the legacy V1 architecture, this corresponds to the `ContextSelectionAgent`,
+ * which dynamically routes conversations and allows changing the active context.
+ * In the unified V2 architecture (`AiAgent2`), dynamic context selection is natively
+ * supported across the single agent instance.
+ *
+ * This bridge function checks either flag during the transition phase and can be
+ * removed in the future when V2 ships permanently and the V1 architecture is removed.
+ */
+export function isContextSelectionEnabled(): boolean {
+  return Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceContextSelectionAgent?.enabled) ||
+      Boolean(Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled);
+}
+
 /**
  * Preconditions determined entirely on the DevTools frontend side (e.g. Incognito
  * mode or age restrictions) that prevent AI assistance features from running.

package/front_end/models/ai_assistance/EvaluateAction.ts

@@ -108,7 +108,7 @@ export class EvaluateAction {
       returnByValue: false,
       allowUnsafeEvalBlockedByCSP: false,
       throwOnSideEffect,
-      userGesture: true,
+      userGesture: false,
       awaitPromise: true,
       arguments: args.map(remoteObject => {
         return {objectId: remoteObject.objectId};

package/front_end/models/ai_assistance/README.md

@@ -127,7 +127,7 @@ npm start -- --browser=canary
 or
 
 ```
-/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=file://$(realpath out/Fast/gen/front_end)
+/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
 ```
 
 ### Enable debug logs

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

@@ -85,8 +85,8 @@ If the user asks a question that requires an investigation of a problem, use thi
  * instance for a new conversation.
  */
 export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_ACCESSIBILITY_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_ACCESSIBILITY_AGENT;
   readonly #lighthouseRecording?:
       (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
 
@@ -253,7 +253,6 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
         return await executeJsTool.handler(
             args,
             {
-              conversationContext: this.context ?? null,
               changeManager: this.#changes,
               createExtensionScope: this.#createExtensionScope.bind(this),
               execJs: this.#execJs,

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

@@ -205,7 +205,7 @@ export abstract class ConversationContext<T> {
     return true;
   }
 
-  getOrigin(): string {
+  getOrigin(): string|SDK.SecurityOrigin.SecurityOrigin {
     return extractContextOrigin(this.getURL());
   }
 
@@ -221,15 +221,31 @@ export abstract class ConversationContext<T> {
    * @param establishedOrigin The origin that the current conversation is locked to.
    * If undefined, the conversation has not yet been locked to an origin.
    */
-  isOriginAllowed(establishedOrigin: string|undefined): boolean {
+  isOriginAllowed(establishedOrigin: string|SDK.SecurityOrigin.SecurityOrigin|undefined): boolean {
     const origin = this.getOrigin();
+
+    if (origin instanceof SDK.SecurityOrigin.SecurityOrigin) {
+      if (origin.isOpaque()) {
+        return false;
+      }
+      if (!establishedOrigin) {
+        return true;
+      }
+      const established = establishedOrigin instanceof SDK.SecurityOrigin.SecurityOrigin ?
+          establishedOrigin :
+          SDK.SecurityOrigin.SecurityOrigin.create(establishedOrigin);
+      return origin.isSameOriginWith(established);
+    }
+
     // If no origin is established yet, this context will be the one to lock the conversation.
     // Opaque origins are never allowed to be used as context.
     if (!establishedOrigin) {
       return !isOpaqueOrigin(origin);
     }
     // Only allow data that matches the origin the conversation is already locked to.
-    return areOriginsEquivalent(origin, establishedOrigin);
+    const establishedString =
+        establishedOrigin instanceof SDK.SecurityOrigin.SecurityOrigin ? establishedOrigin.siteId() : establishedOrigin;
+    return areOriginsEquivalent(origin, establishedString);
   }
 
   /**
@@ -505,14 +521,9 @@ export abstract class AiAgent<T> {
 
   readonly #sessionId: string;
   readonly #aidaClient: Host.AidaClient.AidaClient;
-  /**
-   * Whether server-side logging is permitted by the system policy (based on
-   * user preferences, feature flags, or branding configurations).
-   */
-  readonly #serverSideLoggingAllowed: boolean;
   /**
    * Tracks the dynamic runtime state of logging. Even if logging is allowed
-   * by policy, tools can temporarily deactivate this to avoid logging sensitive data.
+   * by policy, tools or sensitive contexts can deactivate this to avoid logging sensitive data.
    */
   #serverSideLoggingActive: boolean;
   readonly confirmSideEffect: typeof Promise.withResolvers;
@@ -548,7 +559,6 @@ export abstract class AiAgent<T> {
     if (Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled) {
       serverSideLoggingAllowed = false;
     }
-    this.#serverSideLoggingAllowed = serverSideLoggingAllowed;
     this.#serverSideLoggingActive = serverSideLoggingAllowed;
     this.#sessionId = opts.sessionId ?? crypto.randomUUID();
     this.confirmSideEffect = opts.confirmSideEffectForTest ?? (() => Promise.withResolvers());
@@ -603,16 +613,14 @@ export abstract class AiAgent<T> {
   }
 
   /**
-   * Toggles whether server-side logging is active.
-   * Note that logging can only be activated if it was allowed by policy/configuration
-   * at startup (i.e., `#serverSideLoggingAllowed` is true).
+   * Disables server-side logging for the remainder of this agent instance's lifetime.
+   *
+   * Logging deactivation is irreversible for the session. Conversation history
+   * accumulates across turns; re-enabling logging later would leak sensitive
+   * data from prior turns to AIDA.
    */
-  protected setServerSideLoggingActive(active: boolean): void {
-    if (active && this.#serverSideLoggingAllowed) {
-      this.#serverSideLoggingActive = true;
-    } else {
-      this.#serverSideLoggingActive = false;
-    }
+  protected disableServerSideLogging(): void {
+    this.#serverSideLoggingActive = false;
   }
 
   popPendingMultimodalInput(): MultimodalInput|undefined {
@@ -794,9 +802,9 @@ export abstract class AiAgent<T> {
           multimodalInput?: MultimodalInput,
           ): AsyncGenerator<ResponseData, void, void> {
     await options.selected?.refresh();
-    if (options.selected) {
-      this.context = options.selected;
-    }
+    // Reset context on each run so cleared selections (`null`) do not leave
+    // stale context references on long-lived agent instances (e.g. `AiAgent2`).
+    this.context = options.selected ?? undefined;
     await this.preRun();
 
     const enhancedQuery = await this.enhanceQuery(initialQuery, options.selected, multimodalInput?.type);
@@ -1043,9 +1051,11 @@ export abstract class AiAgent<T> {
         sideEffectConfirmationPromiseWithResolvers.resolve(false);
       }
 
-      options?.signal?.addEventListener('abort', () => {
+      const onAbort = (): void => {
         sideEffectConfirmationPromiseWithResolvers.resolve(false);
-      }, {once: true});
+      };
+
+      options?.signal?.addEventListener('abort', onAbort, {once: true});
 
       yield {
         type: ResponseType.SIDE_EFFECT,
@@ -1053,7 +1063,12 @@ export abstract class AiAgent<T> {
         description: result.description,
       };
 
-      const approvedRun = await sideEffectConfirmationPromiseWithResolvers.promise;
+      let approvedRun = false;
+      try {
+        approvedRun = await sideEffectConfirmationPromiseWithResolvers.promise;
+      } finally {
+        options?.signal?.removeEventListener('abort', onAbort);
+      }
       if (!approvedRun) {
         yield {
           type: ResponseType.ACTION,

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

@@ -88,8 +88,8 @@ export interface ContextSelectionAgentOptions extends AgentOptions {
  * instance for a new conversation.
  */
 export class ContextSelectionAgent extends AiAgent<never> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_CONTEXT_SELECTION_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_CONTEXT_SELECTION_AGENT;
   get userTier(): string|undefined {
     // TODO: Make this depend on variable.
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
@@ -550,7 +550,8 @@ export class ContextSelectionAgent extends AiAgent<never> {
   }
 
   static lastSourceId = 0;
-  static uiSourceCodeId = new WeakMap<Workspace.UISourceCode.UISourceCode, number>();
+  static uiSourceCodeId: WeakMap<Workspace.UISourceCode.UISourceCode, number> =
+      new WeakMap<Workspace.UISourceCode.UISourceCode, number>();
   /**
    * This is a heuristic algorithm that gets all the source files coming from the
    * network and assigns unique ids to be linked from the LLM Markdown response.

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

@@ -78,8 +78,8 @@ MDN Web Docs: JavaScript Functions: https://developer.mozilla.org/en-US/docs/Web
  * instance for a new conversation.
  */
 export class FileAgent extends AiAgent<Workspace.UISourceCode.UISourceCode> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_FILE_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_FILE_AGENT;
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.userTier;
   }

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

@@ -71,8 +71,8 @@ This request aims to retrieve a list of products matching the search query "lapt
  * instance for a new conversation.
  */
 export class NetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkRequest> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_NETWORK_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_NETWORK_AGENT;
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsAiAssistanceNetworkAgent?.userTier;
   }

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

@@ -209,7 +209,7 @@ export interface PerformanceAgentOptions extends AgentOptions {
  * instance for a new conversation.
  */
 export class PerformanceAgent extends AiAgent<AgentFocus> {
-  readonly preamble = preamble;
+  readonly preamble: string = preamble;
   readonly #tracker: Tracing.FreshRecording.Tracker;
   readonly #networkLog: Logs.NetworkLog.NetworkLog;
 

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

@@ -79,7 +79,9 @@ const MAX_TARGET_ORIGINS = 100;
 
 function resolveTargetOrigins(context?: ConversationContext<StorageItem>, origins?: string[]): string[] {
   const primaryOrigin = context?.getOrigin();
-  const rawList = (origins && origins.length > 0) ? origins : (primaryOrigin ? [primaryOrigin] : []);
+  const primaryString =
+      primaryOrigin instanceof SDK.SecurityOrigin.SecurityOrigin ? primaryOrigin.siteId() : primaryOrigin;
+  const rawList = (origins && origins.length > 0) ? origins : (primaryString ? [primaryString] : []);
   const uniqueOrigins = Array.from(new Set(rawList));
   return uniqueOrigins.slice(0, MAX_TARGET_ORIGINS);
 }
@@ -102,8 +104,8 @@ interface CookieDetails {
 }
 
 export class StorageAgent extends AiAgent<StorageItem> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_STORAGE_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_STORAGE_AGENT;
 
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
@@ -202,7 +204,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async args => {
-        this.setServerSideLoggingActive(false);
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -288,7 +290,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async (args, options) => {
-        this.setServerSideLoggingActive(false);
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -388,7 +390,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async args => {
-        this.setServerSideLoggingActive(false);
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -448,7 +450,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async (args, options) => {
-        this.setServerSideLoggingActive(false);
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -618,9 +620,9 @@ export class StorageAgent extends AiAgent<StorageItem> {
   protected override async preRun(): Promise<void> {
     const item = this.context?.getItem();
     if (item instanceof CookieItem && Boolean(item.name)) {
-      this.setServerSideLoggingActive(false);
+      this.disableServerSideLogging();
     } else if (item instanceof DOMStorageItem && Boolean(item.key)) {
-      this.setServerSideLoggingActive(false);
+      this.disableServerSideLogging();
     }
   }
 
@@ -660,8 +662,8 @@ export class StorageAgent extends AiAgent<StorageItem> {
  * @param storageKey Optional. If specified, resolves only the partition exactly matching this unique key, bypassing origin comparison.
  */
 
-export async function getCookiesForDomain(
-    target: SDK.Target.Target, origin: string): Promise<SDK.Cookie.Cookie[]|null> {
+export async function getCookiesForDomain(target: SDK.Target.Target,
+                                          origin: string): Promise<SDK.Cookie.Cookie[]|null> {
   const cookieModel = target.model(SDK.CookieModel.CookieModel);
   if (!cookieModel) {
     return null;

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

@@ -31,7 +31,7 @@ Content:
   "function_declarations": [
     {
       "name": "getStyles",
-      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** An element uid is a number, not a selector.\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.\n**CRITICAL** You MUST provide a specific list of CSS property names. Do not use generic values like \"all\" or \"*\".",
+      "description": "Retrieves computed and authored CSS styles for one or more elements by their backend node IDs (uids).\n\n**CRITICAL** An element uid is a number, not a selector.\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.\n**CRITICAL** You MUST provide a specific list of CSS property names. Do not use generic values like \"all\" or \"*\".",
       "parameters": {
         "type": 6,
         "description": "",
@@ -78,7 +78,7 @@ Content:
         "properties": {
           "code": {
             "type": 1,
-            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* To return data, define a top-level `data` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to `data`.\n* If you modify styles on an element, ALWAYS call the pre-defined global `async setElementStyles(el: Element, styles: object)` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.\n* **CRITICAL** Only get styles that might be relevant to the user request.\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Consider that `data` variable from the previous function calls are not available in a new function call.\n* **CRITICAL** Keep code concise (max 40 lines and 2,500 characters). Split complex logic into multiple steps.\n* **CRITICAL** Network requests (e.g., fetch, XMLHttpRequest) are disabled and cannot be made.\n\nFor example, the code to change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get overlapping elements:\n\n```\nconst data = {\n  overlappingElements: Array.from(document.querySelectorAll('*'))\n    .filter(el => {\n      const rect = el.getBoundingClientRect();\n      const popupRect = $0.getBoundingClientRect();\n      return (\n        el !== $0 &&\n        rect.left < popupRect.right &&\n        rect.right > popupRect.left &&\n        rect.top < popupRect.bottom &&\n        rect.bottom > popupRect.top\n      );\n    })\n    .map(el => ({\n      tagName: el.tagName,\n      id: el.id,\n      className: el.className,\n      zIndex: window.getComputedStyle(el)['z-index']\n    }))\n};\n```\n"
+            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* To return data, define a top-level `data` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to `data`.\n* $0 refers to the currently selected DOM node (or document body if none selected).\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Variables from previous function calls are not available in subsequent calls.\n* **CRITICAL** Keep code concise (max 40 lines and 2,500 characters). Split complex logic into multiple steps.\n* **CRITICAL** Network requests (e.g., fetch, XMLHttpRequest) are disabled and cannot be made.\n\nFor example, to query DOM elements:\n\n```\nconst data = {\n  title: document.title,\n  elementText: $0?.textContent?.trim(),\n  childCount: $0?.children.length,\n};\n```\n"
           },
           "explanation": {
             "type": 1,

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

@@ -4,7 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as Root from '../../../core/root/root.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {ExtensionScope} from '../ExtensionScope.js';
 import {AI_ASSISTANCE_CSS_CLASS_NAME} from '../injected.js';
@@ -94,15 +94,16 @@ const MULTIMODAL_ENHANCEMENT_PROMPTS: Record<MultimodalInputType, string> = {
   [MultimodalInputType.UPLOADED_IMAGE]: promptForUploadedImage + considerationsForMultimodalInputEvaluation,
 };
 
-export const AI_ASSISTANCE_FILTER_REGEX = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
+// eslint-disable-next-line @typescript-eslint/no-inferrable-types
+export const AI_ASSISTANCE_FILTER_REGEX: string = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
 
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
 export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_STYLING_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_STYLING_AGENT;
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
   }
@@ -153,9 +154,11 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
           return {error: 'Error: Could not find the currently selected element.'};
         }
         return await getStylesTool.handler(args, {
-          conversationContext: context,
           getTarget: () => this.targetManager.primaryPageTarget() ?? context.getItem().domModel().target(),
-          getEstablishedOrigin: () => context.getOrigin(),
+          getEstablishedOrigin: () => {
+            const origin = context.getOrigin();
+            return origin instanceof SDK.SecurityOrigin.SecurityOrigin ? origin.siteId() : origin;
+          },
         });
       },
     });
@@ -171,7 +174,6 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       handler: (args, options) => executeJsTool.handler(
           args,
           {
-            conversationContext: this.context ?? null,
             changeManager: this.#changes,
             createExtensionScope: this.#createExtensionScope.bind(this),
             execJs: this.#execJs,

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -38,9 +38,13 @@ import * as AICallTree from './performance/AICallTree.js';
 import * as AIContext from './performance/AIContext.js';
 import * as AIQueries from './performance/AIQueries.js';
 import * as PerformanceAnnotations from './PerformanceAnnotations.js';
+import * as Skill from './skills/Skill.js';
+import * as SkillRegistry from './skills/SkillRegistry.js';
 import * as StorageItem from './StorageItem.js';
+import * as CookieUtils from './tools/CookieUtils.js';
 import * as DOMStorageUtils from './tools/DOMStorageUtils.js';
 import * as ExecuteJavaScript from './tools/ExecuteJavaScript.js';
+import * as GetCookieValues from './tools/GetCookieValues.js';
 import * as GetDetailedCallTree from './tools/GetDetailedCallTree.js';
 import * as GetElementAccessibilityDetails from './tools/GetElementAccessibilityDetails.js';
 import * as GetFunctionCode from './tools/GetFunctionCode.js';
@@ -49,11 +53,13 @@ import * as GetLighthouseAudits from './tools/GetLighthouseAudits.js';
 import * as GetNetworkRequestDetails from './tools/GetNetworkRequestDetails.js';
 import * as GetResourceContent from './tools/GetResourceContent.js';
 import * as GetSourceContent from './tools/GetSourceContent.js';
+import * as GetStorageBreakdown from './tools/GetStorageBreakdown.js';
 import * as GetStorageValues from './tools/GetStorageValues.js';
 import * as GetStyles from './tools/GetStyles.js';
 import * as GetTraceEventByKey from './tools/GetTraceEventByKey.js';
 import * as GetTraceMainThreadSummary from './tools/GetTraceMainThreadSummary.js';
 import * as GetTraceNetworkSummary from './tools/GetTraceNetworkSummary.js';
+import * as ListCookies from './tools/ListCookies.js';
 import * as ListNetworkRequests from './tools/ListNetworkRequests.js';
 import * as ListPageOrigins from './tools/ListPageOrigins.js';
 import * as ListSources from './tools/ListSources.js';
@@ -82,6 +88,7 @@ export {
   ChangeManager,
   ContextSelectionAgent,
   ConversationSummary,
+  CookieUtils,
   Debug,
   DOMNodeContext,
   DOMStorageUtils,
@@ -91,6 +98,7 @@ export {
   FileAgent,
   FileContext,
   FileFormatter,
+  GetCookieValues,
   GetDetailedCallTree,
   GetElementAccessibilityDetails,
   GetFunctionCode,
@@ -99,6 +107,7 @@ export {
   GetNetworkRequestDetails,
   GetResourceContent,
   GetSourceContent,
+  GetStorageBreakdown,
   GetStorageValues,
   GetStyles,
   GetTraceEventByKey,
@@ -106,6 +115,7 @@ export {
   GetTraceNetworkSummary,
   Injected,
   LighthouseFormatter,
+  ListCookies,
   ListNetworkRequests,
   ListPageOrigins,
   ListSources,
@@ -122,6 +132,8 @@ export {
   ResolveDevtoolsNodePath,
   RunLighthouse,
   SelectTraceEventByKey,
+  Skill,
+  SkillRegistry,
   StorageAgent,
   StorageContext,
   StorageItem,

package/front_end/models/ai_assistance/contexts/AccessibilityContext.ts

@@ -3,7 +3,11 @@
 // found in the LICENSE file.
 
 import type * as LHModel from '../../lighthouse/lighthouse.js';
-import {type ContextDetail, ConversationContext} from '../agents/AiAgent.js';
+import {
+  type AiWidget,
+  type ContextDetail,
+  ConversationContext,
+} from '../agents/AiAgent.js';
 import {LighthouseFormatter} from '../data_formatters/LighthouseFormatter.js';
 
 export class AccessibilityContext extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
@@ -60,4 +64,15 @@ export class AccessibilityContext extends ConversationContext<LHModel.ReporterTy
       },
     ];
   }
+
+  override async getWidgets(): Promise<AiWidget[]> {
+    return [
+      {
+        name: 'LIGHTHOUSE_REPORT',
+        data: {
+          report: this.#lh,
+        },
+      },
+    ];
+  }
 }

package/front_end/models/ai_assistance/contexts/FileContext.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Bindings from '../../bindings/bindings.js';
 import type * as Workspace from '../../workspace/workspace.js';
 import {type ContextDetail, ConversationContext} from '../agents/AiAgent.js';
@@ -18,6 +19,11 @@ export class FileContext extends ConversationContext<Workspace.UISourceCode.UISo
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
   }
 
+  override getOrigin(): string|SDK.SecurityOrigin.SecurityOrigin {
+    const fallbackOrigin = super.getOrigin();
+    return this.#file.project()?.securityOrigin?.() ?? fallbackOrigin;
+  }
+
   override getURL(): string {
     return this.#file.url();
   }