chrome-devtools-frontend 1.0.1642845 → 1.0.1643099

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|
@@ -658,7 +657,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   // NodeJS debugging does not have Elements panel, thus this action might not exist.
   #toggleSearchElementAction?: UI.ActionRegistration.Action;
   #aidaClient: Host.AidaClient.AidaClient;
-  #conversationSummaryAgent?: AiAssistanceModel.ConversationSummaryAgent.ConversationSummaryAgent;
+  #conversationSummary?: AiAssistanceModel.ConversationSummary.ConversationSummary;
   #viewOutput: PanelViewOutput = {};
   #serverSideLoggingEnabled = isAiAssistanceServerSideLoggingEnabled();
   #aiAssistanceEnabledSetting: Common.Settings.Setting<boolean>|undefined;
@@ -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;
 
@@ -785,17 +784,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           markdownRenderer,
           conversationMarkdown: this.#conversation.getConversationMarkdown(),
           generateConversationSummary: async (markdown: string) => {
-            if (!this.#conversationSummaryAgent) {
-              this.#conversationSummaryAgent = new AiAssistanceModel.ConversationSummaryAgent.ConversationSummaryAgent({
+            if (!this.#conversationSummary) {
+              this.#conversationSummary = new AiAssistanceModel.ConversationSummary.ConversationSummary({
                 aidaClient: this.#aidaClient,
                 serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
               });
             }
-            return await this.#conversationSummaryAgent.summarizeConversation(markdown);
+            return await this.#conversationSummary.summarizeConversation(markdown);
           },
-          onTextSubmit: async (
-              text: string, imageInput?: Host.AidaClient.Part,
-              multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
+          onTextSubmit: async (text: string, imageInput?: Host.AidaClient.Part,
+                               multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
             const submit = (): void => {
               Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
               void this.#startConversation(text, imageInput, multimodalInputType);
@@ -1117,7 +1115,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 +1223,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 +1574,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 +1730,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/ai_assistance/components/ChatMessage.ts

@@ -14,9 +14,9 @@ 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, PerfInsightAiWidget, PerformanceTraceAiWidget, SourceCodeAiWidget,
-  SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget, TimelineEventSummaryAiWidget,
-  TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+  NetworkRequestGeneralHeadersAiWidget, NetworkRequestsListAiWidget, 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';
 import * as Formatter from '../../../models/formatter/formatter.js';
@@ -30,6 +30,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.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';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -414,6 +415,14 @@ const UIStringsNotTranslate = {
    * @description Title for the character set declaration widget.
    */
   characterSet: 'Character set declaration',
+  /**
+   * @description Title for the network requests list widget.
+   */
+  networkRequests: 'Network requests',
+  /**
+   * @description Accessible label for the reveal button in the network requests list widget.
+   */
+  revealFirstNetworkRequest: 'Reveal first network request in Network panel',
   /**
    * @description Title for the source files list widget.
    */
@@ -1300,7 +1309,12 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     if (response === null) {
       return;
     }
-    void Common.Revealer.reveal(response?.revealable);
+    Common.Revealer.reveal(response?.revealable).catch((error: Error) => {
+      if (!error.message) {
+        return;
+      }
+      Snackbars.Snackbar.Snackbar.show({message: error.message});
+    });
   }
 
   const classes = Lit.Directives.classMap({
@@ -1466,6 +1480,79 @@ async function makeSourceFilesListWidget(widgetData: SourceFilesListAiWidget): P
   };
 }
 
+const expandedNetworkRequestsWidgets = new WeakSet<NetworkRequestsListAiWidget>();
+
+// A widget with a table of the list of network requests sent to the agent.
+// Only show 15 requests maximum in collapsed version. The rest of the requests
+// will be hidden unless the user clicks "Show all".
+async function makeNetworkRequestsListWidget(widgetData: NetworkRequestsListAiWidget):
+    Promise<WidgetMakerResponse|null> {
+  const requests = widgetData.data.requests;
+  if (requests.length === 0) {
+    return null;
+  }
+
+  const isExpanded = expandedNetworkRequestsWidgets.has(widgetData);
+  // We only want just expanded widget to be expanded, if the user closed and reopened the walkthrought, the widget should be collapsed again.
+  // Therefore, after rendering the widget, we remove the widget from the set of expanded widgets so that it is collapsed on next render.
+  if (isExpanded) {
+    expandedNetworkRequestsWidgets.delete(widgetData);
+  }
+  const displayedRequests = isExpanded ? requests : requests.slice(0, 15);
+
+  // The table contains same fields as the ones sent to the agent.
+  // clang-format off
+  const renderedWidget = html`
+    <div class="network-requests-widget">
+      <devtools-data-grid striped inline>
+        <table>
+          <tr>
+            <th id="name" weight="4">${i18n.i18n.lockedString('Name')}</th>
+            <th id="status" weight="1">${i18n.i18n.lockedString('Status')}</th>
+            <th id="size" weight="1">${i18n.i18n.lockedString('Size')}</th>
+            <th id="time" weight="1">${i18n.i18n.lockedString('Time')}</th>
+          </tr>
+          ${displayedRequests.map(request => html`
+            <tr>
+              <td>${request.name()}</td>
+              <td>${request.statusCode}</td>
+              <td>${i18n.ByteUtilities.formatBytesToKb(request.transferSize)}</td>
+              <td>${i18n.TimeUtilities.secondsToString(request.duration)}</td>
+            </tr>
+          `)}
+        </table>
+      </devtools-data-grid>
+      ${!isExpanded && requests.length > 15 ? html`
+        <div class="show-all-container">
+          <button class="show-all-widget-requests-button text-button"
+            jslog=${VisualLogging.action('show-all-widget-requests-button').track({click: true})}
+            @click=${(e: Event) => {
+              expandedNetworkRequestsWidgets.add(widgetData);
+              const widgetEl = (e.target as HTMLElement).closest('.widget');
+              if (widgetEl) {
+                const widget = UI.Widget.Widget.get(widgetEl) as ChatMessage;
+                if (widget && widget.performUpdate) {
+                  void widget.performUpdate();
+                }
+              }
+            }}>
+            ${i18n.i18n.lockedString(`Show all ${requests.length} network requests`)}
+          </button>
+        </div>
+      ` : Lit.nothing}
+    </div>
+  `;
+  // clang-format on
+
+  return {
+    renderedWidget,
+    title: lockedString(UIStringsNotTranslate.networkRequests),
+    revealable: requests[0],
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealFirstNetworkRequest),
+    jslogContext: 'network-requests-list-widget',
+  };
+}
+
 function renderNetworkRequestPreview(networkRequest: NonNullable<DomTreeAiWidget['data']['networkRequest']>):
     Lit.TemplateResult {
   const filename = networkRequest.url.split('/').pop() || networkRequest.url;
@@ -1583,6 +1670,8 @@ export function getWidgetSignature(widget: AiWidget): string {
       return `${widget.name}:${widget.data.request.requestId()}`;
     case 'SOURCE_CODE':
       return `${widget.name}:${widget.data.url}:${widget.data.line ?? ''}:${widget.data.column ?? ''}`;
+    case 'NETWORK_REQUESTS_LIST':
+      return `${widget.name}:${widget.data.requests.map(r => r.requestId()).join(',')}`;
     default:
       Platform.assertNever(widget, 'Unknown AiWidget name');
   }
@@ -1672,6 +1761,9 @@ async function renderWidgets(
       case 'SOURCE_FILES_LIST':
         response = await makeSourceFilesListWidget(widgetData);
         break;
+      case 'NETWORK_REQUESTS_LIST':
+        response = await makeNetworkRequestsListWidget(widgetData);
+        break;
       case 'LIGHTHOUSE_REPORT':
         response = await makeLighthouseReportWidget(widgetData);
         break;

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -624,4 +624,10 @@
       display: none;
     }
   }
+
+  .network-requests-widget {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-4);
+  }
 }

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