@mcp-shark/mcp-shark 1.4.0

package/ui/src/config/tourSteps.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+
+export const tourSteps = [
+  {
+    target: '[data-tour="tabs"]',
+    title: 'Welcome to MCP Shark!',
+    content: (
+      <div>
+        <p style={{ margin: '0 0 12px 0' }}>
+          MCP Shark is a powerful tool for monitoring and analyzing Model Context Protocol (MCP)
+          communications. Let's get you started!
+        </p>
+        <p style={{ margin: 0 }}>
+          First, you'll need to set up the MCP Shark server. Click on the{' '}
+          <strong>MCP Server Setup</strong> tab to begin.
+        </p>
+      </div>
+    ),
+    position: 'bottom',
+  },
+  {
+    target: '[data-tour="setup-tab"]',
+    title: 'Step 1: Open MCP Server Setup',
+    content: (
+      <div>
+        <p style={{ margin: '0 0 8px 0' }}>
+          Click on the <strong>MCP Server Setup</strong> tab to configure and start the MCP Shark
+          server.
+        </p>
+        <p style={{ margin: 0, fontSize: '12px', color: '#858585' }}>
+          This is where you'll configure your MCP servers and start monitoring.
+        </p>
+      </div>
+    ),
+    position: 'bottom',
+  },
+  {
+    target: '[data-tour="detected-editors"]',
+    title: 'Step 2: Select Your Configuration',
+    content: (
+      <div>
+        <p style={{ margin: '0 0 8px 0' }}>
+          MCP Shark automatically detects your IDE's MCP configuration files. You have two options:
+        </p>
+        <ul style={{ margin: '0 0 8px 0', paddingLeft: '20px', fontSize: '13px' }}>
+          <li>
+            Click on any <strong>detected editor</strong> (like Cursor or Windsurf) to use its
+            config
+          </li>
+          <li>
+            Or click <strong>"Select File"</strong> to upload your own config file
+          </li>
+        </ul>
+        <p style={{ margin: 0, fontSize: '12px', color: '#858585' }}>
+          When you click a detected editor, the file path will automatically populate in the text
+          box.
+        </p>
+      </div>
+    ),
+    position: 'bottom',
+  },
+  {
+    target: '[data-tour="select-file"]',
+    title: 'Alternative: Upload Your Config',
+    content: (
+      <div>
+        <p style={{ margin: '0 0 8px 0' }}>
+          If you prefer, you can click <strong>"Select File"</strong> to upload your MCP
+          configuration file directly.
+        </p>
+        <p style={{ margin: 0, fontSize: '12px', color: '#858585' }}>
+          Or manually enter the file path in the text box next to it.
+        </p>
+      </div>
+    ),
+    position: 'bottom',
+  },
+  {
+    target: '[data-tour="start-button"]',
+    title: 'Step 3: Start MCP Shark',
+    content: (
+      <div>
+        <p style={{ margin: '0 0 8px 0' }}>
+          Once you've selected a configuration file (either from detected editors or uploaded),
+          click <strong>"Start MCP Shark"</strong> to begin monitoring.
+        </p>
+        <p style={{ margin: 0, fontSize: '12px', color: '#858585' }}>
+          The server will start and begin capturing all MCP traffic between your IDE and servers.
+        </p>
+      </div>
+    ),
+    position: 'top',
+  },
+  {
+    target: '[data-tour="traffic-tab"]',
+    title: 'View Your Traffic',
+    content: (
+      <div>
+        <p style={{ margin: '0 0 8px 0' }}>
+          After starting the server, switch to the <strong>Traffic Capture</strong> tab to see all
+          HTTP requests and responses in real-time.
+        </p>
+        <p style={{ margin: 0, fontSize: '12px', color: '#858585' }}>
+          You can view traffic as a flat list, grouped by session, or grouped by server.
+        </p>
+      </div>
+    ),
+    position: 'bottom',
+  },
+  {
+    target: '[data-tour="smart-scan-tab"]',
+    title: 'Smart Scan - Security Analysis',
+    content: (
+      <div>
+        <p style={{ margin: '0 0 8px 0' }}>
+          The <strong>Smart Scan</strong> tab provides AI-powered security analysis for your MCP
+          servers. Discover servers, run security scans, and get detailed vulnerability reports.
+        </p>
+        <p style={{ margin: 0, fontSize: '12px', color: '#858585' }}>
+          Scan results are cached automatically, so you won't waste API calls on unchanged servers.
+        </p>
+      </div>
+    ),
+    position: 'bottom',
+  },
+  {
+    target: '[data-tour="help-button"]',
+    title: 'Need Help?',
+    content: (
+      <div>
+        <p style={{ margin: '0 0 8px 0' }}>
+          Click the <strong>Start Tour</strong> button anytime to restart this guide or get help.
+        </p>
+        <p style={{ margin: 0, fontSize: '12px', color: '#858585' }}>
+          You're all set! Start by configuring your MCP server, then watch the traffic flow.
+        </p>
+      </div>
+    ),
+    position: 'left',
+  },
+];

package/ui/src/hooks/useAnimation.js

@@ -0,0 +1,92 @@
+import { useEffect, useRef } from 'react';
+import anime from 'animejs';
+
+/**
+ * React hook for animating elements on mount/unmount
+ */
+export const useAnimation = (animationFn, deps = []) => {
+  const elementRef = useRef(null);
+  const animationRef = useRef(null);
+
+  useEffect(() => {
+    if (elementRef.current && animationFn) {
+      animationRef.current = animationFn(elementRef.current);
+    }
+
+    return () => {
+      if (animationRef.current) {
+        anime.remove(elementRef.current);
+      }
+    };
+  }, deps);
+
+  return elementRef;
+};
+
+/**
+ * Hook for animating on mount
+ */
+export const useMountAnimation = (options = {}) => {
+  const elementRef = useRef(null);
+
+  useEffect(() => {
+    if (elementRef.current) {
+      anime({
+        targets: elementRef.current,
+        opacity: [0, 1],
+        translateY: [20, 0],
+        duration: options.duration || 400,
+        easing: options.easing || 'easeOutExpo',
+        ...options,
+      });
+    }
+  }, []);
+
+  return elementRef;
+};
+
+/**
+ * Hook for animating on unmount
+ */
+export const useUnmountAnimation = (shouldUnmount, onComplete, options = {}) => {
+  const elementRef = useRef(null);
+
+  useEffect(() => {
+    if (shouldUnmount && elementRef.current) {
+      anime({
+        targets: elementRef.current,
+        opacity: [1, 0],
+        translateY: [0, -20],
+        duration: options.duration || 300,
+        easing: options.easing || 'easeInExpo',
+        complete: onComplete,
+        ...options,
+      });
+    }
+  }, [shouldUnmount, onComplete]);
+
+  return elementRef;
+};
+
+/**
+ * Hook for staggered list animations
+ */
+export const useStaggerAnimation = (items, options = {}) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (containerRef.current && items.length > 0) {
+      anime({
+        targets: containerRef.current.children,
+        opacity: [0, 1],
+        translateY: [20, 0],
+        duration: options.duration || 400,
+        delay: anime.stagger(options.delay || 50),
+        easing: options.easing || 'easeOutExpo',
+        ...options,
+      });
+    }
+  }, [items.length]);
+
+  return containerRef;
+};

package/ui/src/hooks/useConfigManagement.js

@@ -0,0 +1,124 @@
+import { useState, useEffect } from 'react';
+
+export function useConfigManagement() {
+  const [detectedPaths, setDetectedPaths] = useState([]);
+  const [detecting, setDetecting] = useState(true);
+  const [backups, setBackups] = useState([]);
+  const [loadingBackups, setLoadingBackups] = useState(false);
+  const [viewingConfig, setViewingConfig] = useState(null);
+  const [configContent, setConfigContent] = useState(null);
+  const [loadingConfig, setLoadingConfig] = useState(false);
+  const [viewingBackup, setViewingBackup] = useState(null);
+  const [backupContent, setBackupContent] = useState(null);
+  const [loadingBackup, setLoadingBackup] = useState(false);
+
+  const detectConfigPaths = async () => {
+    setDetecting(true);
+    try {
+      const res = await fetch('/api/config/detect');
+      const data = await res.json();
+      setDetectedPaths(data.detected || []);
+    } catch (err) {
+      console.error('Failed to detect config paths:', err);
+    } finally {
+      setDetecting(false);
+    }
+  };
+
+  const loadBackups = async () => {
+    setLoadingBackups(true);
+    try {
+      const res = await fetch('/api/config/backups');
+      const data = await res.json();
+      setBackups(data.backups || []);
+    } catch (err) {
+      console.error('Failed to load backups:', err);
+    } finally {
+      setLoadingBackups(false);
+    }
+  };
+
+  const handleViewConfig = async (filePath) => {
+    setLoadingConfig(true);
+    setViewingConfig(filePath);
+    try {
+      const res = await fetch(`/api/config/read?filePath=${encodeURIComponent(filePath)}`);
+      const data = await res.json();
+      if (res.ok) {
+        setConfigContent(data);
+      } else {
+        setConfigContent(null);
+      }
+    } catch (err) {
+      setConfigContent(null);
+    } finally {
+      setLoadingConfig(false);
+    }
+  };
+
+  const handleViewBackup = async (backupPath) => {
+    setLoadingBackup(true);
+    setViewingBackup(backupPath);
+    try {
+      const res = await fetch(
+        `/api/config/backup/view?backupPath=${encodeURIComponent(backupPath)}`
+      );
+      const data = await res.json();
+      if (res.ok) {
+        setBackupContent(data);
+      } else {
+        setBackupContent(null);
+      }
+    } catch (err) {
+      setBackupContent(null);
+    } finally {
+      setLoadingBackup(false);
+    }
+  };
+
+  const handleDeleteBackup = async (backupPath) => {
+    try {
+      const res = await fetch('/api/config/backup/delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ backupPath }),
+      });
+
+      if (res.ok) {
+        await loadBackups();
+        return true;
+      }
+      return false;
+    } catch (err) {
+      console.error('Failed to delete backup:', err);
+      return false;
+    }
+  };
+
+  useEffect(() => {
+    detectConfigPaths();
+    loadBackups();
+  }, []);
+
+  return {
+    detectedPaths,
+    detecting,
+    detectConfigPaths,
+    backups,
+    loadingBackups,
+    loadBackups,
+    viewingConfig,
+    configContent,
+    loadingConfig,
+    handleViewConfig,
+    setViewingConfig,
+    setConfigContent,
+    viewingBackup,
+    backupContent,
+    loadingBackup,
+    handleViewBackup,
+    handleDeleteBackup,
+    setViewingBackup,
+    setBackupContent,
+  };
+}

package/ui/src/hooks/useServiceExtraction.js

@@ -0,0 +1,51 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export function useServiceExtraction(fileContent, filePath) {
+  const [services, setServices] = useState([]);
+  const [selectedServices, setSelectedServices] = useState(new Set());
+  const [loadingServices, setLoadingServices] = useState(false);
+
+  const extractServices = useCallback(async () => {
+    if (!fileContent && !filePath) {
+      setServices([]);
+      setSelectedServices(new Set());
+      return;
+    }
+
+    setLoadingServices(true);
+    try {
+      const payload = fileContent ? { fileContent } : { filePath };
+      const res = await fetch('/api/config/services', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await res.json();
+      if (res.ok && data.services) {
+        setServices(data.services);
+        setSelectedServices(new Set(data.services.map((s) => s.name)));
+      } else {
+        setServices([]);
+        setSelectedServices(new Set());
+      }
+    } catch (err) {
+      console.error('Failed to extract services:', err);
+      setServices([]);
+      setSelectedServices(new Set());
+    } finally {
+      setLoadingServices(false);
+    }
+  }, [fileContent, filePath]);
+
+  useEffect(() => {
+    if (fileContent || filePath) {
+      extractServices();
+    } else {
+      setServices([]);
+      setSelectedServices(new Set());
+    }
+  }, [fileContent, filePath, extractServices]);
+
+  return { services, selectedServices, setSelectedServices, loadingServices };
+}

package/ui/src/index.css

@@ -0,0 +1,42 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    'Roboto',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  background: #ffffff;
+  color: #202124;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code,
+pre,
+.monospace {
+  font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+#root {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/ui/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/ui/src/theme.js

@@ -0,0 +1,65 @@
+// Gmail-inspired clean and minimal color theme
+export const colors = {
+  // Backgrounds - Gmail style
+  bgPrimary: '#ffffff', // Pure white (Gmail main background)
+  bgSecondary: '#f8f9fa', // Very light gray (Gmail sidebar/secondary areas)
+  bgTertiary: '#f1f3f4', // Light gray (hover states)
+  bgCard: '#ffffff', // Pure white for cards
+  bgHover: '#f1f3f4', // Gmail hover color
+  bgSelected: '#e8f0fe', // Gmail selected blue tint
+  bgUnpaired: '#fef7e0', // Very light orange/yellow for unpaired requests/responses
+
+  // Text - Gmail style
+  textPrimary: '#202124', // Gmail primary text (almost black)
+  textSecondary: '#5f6368', // Gmail secondary text (medium gray)
+  textTertiary: '#80868b', // Gmail tertiary text (light gray)
+  textInverse: '#ffffff', // White text
+
+  // Borders - Gmail style
+  borderLight: '#dadce0', // Gmail light border
+  borderMedium: '#bdc1c6', // Gmail medium border
+  borderDark: '#9aa0a6', // Gmail dark border
+
+  // Accents - Gmail/Google Material colors
+  accentBlue: '#1a73e8', // Gmail primary blue
+  accentBlueHover: '#1557b0', // Darker blue on hover
+  accentGreen: '#34a853', // Google green
+  accentOrange: '#ea8600', // Google orange
+  accentPink: '#d44638', // Gmail red (Jasper)
+  accentPurple: '#9334e6', // Google purple
+
+  // Status colors - Gmail style
+  success: '#34a853', // Google green
+  warning: '#fbbc04', // Google yellow
+  error: '#ea4335', // Google red
+  info: '#1a73e8', // Gmail blue
+
+  // Interactive - Gmail style (lighter, less sharp)
+  buttonPrimary: '#4285f4', // Lighter Google blue
+  buttonPrimaryHover: '#3367d6',
+  buttonSecondary: '#f1f3f4', // Light gray
+  buttonSecondaryHover: '#e8eaed',
+  buttonDanger: '#ea4335', // Google red (lighter)
+  buttonDangerHover: '#d33b2c',
+
+  // Shadows - Gmail style (subtle)
+  shadowSm: 'rgba(60, 64, 67, 0.08)', // Gmail subtle shadow
+  shadowMd: 'rgba(60, 64, 67, 0.12)', // Gmail medium shadow
+  shadowLg: 'rgba(60, 64, 67, 0.16)', // Gmail larger shadow
+};
+
+// Helper function to add opacity to hex colors
+export function withOpacity(color, opacity) {
+  // Remove # if present
+  const hex = color.replace('#', '');
+  // Convert to RGB
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+export const fonts = {
+  body: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  mono: "'Roboto Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
+};

package/ui/src/utils/animations.js

@@ -0,0 +1,170 @@
+import anime from 'animejs';
+
+/**
+ * Animation utilities for modernizing the UI with anime.js
+ */
+
+/**
+ * Stagger animation for list items
+ */
+export const staggerIn = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    opacity: [0, 1],
+    translateY: [20, 0],
+    duration: options.duration || 400,
+    delay: anime.stagger(options.delay || 50),
+    easing: options.easing || 'easeOutExpo',
+    ...options,
+  });
+};
+
+/**
+ * Fade in animation
+ */
+export const fadeIn = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    opacity: [0, 1],
+    duration: options.duration || 300,
+    easing: options.easing || 'easeOutQuad',
+    ...options,
+  });
+};
+
+/**
+ * Fade out animation
+ */
+export const fadeOut = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    opacity: [1, 0],
+    duration: options.duration || 300,
+    easing: options.easing || 'easeInQuad',
+    ...options,
+  });
+};
+
+/**
+ * Slide in from right
+ */
+export const slideInRight = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    translateX: [options.width || 600, 0],
+    opacity: [0, 1],
+    duration: options.duration || 400,
+    easing: options.easing || 'easeOutExpo',
+    ...options,
+  });
+};
+
+/**
+ * Slide in from left
+ */
+export const slideInLeft = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    translateX: [-(options.width || 600), 0],
+    opacity: [0, 1],
+    duration: options.duration || 400,
+    easing: options.easing || 'easeOutExpo',
+    ...options,
+  });
+};
+
+/**
+ * Slide out to right
+ */
+export const slideOutRight = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    translateX: [0, options.width || 600],
+    opacity: [1, 0],
+    duration: options.duration || 300,
+    easing: options.easing || 'easeInExpo',
+    ...options,
+  });
+};
+
+/**
+ * Scale in animation
+ */
+export const scaleIn = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    scale: [0.9, 1],
+    opacity: [0, 1],
+    duration: options.duration || 300,
+    easing: options.easing || 'easeOutBack',
+    ...options,
+  });
+};
+
+/**
+ * Scale out animation
+ */
+export const scaleOut = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    scale: [1, 0.9],
+    opacity: [1, 0],
+    duration: options.duration || 200,
+    easing: options.easing || 'easeInBack',
+    ...options,
+  });
+};
+
+/**
+ * Tab indicator animation
+ */
+export const animateTabIndicator = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    translateX: options.translateX || 0,
+    width: options.width || 'auto',
+    duration: options.duration || 300,
+    easing: options.easing || 'easeOutExpo',
+    ...options,
+  });
+};
+
+/**
+ * Hover scale animation
+ */
+export const hoverScale = (selector, scale = 1.05, options = {}) => {
+  return anime({
+    targets: selector,
+    scale: scale,
+    duration: options.duration || 200,
+    easing: options.easing || 'easeOutQuad',
+    ...options,
+  });
+};
+
+/**
+ * Pulse animation
+ */
+export const pulse = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    scale: [1, 1.1, 1],
+    duration: options.duration || 600,
+    easing: options.easing || 'easeInOutQuad',
+    loop: options.loop || false,
+    ...options,
+  });
+};
+
+/**
+ * Shake animation
+ */
+export const shake = (selector, options = {}) => {
+  return anime({
+    targets: selector,
+    translateX: [0, -10, 10, -10, 10, 0],
+    duration: options.duration || 500,
+    easing: options.easing || 'easeInOutQuad',
+    ...options,
+  });
+};