@mcp-shark/mcp-shark 1.4.0 → 1.4.2

package/ui/src/components/McpPlayground/ResourcesSection/ResourceItem.jsx

@@ -5,55 +5,83 @@ export default function ResourceItem({ resource, isSelected, onClick }) {
     <div
       onClick={onClick}
       style={{
-        padding: '12px',
-        borderBottom: `1px solid ${colors.borderLight}`,
+        padding: '16px 20px',
+        margin: '4px 8px',
+        borderRadius: '8px',
         cursor: 'pointer',
-        background: isSelected ? colors.bgSecondary : colors.bgCard,
-        transition: 'background 0.2s',
+        background: isSelected ? colors.bgSelected : colors.bgCard,
+        border: isSelected ? `2px solid ${colors.accentBlue}` : `1px solid ${colors.borderLight}`,
+        boxShadow: isSelected ? `0 2px 4px ${colors.shadowSm}` : 'none',
+        transition: 'all 0.2s ease',
+        position: 'relative',
       }}
       onMouseEnter={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.borderColor = colors.borderMedium;
+          e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
         }
       }}
       onMouseLeave={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgCard;
+          e.currentTarget.style.borderColor = colors.borderLight;
+          e.currentTarget.style.boxShadow = 'none';
         }
       }}
     >
-      <div
-        style={{
-          fontWeight: '500',
-          fontSize: '13px',
-          color: colors.textPrimary,
-          marginBottom: '4px',
-        }}
-      >
-        {resource.uri}
-      </div>
-      {resource.name && (
-        <div
-          style={{
-            fontSize: '12px',
-            color: colors.textSecondary,
-            marginTop: '4px',
-          }}
-        >
-          {resource.name}
-        </div>
-      )}
-      {resource.description && (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
         <div
           style={{
-            fontSize: '12px',
-            color: colors.textSecondary,
-            marginTop: '4px',
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            background: isSelected ? colors.accentBlue : colors.textTertiary,
+            marginTop: '6px',
+            flexShrink: 0,
+            transition: 'background 0.2s',
           }}
-        >
-          {resource.description}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: isSelected ? '600' : '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+              marginBottom: resource.name || resource.description ? '6px' : '0',
+              lineHeight: '1.4',
+              wordBreak: 'break-word',
+            }}
+          >
+            {resource.uri}
+          </div>
+          {resource.name && (
+            <div
+              style={{
+                fontSize: '13px',
+                color: colors.textPrimary,
+                fontWeight: '500',
+                lineHeight: '1.5',
+                marginTop: '4px',
+              }}
+            >
+              {resource.name}
+            </div>
+          )}
+          {resource.description && (
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                lineHeight: '1.5',
+                marginTop: resource.name ? '2px' : '4px',
+              }}
+            >
+              {resource.description}
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }

package/ui/src/components/McpPlayground/ResourcesSection/ResourcesList.jsx

@@ -31,14 +31,16 @@ export default function ResourcesList({
       ) : resources.length === 0 ? (
         <EmptyState message="No resources available." />
       ) : (
-        resources.map((resource, idx) => (
-          <ResourceItem
-            key={idx}
-            resource={resource}
-            isSelected={selectedResource?.uri === resource.uri}
-            onClick={() => onSelectResource(resource)}
-          />
-        ))
+        <div style={{ padding: '8px 0' }}>
+          {resources.map((resource, idx) => (
+            <ResourceItem
+              key={idx}
+              resource={resource}
+              isSelected={selectedResource?.uri === resource.uri}
+              onClick={() => onSelectResource(resource)}
+            />
+          ))}
+        </div>
       )}
     </div>
   );

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

@@ -5,44 +5,69 @@ export default function ToolItem({ tool, isSelected, onClick }) {
     <div
       onClick={onClick}
       style={{
-        padding: '12px',
-        borderBottom: `1px solid ${colors.borderLight}`,
+        padding: '16px 20px',
+        margin: '4px 8px',
+        borderRadius: '8px',
         cursor: 'pointer',
-        background: isSelected ? colors.bgSecondary : colors.bgCard,
-        transition: 'background 0.2s',
+        background: isSelected ? colors.bgSelected : colors.bgCard,
+        border: isSelected ? `2px solid ${colors.accentBlue}` : `1px solid ${colors.borderLight}`,
+        boxShadow: isSelected ? `0 2px 4px ${colors.shadowSm}` : 'none',
+        transition: 'all 0.2s ease',
+        position: 'relative',
       }}
       onMouseEnter={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.borderColor = colors.borderMedium;
+          e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
         }
       }}
       onMouseLeave={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgCard;
+          e.currentTarget.style.borderColor = colors.borderLight;
+          e.currentTarget.style.boxShadow = 'none';
         }
       }}
     >
-      <div
-        style={{
-          fontWeight: '500',
-          fontSize: '13px',
-          color: colors.textPrimary,
-          marginBottom: '4px',
-        }}
-      >
-        {tool.name}
-      </div>
-      {tool.description && (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
         <div
           style={{
-            fontSize: '12px',
-            color: colors.textSecondary,
-            marginTop: '4px',
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            background: isSelected ? colors.accentBlue : colors.textTertiary,
+            marginTop: '6px',
+            flexShrink: 0,
+            transition: 'background 0.2s',
           }}
-        >
-          {tool.description}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: isSelected ? '600' : '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+              marginBottom: tool.description ? '6px' : '0',
+              lineHeight: '1.4',
+            }}
+          >
+            {tool.name}
+          </div>
+          {tool.description && (
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                lineHeight: '1.5',
+                marginTop: '4px',
+              }}
+            >
+              {tool.description}
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }

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

@@ -31,14 +31,16 @@ export default function ToolsList({
       ) : 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={idx}
+              tool={tool}
+              isSelected={selectedTool?.name === tool.name}
+              onClick={() => onSelectTool(tool)}
+            />
+          ))}
+        </div>
       )}
     </div>
   );

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

@@ -0,0 +1,107 @@
+import { 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 = 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);
+    }
+  };
+
+  const loadPrompts = 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);
+    }
+  };
+
+  const loadResources = 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);
+    }
+  };
+
+  const resetData = () => {
+    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,65 @@
+import { useState, useCallback } from 'react';
+
+export function useMcpRequest(selectedServer) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [sessionId, setSessionId] = useState(null);
+
+  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' };
+        if (sessionId) {
+          headers['Mcp-Session-Id'] = sessionId;
+        }
+
+        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 !== 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);
+      }
+    },
+    [selectedServer, sessionId]
+  );
+
+  const resetSession = useCallback(() => {
+    setSessionId(null);
+  }, []);
+
+  return {
+    makeMcpRequest,
+    loading,
+    error,
+    setError,
+    resetSession,
+  };
+}

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

@@ -0,0 +1,70 @@
+import { useState, useEffect } 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 = 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) {
+      setServerStatus({ running: false });
+      if (!showLoadingModal) {
+        setShowLoadingModal(true);
+      }
+    }
+  };
+
+  const loadAvailableServers = async () => {
+    try {
+      const res = await fetch('/api/composite/servers');
+      if (res.ok) {
+        const data = await res.json();
+        setAvailableServers(data.servers || []);
+        if (data.servers && data.servers.length > 0 && !selectedServer) {
+          setSelectedServer(data.servers[0]);
+        }
+      }
+    } catch (err) {
+      console.error('Failed to load servers:', err);
+    }
+  };
+
+  useEffect(() => {
+    checkServerStatus();
+    loadAvailableServers();
+    const interval = setInterval(checkServerStatus, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (availableServers.length > 0 && !selectedServer) {
+      setSelectedServer(availableServers[0]);
+    }
+  }, [availableServers, selectedServer]);
+
+  return {
+    serverStatus,
+    showLoadingModal,
+    availableServers,
+    selectedServer,
+    setSelectedServer,
+    checkServerStatus,
+  };
+}