@mcp-shark/mcp-shark 1.4.0

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

@@ -0,0 +1,193 @@
+import { useState } from 'react';
+
+export function useScanList(apiToken, setError) {
+  const [allScans, setAllScans] = useState([]);
+  const [loadingScans, setLoadingScans] = useState(false);
+  const [selectedScan, setSelectedScan] = useState(null);
+  const [loadingScanDetail, setLoadingScanDetail] = useState(false);
+
+  const loadAllScans = async () => {
+    setLoadingScans(true);
+    setError(null);
+    try {
+      // Only load from local cache
+      console.log('Loading cached scans from local storage...');
+      const cacheResponse = await fetch('/api/smartscan/scans?cache=true');
+      const cacheData = await cacheResponse.json();
+      console.log('Cache response:', {
+        status: cacheResponse.status,
+        ok: cacheResponse.ok,
+        cacheData,
+      });
+
+      if (cacheResponse.ok) {
+        const scans = cacheData.scans || [];
+        console.log(`[useScanList] Loaded ${scans.length} cached scans from API`);
+        console.log(`[useScanList] Full cacheData:`, cacheData);
+
+        // Debug: Log first scan structure to see what we're receiving
+        if (scans.length > 0) {
+          console.log('[useScanList] First scan structure:', {
+            keys: Object.keys(scans[0]),
+            serverName: scans[0].serverName,
+            server_name: scans[0].server_name,
+            server: scans[0].server,
+            fullScan: scans[0],
+          });
+        }
+
+        // Transform cached scans to BatchResultsDisplay format
+        const scanResults = scans.map((scan, index) => {
+          // The scan structure from getAllCachedScanResults has:
+          // { id, scan_id, server: { name }, serverName, server_name, data, result, ... }
+
+          console.log(`[useScanList] Transforming scan ${index}:`, {
+            scanId: scan.id || scan.scan_id,
+            serverName: scan.serverName,
+            server_name: scan.server_name,
+            server: scan.server,
+            hasServerName: !!scan.serverName,
+            hasServerNameAlt: !!scan.server_name,
+            hasServer: !!scan.server,
+          });
+
+          // Extract server name from multiple possible locations
+          // Handle empty strings, null, undefined
+          const serverName =
+            (scan.serverName && scan.serverName.trim()) ||
+            (scan.server_name && scan.server_name.trim()) ||
+            (scan.server?.name && scan.server.name.trim()) ||
+            'Unknown Server';
+
+          console.log(`[useScanList] Extracted serverName for scan ${index}: "${serverName}"`);
+
+          // Debug logging
+          if (serverName === 'Unknown Server') {
+            console.error('[useScanList] Could not find server name in scan:', {
+              scanId: scan.id || scan.scan_id,
+              hasServerName: !!scan.serverName,
+              hasServerNameAlt: !!scan.server_name,
+              hasServer: !!scan.server,
+              serverNameValue: scan.serverName,
+              serverNameAltValue: scan.server_name,
+              serverNameFromServer: scan.server?.name,
+              scanKeys: Object.keys(scan),
+              fullScanObject: scan,
+            });
+          }
+
+          // Get the actual scan data - it might be nested
+          // scan.data could be the scan result from API which has { success, data, scan_id, ... }
+          // or it could be the direct scan data
+          let scanData = scan.data || scan.result || scan;
+
+          // If scanData has a nested 'data' property (from API response), use that
+          if (scanData && scanData.data && typeof scanData.data === 'object') {
+            scanData = scanData.data;
+          }
+
+          const transformed = {
+            serverName: serverName,
+            success: true,
+            cached: true,
+            data: {
+              scan_id: scan.scan_id || scan.id,
+              data: scanData,
+            },
+          };
+
+          console.log(`[useScanList] Transformed result ${index}:`, {
+            serverName: transformed.serverName,
+            scan_id: transformed.data.scan_id,
+          });
+
+          return transformed;
+        });
+
+        console.log(
+          '[useScanList] Final transformed scanResults:',
+          scanResults.map((r) => ({
+            serverName: r.serverName,
+            scan_id: r.data.scan_id,
+          }))
+        );
+
+        console.log('[useScanList] Setting allScans state with:', scanResults.length, 'items');
+        console.log('[useScanList] First item serverName:', scanResults[0]?.serverName);
+        console.log('[useScanList] Second item serverName:', scanResults[1]?.serverName);
+
+        setAllScans(scanResults);
+        if (scanResults.length === 0) {
+          setError('No cached scans found. Please run a scan first to see results here.');
+        }
+      } else {
+        setError(cacheData.error || cacheData.message || 'Failed to load cached scans');
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to load cached scans');
+    } finally {
+      setLoadingScans(false);
+    }
+  };
+
+  const loadScanDetail = async (scanId) => {
+    if (!scanId) {
+      setSelectedScan(null);
+      return;
+    }
+
+    // First, check if we already have this scan in allScans (cached scan)
+    // allScans is in BatchResultsDisplay format: { serverName, success, cached, data: { scan_id, data: {...} } }
+    const cachedResult = allScans.find(
+      (r) =>
+        r.data?.scan_id === scanId ||
+        r.data?.data?.id === scanId ||
+        r.data?.data?.scan_id === scanId
+    );
+    if (cachedResult && cachedResult.cached && cachedResult.data?.data) {
+      // Use the cached scan data directly
+      const scanData = cachedResult.data.data;
+      setSelectedScan({
+        ...scanData,
+        scan_id: cachedResult.data.scan_id || scanData.id || scanData.scan_id,
+      });
+      return;
+    }
+
+    // If not cached and no API token, can't load from API
+    if (!apiToken) {
+      setError('Please enter your API token to view scan details');
+      return;
+    }
+
+    setLoadingScanDetail(true);
+    setError(null);
+    try {
+      const response = await fetch(`/api/smartscan/scans/${scanId}`, {
+        headers: {
+          Authorization: `Bearer ${apiToken}`,
+        },
+      });
+      const data = await response.json();
+      if (response.ok) {
+        setSelectedScan(data.result || data);
+      } else {
+        setError(data.error || data.message || 'Failed to load scan details');
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to load scan details');
+    } finally {
+      setLoadingScanDetail(false);
+    }
+  };
+
+  return {
+    allScans,
+    loadingScans,
+    loadAllScans,
+    selectedScan,
+    setSelectedScan,
+    loadingScanDetail,
+    loadScanDetail,
+  };
+}

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

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+
+export function useScanOperations(apiToken, discoveredServers, selectedServers, setError) {
+  const [scanning, setScanning] = useState(false);
+  const [scanResult, setScanResult] = useState(null);
+  const [scanResults, setScanResults] = useState([]);
+
+  const runScan = async () => {
+    if (!apiToken) {
+      setError('Please enter your API token');
+      return;
+    }
+
+    if (!discoveredServers || discoveredServers.length === 0) {
+      setError('Please discover MCP servers first');
+      return;
+    }
+
+    if (selectedServers.size === 0) {
+      setError('Please select at least one server to scan');
+      return;
+    }
+
+    setScanning(true);
+    setError(null);
+    setScanResult(null);
+    setScanResults([]);
+
+    const serversToScan = discoveredServers.filter((server) => selectedServers.has(server.name));
+
+    try {
+      const response = await fetch('/api/smartscan/scans/batch', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          apiToken,
+          servers: serversToScan,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        let errorMessage = data.error || data.message || `API error: ${response.status}`;
+
+        if (response.status === 400 && data.details) {
+          if (Array.isArray(data.details)) {
+            errorMessage = `Validation failed: ${data.details
+              .map((d) => {
+                if (typeof d === 'string') return d;
+                if (d.field && d.message) return `${d.field}: ${d.message}`;
+                return JSON.stringify(d);
+              })
+              .join('; ')}`;
+          } else if (typeof data.details === 'string') {
+            errorMessage = data.details;
+          }
+        }
+
+        setError(errorMessage);
+        return;
+      }
+
+      if (data.results && Array.isArray(data.results)) {
+        setScanResults(data.results);
+
+        const firstSuccess = data.results.find((r) => r.success);
+        if (firstSuccess) {
+          setScanResult(firstSuccess.data);
+        }
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to run scan');
+    } finally {
+      setScanning(false);
+    }
+  };
+
+  return {
+    scanning,
+    scanResult,
+    scanResults,
+    runScan,
+  };
+}

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

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+export function useServerStatus() {
+  const [serverStatus, setServerStatus] = useState(null);
+
+  useEffect(() => {
+    checkServerStatus();
+    const interval = setInterval(checkServerStatus, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const checkServerStatus = async () => {
+    try {
+      const res = await fetch('/api/composite/status');
+      if (!res.ok) {
+        throw new Error('Server not available');
+      }
+      const data = await res.json();
+      setServerStatus(data);
+    } catch (err) {
+      setServerStatus({ running: false });
+    }
+  };
+
+  return { serverStatus };
+}

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

@@ -0,0 +1,53 @@
+import { useState, useRef, useEffect } from 'react';
+
+export function useTokenManagement() {
+  const [apiToken, setApiToken] = useState('');
+  const saveTokenTimeoutRef = useRef(null);
+
+  useEffect(() => {
+    loadStoredToken();
+    return () => {
+      if (saveTokenTimeoutRef.current) {
+        clearTimeout(saveTokenTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const loadStoredToken = async () => {
+    try {
+      const response = await fetch('/api/smartscan/token');
+      if (response.ok) {
+        const data = await response.json();
+        if (data.token) {
+          setApiToken(data.token);
+        }
+      }
+    } catch (err) {
+      console.debug('No stored token found');
+    }
+  };
+
+  const saveToken = async (token) => {
+    try {
+      const response = await fetch('/api/smartscan/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ token }),
+      });
+      if (!response.ok) {
+        console.error('Failed to save token');
+      }
+    } catch (err) {
+      console.error('Error saving token:', err);
+    }
+  };
+
+  return {
+    apiToken,
+    setApiToken,
+    saveToken,
+    saveTokenTimeoutRef,
+  };
+}

package/ui/src/components/SmartScan/scanDataUtils.js

@@ -0,0 +1,98 @@
+/**
+ * Utility functions for normalizing scan data from various API response formats
+ */
+
+export function getScanValue(scan, path) {
+  const paths = path.split('.');
+  let value = scan;
+  for (const p of paths) {
+    if (value && typeof value === 'object' && p in value) {
+      value = value[p];
+    } else {
+      return null;
+    }
+  }
+  return value;
+}
+
+export function normalizeScanData(scan) {
+  const actualScan = scan.result || scan.data || scan;
+
+  const scanId =
+    getScanValue(scan, 'result.id') ||
+    getScanValue(scan, 'id') ||
+    getScanValue(scan, 'scan_id') ||
+    getScanValue(scan, 'data.id') ||
+    getScanValue(scan, 'data.scan_id') ||
+    (actualScan && actualScan.id) ||
+    (actualScan && actualScan.scan_id);
+
+  const serverName =
+    scan.serverName || // Check top-level first (for cached scans)
+    scan.server_name ||
+    getScanValue(scan, 'result.mcp_server_data.server.name') ||
+    getScanValue(scan, 'mcp_server_data.server.name') ||
+    getScanValue(scan, 'server.name') ||
+    getScanValue(scan, 'data.server.name') ||
+    getScanValue(scan, 'data.data.server.name') ||
+    (scan.server && scan.server.name) || // Check nested server object
+    'Unknown Server';
+
+  const status =
+    getScanValue(scan, 'result.status') ||
+    getScanValue(scan, 'status') ||
+    getScanValue(scan, 'data.status');
+
+  const overallRiskLevel =
+    getScanValue(scan, 'result.overall_risk_level') ||
+    getScanValue(scan, 'overall_risk_level') ||
+    getScanValue(scan, 'data.overall_risk_level') ||
+    getScanValue(scan, 'data.data.overall_risk_level');
+
+  const createdAt =
+    getScanValue(scan, 'result.created_at') ||
+    getScanValue(scan, 'created_at') ||
+    getScanValue(scan, 'data.created_at') ||
+    getScanValue(scan, 'data.data.created_at');
+
+  const updatedAt =
+    getScanValue(scan, 'result.updated_at') ||
+    getScanValue(scan, 'updated_at') ||
+    getScanValue(scan, 'data.updated_at') ||
+    getScanValue(scan, 'data.data.updated_at');
+
+  let analysisResult =
+    getScanValue(scan, 'result.analysis_result') ||
+    getScanValue(scan, 'analysis_result') ||
+    getScanValue(scan, 'data.analysis_result') ||
+    getScanValue(scan, 'data.data.analysis_result') ||
+    getScanValue(scan, 'data.data.data.analysis_result');
+
+  if (!analysisResult && actualScan && typeof actualScan === 'object') {
+    if (actualScan.tool_findings || actualScan.prompt_findings || actualScan.resource_findings) {
+      analysisResult = actualScan;
+    }
+    if (!analysisResult && actualScan.analysis_result) {
+      analysisResult = actualScan.analysis_result;
+    }
+  }
+
+  const serverData =
+    getScanValue(scan, 'result.mcp_server_data.server') ||
+    getScanValue(scan, 'mcp_server_data.server') ||
+    getScanValue(scan, 'server') ||
+    getScanValue(scan, 'data.server') ||
+    getScanValue(scan, 'data.data.server') ||
+    getScanValue(scan, 'mcp_server_data');
+
+  return {
+    scanId,
+    serverName,
+    status,
+    overallRiskLevel,
+    createdAt,
+    updatedAt,
+    analysisResult,
+    serverData,
+  };
+}

package/ui/src/components/SmartScan/useSmartScan.js

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { useTokenManagement } from './hooks/useTokenManagement';
+import { useServerStatus } from './hooks/useServerStatus';
+import { useMcpDiscovery } from './hooks/useMcpDiscovery';
+import { useScanOperations } from './hooks/useScanOperations';
+import { useScanList } from './hooks/useScanList';
+import { useCacheManagement } from './hooks/useCacheManagement';
+
+export function useSmartScan() {
+  const [error, setError] = useState(null);
+
+  const { apiToken, setApiToken, saveToken, saveTokenTimeoutRef } = useTokenManagement();
+  const { serverStatus } = useServerStatus();
+  const {
+    mcpData,
+    discoveredServers,
+    selectedServers,
+    setSelectedServers,
+    loadingData,
+    discoverMcpData,
+    makeMcpRequest,
+  } = useMcpDiscovery(setError);
+  const { scanning, scanResult, scanResults, runScan } = useScanOperations(
+    apiToken,
+    discoveredServers,
+    selectedServers,
+    setError
+  );
+  const {
+    allScans,
+    loadingScans,
+    loadAllScans,
+    selectedScan,
+    setSelectedScan,
+    loadingScanDetail,
+    loadScanDetail,
+  } = useScanList(apiToken, setError);
+  const { clearingCache, clearCache } = useCacheManagement(
+    discoveredServers,
+    discoverMcpData,
+    setError
+  );
+
+  return {
+    apiToken,
+    setApiToken,
+    serverStatus,
+    mcpData,
+    discoveredServers,
+    selectedServers,
+    setSelectedServers,
+    loadingData,
+    scanning,
+    scanResult,
+    scanResults,
+    error,
+    saveToken,
+    discoverMcpData,
+    runScan,
+    clearCache,
+    clearingCache,
+    saveTokenTimeoutRef,
+    allScans,
+    loadingScans,
+    loadAllScans,
+    selectedScan,
+    setSelectedScan,
+    loadingScanDetail,
+    loadScanDetail,
+    makeMcpRequest,
+  };
+}

package/ui/src/components/SmartScan/utils.js

@@ -0,0 +1,19 @@
+import { colors } from '../../theme';
+
+export function getRiskLevelColor(riskLevel) {
+  if (!riskLevel) return colors.textTertiary;
+  switch (riskLevel.toLowerCase()) {
+    case 'none':
+      return colors.accentGreen;
+    case 'low':
+      return colors.accentBlue;
+    case 'medium':
+      return colors.accentOrange;
+    case 'high':
+      return colors.error;
+    case 'critical':
+      return colors.error;
+    default:
+      return colors.textTertiary;
+  }
+}

package/ui/src/components/SmartScanIcons.jsx

@@ -0,0 +1,58 @@
+import { colors } from '../theme';
+import {
+  IconShield,
+  IconExternalLink,
+  IconAlertTriangle,
+  IconCheck,
+  IconClock,
+} from '@tabler/icons-react';
+
+export const ShieldIcon = ({ size = 24, color = 'currentColor' }) => (
+  <IconShield size={size} stroke={1.5} color={color} />
+);
+
+export const ExternalLinkIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconExternalLink size={size} stroke={1.5} color={color} />
+);
+
+export const AlertIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconAlertTriangle size={size} stroke={1.5} color={color} />
+);
+
+export const CheckIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconCheck size={size} stroke={1.5} color={color} />
+);
+
+export const CacheIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconClock size={size} stroke={1.5} color={color} />
+);
+
+export const LoadingSpinner = ({ size = 16, color = colors.accentBlue }) => (
+  <div
+    style={{
+      width: size,
+      height: size,
+      border: `2px solid ${colors.borderLight}`,
+      borderTop: `2px solid ${color}`,
+      borderRadius: '50%',
+      animation: 'spin 0.8s linear infinite',
+    }}
+  />
+);
+
+export const EmptyStateIcon = () => (
+  <svg
+    width={64}
+    height={64}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={colors.textTertiary}
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ opacity: 0.5 }}
+  >
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    <path d="M9 12l2 2 4-4" />
+  </svg>
+);