chrome-devtools-frontend 1.0.1642845 → 1.0.1642899

package/SECURITY.md

@@ -22,6 +22,7 @@ Chrome DevTools is a privileged web app running in a sandboxed renderer process,
 * **Legitimate Data Exposure:** Displaying local user data, cookies, tokens, or auth headers within UI panels.
 * **Local Data Persistence:** Saving user-initiated traces, heaps, profiles, or logs to disk.
 * **Correctness & Availability:** Stale, misleading, or missing UI information (classified as functional bugs).
+* **Denial of Service:** Chrome extensions or debug targets that disrupt DevTools' availability, e.g. through performance degradation.
 * **Disabled-by-default Experimental Features:** Experimental features or capabilities that are disabled by default, e.g. requiring a command-line flag to be activated, or a specific runtime setting within DevTools to be manually turned on.
 
 ## Specific Severity Classification Rules (S1–S4)

package/front_end/core/host/UserMetrics.ts

@@ -496,7 +496,8 @@ export enum Action {
   AiCodeGenerationRequestTriggeredFromSources = 205,
   AiCodeCompletionFreCompletedFromConsole = 206,
   AiCodeCompletionFreCompletedFromSources = 207,
-  MAX_VALUE = 208,
+  AiAssistanceOpenedFromStoragePanelFloatingButton = 208,
+  MAX_VALUE = 209,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -196,6 +196,36 @@ function queryMatches(style: CSSStyleDeclaration): boolean {
   return true;
 }
 
+function treeScopeDistance(node: DOMNode, property: CSSProperty): number {
+  if (!property.ownerStyle.parentRule && property.ownerStyle.type !== Type.Inline) {
+    return -1;
+  }
+  const root = node.getTreeRoot();
+  const nodeId = property.ownerStyle.parentRule?.treeScope ?? root?.backendNodeId();
+  if (nodeId === undefined) {
+    return -1;
+  }
+  return distanceToTreeScope(node, nodeId);
+}
+
+/**
+ * Distance from node to parent that is the tree scope. Returns -1 if tree scope is not found.
+ *
+ * @param node The child node to start from.
+ * @param treeScope The tree scope node ID.
+ * @returns The distance to the tree scope node, or -1 if not found.
+ */
+export function distanceToTreeScope(node: DOMNode, treeScope: Protocol.DOM.BackendNodeId): number {
+  let distance = 0;
+  for (let ancestor: DOMNode|null = node; ancestor; ancestor = ancestor.parentNode) {
+    if (ancestor.backendNodeId() === treeScope) {
+      return distance;
+    }
+    distance++;
+  }
+  return -1;
+}
+
 export interface CSSMatchedStylesPayload {
   cssModel: CSSModel;
   node: DOMNode;
@@ -307,7 +337,7 @@ export class CSSMatchedStyles {
   #customHighlightPseudoDOMCascades?: Map<string, DOMInheritanceCascade>;
   #functionRules: CSSFunctionRule[];
   #atRules: CSSAtRule[];
-  #functionRuleMap = new Map<string, CSSFunctionRule>();
+  #functionRuleMap = new Map<string, CSSFunctionRule[]>();
   #environmentVariables: Record<string, string> = {};
 
   static async create(payload: CSSMatchedStylesPayload): Promise<CSSMatchedStyles> {
@@ -381,7 +411,9 @@ export class CSSMatchedStyles {
     }
 
     for (const rule of this.#functionRules) {
-      this.#functionRuleMap.set(rule.functionName().text, rule);
+      const rules = this.#functionRuleMap.get(rule.functionName().text) ?? [];
+      rules.push(rule);
+      this.#functionRuleMap.set(rule.functionName().text, rules);
     }
   }
 
@@ -790,9 +822,25 @@ export class CSSMatchedStyles {
     return this.#registeredPropertyMap.get(name);
   }
 
-  getRegisteredFunction(name: string): string|undefined {
-    const functionRule = this.#functionRuleMap.get(name);
-    return functionRule ? functionRule.nameWithParameters() : undefined;
+  getRegisteredFunction(name: string, sourceProperty: CSSProperty):
+      {treeScopeDistance: number, registeredFunction?: string} {
+    const minTreeScopeDistance = treeScopeDistance(this.#node, sourceProperty);
+    const functionRules = this.#functionRuleMap.get(name) ?? [];
+    let result: {treeScopeDistance: number, registeredFunction?: string} = {treeScopeDistance: -1};
+    for (const functionRule of functionRules) {
+      if (!functionRule.treeScope) {
+        continue;
+      }
+      const distance = distanceToTreeScope(this.#node, functionRule.treeScope);
+      if (distance === -1 || distance < minTreeScopeDistance) {
+        continue;
+      }
+
+      if (result.treeScopeDistance === -1 || distance < result.treeScopeDistance) {
+        result = {registeredFunction: functionRule.nameWithParameters(), treeScopeDistance: distance};
+      }
+    }
+    return result;
   }
 
   functionRules(): CSSFunctionRule[] {
@@ -1045,26 +1093,6 @@ class NodeCascade {
     }
   }
 
-  #treeScopeDistance(property: CSSProperty): number {
-    if (!property.ownerStyle.parentRule && property.ownerStyle.type !== Type.Inline) {
-      return -1;
-    }
-    const root = this.#node.getTreeRoot();
-    const nodeId = property.ownerStyle.parentRule?.treeScope ?? root?.backendNodeId();
-    if (nodeId === undefined) {
-      return -1;
-    }
-
-    let distance = 0;
-    for (let ancestor: DOMNode|null = this.#node; ancestor; ancestor = ancestor.parentNode) {
-      if (ancestor.backendNodeId() === nodeId) {
-        return distance;
-      }
-      distance++;
-    }
-    return -1;
-  }
-
   #needsCascadeContextStep(): boolean {
     if (!this.#node.isInShadowTree()) {
       return false;
@@ -1084,7 +1112,8 @@ class NodeCascade {
     const activeProperty = this.activeProperties.get(canonicalName);
     if (activeProperty?.important && !propertyWithHigherSpecificity.important ||
         activeProperty && this.#needsCascadeContextStep() &&
-            this.#treeScopeDistance(activeProperty) > this.#treeScopeDistance(propertyWithHigherSpecificity)) {
+            treeScopeDistance(this.#node, activeProperty) >
+                treeScopeDistance(this.#node, propertyWithHigherSpecificity)) {
       this.propertiesState.set(propertyWithHigherSpecificity, PropertyState.OVERLOADED);
       return;
     }

package/front_end/core/sdk/CSSRule.ts

@@ -418,6 +418,7 @@ export class CSSFunctionRule extends CSSRule {
         styleSheetId: payload.styleSheetId
       },
       header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: payload.originTreeScopeNodeId
     });
     this.#name = new CSSValue(payload.name);
     this.#parameters = payload.parameters.map(({name}) => name);

package/front_end/core/sdk/DebuggerModel.ts

@@ -535,6 +535,11 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     return this.#scripts.get(scriptId) || null;
   }
 
+  isWasm(scriptId: string): boolean {
+    const script = this.scriptForId(scriptId);
+    return script ? script.isWasm() : false;
+  }
+
   /**
    * Returns all `Script` objects with the same provided `sourceURL`. The
    * resulting array is sorted by time with the newest `Script` in the front.

package/front_end/entrypoints/greendev_floaty/FloatyEntrypoint.ts

@@ -41,7 +41,7 @@ class GreenDevFloaty {
   #playButton!: HTMLButtonElement;
   #node?: SDK.DOMModel.DOMNode;
   #agent?: AiAssistance.GreenDevAgent.GreenDevAgent|AiAssistance.StylingAgent.StylingAgent;
-  #nodeContext?: AiAssistance.StylingAgent.NodeContext;
+  #nodeContext?: AiAssistance.DOMNodeContext.DOMNodeContext;
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   #syncChannel: BroadcastChannel;
   #isFloatyWindow: boolean;
@@ -341,7 +341,7 @@ class GreenDevFloaty {
             });
       } else {
         this.#agent = new AiAssistance.StylingAgent.StylingAgent({aidaClient});
-        this.#nodeContext = new AiAssistance.StylingAgent.NodeContext(this.#node);
+        this.#nodeContext = new AiAssistance.DOMNodeContext.DOMNodeContext(this.#node);
       }
     }
 
@@ -428,7 +428,8 @@ class GreenDevFloaty {
             'Could not get the backendNodeId for the selected element.';
 
         // --- Get some context information about the selected node ---
-        const elementContext = await AiAssistance.StylingAgent.StylingAgent.describeElement(this.#node);
+        const domNodeContext = new AiAssistance.DOMNodeContext.DOMNodeContext(this.#node);
+        const elementContext = await domNodeContext.describe();
 
         // Now construct the full context.
         const context = `# Page URL

package/front_end/entrypoints/greendev_floaty/greendev_floaty.ts

@@ -20,7 +20,8 @@ import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 
 const {AidaClient} = Host.AidaClient;
 const {ResponseType} = AiAssistance.AiAgent;
-const {NodeContext, StylingAgent} = AiAssistance.StylingAgent;
+const {DOMNodeContext} = AiAssistance.DOMNodeContext;
+const {StylingAgent} = AiAssistance.StylingAgent;
 
 class GreenDevFloaty {
   #chatContainer: HTMLDivElement;
@@ -28,7 +29,7 @@ class GreenDevFloaty {
   #playButton: HTMLButtonElement;
   #node?: SDK.DOMModel.DOMNode;
   #agent?: StylingAgent;
-  #nodeContext?: NodeContext;
+  #nodeContext?: DOMNodeContext;
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   // Switching this to false can help while investigating tool conflicts.
   #highlightNodeOnWindowFocus = false;
@@ -170,7 +171,7 @@ class GreenDevFloaty {
     if (!this.#agent) {
       const aidaClient = new AidaClient();
       this.#agent = new StylingAgent({aidaClient});
-      this.#nodeContext = new NodeContext(this.#node);
+      this.#nodeContext = new DOMNodeContext(this.#node);
     }
 
     this.#addMessage(query, true);

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -9,12 +9,19 @@ import {
   AiAgent,
   type ContextResponse,
   type ConversationContext,
+  type MultimodalInputType,
   type RequestOptions,
   ResponseType
 } from './agents/AiAgent.js';
 import {debugLog} from './debug.js';
 import type {Skill, SkillName} from './skills/Skill.js';
 import {SKILLS} from './skills/SkillRegistry.js';
+import type {Tool} from './tools/Tool.js';
+import {ToolRegistry} from './tools/ToolRegistry.js';
+
+const SKILL_DISPLAY_NAMES: Record<SkillName, string> = {
+  styling: 'CSS and styling',
+};
 
 export class AiAgent2 extends AiAgent<unknown> {
   // TODO: The static preamble is a placeholder and will eventually live server-side.
@@ -29,9 +36,11 @@ export class AiAgent2 extends AiAgent<unknown> {
   }
 
   readonly #activeSkills = new Set<SkillName>();
+  readonly #declaredTools = new Set<string>();
 
   constructor(opts: AgentOptions) {
     super(opts);
+    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}.`,
@@ -51,8 +60,12 @@ export class AiAgent2 extends AiAgent<unknown> {
         required: ['skills'],
       },
       displayInfoFromArgs: args => {
+        const isSingular = args.skills.length === 1;
+        const prefix = isSingular ? 'Learning skill' : 'Learning skills';
+        const names = args.skills.map(name => SKILL_DISPLAY_NAMES[name] ?? name).join(', ');
         return {
-          title: `Learning skills: ${args.skills.join(', ')}`,
+          title: `${prefix}: ${names}`,
+          action: `learnSkills(${args.skills.map(name => `'${name}'`).join(', ')})`,
         };
       },
       handler: async args => {
@@ -62,33 +75,58 @@ export class AiAgent2 extends AiAgent<unknown> {
     });
   }
 
-  override async enhanceQuery(query: string): Promise<string> {
+  override async enhanceQuery(
+      query: string,
+      selected: ConversationContext<unknown>|null = null,
+      // TODO: support multimodal input in AiAgent2.
+      _multimodalInputType?: MultimodalInputType,
+      ): Promise<string> {
+    let enhancedQuery = query;
+    if (selected) {
+      const promptDetails = await selected.getPromptDetails();
+      if (promptDetails) {
+        enhancedQuery = `${promptDetails}
+
+# User request
+
+QUERY: ${query}`;
+      }
+    }
+
     if (this.#skillsInjected) {
-      return query;
+      return enhancedQuery;
     }
     this.#skillsInjected = true;
-    const skillsManifest = Object.entries(SKILLS).map(([name, skill]) => `- ${name}: ${skill.description}`).join('\n');
+    const skillsManifest =
+        Object.entries(this.getSkills()).map(([name, skill]) => `- ${name}: ${skill.description}`).join('\n');
     return `Available skills:
 ${skillsManifest}
 
 You must call \`learnSkills\` to load a skill before you can use it.
 
-User query: ${query}`;
+User query: ${enhancedQuery}`;
   }
 
-  async *
-      handleContextDetails(_select: ConversationContext<unknown>|null): AsyncGenerator<ContextResponse, void, void> {
-    yield {
-      type: ResponseType.CONTEXT,
-      details: [{
-        title: 'Status',
-        text: 'Minimal agent initialized.',
-      }],
-    };
+  override async *
+      handleContextDetails(selected: ConversationContext<unknown>|null): AsyncGenerator<ContextResponse, void, void> {
+    if (selected) {
+      const details = await selected.getUserFacingDetails();
+      if (details) {
+        yield {
+          type: ResponseType.CONTEXT,
+          details,
+        };
+      }
+    }
+  }
+
+  getSkills(): Record<SkillName, Skill> {
+    return SKILLS;
   }
 
   async learnSkill(names: SkillName[]): Promise<string> {
     let response = '';
+    const skills = this.getSkills();
     for (const name of names) {
       debugLog(`AiAgent2: Attempting to load skill ${name}`);
       if (this.#activeSkills.has(name)) {
@@ -97,19 +135,45 @@ User query: ${query}`;
         continue;
       }
 
-      const skillObj: Skill = SKILLS[name];
+      const skillObj: Skill = skills[name];
       if (skillObj) {
         this.#activeSkills.add(name);
         debugLog(`AiAgent2: Skill ${name} loaded successfully`);
         response += `Skill ${name} loaded. Instructions:\n${skillObj.instructions}\n`;
+        for (const toolName of skillObj.allowedTools) {
+          const tool = ToolRegistry.get(toolName);
+          if (tool) {
+            this.#declareTool(tool);
+          }
+        }
       } else {
         debugLog(`AiAgent2: Failed to load skill ${name}`);
-        response += `Failed to load skill ${name}. Valid skills are: ${Object.keys(SKILLS).join(', ')}.\n`;
+        response += `Failed to load skill ${name}. Valid skills are: ${Object.keys(skills).join(', ')}.\n`;
       }
     }
     return response.trim();
   }
 
+  /**
+   * Declares a tool to be available to the agent model, verifying first that
+   * it hasn't already been declared to prevent duplicate declaration errors.
+   */
+  #declareTool(tool: Tool): void {
+    if (this.#declaredTools.has(tool.name)) {
+      debugLog(`AiAgent2: Tool ${tool.name} is already declared`);
+      return;
+    }
+    this.#declaredTools.add(tool.name);
+    this.declareFunction(tool.name, {
+      description: tool.description,
+      parameters: tool.parameters,
+      displayInfoFromArgs: tool.displayInfoFromArgs,
+      handler: args => tool.handler(args, {
+        conversationContext: this.context ?? null,
+      }),
+    });
+  }
+
   get activeSkills(): Set<SkillName> {
     return this.#activeSkills;
   }

package/front_end/models/ai_assistance/AiConversation.ts

@@ -29,10 +29,11 @@ import {FileAgent, FileContext} from './agents/FileAgent.js';
 import {NetworkAgent, RequestContext} from './agents/NetworkAgent.js';
 import {PerformanceAgent, PerformanceTraceContext} from './agents/PerformanceAgent.js';
 import {StorageAgent, StorageContext} from './agents/StorageAgent.js';
-import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
+import {StylingAgent} from './agents/StylingAgent.js';
 import {AiAgent2} from './AiAgent2.js';
 import {AiHistoryStorage, ConversationType, type SerializedConversation} from './AiHistoryStorage.js';
 import type {ChangeManager} from './ChangeManager.js';
+import {DOMNodeContext} from './contexts/DOMNodeContext.js';
 
 export const NOT_FOUND_IMAGE_DATA = '';
 export const CONTEXT_TITLE = 'Analyzing data';
@@ -182,7 +183,7 @@ export class AiConversation {
     if (isAiAssistanceContextSelectionAgentEnabled()) {
       if (updateContext instanceof FileContext) {
         this.#updateAgent(ConversationType.FILE);
-      } else if (updateContext instanceof NodeContext) {
+      } else if (updateContext instanceof DOMNodeContext) {
         this.#updateAgent(ConversationType.STYLING);
       } else if (updateContext instanceof RequestContext) {
         this.#updateAgent(ConversationType.NETWORK);

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

@@ -81,6 +81,12 @@ If the user asks a question that requires an investigation of a problem, use thi
     - [Suggestion 2]
 `;
 
+const SECURITY_WARNING = `**CRITICAL CONSTRAINT**: This Lighthouse report was imported from a file and is static.
+You do NOT have access to the inspected page.
+Tools like \`executeJavaScript\`, \`getStyles\`, or \`runAccessibilityAudits\` are disabled.
+Do NOT attempt to use them or instruct the user that you will use them.
+Rely ONLY on the static report data below.`;
+
 export class AccessibilityContext extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
   #lh: LHModel.ReporterTypes.ReportJSON;
 
@@ -235,85 +241,91 @@ 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', {
+    if (isImported) {
+      return;
+    }
+
+    this.declareFunction('executeJavaScript', executeJavaScriptFunction(this.#javascriptExecutor));
+
+    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 (!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}}],
         };
       }
     });
@@ -510,7 +522,10 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
     if (lhr) {
       this.#declareFunctions();
     }
-    const enhancedQuery = lhr ? `${this.#getInitialPayload(lhr)}\n# User request:\n\n` : '';
+    let enhancedQuery = lhr ? `${this.#getInitialPayload(lhr)}\n# User request:\n\n` : '';
+    if (lhr?.getItem().isImported) {
+      enhancedQuery = `${SECURITY_WARNING}\n\n${enhancedQuery}`;
+    }
     return `${enhancedQuery}${query}`;
   }
 

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 {

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

@@ -13,6 +13,7 @@ import * as NetworkTimeCalculator from '../../network_time_calculator/network_ti
 import type * as Trace from '../../trace/trace.js';
 import * as Workspace from '../../workspace/workspace.js';
 import {isOpaqueOrigin} from '../AiOrigins.js';
+import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 import {debugLog} from '../debug.js';
 
 import {AccessibilityContext} from './AccessibilityAgent.js';
@@ -26,7 +27,6 @@ import {
 import {FileContext} from './FileAgent.js';
 import {RequestContext} from './NetworkAgent.js';
 import {PerformanceTraceContext} from './PerformanceAgent.js';
-import {NodeContext} from './StylingAgent.js';
 
 const lockedString = i18n.i18n.lockedString;
 /**
@@ -469,7 +469,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
         const node = await this.#onInspectElement();
         if (node) {
           return {
-            context: new NodeContext(node),
+            context: new DOMNodeContext(node),
             description: 'User selected an element',
           };
         }