receive and display server notifications

client/src/components/History.tsx

@@ -1,94 +1,163 @@
 import { useState } from "react";
 import { Copy } from "lucide-react";
+import { ServerNotification } from "mcp-typescript/types.js";
 
-const History = ({
+const HistoryAndNotifications = ({
   requestHistory,
+  serverNotifications,
 }: {
   requestHistory: Array<{ request: string; response: string | null }>;
+  serverNotifications: ServerNotification[];
 }) => {
   const [expandedRequests, setExpandedRequests] = useState<{
     [key: number]: boolean;
   }>({});
+  const [expandedNotifications, setExpandedNotifications] = useState<{
+    [key: number]: boolean;
+  }>({});
 
   const toggleRequestExpansion = (index: number) => {
     setExpandedRequests((prev) => ({ ...prev, [index]: !prev[index] }));
   };
 
+  const toggleNotificationExpansion = (index: number) => {
+    setExpandedNotifications((prev) => ({ ...prev, [index]: !prev[index] }));
+  };
+
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
   };
 
   return (
-    <div className="w-64 bg-white shadow-md p-4 overflow-y-auto">
-      <h2 className="text-lg font-semibold mb-4">History</h2>
-      <ul className="space-y-3">
-        {requestHistory
-          .slice()
-          .reverse()
-          .map((request, index) => (
-            <li
-              key={index}
-              className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
-            >
-              <div
-                className="flex justify-between items-center cursor-pointer"
-                onClick={() =>
-                  toggleRequestExpansion(requestHistory.length - 1 - index)
-                }
-              >
-                <span className="font-mono">
-                  {requestHistory.length - index}.{" "}
-                  {JSON.parse(request.request).method}
-                </span>
-                <span>
-                  {expandedRequests[requestHistory.length - 1 - index]
-                    ? "▼"
-                    : "▶"}
-                </span>
-              </div>
-              {expandedRequests[requestHistory.length - 1 - index] && (
-                <>
-                  <div className="mt-2">
-                    <div className="flex justify-between items-center mb-1">
-                      <span className="font-semibold text-blue-600">
-                        Request:
-                      </span>
-                      <button
-                        onClick={() => copyToClipboard(request.request)}
-                        className="text-blue-500 hover:text-blue-700"
-                      >
-                        <Copy size={16} />
-                      </button>
-                    </div>
-                    <pre className="whitespace-pre-wrap break-words bg-blue-50 p-2 rounded">
-                      {JSON.stringify(JSON.parse(request.request), null, 2)}
-                    </pre>
+    <div className="w-64 bg-white shadow-md p-4 overflow-hidden flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto mb-4 border-b pb-4">
+        <h2 className="text-lg font-semibold mb-4">History</h2>
+        {requestHistory.length === 0 ? (
+          <p className="text-sm text-gray-500 italic">No history yet</p>
+        ) : (
+          <ul className="space-y-3">
+            {requestHistory
+              .slice()
+              .reverse()
+              .map((request, index) => (
+                <li
+                  key={index}
+                  className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
+                >
+                  <div
+                    className="flex justify-between items-center cursor-pointer"
+                    onClick={() =>
+                      toggleRequestExpansion(requestHistory.length - 1 - index)
+                    }
+                  >
+                    <span className="font-mono">
+                      {requestHistory.length - index}.{" "}
+                      {JSON.parse(request.request).method}
+                    </span>
+                    <span>
+                      {expandedRequests[requestHistory.length - 1 - index]
+                        ? "▼"
+                        : "▶"}
+                    </span>
                   </div>
-                  {request.response && (
+                  {expandedRequests[requestHistory.length - 1 - index] && (
+                    <>
+                      <div className="mt-2">
+                        <div className="flex justify-between items-center mb-1">
+                          <span className="font-semibold text-blue-600">
+                            Request:
+                          </span>
+                          <button
+                            onClick={() => copyToClipboard(request.request)}
+                            className="text-blue-500 hover:text-blue-700"
+                          >
+                            <Copy size={16} />
+                          </button>
+                        </div>
+                        <pre className="whitespace-pre-wrap break-words bg-blue-50 p-2 rounded">
+                          {JSON.stringify(JSON.parse(request.request), null, 2)}
+                        </pre>
+                      </div>
+                      {request.response && (
+                        <div className="mt-2">
+                          <div className="flex justify-between items-center mb-1">
+                            <span className="font-semibold text-green-600">
+                              Response:
+                            </span>
+                            <button
+                              onClick={() => copyToClipboard(request.response!)}
+                              className="text-blue-500 hover:text-blue-700"
+                            >
+                              <Copy size={16} />
+                            </button>
+                          </div>
+                          <pre className="whitespace-pre-wrap break-words bg-green-50 p-2 rounded">
+                            {JSON.stringify(
+                              JSON.parse(request.response),
+                              null,
+                              2,
+                            )}
+                          </pre>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </li>
+              ))}
+          </ul>
+        )}
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        <h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
+        {serverNotifications.length === 0 ? (
+          <p className="text-sm text-gray-500 italic">No notifications yet</p>
+        ) : (
+          <ul className="space-y-3">
+            {serverNotifications
+              .slice()
+              .reverse()
+              .map((notification, index) => (
+                <li
+                  key={index}
+                  className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
+                >
+                  <div
+                    className="flex justify-between items-center cursor-pointer"
+                    onClick={() => toggleNotificationExpansion(index)}
+                  >
+                    <span className="font-mono">
+                      {serverNotifications.length - index}.{" "}
+                      {notification.method}
+                    </span>
+                    <span>{expandedNotifications[index] ? "▼" : "▶"}</span>
+                  </div>
+                  {expandedNotifications[index] && (
                     <div className="mt-2">
                       <div className="flex justify-between items-center mb-1">
-                        <span className="font-semibold text-green-600">
-                          Response:
+                        <span className="font-semibold text-purple-600">
+                          Details:
                         </span>
                         <button
-                          onClick={() => copyToClipboard(request.response!)}
+                          onClick={() =>
+                            copyToClipboard(JSON.stringify(notification))
+                          }
                           className="text-blue-500 hover:text-blue-700"
                         >
                           <Copy size={16} />
                         </button>
                       </div>
-                      <pre className="whitespace-pre-wrap break-words bg-green-50 p-2 rounded">
-                        {JSON.stringify(JSON.parse(request.response), null, 2)}
+                      <pre className="whitespace-pre-wrap break-words bg-purple-50 p-2 rounded">
+                        {JSON.stringify(notification, null, 2)}
                       </pre>
                     </div>
                   )}
-                </>
-              )}
-            </li>
-          ))}
-      </ul>
+                </li>
+              ))}
+          </ul>
+        )}
+      </div>
     </div>
   );
 };
 
-export default History;
+export default HistoryAndNotifications;

client/src/components/NotificationsTab.tsx

@@ -1,33 +0,0 @@
-import { Bell } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { TabsContent } from "@/components/ui/tabs";
-
-const NotificationsTab = () => (
-  <TabsContent value="notifications" 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="Notification method" />
-          <Button>
-            <Bell className="w-4 h-4 mr-2" />
-            Send
-          </Button>
-        </div>
-        <Textarea
-          placeholder="Notification parameters (JSON)"
-          className="h-64 font-mono"
-        />
-      </div>
-      <div className="bg-white rounded-lg shadow p-4">
-        <h3 className="font-semibold mb-4">Recent Notifications</h3>
-        <div className="space-y-2">
-          {/* Notification history would go here */}
-        </div>
-      </div>
-    </div>
-  </TabsContent>
-);
-
-export default NotificationsTab;

client/src/components/ToolsTab.tsx

@@ -36,7 +36,9 @@ const ToolsTab = ({
         renderItem={(tool) => (
           <>
             <span className="flex-1">{tool.name}</span>
-            <span className="text-sm text-gray-500">{tool.description}</span>
+            <span className="text-sm text-gray-500 text-right">
+              {tool.description}
+            </span>
           </>
         )}
         title="Tools"