@mcp-shark/mcp-shark 1.4.2 → 1.5.0

package/ui/src/components/SmartScan/ScanListView/ScanListItem.jsx

@@ -1,6 +1,6 @@
+import { IconChevronRight, IconExternalLink, IconEye } from '@tabler/icons-react';
 import { useState } from 'react';
 import { colors, fonts } from '../../../theme';
-import { IconChevronRight, IconEye, IconExternalLink } from '@tabler/icons-react';
 import { getRiskLevelColor } from '../utils';
 
 export default function ScanListItem({ scan, onSelectScan }) {
@@ -25,6 +25,13 @@ export default function ScanListItem({ scan, onSelectScan }) {
           cursor: 'pointer',
         }}
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
+        aria-label={`Toggle scan ${scan.scanId || 'details'}`}
       >
         <div
           style={{
@@ -101,8 +108,15 @@ export default function ScanListItem({ scan, onSelectScan }) {
             flexShrink: 0,
           }}
           onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }}
         >
           <button
+            type="button"
             onClick={() => {
               onSelectScan(scan.id);
             }}

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

@@ -3,7 +3,9 @@ import { getRiskLevelColor } from './utils';
 
 export default function ScanOverviewSection({ status, overallRiskLevel, createdAt, updatedAt }) {
   const formatDate = (dateString) => {
-    if (!dateString) return 'N/A';
+    if (!dateString) {
+      return 'N/A';
+    }
     return new Date(dateString).toLocaleString();
   };
 

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

@@ -1,8 +1,8 @@
 import { colors } from '../../theme';
+import BatchResultsDisplay from './BatchResultsDisplay';
 import EmptyState from './EmptyState';
 import ErrorDisplay from './ErrorDisplay';
 import ScanningProgress from './ScanningProgress';
-import BatchResultsDisplay from './BatchResultsDisplay';
 import SingleResultDisplay from './SingleResultDisplay';
 
 export default function ScanResultsDisplay({

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

@@ -1,7 +1,7 @@
 import { colors } from '../../theme';
-import ServerSelectionRow from './ServerSelectionRow';
-import ScanResultsDisplay from './ScanResultsDisplay';
 import ScanDetailView from './ScanDetailView';
+import ScanResultsDisplay from './ScanResultsDisplay';
+import ServerSelectionRow from './ServerSelectionRow';
 
 export default function ScanViewContent({
   discoveredServers,

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

@@ -1,8 +1,10 @@
-import { LoadingSpinner } from '../SmartScanIcons';
 import { colors, fonts } from '../../theme';
+import { LoadingSpinner } from '../SmartScanIcons';
 
 export default function ScanningProgress({ scanning, selectedServers }) {
-  if (!scanning) return null;
+  if (!scanning) {
+    return null;
+  }
 
   return (
     <div

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

@@ -1,7 +1,9 @@
 import { colors, fonts } from '../../theme';
 
 export default function ServerInfoSection({ serverData }) {
-  if (!serverData) return null;
+  if (!serverData) {
+    return null;
+  }
 
   return (
     <div style={{ marginBottom: '24px' }}>

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

@@ -1,5 +1,5 @@
-import { CheckIcon, ShieldIcon, LoadingSpinner } from '../SmartScanIcons';
 import { colors, fonts } from '../../theme';
+import { LoadingSpinner, ShieldIcon } from '../SmartScanIcons';
 
 export default function ServerSelectionRow({
   discoveredServers,
@@ -57,7 +57,7 @@ export default function ServerSelectionRow({
             const isSelected = selectedServers.has(server.name);
             return (
               <label
-                key={idx}
+                key={server.name || `server-${idx}`}
                 style={{
                   display: 'flex',
                   alignItems: 'center',
@@ -119,6 +119,7 @@ export default function ServerSelectionRow({
           })}
         </div>
         <button
+          type="button"
           onClick={toggleSelectAll}
           style={{
             padding: '6px 12px',
@@ -143,6 +144,7 @@ export default function ServerSelectionRow({
           {selectedServers.size === discoveredServers.length ? 'Deselect All' : 'Select All'}
         </button>
         <button
+          type="button"
           onClick={runScan}
           disabled={!apiToken || selectedServers.size === 0 || scanning}
           style={{

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

@@ -1,9 +1,11 @@
-import { ExternalLinkIcon } from '../SmartScanIcons';
 import { colors, fonts } from '../../theme';
+import { ExternalLinkIcon } from '../SmartScanIcons';
 import { getRiskLevelColor } from './utils';
 
 export default function SingleResultDisplay({ scanResult }) {
-  if (!scanResult) return null;
+  if (!scanResult) {
+    return null;
+  }
 
   return (
     <div
@@ -218,7 +220,7 @@ export default function SingleResultDisplay({ scanResult }) {
             }}
           >
             {scanResult.data.recommendations.map((rec, idx) => (
-              <li key={idx}>{rec}</li>
+              <li key={`recommendation-${idx}-${rec.substring(0, 30)}`}>{rec}</li>
             ))}
           </ul>
         </div>

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

@@ -1,9 +1,7 @@
-import { useState, useRef } from 'react';
+import { useRef, useState } 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';
+import { CheckIcon, ExternalLinkIcon, LoadingSpinner } from '../SmartScanIcons';
 
 export default function SmartScanControls({
   apiToken,
@@ -12,13 +10,14 @@ export default function SmartScanControls({
   loadingData,
   discoverMcpData,
   discoveredServers,
-  selectedServers,
-  setSelectedServers,
-  runScan,
+  _selectedServers,
+  _setSelectedServers,
   scanning,
   clearCache,
   clearingCache,
+  ...rest
 }) {
+  const { runScan: _runScan } = rest;
   const saveTokenTimeoutRef = useRef(null);
   const [showClearCacheModal, setShowClearCacheModal] = useState(false);
 
@@ -56,6 +55,7 @@ export default function SmartScanControls({
         }}
       >
         <label
+          htmlFor="api-token-input"
           style={{
             fontSize: '12px',
             fontWeight: '600',
@@ -68,6 +68,7 @@ export default function SmartScanControls({
         </label>
         <div style={{ position: 'relative', width: '200px' }}>
           <input
+            id="api-token-input"
             type="password"
             value={apiToken}
             onChange={(e) => handleTokenChange(e.target.value)}
@@ -145,6 +146,7 @@ export default function SmartScanControls({
         }}
       >
         <label
+          htmlFor="servers-label"
           style={{
             fontSize: '12px',
             fontWeight: '600',
@@ -156,6 +158,7 @@ export default function SmartScanControls({
           Servers:
         </label>
         <button
+          type="button"
           onClick={discoverMcpData}
           disabled={loadingData}
           style={{
@@ -224,6 +227,7 @@ export default function SmartScanControls({
 
       {/* Clear Cache Button */}
       <button
+        type="button"
         onClick={() => setShowClearCacheModal(true)}
         disabled={clearingCache}
         style={{

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

@@ -1,5 +1,5 @@
-import { ShieldIcon, ExternalLinkIcon } from '../SmartScanIcons';
 import { colors, fonts } from '../../theme';
+import { ExternalLinkIcon, ShieldIcon } from '../SmartScanIcons';
 
 export default function SmartScanHeader() {
   return (

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

@@ -13,6 +13,7 @@ export default function ViewModeTabs({ viewMode, setViewMode, onSwitchToScan, on
       }}
     >
       <button
+        type="button"
         onClick={() => {
           setViewMode('scan');
           onSwitchToScan?.();
@@ -33,6 +34,7 @@ export default function ViewModeTabs({ viewMode, setViewMode, onSwitchToScan, on
         Scan Servers
       </button>
       <button
+        type="button"
         onClick={() => {
           setViewMode('list');
           onSwitchToList?.();

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

@@ -16,9 +16,8 @@ export function useCacheManagement(discoveredServers, discoverMcpData, setError)
           await discoverMcpData();
         }
         return { success: true, message: data.message };
-      } else {
-        throw new Error(data.error || 'Failed to clear cache');
       }
+      throw new Error(data.error || 'Failed to clear cache');
     } catch (err) {
       setError(err.message || 'Failed to clear cache');
       return { success: false, error: err.message };

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

@@ -8,36 +8,32 @@ export function useMcpDiscovery(setError) {
   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 headers = { 'Content-Type': 'application/json' };
+    if (sessionId) {
+      headers['Mcp-Session-Id'] = sessionId;
+    }
 
-      const data = await response.json();
+    const response = await fetch('/api/playground/proxy', {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ method, params }),
+    });
 
-      const responseSessionId =
-        response.headers.get('Mcp-Session-Id') ||
-        response.headers.get('mcp-session-id') ||
-        data._sessionId;
-      if (responseSessionId && responseSessionId !== sessionId) {
-        setSessionId(responseSessionId);
-      }
+    const data = await response.json();
 
-      if (!response.ok) {
-        throw new Error(data.error?.message || data.message || 'Request failed');
-      }
+    const responseSessionId =
+      response.headers.get('Mcp-Session-Id') ||
+      response.headers.get('mcp-session-id') ||
+      data._sessionId;
+    if (responseSessionId && responseSessionId !== sessionId) {
+      setSessionId(responseSessionId);
+    }
 
-      return data.result || data;
-    } catch (err) {
-      throw err;
+    if (!response.ok) {
+      throw new Error(data.error?.message || data.message || 'Request failed');
     }
+
+    return data.result || data;
   };
 
   const discoverMcpData = async () => {
@@ -95,7 +91,7 @@ export function useMcpDiscovery(setError) {
         setMcpData({
           server: {
             name: firstServer.name,
-            description: `Discovered from MCP config`,
+            description: 'Discovered from MCP config',
           },
           tools: firstServer.tools || [],
           resources: firstServer.resources || [],

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

@@ -23,7 +23,7 @@ export function useScanList(apiToken, setError) {
       if (cacheResponse.ok) {
         const scans = cacheData.scans || [];
         console.log(`[useScanList] Loaded ${scans.length} cached scans from API`);
-        console.log(`[useScanList] Full cacheData:`, cacheData);
+        console.log('[useScanList] Full cacheData:', cacheData);
 
         // Debug: Log first scan structure to see what we're receiving
         if (scans.length > 0) {
@@ -54,9 +54,9 @@ export function useScanList(apiToken, setError) {
           // 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()) ||
+            scan.serverName?.trim() ||
+            scan.server_name?.trim() ||
+            scan.server?.name?.trim() ||
             'Unknown Server';
 
           console.log(`[useScanList] Extracted serverName for scan ${index}: "${serverName}"`);
@@ -79,12 +79,13 @@ export function useScanList(apiToken, setError) {
           // 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;
+          const baseScanData = 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 scanData =
+            baseScanData?.data && typeof baseScanData.data === 'object'
+              ? baseScanData.data
+              : baseScanData;
 
           const transformed = {
             serverName: serverName,
@@ -144,7 +145,7 @@ export function useScanList(apiToken, setError) {
         r.data?.data?.id === scanId ||
         r.data?.data?.scan_id === scanId
     );
-    if (cachedResult && cachedResult.cached && cachedResult.data?.data) {
+    if (cachedResult?.cached && cachedResult.data?.data) {
       // Use the cached scan data directly
       const scanData = cachedResult.data.data;
       setSelectedScan({

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

@@ -43,21 +43,30 @@ export function useScanOperations(apiToken, discoveredServers, selectedServers,
       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;
+        const formatValidationErrors = (details) => {
+          if (!Array.isArray(details)) {
+            return null;
           }
-        }
+          return `Validation failed: ${details
+            .map((d) => {
+              if (typeof d === 'string') {
+                return d;
+              }
+              if (d.field && d.message) {
+                return `${d.field}: ${d.message}`;
+              }
+              return JSON.stringify(d);
+            })
+            .join('; ')}`;
+        };
+
+        const errorMessage =
+          response.status === 400 && data.details
+            ? formatValidationErrors(data.details) ||
+              data.error ||
+              data.message ||
+              `API error: ${response.status}`
+            : data.error || data.message || `API error: ${response.status}`;
 
         setError(errorMessage);
         return;

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export function useServerStatus() {
   const [serverStatus, setServerStatus] = useState(null);
@@ -17,7 +17,7 @@ export function useServerStatus() {
       }
       const data = await res.json();
       setServerStatus(data);
-    } catch (err) {
+    } catch (_err) {
       setServerStatus({ running: false });
     }
   };

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export function useTokenManagement() {
   const [apiToken, setApiToken] = useState('');
@@ -22,7 +22,7 @@ export function useTokenManagement() {
           setApiToken(data.token);
         }
       }
-    } catch (err) {
+    } catch (_err) {
       console.debug('No stored token found');
     }
   };

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

@@ -4,15 +4,12 @@
 
 export function getScanValue(scan, path) {
   const paths = path.split('.');
-  let value = scan;
-  for (const p of paths) {
+  return paths.reduce((value, p) => {
     if (value && typeof value === 'object' && p in value) {
-      value = value[p];
-    } else {
-      return null;
+      return value[p];
     }
-  }
-  return value;
+    return null;
+  }, scan);
 }
 
 export function normalizeScanData(scan) {
@@ -24,8 +21,8 @@ export function normalizeScanData(scan) {
     getScanValue(scan, 'scan_id') ||
     getScanValue(scan, 'data.id') ||
     getScanValue(scan, 'data.scan_id') ||
-    (actualScan && actualScan.id) ||
-    (actualScan && actualScan.scan_id);
+    actualScan?.id ||
+    actualScan?.scan_id;
 
   const serverName =
     scan.serverName || // Check top-level first (for cached scans)
@@ -35,7 +32,7 @@ export function normalizeScanData(scan) {
     getScanValue(scan, 'server.name') ||
     getScanValue(scan, 'data.server.name') ||
     getScanValue(scan, 'data.data.server.name') ||
-    (scan.server && scan.server.name) || // Check nested server object
+    scan.server?.name || // Check nested server object
     'Unknown Server';
 
   const status =
@@ -61,21 +58,29 @@ export function normalizeScanData(scan) {
     getScanValue(scan, 'data.updated_at') ||
     getScanValue(scan, 'data.data.updated_at');
 
-  let analysisResult =
+  const baseAnalysisResult =
     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;
+  const extractAnalysisResult = (base, actual) => {
+    if (base) {
+      return base;
     }
-    if (!analysisResult && actualScan.analysis_result) {
-      analysisResult = actualScan.analysis_result;
+    if (actual && typeof actual === 'object') {
+      if (actual.tool_findings || actual.prompt_findings || actual.resource_findings) {
+        return actual;
+      }
+      if (actual.analysis_result) {
+        return actual.analysis_result;
+      }
     }
-  }
+    return null;
+  };
+
+  const analysisResult = extractAnalysisResult(baseAnalysisResult, actualScan);
 
   const serverData =
     getScanValue(scan, 'result.mcp_server_data.server') ||

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

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { useTokenManagement } from './hooks/useTokenManagement';
-import { useServerStatus } from './hooks/useServerStatus';
+import { useCacheManagement } from './hooks/useCacheManagement';
 import { useMcpDiscovery } from './hooks/useMcpDiscovery';
-import { useScanOperations } from './hooks/useScanOperations';
 import { useScanList } from './hooks/useScanList';
-import { useCacheManagement } from './hooks/useCacheManagement';
+import { useScanOperations } from './hooks/useScanOperations';
+import { useServerStatus } from './hooks/useServerStatus';
+import { useTokenManagement } from './hooks/useTokenManagement';
 
 export function useSmartScan() {
   const [error, setError] = useState(null);

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

@@ -1,7 +1,9 @@
 import { colors } from '../../theme';
 
 export function getRiskLevelColor(riskLevel) {
-  if (!riskLevel) return colors.textTertiary;
+  if (!riskLevel) {
+    return colors.textTertiary;
+  }
   switch (riskLevel.toLowerCase()) {
     case 'none':
       return colors.accentGreen;

package/ui/src/components/SmartScanIcons.jsx

@@ -1,11 +1,11 @@
-import { colors } from '../theme';
 import {
-  IconShield,
-  IconExternalLink,
   IconAlertTriangle,
   IconCheck,
   IconClock,
+  IconExternalLink,
+  IconShield,
 } from '@tabler/icons-react';
+import { colors } from '../theme';
 
 export const ShieldIcon = ({ size = 24, color = 'currentColor' }) => (
   <IconShield size={size} stroke={1.5} color={color} />
@@ -51,7 +51,10 @@ export const EmptyStateIcon = () => (
     strokeLinecap="round"
     strokeLinejoin="round"
     style={{ opacity: 0.5 }}
+    role="img"
+    aria-label="Empty state icon"
   >
+    <title>Empty state icon</title>
     <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
     <path d="M9 12l2 2 4-4" />
   </svg>

package/ui/src/components/TabNavigation/DesktopTabs.jsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef } from 'react';
-import { colors, fonts } from '../../theme';
 import anime from 'animejs';
+import { useEffect } from 'react';
+import { colors, fonts } from '../../theme';
 
 export default function DesktopTabs({ tabs, activeTab, onTabChange, tabRefs, indicatorRef }) {
   useEffect(() => {
@@ -21,8 +21,13 @@ export default function DesktopTabs({ tabs, activeTab, onTabChange, tabRefs, ind
     <div style={{ position: 'relative', display: 'flex', flex: 1 }}>
       {tabs.map((tab) => (
         <button
+          type="button"
           key={tab.id}
-          ref={(el) => (tabRefs.current[tab.id] = el)}
+          ref={(el) => {
+            if (el) {
+              tabRefs.current[tab.id] = el;
+            }
+          }}
           data-tour={
             tab.id === 'traffic'
               ? 'traffic-tab'

package/ui/src/components/TabNavigation/MobileDropdown.jsx

@@ -1,5 +1,5 @@
 import { colors, fonts } from '../../theme';
-import { MenuIcon, ChevronDownIcon } from '../TabNavigationIcons';
+import { ChevronDownIcon, MenuIcon } from '../TabNavigationIcons';
 
 export default function MobileDropdown({
   tabs,
@@ -15,6 +15,7 @@ export default function MobileDropdown({
       ref={dropdownRef}
     >
       <button
+        type="button"
         onClick={() => setIsDropdownOpen(!isDropdownOpen)}
         style={{
           display: 'flex',
@@ -74,6 +75,7 @@ export default function MobileDropdown({
             const Icon = tab.icon;
             return (
               <button
+                type="button"
                 key={tab.id}
                 onClick={() => {
                   onTabChange(tab.id);

package/ui/src/components/TabNavigation.jsx

@@ -1,6 +1,6 @@
+import anime from 'animejs';
 import { useEffect, useRef } from 'react';
 import { colors, fonts } from '../theme';
-import anime from 'animejs';
 
 function TabNavigation({ tabs, activeTab, onTabChange }) {
   const tabRefs = useRef({});
@@ -18,7 +18,7 @@ function TabNavigation({ tabs, activeTab, onTabChange }) {
         easing: 'easeOutExpo',
       });
     }
-  }, [activeTab, tabs]);
+  }, [activeTab]);
 
   return (
     <div
@@ -35,7 +35,12 @@ function TabNavigation({ tabs, activeTab, onTabChange }) {
       {tabs.map((tab) => (
         <button
           key={tab}
-          ref={(el) => (tabRefs.current[tab] = el)}
+          type="button"
+          ref={(el) => {
+            if (el) {
+              tabRefs.current[tab] = el;
+            }
+          }}
           onClick={() => onTabChange(tab)}
           style={{
             padding: '10px 18px',