From 733d2a6e6ecb325729d7b2258da4b7285b8bcebe Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers <justin@anthropic.com>
Date: Tue, 12 Nov 2024 13:32:12 +0000
Subject: [PATCH 1/6] Separate error states per tab

Resolves #40.
---
 client/src/App.tsx | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index e90090fcb..33e272660 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -79,7 +79,11 @@ const App = () => {
   const [tools, setTools] = useState<Tool[]>([]);
   const [toolResult, setToolResult] =
     useState<CompatibilityCallToolResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [errors, setErrors] = useState<Record<string, string | null>>({
+    resources: null,
+    prompts: null,
+    tools: null,
+  });
   const [command, setCommand] = useState<string>(() => {
     return localStorage.getItem("lastCommand") || "mcp-server-everything";
   });
@@ -175,17 +179,19 @@ const App = () => {
   const makeRequest = async <T extends ZodType<object>>(
     request: ClientRequest,
     schema: T,
+    tabKey: keyof typeof errors
   ) => {
     if (!mcpClient) {
       throw new Error("MCP client not connected");
     }
-
+  
     try {
       const response = await mcpClient.request(request, schema);
       pushHistory(request, response);
+      setErrors(prev => ({ ...prev, [tabKey]: null }));
       return response;
     } catch (e: unknown) {
-      setError((e as Error).message);
+      setErrors(prev => ({ ...prev, [tabKey]: (e as Error).message }));
       throw e;
     }
   };
@@ -211,11 +217,12 @@ const App = () => {
         params: nextResourceCursor ? { cursor: nextResourceCursor } : {},
       },
       ListResourcesResultSchema,
+      'resources'
     );
     setResources(resources.concat(response.resources ?? []));
     setNextResourceCursor(response.nextCursor);
   };
-
+  
   const listResourceTemplates = async () => {
     const response = await makeRequest(
       {
@@ -225,13 +232,14 @@ const App = () => {
           : {},
       },
       ListResourceTemplatesResultSchema,
+      'resources'
     );
     setResourceTemplates(
       resourceTemplates.concat(response.resourceTemplates ?? []),
     );
     setNextResourceTemplateCursor(response.nextCursor);
   };
-
+  
   const readResource = async (uri: string) => {
     const response = await makeRequest(
       {
@@ -239,6 +247,7 @@ const App = () => {
         params: { uri },
       },
       ReadResourceResultSchema,
+      'resources'
     );
     setResourceContent(JSON.stringify(response, null, 2));
   };
@@ -250,11 +259,12 @@ const App = () => {
         params: nextPromptCursor ? { cursor: nextPromptCursor } : {},
       },
       ListPromptsResultSchema,
+      'prompts'
     );
     setPrompts(response.prompts);
     setNextPromptCursor(response.nextCursor);
   };
-
+  
   const getPrompt = async (name: string, args: Record<string, string> = {}) => {
     const response = await makeRequest(
       {
@@ -262,6 +272,7 @@ const App = () => {
         params: { name, arguments: args },
       },
       GetPromptResultSchema,
+      'prompts'
     );
     setPromptContent(JSON.stringify(response, null, 2));
   };
@@ -273,11 +284,12 @@ const App = () => {
         params: nextToolCursor ? { cursor: nextToolCursor } : {},
       },
       ListToolsResultSchema,
+      'tools'
     );
     setTools(response.tools);
     setNextToolCursor(response.nextCursor);
   };
-
+  
   const callTool = async (name: string, params: Record<string, unknown>) => {
     const response = await makeRequest(
       {
@@ -291,6 +303,7 @@ const App = () => {
         },
       },
       CompatibilityCallToolResultSchema,
+      'tools'
     );
     setToolResult(response);
   };
@@ -515,7 +528,7 @@ const App = () => {
                     resourceContent={resourceContent}
                     nextCursor={nextResourceCursor}
                     nextTemplateCursor={nextResourceTemplateCursor}
-                    error={error}
+                    error={errors.resources}
                   />
                   <PromptsTab
                     prompts={prompts}
@@ -525,9 +538,8 @@ const App = () => {
                     setSelectedPrompt={setSelectedPrompt}
                     promptContent={promptContent}
                     nextCursor={nextPromptCursor}
-                    error={error}
+                    error={errors.prompts}
                   />
-                  <RequestsTab />
                   <ToolsTab
                     tools={tools}
                     listTools={listTools}
@@ -539,7 +551,7 @@ const App = () => {
                     }}
                     toolResult={toolResult}
                     nextCursor={nextToolCursor}
-                    error={error}
+                    error={errors.tools}
                   />
                   <ConsoleTab />
                   <PingTab

From 0716adafc6c3573f2123da1633bb772fb6942bc0 Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers <justin@anthropic.com>
Date: Tue, 12 Nov 2024 13:33:52 +0000
Subject: [PATCH 2/6] Remove unused `RequestsTab`

---
 client/src/App.tsx                     | 23 +++++++++---------
 client/src/components/RequestsTabs.tsx | 33 --------------------------
 2 files changed, 11 insertions(+), 45 deletions(-)
 delete mode 100644 client/src/components/RequestsTabs.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 33e272660..186c0c853 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,8 +1,10 @@
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import {
-  CompatibilityCallToolResultSchema,
+  ClientNotification,
   ClientRequest,
+  CompatibilityCallToolResult,
+  CompatibilityCallToolResultSchema,
   CreateMessageRequestSchema,
   CreateMessageResult,
   EmptyResultSchema,
@@ -19,8 +21,6 @@ import {
   Root,
   ServerNotification,
   Tool,
-  CompatibilityCallToolResult,
-  ClientNotification,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useEffect, useRef, useState } from "react";
 // Add dark mode class based on system preference
@@ -40,16 +40,16 @@ import {
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Bell,
+  ChevronDown,
+  ChevronRight,
   Files,
+  FolderTree,
   Hammer,
   Hash,
   MessageSquare,
   Play,
   Send,
   Terminal,
-  FolderTree,
-  ChevronDown,
-  ChevronRight,
 } from "lucide-react";
 
 import { ZodType } from "zod";
@@ -58,7 +58,6 @@ import ConsoleTab from "./components/ConsoleTab";
 import HistoryAndNotifications from "./components/History";
 import PingTab from "./components/PingTab";
 import PromptsTab, { Prompt } from "./components/PromptsTab";
-import RequestsTab from "./components/RequestsTabs";
 import ResourcesTab from "./components/ResourcesTab";
 import RootsTab from "./components/RootsTab";
 import SamplingTab, { PendingRequest } from "./components/SamplingTab";
@@ -184,7 +183,7 @@ const App = () => {
     if (!mcpClient) {
       throw new Error("MCP client not connected");
     }
-  
+
     try {
       const response = await mcpClient.request(request, schema);
       pushHistory(request, response);
@@ -222,7 +221,7 @@ const App = () => {
     setResources(resources.concat(response.resources ?? []));
     setNextResourceCursor(response.nextCursor);
   };
-  
+
   const listResourceTemplates = async () => {
     const response = await makeRequest(
       {
@@ -239,7 +238,7 @@ const App = () => {
     );
     setNextResourceTemplateCursor(response.nextCursor);
   };
-  
+
   const readResource = async (uri: string) => {
     const response = await makeRequest(
       {
@@ -264,7 +263,7 @@ const App = () => {
     setPrompts(response.prompts);
     setNextPromptCursor(response.nextCursor);
   };
-  
+
   const getPrompt = async (name: string, args: Record<string, string> = {}) => {
     const response = await makeRequest(
       {
@@ -289,7 +288,7 @@ const App = () => {
     setTools(response.tools);
     setNextToolCursor(response.nextCursor);
   };
-  
+
   const callTool = async (name: string, params: Record<string, unknown>) => {
     const response = await makeRequest(
       {
diff --git a/client/src/components/RequestsTabs.tsx b/client/src/components/RequestsTabs.tsx
deleted file mode 100644
index e6326d533..000000000
--- a/client/src/components/RequestsTabs.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { TabsContent } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Send } from "lucide-react";
-
-const RequestsTab = () => (
-  <TabsContent value="requests" className="space-y-4">
-    <div className="grid grid-cols-2 gap-4">
-      <div className="space-y-4">
-        <div className="flex space-x-2">
-          <Input placeholder="Method name" />
-          <Button>
-            <Send className="w-4 h-4 mr-2" />
-            Send
-          </Button>
-        </div>
-        <Textarea
-          placeholder="Request parameters (JSON)"
-          className="h-64 font-mono"
-        />
-      </div>
-      <div>
-        <div className="bg-gray-50 p-4 rounded-lg h-96 font-mono text-sm overflow-auto">
-          <div className="text-gray-500 mb-2">Response:</div>
-          {/* Response content would go here */}
-        </div>
-      </div>
-    </div>
-  </TabsContent>
-);
-
-export default RequestsTab;

From 9d0c64392672d3d28b80a0695585bb2673603784 Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers <justin@anthropic.com>
Date: Tue, 12 Nov 2024 13:37:12 +0000
Subject: [PATCH 3/6] Install `react-toastify`

---
 client/package.json |  1 +
 package-lock.json   | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/client/package.json b/client/package.json
index 893929c50..87d666794 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,6 +33,7 @@
     "lucide-react": "^0.447.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-toastify": "^10.0.6",
     "serve-handler": "^6.1.6",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
diff --git a/package-lock.json b/package-lock.json
index 7644a287c..3d7cef726 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "lucide-react": "^0.447.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-toastify": "^10.0.6",
         "serve-handler": "^6.1.6",
         "tailwind-merge": "^2.5.3",
         "tailwindcss-animate": "^1.0.7",
@@ -4676,6 +4677,18 @@
         }
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
+      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

From 3bae26723a02645c2aeef7dc0d21c86ed64cf8ab Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers <justin@anthropic.com>
Date: Tue, 12 Nov 2024 13:41:08 +0000
Subject: [PATCH 4/6] Use toasts for errors unassociated with a tab

---
 client/src/App.tsx  | 32 +++++++++++++++++++++-----------
 client/src/main.tsx |  3 +++
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 186c0c853..a24dd767d 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -52,6 +52,7 @@ import {
   Terminal,
 } from "lucide-react";
 
+import { toast } from "react-toastify";
 import { ZodType } from "zod";
 import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
@@ -178,7 +179,7 @@ const App = () => {
   const makeRequest = async <T extends ZodType<object>>(
     request: ClientRequest,
     schema: T,
-    tabKey: keyof typeof errors
+    tabKey?: keyof typeof errors,
   ) => {
     if (!mcpClient) {
       throw new Error("MCP client not connected");
@@ -187,10 +188,19 @@ const App = () => {
     try {
       const response = await mcpClient.request(request, schema);
       pushHistory(request, response);
-      setErrors(prev => ({ ...prev, [tabKey]: null }));
+
+      if (tabKey !== undefined) {
+        setErrors((prev) => ({ ...prev, [tabKey]: null }));
+      }
+
       return response;
     } catch (e: unknown) {
-      setErrors(prev => ({ ...prev, [tabKey]: (e as Error).message }));
+      if (tabKey === undefined) {
+        toast.error((e as Error).message);
+      } else {
+        setErrors((prev) => ({ ...prev, [tabKey]: (e as Error).message }));
+      }
+
       throw e;
     }
   };
@@ -204,7 +214,7 @@ const App = () => {
       await mcpClient.notification(notification);
       pushHistory(notification);
     } catch (e: unknown) {
-      setError((e as Error).message);
+      toast.error((e as Error).message);
       throw e;
     }
   };
@@ -216,7 +226,7 @@ const App = () => {
         params: nextResourceCursor ? { cursor: nextResourceCursor } : {},
       },
       ListResourcesResultSchema,
-      'resources'
+      "resources",
     );
     setResources(resources.concat(response.resources ?? []));
     setNextResourceCursor(response.nextCursor);
@@ -231,7 +241,7 @@ const App = () => {
           : {},
       },
       ListResourceTemplatesResultSchema,
-      'resources'
+      "resources",
     );
     setResourceTemplates(
       resourceTemplates.concat(response.resourceTemplates ?? []),
@@ -246,7 +256,7 @@ const App = () => {
         params: { uri },
       },
       ReadResourceResultSchema,
-      'resources'
+      "resources",
     );
     setResourceContent(JSON.stringify(response, null, 2));
   };
@@ -258,7 +268,7 @@ const App = () => {
         params: nextPromptCursor ? { cursor: nextPromptCursor } : {},
       },
       ListPromptsResultSchema,
-      'prompts'
+      "prompts",
     );
     setPrompts(response.prompts);
     setNextPromptCursor(response.nextCursor);
@@ -271,7 +281,7 @@ const App = () => {
         params: { name, arguments: args },
       },
       GetPromptResultSchema,
-      'prompts'
+      "prompts",
     );
     setPromptContent(JSON.stringify(response, null, 2));
   };
@@ -283,7 +293,7 @@ const App = () => {
         params: nextToolCursor ? { cursor: nextToolCursor } : {},
       },
       ListToolsResultSchema,
-      'tools'
+      "tools",
     );
     setTools(response.tools);
     setNextToolCursor(response.nextCursor);
@@ -302,7 +312,7 @@ const App = () => {
         },
       },
       CompatibilityCallToolResultSchema,
-      'tools'
+      "tools",
     );
     setToolResult(response);
   };
diff --git a/client/src/main.tsx b/client/src/main.tsx
index ef474bf64..8ed57a011 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import App from "./App.tsx";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
+    <ToastContainer />
   </StrictMode>,
 );

From da2ac8d4237dbb05ba355d4ca465d9080a2a395a Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers <justin@anthropic.com>
Date: Tue, 12 Nov 2024 13:50:06 +0000
Subject: [PATCH 5/6] Clear error states when clicking around

---
 client/src/App.tsx                 | 50 ++++++++++++++++++++++++------
 client/src/components/ToolsTab.tsx |  6 +++-
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index a24dd767d..c7b941269 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -84,6 +84,10 @@ const App = () => {
     prompts: null,
     tools: null,
   });
+
+  const clearError = (tabKey: keyof typeof errors) => {
+    setErrors((prev) => ({ ...prev, [tabKey]: null }));
+  };
   const [command, setCommand] = useState<string>(() => {
     return localStorage.getItem("lastCommand") || "mcp-server-everything";
   });
@@ -529,11 +533,23 @@ const App = () => {
                   <ResourcesTab
                     resources={resources}
                     resourceTemplates={resourceTemplates}
-                    listResources={listResources}
-                    listResourceTemplates={listResourceTemplates}
-                    readResource={readResource}
+                    listResources={() => {
+                      clearError("resources");
+                      listResources();
+                    }}
+                    listResourceTemplates={() => {
+                      clearError("resources");
+                      listResourceTemplates();
+                    }}
+                    readResource={(uri) => {
+                      clearError("resources");
+                      readResource(uri);
+                    }}
                     selectedResource={selectedResource}
-                    setSelectedResource={setSelectedResource}
+                    setSelectedResource={(resource) => {
+                      clearError("resources");
+                      setSelectedResource(resource);
+                    }}
                     resourceContent={resourceContent}
                     nextCursor={nextResourceCursor}
                     nextTemplateCursor={nextResourceTemplateCursor}
@@ -541,20 +557,36 @@ const App = () => {
                   />
                   <PromptsTab
                     prompts={prompts}
-                    listPrompts={listPrompts}
-                    getPrompt={getPrompt}
+                    listPrompts={() => {
+                      clearError("prompts");
+                      listPrompts();
+                    }}
+                    getPrompt={(name, args) => {
+                      clearError("prompts");
+                      getPrompt(name, args);
+                    }}
                     selectedPrompt={selectedPrompt}
-                    setSelectedPrompt={setSelectedPrompt}
+                    setSelectedPrompt={(prompt) => {
+                      clearError("prompts");
+                      setSelectedPrompt(prompt);
+                    }}
                     promptContent={promptContent}
                     nextCursor={nextPromptCursor}
                     error={errors.prompts}
                   />
                   <ToolsTab
                     tools={tools}
-                    listTools={listTools}
-                    callTool={callTool}
+                    listTools={() => {
+                      clearError("tools");
+                      listTools();
+                    }}
+                    callTool={(name, params) => {
+                      clearError("tools");
+                      callTool(name, params);
+                    }}
                     selectedTool={selectedTool}
                     setSelectedTool={(tool) => {
+                      clearError("tools");
                       setSelectedTool(tool);
                       setToolResult(null);
                     }}
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index ea5f3f192..7c0f3dccc 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -3,7 +3,11 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
-import { CallToolResult, ListToolsResult, Tool } from "@modelcontextprotocol/sdk/types.js";
+import {
+  CallToolResult,
+  ListToolsResult,
+  Tool,
+} from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
 import { useState } from "react";
 import ListPane from "./ListPane";

From c1c8fc2f424e07e133240ea7c0bc7b4c291c0958 Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers <justin@anthropic.com>
Date: Tue, 12 Nov 2024 15:42:23 +0000
Subject: [PATCH 6/6] Use `clearError` in `makeRequest`

---
 client/src/App.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 108451788..23c3b873a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -37,7 +37,7 @@ import {
   Hash,
   MessageSquare,
   Send,
-  Terminal
+  Terminal,
 } from "lucide-react";
 
 import { toast } from "react-toastify";
@@ -72,10 +72,6 @@ const App = () => {
     prompts: null,
     tools: null,
   });
-
-  const clearError = (tabKey: keyof typeof errors) => {
-    setErrors((prev) => ({ ...prev, [tabKey]: null }));
-  };
   const [command, setCommand] = useState<string>(() => {
     return localStorage.getItem("lastCommand") || "mcp-server-everything";
   });
@@ -210,6 +206,10 @@ const App = () => {
     ]);
   };
 
+  const clearError = (tabKey: keyof typeof errors) => {
+    setErrors((prev) => ({ ...prev, [tabKey]: null }));
+  };
+
   const makeRequest = async <T extends ZodType<object>>(
     request: ClientRequest,
     schema: T,
@@ -224,7 +224,7 @@ const App = () => {
       pushHistory(request, response);
 
       if (tabKey !== undefined) {
-        setErrors((prev) => ({ ...prev, [tabKey]: null }));
+        clearError(tabKey);
       }
 
       return response;