@mcp-shark/mcp-shark 1.4.0 → 1.4.2

package/ui/src/components/McpPlayground/useMcpPlayground.js

@@ -1,12 +1,10 @@
 import { useState, useEffect } from 'react';
+import { useMcpRequest } from './hooks/useMcpRequest';
+import { useMcpServerStatus } from './hooks/useMcpServerStatus';
+import { useMcpDataLoader } from './hooks/useMcpDataLoader';
 
 export function useMcpPlayground() {
   const [activeSection, setActiveSection] = useState('tools');
-  const [tools, setTools] = useState([]);
-  const [prompts, setPrompts] = useState([]);
-  const [resources, setResources] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
   const [selectedTool, setSelectedTool] = useState(null);
   const [toolArgs, setToolArgs] = useState('{}');
   const [toolResult, setToolResult] = useState(null);
@@ -15,33 +13,77 @@ export function useMcpPlayground() {
   const [promptResult, setPromptResult] = useState(null);
   const [selectedResource, setSelectedResource] = useState(null);
   const [resourceResult, setResourceResult] = useState(null);
-  const [serverStatus, setServerStatus] = useState(null);
-  const [sessionId, setSessionId] = useState(null);
-  const [showLoadingModal, setShowLoadingModal] = useState(false);
-  const [toolsLoading, setToolsLoading] = useState(false);
-  const [promptsLoading, setPromptsLoading] = useState(false);
-  const [resourcesLoading, setResourcesLoading] = useState(false);
-  const [toolsLoaded, setToolsLoaded] = useState(false);
-  const [promptsLoaded, setPromptsLoaded] = useState(false);
-  const [resourcesLoaded, setResourcesLoaded] = useState(false);
 
+  const { serverStatus, showLoadingModal, availableServers, selectedServer, setSelectedServer } =
+    useMcpServerStatus();
+
+  const { makeMcpRequest, loading, error, setError, resetSession } = useMcpRequest(selectedServer);
+
+  const {
+    tools,
+    prompts,
+    resources,
+    toolsLoading,
+    promptsLoading,
+    resourcesLoading,
+    toolsLoaded,
+    promptsLoaded,
+    resourcesLoaded,
+    loadTools,
+    loadPrompts,
+    loadResources,
+    resetData,
+  } = useMcpDataLoader(makeMcpRequest, selectedServer, setError);
+
+  // Reset and reload data when server changes
   useEffect(() => {
-    checkServerStatus();
-    const interval = setInterval(checkServerStatus, 2000);
-    return () => clearInterval(interval);
-  }, []);
+    if (!selectedServer || !serverStatus?.running) {
+      return;
+    }
+
+    resetData();
+    setSelectedTool(null);
+    setSelectedPrompt(null);
+    setSelectedResource(null);
+    setToolResult(null);
+    setPromptResult(null);
+    setResourceResult(null);
+    setToolArgs('{}');
+    setPromptArgs('{}');
+    resetSession();
+    setError(null);
+
+    const timer = setTimeout(() => {
+      if (activeSection === 'tools') {
+        loadTools();
+      } else if (activeSection === 'prompts') {
+        loadPrompts();
+      } else if (activeSection === 'resources') {
+        loadResources();
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedServer, serverStatus?.running, activeSection]);
 
   useEffect(() => {
-    if (serverStatus?.running && activeSection === 'tools' && tools.length === 0) {
+    if (
+      serverStatus?.running &&
+      activeSection === 'tools' &&
+      tools.length === 0 &&
+      selectedServer
+    ) {
       const timer = setTimeout(() => {
         loadTools();
       }, 2000);
       return () => clearTimeout(timer);
     }
-  }, [serverStatus?.running]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [serverStatus?.running, selectedServer, activeSection, tools.length]);
 
   useEffect(() => {
-    if (!serverStatus?.running) return;
+    if (!serverStatus?.running || !selectedServer) return;
 
     const timer = setTimeout(() => {
       if (activeSection === 'tools' && !toolsLoaded && !toolsLoading) {
@@ -54,9 +96,11 @@ export function useMcpPlayground() {
     }, 100);
 
     return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     activeSection,
     serverStatus?.running,
+    selectedServer,
     toolsLoaded,
     promptsLoaded,
     resourcesLoaded,
@@ -65,122 +109,6 @@ export function useMcpPlayground() {
     resourcesLoading,
   ]);
 
-  const checkServerStatus = async () => {
-    try {
-      const res = await fetch('/api/composite/status');
-      if (!res.ok) {
-        throw new Error('Server not available');
-      }
-      const data = await res.json();
-      const wasRunning = serverStatus?.running;
-      setServerStatus(data);
-
-      if (!data.running) {
-        if (!showLoadingModal || wasRunning) {
-          setShowLoadingModal(true);
-        }
-      } else if (data.running && showLoadingModal) {
-        setShowLoadingModal(false);
-      }
-    } catch (err) {
-      // Silently handle connection errors - server is not running
-      setServerStatus({ running: false });
-      if (!showLoadingModal) {
-        setShowLoadingModal(true);
-      }
-    }
-  };
-
-  const makeMcpRequest = async (method, params = {}) => {
-    setError(null);
-    setLoading(true);
-
-    try {
-      const headers = { 'Content-Type': 'application/json' };
-      if (sessionId) {
-        headers['Mcp-Session-Id'] = sessionId;
-      }
-
-      const response = await fetch('/api/playground/proxy', {
-        method: 'POST',
-        headers,
-        body: JSON.stringify({ method, params }),
-      });
-
-      const data = await response.json();
-
-      const responseSessionId =
-        response.headers.get('Mcp-Session-Id') ||
-        response.headers.get('mcp-session-id') ||
-        data._sessionId;
-      if (responseSessionId && responseSessionId !== sessionId) {
-        setSessionId(responseSessionId);
-      }
-
-      if (!response.ok) {
-        throw new Error(data.error?.message || data.message || 'Request failed');
-      }
-
-      return data.result || data;
-    } catch (err) {
-      setError(err.message);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const loadTools = async () => {
-    setToolsLoading(true);
-    setError(null);
-    try {
-      const result = await makeMcpRequest('tools/list');
-      setTools(result?.tools || []);
-      setToolsLoaded(true);
-    } catch (err) {
-      const errorMsg = err.message || 'Failed to load tools';
-      setError(`tools: ${errorMsg}`);
-      setToolsLoaded(true);
-      console.error('Failed to load tools:', err);
-    } finally {
-      setToolsLoading(false);
-    }
-  };
-
-  const loadPrompts = async () => {
-    setPromptsLoading(true);
-    setError(null);
-    try {
-      const result = await makeMcpRequest('prompts/list');
-      setPrompts(result?.prompts || []);
-      setPromptsLoaded(true);
-    } catch (err) {
-      const errorMsg = err.message || 'Failed to load prompts';
-      setError(`prompts: ${errorMsg}`);
-      setPromptsLoaded(true);
-      console.error('Failed to load prompts:', err);
-    } finally {
-      setPromptsLoading(false);
-    }
-  };
-
-  const loadResources = async () => {
-    setResourcesLoading(true);
-    setError(null);
-    try {
-      const result = await makeMcpRequest('resources/list');
-      setResources(result?.resources || []);
-      setResourcesLoaded(true);
-    } catch (err) {
-      const errorMsg = err.message || 'Failed to load resources';
-      setError(`resources: ${errorMsg}`);
-      setResourcesLoaded(true);
-      console.error('Failed to load resources:', err);
-    } finally {
-      setResourcesLoading(false);
-    }
-  };
-
   const handleCallTool = async () => {
     if (!selectedTool) return;
 
@@ -276,5 +204,8 @@ export function useMcpPlayground() {
     handleCallTool,
     handleGetPrompt,
     handleReadResource,
+    availableServers,
+    selectedServer,
+    setSelectedServer,
   };
 }

package/ui/src/components/McpPlayground.jsx

@@ -41,6 +41,9 @@ function McpPlayground() {
     handleCallTool,
     handleGetPrompt,
     handleReadResource,
+    availableServers,
+    selectedServer,
+    setSelectedServer,
   } = useMcpPlayground();
 
   return (
@@ -84,32 +87,108 @@ function McpPlayground() {
         <div
           style={{
             display: 'flex',
-            gap: '8px',
-            borderBottom: `1px solid ${colors.borderLight}`,
+            flexDirection: 'column',
+            gap: '12px',
           }}
         >
-          {['tools', 'prompts', 'resources'].map((section) => (
-            <button
-              key={section}
-              onClick={() => setActiveSection(section)}
+          {availableServers.length > 0 && (
+            <div
               style={{
-                padding: '10px 18px',
-                background: activeSection === section ? colors.bgSecondary : 'transparent',
-                border: 'none',
-                borderBottom: `2px solid ${activeSection === section ? colors.accentBlue : 'transparent'}`,
-                color: activeSection === section ? colors.textPrimary : colors.textSecondary,
-                cursor: 'pointer',
-                fontSize: '13px',
-                fontFamily: fonts.body,
-                fontWeight: activeSection === section ? '500' : '400',
-                textTransform: 'capitalize',
-                borderRadius: '6px 6px 0 0',
-                transition: 'all 0.2s',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
               }}
             >
-              {section}
-            </button>
-          ))}
+              <label
+                style={{
+                  fontSize: '13px',
+                  fontFamily: fonts.body,
+                  color: colors.textSecondary,
+                  fontWeight: '500',
+                }}
+              >
+                Server:
+              </label>
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '8px',
+                }}
+              >
+                {availableServers.map((server) => (
+                  <button
+                    key={server}
+                    onClick={() => setSelectedServer(server)}
+                    style={{
+                      padding: '10px 18px',
+                      background:
+                        selectedServer === server ? colors.accentBlue : colors.bgSecondary,
+                      border:
+                        selectedServer === server
+                          ? `2px solid ${colors.accentBlue}`
+                          : `1px solid ${colors.borderLight}`,
+                      borderRadius: '8px',
+                      color: selectedServer === server ? colors.textInverse : colors.textPrimary,
+                      fontSize: '13px',
+                      fontFamily: fonts.body,
+                      fontWeight: selectedServer === server ? '600' : '500',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s ease',
+                      boxShadow:
+                        selectedServer === server ? `0 2px 4px ${colors.shadowSm}` : 'none',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (selectedServer !== server) {
+                        e.currentTarget.style.background = colors.bgHover;
+                        e.currentTarget.style.borderColor = colors.borderMedium;
+                        e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      if (selectedServer !== server) {
+                        e.currentTarget.style.background = colors.bgSecondary;
+                        e.currentTarget.style.borderColor = colors.borderLight;
+                        e.currentTarget.style.boxShadow = 'none';
+                      }
+                    }}
+                  >
+                    {server}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+          <div
+            style={{
+              display: 'flex',
+              gap: '8px',
+              borderBottom: `1px solid ${colors.borderLight}`,
+            }}
+          >
+            {['tools', 'prompts', 'resources'].map((section) => (
+              <button
+                key={section}
+                onClick={() => setActiveSection(section)}
+                style={{
+                  padding: '10px 18px',
+                  background: activeSection === section ? colors.bgSecondary : 'transparent',
+                  border: 'none',
+                  borderBottom: `2px solid ${activeSection === section ? colors.accentBlue : 'transparent'}`,
+                  color: activeSection === section ? colors.textPrimary : colors.textSecondary,
+                  cursor: 'pointer',
+                  fontSize: '13px',
+                  fontFamily: fonts.body,
+                  fontWeight: activeSection === section ? '500' : '400',
+                  textTransform: 'capitalize',
+                  borderRadius: '6px 6px 0 0',
+                  transition: 'all 0.2s',
+                }}
+              >
+                {section}
+              </button>
+            ))}
+          </div>
         </div>
 
         <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>

package/ui/src/utils/requestUtils.js

@@ -1,3 +1,4 @@
+const LLM_SERVER = 'LLM Server';
 export function extractServerName(request) {
   if (request.body_json) {
     try {
@@ -59,13 +60,13 @@ export function formatDateTime(timestampISO) {
 export function getSourceDest(request) {
   if (request.direction === 'request') {
     return {
-      source: request.remote_address || 'Client',
-      dest: request.host || 'Server',
+      source: LLM_SERVER,
+      dest: request.remote_address || 'Unknown MCP Client',
     };
   }
   return {
-    source: request.host || 'Server',
-    dest: request.remote_address || 'Client',
+    source: request.remote_address || 'Unknown MCP Server',
+    dest: LLM_SERVER,
   };
 }