From 7bb40c188fac1d74fb6cd64aed11963f2e817014 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 17 Oct 2024 16:25:31 -0700
Subject: [PATCH] add ping tab

---
 client/src/App.tsx                | 16 ++++++++++++++++
 client/src/components/PingTab.tsx | 21 +++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 client/src/components/PingTab.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index cd03714..2061e30 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -12,6 +12,7 @@ import {
   ClientRequest,
   ProgressNotificationSchema,
   ServerNotification,
+  EmptyResultSchema,
 } from "mcp-typescript/types.js";
 import { useState, useRef } from "react";
 import {
@@ -43,6 +44,7 @@ import ToolsTab from "./components/ToolsTab";
 import { AnyZodObject } from "zod";
 import HistoryAndNotifications from "./components/History";
 import "./App.css";
+import PingTab from "./components/PingTab";
 
 const App = () => {
   const [connectionStatus, setConnectionStatus] = useState<
@@ -294,6 +296,10 @@ const App = () => {
                     <Terminal className="w-4 h-4 mr-2" />
                     Console
                   </TabsTrigger>
+                  <TabsTrigger value="ping">
+                    <Bell className="w-4 h-4 mr-2" />
+                    Ping
+                  </TabsTrigger>
                 </TabsList>
 
                 <div className="w-full">
@@ -332,6 +338,16 @@ const App = () => {
                     error={error}
                   />
                   <ConsoleTab />
+                  <PingTab
+                    onPingClick={() => {
+                      void makeRequest(
+                        {
+                          method: "ping" as const,
+                        },
+                        EmptyResultSchema,
+                      );
+                    }}
+                  />
                 </div>
               </Tabs>
             ) : (
diff --git a/client/src/components/PingTab.tsx b/client/src/components/PingTab.tsx
new file mode 100644
index 0000000..f159284
--- /dev/null
+++ b/client/src/components/PingTab.tsx
@@ -0,0 +1,21 @@
+import { TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+
+const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
+  return (
+    <TabsContent value="ping" className="grid grid-cols-2 gap-4">
+      <div className="col-span-2 flex justify-center items-center">
+        <Button
+          onClick={onPingClick}
+          className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-6 px-12 rounded-full shadow-lg transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-300 animate-pulse"
+        >
+          <span className="text-3xl mr-2">🚀</span>
+          Mega Ping
+          <span className="text-3xl ml-2">💥</span>
+        </Button>
+      </div>
+    </TabsContent>
+  );
+};
+
+export default PingTab;