feat: add filters and pagination to the console messages tool

.github/workflows/pre-release.yml

@@ -9,6 +9,7 @@ on:
 
 jobs:
   pre-release:
+    name: 'Verify MCP server schema unchanged'
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository

docs/tool-reference.md

@@ -258,7 +258,7 @@
 
 **Parameters:**
 
-- **url** (string) **(required)**: The URL of the request.
+- **reqid** (number) **(required)**: The reqid of a request on the page from the listed network requests
 
 ---
 

src/McpContext.ts

@@ -155,19 +155,8 @@ export class McpContext implements Context {
     await page.close({runBeforeUnload: false});
   }
 
-  getNetworkRequestByUrl(url: string): HTTPRequest {
-    const requests = this.getNetworkRequests();
-    if (!requests.length) {
-      throw new Error('No requests found for selected page');
-    }
-
-    for (const request of requests) {
-      if (request.url() === url) {
-        return request;
-      }
-    }
-
-    throw new Error('Request not found for selected page');
+  getNetworkRequestById(reqid: number): HTTPRequest {
+    return this.#networkCollector.getById(this.getSelectedPage(), reqid);
   }
 
   setNetworkConditions(conditions: string | null): void {
@@ -426,4 +415,8 @@ export class McpContext implements Context {
     );
     return waitForHelper.waitForEventsAfterAction(action);
   }
+
+  getNetworkRequestStableId(request: HTTPRequest): number {
+    return this.#networkCollector.getIdForResource(request);
+  }
 }

src/McpResponse.ts

@@ -24,7 +24,7 @@ import type {ImageContentData, Response} from './tools/ToolDefinition.js';
 import {paginate, type PaginationOptions} from './utils/pagination.js';
 
 interface NetworkRequestData {
-  networkRequestUrl: string;
+  networkRequestStableId: number;
   requestBody?: string;
   responseBody?: string;
 }
@@ -33,15 +33,18 @@ export class McpResponse implements Response {
   #includePages = false;
   #includeSnapshot = false;
   #attachedNetworkRequestData?: NetworkRequestData;
-  #includeConsoleData = false;
   #textResponseLines: string[] = [];
-  #formattedConsoleData?: string[];
   #images: ImageContentData[] = [];
   #networkRequestsOptions?: {
     include: boolean;
     pagination?: PaginationOptions;
     resourceTypes?: ResourceType[];
   };
+  #consoleDataOptions?: {
+    include: boolean;
+    pagination?: PaginationOptions;
+    types?: string[];
+  };
 
   setIncludePages(value: boolean): void {
     this.#includePages = value;
@@ -77,13 +80,35 @@ export class McpResponse implements Response {
     };
   }
 
-  setIncludeConsoleData(value: boolean): void {
-    this.#includeConsoleData = value;
+  setIncludeConsoleData(
+    value: boolean,
+    options?: {
+      pageSize?: number;
+      pageIdx?: number;
+      types?: string[];
+    },
+  ): void {
+    if (!value) {
+      this.#consoleDataOptions = undefined;
+      return;
+    }
+
+    this.#consoleDataOptions = {
+      include: value,
+      pagination:
+        options?.pageSize || options?.pageIdx
+          ? {
+              pageSize: options.pageSize,
+              pageIdx: options.pageIdx,
+            }
+          : undefined,
+      types: options?.types,
+    };
   }
 
-  attachNetworkRequest(url: string): void {
+  attachNetworkRequest(reqid: number): void {
     this.#attachedNetworkRequestData = {
-      networkRequestUrl: url,
+      networkRequestStableId: reqid,
     };
   }
 
@@ -96,14 +121,20 @@ export class McpResponse implements Response {
   }
 
   get includeConsoleData(): boolean {
-    return this.#includeConsoleData;
+    return this.#consoleDataOptions?.include ?? false;
   }
-  get attachedNetworkRequestUrl(): string | undefined {
-    return this.#attachedNetworkRequestData?.networkRequestUrl;
+  get attachedNetworkRequestId(): number | undefined {
+    return this.#attachedNetworkRequestData?.networkRequestStableId;
   }
   get networkRequestsPageIdx(): number | undefined {
     return this.#networkRequestsOptions?.pagination?.pageIdx;
   }
+  get consoleMessagesPageIdx(): number | undefined {
+    return this.#consoleDataOptions?.pagination?.pageIdx;
+  }
+  get consoleMessagesTypes(): string[] | undefined {
+    return this.#consoleDataOptions?.types;
+  }
 
   appendResponseLine(value: string): void {
     this.#textResponseLines.push(value);
@@ -136,11 +167,9 @@ export class McpResponse implements Response {
       await context.createTextSnapshot();
     }
 
-    let formattedConsoleMessages: string[];
-
-    if (this.#attachedNetworkRequestData?.networkRequestUrl) {
-      const request = context.getNetworkRequestByUrl(
-        this.#attachedNetworkRequestData.networkRequestUrl,
+    if (this.#attachedNetworkRequestData?.networkRequestStableId) {
+      const request = context.getNetworkRequestById(
+        this.#attachedNetworkRequestData.networkRequestStableId,
       );
 
       this.#attachedNetworkRequestData.requestBody =
@@ -153,23 +182,13 @@ export class McpResponse implements Response {
       }
     }
 
-    if (this.#includeConsoleData) {
-      const consoleMessages = context.getConsoleData();
-      if (consoleMessages) {
-        formattedConsoleMessages = await Promise.all(
-          consoleMessages.map(message => formatConsoleEvent(message)),
-        );
-        this.#formattedConsoleData = formattedConsoleMessages;
-      }
-    }
-
-    return this.format(toolName, context);
+    return await this.format(toolName, context);
   }
 
-  format(
+  async format(
     toolName: string,
     context: McpContext,
-  ): Array<TextContent | ImageContent> {
+  ): Promise<Array<TextContent | ImageContent>> {
     const response = [`# ${toolName} response`];
     for (const line of this.#textResponseLines) {
       response.push(line);
@@ -246,17 +265,44 @@ Call ${handleDialog.name} to handle it before continuing.`);
         );
         response.push(...data.info);
         for (const request of data.items) {
-          response.push(getShortDescriptionForRequest(request));
+          response.push(
+            getShortDescriptionForRequest(
+              request,
+              context.getNetworkRequestStableId(request),
+            ),
+          );
         }
       } else {
         response.push('No requests found.');
       }
     }
 
-    if (this.#includeConsoleData && this.#formattedConsoleData) {
+    if (this.#consoleDataOptions?.include) {
+      let messages = context.getConsoleData();
+
+      if (this.#consoleDataOptions.types?.length) {
+        const normalizedTypes = new Set(this.#consoleDataOptions.types);
+        messages = messages.filter(message => {
+          if (!('type' in message)) {
+            return normalizedTypes.has('error');
+          }
+          const type = message.type();
+          return normalizedTypes.has(type);
+        });
+      }
+
       response.push('## Console messages');
-      if (this.#formattedConsoleData.length) {
-        response.push(...this.#formattedConsoleData);
+      if (messages.length) {
+        const data = this.#dataWithPagination(
+          messages,
+          this.#consoleDataOptions.pagination,
+        );
+        response.push(...data.info);
+        response.push(
+          ...(await Promise.all(
+            data.items.map(message => formatConsoleEvent(message)),
+          )),
+        );
       } else {
         response.push('<no console messages found>');
       }
@@ -304,12 +350,12 @@ Call ${handleDialog.name} to handle it before continuing.`);
 
   #getIncludeNetworkRequestsData(context: McpContext): string[] {
     const response: string[] = [];
-    const url = this.#attachedNetworkRequestData?.networkRequestUrl;
+    const url = this.#attachedNetworkRequestData?.networkRequestStableId;
     if (!url) {
       return response;
     }
 
-    const httpRequest = context.getNetworkRequestByUrl(url);
+    const httpRequest = context.getNetworkRequestById(url);
     response.push(`## Request ${httpRequest.url()}`);
     response.push(`Status:  ${getStatusFromRequest(httpRequest)}`);
     response.push(`### Request Headers`);
@@ -347,7 +393,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
       let indent = 0;
       for (const request of redirectChain.reverse()) {
         response.push(
-          `${'  '.repeat(indent)}${getShortDescriptionForRequest(request)}`,
+          `${'  '.repeat(indent)}${getShortDescriptionForRequest(request, context.getNetworkRequestStableId(request))}`,
         );
         indent++;
       }

src/PageCollector.ts

@@ -17,6 +17,21 @@ export type ListenerMap<EventMap extends PageEvents = PageEvents> = {
   [K in keyof EventMap]?: (event: EventMap[K]) => void;
 };
 
+function createIdGenerator() {
+  let i = 1;
+  return () => {
+    if (i === Number.MAX_SAFE_INTEGER) {
+      i = 0;
+    }
+    return i++;
+  };
+}
+
+export const stableIdSymbol = Symbol('stableIdSymbol');
+type WithSymbolId<T> = T & {
+  [stableIdSymbol]?: number;
+};
+
 export class PageCollector<T> {
   #browser: Browser;
   #listenersInitializer: (
@@ -28,7 +43,7 @@ export class PageCollector<T> {
    * As we use the reference to it.
    * Use methods that manipulate the array in place.
    */
-  protected storage = new WeakMap<Page, T[]>();
+  protected storage = new WeakMap<Page, Array<WithSymbolId<T>>>();
 
   constructor(
     browser: Browser,
@@ -56,7 +71,6 @@ export class PageCollector<T> {
       if (!page) {
         return;
       }
-      console.log('destro');
       this.#cleanupPageDestroyed(page);
     });
   }
@@ -70,10 +84,14 @@ export class PageCollector<T> {
       return;
     }
 
-    const stored: T[] = [];
+    const idGenerator = createIdGenerator();
+    const stored: Array<WithSymbolId<T>> = [];
     this.storage.set(page, stored);
+
     const listeners = this.#listenersInitializer(value => {
-      stored.push(value);
+      const withId = value as WithSymbolId<T>;
+      withId[stableIdSymbol] = idGenerator();
+      stored.push(withId);
     });
     listeners['framenavigated'] = (frame: Frame) => {
       // Only reset the storage on main frame navigation
@@ -111,6 +129,25 @@ export class PageCollector<T> {
   getData(page: Page): T[] {
     return this.storage.get(page) ?? [];
   }
+
+  getIdForResource(resource: WithSymbolId<T>): number {
+    return resource[stableIdSymbol] ?? -1;
+  }
+
+  getById(page: Page, stableId: number): T {
+    const data = this.storage.get(page);
+    if (!data || !data.length) {
+      throw new Error('No requests found for selected page');
+    }
+
+    for (const collected of data) {
+      if (collected[stableIdSymbol] === stableId) {
+        return collected;
+      }
+    }
+
+    throw new Error('Request not found for selected page');
+  }
 }
 
 export class NetworkCollector extends PageCollector<HTTPRequest> {