@mcp-shark/mcp-shark 1.4.2 → 1.5.0

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>
   );
 }
 

package/ui/src/components/ViewModeTabs.jsx

@@ -1,5 +1,5 @@
-import { colors, fonts } from '../theme';
 import { IconList, IconNetwork } from '@tabler/icons-react';
+import { colors, fonts } from '../theme';
 
 function ViewModeTabs({ viewMode, onViewModeChange }) {
   return (
@@ -15,6 +15,7 @@ function ViewModeTabs({ viewMode, onViewModeChange }) {
       }}
     >
       <button
+        type="button"
         onClick={() => onViewModeChange('general')}
         style={{
           padding: '10px 18px',
@@ -49,6 +50,7 @@ function ViewModeTabs({ viewMode, onViewModeChange }) {
         General List
       </button>
       <button
+        type="button"
         onClick={() => onViewModeChange('groupedByMcp')}
         style={{
           padding: '10px 18px',

package/ui/src/config/tourSteps.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const tourSteps = [
   {
     target: '[data-tour="tabs"]',

package/ui/src/hooks/useAnimation.js

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from 'react';
 import anime from 'animejs';
+import { useEffect, useRef } from 'react';
 
 /**
  * React hook for animating elements on mount/unmount
@@ -18,7 +18,7 @@ export const useAnimation = (animationFn, deps = []) => {
         anime.remove(elementRef.current);
       }
     };
-  }, deps);
+  }, [animationFn, ...deps]);
 
   return elementRef;
 };
@@ -28,6 +28,7 @@ export const useAnimation = (animationFn, deps = []) => {
  */
 export const useMountAnimation = (options = {}) => {
   const elementRef = useRef(null);
+  const { duration, easing } = options;
 
   useEffect(() => {
     if (elementRef.current) {
@@ -35,12 +36,12 @@ export const useMountAnimation = (options = {}) => {
         targets: elementRef.current,
         opacity: [0, 1],
         translateY: [20, 0],
-        duration: options.duration || 400,
-        easing: options.easing || 'easeOutExpo',
+        duration: duration || 400,
+        easing: easing || 'easeOutExpo',
         ...options,
       });
     }
-  }, []);
+  }, [duration, easing, options]);
 
   return elementRef;
 };
@@ -50,6 +51,7 @@ export const useMountAnimation = (options = {}) => {
  */
 export const useUnmountAnimation = (shouldUnmount, onComplete, options = {}) => {
   const elementRef = useRef(null);
+  const { duration, easing } = options;
 
   useEffect(() => {
     if (shouldUnmount && elementRef.current) {
@@ -57,13 +59,13 @@ export const useUnmountAnimation = (shouldUnmount, onComplete, options = {}) =>
         targets: elementRef.current,
         opacity: [1, 0],
         translateY: [0, -20],
-        duration: options.duration || 300,
-        easing: options.easing || 'easeInExpo',
+        duration: duration || 300,
+        easing: easing || 'easeInExpo',
         complete: onComplete,
         ...options,
       });
     }
-  }, [shouldUnmount, onComplete]);
+  }, [shouldUnmount, onComplete, duration, easing, options]);
 
   return elementRef;
 };
@@ -73,6 +75,7 @@ export const useUnmountAnimation = (shouldUnmount, onComplete, options = {}) =>
  */
 export const useStaggerAnimation = (items, options = {}) => {
   const containerRef = useRef(null);
+  const { duration, delay, easing } = options;
 
   useEffect(() => {
     if (containerRef.current && items.length > 0) {
@@ -80,13 +83,13 @@ export const useStaggerAnimation = (items, options = {}) => {
         targets: containerRef.current.children,
         opacity: [0, 1],
         translateY: [20, 0],
-        duration: options.duration || 400,
-        delay: anime.stagger(options.delay || 50),
-        easing: options.easing || 'easeOutExpo',
+        duration: duration || 400,
+        delay: anime.stagger(delay || 50),
+        easing: easing || 'easeOutExpo',
         ...options,
       });
     }
-  }, [items.length]);
+  }, [items.length, duration, delay, easing, options]);
 
   return containerRef;
 };

package/ui/src/hooks/useConfigManagement.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export function useConfigManagement() {
   const [detectedPaths, setDetectedPaths] = useState([]);
@@ -12,7 +12,7 @@ export function useConfigManagement() {
   const [backupContent, setBackupContent] = useState(null);
   const [loadingBackup, setLoadingBackup] = useState(false);
 
-  const detectConfigPaths = async () => {
+  const detectConfigPaths = useCallback(async () => {
     setDetecting(true);
     try {
       const res = await fetch('/api/config/detect');
@@ -23,9 +23,9 @@ export function useConfigManagement() {
     } finally {
       setDetecting(false);
     }
-  };
+  }, []);
 
-  const loadBackups = async () => {
+  const loadBackups = useCallback(async () => {
     setLoadingBackups(true);
     try {
       const res = await fetch('/api/config/backups');
@@ -36,7 +36,7 @@ export function useConfigManagement() {
     } finally {
       setLoadingBackups(false);
     }
-  };
+  }, []);
 
   const handleViewConfig = async (filePath) => {
     setLoadingConfig(true);
@@ -49,7 +49,7 @@ export function useConfigManagement() {
       } else {
         setConfigContent(null);
       }
-    } catch (err) {
+    } catch (_err) {
       setConfigContent(null);
     } finally {
       setLoadingConfig(false);
@@ -69,7 +69,7 @@ export function useConfigManagement() {
       } else {
         setBackupContent(null);
       }
-    } catch (err) {
+    } catch (_err) {
       setBackupContent(null);
     } finally {
       setLoadingBackup(false);
@@ -98,7 +98,7 @@ export function useConfigManagement() {
   useEffect(() => {
     detectConfigPaths();
     loadBackups();
-  }, []);
+  }, [detectConfigPaths, loadBackups]);
 
   return {
     detectedPaths,

package/ui/src/hooks/useServiceExtraction.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export function useServiceExtraction(fileContent, filePath) {
   const [services, setServices] = useState([]);

package/ui/src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap");
 
 * {
   margin: 0;
@@ -7,12 +7,7 @@
 }
 
 body {
-  font-family:
-    'Roboto',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    sans-serif;
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: #ffffff;
   color: #202124;
   overflow: hidden;
@@ -23,7 +18,7 @@ body {
 code,
 pre,
 .monospace {
-  font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-family: "Roboto Mono", "JetBrains Mono", "Fira Code", "Consolas", monospace;
 }
 
 #root {

package/ui/src/theme.js

@@ -53,9 +53,9 @@ export function withOpacity(color, opacity) {
   // Remove # if present
   const hex = color.replace('#', '');
   // Convert to RGB
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
+  const r = Number.parseInt(hex.substring(0, 2), 16);
+  const g = Number.parseInt(hex.substring(2, 4), 16);
+  const b = Number.parseInt(hex.substring(4, 6), 16);
   return `rgba(${r}, ${g}, ${b}, ${opacity})`;
 }
 

package/ui/src/utils/hexUtils.js

@@ -1,16 +1,22 @@
 export function generateHexDump(text) {
-  if (!text) return [];
+  if (!text) {
+    return [];
+  }
   const bytes = new TextEncoder().encode(text);
   const lines = [];
-  for (let i = 0; i < bytes.length; i += 16) {
-    const chunk = bytes.slice(i, i + 16);
+  const chunkSize = 16;
+  const totalChunks = Math.ceil(bytes.length / chunkSize);
+
+  for (const chunkIndex of Array.from({ length: totalChunks }, (_, idx) => idx)) {
+    const startOffset = chunkIndex * chunkSize;
+    const chunk = bytes.slice(startOffset, startOffset + chunkSize);
     const hex = Array.from(chunk)
       .map((b) => b.toString(16).padStart(2, '0'))
       .join(' ');
     const ascii = Array.from(chunk)
       .map((b) => (b >= 32 && b < 127 ? String.fromCharCode(b) : '.'))
       .join('');
-    const offset = i.toString(16).padStart(8, '0');
+    const offset = startOffset.toString(16).padStart(8, '0');
     lines.push({ offset, hex, ascii });
   }
   return lines;
@@ -20,5 +26,5 @@ export function createFullRequestText(headers, bodyRaw) {
   const headersText = Object.entries(headers)
     .map(([key, value]) => `${key}: ${value}`)
     .join('\r\n');
-  return headersText + (bodyRaw ? '\r\n\r\n' + bodyRaw : '');
+  return headersText + (bodyRaw ? `\r\n\r\n${bodyRaw}` : '');
 }

package/ui/src/utils/mcpGroupingUtils.js

@@ -1,13 +1,13 @@
-import { pairRequestsWithResponses } from './requestUtils.js';
 import {
-  IconRefresh,
-  IconTool,
+  IconBell,
   IconDatabase,
   IconMessage,
-  IconBell,
-  IconUser,
   IconPackage,
+  IconRefresh,
+  IconTool,
+  IconUser,
 } from '@tabler/icons-react';
+import { pairRequestsWithResponses } from './requestUtils.js';
 
 /**
  * MCP Method Categories based on the protocol specification
@@ -27,7 +27,9 @@ export const MCP_METHOD_CATEGORIES = {
  * Categorize an MCP method into its protocol category
  */
 export function categorizeMcpMethod(method) {
-  if (!method) return MCP_METHOD_CATEGORIES.OTHER;
+  if (!method) {
+    return MCP_METHOD_CATEGORIES.OTHER;
+  }
 
   // Lifecycle methods
   if (method === 'initialize' || method === 'notifications/initialized') {
@@ -112,7 +114,9 @@ export function groupByMcpSessionAndCategory(requests) {
 
   pairs.forEach((pair) => {
     const request = pair.request || pair.response;
-    if (!request) return;
+    if (!request) {
+      return;
+    }
 
     const sessionId = request.session_id || '__NO_SESSION__';
     const method = getJsonRpcMethod(request);
@@ -140,7 +144,7 @@ export function groupByMcpSessionAndCategory(requests) {
   });
 
   return Array.from(sessionGroups.entries())
-    .map(([sessionId, session]) => ({
+    .map(([_sessionId, session]) => ({
       sessionId: session.sessionId,
       firstTimestamp: session.firstTimestamp,
       categories: Array.from(session.categories.entries())
@@ -182,7 +186,9 @@ export function groupByMcpCategory(requests) {
 
   pairs.forEach((pair) => {
     const request = pair.request || pair.response;
-    if (!request) return;
+    if (!request) {
+      return;
+    }
 
     const method = getJsonRpcMethod(request);
     const category = categorizeMcpMethod(method || '');
@@ -226,7 +232,9 @@ export function groupByMcpCategory(requests) {
  * Based on the protocol specification
  */
 export function getMethodDescription(method) {
-  if (!method) return 'Unknown operation';
+  if (!method) {
+    return 'Unknown operation';
+  }
 
   const descriptions = {
     // Lifecycle