chrome-devtools-frontend 1.0.1684555 → 1.0.1690116

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -20,6 +20,7 @@ import {type ExecuteJsAgentOptions, executeJsCode} from './agents/ExecuteJavascr
 import {ChangeManager} from './ChangeManager.js';
 import {AccessibilityContext} from './contexts/AccessibilityContext.js';
 import {DOMNodeContext} from './contexts/DOMNodeContext.js';
+import {PerformanceTraceContext} from './contexts/PerformanceTraceContext.js';
 import {debugLog} from './debug.js';
 import {ExtensionScope} from './ExtensionScope.js';
 import type {Skill, SkillName} from './skills/Skill.js';
@@ -48,7 +49,7 @@ Your role is to help web developers debug, analyze, and optimize web application
 # Workflow
 1. **Analyze**: Understand the user's intent, the context provided, and what they are trying to achieve.
 2. **Investigate**: Proactively use your learned skills and tools to gather live data. Do not make assumptions or guess without sufficient evidence.
-3. **Analyze**: Explore multiple potential explanations and solutions. Distinguish between the primary root cause and contributing factors.
+3. **Diagnose**: Explore multiple potential explanations and solutions. Distinguish between the primary root cause and contributing factors.
 4. **Respond**: Provide a structured, clear, and actionable response.
 
 # Response Structure
@@ -58,9 +59,14 @@ If the user asks a question that requires an investigation or debugging, use thi
 * **Suggestion(s)**: List actionable solution suggestion(s) in order of impact.
   - Example: "**Suggestion**: [Suggestion]" or "**Suggestions**:" followed by a bulleted list.
 
+# Follow-up Suggestions
+* Output a list of suggested follow-up queries or actions for the user at the very end of your response.
+* The format MUST be SUGGESTIONS: ["suggestion 1", "suggestion 2"] on its own single line.
+* Ensure suggestions are relevant, concise, and helpful next steps for the user.
+
 # Constraints
 * **CRITICAL**: You are a web development assistant. NEVER provide answers to questions of unrelated topics (such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non-web-development topics). If asked about these, respond with: "Sorry, I can't answer that. I'm best at questions about web development and debugging."
-* **CRITICAL**: Do not write full Python programs or other scripts to interact with the environment. Only invoke the allowed tools.
+* **CRITICAL**: Do not write standalone scripts (such as Python or bash) or arbitrary code to interact with the environment. The only way to execute code in the inspected page is via the 'executeJavaScript' tool.
 * **CRITICAL**: Do not expose raw, internal system identifiers (such as database IDs, internal node paths, or event keys) directly to the user. Use descriptive names instead.`;
 
 export interface AiAgent2Options extends ExecuteJsAgentOptions {
@@ -70,9 +76,9 @@ export interface AiAgent2Options extends ExecuteJsAgentOptions {
 
 export class AiAgent2 extends AiAgent<unknown> {
   // TODO: The static preamble is a placeholder and will eventually live server-side.
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DEVTOOLS_V2_AGENT;
-  readonly userTier = 'TESTERS';
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_DEVTOOLS_V2_AGENT;
+  readonly userTier: string = 'TESTERS';
 
   #changes: ChangeManager;
   #execJs: typeof executeJsCode;
@@ -128,7 +134,7 @@ export class AiAgent2 extends AiAgent<unknown> {
     this.#declaredTools.add('learnSkills');
     this.declareFunction<{skills: SkillName[]}>('learnSkills', {
       description: () => {
-        const unloadedSkills = Object.keys(SKILLS).filter(name => !this.#activeSkills.has(name as SkillName));
+        const unloadedSkills = Object.keys(this.getSkills()).filter(name => !this.#activeSkills.has(name as SkillName));
         return `Loads the specified skills to gain access to their specialized tools. Call this ONLY for skills listed under Available skills that are not yet loaded. Do not call this for skills that are already loaded. Available skills that are not yet loaded: ${
             unloadedSkills.join(', ')}.`;
       },
@@ -273,7 +279,6 @@ User query: ${enhancedQuery}`;
       displayInfoFromArgs: tool.displayInfoFromArgs,
       handler: (args, options) => {
         const context: AllToolsCapabilities = {
-          conversationContext: this.context ?? null,
           changeManager: this.#changes,
           createExtensionScope: this.#createExtensionScope.bind(this),
           execJs: this.#execJs,
@@ -283,6 +288,7 @@ User query: ${enhancedQuery}`;
           getEstablishedOrigin: () => this.#getConversationOrigin(),
           getLighthouseReport: () => (this.context instanceof AccessibilityContext ? this.context.getItem() : null),
           runLighthouse: async overrides => await (this.#lighthouseRecording?.(overrides) ?? null),
+          getPerformanceTraceContext: () => (this.context instanceof PerformanceTraceContext ? this.context : null),
           performanceRecordAndReload: this.#performanceRecordAndReload,
           disableLogging: () => {
             this.disableServerSideLogging();

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 (isAiAssistanceContextSelectionEnabled()) {
+      if (isContextSelectionEnabled()) {
         this.#updateAgent(ConversationType.NONE);
       }
 
@@ -198,7 +199,7 @@ export class AiConversation {
 
     this.#contexts = [updateContext];
 
-    if (isAiAssistanceContextSelectionEnabled()) {
+    if (isContextSelectionEnabled()) {
       if (updateContext instanceof FileContext) {
         this.#updateAgent(ConversationType.FILE);
       } else if (updateContext instanceof DOMNodeContext) {
@@ -543,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 {
@@ -555,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};
   };
 }
 
@@ -573,16 +574,6 @@ function isAiAssistanceServerSideLoggingAllowed(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }
 
-/**
- * Returns true if context changes should dynamically update the conversation's
- * agent/type state. Enabled for both the legacy V1 selection agent and the
- * unified V2 architecture.
- */
-function isAiAssistanceContextSelectionEnabled(): boolean {
-  return Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceContextSelectionAgent?.enabled) ||
-      Boolean(Root.Runtime.hostConfig.devToolsAiV2Architecture?.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

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 
 import {debugLog} from './debug.js';
@@ -123,6 +122,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.
@@ -171,15 +186,6 @@ export function getIconName(): string {
   return isGeminiBranding() ? 'spark' : 'smart-assistant';
 }
 
-export function isSameOrigin(url1: Platform.DevToolsPath.UrlString, url2: Platform.DevToolsPath.UrlString): boolean {
-  if (url1.startsWith('data:') || url2.startsWith('data:')) {
-    return url1 === url2;
-  }
-  const origin1 = Common.ParsedURL.ParsedURL.extractOrigin(url1);
-  const origin2 = Common.ParsedURL.ParsedURL.extractOrigin(url2);
-  return origin1 !== '' && origin1 === origin2;
-}
-
 export interface OneShotPromptRequest {
   aidaClient: Host.AidaClient.AidaClient;
   preamble: string;

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

@@ -4,11 +4,9 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as LHModel from '../../lighthouse/lighthouse.js';
-import {isSameOrigin} from '../AiUtils.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {LighthouseFormatter} from '../data_formatters/LighthouseFormatter.js';
 import {debugLog} from '../debug.js';
@@ -85,8 +83,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>;
 
@@ -155,11 +153,15 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
       return;
     }
 
-    const details = await lhr.getUserFacingDetails();
+    const [details, widgets] = await Promise.all([
+      lhr.getUserFacingDetails(),
+      lhr.getWidgets(),
+    ]);
     if (details) {
       yield {
         type: ResponseType.CONTEXT,
         details,
+        widgets,
       };
     }
   }
@@ -183,13 +185,7 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
     }
 
     const mainDocument = domModel.existingDocument();
-    if (!mainDocument) {
-      return null;
-    }
-    const mainDocumentURL = mainDocument.documentURL;
-    const nodeDocumentURL = node.ownerDocument?.documentURL ?? '' as Platform.DevToolsPath.UrlString;
-
-    if (!isSameOrigin(mainDocumentURL, nodeDocumentURL)) {
+    if (!mainDocument || !mainDocument.securityOrigin().isSameOriginWith(node.securityOrigin())) {
       return null;
     }
 
@@ -253,7 +249,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);
   }
 
   /**
@@ -1035,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,
@@ -1045,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;
@@ -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,15 @@ const MULTIMODAL_ENHANCEMENT_PROMPTS: Record<MultimodalInputType, string> = {
   [MultimodalInputType.UPLOADED_IMAGE]: promptForUploadedImage + considerationsForMultimodalInputEvaluation,
 };
 
-export const AI_ASSISTANCE_FILTER_REGEX = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
+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 +153,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 +173,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

@@ -41,8 +41,10 @@ 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';
@@ -51,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';
@@ -84,6 +88,7 @@ export {
   ChangeManager,
   ContextSelectionAgent,
   ConversationSummary,
+  CookieUtils,
   Debug,
   DOMNodeContext,
   DOMStorageUtils,
@@ -93,6 +98,7 @@ export {
   FileAgent,
   FileContext,
   FileFormatter,
+  GetCookieValues,
   GetDetailedCallTree,
   GetElementAccessibilityDetails,
   GetFunctionCode,
@@ -101,6 +107,7 @@ export {
   GetNetworkRequestDetails,
   GetResourceContent,
   GetSourceContent,
+  GetStorageBreakdown,
   GetStorageValues,
   GetStyles,
   GetTraceEventByKey,
@@ -108,6 +115,7 @@ export {
   GetTraceNetworkSummary,
   Injected,
   LighthouseFormatter,
+  ListCookies,
   ListNetworkRequests,
   ListPageOrigins,
   ListSources,

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();
   }