@mcp-shark/mcp-shark 1.4.0

package/ui/src/CompositeSetup.jsx

@@ -0,0 +1,285 @@
+import { useState, useEffect } from 'react';
+import { colors } from './theme';
+import SetupHeader from './components/SetupHeader';
+import ConfigFileSection from './components/ConfigFileSection';
+import WhatThisDoesSection from './components/WhatThisDoesSection';
+import ServerControl from './components/ServerControl';
+import MessageDisplay from './components/MessageDisplay';
+import BackupList from './components/BackupList';
+import ConfigViewerModal from './components/ConfigViewerModal';
+import { useServiceExtraction } from './hooks/useServiceExtraction';
+import { useConfigManagement } from './hooks/useConfigManagement';
+
+function CompositeSetup() {
+  const [fileContent, setFileContent] = useState('');
+  const [filePath, setFilePath] = useState('');
+  const [updatePath, setUpdatePath] = useState('');
+  const [status, setStatus] = useState({ running: false, pid: null });
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [error, setError] = useState(null);
+
+  const { services, selectedServices, setSelectedServices } = useServiceExtraction(
+    fileContent,
+    filePath
+  );
+
+  const {
+    detectedPaths,
+    detecting,
+    detectConfigPaths,
+    backups,
+    loadingBackups,
+    loadBackups,
+    viewingConfig,
+    configContent,
+    loadingConfig,
+    handleViewConfig,
+    setViewingConfig,
+    setConfigContent,
+    viewingBackup,
+    backupContent,
+    loadingBackup,
+    handleViewBackup,
+    handleDeleteBackup,
+    setViewingBackup,
+    setBackupContent,
+  } = useConfigManagement();
+
+  useEffect(() => {
+    fetchStatus();
+    const interval = setInterval(fetchStatus, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleRestore = async (backupPath, originalPath) => {
+    if (
+      !confirm(
+        'Are you sure you want to restore this backup? This will overwrite the current config file.'
+      )
+    ) {
+      return;
+    }
+
+    try {
+      const res = await fetch('/api/config/restore', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ backupPath, originalPath }),
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        setMessage(data.message || 'Config restored successfully');
+        setError(null);
+        loadBackups();
+        detectConfigPaths();
+      } else {
+        setError(data.error || 'Failed to restore backup');
+        setMessage(null);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to restore backup');
+      setMessage(null);
+    }
+  };
+
+  const handleDelete = async (backupPath) => {
+    const success = await handleDeleteBackup(backupPath);
+    if (success) {
+      setMessage('Backup deleted successfully');
+      setError(null);
+    } else {
+      setError('Failed to delete backup');
+      setMessage(null);
+    }
+  };
+
+  const fetchStatus = async () => {
+    try {
+      const res = await fetch('/api/composite/status');
+      const data = await res.json();
+      setStatus(data);
+    } catch (err) {
+      console.error('Failed to fetch status:', err);
+    }
+  };
+
+  const handleFileSelect = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        setFileContent(event.target.result);
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  const handlePathInput = (e) => {
+    const value = e.target.value;
+    setFilePath(value);
+    if (value) {
+      setFileContent('');
+    }
+  };
+
+  const handleUpdatePathInput = (e) => {
+    setUpdatePath(e.target.value);
+  };
+
+  const handleSetup = async () => {
+    setLoading(true);
+    setError(null);
+    setMessage(null);
+
+    try {
+      const payload = fileContent ? { fileContent, filePath: updatePath || null } : { filePath };
+
+      if (selectedServices.size > 0) {
+        payload.selectedServices = Array.from(selectedServices);
+      }
+
+      const res = await fetch('/api/composite/setup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        const msg = data.message || 'MCP Shark server started successfully';
+        setMessage(data.backupPath ? `${msg} (Backup saved to ${data.backupPath})` : msg);
+        setFileContent('');
+        setFilePath('');
+        setUpdatePath('');
+        setSelectedServices(new Set());
+        setTimeout(fetchStatus, 1000);
+      } else {
+        setError(data.error || 'Failed to setup MCP Shark server');
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to setup MCP Shark server');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleStop = async () => {
+    setLoading(true);
+    setError(null);
+    setMessage(null);
+
+    try {
+      const res = await fetch('/api/composite/stop', {
+        method: 'POST',
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        const msg = data.message || 'MCP Shark server stopped';
+        setMessage(
+          data.message && data.message.includes('restored')
+            ? 'MCP Shark server stopped and original config file restored'
+            : msg
+        );
+        setTimeout(fetchStatus, 1000);
+      } else {
+        setError(data.error || 'Failed to stop MCP Shark server');
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to stop MCP Shark server');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const canStart =
+    (fileContent || filePath) && (services.length === 0 || selectedServices.size > 0);
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        background: colors.bgPrimary,
+        overflow: 'auto',
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          maxWidth: '1200px',
+          margin: '0 auto',
+          padding: '32px',
+          minHeight: '100%',
+          boxSizing: 'border-box',
+        }}
+      >
+        <SetupHeader />
+
+        <ConfigFileSection
+          detectedPaths={detectedPaths}
+          detecting={detecting}
+          onDetect={detectConfigPaths}
+          onPathSelect={(path) => {
+            setFilePath(path);
+            setFileContent('');
+            setUpdatePath(path);
+          }}
+          onViewConfig={handleViewConfig}
+          filePath={filePath}
+          fileContent={fileContent}
+          updatePath={updatePath}
+          onFileSelect={handleFileSelect}
+          onPathChange={handlePathInput}
+          onUpdatePathChange={handleUpdatePathInput}
+          services={services}
+          selectedServices={selectedServices}
+          onSelectionChange={setSelectedServices}
+        />
+
+        <ServerControl
+          status={status}
+          loading={loading}
+          onStart={handleSetup}
+          onStop={handleStop}
+          canStart={canStart}
+        />
+
+        <MessageDisplay message={message} error={error} />
+
+        <BackupList
+          backups={backups}
+          loadingBackups={loadingBackups}
+          onRefresh={loadBackups}
+          onRestore={handleRestore}
+          onView={handleViewBackup}
+          onDelete={handleDelete}
+        />
+
+        <WhatThisDoesSection filePath={filePath} updatePath={updatePath} />
+      </div>
+
+      <ConfigViewerModal
+        viewingConfig={viewingConfig}
+        configContent={configContent}
+        loadingConfig={loadingConfig}
+        viewingBackup={viewingBackup}
+        backupContent={backupContent}
+        loadingBackup={loadingBackup}
+        onClose={() => {
+          setViewingConfig(null);
+          setConfigContent(null);
+          setViewingBackup(null);
+          setBackupContent(null);
+        }}
+      />
+    </div>
+  );
+}
+
+export default CompositeSetup;

package/ui/src/HelpGuide/HelpGuideContent.jsx

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,58 @@
+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
+        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

@@ -0,0 +1,56 @@
+import { colors, fonts } from '../theme';
+import { IconHelp, IconX } from '@tabler/icons-react';
+
+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
+        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

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { colors } from './theme';
+import HelpGuideHeader from './HelpGuide/HelpGuideHeader';
+import HelpGuideContent from './HelpGuide/HelpGuideContent';
+import HelpGuideFooter from './HelpGuide/HelpGuideFooter';
+
+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 (
+    <div
+      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',
+      }}
+      onClick={handleClose}
+    >
+      <div
+        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()}
+      >
+        <HelpGuideHeader onClose={handleClose} />
+        <div style={{ padding: '24px' }}>
+          <HelpGuideContent />
+          <HelpGuideFooter
+            dontShowAgain={dontShowAgain}
+            setDontShowAgain={setDontShowAgain}
+            onClose={handleClose}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HelpGuide;