feat: add clear buttons for request history and server notifications

fixes modelcontextprotocol#780

Author: ln-12

client/src/App.tsx

@@ -200,6 +200,7 @@ const App = () => {
     serverCapabilities,
     mcpClient,
     requestHistory,
+    clearRequestHistory,
     makeRequest,
     sendNotification,
     handleCompletion,
@@ -736,6 +737,10 @@ const App = () => {
     await sendNotification({ method: "notifications/roots/list_changed" });
   };
 
+  const handleClearNotifications = () => {
+    setNotifications([]);
+  };
+
   const sendLogLevelRequest = async (level: LoggingLevel) => {
     await sendMCPRequest(
       {
@@ -1102,6 +1107,8 @@ const App = () => {
             <HistoryAndNotifications
               requestHistory={requestHistory}
               serverNotifications={notifications}
+              onClearHistory={clearRequestHistory}
+              onClearNotifications={handleClearNotifications}
             />
           </div>
         </div>

client/src/__tests__/App.config.test.tsx

@@ -49,6 +49,7 @@ jest.mock("../lib/hooks/useConnection", () => ({
     serverCapabilities: null,
     mcpClient: null,
     requestHistory: [],
+    clearRequestHistory: jest.fn(),
     makeRequest: jest.fn(),
     sendNotification: jest.fn(),
     handleCompletion: jest.fn(),

client/src/__tests__/App.routing.test.tsx

@@ -42,6 +42,7 @@ const disconnectedConnectionState = {
   serverCapabilities: null,
   mcpClient: null,
   requestHistory: [],
+  clearRequestHistory: jest.fn(),
   makeRequest: jest.fn(),
   sendNotification: jest.fn(),
   handleCompletion: jest.fn(),

client/src/components/HistoryAndNotifications.tsx

@@ -1,13 +1,18 @@
 import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
 import { useState } from "react";
 import JsonView from "./JsonView";
+import { Button } from "@/components/ui/button";
 
 const HistoryAndNotifications = ({
   requestHistory,
   serverNotifications,
+  onClearHistory,
+  onClearNotifications,
 }: {
   requestHistory: Array<{ request: string; response?: string }>;
   serverNotifications: ServerNotification[];
+  onClearHistory?: () => void;
+  onClearNotifications?: () => void;
 }) => {
   const [expandedRequests, setExpandedRequests] = useState<{
     [key: number]: boolean;
@@ -27,7 +32,17 @@ const HistoryAndNotifications = ({
   return (
     <div className="bg-card overflow-hidden flex h-full">
       <div className="flex-1 overflow-y-auto p-4 border-r">
-        <h2 className="text-lg font-semibold mb-4">History</h2>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">History</h2>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClearHistory}
+            disabled={requestHistory.length === 0}
+          >
+            Clear
+          </Button>
+        </div>
         {requestHistory.length === 0 ? (
           <p className="text-sm text-gray-500 dark:text-gray-400 italic">
             No history yet
@@ -93,7 +108,17 @@ const HistoryAndNotifications = ({
         )}
       </div>
       <div className="flex-1 overflow-y-auto p-4">
-        <h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Server Notifications</h2>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClearNotifications}
+            disabled={serverNotifications.length === 0}
+          >
+            Clear
+          </Button>
+        </div>
         {serverNotifications.length === 0 ? (
           <p className="text-sm text-gray-500 dark:text-gray-400 italic">
             No notifications yet

client/src/components/__tests__/HistoryAndNotifications.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, within } from "@testing-library/react";
+import { useState } from "react";
 import { describe, it, expect, jest } from "@jest/globals";
 import HistoryAndNotifications from "../HistoryAndNotifications";
 import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
@@ -223,4 +224,66 @@ describe("HistoryAndNotifications", () => {
     expect(screen.getByText("No history yet")).toBeTruthy();
     expect(screen.getByText("No notifications yet")).toBeTruthy();
   });
+
+  it("clears request history when Clear is clicked", () => {
+    const Wrapper = () => {
+      const [history, setHistory] = useState(mockRequestHistory);
+      return (
+        <HistoryAndNotifications
+          requestHistory={history}
+          serverNotifications={[]}
+          onClearHistory={() => setHistory([])}
+        />
+      );
+    };
+
+    render(<Wrapper />);
+
+    // Verify items are present initially
+    expect(screen.getByText("2. test/method2")).toBeTruthy();
+    expect(screen.getByText("1. test/method1")).toBeTruthy();
+
+    // Click Clear in History header (scoped by the History heading's container)
+    const historyHeader = screen.getByText("History");
+    const historyHeaderContainer = historyHeader.parentElement as HTMLElement;
+    const historyClearButton = within(historyHeaderContainer).getByRole(
+      "button",
+      { name: "Clear" },
+    );
+    fireEvent.click(historyClearButton);
+
+    // History should now be empty
+    expect(screen.getByText("No history yet")).toBeTruthy();
+  });
+
+  it("clears server notifications when Clear is clicked", () => {
+    const Wrapper = () => {
+      const [notifications, setNotifications] =
+        useState<ServerNotification[]>(mockNotifications);
+      return (
+        <HistoryAndNotifications
+          requestHistory={[]}
+          serverNotifications={notifications}
+          onClearNotifications={() => setNotifications([])}
+        />
+      );
+    };
+
+    render(<Wrapper />);
+
+    // Verify items are present initially
+    expect(screen.getByText("2. notifications/progress")).toBeTruthy();
+    expect(screen.getByText("1. notifications/message")).toBeTruthy();
+
+    // Click Clear in Server Notifications header (scoped by its heading's container)
+    const notifHeader = screen.getByText("Server Notifications");
+    const notifHeaderContainer = notifHeader.parentElement as HTMLElement;
+    const notifClearButton = within(notifHeaderContainer).getByRole("button", {
+      name: "Clear",
+    });
+    fireEvent.click(notifClearButton);
+
+    // Notifications should now be empty
+    expect(screen.getByText("No notifications yet")).toBeTruthy();
+  });
 });

client/src/lib/hooks/useConnection.ts

@@ -653,11 +653,16 @@ export function useConnection({
     setServerCapabilities(null);
   };
 
+  const clearRequestHistory = () => {
+    setRequestHistory([]);
+  };
+
   return {
     connectionStatus,
     serverCapabilities,
     mcpClient,
     requestHistory,
+    clearRequestHistory,
     makeRequest,
     sendNotification,
     handleCompletion,