@mcp-shark/mcp-shark 1.4.0

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

@@ -0,0 +1,280 @@
+import { useState, useEffect } from 'react';
+
+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);
+  const [selectedPrompt, setSelectedPrompt] = useState(null);
+  const [promptArgs, setPromptArgs] = useState('{}');
+  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);
+  }, []);
+
+  useEffect(() => {
+    if (serverStatus?.running && activeSection === 'tools' && tools.length === 0) {
+      const timer = setTimeout(() => {
+        loadTools();
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [serverStatus?.running]);
+
+  useEffect(() => {
+    if (!serverStatus?.running) return;
+
+    const timer = setTimeout(() => {
+      if (activeSection === 'tools' && !toolsLoaded && !toolsLoading) {
+        loadTools();
+      } else if (activeSection === 'prompts' && !promptsLoaded && !promptsLoading) {
+        loadPrompts();
+      } else if (activeSection === 'resources' && !resourcesLoaded && !resourcesLoading) {
+        loadResources();
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [
+    activeSection,
+    serverStatus?.running,
+    toolsLoaded,
+    promptsLoaded,
+    resourcesLoaded,
+    toolsLoading,
+    promptsLoading,
+    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;
+
+    try {
+      let args = {};
+      try {
+        args = JSON.parse(toolArgs);
+      } catch (e) {
+        setError('Invalid JSON in arguments');
+        return;
+      }
+
+      const result = await makeMcpRequest('tools/call', {
+        name: selectedTool.name,
+        arguments: args,
+      });
+
+      setToolResult(result);
+    } catch (err) {
+      setToolResult({ error: err.message });
+    }
+  };
+
+  const handleGetPrompt = async () => {
+    if (!selectedPrompt) return;
+
+    try {
+      let args = {};
+      try {
+        args = JSON.parse(promptArgs);
+      } catch (e) {
+        setError('Invalid JSON in arguments');
+        return;
+      }
+
+      const result = await makeMcpRequest('prompts/get', {
+        name: selectedPrompt.name,
+        arguments: args,
+      });
+
+      setPromptResult(result);
+    } catch (err) {
+      setPromptResult({ error: err.message });
+    }
+  };
+
+  const handleReadResource = async () => {
+    if (!selectedResource) return;
+
+    try {
+      const result = await makeMcpRequest('resources/read', {
+        uri: selectedResource.uri,
+      });
+
+      setResourceResult(result);
+    } catch (err) {
+      setResourceResult({ error: err.message });
+    }
+  };
+
+  return {
+    activeSection,
+    setActiveSection,
+    tools,
+    prompts,
+    resources,
+    loading,
+    error,
+    selectedTool,
+    setSelectedTool,
+    toolArgs,
+    setToolArgs,
+    toolResult,
+    selectedPrompt,
+    setSelectedPrompt,
+    promptArgs,
+    setPromptArgs,
+    promptResult,
+    selectedResource,
+    setSelectedResource,
+    resourceResult,
+    serverStatus,
+    showLoadingModal,
+    toolsLoading,
+    promptsLoading,
+    resourcesLoading,
+    toolsLoaded,
+    promptsLoaded,
+    resourcesLoaded,
+    loadTools,
+    loadPrompts,
+    loadResources,
+    handleCallTool,
+    handleGetPrompt,
+    handleReadResource,
+  };
+}

package/ui/src/components/McpPlayground.jsx

@@ -0,0 +1,171 @@
+import { colors, fonts } from '../theme';
+import { useMcpPlayground } from './McpPlayground/useMcpPlayground';
+import LoadingModal from './McpPlayground/LoadingModal';
+import ToolsSection from './McpPlayground/ToolsSection';
+import PromptsSection from './McpPlayground/PromptsSection';
+import ResourcesSection from './McpPlayground/ResourcesSection';
+
+function McpPlayground() {
+  const {
+    activeSection,
+    setActiveSection,
+    tools,
+    prompts,
+    resources,
+    loading,
+    error,
+    selectedTool,
+    setSelectedTool,
+    toolArgs,
+    setToolArgs,
+    toolResult,
+    selectedPrompt,
+    setSelectedPrompt,
+    promptArgs,
+    setPromptArgs,
+    promptResult,
+    selectedResource,
+    setSelectedResource,
+    resourceResult,
+    serverStatus,
+    showLoadingModal,
+    toolsLoading,
+    promptsLoading,
+    resourcesLoading,
+    toolsLoaded,
+    promptsLoaded,
+    resourcesLoaded,
+    loadTools,
+    loadPrompts,
+    loadResources,
+    handleCallTool,
+    handleGetPrompt,
+    handleReadResource,
+  } = useMcpPlayground();
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          background: colors.bgPrimary,
+          padding: '20px',
+          gap: '16px',
+          position: 'relative',
+        }}
+      >
+        <LoadingModal show={showLoadingModal} />
+
+        {error && !error.includes(':') && (
+          <div
+            style={{
+              padding: '12px 16px',
+              background: colors.error,
+              color: colors.textInverse,
+              borderRadius: '6px',
+              fontSize: '13px',
+              fontFamily: fonts.body,
+            }}
+          >
+            Error: {error}
+          </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 style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+          {activeSection === 'tools' && (
+            <ToolsSection
+              tools={tools}
+              selectedTool={selectedTool}
+              onSelectTool={setSelectedTool}
+              toolArgs={toolArgs}
+              onToolArgsChange={setToolArgs}
+              toolResult={toolResult}
+              onCallTool={handleCallTool}
+              loading={loading}
+              toolsLoading={toolsLoading}
+              toolsLoaded={toolsLoaded}
+              serverStatus={serverStatus}
+              error={error}
+              onRefresh={loadTools}
+            />
+          )}
+          {activeSection === 'prompts' && (
+            <PromptsSection
+              prompts={prompts}
+              selectedPrompt={selectedPrompt}
+              onSelectPrompt={setSelectedPrompt}
+              promptArgs={promptArgs}
+              onPromptArgsChange={setPromptArgs}
+              promptResult={promptResult}
+              onGetPrompt={handleGetPrompt}
+              loading={loading}
+              promptsLoading={promptsLoading}
+              promptsLoaded={promptsLoaded}
+              serverStatus={serverStatus}
+              error={error}
+              onRefresh={loadPrompts}
+            />
+          )}
+          {activeSection === 'resources' && (
+            <ResourcesSection
+              resources={resources}
+              selectedResource={selectedResource}
+              onSelectResource={setSelectedResource}
+              resourceResult={resourceResult}
+              onReadResource={handleReadResource}
+              loading={loading}
+              resourcesLoading={resourcesLoading}
+              resourcesLoaded={resourcesLoaded}
+              serverStatus={serverStatus}
+              error={error}
+              onRefresh={loadResources}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default McpPlayground;

package/ui/src/components/MessageDisplay.jsx

@@ -0,0 +1,28 @@
+import { colors, fonts, withOpacity } from '../theme';
+
+function MessageDisplay({ message, error }) {
+  if (!message && !error) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        marginBottom: '20px',
+        padding: '12px 16px',
+        background: message ? withOpacity(colors.info, 0.15) : withOpacity(colors.error, 0.15),
+        border: `1px solid ${message ? colors.info : colors.error}`,
+        borderRadius: '8px',
+        color: message ? colors.textPrimary : colors.error,
+        fontSize: '13px',
+        lineHeight: '1.6',
+        fontFamily: fonts.body,
+        boxShadow: `0 2px 4px ${colors.shadowSm}`,
+      }}
+    >
+      {message || error}
+    </div>
+  );
+}
+
+export default MessageDisplay;

package/ui/src/components/PacketDetailHeader.jsx

@@ -0,0 +1,88 @@
+import { colors, fonts } from '../theme';
+import { IconX } from '@tabler/icons-react';
+
+function PacketDetailHeader({ request, onClose, matchingPair }) {
+  const formatBytes = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  };
+
+  return (
+    <div
+      style={{
+        padding: '12px 16px',
+        borderBottom: `1px solid ${colors.borderLight}`,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        background: colors.bgCard,
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <h3
+          style={{
+            fontSize: '14px',
+            fontWeight: '600',
+            color: colors.textPrimary,
+            margin: 0,
+            fontFamily: fonts.body,
+          }}
+        >
+          #{request.frame_number}:{' '}
+          {request.direction === 'request' ? 'HTTP Request' : 'HTTP Response'}
+          {matchingPair && (
+            <span
+              style={{
+                fontSize: '11px',
+                color: colors.textTertiary,
+                fontWeight: '400',
+                marginLeft: '8px',
+              }}
+            >
+              (with #{matchingPair.frame_number})
+            </span>
+          )}
+        </h3>
+        <span
+          style={{
+            fontSize: '11px',
+            color: colors.textSecondary,
+            padding: '4px 8px',
+            background: colors.bgSecondary,
+            borderRadius: '8px',
+            fontFamily: fonts.mono,
+          }}
+        >
+          {formatBytes(request.length)} bytes
+        </span>
+      </div>
+      <button
+        onClick={onClose}
+        style={{
+          background: 'none',
+          border: 'none',
+          color: colors.textSecondary,
+          cursor: 'pointer',
+          fontSize: '20px',
+          padding: '4px 8px',
+          borderRadius: '8px',
+          transition: 'all 0.2s',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.color = colors.textPrimary;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = 'none';
+          e.currentTarget.style.color = colors.textSecondary;
+        }}
+      >
+        <IconX size={20} stroke={1.5} />
+      </button>
+    </div>
+  );
+}
+
+export default PacketDetailHeader;

package/ui/src/components/PacketFilters/ExportControls.jsx

@@ -0,0 +1,126 @@
+import { colors, fonts } from '../../theme';
+import { IconDownload } from '@tabler/icons-react';
+import anime from 'animejs';
+
+export default function ExportControls({ stats, onExport }) {
+  return (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center', marginLeft: 'auto' }}>
+      {stats && (
+        <>
+          <span style={{ color: colors.textSecondary, fontSize: '12px', fontFamily: fonts.body }}>
+            Total:{' '}
+            <span style={{ color: colors.textPrimary, fontWeight: '500' }}>
+              {stats.total_packets || 0}
+            </span>
+          </span>
+          <span style={{ color: colors.textSecondary, fontSize: '12px', fontFamily: fonts.body }}>
+            Requests:{' '}
+            <span style={{ color: colors.accentBlue, fontWeight: '500' }}>
+              {stats.total_requests || 0}
+            </span>
+          </span>
+          <span style={{ color: colors.textSecondary, fontSize: '12px', fontFamily: fonts.body }}>
+            Responses:{' '}
+            <span style={{ color: colors.accentGreen, fontWeight: '500' }}>
+              {stats.total_responses || 0}
+            </span>
+          </span>
+          <span style={{ color: colors.textSecondary, fontSize: '12px', fontFamily: fonts.body }}>
+            Errors:{' '}
+            <span style={{ color: colors.error, fontWeight: '500' }}>
+              {stats.total_errors || 0}
+            </span>
+          </span>
+          <span style={{ color: colors.textSecondary, fontSize: '12px', fontFamily: fonts.body }}>
+            Sessions:{' '}
+            <span style={{ color: colors.textPrimary, fontWeight: '500' }}>
+              {stats.unique_sessions || 0}
+            </span>
+          </span>
+        </>
+      )}
+      <div
+        style={{
+          display: 'flex',
+          gap: '6px',
+          alignItems: 'center',
+          marginLeft: '12px',
+          paddingLeft: '12px',
+          borderLeft: `1px solid ${colors.borderLight}`,
+        }}
+      >
+        <button
+          onClick={() => onExport('json')}
+          style={{
+            padding: '8px 14px',
+            background: colors.buttonPrimary,
+            border: 'none',
+            color: colors.textInverse,
+            fontSize: '12px',
+            fontFamily: fonts.body,
+            fontWeight: '500',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+            transition: 'all 0.2s',
+            boxShadow: `0 2px 4px ${colors.shadowSm}`,
+          }}
+          onMouseEnter={(e) => {
+            anime({
+              targets: e.currentTarget,
+              background: colors.buttonPrimaryHover,
+              translateY: -1,
+              boxShadow: [`0 2px 4px ${colors.shadowSm}`, `0 4px 8px ${colors.shadowMd}`],
+              duration: 200,
+              easing: 'easeOutQuad',
+            });
+          }}
+          onMouseLeave={(e) => {
+            anime({
+              targets: e.currentTarget,
+              background: colors.buttonPrimary,
+              translateY: 0,
+              boxShadow: [`0 4px 8px ${colors.shadowMd}`, `0 2px 4px ${colors.shadowSm}`],
+              duration: 200,
+              easing: 'easeOutQuad',
+            });
+          }}
+          title="Export as JSON"
+        >
+          <IconDownload size={14} stroke={1.5} />
+          Export
+        </button>
+        <select
+          onChange={(e) => onExport(e.target.value)}
+          value=""
+          style={{
+            padding: '8px 10px',
+            background: colors.bgCard,
+            border: `1px solid ${colors.borderLight}`,
+            color: colors.textPrimary,
+            fontSize: '11px',
+            fontFamily: fonts.body,
+            borderRadius: '8px',
+            cursor: 'pointer',
+            transition: 'all 0.2s',
+          }}
+          onFocus={(e) => {
+            e.currentTarget.style.borderColor = colors.accentBlue;
+          }}
+          onBlur={(e) => {
+            e.currentTarget.style.borderColor = colors.borderLight;
+          }}
+        >
+          <option value="" disabled>
+            Format
+          </option>
+          <option value="json">JSON</option>
+          <option value="csv">CSV</option>
+          <option value="txt">TXT</option>
+        </select>
+      </div>
+    </div>
+  );
+}