@mcp-shark/mcp-shark 1.4.0

package/ui/src/TabNavigation.jsx

@@ -0,0 +1,143 @@
+import { useEffect, useRef, useState } from 'react';
+import { colors, fonts } from './theme';
+import { SharkLogo } from './components/SharkLogo';
+import {
+  NetworkIcon,
+  LogsIcon,
+  SettingsIcon,
+  PlaygroundIcon,
+  ShieldIcon,
+} from './components/TabNavigationIcons';
+import MobileDropdown from './components/TabNavigation/MobileDropdown';
+import DesktopTabs from './components/TabNavigation/DesktopTabs';
+
+function TabNavigation({ activeTab, onTabChange }) {
+  const tabs = [
+    {
+      id: 'traffic',
+      label: 'Traffic Capture',
+      icon: NetworkIcon,
+      description: 'Wireshark-like HTTP request/response analysis for forensic investigation',
+    },
+    {
+      id: 'logs',
+      label: 'MCP Shark Logs',
+      icon: LogsIcon,
+      description: 'View MCP Shark server console output and debug logs',
+    },
+    {
+      id: 'setup',
+      label: 'MCP Server Setup',
+      icon: SettingsIcon,
+      description: 'Configure and manage MCP Shark server',
+    },
+    {
+      id: 'playground',
+      label: 'MCP Playground',
+      icon: PlaygroundIcon,
+      description: 'Test and interact with MCP tools, prompts, and resources',
+    },
+    {
+      id: 'smart-scan',
+      label: 'Smart Scan',
+      icon: ShieldIcon,
+      description: 'AI-powered security analysis for MCP servers',
+    },
+  ];
+
+  const tabRefs = useRef({});
+  const indicatorRef = useRef(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  // Check window size and handle resize
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1200);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    if (isDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isDropdownOpen]);
+
+  return (
+    <div
+      style={{
+        borderBottom: `1px solid ${colors.borderLight}`,
+        background: colors.bgCard,
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 16px',
+          gap: '12px',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            paddingRight: '12px',
+            borderRight: `1px solid ${colors.borderLight}`,
+          }}
+        >
+          <SharkLogo size={24} />
+          <span
+            style={{
+              fontSize: '16px',
+              fontWeight: '600',
+              color: colors.textPrimary,
+              fontFamily: fonts.body,
+            }}
+          >
+            MCP Shark
+          </span>
+        </div>
+        {isMobile ? (
+          <MobileDropdown
+            tabs={tabs}
+            activeTab={activeTab}
+            onTabChange={onTabChange}
+            isDropdownOpen={isDropdownOpen}
+            setIsDropdownOpen={setIsDropdownOpen}
+            dropdownRef={dropdownRef}
+          />
+        ) : (
+          <DesktopTabs
+            tabs={tabs}
+            activeTab={activeTab}
+            onTabChange={onTabChange}
+            tabRefs={tabRefs}
+            indicatorRef={indicatorRef}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TabNavigation;

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

@@ -0,0 +1,64 @@
+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"
+  >
+    <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>
+);
+
+export default function HelpButton({ onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      data-tour="help-button"
+      style={{
+        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',
+      }}
+      onMouseEnter={(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}`;
+      }}
+      onMouseLeave={(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}`;
+      }}
+      title="Start tour"
+    >
+      <TourIcon size={20} />
+    </button>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { useRef, useEffect } from 'react';
+import { colors } from '../../theme';
+import { slideInRight } from '../../utils/animations';
+import RequestList from '../../PacketList';
+import RequestDetail from '../../PacketDetail';
+import RequestFilters from '../../PacketFilters';
+
+export default function TrafficTab({
+  requests,
+  selected,
+  onSelect,
+  filters,
+  onFilterChange,
+  stats,
+  firstRequestTime,
+  onClear,
+}) {
+  const detailPanelRef = useRef(null);
+
+  useEffect(() => {
+    if (selected && detailPanelRef.current) {
+      setTimeout(() => {
+        if (detailPanelRef.current) {
+          detailPanelRef.current.style.opacity = '0';
+          detailPanelRef.current.style.transform = 'translateX(600px)';
+          slideInRight(detailPanelRef.current, { width: 600 });
+        }
+      }, 10);
+    }
+  }, [selected]);
+
+  return (
+    <div data-tab-content style={{ display: 'flex', flex: 1, overflow: 'hidden', minHeight: 0 }}>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
+        <RequestFilters
+          filters={filters}
+          onFilterChange={onFilterChange}
+          stats={stats}
+          onExport={() => {}}
+          onClear={onClear}
+        />
+        <RequestList
+          requests={requests}
+          selected={selected}
+          onSelect={onSelect}
+          firstRequestTime={firstRequestTime}
+        />
+      </div>
+      {selected && (
+        <div
+          ref={detailPanelRef}
+          style={{
+            width: '40%',
+            minWidth: '500px',
+            maxWidth: '700px',
+            borderLeft: `1px solid ${colors.borderLight}`,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            background: colors.bgCard,
+            flexShrink: 0,
+          }}
+        >
+          <RequestDetail request={selected} onClose={() => onSelect(null)} requests={requests} />
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/components/App/useAppState.js

@@ -0,0 +1,163 @@
+import { useState, useEffect, useRef } from 'react';
+
+export function useAppState() {
+  const [activeTab, setActiveTab] = useState('traffic');
+  const [requests, setRequests] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const [filters, setFilters] = useState({});
+  const [stats, setStats] = useState(null);
+  const [firstRequestTime, setFirstRequestTime] = useState(null);
+  const [showTour, setShowTour] = useState(false);
+  const [tourDismissed, setTourDismissed] = useState(true);
+  const wsRef = useRef(null);
+  const prevTabRef = useRef(activeTab);
+
+  const loadStatistics = async () => {
+    try {
+      const queryParams = new URLSearchParams();
+      if (filters.search) queryParams.append('search', filters.search);
+      if (filters.serverName) queryParams.append('serverName', filters.serverName);
+      if (filters.sessionId) queryParams.append('sessionId', filters.sessionId);
+      if (filters.method) queryParams.append('method', filters.method);
+      if (filters.jsonrpcMethod) queryParams.append('jsonrpcMethod', filters.jsonrpcMethod);
+      if (filters.statusCode) queryParams.append('statusCode', filters.statusCode);
+      if (filters.jsonrpcId) queryParams.append('jsonrpcId', filters.jsonrpcId);
+
+      const statsResponse = await fetch(`/api/statistics?${queryParams}`);
+      const statsData = await statsResponse.json();
+      setStats(statsData);
+    } catch (error) {
+      console.error('Failed to load statistics:', error);
+    }
+  };
+
+  const loadRequests = async () => {
+    try {
+      const queryParams = new URLSearchParams();
+      if (filters.search) queryParams.append('search', filters.search);
+      if (filters.serverName) queryParams.append('serverName', filters.serverName);
+      if (filters.sessionId) queryParams.append('sessionId', filters.sessionId);
+      if (filters.method) queryParams.append('method', filters.method);
+      if (filters.jsonrpcMethod) queryParams.append('jsonrpcMethod', filters.jsonrpcMethod);
+      if (filters.statusCode) queryParams.append('statusCode', filters.statusCode);
+      if (filters.jsonrpcId) queryParams.append('jsonrpcId', filters.jsonrpcId);
+      queryParams.append('limit', '5000');
+
+      const response = await fetch(`/api/requests?${queryParams}`);
+      const data = await response.json();
+      setRequests(data);
+
+      if (data.length > 0) {
+        const oldest = data[data.length - 1]?.timestamp_iso;
+        if (oldest) {
+          setFirstRequestTime(oldest);
+        }
+      }
+
+      // Also load statistics when loading requests
+      await loadStatistics();
+    } catch (error) {
+      console.error('Failed to load requests:', error);
+    }
+  };
+
+  useEffect(() => {
+    const checkTourState = async () => {
+      try {
+        const response = await fetch('/api/help/state');
+        const data = await response.json();
+        setTourDismissed(data.dismissed || data.tourCompleted);
+        if (!data.dismissed && !data.tourCompleted) {
+          setTimeout(() => {
+            setShowTour(true);
+          }, 500);
+        }
+      } catch (error) {
+        console.error('Failed to load tour state:', error);
+        setTimeout(() => {
+          setShowTour(true);
+        }, 500);
+        setTourDismissed(false);
+      }
+    };
+
+    checkTourState();
+    loadRequests();
+
+    const wsUrl = import.meta.env.DEV
+      ? 'ws://localhost:9853'
+      : `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`;
+
+    try {
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+
+      ws.onmessage = (e) => {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'update') {
+          setRequests(msg.data);
+          if (msg.data.length > 0) {
+            const oldest = msg.data[msg.data.length - 1]?.timestamp_iso;
+            if (oldest) {
+              setFirstRequestTime(oldest);
+            }
+          }
+          // Update statistics when new data arrives via WebSocket
+          loadStatistics();
+        }
+      };
+
+      ws.onerror = () => {
+        // Silently handle WebSocket errors - server may not be running
+      };
+
+      ws.onclose = () => {
+        // Connection closed - will attempt to reconnect on next mount if needed
+      };
+    } catch (err) {
+      // Silently handle WebSocket creation errors
+    }
+
+    return () => {
+      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+        wsRef.current.close();
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    loadRequests();
+  }, [filters]);
+
+  // Periodically update statistics when on traffic tab
+  useEffect(() => {
+    if (activeTab !== 'traffic') {
+      return;
+    }
+
+    // Update statistics every 2 seconds
+    const interval = setInterval(() => {
+      loadStatistics();
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [activeTab, filters]);
+
+  return {
+    activeTab,
+    setActiveTab,
+    requests,
+    selected,
+    setSelected,
+    filters,
+    setFilters,
+    stats,
+    firstRequestTime,
+    showTour,
+    setShowTour,
+    tourDismissed,
+    prevTabRef,
+    wsRef,
+    loadRequests,
+  };
+}

package/ui/src/components/BackupList.jsx

@@ -0,0 +1,192 @@
+import { colors, fonts, withOpacity } from '../theme';
+import { IconRefresh, IconEye, IconTrash, IconRestore } from '@tabler/icons-react';
+
+function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onDelete }) {
+  if (backups.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '12px',
+        padding: '24px',
+        marginBottom: '20px',
+        boxShadow: `0 2px 4px ${colors.shadowSm}`,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '12px',
+        }}
+      >
+        <h3
+          style={{
+            fontSize: '15px',
+            fontWeight: '600',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+          }}
+        >
+          Backup Files
+        </h3>
+        <button
+          onClick={onRefresh}
+          disabled={loadingBackups}
+          style={{
+            padding: '4px 8px',
+            background: 'transparent',
+            border: `1px solid ${colors.borderMedium}`,
+            color: colors.textSecondary,
+            cursor: loadingBackups ? 'not-allowed' : 'pointer',
+            fontSize: '11px',
+            borderRadius: '8px',
+            opacity: loadingBackups ? 0.5 : 1,
+          }}
+          title="Refresh backups"
+        >
+          <IconRefresh size={14} stroke={1.5} style={{ marginRight: '4px' }} />
+          {loadingBackups ? 'Loading...' : 'Refresh'}
+        </button>
+      </div>
+      <p
+        style={{
+          fontSize: '12px',
+          color: colors.textSecondary,
+          marginBottom: '12px',
+          lineHeight: '1.4',
+        }}
+      >
+        View, restore, or delete backups of your MCP configuration files. Backups are created
+        automatically when starting MCP Shark.
+      </p>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {backups.map((backup, idx) => (
+          <div
+            key={idx}
+            style={{
+              padding: '12px',
+              background: colors.bgPrimary,
+              border: `1px solid ${colors.borderMedium}`,
+              borderRadius: '8px',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ flex: 1 }}>
+              <div
+                style={{
+                  color: colors.textPrimary,
+                  fontSize: '12px',
+                  fontWeight: '500',
+                  marginBottom: '4px',
+                }}
+              >
+                {backup.displayPath}
+              </div>
+              <div style={{ color: colors.textTertiary, fontSize: '11px', fontFamily: fonts.body }}>
+                Created: {new Date(backup.modifiedAt || backup.createdAt).toLocaleString()} • Size:{' '}
+                {(backup.size / 1024).toFixed(2)} KB
+              </div>
+            </div>
+            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+              <button
+                onClick={() => onView(backup.backupPath)}
+                style={{
+                  padding: '6px 12px',
+                  background: 'transparent',
+                  border: `1px solid ${colors.borderMedium}`,
+                  color: colors.textSecondary,
+                  cursor: 'pointer',
+                  fontSize: '12px',
+                  borderRadius: '8px',
+                  fontWeight: '500',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = colors.bgCard;
+                  e.currentTarget.style.borderColor = colors.borderLight;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'transparent';
+                  e.currentTarget.style.borderColor = colors.borderMedium;
+                }}
+                title="View backup content"
+              >
+                <IconEye size={14} stroke={1.5} style={{ marginRight: '4px' }} />
+                View
+              </button>
+              <button
+                onClick={() => {
+                  if (confirm('Are you sure you want to delete this backup?')) {
+                    onDelete(backup.backupPath);
+                  }
+                }}
+                style={{
+                  padding: '6px 12px',
+                  background: 'transparent',
+                  border: `1px solid ${colors.borderMedium}`,
+                  color: colors.error,
+                  cursor: 'pointer',
+                  fontSize: '12px',
+                  borderRadius: '8px',
+                  fontWeight: '500',
+                  fontFamily: fonts.body,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = withOpacity(colors.error, 0.15);
+                  e.currentTarget.style.borderColor = colors.error;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'transparent';
+                  e.currentTarget.style.borderColor = colors.borderMedium;
+                }}
+                title="Delete backup"
+              >
+                <IconTrash size={14} stroke={1.5} />
+                Delete
+              </button>
+              <button
+                onClick={() => onRestore(backup.backupPath, backup.originalPath)}
+                style={{
+                  padding: '6px 12px',
+                  background: colors.buttonPrimary,
+                  border: `1px solid ${colors.buttonPrimary}`,
+                  color: colors.textInverse,
+                  cursor: 'pointer',
+                  fontSize: '12px',
+                  borderRadius: '8px',
+                  fontWeight: '500',
+                  fontFamily: fonts.body,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = colors.buttonPrimaryHover;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = colors.buttonPrimary;
+                }}
+                title="Restore this backup"
+              >
+                <IconRestore size={14} stroke={1.5} />
+                Restore
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default BackupList;