chrome-devtools-frontend 1.0.1631386 → 1.0.1635648

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

@@ -3,25 +3,52 @@
 // found in the LICENSE file.
 
 import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import type {StorageItem} from '../StorageItem.js';
 
 import {
+  type AgentOptions,
   AiAgent,
+  type ContextResponse,
   ConversationContext,
   type RequestOptions,
+  ResponseType,
 } from './AiAgent.js';
 
+const lockedString = i18n.i18n.lockedString;
+
 // TODO(kimanh): Replace temporary preamble as soon as functions are implemented
 const preamble =
-    `You are a Senior Software Engineer, specializing in state audit and storage analysis within Chrome DevTools. Your mission is to help developers debug storage-related issues faster by analyzing the evidence in Cookies, LocalStorage, and SessionStorage and connecting it to the application logic in the source code.
+    `You are a Senior Software Engineer specializing in state audit and storage analysis within Chrome DevTools. Your mission is to help developers debug storage-related issues faster by analyzing the evidence in LocalStorage and SessionStorage.
+
+You have access to the site's storage using tools like \`listStorageKeys\` and \`getStorageValues\` to analyze storage state.
+
+# Goals
+
+1.  **Explain Purpose**: Identify what specific storage entries are for.
+2.  **Understand Application State**: Help users inspect, understand, and audit the state stored in their browser storage, and how it relates to their application's behavior or potential issues (such as state mismatch or drift).
+
+# Tools & Workflow
+
+-   Use \`listStorageKeys\` to survey the keys available for Local or Session storage.
+-   Use \`getStorageValues\` to access the values of specific Local or Session storage keys.
+-   **CRITICAL**: Only access storage values when the keys/names are not enough, and if you have a good reason to access them.
+
+If the user asks a question that requires an investigation of a problem, use this structure for answering:
+
+-   If available, point out the root cause(s) of the problem.
+    -   Example: "**Root Cause**: The UI theme is resetting because the 'uiTheme' local storage key is set to an invalid value."
+-   If applicable, list actionable solution suggestion(s) in order of impact:
+    -   Example: "**Suggestion**: Clear the 'uiTheme' local storage key or set it to 'light' or 'dark'."
 
 # Considerations
 
--   **Raw Evidence**: Treat storage data as "raw evidence". Do not make assumptions without verifying code references.
+-   **Raw Evidence**: Treat storage data as "raw evidence". Do not make assumptions.
+-   **Dynamic State**: Storage values may change over time as the user interacts with the page. ALWAYS re-request values using the \`getStorageValues\` tool when you need to inspect them, even if you have already requested them in the past. Do NOT rely on previously cached values in your memory.
 -   **Brevity**: Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Keep answers short and actionable.
-
- **CRITICAL** You are a debugging assistant in DevTools. 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.
+-   **CRITICAL**: You are a storage 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.
 `;
 
 export class StorageContext extends ConversationContext<StorageItem> {
@@ -66,17 +93,192 @@ export class StorageAgent extends AiAgent<StorageItem> {
     };
   }
 
-  constructor(opts: {sessionId?: string, aidaClient?: Host.AidaClient.AidaClient} = {}) {
-    super({
-      aidaClient: opts.aidaClient ?? new Host.AidaClient.AidaClient(),
-      sessionId: opts.sessionId,
+  constructor(opts: AgentOptions) {
+    super(opts);
+
+    this.declareFunction<{
+      type: 'localStorage' | 'sessionStorage',
+    }>('listStorageKeys', {
+      description: 'Lists all keys for a given storage type for the current origin.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          type: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'Storage type: localStorage or sessionStorage',
+            nullable: false,
+          },
+        },
+        required: ['type'],
+      },
+      displayInfoFromArgs: args => {
+        return {
+          title: lockedString('Reading storage keys'),
+          action: `listStorageKeys('${args.type}')`,
+        };
+      },
+
+      handler: async args => {
+        const storageOrError = this.getDOMStorage(args.type);
+        if ('error' in storageOrError) {
+          return storageOrError;
+        }
+        const items = await storageOrError.storage.getItems();
+        if (!items) {
+          return {result: JSON.stringify({keys: []})};
+        }
+
+        const keys = items.map(item => item[0]);
+        return {result: JSON.stringify({keys})};
+      },
+    });
+
+    this.declareFunction<{
+      type: 'localStorage' | 'sessionStorage',
+      keys: string[],
+    }>('getStorageValues', {
+      description: 'Retrieve specific string values from storage for requested keys.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          type: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'Storage type: localStorage or sessionStorage',
+            nullable: false,
+          },
+          keys: {
+            type: Host.AidaClient.ParametersTypes.ARRAY,
+            description: 'A list of keys to retrieve values for.',
+            items: {type: Host.AidaClient.ParametersTypes.STRING, description: 'A storage key.'},
+            nullable: false,
+          },
+        },
+        required: ['type', 'keys'],
+      },
+      displayInfoFromArgs: args => {
+        return {
+          title: lockedString('Reading storage values'),
+          action: `getStorageValues('${args.type}', ${JSON.stringify(args.keys)})`,
+        };
+      },
+
+      handler: async (args, options) => {
+        if (options?.approved !== true) {
+          const keyString = args.keys.map(k => `\`${k}\``).join(', ');
+          return {
+            requiresApproval: true,
+            description: lockedString(`The AI wants to access the value(s) of ${args.type} keys ${keyString}.`),
+          };
+        }
+
+        const storageOrError = this.getDOMStorage(args.type);
+        if ('error' in storageOrError) {
+          return storageOrError;
+        }
+        const items = await storageOrError.storage.getItems();
+        if (!items) {
+          return {result: JSON.stringify({items: {}})};
+        }
+
+        const itemMap = new Map<string, string>(items as Array<[string, string]>);
+
+        const resultRecord: Record<string, string|null> = {};
+        for (const key of args.keys) {
+          resultRecord[key] = itemMap.get(key) ?? null;
+        }
+
+        return {result: JSON.stringify({items: resultRecord})};
+      },
+
+    });
+  }
+
+  private getDOMStorage(type: 'localStorage'|'sessionStorage'): {storage: SDK.DOMStorageModel.DOMStorage}|{
+    error: string,
+  }
+  {
+    const origin = this.context?.getOrigin();
+    if (!origin) {
+      return {error: 'No origin available.'};
+    }
+    const storageKey = this.context?.getItem().storageKey;
+    const isLocalStorage = type === 'localStorage';
+
+    // If a storage key is defined, restrict access to that one.
+    if (storageKey) {
+      const domStorageModels = SDK.TargetManager.TargetManager.instance().models(SDK.DOMStorageModel.DOMStorageModel);
+      for (const domStorageModel of domStorageModels) {
+        domStorageModel.enable();
+        const storage = domStorageModel.storageForId({storageKey, isLocalStorage});
+        if (storage) {
+          return {storage};
+        }
+      }
+      return {error: `Storage not found for key ${storageKey} and type ${type}`};
+    }
+
+    // If no storage key is defined, take the primary target's local/session storage.
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!target) {
+      return {error: 'No primary page target found.'};
+    }
+    const domStorageModel = target.model(SDK.DOMStorageModel.DOMStorageModel);
+    if (!domStorageModel) {
+      return {error: 'DOMStorageModel not found.'};
+    }
+
+    domStorageModel.enable();
+
+    const storages = domStorageModel.storages();
+    const storage = storages.find(s => {
+      const storageKey = s.storageKey;
+      if (!storageKey) {
+        return false;
+      }
+      const parsedKey = SDK.StorageKeyManager.parseStorageKey(storageKey);
+      return parsedKey.origin === origin && s.isLocalStorage === isLocalStorage;
     });
+
+    if (!storage) {
+      return {error: `Storage not found for origin ${origin} and type ${type}`};
+    }
+
+    return {storage};
+  }
+
+  static #formatContext(origin: string, item: StorageItem): string {
+    if (item.storageType && item.key) {
+      return `Storage Type: ${item.storageType}\nOrigin: ${origin}\nKey: ${item.key}`;
+    }
+    return `Origin: ${origin}`;
   }
 
-  async * handleContextDetails(_context: ConversationContext<StorageItem>|null): AsyncGenerator<never, void, void> {
+  async *
+      handleContextDetails(context: ConversationContext<StorageItem>|null):
+          AsyncGenerator<ContextResponse, void, void> {
+    if (!context) {
+      return;
+    }
+
+    yield {
+      type: ResponseType.CONTEXT,
+      details: [
+        {
+          title: 'Selected Storage Context',
+          text: StorageAgent.#formatContext(context.getOrigin(), context.getItem()),
+        },
+      ],
+    };
   }
 
-  override async enhanceQuery(query: string, _context: ConversationContext<StorageItem>|null): Promise<string> {
-    return query;
+  override async enhanceQuery(query: string, context: ConversationContext<StorageItem>|null): Promise<string> {
+    if (!context) {
+      return query;
+    }
+    return `# Active Context\n${StorageAgent.#formatContext(context.getOrigin(), context.getItem())}\n\n${query}`;
   }
 }

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

@@ -519,6 +519,10 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       if (!resolved) {
         return {error: 'Error: Could not find the element with uid=' + uid};
       }
+      const newContext = new NodeContext(resolved);
+      if (this.context?.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.'};

package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
+import type * as CrUXManager from '../../crux-manager/crux-manager.js';
 import * as Trace from '../../trace/trace.js';
 import type {ConversationSuggestions} from '../agents/AiAgent.js';
 import type {AgentFocus} from '../performance/AIContext.js';
@@ -48,8 +49,9 @@ export class PerformanceInsightFormatter {
   #insight: Trace.Insights.Types.InsightModel;
   #parsedTrace: Trace.TraceModel.ParsedTrace;
 
-  constructor(focus: AgentFocus, insight: Trace.Insights.Types.InsightModel) {
-    this.#traceFormatter = new PerformanceTraceFormatter(focus);
+  constructor(
+      focus: AgentFocus, insight: Trace.Insights.Types.InsightModel, deviceScope: CrUXManager.DeviceScope|null = null) {
+    this.#traceFormatter = new PerformanceTraceFormatter(focus, deviceScope);
     this.#insight = insight;
     this.#parsedTrace = focus.parsedTrace;
   }

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -35,15 +35,17 @@ export class PerformanceTraceFormatter {
   #insightSet: Trace.Insights.Types.InsightSet|null;
   #eventsSerializer: Trace.EventsSerializer.EventsSerializer;
   #formattedFunctionCodes = new Set<string>();
+  #deviceScope: CrUXManager.DeviceScope|null;
   resolveFunctionCode?:
       (url: Platform.DevToolsPath.UrlString, line: number,
        column: number) => Promise<SourceMapScopes.FunctionCodeResolver.FunctionCode|null>;
 
-  constructor(focus: AgentFocus) {
+  constructor(focus: AgentFocus, deviceScope: CrUXManager.DeviceScope|null = null) {
     this.#focus = focus;
     this.#parsedTrace = focus.parsedTrace;
     this.#insightSet = focus.primaryInsightSet;
     this.#eventsSerializer = focus.eventsSerializer;
+    this.#deviceScope = deviceScope;
   }
 
   serializeEvent(event: Trace.Types.Events.Event): string {
@@ -64,7 +66,8 @@ export class PerformanceTraceFormatter {
       return [];
     }
     try {
-      const cruxScope = CrUXManager.CrUXManager.instance().getSelectedScope();
+      const cruxScope: CrUXManager.Scope = this.#deviceScope ? {pageScope: 'url', deviceScope: this.#deviceScope} :
+                                                               CrUXManager.CrUXManager.instance().getSelectedScope();
       const parts: string[] = [];
       const fieldMetrics =
           Trace.Insights.Common.getFieldMetricsForInsightSet(insightSet, this.#parsedTrace.metadata, cruxScope);

package/front_end/models/extensions/RecorderExtensionEndpoint.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../core/platform/platform.js';
+
 import {PrivateAPI} from './ExtensionAPI.js';
 import {ExtensionEndpoint} from './ExtensionEndpoint.js';
 import {RecorderPluginManager} from './RecorderPluginManager.js';
@@ -10,20 +12,26 @@ export class RecorderExtensionEndpoint extends ExtensionEndpoint {
   private readonly name: string;
   private readonly mediaType?: string;
   private readonly capabilities: PrivateAPI.RecordingExtensionPluginCapability[];
+  readonly #extensionOrigin: Platform.DevToolsPath.UrlString;
 
   constructor(
       name: string, port: MessagePort, capabilities: PrivateAPI.RecordingExtensionPluginCapability[],
-      mediaType?: string) {
+      extensionOrigin: Platform.DevToolsPath.UrlString, mediaType?: string) {
     super(port);
     this.name = name;
     this.mediaType = mediaType;
     this.capabilities = capabilities;
+    this.#extensionOrigin = extensionOrigin;
   }
 
   getName(): string {
     return this.name;
   }
 
+  getOrigin(): Platform.DevToolsPath.UrlString {
+    return this.#extensionOrigin;
+  }
+
   getCapabilities(): PrivateAPI.RecordingExtensionPluginCapability[] {
     return this.capabilities;
   }

package/front_end/models/extensions/RecorderPluginManager.ts

@@ -14,6 +14,7 @@ export interface ViewDescriptor {
   pagePath: string;
   onShown: () => void;
   onHidden: () => void;
+  extensionOrigin: string;
 }
 
 export class RecorderPluginManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {

package/front_end/models/trace/handlers/FramesHandler.ts

@@ -507,26 +507,28 @@ export class TimelineFrameBeginFrameQueue {
   private queueFrames: number[] = [];
 
   // Maps frameSeqId to BeginFrameInfo.
-  private mapFrames: Record<number, BeginFrameInfo> = {};
+  private mapFrames = new Map<number, BeginFrameInfo>();
 
   // Add a BeginFrame to the queue, if it does not already exit.
   addFrameIfNotExists(seqId: number, startTime: Types.Timing.Micro, isDropped: boolean, isPartial: boolean): void {
-    if (!(seqId in this.mapFrames)) {
-      this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped, isPartial);
+    if (!this.mapFrames.has(seqId)) {
+      this.mapFrames.set(seqId, new BeginFrameInfo(seqId, startTime, isDropped, isPartial));
       this.queueFrames.push(seqId);
     }
   }
 
   // Set a BeginFrame in queue as dropped.
   setDropped(seqId: number, isDropped: boolean): void {
-    if (seqId in this.mapFrames) {
-      this.mapFrames[seqId].isDropped = isDropped;
+    const frame = this.mapFrames.get(seqId);
+    if (frame) {
+      frame.isDropped = isDropped;
     }
   }
 
   setPartial(seqId: number, isPartial: boolean): void {
-    if (seqId in this.mapFrames) {
-      this.mapFrames[seqId].isPartial = isPartial;
+    const frame = this.mapFrames.get(seqId);
+    if (frame) {
+      frame.isPartial = isPartial;
     }
   }
 
@@ -535,7 +537,7 @@ export class TimelineFrameBeginFrameQueue {
 
     // Do not visualize this frame in the rare case where the current DrawFrame
     // does not have a corresponding BeginFrame.
-    if (seqId in this.mapFrames) {
+    if (this.mapFrames.has(seqId)) {
       // Pop all BeginFrames before the current frame, and add only the dropped
       // ones in |frames_to_visualize|.
       // Non-dropped frames popped here are BeginFrames that are never
@@ -544,17 +546,21 @@ export class TimelineFrameBeginFrameQueue {
       // be naturally presented as continuationss of other frames.
       while (this.queueFrames[0] !== seqId) {
         const currentSeqId = this.queueFrames[0];
-        if (this.mapFrames[currentSeqId].isDropped) {
-          framesToVisualize.push(this.mapFrames[currentSeqId]);
+        const currentFrame = this.mapFrames.get(currentSeqId);
+        if (currentFrame && currentFrame.isDropped) {
+          framesToVisualize.push(currentFrame);
         }
 
-        delete this.mapFrames[currentSeqId];
+        this.mapFrames.delete(currentSeqId);
         this.queueFrames.shift();
       }
 
       // Pop the BeginFrame associated with the current DrawFrame.
-      framesToVisualize.push(this.mapFrames[seqId]);
-      delete this.mapFrames[seqId];
+      const frame = this.mapFrames.get(seqId);
+      if (frame) {
+        framesToVisualize.push(frame);
+      }
+      this.mapFrames.delete(seqId);
       this.queueFrames.shift();
     }
     return framesToVisualize;

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -348,6 +348,13 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       ];
     }
 
+    case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE: {
+      return [
+        {title: 'How is localStorage used on this page?', jslogContext: 'storage-default'},
+        {title: 'How is sessionStorage used on this page?', jslogContext: 'storage-default'},
+      ];
+    }
+
     default:
       Platform.assertNever(conversation.type, 'Unknown conversation type');
   }
@@ -616,6 +623,14 @@ function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentF
   return new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
 }
 
+function createStorageContext(item: AiAssistanceModel.StorageItem.StorageItem|null):
+    AiAssistanceModel.StorageAgent.StorageContext|null {
+  if (!item) {
+    return null;
+  }
+  return new AiAssistanceModel.StorageAgent.StorageContext(item);
+}
+
 /**
  * State relating to the visibility of the Walkthrough.
  *
@@ -671,6 +686,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
   #selectedBreakpoint: AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext|null = null;
   #selectedAccessibility: AiAssistanceModel.AccessibilityAgent.AccessibilityContext|null = null;
+  #selectedStorage: AiAssistanceModel.StorageAgent.StorageContext|null = null;
+
   // Messages displayed in the `ChatView` component.
 
   #messages: Message[] = [];
@@ -993,6 +1010,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const isSourcesPanelVisible = viewManager.isViewVisible('sources');
     const isPerformancePanelVisible = viewManager.isViewVisible('timeline');
     const isLighthousePanelVisible = viewManager.isViewVisible('lighthouse');
+    const isApplicationPanelVisible = viewManager.isViewVisible('resources');
 
     let targetConversationType: AiAssistanceModel.AiHistoryStorage.ConversationType|undefined;
     if (isElementsPanelVisible && hostConfig.devToolsFreestyler?.enabled) {
@@ -1009,6 +1027,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE;
     } else if (isLighthousePanelVisible && hostConfig.devToolsAiAssistanceAccessibilityAgent?.enabled) {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY;
+    } else if (isApplicationPanelVisible && hostConfig.devToolsAiAssistanceStorageAgent?.enabled) {
+      targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE;
     }
 
     if (isAiAssistanceContextSelectionAgentEnabled() && !targetConversationType) {
@@ -1147,6 +1167,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         createBreakpointContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UILocation));
     this.#selectedAccessibility = createAccessibilityContext(
         UI.Context.Context.instance().flavor(LighthousePanel.LighthousePanel.ActiveLighthouseReport));
+    this.#selectedStorage =
+        createStorageContext(UI.Context.Context.instance().flavor(AiAssistanceModel.StorageItem.StorageItem));
     this.#updateConversationState(this.#conversation);
 
     this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
@@ -1159,6 +1181,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         AiAssistanceModel.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        AiAssistanceModel.StorageItem.StorageItem, this.#handleStorageItemFlavorChange);
+
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -1197,6 +1222,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
         AiAssistanceModel.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        AiAssistanceModel.StorageItem.StorageItem, this.#handleStorageItemFlavorChange);
+
     UI.Context.Context.instance().removeFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
@@ -1243,6 +1271,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#updateConversationState(this.#conversation);
   };
 
+  #handleStorageItemFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<AiAssistanceModel.StorageItem.StorageItem>): void => {
+        if (this.#selectedStorage?.getItem() === ev.data) {
+          return;
+        }
+
+        this.#selectedStorage = createStorageContext(ev.data);
+        this.#updateConversationState(this.#conversation);
+      };
+
   #handleDOMNodeAttrChange =
       (ev: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, name: string}>): void => {
         if (this.#selectedElement?.getItem() === ev.data.node) {
@@ -1415,6 +1453,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return this.#conversation.selectedContext ?
             lockedString(UIStringsNotTranslate.inputPlaceholderForAccessibility) :
             lockedString(UIStringsNotTranslate.inputPlaceholderForAccessibilityNoContext);
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContext);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
 
         if (AiAssistanceModel.AiUtils.isGeminiBranding()) {
@@ -1472,6 +1512,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
       case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
 
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE:
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
         if (loggingEnabled) {
           return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContext);
@@ -1726,6 +1767,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return this.#selectedBreakpoint;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
         return this.#selectedAccessibility;
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE:
+        return this.#selectedStorage;
+
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
 
       case undefined:
@@ -1746,6 +1790,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#selectedBreakpoint = data;
     } else if (data instanceof AiAssistanceModel.AccessibilityAgent.AccessibilityContext) {
       this.#selectedAccessibility = data;
+    } else if (data instanceof AiAssistanceModel.StorageAgent.StorageContext) {
+      this.#selectedStorage = data;
     }
 
     void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);

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

@@ -123,6 +123,9 @@ export class AccessibilityAgentMarkdownRenderer extends MarkdownRendererWithCode
     if (!node) {
       return;
     }
+    if (node.frameId() !== this.mainFrameId) {
+      return;
+    }
     const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
     return linkedNode;
   }

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

@@ -103,6 +103,10 @@ const UIStringsNotTranslate = {
    * @description Label added to the button that remove the currently selected context in AI Assistance panel.
    */
   removeContextPerfInsight: 'Remove performance insight from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContextStorage: 'Remove storage from context',
   /**
    * @description Label added to the button that remove the currently selected context in AI Assistance panel.
    */
@@ -179,6 +183,9 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
     return lockedString(UIStringsNotTranslate.removeContextPerfInsight);
   }
+  if (context instanceof AiAssistanceModel.StorageAgent.StorageContext) {
+    return lockedString(UIStringsNotTranslate.removeContextStorage);
+  }
   return lockedString(UIStringsNotTranslate.removeContext);
 }
 
@@ -352,6 +359,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :
                             input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
+                            input.context instanceof AiAssistanceModel.StorageAgent.StorageContext ?
+                            html`<devtools-icon class="icon" name="table" title="Storage"></devtools-icon>` :
                             Lit.nothing}
                             <span
                               role="button"
@@ -521,9 +530,11 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
 
   setInputValue(text: string): void {
     if (this.#textAreaRef.value) {
-      this.#textAreaRef.value.value = text;
+      const maxLength = this.#textAreaRef.value.maxLength;
+      const truncatedText = (maxLength >= 0) ? text.substring(0, maxLength) : text;
+      this.#textAreaRef.value.value = truncatedText;
       // Place the cursor at the end of the new value.
-      this.#textAreaRef.value.setSelectionRange(text.length, text.length);
+      this.#textAreaRef.value.setSelectionRange(truncatedText.length, truncatedText.length);
     }
     this.performUpdate();
   }