diff --git a/client/src/App.tsx b/client/src/App.tsx index 313eb80..ad54ac0 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -19,7 +19,7 @@ import ResourcesTab, { Resource } from "./components/ResourcesTab"; import NotificationsTab from "./components/NotificationsTab"; import PromptsTab, { Prompt } from "./components/PromptsTab"; import ToolsTab, { Tool as ToolType } from "./components/ToolsTab"; -import CommandHistory from "./components/CommandHistory"; +import History from "./components/CommandHistory"; const App = () => { const [socket, setSocket] = useState(null); @@ -40,8 +40,8 @@ const App = () => { "/Users/ashwin/code/example-servers/build/everything/index.js", ); const [mcpConnected, setMcpConnected] = useState(false); - const [commandHistory, setCommandHistory] = useState< - Array<{ command: string; response: string | null }> + const [requestHistory, setRequestHistory] = useState< + Array<{ request: string; response: string | null }> >([]); useEffect(() => { @@ -59,34 +59,28 @@ const App = () => { if (message.type === "resources") { setResources(message.data.resources); setError(null); - updateCommandHistory(message); } else if (message.type === "resource") { setResourceContent(JSON.stringify(message.data, null, 2)); setError(null); - updateCommandHistory(message); } else if (message.type === "prompts") { setPrompts(message.data.prompts); setError(null); - updateCommandHistory(message); } else if (message.type === "prompt") { setPromptContent(JSON.stringify(message.data, null, 2)); setError(null); - updateCommandHistory(message); } else if (message.type === "tools") { setTools(message.data.tools); setError(null); - updateCommandHistory(message); } else if (message.type === "toolResult") { setToolResult(JSON.stringify(message.data, null, 2)); setError(null); - updateCommandHistory(message); } else if (message.type === "error") { setError(message.message); - updateCommandHistory(message); } else if (message.type === "connected") { setMcpConnected(true); - updateCommandHistory(message); } + + updateRequestHistory(message); }; ws.onerror = () => { @@ -101,13 +95,13 @@ const App = () => { return () => ws.close(); }, []); - const updateCommandHistory = (response: unknown) => { - setCommandHistory((prev) => { - const lastCommand = prev[prev.length - 1]; - if (lastCommand && lastCommand.response === null) { + const updateRequestHistory = (response: unknown) => { + setRequestHistory((prev) => { + const lastRequest = prev[prev.length - 1]; + if (lastRequest && lastRequest.response === null) { const updatedHistory = [...prev]; updatedHistory[updatedHistory.length - 1] = { - ...lastCommand, + ...lastRequest, response: JSON.stringify(response), }; return updatedHistory; @@ -120,9 +114,9 @@ const App = () => { if (socket) { console.log("Sending WebSocket message:", message); socket.send(JSON.stringify(message)); - setCommandHistory((prev) => [ + setRequestHistory((prev) => [ ...prev, - { command: JSON.stringify(message), response: null }, + { request: JSON.stringify(message), response: null }, ]); } }; @@ -260,7 +254,7 @@ const App = () => { - + ); }; diff --git a/client/src/components/CommandHistory.tsx b/client/src/components/History.tsx similarity index 67% rename from client/src/components/CommandHistory.tsx rename to client/src/components/History.tsx index 853c17e..8ccf3ab 100644 --- a/client/src/components/CommandHistory.tsx +++ b/client/src/components/History.tsx @@ -1,17 +1,17 @@ import { useState } from "react"; import { Copy } from "lucide-react"; -const CommandHistory = ({ - commandHistory, +const History = ({ + requestHistory, }: { - commandHistory: Array<{ command: string; response: string | null }>; + requestHistory: Array<{ request: string; response: string | null }>; }) => { - const [expandedCommands, setExpandedCommands] = useState<{ + const [expandedRequests, setExpandedRequests] = useState<{ [key: number]: boolean; }>({}); - const toggleCommandExpansion = (index: number) => { - setExpandedCommands((prev) => ({ ...prev, [index]: !prev[index] })); + const toggleRequestExpansion = (index: number) => { + setExpandedRequests((prev) => ({ ...prev, [index]: !prev[index] })); }; const copyToClipboard = (text: string) => { @@ -20,12 +20,12 @@ const CommandHistory = ({ return (
-

Command History

+

History

    - {commandHistory + {requestHistory .slice() .reverse() - .map((cmd, index) => ( + .map((request, index) => (
  • - toggleCommandExpansion(commandHistory.length - 1 - index) + toggleRequestExpansion(requestHistory.length - 1 - index) } > - {commandHistory.length - index}.{" "} - {JSON.parse(cmd.command).type} + {requestHistory.length - index}.{" "} + {JSON.parse(request.request).type} - {expandedCommands[commandHistory.length - 1 - index] + {expandedRequests[requestHistory.length - 1 - index] ? "▼" : "▶"}
- {expandedCommands[commandHistory.length - 1 - index] && ( + {expandedRequests[requestHistory.length - 1 - index] && ( <>
- Command: + Request:
-                      {JSON.stringify(JSON.parse(cmd.command), null, 2)}
+                      {JSON.stringify(JSON.parse(request.request), null, 2)}
                     
- {cmd.response && ( + {request.response && (
Response:
-                        {JSON.stringify(JSON.parse(cmd.response), null, 2)}
+                        {JSON.stringify(JSON.parse(request.response), null, 2)}
                       
)} @@ -91,4 +91,4 @@ const CommandHistory = ({ ); }; -export default CommandHistory; +export default History;