Emit aggregated issue

Author: Natallia Harshunova

src/DevtoolsUtils.ts

@@ -3,6 +3,13 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+
+import {
+  type Issue,
+  type IssuesManager,
+  Common
+} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+
 export function extractUrlLikeFromDevToolsTitle(
   title: string,
 ): string | undefined {
@@ -49,3 +56,13 @@ function normalizeUrl(url: string): string {
 
   return result;
 }
+
+/**
+ * A mock implementation of an issues manager that only implements the methods
+ * that are actually used by the IssuesAggregator
+ */
+export class FakeIssuesManager extends Common.ObjectWrapper.ObjectWrapper<IssuesManager.EventTypes> {
+  issues(): Issue.Issue[] {
+    return [];
+  }
+}

src/McpContext.ts

@@ -7,7 +7,7 @@ import fs from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
 
-import {type Issue} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+import {type AggregatedIssue} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
 
 import {extractUrlLikeFromDevToolsTitle, urlsEqual} from './DevtoolsUtils.js';
 import type {ListenerMap} from './PageCollector.js';
@@ -94,7 +94,7 @@ export class McpContext implements Context {
   // The most recent snapshot.
   #textSnapshot: TextSnapshot | null = null;
   #networkCollector: NetworkCollector;
-  #consoleCollector: PageCollector<ConsoleMessage | Error | Issue.Issue>;
+  #consoleCollector: PageCollector<ConsoleMessage | Error | AggregatedIssue>;
 
   #isRunningTrace = false;
   #networkConditionsMap = new WeakMap<Page, string>();
@@ -203,16 +203,16 @@ export class McpContext implements Context {
 
   getConsoleData(
     includePreservedMessages?: boolean,
-  ): Array<ConsoleMessage | Error | Issue.Issue> {
+  ): Array<ConsoleMessage | Error | AggregatedIssue> {
     const page = this.getSelectedPage();
     return this.#consoleCollector.getData(page, includePreservedMessages);
   }
 
-  getConsoleMessageStableId(message: ConsoleMessage | Error | Issue.Issue): number {
+  getConsoleMessageStableId(message: ConsoleMessage | Error | AggregatedIssue): number {
     return this.#consoleCollector.getIdForResource(message);
   }
 
-  getConsoleMessageById(id: number): ConsoleMessage | Error | Issue.Issue {
+  getConsoleMessageById(id: number): ConsoleMessage | Error | AggregatedIssue {
     return this.#consoleCollector.getById(this.getSelectedPage(), id);
   }
 

src/McpResponse.ts

@@ -3,7 +3,9 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Issue } from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+import {
+  AggregatedIssue, Marked, MarkdownIssueDescription
+} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
 
 import type {ConsoleMessageData} from './formatters/consoleFormatter.js';
 import {
@@ -272,7 +274,10 @@ export class McpResponse implements Response {
           if ('type' in message) {
             return normalizedTypes.has(message.type());
           }
-          return normalizedTypes.has('error'); // TODO add filtering
+          if (message instanceof AggregatedIssue) {
+            return normalizedTypes.has('issue');
+          }
+          return normalizedTypes.has('error');
         });
       }
 
@@ -298,16 +303,27 @@ export class McpResponse implements Response {
               ),
             };
           }
-          if (item instanceof Issue.Issue) {
-            const descriptionFile = item.getDescription()?.file;
-            const description = descriptionFile
-              ? getIssueDescription(descriptionFile)
+          if (item instanceof AggregatedIssue) {
+            const count = item.getAggregatedIssuesCount();
+            const filename = item.getDescription()?.file;
+            const rawMarkdown = filename
+              ? getIssueDescription(filename)
               : null;
+            if (!rawMarkdown) {
+            return {
+              consoleMessageStableId,
+              type: 'issue',
+              message: `${item.code()} (count: ${count})`,
+              args: [],
+            };
+            }
+            const markdownAst = Marked.Marked.lexer(rawMarkdown);
+            const title = MarkdownIssueDescription.findTitleFromMarkdownAst(markdownAst);
             return {
               consoleMessageStableId,
               type: 'issue',
-              message: item.primaryKey(),
-              args: description ? [description] : [],
+              message: `${title} (count: ${count})`,
+              args: [],
             };
           }
           return {

src/PageCollector.ts

@@ -4,8 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {IssuesManager, Issue} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+import {
+  type AggregatedIssue,
+  AggregatorEvents,
+  IssuesManager,
+  IssueAggregator,
+} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
 
+import {FakeIssuesManager} from './DevtoolsUtils.js';
 import {
   type Browser,
   type Frame,
@@ -16,7 +22,7 @@ import {
 } from './third_party/index.js';
 
 interface PageEvents extends PuppeteerPageEvents {
-  issue: Issue.Issue;
+  issue: AggregatedIssue;
 }
 
 export type ListenerMap<EventMap extends PageEvents = PageEvents> = {
@@ -47,11 +53,10 @@ export class PageCollector<T> {
   #seenIssueKeys = new WeakMap<Page, Set<string>>();
   #maxNavigationSaved = 3;
 
-  /**
-   * This maps a Page to a list of navigations with a sub-list
-   * of all collected resources.
-   * The newer navigations come first.
-   */
+  // Store an aggregator and a mock manager for each page.
+  #issuesAggregators = new WeakMap<Page, IssueAggregator>();
+  #mockIssuesManagers = new WeakMap<Page, FakeIssuesManager>();
+
   protected storage = new WeakMap<Page, Array<Array<WithSymbolId<T>>>>();
 
   constructor(
@@ -92,18 +97,31 @@ export class PageCollector<T> {
   }
 
   async #initializePage(page: Page) {
-    await this.subscribeForIssues(page);
     const idGenerator = createIdGenerator();
     const storedLists: Array<Array<WithSymbolId<T>>> = [[]];
     this.storage.set(page, storedLists);
 
-    const listeners = this.#listenersInitializer(value => {
+    // This is the single function responsible for adding items to storage.
+    const collector = (value: T) => {
       const withId = value as WithSymbolId<T>;
-      withId[stableIdSymbol] = idGenerator();
+      // Assign an ID only if it's a new item.
+      if (!withId[stableIdSymbol]) {
+        withId[stableIdSymbol] = idGenerator();
+      }
 
       const navigations = this.storage.get(page) ?? [[]];
-      navigations[0].push(withId);
-    });
+      const currentNavigation = navigations[0];
+
+      // The aggregator sends the same object instance for updates, so we just
+      // need to ensure it's in the list.
+      if (!currentNavigation.includes(withId)) {
+        currentNavigation.push(withId);
+      }
+    };
+
+    await this.subscribeForIssues(page);
+
+    const listeners = this.#listenersInitializer(collector);
 
     listeners['framenavigated'] = (frame: Frame) => {
       // Only split the storage on main frame navigation
@@ -121,22 +139,44 @@ export class PageCollector<T> {
   }
 
   protected async subscribeForIssues(page: Page) {
-    if (this instanceof NetworkCollector) return;
+    if (this instanceof NetworkCollector) {
+      return;
+    }
     if (!this.#seenIssueKeys.has(page)) {
       this.#seenIssueKeys.set(page, new Set());
     }
+
+    const mockManager = new FakeIssuesManager();
+    // @ts-expect-error Aggregator receives partial IssuesManager
+    const aggregator = new IssueAggregator(mockManager);
+    this.#mockIssuesManagers.set(page, mockManager);
+    this.#issuesAggregators.set(page, aggregator);
+
+    aggregator.addEventListener(
+      AggregatorEvents.AGGREGATED_ISSUE_UPDATED,
+      event => {
+        page.emit('issue', event.data);
+      },
+    );
+
     const session = await page.createCDPSession();
-    session.on('Audits.issueAdded', data => {// TODO unsubscribe
-      // @ts-expect-error Types of protocol from Puppeteer and CDP are incopatible for Issues
-      const issue = IssuesManager.createIssuesFromProtocolIssue(null,data.issue)[0]; // returns issue wrapped in array, need to get first element
+    session.on('Audits.issueAdded', data => {
+      // @ts-expect-error Types of protocol from Puppeteer and CDP are incopatible for Issues but it's the same type
+      const issue = IssuesManager.createIssuesFromProtocolIssue(null,data.issue,)[0];
       if (!issue) {
         return;
       }
       const seenKeys = this.#seenIssueKeys.get(page)!;
       const primaryKey = issue.primaryKey();
       if (seenKeys.has(primaryKey)) return;
       seenKeys.add(primaryKey);
-      page.emit('issue', issue);
+
+      // Trigger the aggregator via our mock manager. Do NOT call collector() here.
+      const mockManager = this.#mockIssuesManagers.get(page);
+      if (mockManager) {
+        // @ts-expect-error we don't care about issies model being null
+        mockManager.dispatchEventToListeners(IssuesManager.Events.ISSUE_ADDED, {issue, issuesModel: null});
+      }
     });
     await session.send('Audits.enable');
   }
@@ -146,7 +186,6 @@ export class PageCollector<T> {
     if (!navigations) {
       return;
     }
-    // Add the latest navigation first
     navigations.unshift([]);
     navigations.splice(this.#maxNavigationSaved);
   }
@@ -160,6 +199,8 @@ export class PageCollector<T> {
     }
     this.storage.delete(page);
     this.#seenIssueKeys.delete(page);
+    this.#issuesAggregators.delete(page);
+    this.#mockIssuesManagers.delete(page);
   }
 
   getData(page: Page, includePreservedData?: boolean): T[] {
@@ -173,7 +214,6 @@ export class PageCollector<T> {
     }
 
     const data: T[] = [];
-
     for (let index = this.#maxNavigationSaved; index >= 0; index--) {
       if (navigations[index]) {
         data.push(...navigations[index]);
@@ -249,14 +289,11 @@ export class NetworkCollector extends PageCollector<HTTPRequest> {
         : false;
     });
 
-    // Keep all requests since the last navigation request including that
-    // navigation request itself.
-    // Keep the reference
     if (lastRequestIdx !== -1) {
       const fromCurrentNavigation = requests.splice(lastRequestIdx);
       navigations.unshift(fromCurrentNavigation);
     } else {
       navigations.unshift([]);
     }
   }
-}
+}