@mcp-shark/mcp-shark 1.4.0

package/ui/src/PacketFilters.jsx

@@ -0,0 +1,222 @@
+import { useEffect, useRef, useState } from 'react';
+import { colors, fonts } from './theme';
+import { fadeIn } from './utils/animations';
+import FilterInput from './components/PacketFilters/FilterInput';
+import ExportControls from './components/PacketFilters/ExportControls';
+import ConfirmationModal from './components/ConfirmationModal';
+import { IconTrash, IconSearch } from '@tabler/icons-react';
+import anime from 'animejs';
+
+function RequestFilters({ filters, onFilterChange, stats, onExport, onClear }) {
+  const filtersRef = useRef(null);
+  const [showClearModal, setShowClearModal] = useState(false);
+
+  useEffect(() => {
+    if (filtersRef.current) {
+      fadeIn(filtersRef.current, { duration: 400 });
+    }
+  }, []);
+
+  const handleExport = async (format = 'json') => {
+    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('format', format);
+
+      const response = await fetch(`/api/requests/export?${queryParams}`);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      const extension = format === 'csv' ? 'csv' : format === 'txt' ? 'txt' : 'json';
+      a.download = `mcp-shark-traffic-${new Date().toISOString().replace(/[:.]/g, '-')}.${extension}`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error('Failed to export traffic:', error);
+      alert('Failed to export traffic. Please try again.');
+    }
+  };
+
+  return (
+    <div
+      ref={filtersRef}
+      data-tour="filters"
+      style={{
+        padding: '12px 16px',
+        borderBottom: `1px solid ${colors.borderLight}`,
+        background: colors.bgSecondary,
+        display: 'flex',
+        gap: '10px',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+      }}
+    >
+      <div style={{ position: 'relative', width: '300px' }}>
+        <IconSearch
+          size={16}
+          stroke={1.5}
+          style={{
+            position: 'absolute',
+            left: '12px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            color: colors.textTertiary,
+            pointerEvents: 'none',
+            zIndex: 1,
+          }}
+        />
+        <FilterInput
+          type="text"
+          placeholder="Search everything (partial match)..."
+          value={filters.search || ''}
+          onChange={(e) => onFilterChange({ ...filters, search: e.target.value || null })}
+          style={{
+            width: '100%',
+            fontWeight: filters.search ? '500' : '400',
+            paddingLeft: '36px',
+          }}
+        />
+      </div>
+
+      <FilterInput
+        type="text"
+        placeholder="MCP Server Name..."
+        value={filters.serverName || ''}
+        onChange={(e) => onFilterChange({ ...filters, serverName: e.target.value || null })}
+        style={{ width: '200px' }}
+      />
+
+      <FilterInput
+        type="text"
+        placeholder="Session ID..."
+        value={filters.sessionId || ''}
+        onChange={(e) => onFilterChange({ ...filters, sessionId: e.target.value || null })}
+        style={{ width: '200px' }}
+      />
+
+      <FilterInput
+        type="text"
+        placeholder="HTTP Method..."
+        value={filters.method || ''}
+        onChange={(e) => onFilterChange({ ...filters, method: e.target.value || null })}
+        style={{ width: '150px' }}
+      />
+
+      <FilterInput
+        type="text"
+        placeholder="JSON-RPC Method..."
+        value={filters.jsonrpcMethod || ''}
+        onChange={(e) => onFilterChange({ ...filters, jsonrpcMethod: e.target.value || null })}
+        style={{ width: '200px' }}
+      />
+
+      <FilterInput
+        type="number"
+        placeholder="Status Code..."
+        value={filters.statusCode || ''}
+        onChange={(e) =>
+          onFilterChange({
+            ...filters,
+            statusCode: e.target.value ? parseInt(e.target.value) : null,
+          })
+        }
+        style={{ width: '120px' }}
+      />
+
+      <FilterInput
+        type="text"
+        placeholder="JSON-RPC ID..."
+        value={filters.jsonrpcId || ''}
+        onChange={(e) => onFilterChange({ ...filters, jsonrpcId: e.target.value || null })}
+        style={{ width: '150px' }}
+      />
+
+      <ExportControls stats={stats} onExport={handleExport} />
+
+      <button
+        onClick={() => setShowClearModal(true)}
+        style={{
+          padding: '8px 14px',
+          background: colors.buttonDanger,
+          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}`,
+          marginLeft: '12px',
+        }}
+        onMouseEnter={(e) => {
+          anime({
+            targets: e.currentTarget,
+            background: colors.buttonDangerHover,
+            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.buttonDanger,
+            translateY: 0,
+            boxShadow: [`0 4px 8px ${colors.shadowMd}`, `0 2px 4px ${colors.shadowSm}`],
+            duration: 200,
+            easing: 'easeOutQuad',
+          });
+        }}
+        title="Clear all captured traffic"
+      >
+        <IconTrash size={14} stroke={1.5} />
+        Clear
+      </button>
+
+      <ConfirmationModal
+        isOpen={showClearModal}
+        onClose={() => setShowClearModal(false)}
+        onConfirm={async () => {
+          try {
+            const response = await fetch('/api/requests/clear', {
+              method: 'POST',
+            });
+            if (response.ok) {
+              if (onClear) {
+                onClear();
+              }
+            } else {
+              const error = await response.json();
+              alert(`Failed to clear traffic: ${error.error || 'Unknown error'}`);
+            }
+          } catch (error) {
+            console.error('Failed to clear traffic:', error);
+            alert('Failed to clear traffic. Please try again.');
+          }
+        }}
+        title="Clear All Captured Traffic"
+        message="Are you sure you want to delete all captured traffic? This action cannot be undone and will permanently remove all requests and responses from the database."
+        confirmText="Clear All"
+        cancelText="Cancel"
+        danger={true}
+      />
+    </div>
+  );
+}
+
+export default RequestFilters;

package/ui/src/PacketList.jsx

@@ -0,0 +1,183 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { colors, fonts } from './theme';
+import RequestRow from './components/RequestRow';
+import TableHeader from './components/TableHeader';
+import ViewModeTabs from './components/ViewModeTabs';
+import GroupedByMcpView from './components/GroupedByMcpView';
+import { groupByMcpSessionAndCategory } from './utils/mcpGroupingUtils.js';
+import { pairRequestsWithResponses } from './utils/requestUtils.js';
+import { staggerIn } from './utils/animations';
+import anime from 'animejs';
+
+function RequestList({ requests, selected, onSelect, firstRequestTime }) {
+  const [viewMode, setViewMode] = useState('general');
+  const [columnWidths] = useState({
+    frame: 90, // Frame numbers like "#1234"
+    time: 120, // Relative time like "0.123456"
+    datetime: 180, // Full date/time like "11/30/2024, 19:25:30"
+    source: 200, // IP addresses or hostnames
+    destination: 200, // IP addresses or hostnames
+    protocol: 90, // Usually "HTTP"
+    method: 90, // HTTP methods like "POST", "GET"
+    status: 80, // Status codes like "200", "404"
+    endpoint: 500, // JSON-RPC methods or URLs (most important, needs space)
+  });
+  const [expandedResponses, setExpandedResponses] = useState(new Set());
+  const [expandedMcpSessions, setExpandedMcpSessions] = useState(new Set());
+  const [expandedMcpCategories, setExpandedMcpCategories] = useState(new Set());
+  const tbodyRef = useRef(null);
+  const prevRequestsLengthRef = useRef(0);
+
+  const groupedByMcp = useMemo(() => groupByMcpSessionAndCategory(requests), [requests]);
+
+  // Animate rows when requests change
+  useEffect(() => {
+    if (tbodyRef.current && requests.length > 0) {
+      const rows = tbodyRef.current.querySelectorAll('tr');
+      if (rows.length > 0) {
+        // Only animate new rows if the list has grown
+        if (requests.length > prevRequestsLengthRef.current) {
+          const newRows = Array.from(rows).slice(prevRequestsLengthRef.current);
+          if (newRows.length > 0) {
+            staggerIn(newRows, { delay: 30, duration: 300 });
+          }
+        } else {
+          // Animate all rows if the list was reset
+          staggerIn(rows, { delay: 20, duration: 300 });
+        }
+        prevRequestsLengthRef.current = requests.length;
+      }
+    }
+  }, [requests]);
+
+  useEffect(() => {
+    if (viewMode === 'groupedByMcp') {
+      // Auto-expand all MCP sessions and categories
+      const allSessionIds = new Set(groupedByMcp.map((g) => g.sessionId || '__NO_SESSION__'));
+      setExpandedMcpSessions((prev) => {
+        const updated = new Set(prev);
+        allSessionIds.forEach((id) => updated.add(id));
+        return updated;
+      });
+
+      setExpandedMcpCategories((prev) => {
+        const updated = new Set(prev);
+        groupedByMcp.forEach((sessionGroup) => {
+          const sessionKey = sessionGroup.sessionId || '__NO_SESSION__';
+          sessionGroup.categories.forEach((category) => {
+            updated.add(`${sessionKey}::${category.category}`);
+          });
+        });
+        return updated;
+      });
+    }
+  }, [groupedByMcp, viewMode]);
+
+  const toggleMcpSession = (sessionKey) => {
+    setExpandedMcpSessions((prev) => {
+      const updated = new Set(prev);
+      if (updated.has(sessionKey)) {
+        updated.delete(sessionKey);
+      } else {
+        updated.add(sessionKey);
+      }
+      return updated;
+    });
+  };
+
+  const toggleMcpCategory = (categoryKey) => {
+    setExpandedMcpCategories((prev) => {
+      const updated = new Set(prev);
+      if (updated.has(categoryKey)) {
+        updated.delete(categoryKey);
+      } else {
+        updated.add(categoryKey);
+      }
+      return updated;
+    });
+  };
+
+  const pairedRequests = useMemo(() => pairRequestsWithResponses(requests), [requests]);
+
+  const toggleResponse = (frameNumber) => {
+    setExpandedResponses((prev) => {
+      const updated = new Set(prev);
+      if (updated.has(frameNumber)) {
+        updated.delete(frameNumber);
+      } else {
+        updated.add(frameNumber);
+      }
+      return updated;
+    });
+  };
+
+  const renderGeneralView = () => (
+    <tbody ref={tbodyRef}>
+      {pairedRequests.map((pair) => (
+        <RequestRow
+          key={pair.frame_number}
+          pair={pair}
+          selected={selected}
+          firstRequestTime={firstRequestTime}
+          onSelect={onSelect}
+          isExpanded={expandedResponses.has(pair.frame_number)}
+          onToggleExpand={() => toggleResponse(pair.frame_number)}
+        />
+      ))}
+    </tbody>
+  );
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        background: colors.bgPrimary,
+        minHeight: 0,
+        overflow: 'hidden',
+      }}
+    >
+      <ViewModeTabs viewMode={viewMode} onViewModeChange={setViewMode} />
+
+      <div
+        style={{
+          flex: 1,
+          overflowY: 'auto',
+          overflowX: 'auto',
+          minHeight: 0,
+          WebkitOverflowScrolling: 'touch',
+        }}
+      >
+        <table
+          style={{
+            width: '100%',
+            borderCollapse: 'separate',
+            borderSpacing: 0,
+            fontSize: '12px',
+            fontFamily: fonts.body,
+            background: colors.bgPrimary,
+          }}
+        >
+          <TableHeader columnWidths={columnWidths} />
+          {viewMode === 'general' ? (
+            renderGeneralView()
+          ) : (
+            <GroupedByMcpView
+              groupedData={groupedByMcp}
+              expandedSessions={expandedMcpSessions}
+              expandedCategories={expandedMcpCategories}
+              onToggleSession={toggleMcpSession}
+              onToggleCategory={toggleMcpCategory}
+              selected={selected}
+              firstRequestTime={firstRequestTime}
+              onSelect={onSelect}
+            />
+          )}
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default RequestList;

package/ui/src/SmartScan.jsx

@@ -0,0 +1,178 @@
+import { useState } from 'react';
+import { colors } from './theme';
+import SmartScanHeader from './components/SmartScan/SmartScanHeader';
+import SmartScanControls from './components/SmartScan/SmartScanControls';
+import ViewModeTabs from './components/SmartScan/ViewModeTabs';
+import ScanViewContent from './components/SmartScan/ScanViewContent';
+import ListViewContent from './components/SmartScan/ListViewContent';
+import { useSmartScan } from './components/SmartScan/useSmartScan';
+
+function SmartScan() {
+  const [viewMode, setViewMode] = useState('scan'); // 'scan' or 'list'
+  const {
+    apiToken,
+    setApiToken,
+    discoveredServers,
+    selectedServers,
+    setSelectedServers,
+    loadingData,
+    scanning,
+    scanResult,
+    scanResults,
+    error,
+    saveToken,
+    discoverMcpData,
+    runScan,
+    clearCache,
+    clearingCache,
+    allScans,
+    loadingScans,
+    loadAllScans,
+    selectedScan,
+    setSelectedScan,
+    loadingScanDetail,
+    loadScanDetail,
+  } = useSmartScan();
+
+  return (
+    <div
+      data-tab-content
+      style={{
+        flex: 1,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        background: colors.bgPrimary,
+      }}
+    >
+      {/* Top Bar - Controls */}
+      <div
+        style={{
+          background: colors.bgCard,
+          borderBottom: `1px solid ${colors.borderLight}`,
+          padding: '16px 24px',
+          boxShadow: `0 2px 4px ${colors.shadowSm}`,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '24px',
+            flexWrap: 'wrap',
+          }}
+        >
+          <SmartScanHeader />
+          <ViewModeTabs
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            onSwitchToScan={() => setSelectedScan(null)}
+            onSwitchToList={() => {
+              setSelectedScan(null);
+              if (allScans.length === 0) {
+                loadAllScans();
+              }
+            }}
+          />
+          {viewMode === 'scan' && (
+            <SmartScanControls
+              apiToken={apiToken}
+              setApiToken={setApiToken}
+              saveToken={saveToken}
+              loadingData={loadingData}
+              discoverMcpData={discoverMcpData}
+              discoveredServers={discoveredServers}
+              selectedServers={selectedServers}
+              setSelectedServers={setSelectedServers}
+              runScan={runScan}
+              scanning={scanning}
+              clearCache={clearCache}
+              clearingCache={clearingCache}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Content based on view mode */}
+      {viewMode === 'scan' ? (
+        <ScanViewContent
+          discoveredServers={discoveredServers}
+          selectedServers={selectedServers}
+          setSelectedServers={setSelectedServers}
+          runScan={runScan}
+          scanning={scanning}
+          apiToken={apiToken}
+          error={error}
+          scanResults={scanResults}
+          scanResult={scanResult}
+          selectedScan={selectedScan}
+          loadingScanDetail={loadingScanDetail}
+          setSelectedScan={setSelectedScan}
+          loadScanDetail={loadScanDetail}
+          onViewScan={(scanData) => {
+            console.log('onViewScan - scanData:', scanData);
+            if (scanData.scan_id && apiToken) {
+              loadScanDetail(scanData.scan_id);
+            } else if (scanData.data && typeof scanData.data === 'object') {
+              const actualScan = scanData.data;
+              setSelectedScan({
+                ...actualScan,
+                scan_id: scanData.scan_id || actualScan.id || actualScan.scan_id,
+              });
+            } else {
+              setSelectedScan(scanData);
+            }
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            padding: '24px',
+            background: colors.bgPrimary,
+          }}
+        >
+          <ListViewContent
+            error={error}
+            loadingScans={loadingScans}
+            selectedScan={selectedScan}
+            loadingScanDetail={loadingScanDetail}
+            allScans={allScans}
+            setSelectedScan={setSelectedScan}
+            loadScanDetail={loadScanDetail}
+            onViewScan={(scanData) => {
+              console.log('onViewScan - scanData:', scanData);
+              const scanId = scanData.scan_id || scanData.id || scanData.hash;
+              const matchingScan = allScans.find(
+                (s) => s.data?.scan_id === scanId || s.data?.data?.scan_id === scanId
+              );
+              const serverName =
+                matchingScan?.serverName || scanData.serverName || 'Unknown Server';
+
+              if (scanData && scanData.data && typeof scanData.data === 'object') {
+                const actualScan = scanData.data;
+                setSelectedScan({
+                  ...actualScan,
+                  scan_id: scanId || actualScan.id || actualScan.scan_id || actualScan.hash,
+                  serverName: serverName,
+                });
+              } else if (scanData && typeof scanData === 'object') {
+                setSelectedScan({
+                  ...scanData,
+                  scan_id: scanId || scanData.id || scanData.hash,
+                  serverName: serverName,
+                });
+              } else {
+                console.warn('Invalid scanData structure:', scanData);
+              }
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SmartScan;