Merge branch 'main' into set-header

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",

client/src/App.tsx

@@ -476,6 +476,10 @@ const App = () => {
     setLogLevel(level);
   };
 
+  const clearStdErrNotifications = () => {
+    setStdErrNotifications([]);
+  };
+
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
       () => import("./components/OAuthCallback"),
@@ -513,6 +517,7 @@ const App = () => {
         logLevel={logLevel}
         sendLogLevelRequest={sendLogLevelRequest}
         loggingSupported={!!serverCapabilities?.logging || false}
+        clearStdErrNotifications={clearStdErrNotifications}
       />
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">

client/src/components/JsonView.tsx

@@ -227,7 +227,7 @@ const JsonNode = memo(
             )}
             <pre
               className={clsx(
-                typeStyleMap.string,
+                isError ? typeStyleMap.error : typeStyleMap.string,
                 "break-all whitespace-pre-wrap",
               )}
             >

client/src/components/Sidebar.tsx

@@ -56,6 +56,7 @@ interface SidebarProps {
   onConnect: () => void;
   onDisconnect: () => void;
   stdErrNotifications: StdErrNotification[];
+  clearStdErrNotifications: () => void;
   logLevel: LoggingLevel;
   sendLogLevelRequest: (level: LoggingLevel) => void;
   loggingSupported: boolean;
@@ -82,6 +83,7 @@ const Sidebar = ({
   onConnect,
   onDisconnect,
   stdErrNotifications,
+  clearStdErrNotifications,
   logLevel,
   sendLogLevelRequest,
   loggingSupported,
@@ -530,9 +532,19 @@ const Sidebar = ({
             {stdErrNotifications.length > 0 && (
               <>
                 <div className="mt-4 border-t border-gray-200 pt-4">
-                  <h3 className="text-sm font-medium">
-                    Error output from MCP server
-                  </h3>
+                  <div className="flex justify-between items-center">
+                    <h3 className="text-sm font-medium">
+                      Error output from MCP server
+                    </h3>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={clearStdErrNotifications}
+                      className="h-8 px-2"
+                    >
+                      Clear
+                    </Button>
+                  </div>
                   <div className="mt-2 max-h-80 overflow-y-auto">
                     {stdErrNotifications.map((notification, index) => (
                       <div

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

@@ -30,6 +30,7 @@ describe("Sidebar Environment Variables", () => {
     onConnect: jest.fn(),
     onDisconnect: jest.fn(),
     stdErrNotifications: [],
+    clearStdErrNotifications: jest.fn(),
     logLevel: "info" as const,
     sendLogLevelRequest: jest.fn(),
     loggingSupported: true,