@mcp-shark/mcp-shark 1.4.1 → 1.5.0

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

package/ui/src/utils/requestPairing.js

@@ -0,0 +1,89 @@
+import { getJsonRpcMethod } from './requestUtils.js';
+
+export function pairRequestsWithResponses(requests) {
+  const pairs = [];
+  const processed = new Set();
+
+  // Helper function to check if two requests match (same session, JSON-RPC method, and optionally jsonrpc_id)
+  const matches = (req, resp) => {
+    // Session ID must match (or both null for initiation)
+    const sessionMatch = req.session_id === resp.session_id;
+    if (!sessionMatch) {
+      return false;
+    }
+
+    // JSON-RPC Method must match
+    const reqMethod = getJsonRpcMethod(req);
+    const respMethod = getJsonRpcMethod(resp);
+
+    // Both must have a method, and they must match
+    if (!reqMethod || !respMethod) {
+      // If either doesn't have a method, we can't match by method
+      // Fall back to JSON-RPC ID matching only
+      if (req.jsonrpc_id && resp.jsonrpc_id) {
+        return req.jsonrpc_id === resp.jsonrpc_id;
+      }
+      // If no method and no ID, we can't match reliably
+      return false;
+    }
+
+    const methodMatch = reqMethod === respMethod;
+    if (!methodMatch) {
+      return false;
+    }
+
+    // If JSON-RPC ID exists, it must match (for more precise pairing)
+    if (req.jsonrpc_id && resp.jsonrpc_id) {
+      return req.jsonrpc_id === resp.jsonrpc_id;
+    }
+
+    // If no JSON-RPC ID, match by session and method only
+    return true;
+  };
+
+  requests.forEach((request) => {
+    if (processed.has(request.frame_number)) {
+      return;
+    }
+
+    if (request.direction === 'request') {
+      // Find matching response - must match session, endpoint, and optionally jsonrpc_id
+      const response = requests.find(
+        (r) =>
+          r.direction === 'response' &&
+          !processed.has(r.frame_number) &&
+          matches(request, r) &&
+          r.frame_number > request.frame_number
+      );
+
+      if (response) {
+        pairs.push({ request, response, frame_number: request.frame_number });
+        processed.add(request.frame_number);
+        processed.add(response.frame_number);
+      } else {
+        // Request without response
+        pairs.push({ request, response: null, frame_number: request.frame_number });
+        processed.add(request.frame_number);
+      }
+    } else if (request.direction === 'response') {
+      // Find matching request - must match session, endpoint, and optionally jsonrpc_id
+      const matchingRequest = requests.find(
+        (r) =>
+          r.direction === 'request' &&
+          !processed.has(r.frame_number) &&
+          matches(r, request) &&
+          r.frame_number < request.frame_number
+      );
+
+      if (!matchingRequest) {
+        // Response without request (orphaned)
+        pairs.push({ request: null, response: request, frame_number: request.frame_number });
+        processed.add(request.frame_number);
+      }
+      // If matching request exists, it will be handled when we iterate over it
+    }
+  });
+
+  // Sort by frame number (descending - latest first)
+  return pairs.sort((a, b) => b.frame_number - a.frame_number);
+}

package/ui/src/utils/requestUtils.js

@@ -1,13 +1,14 @@
+const LLM_SERVER = 'LLM Server';
 export function extractServerName(request) {
   if (request.body_json) {
     try {
       const body =
         typeof request.body_json === 'string' ? JSON.parse(request.body_json) : request.body_json;
-      if (body.params && body.params.name) {
+      if (body.params?.name) {
         const fullName = body.params.name;
         return fullName.includes('.') ? fullName.split('.')[0] : fullName;
       }
-    } catch (e) {
+    } catch (_e) {
       // Failed to parse JSON, try body_raw
     }
   }
@@ -16,11 +17,11 @@ export function extractServerName(request) {
     try {
       const body =
         typeof request.body_raw === 'string' ? JSON.parse(request.body_raw) : request.body_raw;
-      if (body.params && body.params.name) {
+      if (body.params?.name) {
         const fullName = body.params.name;
         return fullName.includes('.') ? fullName.split('.')[0] : fullName;
       }
-    } catch (e) {
+    } catch (_e) {
       // Failed to parse
     }
   }
@@ -33,13 +34,17 @@ export function extractServerName(request) {
 }
 
 export function formatRelativeTime(timestampISO, firstTime) {
-  if (!firstTime) return '0.000000';
+  if (!firstTime) {
+    return '0.000000';
+  }
   const diff = new Date(timestampISO) - new Date(firstTime);
   return (diff / 1000).toFixed(6);
 }
 
 export function formatDateTime(timestampISO) {
-  if (!timestampISO) return '-';
+  if (!timestampISO) {
+    return '-';
+  }
   try {
     const date = new Date(timestampISO);
     return date.toLocaleString('en-US', {
@@ -51,7 +56,7 @@ export function formatDateTime(timestampISO) {
       second: '2-digit',
       hour12: false,
     });
-  } catch (e) {
+  } catch (_e) {
     return timestampISO;
   }
 }
@@ -59,13 +64,13 @@ export function formatDateTime(timestampISO) {
 export function getSourceDest(request) {
   if (request.direction === 'request') {
     return {
-      source: request.remote_address || 'Client',
-      dest: request.host || 'Server',
+      source: LLM_SERVER,
+      dest: request.remote_address || 'Unknown MCP Client',
     };
   }
   return {
-    source: request.host || 'Server',
-    dest: request.remote_address || 'Client',
+    source: request.remote_address || 'Unknown MCP Server',
+    dest: LLM_SERVER,
   };
 }
 
@@ -78,7 +83,7 @@ export function getEndpoint(request) {
         if (body && typeof body === 'object' && body.method) {
           return body.method;
         }
-      } catch (e) {
+      } catch (_e) {
         // Failed to parse JSON, try body_raw
       }
     }
@@ -89,7 +94,7 @@ export function getEndpoint(request) {
         if (body && typeof body === 'object' && body.method) {
           return body.method;
         }
-      } catch (e) {
+      } catch (_e) {
         // Failed to parse
       }
     }
@@ -100,7 +105,7 @@ export function getEndpoint(request) {
       try {
         const url = new URL(request.url);
         return url.pathname + (url.search || '');
-      } catch (e) {
+      } catch (_e) {
         const url = request.url;
         const match = url.match(/^https?:\/\/[^\/]+(\/.*)$/);
         return match ? match[1] : url;
@@ -126,15 +131,19 @@ export function getInfo(request) {
       // If we have both HTTP method and endpoint, show both
       if (httpMethod && url) {
         return `${httpMethod} ${endpoint}`;
-      } else if (httpMethod) {
+      }
+      if (httpMethod) {
         return `${httpMethod} ${endpoint}`;
       }
       return endpoint;
-    } else if (httpMethod && url) {
+    }
+    if (httpMethod && url) {
       return `${httpMethod} ${url}`;
-    } else if (httpMethod) {
+    }
+    if (httpMethod) {
       return httpMethod;
-    } else if (url) {
+    }
+    if (url) {
       return url;
     }
     return 'Request';
@@ -148,9 +157,11 @@ export function getInfo(request) {
 
   if (status && rpcMethod) {
     return `${status} ${rpcMethod}`;
-  } else if (status) {
+  }
+  if (status) {
     return `Status: ${status}`;
-  } else if (rpcMethod) {
+  }
+  if (rpcMethod) {
     return rpcMethod;
   }
   return 'Response';
@@ -184,7 +195,7 @@ export function getJsonRpcMethod(req) {
         if (body && typeof body === 'object' && body.method) {
           return body.method;
         }
-      } catch (e) {
+      } catch (_e) {
         // Failed to parse
       }
     }
@@ -194,7 +205,7 @@ export function getJsonRpcMethod(req) {
         if (body && typeof body === 'object' && body.method) {
           return body.method;
         }
-      } catch (e) {
+      } catch (_e) {
         // Failed to parse
       }
     }
@@ -203,10 +214,10 @@ export function getJsonRpcMethod(req) {
   // For responses, try to extract from body if available
   if (req.direction === 'response' && req.body_json) {
     try {
-      const body = typeof req.body_json === 'string' ? JSON.parse(req.body_json) : req.body_json;
+      const _body = typeof req.body_json === 'string' ? JSON.parse(req.body_json) : req.body_json;
       // Responses don't have a method field, but we can check if it's an error response
       // For now, we'll rely on jsonrpc_method field
-    } catch (e) {
+    } catch (_e) {
       // Failed to parse
     }
   }
@@ -214,84 +225,5 @@ export function getJsonRpcMethod(req) {
   return null;
 }
 
-export function pairRequestsWithResponses(requests) {
-  const pairs = [];
-  const processed = new Set();
-
-  // Helper function to check if two requests match (same session, JSON-RPC method, and optionally jsonrpc_id)
-  const matches = (req, resp) => {
-    // Session ID must match (or both null for initiation)
-    const sessionMatch = req.session_id === resp.session_id;
-    if (!sessionMatch) return false;
-
-    // JSON-RPC Method must match
-    const reqMethod = getJsonRpcMethod(req);
-    const respMethod = getJsonRpcMethod(resp);
-
-    // Both must have a method, and they must match
-    if (!reqMethod || !respMethod) {
-      // If either doesn't have a method, we can't match by method
-      // Fall back to JSON-RPC ID matching only
-      if (req.jsonrpc_id && resp.jsonrpc_id) {
-        return req.jsonrpc_id === resp.jsonrpc_id;
-      }
-      // If no method and no ID, we can't match reliably
-      return false;
-    }
-
-    const methodMatch = reqMethod === respMethod;
-    if (!methodMatch) return false;
-
-    // If JSON-RPC ID exists, it must match (for more precise pairing)
-    if (req.jsonrpc_id && resp.jsonrpc_id) {
-      return req.jsonrpc_id === resp.jsonrpc_id;
-    }
-
-    // If no JSON-RPC ID, match by session and method only
-    return true;
-  };
-
-  requests.forEach((request) => {
-    if (processed.has(request.frame_number)) return;
-
-    if (request.direction === 'request') {
-      // Find matching response - must match session, endpoint, and optionally jsonrpc_id
-      const response = requests.find(
-        (r) =>
-          r.direction === 'response' &&
-          !processed.has(r.frame_number) &&
-          matches(request, r) &&
-          r.frame_number > request.frame_number
-      );
-
-      if (response) {
-        pairs.push({ request, response, frame_number: request.frame_number });
-        processed.add(request.frame_number);
-        processed.add(response.frame_number);
-      } else {
-        // Request without response
-        pairs.push({ request, response: null, frame_number: request.frame_number });
-        processed.add(request.frame_number);
-      }
-    } else if (request.direction === 'response') {
-      // Find matching request - must match session, endpoint, and optionally jsonrpc_id
-      const matchingRequest = requests.find(
-        (r) =>
-          r.direction === 'request' &&
-          !processed.has(r.frame_number) &&
-          matches(r, request) &&
-          r.frame_number < request.frame_number
-      );
-
-      if (!matchingRequest) {
-        // Response without request (orphaned)
-        pairs.push({ request: null, response: request, frame_number: request.frame_number });
-        processed.add(request.frame_number);
-      }
-      // If matching request exists, it will be handled when we iterate over it
-    }
-  });
-
-  // Sort by frame number (descending - latest first)
-  return pairs.sort((a, b) => b.frame_number - a.frame_number);
-}
+// Re-export pairRequestsWithResponses from requestPairing.js
+export { pairRequestsWithResponses } from './requestPairing.js';

package/ui/vite.config.js

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [react()],