@mcp-shark/mcp-shark 1.4.1 → 1.5.0

package/ui/src/components/McpPlayground/ToolsSection/ToolsList.jsx

@@ -1,7 +1,7 @@
 import { colors } from '../../../theme';
-import LoadingState from '../common/LoadingState';
-import ErrorState from '../common/ErrorState';
 import EmptyState from '../common/EmptyState';
+import ErrorState from '../common/ErrorState';
+import LoadingState from '../common/LoadingState';
 import ToolItem from './ToolItem';
 
 export default function ToolsList({
@@ -26,19 +26,21 @@ export default function ToolsList({
         <LoadingState message="Waiting for MCP server to start..." />
       ) : toolsLoading || !toolsLoaded ? (
         <LoadingState message="Loading tools..." />
-      ) : error && error.includes('tools:') ? (
+      ) : error?.includes('tools:') ? (
         <ErrorState message={`Error loading tools: ${error.replace('tools: ', '')}`} />
       ) : tools.length === 0 ? (
         <EmptyState message="No tools available." />
       ) : (
-        tools.map((tool, idx) => (
-          <ToolItem
-            key={idx}
-            tool={tool}
-            isSelected={selectedTool?.name === tool.name}
-            onClick={() => onSelectTool(tool)}
-          />
-        ))
+        <div style={{ padding: '8px 0' }}>
+          {tools.map((tool, idx) => (
+            <ToolItem
+              key={tool.name || `tool-${idx}`}
+              tool={tool}
+              isSelected={selectedTool?.name === tool.name}
+              onClick={() => onSelectTool(tool)}
+            />
+          ))}
+        </div>
       )}
     </div>
   );

package/ui/src/components/McpPlayground/ToolsSection.jsx

@@ -1,6 +1,6 @@
 import { colors, fonts } from '../../theme';
-import ToolsList from './ToolsSection/ToolsList';
 import ToolCallPanel from './ToolsSection/ToolCallPanel';
+import ToolsList from './ToolsSection/ToolsList';
 
 export default function ToolsSection({
   tools,
@@ -33,6 +33,7 @@ export default function ToolsSection({
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
       <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
         <button
+          type="button"
           onClick={onRefresh}
           disabled={loading || toolsLoading}
           style={{

package/ui/src/components/McpPlayground/hooks/useMcpDataLoader.js

@@ -0,0 +1,107 @@
+import { useCallback, useState } from 'react';
+
+export function useMcpDataLoader(makeMcpRequest, selectedServer, setError) {
+  const [tools, setTools] = useState([]);
+  const [prompts, setPrompts] = useState([]);
+  const [resources, setResources] = useState([]);
+  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 loadTools = useCallback(async () => {
+    if (!selectedServer) {
+      setError('tools: No server selected');
+      setToolsLoaded(true);
+      return;
+    }
+
+    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);
+    }
+  }, [selectedServer, makeMcpRequest, setError]);
+
+  const loadPrompts = useCallback(async () => {
+    if (!selectedServer) {
+      setError('prompts: No server selected');
+      setPromptsLoaded(true);
+      return;
+    }
+
+    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);
+    }
+  }, [selectedServer, makeMcpRequest, setError]);
+
+  const loadResources = useCallback(async () => {
+    if (!selectedServer) {
+      setError('resources: No server selected');
+      setResourcesLoaded(true);
+      return;
+    }
+
+    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);
+    }
+  }, [selectedServer, makeMcpRequest, setError]);
+
+  const resetData = useCallback(() => {
+    setToolsLoaded(false);
+    setPromptsLoaded(false);
+    setResourcesLoaded(false);
+    setTools([]);
+    setPrompts([]);
+    setResources([]);
+  }, []);
+
+  return {
+    tools,
+    prompts,
+    resources,
+    toolsLoading,
+    promptsLoading,
+    resourcesLoading,
+    toolsLoaded,
+    promptsLoaded,
+    resourcesLoaded,
+    loadTools,
+    loadPrompts,
+    loadResources,
+    resetData,
+  };
+}

package/ui/src/components/McpPlayground/hooks/useMcpRequest.js

@@ -0,0 +1,70 @@
+import { useCallback, useRef, useState } from 'react';
+
+export function useMcpRequest(selectedServer) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [sessionId, setSessionId] = useState(null);
+  const sessionIdRef = useRef(sessionId);
+
+  // Keep ref in sync with state
+  sessionIdRef.current = sessionId;
+
+  const makeMcpRequest = useCallback(
+    async (method, params = {}) => {
+      if (!selectedServer) {
+        throw new Error('No server selected');
+      }
+
+      setError(null);
+      setLoading(true);
+
+      try {
+        const headers = { 'Content-Type': 'application/json' };
+        const currentSessionId = sessionIdRef.current;
+        if (currentSessionId) {
+          headers['Mcp-Session-Id'] = currentSessionId;
+        }
+
+        const response = await fetch('/api/playground/proxy', {
+          method: 'POST',
+          headers,
+          body: JSON.stringify({ method, params, serverName: selectedServer }),
+        });
+
+        const data = await response.json();
+
+        const responseSessionId =
+          response.headers.get('Mcp-Session-Id') ||
+          response.headers.get('mcp-session-id') ||
+          data._sessionId;
+        if (responseSessionId && responseSessionId !== currentSessionId) {
+          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);
+      }
+    },
+    [selectedServer]
+  );
+
+  const resetSession = useCallback(() => {
+    setSessionId(null);
+  }, []);
+
+  return {
+    makeMcpRequest,
+    loading,
+    error,
+    setError,
+    resetSession,
+  };
+}

package/ui/src/components/McpPlayground/hooks/useMcpServerStatus.js

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export function useMcpServerStatus() {
+  const [serverStatus, setServerStatus] = useState(null);
+  const [showLoadingModal, setShowLoadingModal] = useState(false);
+  const [availableServers, setAvailableServers] = useState([]);
+  const [selectedServer, setSelectedServer] = useState(null);
+
+  const checkServerStatus = useCallback(async () => {
+    try {
+      const res = await fetch('/api/composite/status');
+      if (!res.ok) {
+        throw new Error('Server not available');
+      }
+      const data = await res.json();
+      setServerStatus((prevStatus) => {
+        const wasRunning = prevStatus?.running;
+        if (!data.running) {
+          setShowLoadingModal((prevModal) => {
+            if (!prevModal || wasRunning) {
+              return true;
+            }
+            return prevModal;
+          });
+        } else {
+          setShowLoadingModal((prevModal) => {
+            if (prevModal) {
+              return false;
+            }
+            return prevModal;
+          });
+        }
+        return data;
+      });
+    } catch (_err) {
+      setServerStatus({ running: false });
+      setShowLoadingModal((prevModal) => {
+        if (!prevModal) {
+          return true;
+        }
+        return prevModal;
+      });
+    }
+  }, []);
+
+  const loadAvailableServers = useCallback(async () => {
+    try {
+      const res = await fetch('/api/composite/servers');
+      if (res.ok) {
+        const data = await res.json();
+        setAvailableServers(data.servers || []);
+        setSelectedServer((current) => {
+          if (!current && data.servers && data.servers.length > 0) {
+            return data.servers[0];
+          }
+          return current;
+        });
+      }
+    } catch (err) {
+      console.error('Failed to load servers:', err);
+    }
+  }, []);
+
+  // Load servers once on mount
+  useEffect(() => {
+    loadAvailableServers();
+  }, [loadAvailableServers]);
+
+  // Poll server status every 2 seconds
+  useEffect(() => {
+    checkServerStatus();
+    const interval = setInterval(checkServerStatus, 2000);
+    return () => clearInterval(interval);
+  }, [checkServerStatus]);
+
+  useEffect(() => {
+    if (availableServers.length > 0 && !selectedServer) {
+      setSelectedServer(availableServers[0]);
+    }
+  }, [availableServers, selectedServer]);
+
+  return {
+    serverStatus,
+    showLoadingModal,
+    availableServers,
+    selectedServer,
+    setSelectedServer,
+    checkServerStatus,
+  };
+}

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

@@ -1,12 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useMcpDataLoader } from './hooks/useMcpDataLoader';
+import { useMcpRequest } from './hooks/useMcpRequest';
+import { useMcpServerStatus } from './hooks/useMcpServerStatus';
 
 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,180 +13,128 @@ 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);
 
-  useEffect(() => {
-    checkServerStatus();
-    const interval = setInterval(checkServerStatus, 2000);
-    return () => clearInterval(interval);
-  }, []);
+  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);
+
+  const activeSectionRef = useRef(activeSection);
+  activeSectionRef.current = activeSection;
+
+  // Reset and reload data when server changes (not when section changes)
   useEffect(() => {
-    if (serverStatus?.running && activeSection === 'tools' && tools.length === 0) {
-      const timer = setTimeout(() => {
-        loadTools();
-      }, 2000);
-      return () => clearTimeout(timer);
+    if (!selectedServer || !serverStatus?.running) {
+      return;
     }
-  }, [serverStatus?.running]);
 
-  useEffect(() => {
-    if (!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' && !toolsLoaded && !toolsLoading) {
+      const currentSection = activeSectionRef.current;
+      if (currentSection === 'tools') {
         loadTools();
-      } else if (activeSection === 'prompts' && !promptsLoaded && !promptsLoading) {
+      } else if (currentSection === 'prompts') {
         loadPrompts();
-      } else if (activeSection === 'resources' && !resourcesLoaded && !resourcesLoading) {
+      } else if (currentSection === 'resources') {
         loadResources();
       }
     }, 100);
 
     return () => clearTimeout(timer);
   }, [
-    activeSection,
+    selectedServer,
     serverStatus?.running,
-    toolsLoaded,
-    promptsLoaded,
-    resourcesLoaded,
-    toolsLoading,
-    promptsLoading,
-    resourcesLoading,
+    resetData,
+    loadTools,
+    loadPrompts,
+    loadResources,
+    resetSession,
+    setError,
   ]);
 
-  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);
+  // Load data when section changes (only if not already loaded)
+  useEffect(() => {
+    if (!serverStatus?.running || !selectedServer) {
+      return;
     }
-  };
 
-  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);
+    // Only load if we haven't loaded this section yet and we're not currently loading
+    if (activeSection === 'tools' && !toolsLoaded && !toolsLoading) {
+      const timer = setTimeout(() => {
+        loadTools();
+      }, 100);
+      return () => clearTimeout(timer);
     }
-  };
-
-  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);
+    if (activeSection === 'prompts' && !promptsLoaded && !promptsLoading) {
+      const timer = setTimeout(() => {
+        loadPrompts();
+      }, 100);
+      return () => clearTimeout(timer);
     }
-  };
-
-  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);
+    if (activeSection === 'resources' && !resourcesLoaded && !resourcesLoading) {
+      const timer = setTimeout(() => {
+        loadResources();
+      }, 100);
+      return () => clearTimeout(timer);
     }
-  };
+  }, [
+    activeSection,
+    serverStatus?.running,
+    selectedServer,
+    toolsLoaded,
+    toolsLoading,
+    promptsLoaded,
+    promptsLoading,
+    resourcesLoaded,
+    resourcesLoading,
+    loadTools,
+    loadPrompts,
+    loadResources,
+  ]);
 
   const handleCallTool = async () => {
-    if (!selectedTool) return;
+    if (!selectedTool) {
+      return;
+    }
 
     try {
-      let args = {};
-      try {
-        args = JSON.parse(toolArgs);
-      } catch (e) {
+      const parseArgs = (argsString) => {
+        try {
+          return JSON.parse(argsString);
+        } catch (_e) {
+          return null;
+        }
+      };
+
+      const args = parseArgs(toolArgs);
+      if (args === null) {
         setError('Invalid JSON in arguments');
         return;
       }
@@ -205,13 +151,21 @@ export function useMcpPlayground() {
   };
 
   const handleGetPrompt = async () => {
-    if (!selectedPrompt) return;
+    if (!selectedPrompt) {
+      return;
+    }
 
     try {
-      let args = {};
-      try {
-        args = JSON.parse(promptArgs);
-      } catch (e) {
+      const parseArgs = (argsString) => {
+        try {
+          return JSON.parse(argsString);
+        } catch (_e) {
+          return null;
+        }
+      };
+
+      const args = parseArgs(promptArgs);
+      if (args === null) {
         setError('Invalid JSON in arguments');
         return;
       }
@@ -228,7 +182,9 @@ export function useMcpPlayground() {
   };
 
   const handleReadResource = async () => {
-    if (!selectedResource) return;
+    if (!selectedResource) {
+      return;
+    }
 
     try {
       const result = await makeMcpRequest('resources/read', {
@@ -276,5 +232,8 @@ export function useMcpPlayground() {
     handleCallTool,
     handleGetPrompt,
     handleReadResource,
+    availableServers,
+    selectedServer,
+    setSelectedServer,
   };
 }