chrome-devtools-frontend 1.0.1646286 → 1.0.1649421

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -18,6 +18,7 @@ import type * as LHModel from '../../models/lighthouse/lighthouse.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import type * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -30,6 +31,10 @@ import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
 import {AccessibilityAgentMarkdownRenderer} from './components/AccessibilityAgentMarkdownRenderer.js';
+import {
+  AIv2MarkdownRenderer,
+  type AIv2MarkdownRendererOptions,
+} from './components/AIv2MarkdownRenderer.js';
 import {
   type AnswerPart,
   ChatMessageEntity,
@@ -349,6 +354,7 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       return [
         {title: 'How is localStorage used on this page?', jslogContext: 'storage-default'},
         {title: 'How is sessionStorage used on this page?', jslogContext: 'storage-default'},
+        {title: 'What cookies are stored for this page?', jslogContext: 'storage-default'},
       ];
     }
 
@@ -357,8 +363,41 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
   }
 }
 
+function createV2MarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiConversation):
+    AIv2MarkdownRenderer {
+  const options: AIv2MarkdownRendererOptions = {};
+  const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+  const domModel = primaryTarget?.model(SDK.DOMModel.DOMModel);
+  const resourceTreeModel = primaryTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
+  const context = conversation?.selectedContext;
+
+  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+    const focus = context.getItem();
+    options.mainFrameId = focus.parsedTrace.data.Meta.mainFrameId;
+    options.lookupTraceEvent = focus.lookupEvent.bind(focus);
+  } else {
+    if (domModel) {
+      options.mainDocumentURL = domModel.existingDocument()?.documentURL;
+    }
+    if (resourceTreeModel) {
+      options.mainFrameId = resourceTreeModel.mainFrame?.id;
+    }
+  }
+  return new AIv2MarkdownRenderer(options);
+}
+
 function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiConversation):
-    MarkdownRendererWithCodeBlock {
+    MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE &&
+      conversation.isReadOnly) {
+    // Handle historical conversations (can't linkify anything).
+    return new PerformanceAgentMarkdownRenderer();
+  }
+
+  if (Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled && conversation && !conversation.isReadOnly) {
+    return createV2MarkdownRenderer(conversation);
+  }
+
   const context = conversation?.selectedContext;
 
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -5,6 +5,7 @@
 export * from './AiAssistancePanel.js';
 export * from './components/ChatView.js';
 export * from './components/AccessibilityAgentMarkdownRenderer.js';
+export * from './components/AIv2MarkdownRenderer.js';
 export * as ChatInput from './components/ChatInput.js';
 export * from './components/MarkdownRendererWithCodeBlock.js';
 export * from './SelectWorkspaceDialog.js';

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

@@ -0,0 +1,228 @@
+// 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 Common from '../../../core/common/common.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as Logs from '../../../models/logs/logs.js';
+import * as Trace from '../../../models/trace/trace.js';
+import type * as Marked from '../../../third_party/marked/marked.js';
+import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as PanelsCommon from '../../common/common.js';
+
+const {html} = Lit.StaticHtml;
+const {until} = Lit.Directives;
+
+export interface AIv2MarkdownRendererOptions {
+  mainFrameId?: string;
+  mainDocumentURL?: Platform.DevToolsPath.UrlString;
+  lookupTraceEvent?: (key: string) => Trace.Types.Events.Event | null;
+}
+
+type ParsedLink = {
+  type: 'path',
+  path: string,
+}|{
+  type: 'node',
+  nodeId: Protocol.DOM.BackendNodeId,
+};
+
+/**
+ * AIv2MarkdownRenderer is currently duplicated from the agent-specific renderers
+ * as part of the migration to the V2 architecture. It will eventually become
+ * the only markdown renderer used by AI assistance.
+ */
+export class AIv2MarkdownRenderer extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  constructor(private readonly options: AIv2MarkdownRendererOptions = {}) {
+    super();
+  }
+
+  #isSameOrigin(node: SDK.DOMModel.DOMNode): boolean {
+    if (!this.options.mainDocumentURL) {
+      return true;
+    }
+    const nodeDocumentURL = node.ownerDocument?.documentURL ?? '' as Platform.DevToolsPath.UrlString;
+    return AiAssistanceModel.AiUtils.isSameOrigin(this.options.mainDocumentURL, nodeDocumentURL);
+  }
+
+  #revealableLink(revealable: unknown, label: string): Lit.LitTemplate {
+    return html`<devtools-link @click=${(e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+      void Common.Revealer.reveal(revealable);
+    }}>${Platform.StringUtilities.trimEndWithMaxLength(label, 100)}</devtools-link>`;
+  }
+
+  #renderLink(href: string, text: string): Lit.LitTemplate|null {
+    const devtoolsLink = this.#renderDevToolsLink(href, text);
+    if (devtoolsLink) {
+      return devtoolsLink;
+    }
+
+    if (href.startsWith('#')) {
+      const parsed = this.#parseLink(href);
+      if (parsed) {
+        const resultPromise =
+            parsed.type === 'path' ? this.#linkifyPath(parsed.path, text) : this.#linkifyNode(parsed.nodeId, text);
+
+        return html`<span>${until(resultPromise.then(node => node || text), text)}</span>`;
+      }
+
+      if (this.options.lookupTraceEvent) {
+        const event = this.options.lookupTraceEvent(href.slice(1));
+        if (event) {
+          let label = text;
+          let title = '';
+          if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+            title = event.args.data.url;
+          } else {
+            label += ` (${event.name})`;
+          }
+
+          // eslint-disable-next-line @devtools/no-a-tags-in-lit
+          return html`<a href="#" draggable=false .title=${title} @click=${(e: Event) => {
+            e.stopPropagation();
+            void Common.Revealer.reveal(new SDK.TraceObject.RevealableEvent(event));
+          }}>${label}</a>`;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  #renderDevToolsLink(
+      href: string,
+      fallbackText: string,
+      ): Lit.LitTemplate|null {
+    if (href.startsWith('#req-')) {
+      const request = Logs.NetworkLog.NetworkLog.instance().requests().find(
+          req => req.requestId() === href.substring(5),
+      );
+
+      if (request) {
+        return this.#revealableLink(request, request.url());
+      }
+      return html`${fallbackText}`;
+    }
+    if (href.startsWith('#file-')) {
+      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
+          file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
+              Number(href.substring(6)));
+
+      if (file) {
+        return this.#revealableLink(file, file.name());
+      }
+      return html`${fallbackText}`;
+    }
+    return null;
+  }
+
+  #parseLink(href: string): ParsedLink|null {
+    if (href.startsWith('#path-')) {
+      return {type: 'path', path: href.replace('#path-', '')};
+    }
+    if (href.startsWith('#1,HTML')) {
+      return {type: 'path', path: href.slice(1)};
+    }
+
+    let nodeIdStr = '';
+    if (href.startsWith('#node-')) {
+      nodeIdStr = href.replace('#node-', '');
+    } else if (href.startsWith('#')) {
+      nodeIdStr = href.slice(1);
+    }
+
+    if (nodeIdStr.trim() !== '') {
+      const nodeId = Number(nodeIdStr);
+      if (Number.isInteger(nodeId)) {
+        return {type: 'node', nodeId: nodeId as Protocol.DOM.BackendNodeId};
+      }
+    }
+
+    return null;
+  }
+
+  async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Lit.LitTemplate|undefined> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
+    const node = domNodesMap?.get(backendNodeId);
+    if (!node) {
+      return;
+    }
+
+    if (this.options.mainFrameId && node.frameId() !== this.options.mainFrameId) {
+      return;
+    }
+
+    if (!this.#isSameOrigin(node)) {
+      return;
+    }
+
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+
+  async #linkifyPath(path: string, label: string): Promise<Lit.LitTemplate|undefined> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const nodeId = await domModel.pushNodeByPathToFrontend(path);
+    if (!nodeId) {
+      return;
+    }
+    const node = domModel.nodeForId(nodeId);
+    if (!node) {
+      return;
+    }
+    if (!this.#isSameOrigin(node)) {
+      return;
+    }
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (token.type === 'link') {
+      const link = this.#renderLink(token.href, token.text);
+      if (link) {
+        return link;
+      }
+    }
+
+    if (token.type === 'code') {
+      const lines = (token.text).split('\n');
+      if (lines[0]?.trim() === 'css') {
+        token.lang = 'css';
+        token.text = lines.slice(1).join('\n');
+      }
+    }
+
+    if (token.type === 'codespan') {
+      // LLM likes outputting the link inside a codespan block.
+      // Remove the codespan and render the link directly
+      const matches = token.text.match(/^\[(.*)\]\((.+)\)$/);
+      if (matches?.[2]) {
+        const link = this.#renderLink(
+            matches[2],
+            matches[1],
+        );
+        if (link) {
+          return link;
+        }
+      }
+    }
+
+    return super.templateForToken(token);
+  }
+}

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

@@ -14,8 +14,8 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type {
   AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LighthouseReportAiWidget,
-  NetworkRequestGeneralHeadersAiWidget, NetworkRequestsListAiWidget, PerfInsightAiWidget, PerformanceTraceAiWidget,
-  SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget,
+  NetworkRequestGeneralHeadersAiWidget, NetworkRequestsListAiWidget, NetworkTrackAiWidget, PerfInsightAiWidget,
+  PerformanceTraceAiWidget, SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget,
   TimelineEventSummaryAiWidget, TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
@@ -231,6 +231,10 @@ const UIStringsNotTranslate = {
    * @description Accessible label for the reveal button in the performance summary widget.
    */
   revealPerformanceSummary: 'Reveal performance summary',
+  /**
+   * @description Accessible label for the reveal button in the network track widget.
+   */
+  revealNetworkActivity: 'Reveal network activity',
   /**
    * @description Accessible label for the reveal button in the bottom up thread activity widget.
    */
@@ -295,6 +299,10 @@ const UIStringsNotTranslate = {
    * @description Title for the performance summary widget.
    */
   performanceSummary: 'Performance summary',
+  /**
+   * @description Title for the network activity summary widget.
+   */
+  networkActivitySummary: 'Network activity',
   /**
    * @description The title of the button that allows exporting the conversation for agents.
    */
@@ -1658,6 +1666,8 @@ export function getWidgetSignature(widget: AiWidget): string {
       return `${widget.name}:${widget.data.track}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
     case 'BOTTOM_UP_TREE':
       return `${widget.name}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
+    case 'NETWORK_TRACK':
+      return `${widget.name}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
     case 'SOURCE_FILE':
       return `${widget.name}:${widget.data.uiSourceCode.url()}`;
     case 'SOURCE_FILES_LIST':
@@ -1755,6 +1765,9 @@ async function renderWidgets(
       case 'BOTTOM_UP_TREE':
         response = await makeBottomUpTimelineTreeWidget(widgetData);
         break;
+      case 'NETWORK_TRACK':
+        response = await makeNetworkTrackWidget(widgetData);
+        break;
       case 'SOURCE_FILE':
         response = await makeSourceFileWidget(widgetData);
         break;
@@ -2316,6 +2329,30 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
   };
 }
 
+async function makeNetworkTrackWidget(widgetData: NetworkTrackAiWidget): Promise<WidgetMakerResponse|null> {
+  const {parsedTrace, bounds} = widgetData.data;
+  const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
+
+  // clang-format off
+  const template = html`
+    <devtools-performance-agent-network-track
+      .data=${{
+        parsedTrace,
+        bounds,
+        dataProvider,
+      } as TimelineComponents.NetworkTrackWidget.NetworkTrackWidgetData}
+    ></devtools-performance-agent-network-track>`;
+  // clang-format on
+
+  return {
+    renderedWidget: template,
+    revealable: new TimelineUtils.Helpers.RevealableTimeRange(bounds),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealNetworkActivity),
+    title: lockedString(UIStringsNotTranslate.networkActivitySummary),
+    jslogContext: 'network-track-widget',
+  };
+}
+
 async function makeLighthouseReportWidget(widgetData: LighthouseReportAiWidget): Promise<WidgetMakerResponse|null> {
   const reportEl =
       Lighthouse.LighthouseReportRenderer.LighthouseReportRenderer.renderLighthouseScores(widgetData.data.report);

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1797,6 +1797,8 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     super.onselect(selectedByUser);
     UI.UIUserMetrics.UIUserMetrics.instance().panelShown('dom-storage');
     this.resourcesPanel.showDOMStorage(this.domStorage);
+    const storageItem = this.#getStorageItem();
+    UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
     return false;
   }
 
@@ -1977,6 +1979,8 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     this.resourcesPanel.showCookies(this.target, this.#cookieDomain);
     UI.UIUserMetrics.UIUserMetrics.instance().panelShown(
         Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.cookies]);
+    const storageItem = this.#getStorageItem();
+    UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
     return false;
   }
 }

package/front_end/panels/application/CookieItemsView.ts

@@ -50,6 +50,14 @@ const UIStrings = {
    * @description Label for checkbox to show URL-decoded cookie values
    */
   showUrlDecoded: 'Show URL-decoded',
+  /**
+   * @description Text of a context menu item to start a chat with AI
+   */
+  startAChat: 'Start a chat',
+  /**
+   * @description Text of a context menu item to explain a web cookie with AI
+   */
+  explainCookie: 'Explain this cookie',
   /**
    * @description Text in Cookie Items View of the Application panel to indicate that no cookie has been selected for preview
    */
@@ -174,6 +182,10 @@ interface CookieItemsViewInput {
   onDeleteSelectedItems: () => void;
   onDeleteAllItems: () => void;
   onRefreshItems: () => void;
+  aiButtonIsEnabled: boolean;
+  onPopulateAiContextMenu: (cookie: SDK.Cookie.Cookie, contextMenu: UI.ContextMenu.ContextMenu) => void;
+  onAiButtonClick: (cookie: SDK.Cookie.Cookie, event: Event) => void;
+  aiButtonTitle?: string;
   selectedCookie: SDK.Cookie.Cookie|null;
 }
 
@@ -203,6 +215,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             refreshCallback: input.onRefresh,
             selectedCallback: input.onSelect,
             deleteCallback: input.onDelete,
+            aiButtonIsEnabled: input.aiButtonIsEnabled,
+            onAiButtonClick: input.onAiButtonClick,
+            onPopulateAiContextMenu: input.onPopulateAiContextMenu,
+            aiButtonTitle: input.aiButtonTitle,
             editable: true,
           })}
           ></devtools-widget>
@@ -220,8 +236,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       </devtools-split-view>
     </devtools-widget>
   `,
-      // clang-format on
-      target, {container: {attributes: {jslog: `${VisualLogging.pane('cookies-data')}`}}});
+         // clang-format on
+         target, {container: {attributes: {jslog: `${VisualLogging.pane('cookies-data')}`}}});
 };
 
 export class CookieItemsView extends UI.Widget.VBox {
@@ -261,7 +277,6 @@ export class CookieItemsView extends UI.Widget.VBox {
     this.cookieDomain = domain;
     this.refreshItems();
     this.model.addEventListener(SDK.CookieModel.Events.COOKIE_LIST_UPDATED, this.onCookieListUpdate, this);
-    this.updateAiAssistanceContext(null);
   }
 
   override performUpdate(): void {
@@ -296,6 +311,12 @@ export class CookieItemsView extends UI.Widget.VBox {
       onDeleteAllItems: this.deleteAllItems.bind(this),
       onRefreshItems: this.refreshItems.bind(this),
       selectedCookie: this.selectedCookie,
+      aiButtonIsEnabled: this.isAiButtonEnabled(),
+      onPopulateAiContextMenu: this.#onPopulateAiContextMenu.bind(this),
+      onAiButtonClick: this.#onAiButtonClick.bind(this),
+      aiButtonTitle: this.isAiButtonEnabled() ?
+          UI.ActionRegistry.ActionRegistry.instance().getAction('ai-assistance.storage-floating-button').title() :
+          undefined,
     };
 
     this.view(input, output, this.contentElement);
@@ -304,7 +325,6 @@ export class CookieItemsView extends UI.Widget.VBox {
   override wasShown(): void {
     super.wasShown();
     this.refreshItems();
-    this.updateAiAssistanceContext(this.selectedCookie);
   }
 
   private showPreview(cookie: SDK.Cookie.Cookie|null): void {
@@ -313,10 +333,9 @@ export class CookieItemsView extends UI.Widget.VBox {
     }
     this.selectedCookie = cookie;
     this.requestUpdate();
-    this.updateAiAssistanceContext(cookie);
   }
 
-  private updateAiAssistanceContext(cookie: SDK.Cookie.Cookie|null): void {
+  #updateAiAssistanceContext(cookie: SDK.Cookie.Cookie|null): void {
     if (cookie && cookie.httpOnly()) {
       UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
       return;
@@ -342,6 +361,7 @@ export class CookieItemsView extends UI.Widget.VBox {
     }
     this.#toolbar.setCanDeleteSelected(Boolean(selectedCookie));
     this.showPreview(selectedCookie);
+    this.#updateAiAssistanceContext(selectedCookie);
   }
 
   private async saveCookie(newCookie: SDK.Cookie.Cookie, oldCookie: SDK.Cookie.Cookie|null): Promise<boolean> {
@@ -393,6 +413,7 @@ export class CookieItemsView extends UI.Widget.VBox {
    * This will only delete the currently visible cookies.
    */
   deleteAllItems(): void {
+    UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
     this.showPreview(null);
     void this.model.deleteCookies(this.shownCookies);
   }
@@ -412,4 +433,32 @@ export class CookieItemsView extends UI.Widget.VBox {
   refreshItems(): void {
     void this.model.getCookiesForDomain(this.cookieDomain, true).then(this.updateWithCookies.bind(this));
   }
+
+  private isAiButtonEnabled(): boolean {
+    return UI.ActionRegistry.ActionRegistry.instance().hasAction('ai-assistance.storage-floating-button');
+  }
+
+  #onPopulateAiContextMenu(cookie: SDK.Cookie.Cookie, contextMenu: UI.ContextMenu.ContextMenu): void {
+    const openAiAssistanceId = 'ai-assistance.application-panel-context';
+    if (this.isAiButtonEnabled() && UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+      this.#updateAiAssistanceContext(cookie);
+      if (UI.Context.Context.instance().flavor(AiAssistanceModel.StorageItem.StorageItem)) {
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+        submenu.defaultSection().appendItem(
+            i18nString(UIStrings.explainCookie), () => action.execute({prompt: 'What is the purpose of this cookie?'}),
+            {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.cookies'});
+      }
+    }
+  }
+
+  #onAiButtonClick(cookie: SDK.Cookie.Cookie, _event: Event): void {
+    this.#updateAiAssistanceContext(cookie);
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    const storageFloatingButtonId = 'ai-assistance.storage-floating-button';
+    if (actionRegistry.hasAction(storageFloatingButtonId)) {
+      void actionRegistry.getAction(storageFloatingButtonId).execute();
+    }
+  }
 }

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -55,6 +55,14 @@ const UIStrings = {
    * @description Text for announcing a DOM Storage key/value item has been deleted
    */
   domStorageItemDeleted: 'The storage item was deleted.',
+  /**
+   * @description Text of a context menu item to start a chat with AI
+   */
+  startAChat: 'Start a chat',
+  /**
+   * @description Text of a context menu item to explain a storage item of a storage bucket with AI
+   */
+  explainItem: 'Explain this item',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/DOMStorageItemsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -111,7 +119,6 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
           SDK.DOMStorageModel.DOMStorage.Events.DOM_STORAGE_ITEM_UPDATED, this.domStorageItemUpdated, this),
     ];
     this.refreshItems();
-    this.selectedItemChanged(null);
   }
 
   private domStorageItemsCleared(): void {
@@ -174,13 +181,7 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     this.showItems(filteredItems);
   }
 
-  override deleteAllItems(): void {
-    this.domStorage.clear();
-    // explicitly clear the view because the event won't be fired when it has no items
-    this.domStorageItemsCleared();
-  }
-
-  protected override selectedItemChanged(item: {key: string, value: string}|null): void {
+  #setAiStorageContext(item: {key: string, value: string}|null): void {
     const storageKey = this.domStorage.storageKey;
     if (!storageKey) {
       return;
@@ -205,10 +206,44 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 
+  override deleteAllItems(): void {
+    this.domStorage.clear();
+    // explicitly clear the view because the event won't be fired when it has no items
+    this.domStorageItemsCleared();
+  }
+
+  protected override selectedItemChanged(item: {key: string, value: string}|null): void {
+    this.#setAiStorageContext(item);
+  }
+
   protected override isAiButtonEnabled(): boolean {
     return UI.ActionRegistry.ActionRegistry.instance().hasAction('ai-assistance.storage-floating-button');
   }
 
+  protected override populateContextMenu(item: {key: string, value: string},
+                                         contextMenu: UI.ContextMenu.ContextMenu): void {
+    const openAiAssistanceId = 'ai-assistance.application-panel-context';
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    if (actionRegistry.hasAction(openAiAssistanceId)) {
+      this.#setAiStorageContext(item);
+      const action = actionRegistry.getAction(openAiAssistanceId);
+      const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+      submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+      submenu.defaultSection().appendItem(i18nString(UIStrings.explainItem),
+                                          () => action.execute({prompt: 'Explain this storage item.'}),
+                                          {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.storage'});
+    }
+  }
+
+  protected override onAiButtonClick(item: {key: string, value: string}, _event: Event): void {
+    this.#setAiStorageContext(item);
+    const aiFloatingActionId = 'ai-assistance.storage-floating-button';
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    if (actionRegistry.hasAction(aiFloatingActionId)) {
+      void actionRegistry.getAction(aiFloatingActionId).execute();
+    }
+  }
+
   protected removeItem(key: string): void {
     this.domStorage?.removeItem(key);
   }

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -92,6 +92,7 @@ export interface ViewInput {
   onDelete: (key: string) => void;
   onDeleteSelected: () => void;
   onDeleteAll: () => void;
+  onContextMenu?: (item: {key: string, value: string}, contextMenu: UI.ContextMenu.ContextMenu) => void;
   jslog?: string;
   classes?: string[];
   aiButtonTitle?: string;
@@ -175,6 +176,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                           @edit=${(e: CustomEvent<{columnId: string, valueBeforeEditing: string, newText: string}>) =>
                             input.onEdit(item.key, item.value, e.detail.columnId, e.detail.valueBeforeEditing, e.detail.newText)}
                           @delete=${() => input.onDelete(item.key)}
+                          @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => input.onContextMenu?.(item, e.detail)}
                           selected=${(input.selectedKey === item.key) || nothing}>
                         <td>${input.showAiButton ? html`
                             <span class="ai-button-container">
@@ -198,8 +200,8 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                ${input.preview?.element}
               </devtools-widget>
             </devtools-split-view>`,
-            // clang-format on
-            target, {container: {attributes: {jslog: input.jslog}, classes: input.classes}});
+               // clang-format on
+               target, {container: {attributes: {jslog: input.jslog}, classes: input.classes}});
       };
     }
     super();
@@ -246,13 +248,13 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
         void this.#previewEntry(item);
         this.selectedItemChanged(item);
       },
-      onAiButtonClick: (item: {key: string, value: string}, event: Event) => {
-        event.stopPropagation();
-        viewInput.onSelect(item);
-        const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
-        if (actionRegistry.hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID)) {
-          void actionRegistry.getAction(STORAGE_FLOATING_BUTTON_ACTION_ID).execute();
-        }
+      onAiButtonClick: this.isAiButtonEnabled() ?
+          (item: {key: string, value: string}, event: Event) => {
+            this.onAiButtonClick(item, event);
+          } :
+          undefined,
+      onContextMenu: (item: {key: string, value: string}, contextMenu: UI.ContextMenu.ContextMenu) => {
+        this.populateContextMenu(item, contextMenu);
       },
 
       onSort: (ascending: boolean) => {
@@ -284,6 +286,12 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     return false;
   }
 
+  protected populateContextMenu(_item: {key: string, value: string}, _contextMenu: UI.ContextMenu.ContextMenu): void {
+  }
+
+  protected onAiButtonClick(_item: {key: string, value: string}, _event: Event): void {
+  }
+
   protected get toolbar(): StorageItemsToolbar|undefined {
     return this.#toolbar;
   }