@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/SmartScan/SmartScanControls.jsx

@@ -0,0 +1,290 @@
+import { useState, useRef } from 'react';
+import { colors, fonts } from '../../theme';
+import { CheckIcon, LoadingSpinner, CacheIcon } from '../SmartScanIcons';
+import { ExternalLinkIcon } from '../SmartScanIcons';
+import { IconTrash } from '@tabler/icons-react';
+import ConfirmationModal from '../ConfirmationModal';
+
+export default function SmartScanControls({
+  apiToken,
+  setApiToken,
+  saveToken,
+  loadingData,
+  discoverMcpData,
+  discoveredServers,
+  selectedServers,
+  setSelectedServers,
+  runScan,
+  scanning,
+  clearCache,
+  clearingCache,
+}) {
+  const saveTokenTimeoutRef = useRef(null);
+  const [showClearCacheModal, setShowClearCacheModal] = useState(false);
+
+  const handleTokenChange = (newToken) => {
+    setApiToken(newToken);
+    if (saveTokenTimeoutRef.current) {
+      clearTimeout(saveTokenTimeoutRef.current);
+    }
+    if (newToken) {
+      saveTokenTimeoutRef.current = setTimeout(() => {
+        saveToken(newToken);
+      }, 1000);
+    } else {
+      saveToken('');
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '20px',
+        flexWrap: 'wrap',
+        flex: 1,
+        justifyContent: 'flex-end',
+      }}
+    >
+      {/* API Token Section */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+        }}
+      >
+        <label
+          style={{
+            fontSize: '12px',
+            fontWeight: '600',
+            color: colors.textSecondary,
+            fontFamily: fonts.body,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          API Token:
+        </label>
+        <div style={{ position: 'relative', width: '200px' }}>
+          <input
+            type="password"
+            value={apiToken}
+            onChange={(e) => handleTokenChange(e.target.value)}
+            placeholder="sk_..."
+            style={{
+              width: '100%',
+              padding: '8px 10px',
+              paddingRight: apiToken ? '28px' : '10px',
+              border: `1px solid ${apiToken ? colors.accentGreen : colors.borderMedium}`,
+              borderRadius: '8px',
+              fontSize: '12px',
+              fontFamily: fonts.body,
+              background: colors.bgCard,
+              color: colors.textPrimary,
+              boxSizing: 'border-box',
+              transition: 'all 0.2s ease',
+            }}
+            onFocus={(e) => {
+              e.currentTarget.style.borderColor = colors.accentBlue;
+              e.currentTarget.style.boxShadow = `0 0 0 2px ${colors.accentBlue}20`;
+            }}
+            onBlur={(e) => {
+              e.currentTarget.style.borderColor = apiToken
+                ? colors.accentGreen
+                : colors.borderMedium;
+              e.currentTarget.style.boxShadow = 'none';
+            }}
+          />
+          {apiToken && (
+            <div
+              style={{
+                position: 'absolute',
+                right: '8px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+              }}
+            >
+              <CheckIcon size={12} color={colors.accentGreen} />
+            </div>
+          )}
+        </div>
+        <a
+          href="https://smart.mcpshark.sh/tokens"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '4px',
+            fontSize: '11px',
+            color: colors.accentBlue,
+            textDecoration: 'none',
+            fontFamily: fonts.body,
+            fontWeight: '500',
+            whiteSpace: 'nowrap',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.textDecoration = 'underline';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.textDecoration = 'none';
+          }}
+        >
+          <span>Get token</span>
+          <ExternalLinkIcon size={10} color={colors.accentBlue} />
+        </a>
+      </div>
+
+      {/* Discover MCP Data Section */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+        }}
+      >
+        <label
+          style={{
+            fontSize: '12px',
+            fontWeight: '600',
+            color: colors.textSecondary,
+            fontFamily: fonts.body,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          Servers:
+        </label>
+        <button
+          onClick={discoverMcpData}
+          disabled={loadingData}
+          style={{
+            padding: '8px 14px',
+            background: !loadingData ? colors.buttonPrimary : colors.buttonSecondary,
+            color: !loadingData ? colors.textInverse : colors.textTertiary,
+            border: 'none',
+            borderRadius: '6px',
+            fontSize: '12px',
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            cursor: !loadingData ? 'pointer' : 'not-allowed',
+            transition: 'all 0.2s ease',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+            whiteSpace: 'nowrap',
+          }}
+          onMouseEnter={(e) => {
+            if (!loadingData) {
+              e.currentTarget.style.background = colors.buttonPrimaryHover;
+              e.currentTarget.style.transform = 'translateY(-1px)';
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!loadingData) {
+              e.currentTarget.style.background = colors.buttonPrimary;
+              e.currentTarget.style.transform = 'translateY(0)';
+            }
+          }}
+        >
+          {loadingData ? (
+            <>
+              <LoadingSpinner size={12} />
+              <span>Discovering...</span>
+            </>
+          ) : (
+            <>
+              <CheckIcon size={12} color={colors.textInverse} />
+              <span>Discover</span>
+            </>
+          )}
+        </button>
+        {discoveredServers.length > 0 && (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+              padding: '6px 10px',
+              background: colors.bgTertiary,
+              borderRadius: '8px',
+              fontSize: '11px',
+              fontWeight: '600',
+              color: colors.textPrimary,
+              fontFamily: fonts.body,
+            }}
+          >
+            <CheckIcon size={12} color={colors.accentGreen} />
+            <span>
+              {discoveredServers.length} server{discoveredServers.length !== 1 ? 's' : ''}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Clear Cache Button */}
+      <button
+        onClick={() => setShowClearCacheModal(true)}
+        disabled={clearingCache}
+        style={{
+          padding: '8px 14px',
+          background: colors.buttonSecondary,
+          border: `1px solid ${colors.borderLight}`,
+          color: colors.textSecondary,
+          cursor: clearingCache ? 'not-allowed' : 'pointer',
+          fontSize: '12px',
+          fontWeight: '500',
+          fontFamily: fonts.body,
+          borderRadius: '8px',
+          transition: 'all 0.2s ease',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          whiteSpace: 'nowrap',
+          opacity: clearingCache ? 0.5 : 1,
+        }}
+        onMouseEnter={(e) => {
+          if (!clearingCache) {
+            e.currentTarget.style.background = colors.buttonSecondaryHover;
+            e.currentTarget.style.color = colors.textPrimary;
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!clearingCache) {
+            e.currentTarget.style.background = colors.buttonSecondary;
+            e.currentTarget.style.color = colors.textSecondary;
+          }
+        }}
+        title="Clear cached scan results"
+      >
+        {clearingCache ? (
+          <>
+            <LoadingSpinner size={12} />
+            <span>Clearing...</span>
+          </>
+        ) : (
+          <>
+            <IconTrash size={14} stroke={1.5} />
+            <span>Clear Cache</span>
+          </>
+        )}
+      </button>
+
+      <ConfirmationModal
+        isOpen={showClearCacheModal}
+        onClose={() => setShowClearCacheModal(false)}
+        onConfirm={async () => {
+          const result = await clearCache();
+          if (result.success) {
+            setShowClearCacheModal(false);
+          }
+        }}
+        title="Clear Scan Cache?"
+        message="Are you sure you want to clear all cached scan results? This will force fresh scans for all servers on the next scan."
+        confirmText="Clear Cache"
+        cancelText="Cancel"
+        danger={false}
+      />
+    </div>
+  );
+}

package/ui/src/components/SmartScan/SmartScanHeader.jsx

@@ -0,0 +1,77 @@
+import { ShieldIcon, ExternalLinkIcon } from '../SmartScanIcons';
+import { colors, fonts } from '../../theme';
+
+export default function SmartScanHeader() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        marginRight: 'auto',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '40px',
+          height: '40px',
+          borderRadius: '10px',
+          background: `linear-gradient(135deg, ${colors.accentBlue}20, ${colors.accentGreen}20)`,
+          border: `2px solid ${colors.accentBlue}40`,
+          flexShrink: 0,
+        }}
+      >
+        <ShieldIcon size={20} color={colors.accentBlue} />
+      </div>
+      <div>
+        <h1
+          style={{
+            fontSize: '18px',
+            fontWeight: '700',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            margin: 0,
+            letterSpacing: '-0.2px',
+          }}
+        >
+          <a
+            href="https://smart.mcpshark.sh/#get-started"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              color: colors.textPrimary,
+              textDecoration: 'none',
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              transition: 'color 0.2s ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = colors.accentBlue;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = colors.textPrimary;
+            }}
+          >
+            Smart Scan
+            <ExternalLinkIcon size={12} color="currentColor" />
+          </a>
+        </h1>
+        <p
+          style={{
+            fontSize: '11px',
+            color: colors.textSecondary,
+            fontFamily: fonts.body,
+            margin: 0,
+            lineHeight: '1.3',
+          }}
+        >
+          AI-powered security analysis for Model Context Protocol (MCP) servers
+        </p>
+      </div>
+    </div>
+  );
+}

package/ui/src/components/SmartScan/ViewModeTabs.jsx

@@ -0,0 +1,57 @@
+import { colors, fonts } from '../../theme';
+
+export default function ViewModeTabs({ viewMode, setViewMode, onSwitchToScan, onSwitchToList }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '8px',
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+        padding: '4px',
+        background: colors.bgSecondary,
+      }}
+    >
+      <button
+        onClick={() => {
+          setViewMode('scan');
+          onSwitchToScan?.();
+        }}
+        style={{
+          padding: '6px 14px',
+          background: viewMode === 'scan' ? colors.bgCard : 'transparent',
+          border: 'none',
+          color: viewMode === 'scan' ? colors.textPrimary : colors.textSecondary,
+          borderRadius: '6px',
+          fontSize: '12px',
+          fontFamily: fonts.body,
+          fontWeight: viewMode === 'scan' ? '600' : '400',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
+        }}
+      >
+        Scan Servers
+      </button>
+      <button
+        onClick={() => {
+          setViewMode('list');
+          onSwitchToList?.();
+        }}
+        style={{
+          padding: '6px 14px',
+          background: viewMode === 'list' ? colors.bgCard : 'transparent',
+          border: 'none',
+          color: viewMode === 'list' ? colors.textPrimary : colors.textSecondary,
+          borderRadius: '6px',
+          fontSize: '12px',
+          fontFamily: fonts.body,
+          fontWeight: viewMode === 'list' ? '600' : '400',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
+        }}
+      >
+        View All Scans
+      </button>
+    </div>
+  );
+}

package/ui/src/components/SmartScan/hooks/useCacheManagement.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+export function useCacheManagement(discoveredServers, discoverMcpData, setError) {
+  const [clearingCache, setClearingCache] = useState(false);
+
+  const clearCache = async () => {
+    setClearingCache(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/smartscan/cache/clear', {
+        method: 'POST',
+      });
+      const data = await response.json();
+      if (response.ok) {
+        if (discoveredServers.length > 0) {
+          await discoverMcpData();
+        }
+        return { success: true, message: data.message };
+      } else {
+        throw new Error(data.error || 'Failed to clear cache');
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to clear cache');
+      return { success: false, error: err.message };
+    } finally {
+      setClearingCache(false);
+    }
+  };
+
+  return {
+    clearingCache,
+    clearCache,
+  };
+}

package/ui/src/components/SmartScan/hooks/useMcpDiscovery.js

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+
+export function useMcpDiscovery(setError) {
+  const [mcpData, setMcpData] = useState(null);
+  const [discoveredServers, setDiscoveredServers] = useState([]);
+  const [selectedServers, setSelectedServers] = useState(new Set());
+  const [loadingData, setLoadingData] = useState(false);
+  const [sessionId, setSessionId] = useState(null);
+
+  const makeMcpRequest = async (method, params = {}) => {
+    try {
+      const headers = { 'Content-Type': 'application/json' };
+      if (sessionId) {
+        headers['Mcp-Session-Id'] = sessionId;
+      }
+
+      const response = await fetch('/api/playground/proxy', {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ method, params }),
+      });
+
+      const data = await response.json();
+
+      const responseSessionId =
+        response.headers.get('Mcp-Session-Id') ||
+        response.headers.get('mcp-session-id') ||
+        data._sessionId;
+      if (responseSessionId && responseSessionId !== sessionId) {
+        setSessionId(responseSessionId);
+      }
+
+      if (!response.ok) {
+        throw new Error(data.error?.message || data.message || 'Request failed');
+      }
+
+      return data.result || data;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const discoverMcpData = async () => {
+    setLoadingData(true);
+    setError(null);
+    setMcpData(null);
+    setDiscoveredServers([]);
+
+    try {
+      const response = await fetch('/api/smartscan/discover');
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to discover servers');
+      }
+
+      const data = await response.json();
+      if (!data.success || !data.servers || data.servers.length === 0) {
+        throw new Error(
+          'No MCP servers found in config. Please configure servers in the Setup tab.'
+        );
+      }
+
+      setDiscoveredServers(data.servers);
+
+      if (data.servers.length > 0) {
+        setSelectedServers(new Set(data.servers.map((s) => s.name)));
+
+        try {
+          const cachedResponse = await fetch('/api/smartscan/cached-results', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              servers: data.servers,
+            }),
+          });
+
+          if (cachedResponse.ok) {
+            const cachedData = await cachedResponse.json();
+            if (cachedData.success && cachedData.results) {
+              const validCachedResults = cachedData.results.filter((r) => r.success && r.cached);
+              if (validCachedResults.length > 0) {
+                // This will be handled by the parent component
+              }
+            }
+          }
+        } catch (err) {
+          console.debug('Could not load cached results:', err);
+        }
+      }
+
+      if (data.servers.length > 0) {
+        const firstServer = data.servers[0];
+        setMcpData({
+          server: {
+            name: firstServer.name,
+            description: `Discovered from MCP config`,
+          },
+          tools: firstServer.tools || [],
+          resources: firstServer.resources || [],
+          prompts: firstServer.prompts || [],
+        });
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to discover MCP server data');
+    } finally {
+      setLoadingData(false);
+    }
+  };
+
+  return {
+    mcpData,
+    discoveredServers,
+    selectedServers,
+    setSelectedServers,
+    loadingData,
+    discoverMcpData,
+    makeMcpRequest,
+  };
+}