@mcp-shark/mcp-shark 1.4.1 → 1.5.0

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',

package/ui/src/components/TabNavigationIcons.jsx

@@ -1,13 +1,13 @@
 // Tabler Icons for Tab Navigation
 // Using @tabler/icons-react - install with: npm install @tabler/icons-react
 import {
-  IconNetwork,
+  IconBrandStackoverflow,
+  IconChevronDown,
   IconFileText,
+  IconMenu2,
+  IconNetwork,
   IconSettings,
-  IconBrandStackoverflow,
   IconShield,
-  IconMenu2,
-  IconChevronDown,
 } from '@tabler/icons-react';
 
 // Wrapper components to match existing API

package/ui/src/components/TourOverlay.jsx

@@ -1,4 +1,4 @@
-function TourOverlay({ elementRect, onClick }) {
+function TourOverlay({ elementRect, _onClick }) {
   if (!elementRect) {
     return (
       <div

package/ui/src/components/TourTooltip/TourTooltipButtons.jsx

@@ -19,6 +19,7 @@ export default function TourTooltipButtons({
       }}
     >
       <button
+        type="button"
         onClick={(e) => {
           e.stopPropagation();
           onSkip();
@@ -52,6 +53,7 @@ export default function TourTooltipButtons({
       <div style={{ display: 'flex', gap: '8px', pointerEvents: 'auto' }}>
         {currentStep > 0 && (
           <button
+            type="button"
             onClick={(e) => {
               e.stopPropagation();
               onPrevious();
@@ -82,6 +84,7 @@ export default function TourTooltipButtons({
           </button>
         )}
         <button
+          type="button"
           onClick={(e) => {
             e.stopPropagation();
             onNext();

package/ui/src/components/TourTooltip/TourTooltipHeader.jsx

@@ -36,6 +36,7 @@ export default function TourTooltipHeader({ step, currentStep, totalSteps, isDra
         </p>
       </div>
       <button
+        type="button"
         onClick={(e) => {
           e.stopPropagation();
           onSkip();

package/ui/src/components/TourTooltip/TourTooltipIcons.jsx

@@ -8,7 +8,10 @@ export const CloseIcon = ({ size = 16, color = 'currentColor' }) => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    role="img"
+    aria-label="Close icon"
   >
+    <title>Close icon</title>
     <line x1="18" y1="6" x2="6" y2="18" />
     <line x1="6" y1="6" x2="18" y2="18" />
   </svg>
@@ -24,7 +27,10 @@ export const ChevronRight = ({ size = 16, color = 'currentColor' }) => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    role="img"
+    aria-label="Chevron right icon"
   >
+    <title>Chevron right icon</title>
     <polyline points="9 18 15 12 9 6" />
   </svg>
 );
@@ -39,7 +45,10 @@ export const ChevronLeft = ({ size = 16, color = 'currentColor' }) => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    role="img"
+    aria-label="Chevron left icon"
   >
+    <title>Chevron left icon</title>
     <polyline points="15 18 9 12 15 6" />
   </svg>
 );

package/ui/src/components/TourTooltip/useTooltipPosition.js

@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-export function useTooltipPosition(elementRect, step, currentStep) {
+export function useTooltipPosition(elementRect, step, _currentStep) {
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = useState(false);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
 
   useEffect(() => {
     setTooltipPosition({ x: 0, y: 0 });
-  }, [currentStep]);
+  }, []);
 
   const handleMouseDown = (e, tooltipRef) => {
     e.preventDefault();
@@ -23,7 +23,9 @@ export function useTooltipPosition(elementRect, step, currentStep) {
   };
 
   useEffect(() => {
-    if (!isDragging) return;
+    if (!isDragging) {
+      return;
+    }
 
     const handleMouseMove = (e) => {
       setTooltipPosition({
@@ -46,7 +48,9 @@ export function useTooltipPosition(elementRect, step, currentStep) {
   }, [isDragging, dragOffset]);
 
   const calculatePosition = () => {
-    if (!elementRect) return { left: 0, top: 0, transform: 'none' };
+    if (!elementRect) {
+      return { left: 0, top: 0, transform: 'none' };
+    }
 
     const tooltipWidth = 350;
     const tooltipHeight = 200;
@@ -62,42 +66,65 @@ export function useTooltipPosition(elementRect, step, currentStep) {
     }
 
     const position = step.position || 'bottom';
-    let left, top, transform;
-
-    if (position === 'left') {
-      left = elementRect.left - tooltipWidth - spacing;
-      top = elementRect.top + elementRect.height / 2;
-      transform = 'translateY(-50%)';
-      if (left < 10) {
-        left = elementRect.right + spacing;
-      }
-    } else if (position === 'right') {
-      left = elementRect.right + spacing;
-      top = elementRect.top + elementRect.height / 2;
-      transform = 'translateY(-50%)';
-      if (left + tooltipWidth > window.innerWidth - 10) {
-        left = elementRect.left - tooltipWidth - spacing;
+
+    const calculatePosition = (position, elementRect, tooltipWidth, tooltipHeight, spacing) => {
+      if (position === 'left') {
+        const baseLeft = elementRect.left - tooltipWidth - spacing;
+        const left = baseLeft < 10 ? elementRect.right + spacing : baseLeft;
+        return {
+          left,
+          top: elementRect.top + elementRect.height / 2,
+          transform: 'translateY(-50%)',
+        };
       }
-    } else if (position === 'top') {
-      left = elementRect.left + elementRect.width / 2;
-      top = elementRect.top - tooltipHeight - spacing;
-      transform = 'translate(-50%, 0)';
-      if (top < 10) {
-        top = elementRect.bottom + spacing;
+
+      if (position === 'right') {
+        const baseLeft = elementRect.right + spacing;
+        const left =
+          baseLeft + tooltipWidth > window.innerWidth - 10
+            ? elementRect.left - tooltipWidth - spacing
+            : baseLeft;
+        return {
+          left,
+          top: elementRect.top + elementRect.height / 2,
+          transform: 'translateY(-50%)',
+        };
       }
-    } else {
-      left = elementRect.left + elementRect.width / 2;
-      top = elementRect.bottom + spacing;
-      transform = 'translate(-50%, 0)';
-      if (top + tooltipHeight > window.innerHeight - 10) {
-        top = elementRect.top - tooltipHeight - spacing;
+
+      if (position === 'top') {
+        const baseTop = elementRect.top - tooltipHeight - spacing;
+        const top = baseTop < 10 ? elementRect.bottom + spacing : baseTop;
+        return {
+          left: elementRect.left + elementRect.width / 2,
+          top,
+          transform: 'translate(-50%, 0)',
+        };
       }
-    }
 
-    left = Math.max(10, Math.min(left, window.innerWidth - tooltipWidth - 10));
-    top = Math.max(10, Math.min(top, window.innerHeight - tooltipHeight - 10));
+      // bottom (default)
+      const baseTop = elementRect.bottom + spacing;
+      const top =
+        baseTop + tooltipHeight > window.innerHeight - 10
+          ? elementRect.top - tooltipHeight - spacing
+          : baseTop;
+      return {
+        left: elementRect.left + elementRect.width / 2,
+        top,
+        transform: 'translate(-50%, 0)',
+      };
+    };
 
-    return { left, top, transform };
+    const rawPosition = calculatePosition(
+      position,
+      elementRect,
+      tooltipWidth,
+      tooltipHeight,
+      spacing
+    );
+    const left = Math.max(10, Math.min(rawPosition.left, window.innerWidth - tooltipWidth - 10));
+    const top = Math.max(10, Math.min(rawPosition.top, window.innerHeight - tooltipHeight - 10));
+
+    return { left, top, transform: rawPosition.transform };
   };
 
   return {

package/ui/src/components/TourTooltip.jsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { colors, fonts } from '../theme';
-import TourTooltipHeader from './TourTooltip/TourTooltipHeader';
 import TourTooltipButtons from './TourTooltip/TourTooltipButtons';
+import TourTooltipHeader from './TourTooltip/TourTooltipHeader';
 import { useTooltipPosition } from './TourTooltip/useTooltipPosition';
 
 function TourTooltip({ elementRect, step, currentStep, totalSteps, onNext, onPrevious, onSkip }) {
@@ -17,9 +17,17 @@ function TourTooltip({ elementRect, step, currentStep, totalSteps, onNext, onPre
   }
 
   return (
-    <div
+    <button
+      type="button"
       ref={tooltipRef}
       onMouseDown={(e) => handleMouseDown(e, tooltipRef)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleMouseDown(e, tooltipRef);
+        }
+      }}
+      aria-label="Draggable tooltip"
       style={{
         position: 'fixed',
         left: `${position.left}px`,
@@ -76,7 +84,7 @@ function TourTooltip({ elementRect, step, currentStep, totalSteps, onNext, onPre
         onPrevious={onPrevious}
         onSkip={onSkip}
       />
-    </div>
+    </button>
   );
 }