Fixed list management (including broken "clear" behavior in web ux)

Author: BobDickinson

core/__tests__/inspectorClient.test.ts

@@ -317,6 +317,73 @@ describe("InspectorClient", () => {
 
       expect(changeCount).toBeGreaterThan(0);
     });
+
+    it("getMessages(predicate) returns only matching entries", async () => {
+      client = new InspectorClient(
+        {
+          type: "stdio",
+          command: serverCommand.command,
+          args: serverCommand.args,
+        },
+        {
+          environment: { transport: createTransportNode },
+          autoSyncLists: false,
+        },
+      );
+
+      await client.connect();
+      await client.listAllTools();
+
+      const all = client.getMessages();
+      expect(all.length).toBeGreaterThan(0);
+
+      const requests = client.getMessages((m) => m.direction === "request");
+      expect(requests.length).toBeLessThanOrEqual(all.length);
+      expect(requests.every((m) => m.direction === "request")).toBe(true);
+
+      const notifications = client.getMessages(
+        (m) => m.direction === "notification",
+      );
+      expect(notifications.every((m) => m.direction === "notification")).toBe(
+        true,
+      );
+    });
+
+    it("clearMessages(predicate) removes only matching entries and dispatches messagesChange", async () => {
+      client = new InspectorClient(
+        {
+          type: "stdio",
+          command: serverCommand.command,
+          args: serverCommand.args,
+        },
+        {
+          environment: { transport: createTransportNode },
+          autoSyncLists: false,
+        },
+      );
+
+      await client.connect();
+      await client.listAllTools();
+
+      const before = client.getMessages().length;
+      expect(before).toBeGreaterThan(0);
+
+      let changeCount = 0;
+      client.addEventListener("messagesChange", () => {
+        changeCount++;
+      });
+
+      client.clearMessages((m) => m.direction === "request");
+      const after = client.getMessages();
+      expect(after.length).toBeLessThan(before);
+      expect(after.every((m) => m.direction !== "request")).toBe(true);
+      expect(changeCount).toBe(1);
+
+      client.clearMessages();
+      expect(client.getMessages().length).toBe(0);
+      // messagesChange fires again only if the list actually changed (e.g. if any non-request entries remained)
+      expect(changeCount).toBeGreaterThanOrEqual(1);
+    });
   });
 
   describe("Fetch Request Tracking", () => {

core/mcp/inspectorClient.ts

@@ -1223,9 +1223,13 @@ export class InspectorClient extends InspectorClientEventTarget {
   }
 
   /**
-   * Get all messages
+   * Get messages. When `predicate` is provided, returns only entries for which
+   * predicate returns true. When omitted, returns all messages.
    */
-  getMessages(): MessageEntry[] {
+  getMessages(predicate?: (entry: MessageEntry) => boolean): MessageEntry[] {
+    if (predicate) {
+      return this.messages.filter(predicate);
+    }
     return [...this.messages];
   }
 
@@ -1318,6 +1322,18 @@ export class InspectorClient extends InspectorClientEventTarget {
     this.dispatchTypedEvent("promptsChange", this.prompts);
   }
 
+  /**
+   * Remove messages from history. When `predicate` is provided, removes only entries
+   * for which predicate returns true. When omitted, clears all messages.
+   */
+  clearMessages(predicate?: (entry: MessageEntry) => boolean): void {
+    const before = this.messages.length;
+    this.messages = predicate ? this.messages.filter((m) => !predicate(m)) : [];
+    if (this.messages.length !== before) {
+      this.dispatchTypedEvent("messagesChange");
+    }
+  }
+
   /**
    * Get task capabilities from server
    * @returns Task capabilities or undefined if not supported

web/src/App.tsx

@@ -30,6 +30,7 @@ import { useInspectorClient } from "@modelcontextprotocol/inspector-core/react/u
 import {
   InspectorClient,
   type InspectorClientOptions,
+  type MessageEntry,
 } from "@modelcontextprotocol/inspector-core/mcp/index.js";
 import {
   createWebEnvironment,
@@ -121,6 +122,11 @@ const filterReservedMetadata = (
   );
 };
 
+// Shared predicates for history/notifications views; used for both getMessages (display) and clearMessages (clear)
+const notificationsMessagePredicate = (m: MessageEntry) =>
+  m.direction === "notification";
+const historyMessagePredicate = (m: MessageEntry) => m.direction === "request";
+
 const App = () => {
   const [resourceContent, setResourceContent] = useState<string>("");
   const [resourceContentMap, setResourceContentMap] = useState<
@@ -553,13 +559,13 @@ const App = () => {
     }
   }, [ensureInspectorClient, toast]);
 
-  // Extract server notifications from messages
-  // Use useMemo to stabilize the array reference and prevent infinite loops
+  // Extract server notifications from messages (same predicate as clearMessages for this view)
   const extractedNotifications = useMemo(() => {
-    return inspectorMessages
-      .filter((msg) => msg.direction === "notification" && msg.message)
+    if (!inspectorClient) return [];
+    return inspectorClient
+      .getMessages(notificationsMessagePredicate)
       .map((msg) => msg.message as ServerNotification);
-  }, [inspectorMessages]);
+  }, [inspectorClient, inspectorMessages]);
 
   // Use ref to track previous serialized value to prevent infinite loops
   const previousNotificationsRef = useRef<string>("[]");
@@ -731,21 +737,20 @@ const App = () => {
     serverCapabilities?.completions !== undefined &&
     serverCapabilities.completions !== null;
 
-  // Map MCP protocol messages (requests/responses) to requestHistory format
-  // Filter out notifications - those go in the Notifications tab
+  // Request history (same predicate as clearMessages for this view)
   const requestHistory = useMemo(() => {
-    return inspectorMessages
-      .filter((msg) => msg.direction === "request")
-      .map((msg) => ({
-        request: JSON.stringify(msg.message),
-        response: msg.response ? JSON.stringify(msg.response) : undefined,
-      }));
-  }, [inspectorMessages]);
+    if (!inspectorClient) return [];
+    return inspectorClient.getMessages(historyMessagePredicate).map((msg) => ({
+      request: JSON.stringify(msg.message),
+      response: msg.response ? JSON.stringify(msg.response) : undefined,
+    }));
+  }, [inspectorClient, inspectorMessages]);
 
   const clearRequestHistory = useCallback(() => {
-    // InspectorClient doesn't have a clear method, so this is a no-op
-    // The history is managed internally by InspectorClient
-  }, []);
+    if (inspectorClient) {
+      inspectorClient.clearMessages(historyMessagePredicate);
+    }
+  }, [inspectorClient]);
 
   useEffect(() => {
     if (serverCapabilities) {
@@ -1498,7 +1503,11 @@ const App = () => {
   };
 
   const handleClearNotifications = () => {
-    setNotifications([]);
+    if (inspectorClient) {
+      inspectorClient.clearMessages(notificationsMessagePredicate);
+    } else {
+      setNotifications([]);
+    }
   };
 
   const sendLogLevelRequest = async (level: LoggingLevel) => {