add prompts tab

client/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Send, Bell, Terminal, Files } from "lucide-react";
+import { Send, Bell, Terminal, Files, MessageSquare } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import ConsoleTab from "./components/ConsoleTab";
@@ -7,17 +7,17 @@ import Sidebar from "./components/Sidebar";
 import RequestsTab from "./components/RequestsTabs";
 import ResourcesTab, { Resource } from "./components/ResourcesTab";
 import NotificationsTab from "./components/NotificationsTab";
+import PromptsTab, { Prompt } from "./components/PromptsTab";
 
 const App = () => {
   const [socket, setSocket] = useState<WebSocket | null>(null);
-  const [resources, setResources] = useState<Resource[]>([]);
-  const [selectedResource, setSelectedResource] = useState<Resource | null>(
-    null,
-  );
-  const [resourceContent, setResourceContent] = useState<string>("");
   const [connectionStatus, setConnectionStatus] = useState<
     "disconnected" | "connected" | "error"
   >("disconnected");
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [resourceContent, setResourceContent] = useState<string>("");
+  const [prompts, setPrompts] = useState<Prompt[]>([]);
+  const [promptContent, setPromptContent] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -38,6 +38,12 @@ const App = () => {
       } else if (message.type === "resource") {
         setResourceContent(JSON.stringify(message.data, null, 2));
         setError(null);
+      } else if (message.type === "prompts") {
+        setPrompts(message.data.prompts);
+        setError(null);
+      } else if (message.type === "prompt") {
+        setPromptContent(JSON.stringify(message.data, null, 2));
+        setError(null);
       } else if (message.type === "error") {
         setError(message.message);
       }
@@ -54,24 +60,41 @@ const App = () => {
     return () => ws.close();
   }, []);
 
-  const listResources = () => {
+  const sendWebSocketMessage = (message: object) => {
     if (socket) {
-      socket.send(JSON.stringify({ type: "listResources" }));
+      console.log("Sending WebSocket message:", message);
+      socket.send(JSON.stringify(message));
     }
   };
 
+  const [selectedResource, setSelectedResource] = useState<Resource | null>(
+    null,
+  );
+  const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+
+  const listResources = () => {
+    sendWebSocketMessage({ type: "listResources" });
+  };
+
   const readResource = (uri: string) => {
-    if (socket) {
-      socket.send(JSON.stringify({ type: "readResource", uri }));
-    }
+    sendWebSocketMessage({ type: "readResource", uri });
+  };
+
+  const listPrompts = () => {
+    sendWebSocketMessage({ type: "listPrompts" });
+  };
+
+  const getPrompt = (name: string) => {
+    sendWebSocketMessage({ type: "getPrompt", name });
   };
 
   return (
     <div className="flex h-screen bg-gray-100">
       <Sidebar connectionStatus={connectionStatus} />
-      <div className="flex-1 flex flex-col">
-        <div className="flex-1 p-6">
-          <Tabs defaultValue="requests">
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <h1 className="text-2xl font-bold p-4">MCP Inspector</h1>
+        <div className="flex-1 overflow-auto">
+          <Tabs defaultValue="requests" className="w-full">
             <TabsList className="mb-4">
               <TabsTrigger value="requests">
                 <Send className="w-4 h-4 mr-2" />
@@ -85,24 +108,39 @@ const App = () => {
                 <Files className="w-4 h-4 mr-2" />
                 Resources
               </TabsTrigger>
+              <TabsTrigger value="prompts">
+                <MessageSquare className="w-4 h-4 mr-2" />
+                Prompts
+              </TabsTrigger>
               <TabsTrigger value="console">
                 <Terminal className="w-4 h-4 mr-2" />
                 Console
               </TabsTrigger>
             </TabsList>
 
-            <RequestsTab />
-            <ResourcesTab
-              resources={resources}
-              listResources={listResources}
-              readResource={readResource}
-              selectedResource={selectedResource}
-              setSelectedResource={setSelectedResource}
-              resourceContent={resourceContent}
-              error={error}
-            />
-            <NotificationsTab />
-            <ConsoleTab />
+            <div className="w-full">
+              <RequestsTab />
+              <ResourcesTab
+                resources={resources}
+                listResources={listResources}
+                readResource={readResource}
+                selectedResource={selectedResource}
+                setSelectedResource={setSelectedResource}
+                resourceContent={resourceContent}
+                error={error}
+              />
+              <NotificationsTab />
+              <PromptsTab
+                prompts={prompts}
+                listPrompts={listPrompts}
+                getPrompt={getPrompt}
+                selectedPrompt={selectedPrompt}
+                setSelectedPrompt={setSelectedPrompt}
+                promptContent={promptContent}
+                error={error}
+              />
+              <ConsoleTab />
+            </div>
           </Tabs>
         </div>
       </div>