@mcp-shark/mcp-shark 1.5.13 → 1.7.2

package/ui/server/routes/help.js

@@ -1,44 +0,0 @@
-import { readHelpState, writeHelpState } from '#core/configs/index.js';
-import { StatusCodes } from '#core/constants/index.js';
-
-export function createHelpRoutes() {
-  const router = {};
-
-  router.getState = (_req, res) => {
-    const state = readHelpState();
-    res.json({
-      dismissed: state.dismissed || false,
-      tourCompleted: state.tourCompleted || false,
-    });
-  };
-
-  router.dismiss = (req, res) => {
-    const { tourCompleted } = req.body || {};
-    const state = {
-      dismissed: true,
-      tourCompleted: tourCompleted || false,
-    };
-    const success = writeHelpState(state);
-    if (success) {
-      res.json({ success: true });
-    } else {
-      res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({ error: 'Failed to save help state' });
-    }
-  };
-
-  router.reset = (_req, res) => {
-    const state = {
-      dismissed: false,
-      tourCompleted: false,
-      dismissedAt: null,
-    };
-    const success = writeHelpState(state);
-    if (success) {
-      res.json({ success: true });
-    } else {
-      res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({ error: 'Failed to reset help state' });
-    }
-  };
-
-  return router;
-}

package/ui/server/swagger/paths/help.js

@@ -1,82 +0,0 @@
-/**
- * Help endpoints - Help and tour management
- */
-
-export const helpPaths = {
-  '/api/help/state': {
-    get: {
-      tags: ['Help'],
-      summary: 'Get help tour state',
-      description: 'Get the current state of the help tour (dismissed/completed)',
-      responses: {
-        200: {
-          description: 'Tour state',
-          content: {
-            'application/json': {
-              schema: {
-                type: 'object',
-                properties: {
-                  dismissed: { type: 'boolean' },
-                  tourCompleted: { type: 'boolean' },
-                },
-              },
-            },
-          },
-        },
-        500: {
-          description: 'Internal server error',
-        },
-      },
-    },
-  },
-  '/api/help/dismiss': {
-    post: {
-      tags: ['Help'],
-      summary: 'Dismiss help tour',
-      description: 'Mark the help tour as dismissed',
-      responses: {
-        200: {
-          description: 'Tour dismissed',
-          content: {
-            'application/json': {
-              schema: {
-                type: 'object',
-                properties: {
-                  success: { type: 'boolean' },
-                },
-              },
-            },
-          },
-        },
-        500: {
-          description: 'Internal server error',
-        },
-      },
-    },
-  },
-  '/api/help/reset': {
-    post: {
-      tags: ['Help'],
-      summary: 'Reset help tour',
-      description: 'Reset the help tour state to show it again',
-      responses: {
-        200: {
-          description: 'Tour reset',
-          content: {
-            'application/json': {
-              schema: {
-                type: 'object',
-                properties: {
-                  success: { type: 'boolean' },
-                },
-              },
-            },
-          },
-        },
-        500: {
-          description: 'Internal server error',
-        },
-      },
-    },
-  },
-};

package/ui/src/HelpGuide/HelpGuideContent.jsx

@@ -1,118 +0,0 @@
-import { colors, fonts } from '../theme';
-
-export default function HelpGuideContent() {
-  return (
-    <div
-      style={{
-        color: colors.textPrimary,
-        lineHeight: '1.6',
-        fontSize: '14px',
-        fontFamily: fonts.body,
-      }}
-    >
-      <section style={{ marginBottom: '24px' }}>
-        <h3
-          style={{
-            color: colors.accentBlue,
-            marginTop: 0,
-            marginBottom: '12px',
-            fontSize: '16px',
-            fontFamily: fonts.body,
-          }}
-        >
-          What is MCP Shark?
-        </h3>
-        <p style={{ margin: 0, color: colors.textSecondary }}>
-          MCP Shark is a powerful tool for monitoring, debugging, and analyzing Model Context
-          Protocol (MCP) traffic. It captures all communication between MCP clients and servers,
-          allowing you to inspect requests, responses, and understand the flow of data.
-        </p>
-      </section>
-
-      <section style={{ marginBottom: '24px' }}>
-        <h3
-          style={{
-            color: colors.accentBlue,
-            marginTop: 0,
-            marginBottom: '12px',
-            fontSize: '16px',
-            fontFamily: fonts.body,
-          }}
-        >
-          Getting Started
-        </h3>
-        <ol style={{ margin: 0, paddingLeft: '20px', color: colors.textSecondary }}>
-          <li style={{ marginBottom: '8px' }}>
-            Go to the <strong>Setup</strong> tab to configure your MCP servers
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            Start the MCP Shark server to begin capturing traffic
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            Use your MCP client (Cursor, Claude Desktop, etc.) as normal
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            View captured traffic in the <strong>Traffic Capture</strong> tab
-          </li>
-        </ol>
-      </section>
-
-      <section style={{ marginBottom: '24px' }}>
-        <h3
-          style={{
-            color: colors.accentBlue,
-            marginTop: 0,
-            marginBottom: '12px',
-            fontSize: '16px',
-            fontFamily: fonts.body,
-          }}
-        >
-          Traffic Capture Features
-        </h3>
-        <ul style={{ margin: 0, paddingLeft: '20px', color: colors.textSecondary }}>
-          <li style={{ marginBottom: '8px' }}>
-            <strong>General List:</strong> View all requests in a flat chronological list
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            <strong>MCP Protocol View:</strong> Organize traffic by MCP protocol categories
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            <strong>Filters:</strong> Use the search bar and filters to find specific requests,
-            sessions, or servers
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            <strong>Details:</strong> Click any request to view full headers, body, and metadata
-          </li>
-        </ul>
-      </section>
-
-      <section style={{ marginBottom: '24px' }}>
-        <h3
-          style={{
-            color: colors.accentBlue,
-            marginTop: 0,
-            marginBottom: '12px',
-            fontSize: '16px',
-            fontFamily: fonts.body,
-          }}
-        >
-          Tips
-        </h3>
-        <ul style={{ margin: 0, paddingLeft: '20px', color: colors.textSecondary }}>
-          <li style={{ marginBottom: '8px' }}>
-            Use the search bar to find requests by method, URL, JSON-RPC method, or any text content
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            Filter by session ID to track a specific conversation
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            Filter by server name to see all traffic for a specific MCP server
-          </li>
-          <li style={{ marginBottom: '8px' }}>
-            Click on request/response rows to see detailed packet information
-          </li>
-        </ul>
-      </section>
-    </div>
-  );
-}

package/ui/src/HelpGuide/HelpGuideFooter.jsx

@@ -1,59 +0,0 @@
-import { colors, fonts } from '../theme';
-
-export default function HelpGuideFooter({ dontShowAgain, setDontShowAgain, onClose }) {
-  return (
-    <div
-      style={{
-        marginTop: '24px',
-        paddingTop: '20px',
-        borderTop: `1px solid ${colors.borderLight}`,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      <label
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px',
-          color: colors.textTertiary,
-          cursor: 'pointer',
-          fontSize: '13px',
-          fontFamily: fonts.body,
-        }}
-      >
-        <input
-          type="checkbox"
-          checked={dontShowAgain}
-          onChange={(e) => setDontShowAgain(e.target.checked)}
-          style={{ cursor: 'pointer' }}
-        />
-        Don't show this again
-      </label>
-      <button
-        type="button"
-        onClick={onClose}
-        style={{
-          background: colors.buttonPrimary,
-          border: 'none',
-          color: colors.textInverse,
-          padding: '8px 20px',
-          borderRadius: '4px',
-          cursor: 'pointer',
-          fontSize: '14px',
-          fontWeight: '500',
-          fontFamily: fonts.body,
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.background = colors.buttonPrimaryHover;
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.background = colors.buttonPrimary;
-        }}
-      >
-        Got it!
-      </button>
-    </div>
-  );
-}

package/ui/src/HelpGuide/HelpGuideHeader.jsx

@@ -1,57 +0,0 @@
-import { IconHelp, IconX } from '@tabler/icons-react';
-import { colors, fonts } from '../theme';
-
-export default function HelpGuideHeader({ onClose }) {
-  return (
-    <div
-      style={{
-        padding: '20px 24px',
-        borderBottom: `1px solid ${colors.borderLight}`,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-        <div style={{ color: colors.accentBlue }}>
-          <IconHelp size={24} stroke={1.5} />
-        </div>
-        <h2
-          style={{
-            margin: 0,
-            color: colors.textPrimary,
-            fontSize: '20px',
-            fontWeight: '600',
-            fontFamily: fonts.body,
-          }}
-        >
-          Welcome to MCP Shark
-        </h2>
-      </div>
-      <button
-        type="button"
-        onClick={onClose}
-        style={{
-          background: 'transparent',
-          border: 'none',
-          color: colors.textTertiary,
-          cursor: 'pointer',
-          padding: '4px',
-          display: 'flex',
-          alignItems: 'center',
-          borderRadius: '8px',
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.background = colors.bgHover;
-          e.currentTarget.style.color = colors.textPrimary;
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.background = 'transparent';
-          e.currentTarget.style.color = colors.textTertiary;
-        }}
-      >
-        <IconX size={20} stroke={1.5} />
-      </button>
-    </div>
-  );
-}

package/ui/src/HelpGuide.jsx

@@ -1,78 +0,0 @@
-import { useState } from 'react';
-import HelpGuideContent from './HelpGuide/HelpGuideContent';
-import HelpGuideFooter from './HelpGuide/HelpGuideFooter';
-import HelpGuideHeader from './HelpGuide/HelpGuideHeader';
-import { colors } from './theme';
-
-function HelpGuide({ onClose }) {
-  const [dontShowAgain, setDontShowAgain] = useState(false);
-
-  const handleClose = async () => {
-    if (dontShowAgain) {
-      try {
-        await fetch('/api/help/dismiss', { method: 'POST' });
-      } catch (error) {
-        console.error('Failed to save help state:', error);
-      }
-    }
-    onClose();
-  };
-
-  return (
-    <dialog
-      open
-      aria-modal="true"
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: 'rgba(0, 0, 0, 0.7)',
-        zIndex: 1000,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '20px',
-        border: 'none',
-        margin: 0,
-        width: '100%',
-        height: '100%',
-      }}
-      onClick={handleClose}
-      onKeyDown={(e) => {
-        if (e.key === 'Escape') {
-          handleClose();
-        }
-      }}
-    >
-      <div
-        role="document"
-        style={{
-          background: colors.bgCard,
-          border: `1px solid ${colors.borderLight}`,
-          borderRadius: '12px',
-          maxWidth: '700px',
-          width: '100%',
-          maxHeight: '90vh',
-          overflow: 'auto',
-          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
-        }}
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
-      >
-        <HelpGuideHeader onClose={handleClose} />
-        <div style={{ padding: '24px' }}>
-          <HelpGuideContent />
-          <HelpGuideFooter
-            dontShowAgain={dontShowAgain}
-            setDontShowAgain={setDontShowAgain}
-            onClose={handleClose}
-          />
-        </div>
-      </div>
-    </dialog>
-  );
-}
-
-export default HelpGuide;

package/ui/src/IntroTour.jsx

@@ -1,154 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import TourOverlay from './components/TourOverlay';
-import TourTooltip from './components/TourTooltip';
-
-function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
-  const [currentStep, setCurrentStep] = useState(0);
-  const [highlightedElement, setHighlightedElement] = useState(null);
-  const [elementRect, setElementRect] = useState(null);
-  const overlayRef = useRef(null);
-
-  useEffect(() => {
-    if (!highlightedElement) {
-      return;
-    }
-
-    const updatePosition = () => {
-      if (highlightedElement) {
-        const rect = highlightedElement.getBoundingClientRect();
-        setElementRect(rect);
-      }
-    };
-
-    updatePosition();
-
-    const options = { passive: true, capture: true };
-    window.addEventListener('scroll', updatePosition, options);
-    window.addEventListener('resize', updatePosition, { passive: true });
-
-    return () => {
-      window.removeEventListener('scroll', updatePosition, options);
-      window.removeEventListener('resize', updatePosition, { passive: true });
-    };
-  }, [highlightedElement]);
-
-  useEffect(() => {
-    if (steps.length === 0) {
-      return;
-    }
-
-    const step = steps[currentStep];
-    if (!step) {
-      return;
-    }
-
-    if (onStepChange) {
-      onStepChange(currentStep);
-    }
-
-    const timer = setTimeout(() => {
-      const element = document.querySelector(step.target);
-      if (element) {
-        setHighlightedElement(element);
-        element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
-        setTimeout(() => {
-          const rect = element.getBoundingClientRect();
-          setElementRect(rect);
-        }, 300);
-      } else {
-        setHighlightedElement(null);
-        setElementRect(null);
-      }
-    }, 200);
-
-    return () => clearTimeout(timer);
-  }, [currentStep, steps, onStepChange]);
-
-  const handleNext = () => {
-    if (currentStep < steps.length - 1) {
-      const nextStep = currentStep + 1;
-      setCurrentStep(nextStep);
-      if (onStepChange) {
-        onStepChange(nextStep);
-      }
-    } else {
-      handleComplete();
-    }
-  };
-
-  const handlePrevious = () => {
-    if (currentStep > 0) {
-      const prevStep = currentStep - 1;
-      setCurrentStep(prevStep);
-      if (onStepChange) {
-        onStepChange(prevStep);
-      }
-    }
-  };
-
-  const handleComplete = async () => {
-    try {
-      await fetch('/api/help/dismiss', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ tourCompleted: true }),
-      });
-    } catch (error) {
-      console.error('Failed to save tour state:', error);
-    }
-    onComplete();
-  };
-
-  const handleSkip = () => {
-    handleComplete();
-    if (onSkip) {
-      onSkip();
-    }
-  };
-
-  if (steps.length === 0 || currentStep >= steps.length) {
-    return null;
-  }
-
-  const step = steps[currentStep];
-
-  return (
-    <>
-      <div
-        ref={overlayRef}
-        role="presentation"
-        style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: 9998,
-          pointerEvents: 'auto',
-        }}
-        onClick={handleSkip}
-        onKeyDown={(e) => {
-          if (e.key === 'Escape') {
-            handleSkip();
-          }
-        }}
-      >
-        <TourOverlay elementRect={elementRect} />
-      </div>
-
-      {elementRect && (
-        <TourTooltip
-          elementRect={elementRect}
-          step={step}
-          currentStep={currentStep}
-          totalSteps={steps.length}
-          onNext={handleNext}
-          onPrevious={handlePrevious}
-          onSkip={handleSkip}
-        />
-      )}
-    </>
-  );
-}
-
-export default IntroTour;

package/ui/src/components/App/HelpButton.jsx

@@ -1,90 +0,0 @@
-import { colors, fonts } from '../../theme';
-
-const TourIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    role="img"
-    aria-label="Tour icon"
-  >
-    <title>Tour icon</title>
-    <path d="M12 2L2 7l10 5 10-5-10-5z" />
-    <path d="M2 17l10 5 10-5" />
-    <path d="M2 12l10 5 10-5" />
-  </svg>
-);
-
-/**
- * Help button component
- * Starts the application tour
- * @param {Object} props
- * @param {Function} props.onClick - Callback when button is clicked
- * @param {Object} props.style - Custom styles for the button
- * @param {Function} props.onMouseEnter - Optional mouse enter handler
- * @param {Function} props.onMouseLeave - Optional mouse leave handler
- */
-export default function HelpButton({ onClick, style, onMouseEnter, onMouseLeave }) {
-  const defaultStyle = {
-    position: 'fixed',
-    bottom: '20px',
-    right: '20px',
-    background: colors.bgCard,
-    border: `1px solid ${colors.borderLight}`,
-    borderRadius: '50%',
-    width: '48px',
-    height: '48px',
-    padding: 0,
-    color: colors.textSecondary,
-    cursor: 'pointer',
-    fontFamily: fonts.body,
-    boxShadow: `0 4px 12px ${colors.shadowMd}`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 9999,
-    transition: 'all 0.2s ease',
-    ...style,
-  };
-
-  const handleMouseEnter = (e) => {
-    e.currentTarget.style.background = colors.bgHover;
-    e.currentTarget.style.color = colors.textPrimary;
-    e.currentTarget.style.borderColor = colors.borderMedium;
-    e.currentTarget.style.transform = 'scale(1.1)';
-    e.currentTarget.style.boxShadow = `0 6px 16px ${colors.shadowLg}`;
-    if (onMouseEnter) {
-      onMouseEnter(e);
-    }
-  };
-
-  const handleMouseLeave = (e) => {
-    e.currentTarget.style.background = colors.bgCard;
-    e.currentTarget.style.color = colors.textSecondary;
-    e.currentTarget.style.borderColor = colors.borderLight;
-    e.currentTarget.style.transform = 'scale(1)';
-    e.currentTarget.style.boxShadow = `0 4px 12px ${colors.shadowMd}`;
-    if (onMouseLeave) {
-      onMouseLeave(e);
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      data-tour="help-button"
-      style={defaultStyle}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      title="Start tour"
-    >
-      <TourIcon size={20} />
-    </button>
-  );
-}