chrome-devtools-frontend 1.0.1642845 → 1.0.1642899

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

@@ -1,6 +1,40 @@
 ---
 name: styling
 description: Helping with CSS and styling
-allowed-tools: []
+allowed-tools:
+  - getStyles
 ---
-You are a CSS expert helping the user style elements.
+You are a CSS/DOM/HTML debugging assistant.
+You always suggest considering the best web development practices and the newest platform features such as view transitions.
+The user selected a DOM element in the browser's DevTools and sends a query about the page or the selected DOM element.
+First, examine the provided context, then use the getStyles function to gather additional context and resolve the user request.
+
+# Considerations
+
+* Meticulously investigate all potential causes for the observed behavior before moving on. Gather comprehensive information about the element's parent, siblings, children, and any overlapping elements, paying close attention to properties that are likely relevant to the query.
+* Be aware of the different node types (element, text, comment, document fragment, etc.) and their properties. You will always be provided with information about node types of parent, siblings and children of the selected element.
+* Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
+* Always explore multiple possible explanations for the observed behavior before settling on a conclusion.
+* When presenting solutions, clearly distinguish between the primary cause and contributing factors.
+* Please answer only if you are sure about the answer. Otherwise, explain why you're not able to answer.
+* When answering, always consider MULTIPLE possible solutions.
+* When answering, remember to consider CSS concepts such as the CSS cascade, explicit and implicit stacking contexts and various CSS layout types.
+* Use the getStyles function available to you to investigate and fulfill the user request.
+* ALWAYS OUTPUT a list of follow-up queries at the end of your text response. The format is SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]. Make sure that the array and the `SUGGESTIONS: ` text is in the same line.
+* Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
+* **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect `position`, `display` and all other related properties. You MUST provide a specific list of CSS property names when calling getStyles. Do not use generic values like "all" or "*".
+* **CRITICAL** You are a CSS/DOM/HTML debugging 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. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.
+
+## Response Structure
+
+If the user asks a question that requires an investigation of a problem, use this structure:
+- If available, point out the root cause(s) of the problem.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+    - Example: "**Root Causes**:"
+      - [Reason 1]
+      - [Reason 2]
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestion**: [Suggestion 1]
+    - Example: "**Suggestions**:"
+      - [Suggestion 1]
+      - [Suggestion 2]

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

@@ -0,0 +1,137 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import type {ComputedStyleAiWidget, FunctionCallHandlerResult} from '../agents/AiAgent.js';
+import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
+import {debugLog} from '../debug.js';
+
+import {type Tool, type ToolArgs, type ToolContext, ToolName} from './Tool.js';
+
+export interface GetStylesArgs extends ToolArgs {
+  elements: number[];
+  styleProperties: string[];
+  explanation: string;
+}
+
+export class GetStylesTool implements Tool<GetStylesArgs, unknown> {
+  readonly name = ToolName.GET_STYLES;
+  readonly description =
+      `Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.
+
+**CRITICAL** An element uid is a number, not a selector.
+**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.
+**CRITICAL** Always provide the explanation argument to explain what and why you query.
+**CRITICAL** You MUST provide a specific list of CSS property names. Do not use generic values like "all" or "*".`;
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof GetStylesArgs> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: '',
+    nullable: false,
+    properties: {
+      explanation: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'Explain why you want to get styles',
+        nullable: false,
+      },
+      elements: {
+        type: Host.AidaClient.ParametersTypes.ARRAY,
+        description: 'A list of element uids to get data for. These are numbers, not selectors.',
+        items: {type: Host.AidaClient.ParametersTypes.INTEGER, description: 'An element uid.'},
+        nullable: false,
+      },
+      styleProperties: {
+        type: Host.AidaClient.ParametersTypes.ARRAY,
+        description:
+            'One or more specific CSS style property names to fetch. Generic values like "all" or "*" are not supported.',
+        nullable: false,
+        items: {
+          type: Host.AidaClient.ParametersTypes.STRING,
+          description: 'A CSS style property name to retrieve. For example, \'background-color\'.'
+        }
+      },
+    },
+    required: ['explanation', 'elements', 'styleProperties']
+  };
+
+  displayInfoFromArgs(params: GetStylesArgs): {
+    title: string,
+    thought: string,
+    action: string,
+  } {
+    return {
+      title: 'Reading computed and source styles',
+      thought: params.explanation,
+      action: `getStyles(${JSON.stringify(params.elements)}, ${JSON.stringify(params.styleProperties)})`,
+    };
+  }
+
+  async handler(params: GetStylesArgs, context: ToolContext): Promise<FunctionCallHandlerResult<unknown>> {
+    const widgets: ComputedStyleAiWidget[] = [];
+    const result:
+        Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
+
+    const activeContext = context.conversationContext;
+    if (!activeContext || !(activeContext instanceof DOMNodeContext)) {
+      return {error: 'Error: Could not find the currently selected element.'};
+    }
+
+    const selectedNode = activeContext.getItem();
+    if (!selectedNode) {
+      return {error: 'Error: Could not find the currently selected element.'};
+    }
+
+    for (const uid of params.elements) {
+      result[uid] = {computed: {}, authored: {}};
+      debugLog(`Action to execute: uid=${uid}`);
+      const node =
+          new SDK.DOMModel.DeferredDOMNode(selectedNode.domModel().target(), uid as Protocol.DOM.BackendNodeId);
+      const resolved = await node.resolvePromise();
+      if (!resolved) {
+        return {error: 'Error: Could not find the element with uid=' + uid};
+      }
+      const newContext = new DOMNodeContext(resolved);
+      if (activeContext.getOrigin() !== newContext.getOrigin()) {
+        return {error: 'Error: Node does not belong to the current origin.'};
+      }
+      const styles = await resolved.domModel().cssModel().getComputedStyle(resolved.id);
+      if (!styles) {
+        return {error: 'Error: Could not get computed styles.'};
+      }
+      const matchedStyles = await resolved.domModel().cssModel().getMatchedStyles(resolved.id);
+      if (!matchedStyles) {
+        return {error: 'Error: Could not get authored styles.'};
+      }
+      widgets.push({
+        name: 'COMPUTED_STYLES',
+        data: {
+          computedStyles: styles,
+          backendNodeId: node.backendNodeId(),
+          matchedCascade: matchedStyles,
+          properties: params.styleProperties,
+        }
+      });
+      for (const prop of params.styleProperties) {
+        result[uid].computed[prop] = styles.get(prop);
+      }
+      for (const style of matchedStyles.nodeStyles()) {
+        for (const property of style.allProperties()) {
+          if (!params.styleProperties.includes(property.name)) {
+            continue;
+          }
+          const state = matchedStyles.propertyState(property);
+          if (state === SDK.CSSMatchedStyles.PropertyState.ACTIVE) {
+            result[uid].authored[property.name] = property.value;
+          }
+        }
+      }
+    }
+    return {
+      result: JSON.stringify(result, null, 2),
+      widgets,
+    };
+  }
+}

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

@@ -0,0 +1,55 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Host from '../../../core/host/host.js';
+import type {ConversationContext, FunctionCallHandlerResult,} from '../agents/AiAgent.js';
+
+/**
+ * Context provided to the tool's handler execution.
+ */
+export interface ToolContext {
+  conversationContext: ConversationContext<unknown>|null;
+}
+
+/**
+ * Base argument type for AI Tools.
+ */
+export type ToolArgs = Record<string, unknown>;
+
+export const enum ToolName {
+  GET_STYLES = 'getStyles',
+}
+
+/**
+ * Non-generic metadata interface for a Tool.
+ * Used for storing and retrieving tools generically without type-erasure concerns.
+ */
+export interface BaseTool {
+  readonly name: ToolName;
+  readonly description: string;
+  /**
+   * JSON schema representing the parameters this tool accepts.
+   */
+  readonly parameters: Host.AidaClient.FunctionObjectParam<string|number|symbol>;
+}
+
+/**
+ * Main generic interface for defining a Tool.
+ * Binds the parameter schema properties and the handler implementation to a strict `Args` contract.
+ *
+ * @template Args - The expected object type for tool arguments. Must be an object type.
+ * @template ReturnType - The type of data returned by the handler function.
+ */
+export interface Tool<Args extends ToolArgs = ToolArgs, ReturnType = unknown, > extends BaseTool {
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof Args>;
+  readonly displayInfoFromArgs?: (
+      args: Args,
+      ) => {
+    title?: string, thought?: string, action?: string, suggestions?: [string, ...string[]],
+  };
+  handler(
+      args: Args,
+      context: ToolContext,
+      ): Promise<FunctionCallHandlerResult<ReturnType>>;
+}

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

@@ -0,0 +1,34 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {GetStylesTool} from './GetStyles.js';
+import {type Tool, ToolName} from './Tool.js';
+
+/**
+ * Plain object registry containing concrete instantiated tools.
+ * Keep this type concrete (no type-erasure) to preserve exact tool types.
+ */
+export const TOOLS = {
+  [ToolName.GET_STYLES]: new GetStylesTool(),
+};
+
+/**
+ * Registry class for registering and querying AI Assistance Tools.
+ */
+export class ToolRegistry {
+  /**
+   * Retrieves a tool by its literal name with 100% type safety.
+   *
+   * @template K - A key from the `TOOLS` registry.
+   * @returns The concrete class type of the requested tool.
+   */
+  static get<K extends keyof typeof TOOLS>(name: K): typeof TOOLS[K];
+  /**
+   * Fallback retrieval signature for general or runtime string lookups.
+   */
+  static get(name: string): Tool|undefined;
+  static get(name: string): Tool|undefined {
+    return Object.prototype.hasOwnProperty.call(TOOLS, name) ? TOOLS[name as keyof typeof TOOLS] as Tool : undefined;
+  }
+}

package/front_end/models/lighthouse/LighthouseReporterTypes.ts

@@ -77,6 +77,11 @@ export interface ReportJSON {
   audits: Record<string, AuditResultJSON>;
   categories: Record<CategoryId, CategoryJSON>;
   categoryGroups: Record<string, GroupJSON>;
+  /**
+   * Identifies if the report was imported from a file (untrusted).
+   * Used to disable page-touching AI assistance tools for security.
+   */
+  isImported?: boolean;
 }
 
 export type DetailsJSON =

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -64,17 +64,22 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     super();
     const targetManager = SDK.TargetManager.TargetManager.instance();
     targetManager.observeTargets(this, {scoped: true});
-    // Listen for target info changes to detect prerender activation.
-    // Scoped observers don't receive events when a prerendered target becomes
-    // primary because setScopeTarget() isn't called during that transition.
-    targetManager.addEventListener(
-        SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, this.#onAvailableTargetsChanged, this);
+    targetManager.addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+        this.#onPrimaryPageChanged, this);
   }
 
-  #onAvailableTargetsChanged(): void {
+  #onPrimaryPageChanged(
+      event: Common.EventTarget.EventTargetEvent<
+          {frame: SDK.ResourceTreeModel.ResourceTreeFrame, type: SDK.ResourceTreeModel.PrimaryPageChangeType}>): void {
     const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (primaryTarget && primaryTarget !== this.#target) {
-      // Primary target changed (e.g., prerender activation). Switch to it.
+    if (!primaryTarget) {
+      return;
+    }
+    if (primaryTarget !== this.#target || event.data.type === SDK.ResourceTreeModel.PrimaryPageChangeType.ACTIVATION) {
+      // Primary target changed or prerender activated. Switch to it and reset metrics.
+      this.#clearMetrics();
+      this.#sendStatusUpdate();
       void this.#switchToTarget(primaryTarget);
     }
   }
@@ -381,11 +386,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         break;
       }
       case 'reset': {
-        this.#lcpValue = undefined;
-        this.#clsValue = undefined;
-        this.#inpValue = undefined;
-        this.#interactions.clear();
-        this.#layoutShifts = [];
+        this.#clearMetrics();
         break;
       }
     }
@@ -393,6 +394,15 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#sendStatusUpdate();
   }
 
+  #clearMetrics(): void {
+    this.#lcpValue = undefined;
+    this.#clsValue = undefined;
+    this.#inpValue = undefined;
+    this.#interactions.clear();
+    this.#interactionsByGroupId.clear();
+    this.#layoutShifts = [];
+  }
+
   #isPrimaryFrameExecutionContext(executionContextId: Protocol.Runtime.ExecutionContextId): boolean {
     if (!this.#target) {
       return false;
@@ -460,6 +470,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   clearInteractions(): void {
     this.#interactions.clear();
+    this.#interactionsByGroupId.clear();
     this.#sendStatusUpdate();
   }
 

package/front_end/models/stack_trace/DetailedErrorStackParser.ts

@@ -142,12 +142,12 @@ export function parseRawFramesFromErrorStack(stack: string): RawFrame[]|null {
       functionName,
       lineNumber,
       columnNumber,
+      isWasm,
       parsedFrameInfo: {
         isAsync,
         isConstructor,
         isEval,
         evalOrigin,
-        isWasm,
         wasmModuleName,
         wasmFunctionIndex,
         typeName,
@@ -181,7 +181,7 @@ export function parseMessage(stack: string): string {
 export function augmentRawFramesWithScriptIds(
     rawFrames: RawFrame[], protocolStackTrace: Protocol.Runtime.StackTrace): void {
   function augmentFrame(rawFrame: RawFrame): void {
-    const isWasm = rawFrame.parsedFrameInfo?.isWasm;
+    const isWasm = rawFrame.isWasm;
     const protocolFrame = protocolStackTrace.callFrames.find(frame => {
       if (isWasm) {
         // The parser parses Wasm offsets into the `columnNumber` field. The `lineNumber` is always -1.

package/front_end/models/stack_trace/StackTrace.ts

@@ -44,6 +44,10 @@ export interface Frame {
    * of the containing function.
    */
   readonly rawName?: string;
+  /**
+   * Whether the corresponding raw frame is JS or WASM.
+   */
+  readonly isWasm?: boolean;
 }
 
 export interface ParsedErrorStackFrame extends Frame {
@@ -51,7 +55,6 @@ export interface ParsedErrorStackFrame extends Frame {
   readonly isConstructor?: boolean;
   readonly isEval?: boolean;
   readonly evalOrigin?: ParsedErrorStackFrame;
-  readonly isWasm?: boolean;
   readonly wasmModuleName?: string;
   readonly wasmFunctionIndex?: number;
   readonly typeName?: string;

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -88,10 +88,12 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
 
   readonly missingDebugInfo?: StackTrace.StackTrace.MissingDebugInfo;
   readonly rawName?: string;
+  readonly isWasm?: boolean;
 
   constructor(
       url: string|undefined, uiSourceCode: Workspace.UISourceCode.UISourceCode|undefined, name: string|undefined,
-      line: number, column: number, missingDebugInfo?: StackTrace.StackTrace.MissingDebugInfo, rawName?: string) {
+      line: number, column: number, missingDebugInfo?: StackTrace.StackTrace.MissingDebugInfo, rawName?: string,
+      isWasm?: boolean) {
     this.url = url;
     this.uiSourceCode = uiSourceCode;
     this.name = name;
@@ -99,6 +101,7 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
     this.column = column;
     this.missingDebugInfo = missingDebugInfo;
     this.rawName = rawName;
+    this.isWasm = isWasm;
   }
 }
 
@@ -192,7 +195,7 @@ export class ParsedErrorStackFrameImpl implements StackTrace.StackTrace.ParsedEr
     return this.#evalOrigin;
   }
   get isWasm(): boolean|undefined {
-    return this.#parsedFrameInfo?.isWasm;
+    return this.#frame.isWasm;
   }
   get wasmModuleName(): string|undefined {
     return this.#parsedFrameInfo?.wasmModuleName;
@@ -284,6 +287,10 @@ export class DebuggableFrameImpl implements StackTrace.StackTrace.DebuggableFram
     return this.#frame.rawName;
   }
 
+  get isWasm(): boolean|undefined {
+    return this.#frame.isWasm;
+  }
+
   get sdkFrame(): SDK.DebuggerModel.CallFrame {
     return this.#sdkFrame;
   }

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -48,8 +48,14 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
 
   async createFromProtocolRuntime(stackTrace: Protocol.Runtime.StackTrace, rawFramesToUIFrames: TranslateRawFrames):
       Promise<StackTrace.StackTrace.StackTrace> {
+    const debuggerModel = this.target().model(SDK.DebuggerModel.DebuggerModel);
+    const syncFrames = stackTrace.callFrames.map((frame): RawFrame => {
+      const isWasm = debuggerModel?.isWasm(frame.scriptId) ?? false;
+      return {...frame, isWasm};
+    });
+
     const [syncFragment, asyncFragments] = await Promise.all([
-      this.#createFragment(stackTrace.callFrames, rawFramesToUIFrames),
+      this.#createFragment(syncFrames, rawFramesToUIFrames),
       this.#createAsyncFragments(stackTrace, rawFramesToUIFrames),
     ]);
 
@@ -126,6 +132,7 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
                                        functionName: frame.functionName,
                                        lineNumber: frame.location().lineNumber,
                                        columnNumber: frame.location().columnNumber,
+                                       isWasm: frame.script.isWasm(),
                                      })),
         rawFramesToUIFrames);
     return new DebuggableFragmentImpl(fragment, pausedDetails.callFrames);
@@ -144,8 +151,14 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
           continue;
         }
         const model = StackTraceModel.#modelForTarget(target);
+        const targetDebuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+        const asyncFrames = asyncStackTrace.callFrames.map((frame): RawFrame => {
+          const isWasm = targetDebuggerModel?.isWasm(frame.scriptId) ?? false;
+          return {...frame, isWasm};
+        });
+
         const asyncFragmentPromise =
-            model.#createFragment(asyncStackTrace.callFrames, rawFramesToUIFrames)
+            model.#createFragment(asyncFrames, rawFramesToUIFrames)
                 .then(fragment => new AsyncFragmentImpl(asyncStackTrace.description ?? '', fragment));
         asyncFragments.push(asyncFragmentPromise);
       }
@@ -201,7 +214,7 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
       node.frames = uiFrames[i++].map(
           frame => new FrameImpl(
               frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column, frame.missingDebugInfo,
-              node.rawFrame.functionName));
+              node.rawFrame.functionName, node.rawFrame.isWasm));
 
       if (node.parsedFrameInfo?.evalOrigin) {
         node.evalOrigin = evalOrigins[evalI++];
@@ -243,7 +256,7 @@ async function translateEvalOrigin(
   const frames = uiFrames[0].map(
       frame => new FrameImpl(
           frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column, frame.missingDebugInfo,
-          rawFrame.functionName));
+          rawFrame.functionName, rawFrame.isWasm));
 
   let parentEvalOrigin: EvalOrigin|undefined;
   if (rawFrame.parsedFrameInfo?.evalOrigin) {

package/front_end/models/stack_trace/Trie.ts

@@ -11,7 +11,6 @@ export interface ParsedFrameInfo {
   readonly isConstructor?: boolean;
   readonly isEval?: boolean;
   readonly evalOrigin?: RawFrame;
-  readonly isWasm?: boolean;
   readonly wasmModuleName?: string;
   readonly wasmFunctionIndex?: number;
   readonly typeName?: string;
@@ -30,6 +29,7 @@ export interface RawFrame {
   readonly columnNumber: number;
 
   readonly parsedFrameInfo?: ParsedFrameInfo;
+  readonly isWasm?: boolean;
 }
 
 /**

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -362,23 +362,22 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
   const context = conversation?.selectedContext;
 
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
-    if (!context.external) {
-      const focus = context.getItem();
-      return new PerformanceAgentMarkdownRenderer(
-          focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
-    }
-  } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE) {
+    const focus = context.getItem();
+    return new PerformanceAgentMarkdownRenderer(focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
+  }
+  if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE) {
     // Handle historical conversations (can't linkify anything).
     return new PerformanceAgentMarkdownRenderer();
-  } else if (
-      Greendev.Prototypes.instance().isEnabled('emulationCapabilities') &&
+  }
+  if (Greendev.Prototypes.instance().isEnabled('emulationCapabilities') &&
       conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING &&
       SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel)) {
     const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
     const resourceTreeModel = domModel?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
     const mainFrameId = resourceTreeModel?.mainFrame?.id;
     return new StylingAgentMarkdownRenderer(mainFrameId);
-  } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY) {
+  }
+  if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY) {
     const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
     const mainDocumentURL = domModel?.existingDocument()?.documentURL;
     return new AccessibilityAgentMarkdownRenderer(mainDocumentURL);
@@ -570,11 +569,11 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   // clang-format on
 }
 
-function createNodeContext(node: SDK.DOMModel.DOMNode|null): AiAssistanceModel.StylingAgent.NodeContext|null {
+function createDOMNodeContext(node: SDK.DOMModel.DOMNode|null): AiAssistanceModel.DOMNodeContext.DOMNodeContext|null {
   if (!node) {
     return null;
   }
-  return new AiAssistanceModel.StylingAgent.NodeContext(node);
+  return new AiAssistanceModel.DOMNodeContext.DOMNodeContext(node);
 }
 
 function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): AiAssistanceModel.FileAgent.FileContext|
@@ -668,7 +667,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #conversation?: AiAssistanceModel.AiConversation.AiConversation;
 
   #selectedFile: AiAssistanceModel.FileAgent.FileContext|null = null;
-  #selectedElement: AiAssistanceModel.StylingAgent.NodeContext|null = null;
+  #selectedElement: AiAssistanceModel.DOMNodeContext.DOMNodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
 
@@ -1117,7 +1116,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#viewOutput.chatView?.focusTextInput();
     void this.#handleAidaAvailabilityChange();
     this.#selectedElement =
-        createNodeContext(selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode)));
+        createDOMNodeContext(selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode)));
     this.#selectedRequest =
         createRequestContext(UI.Context.Context.instance().flavor(SDK.NetworkRequest.NetworkRequest));
     this.#selectedPerformanceTrace =
@@ -1225,7 +1224,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
-    this.#selectedElement = createNodeContext(selectedElementFilter(ev.data));
+    this.#selectedElement = createDOMNodeContext(selectedElementFilter(ev.data));
     this.#updateConversationState(this.#conversation);
   };
 
@@ -1576,6 +1575,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.FILE;
         break;
       }
+      case 'ai-assistance.storage-floating-button': {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromStoragePanelFloatingButton);
+        targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE;
+        break;
+      }
     }
 
     if (!targetConversationType) {
@@ -1727,7 +1731,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #handleConversationContextChange = (data: unknown): void => {
     if (data instanceof AiAssistanceModel.FileAgent.FileContext) {
       this.#selectedFile = data;
-    } else if (data instanceof AiAssistanceModel.StylingAgent.NodeContext) {
+    } else if (data instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext) {
       this.#selectedElement = data;
     } else if (data instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
       this.#selectedRequest = data;

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -297,3 +297,19 @@ UI.ActionRegistration.registerActionExtension({
   },
   condition: config => isFileAgentFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
 });
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'ai-assistance.storage-floating-button',
+  contextTypes(): [] {
+    return [];
+  },
+  category: UI.ActionRegistration.ActionCategory.GLOBAL,
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
+  configurableBindings: false,
+  async loadActionDelegate() {
+    const AiAssistance = await loadAiAssistanceModule();
+    return new AiAssistance.ActionDelegate();
+  },
+  condition: config =>
+      isStorageAgentFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
+});

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -174,7 +174,7 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
   if (context instanceof AiAssistanceModel.FileAgent.FileContext) {
     return lockedString(UIStringsNotTranslate.removeContextFile);
   }
-  if (context instanceof AiAssistanceModel.StylingAgent.NodeContext) {
+  if (context instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext) {
     return lockedString(UIStringsNotTranslate.removeContextElement);
   }
   if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
@@ -336,7 +336,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                         })}
                       >
                         ${
-                          input.context instanceof AiAssistanceModel.StylingAgent.NodeContext ?
+                          input.context instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext ?
                             html`
                               <devtools-widget
                                 class="title"

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -205,6 +205,10 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 
+  protected override isAiButtonEnabled(): boolean {
+    return UI.ActionRegistry.ActionRegistry.instance().hasAction('ai-assistance.storage-floating-button');
+  }
+
   protected removeItem(key: string): void {
     this.domStorage?.removeItem(key);
   }