@mcp-shark/mcp-shark 1.4.1 → 1.5.0

package/ui/src/CompositeLogs.jsx

@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef } from 'react';
-import { colors } from './theme';
-import LogsToolbar from './components/LogsToolbar';
+import { useEffect, useRef, useState } from 'react';
 import LogsDisplay from './components/LogsDisplay';
+import LogsToolbar from './components/LogsToolbar';
+import { colors } from './theme';
 
 function CompositeLogs() {
   const [logs, setLogs] = useState([]);
@@ -11,27 +11,23 @@ function CompositeLogs() {
   const logEndRef = useRef(null);
   const wsRef = useRef(null);
 
-  const scrollToTop = () => {
+  useEffect(() => {
     if (autoScroll && logEndRef.current) {
       logEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-  };
+  }, [autoScroll]);
 
   useEffect(() => {
-    scrollToTop();
-  }, [logs, autoScroll]);
-
-  const loadLogs = async () => {
-    try {
-      const response = await fetch('/api/composite/logs?limit=5000');
-      const data = await response.json();
-      setLogs(data);
-    } catch (error) {
-      console.error('Failed to load logs:', error);
-    }
-  };
+    const loadLogs = async () => {
+      try {
+        const response = await fetch('/api/composite/logs?limit=5000');
+        const data = await response.json();
+        setLogs(data);
+      } catch (error) {
+        console.error('Failed to load logs:', error);
+      }
+    };
 
-  useEffect(() => {
     loadLogs();
 
     const wsUrl = import.meta.env.DEV
@@ -106,8 +102,12 @@ function CompositeLogs() {
   };
 
   const filteredLogs = logs.filter((log) => {
-    if (logType !== 'all' && log.type !== logType) return false;
-    if (filter && !log.line.toLowerCase().includes(filter.toLowerCase())) return false;
+    if (logType !== 'all' && log.type !== logType) {
+      return false;
+    }
+    if (filter && !log.line.toLowerCase().includes(filter.toLowerCase())) {
+      return false;
+    }
     return true;
   });
 

package/ui/src/CompositeSetup.jsx

@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react';
-import { colors } from './theme';
-import SetupHeader from './components/SetupHeader';
-import ConfigFileSection from './components/ConfigFileSection';
-import WhatThisDoesSection from './components/WhatThisDoesSection';
-import ServerControl from './components/ServerControl';
-import MessageDisplay from './components/MessageDisplay';
+import { useEffect, useState } from 'react';
 import BackupList from './components/BackupList';
+import ConfigFileSection from './components/ConfigFileSection';
 import ConfigViewerModal from './components/ConfigViewerModal';
-import { useServiceExtraction } from './hooks/useServiceExtraction';
+import MessageDisplay from './components/MessageDisplay';
+import ServerControl from './components/ServerControl';
+import SetupHeader from './components/SetupHeader';
+import WhatThisDoesSection from './components/WhatThisDoesSection';
 import { useConfigManagement } from './hooks/useConfigManagement';
+import { useServiceExtraction } from './hooks/useServiceExtraction';
+import { colors } from './theme';
 
 function CompositeSetup() {
   const [fileContent, setFileContent] = useState('');
@@ -181,7 +181,7 @@ function CompositeSetup() {
       if (res.ok) {
         const msg = data.message || 'MCP Shark server stopped';
         setMessage(
-          data.message && data.message.includes('restored')
+          data.message?.includes('restored')
             ? 'MCP Shark server stopped and original config file restored'
             : msg
         );

package/ui/src/HelpGuide/HelpGuideFooter.jsx

@@ -32,6 +32,7 @@ export default function HelpGuideFooter({ dontShowAgain, setDontShowAgain, onClo
         Don't show this again
       </label>
       <button
+        type="button"
         onClick={onClose}
         style={{
           background: colors.buttonPrimary,

package/ui/src/HelpGuide/HelpGuideHeader.jsx

@@ -1,5 +1,5 @@
-import { colors, fonts } from '../theme';
 import { IconHelp, IconX } from '@tabler/icons-react';
+import { colors, fonts } from '../theme';
 
 export default function HelpGuideHeader({ onClose }) {
   return (
@@ -29,6 +29,7 @@ export default function HelpGuideHeader({ onClose }) {
         </h2>
       </div>
       <button
+        type="button"
         onClick={onClose}
         style={{
           background: 'transparent',

package/ui/src/HelpGuide.jsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import { colors } from './theme';
-import HelpGuideHeader from './HelpGuide/HelpGuideHeader';
 import HelpGuideContent from './HelpGuide/HelpGuideContent';
 import HelpGuideFooter from './HelpGuide/HelpGuideFooter';
+import HelpGuideHeader from './HelpGuide/HelpGuideHeader';
+import { colors } from './theme';
 
 function HelpGuide({ onClose }) {
   const [dontShowAgain, setDontShowAgain] = useState(false);
@@ -19,7 +19,9 @@ function HelpGuide({ onClose }) {
   };
 
   return (
-    <div
+    <dialog
+      open
+      aria-modal="true"
       style={{
         position: 'fixed',
         top: 0,
@@ -32,10 +34,20 @@ function HelpGuide({ onClose }) {
         alignItems: 'center',
         justifyContent: 'center',
         padding: '20px',
+        border: 'none',
+        margin: 0,
+        width: '100%',
+        height: '100%',
       }}
       onClick={handleClose}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          handleClose();
+        }
+      }}
     >
       <div
+        role="document"
         style={{
           background: colors.bgCard,
           border: `1px solid ${colors.borderLight}`,
@@ -47,6 +59,7 @@ function HelpGuide({ onClose }) {
           boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
         }}
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
       >
         <HelpGuideHeader onClose={handleClose} />
         <div style={{ padding: '24px' }}>
@@ -58,7 +71,7 @@ function HelpGuide({ onClose }) {
           />
         </div>
       </div>
-    </div>
+    </dialog>
   );
 }
 

package/ui/src/IntroTour.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import TourOverlay from './components/TourOverlay';
 import TourTooltip from './components/TourTooltip';
 
@@ -9,7 +9,9 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
   const overlayRef = useRef(null);
 
   useEffect(() => {
-    if (!highlightedElement) return;
+    if (!highlightedElement) {
+      return;
+    }
 
     const updatePosition = () => {
       if (highlightedElement) {
@@ -31,10 +33,14 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
   }, [highlightedElement]);
 
   useEffect(() => {
-    if (steps.length === 0) return;
+    if (steps.length === 0) {
+      return;
+    }
 
     const step = steps[currentStep];
-    if (!step) return;
+    if (!step) {
+      return;
+    }
 
     if (onStepChange) {
       onStepChange(currentStep);
@@ -95,7 +101,9 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
 
   const handleSkip = () => {
     handleComplete();
-    if (onSkip) onSkip();
+    if (onSkip) {
+      onSkip();
+    }
   };
 
   if (steps.length === 0 || currentStep >= steps.length) {
@@ -108,6 +116,7 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
     <>
       <div
         ref={overlayRef}
+        role="presentation"
         style={{
           position: 'fixed',
           top: 0,
@@ -118,6 +127,11 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
           pointerEvents: 'auto',
         }}
         onClick={handleSkip}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            handleSkip();
+          }
+        }}
       >
         <TourOverlay elementRect={elementRect} />
       </div>

package/ui/src/LogDetail.jsx

@@ -16,6 +16,7 @@ function LogDetail({ log, onClose }) {
       >
         <h3 style={{ fontSize: '14px', fontWeight: 'normal' }}>Details</h3>
         <button
+          type="button"
           onClick={onClose}
           style={{
             background: 'none',

package/ui/src/LogTable.jsx

@@ -1,10 +1,16 @@
-import { colors, fonts, withOpacity } from './theme';
+import { colors, fonts } from './theme';
 
 function LogTable({ logs, selected, onSelect }) {
   const getStatusColor = (status) => {
-    if (status === 'error') return colors.error;
-    if (status === 'success') return colors.success;
-    if (status === 'pending') return colors.warning;
+    if (status === 'error') {
+      return colors.error;
+    }
+    if (status === 'success') {
+      return colors.success;
+    }
+    if (status === 'pending') {
+      return colors.warning;
+    }
     return colors.textTertiary;
   };
 
@@ -144,6 +150,14 @@ function LogTable({ logs, selected, onSelect }) {
             <tr
               key={log.id}
               onClick={() => onSelect(log)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onSelect(log);
+                }
+              }}
+              tabIndex={0}
+              aria-label={`Select log entry ${log.id}`}
               style={{
                 cursor: 'pointer',
                 background: selected?.id === log.id ? colors.bgSelected : colors.bgCard,
@@ -151,10 +165,14 @@ function LogTable({ logs, selected, onSelect }) {
                 transition: 'background-color 0.15s ease',
               }}
               onMouseEnter={(e) => {
-                if (selected?.id !== log.id) e.currentTarget.style.background = colors.bgHover;
+                if (selected?.id !== log.id) {
+                  e.currentTarget.style.background = colors.bgHover;
+                }
               }}
               onMouseLeave={(e) => {
-                if (selected?.id !== log.id) e.currentTarget.style.background = colors.bgCard;
+                if (selected?.id !== log.id) {
+                  e.currentTarget.style.background = colors.bgCard;
+                }
               }}
             >
               <td

package/ui/src/PacketDetail.jsx

@@ -1,12 +1,12 @@
-import { useState, useEffect, useRef } from 'react';
-import { colors, fonts } from './theme';
-import PacketDetailHeader from './components/PacketDetailHeader';
-import TabNavigation from './components/TabNavigation';
+import { useEffect, useRef, useState } from 'react';
 import DetailsTab from './components/DetailsTab';
 import HexTab from './components/HexTab';
+import PacketDetailHeader from './components/PacketDetailHeader';
 import RawTab from './components/RawTab';
-import { generateHexDump, createFullRequestText } from './utils/hexUtils.js';
+import TabNavigation from './components/TabNavigation';
+import { colors } from './theme';
 import { fadeIn } from './utils/animations';
+import { createFullRequestText, generateHexDump } from './utils/hexUtils.js';
 
 function RequestDetail({ request, onClose, requests = [] }) {
   const [activeTab, setActiveTab] = useState('details');
@@ -20,7 +20,9 @@ function RequestDetail({ request, onClose, requests = [] }) {
     }
   }, [activeTab]);
 
-  if (!request) return null;
+  if (!request) {
+    return null;
+  }
 
   // Helper function to extract JSON-RPC method
   const getJsonRpcMethod = (req) => {
@@ -38,7 +40,7 @@ function RequestDetail({ request, onClose, requests = [] }) {
           if (body && typeof body === 'object' && body.method) {
             return body.method;
           }
-        } catch (e) {
+        } catch (_e) {
           // Failed to parse
         }
       }
@@ -48,7 +50,7 @@ function RequestDetail({ request, onClose, requests = [] }) {
           if (body && typeof body === 'object' && body.method) {
             return body.method;
           }
-        } catch (e) {
+        } catch (_e) {
           // Failed to parse
         }
       }
@@ -61,7 +63,9 @@ function RequestDetail({ request, onClose, requests = [] }) {
   const findMatchingPair = () => {
     const matches = (req, resp) => {
       // Session ID must match
-      if (req.session_id !== resp.session_id) return false;
+      if (req.session_id !== resp.session_id) {
+        return false;
+      }
 
       // JSON-RPC Method must match
       const reqMethod = getJsonRpcMethod(req);
@@ -78,7 +82,9 @@ function RequestDetail({ request, onClose, requests = [] }) {
         return false;
       }
 
-      if (reqMethod !== respMethod) return false;
+      if (reqMethod !== respMethod) {
+        return false;
+      }
 
       // If JSON-RPC ID exists, it must match
       if (req.jsonrpc_id && resp.jsonrpc_id) {
@@ -94,13 +100,12 @@ function RequestDetail({ request, onClose, requests = [] }) {
         (r) =>
           r.direction === 'response' && matches(request, r) && r.frame_number > request.frame_number
       );
-    } else {
-      // Find the corresponding request
-      return requests.find(
-        (r) =>
-          r.direction === 'request' && matches(r, request) && r.frame_number < request.frame_number
-      );
     }
+    // Find the corresponding request
+    return requests.find(
+      (r) =>
+        r.direction === 'request' && matches(r, request) && r.frame_number < request.frame_number
+    );
   };
 
   const matchingPair = findMatchingPair();

package/ui/src/PacketFilters.jsx

@@ -1,13 +1,13 @@
+import { IconSearch, IconTrash } from '@tabler/icons-react';
+import anime from 'animejs';
 import { useEffect, useRef, useState } from 'react';
+import ConfirmationModal from './components/ConfirmationModal';
+import ExportControls from './components/PacketFilters/ExportControls';
+import FilterInput from './components/PacketFilters/FilterInput';
 import { colors, fonts } from './theme';
 import { fadeIn } from './utils/animations';
-import FilterInput from './components/PacketFilters/FilterInput';
-import ExportControls from './components/PacketFilters/ExportControls';
-import ConfirmationModal from './components/ConfirmationModal';
-import { IconTrash, IconSearch } from '@tabler/icons-react';
-import anime from 'animejs';
 
-function RequestFilters({ filters, onFilterChange, stats, onExport, onClear }) {
+function RequestFilters({ filters, onFilterChange, stats, onClear }) {
   const filtersRef = useRef(null);
   const [showClearModal, setShowClearModal] = useState(false);
 
@@ -20,13 +20,27 @@ function RequestFilters({ filters, onFilterChange, stats, onExport, onClear }) {
   const handleExport = async (format = 'json') => {
     try {
       const queryParams = new URLSearchParams();
-      if (filters.search) queryParams.append('search', filters.search);
-      if (filters.serverName) queryParams.append('serverName', filters.serverName);
-      if (filters.sessionId) queryParams.append('sessionId', filters.sessionId);
-      if (filters.method) queryParams.append('method', filters.method);
-      if (filters.jsonrpcMethod) queryParams.append('jsonrpcMethod', filters.jsonrpcMethod);
-      if (filters.statusCode) queryParams.append('statusCode', filters.statusCode);
-      if (filters.jsonrpcId) queryParams.append('jsonrpcId', filters.jsonrpcId);
+      if (filters.search) {
+        queryParams.append('search', filters.search);
+      }
+      if (filters.serverName) {
+        queryParams.append('serverName', filters.serverName);
+      }
+      if (filters.sessionId) {
+        queryParams.append('sessionId', filters.sessionId);
+      }
+      if (filters.method) {
+        queryParams.append('method', filters.method);
+      }
+      if (filters.jsonrpcMethod) {
+        queryParams.append('jsonrpcMethod', filters.jsonrpcMethod);
+      }
+      if (filters.statusCode) {
+        queryParams.append('statusCode', filters.statusCode);
+      }
+      if (filters.jsonrpcId) {
+        queryParams.append('jsonrpcId', filters.jsonrpcId);
+      }
       queryParams.append('format', format);
 
       const response = await fetch(`/api/requests/export?${queryParams}`);
@@ -127,7 +141,7 @@ function RequestFilters({ filters, onFilterChange, stats, onExport, onClear }) {
         onChange={(e) =>
           onFilterChange({
             ...filters,
-            statusCode: e.target.value ? parseInt(e.target.value) : null,
+            statusCode: e.target.value ? Number.parseInt(e.target.value) : null,
           })
         }
         style={{ width: '120px' }}
@@ -144,6 +158,7 @@ function RequestFilters({ filters, onFilterChange, stats, onExport, onClear }) {
       <ExportControls stats={stats} onExport={handleExport} />
 
       <button
+        type="button"
         onClick={() => setShowClearModal(true)}
         style={{
           padding: '8px 14px',

package/ui/src/PacketList.jsx

@@ -1,13 +1,12 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { colors, fonts } from './theme';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import GroupedByMcpView from './components/GroupedByMcpView';
 import RequestRow from './components/RequestRow';
 import TableHeader from './components/TableHeader';
 import ViewModeTabs from './components/ViewModeTabs';
-import GroupedByMcpView from './components/GroupedByMcpView';
+import { colors, fonts } from './theme';
+import { staggerIn } from './utils/animations';
 import { groupByMcpSessionAndCategory } from './utils/mcpGroupingUtils.js';
 import { pairRequestsWithResponses } from './utils/requestUtils.js';
-import { staggerIn } from './utils/animations';
-import anime from 'animejs';
 
 function RequestList({ requests, selected, onSelect, firstRequestTime }) {
   const [viewMode, setViewMode] = useState('general');

package/ui/src/SmartScan.jsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import { colors } from './theme';
-import SmartScanHeader from './components/SmartScan/SmartScanHeader';
+import ListViewContent from './components/SmartScan/ListViewContent';
+import ScanViewContent from './components/SmartScan/ScanViewContent';
 import SmartScanControls from './components/SmartScan/SmartScanControls';
+import SmartScanHeader from './components/SmartScan/SmartScanHeader';
 import ViewModeTabs from './components/SmartScan/ViewModeTabs';
-import ScanViewContent from './components/SmartScan/ScanViewContent';
-import ListViewContent from './components/SmartScan/ListViewContent';
 import { useSmartScan } from './components/SmartScan/useSmartScan';
+import { colors } from './theme';
 
 function SmartScan() {
   const [viewMode, setViewMode] = useState('scan'); // 'scan' or 'list'
@@ -151,7 +151,7 @@ function SmartScan() {
               const serverName =
                 matchingScan?.serverName || scanData.serverName || 'Unknown Server';
 
-              if (scanData && scanData.data && typeof scanData.data === 'object') {
+              if (scanData?.data && typeof scanData.data === 'object') {
                 const actualScan = scanData.data;
                 setSelectedScan({
                   ...actualScan,

package/ui/src/TabNavigation.jsx

@@ -1,15 +1,15 @@
 import { useEffect, useRef, useState } from 'react';
-import { colors, fonts } from './theme';
 import { SharkLogo } from './components/SharkLogo';
+import DesktopTabs from './components/TabNavigation/DesktopTabs';
+import MobileDropdown from './components/TabNavigation/MobileDropdown';
 import {
-  NetworkIcon,
   LogsIcon,
-  SettingsIcon,
+  NetworkIcon,
   PlaygroundIcon,
+  SettingsIcon,
   ShieldIcon,
 } from './components/TabNavigationIcons';
-import MobileDropdown from './components/TabNavigation/MobileDropdown';
-import DesktopTabs from './components/TabNavigation/DesktopTabs';
+import { colors, fonts } from './theme';
 
 function TabNavigation({ activeTab, onTabChange }) {
   const tabs = [

package/ui/src/components/App/HelpButton.jsx

@@ -10,7 +10,10 @@ const TourIcon = ({ size = 16, color = 'currentColor' }) => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    role="img"
+    aria-label="Tour icon"
   >
+    <title>Tour icon</title>
     <path d="M12 2L2 7l10 5 10-5-10-5z" />
     <path d="M2 17l10 5 10-5" />
     <path d="M2 12l10 5 10-5" />
@@ -20,6 +23,7 @@ const TourIcon = ({ size = 16, color = 'currentColor' }) => (
 export default function HelpButton({ onClick }) {
   return (
     <button
+      type="button"
       onClick={onClick}
       data-tour="help-button"
       style={{

package/ui/src/components/App/TrafficTab.jsx

@@ -1,9 +1,9 @@
-import { useRef, useEffect } from 'react';
-import { colors } from '../../theme';
-import { slideInRight } from '../../utils/animations';
-import RequestList from '../../PacketList';
+import { useEffect, useRef } from 'react';
 import RequestDetail from '../../PacketDetail';
 import RequestFilters from '../../PacketFilters';
+import RequestList from '../../PacketList';
+import { colors } from '../../theme';
+import { slideInRight } from '../../utils/animations';
 
 export default function TrafficTab({
   requests,