@mcp-shark/mcp-shark 1.4.2 → 1.5.0

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,

package/ui/src/components/App/useAppState.js

@@ -1,4 +1,28 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+function appendFilterParams(queryParams, filters) {
+  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);
+  }
+}
 
 export function useAppState() {
   const [activeTab, setActiveTab] = useState('traffic');
@@ -11,17 +35,12 @@ export function useAppState() {
   const [tourDismissed, setTourDismissed] = useState(true);
   const wsRef = useRef(null);
   const prevTabRef = useRef(activeTab);
+  const filtersRef = useRef(filters);
 
   const loadStatistics = async () => {
     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);
+      appendFilterParams(queryParams, filters);
 
       const statsResponse = await fetch(`/api/statistics?${queryParams}`);
       const statsData = await statsResponse.json();
@@ -34,13 +53,7 @@ export function useAppState() {
   const loadRequests = async () => {
     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);
+      appendFilterParams(queryParams, filters);
       queryParams.append('limit', '5000');
 
       const response = await fetch(`/api/requests?${queryParams}`);
@@ -81,8 +94,37 @@ export function useAppState() {
       }
     };
 
+    const initData = async () => {
+      try {
+        const queryParams = new URLSearchParams();
+        appendFilterParams(queryParams, filters);
+        queryParams.append('limit', '5000');
+
+        const response = await fetch(`/api/requests?${queryParams}`);
+        const data = await response.json();
+        setRequests(data);
+
+        if (data.length > 0) {
+          const oldest = data[data.length - 1]?.timestamp_iso;
+          if (oldest) {
+            setFirstRequestTime(oldest);
+          }
+        }
+
+        // Also load statistics
+        const statsQueryParams = new URLSearchParams();
+        appendFilterParams(statsQueryParams, filters);
+
+        const statsResponse = await fetch(`/api/statistics?${statsQueryParams}`);
+        const statsData = await statsResponse.json();
+        setStats(statsData);
+      } catch (error) {
+        console.error('Failed to load requests:', error);
+      }
+    };
+
     checkTourState();
-    loadRequests();
+    initData();
 
     const wsUrl = import.meta.env.DEV
       ? 'ws://localhost:9853'
@@ -92,7 +134,7 @@ export function useAppState() {
       const ws = new WebSocket(wsUrl);
       wsRef.current = ws;
 
-      ws.onmessage = (e) => {
+      ws.onmessage = async (e) => {
         const msg = JSON.parse(e.data);
         if (msg.type === 'update') {
           setRequests(msg.data);
@@ -103,7 +145,16 @@ export function useAppState() {
             }
           }
           // Update statistics when new data arrives via WebSocket
-          loadStatistics();
+          try {
+            const queryParams = new URLSearchParams();
+            appendFilterParams(queryParams, filters);
+
+            const statsResponse = await fetch(`/api/statistics?${queryParams}`);
+            const statsData = await statsResponse.json();
+            setStats(statsData);
+          } catch (error) {
+            console.error('Failed to load statistics:', error);
+          }
         }
       };
 
@@ -114,7 +165,7 @@ export function useAppState() {
       ws.onclose = () => {
         // Connection closed - will attempt to reconnect on next mount if needed
       };
-    } catch (err) {
+    } catch (_err) {
       // Silently handle WebSocket creation errors
     }
 
@@ -123,10 +174,44 @@ export function useAppState() {
         wsRef.current.close();
       }
     };
-  }, []);
+  }, [filters]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const queryParams = new URLSearchParams();
+        appendFilterParams(queryParams, filters);
+        queryParams.append('limit', '5000');
+
+        const response = await fetch(`/api/requests?${queryParams}`);
+        const data = await response.json();
+        setRequests(data);
+
+        if (data.length > 0) {
+          const oldest = data[data.length - 1]?.timestamp_iso;
+          if (oldest) {
+            setFirstRequestTime(oldest);
+          }
+        }
+
+        // Also load statistics
+        const statsQueryParams = new URLSearchParams();
+        appendFilterParams(statsQueryParams, filters);
+
+        const statsResponse = await fetch(`/api/statistics?${statsQueryParams}`);
+        const statsData = await statsResponse.json();
+        setStats(statsData);
+      } catch (error) {
+        console.error('Failed to load requests:', error);
+      }
+    };
+
+    fetchData();
+  }, [filters]);
 
+  // Keep filters ref up to date
   useEffect(() => {
-    loadRequests();
+    filtersRef.current = filters;
   }, [filters]);
 
   // Periodically update statistics when on traffic tab
@@ -136,12 +221,21 @@ export function useAppState() {
     }
 
     // Update statistics every 2 seconds
-    const interval = setInterval(() => {
-      loadStatistics();
+    const interval = setInterval(async () => {
+      try {
+        const queryParams = new URLSearchParams();
+        appendFilterParams(queryParams, filtersRef.current);
+
+        const statsResponse = await fetch(`/api/statistics?${queryParams}`);
+        const statsData = await statsResponse.json();
+        setStats(statsData);
+      } catch (error) {
+        console.error('Failed to load statistics:', error);
+      }
     }, 2000);
 
     return () => clearInterval(interval);
-  }, [activeTab, filters]);
+  }, [activeTab]);
 
   return {
     activeTab,

package/ui/src/components/BackupList.jsx

@@ -1,5 +1,5 @@
+import { IconEye, IconRefresh, IconRestore, IconTrash } from '@tabler/icons-react';
 import { colors, fonts, withOpacity } from '../theme';
-import { IconRefresh, IconEye, IconTrash, IconRestore } from '@tabler/icons-react';
 
 function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onDelete }) {
   if (backups.length === 0) {
@@ -36,6 +36,7 @@ function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onD
           Backup Files
         </h3>
         <button
+          type="button"
           onClick={onRefresh}
           disabled={loadingBackups}
           style={{
@@ -68,7 +69,7 @@ function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onD
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
         {backups.map((backup, idx) => (
           <div
-            key={idx}
+            key={backup.backupPath || `backup-${idx}`}
             style={{
               padding: '12px',
               background: colors.bgPrimary,
@@ -97,6 +98,7 @@ function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onD
             </div>
             <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
               <button
+                type="button"
                 onClick={() => onView(backup.backupPath)}
                 style={{
                   padding: '6px 12px',
@@ -122,6 +124,7 @@ function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onD
                 View
               </button>
               <button
+                type="button"
                 onClick={() => {
                   if (confirm('Are you sure you want to delete this backup?')) {
                     onDelete(backup.backupPath);
@@ -155,6 +158,7 @@ function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onD
                 Delete
               </button>
               <button
+                type="button"
                 onClick={() => onRestore(backup.backupPath, backup.originalPath)}
                 style={{
                   padding: '6px 12px',

package/ui/src/components/CollapsibleSection.jsx

@@ -12,7 +12,10 @@ const ChevronDown = ({ size = 12, color = 'currentColor' }) => (
     strokeLinecap="round"
     strokeLinejoin="round"
     style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: '4px' }}
+    role="img"
+    aria-label="Chevron icon"
   >
+    <title>Chevron icon</title>
     <polyline points="6 9 12 15 18 9" />
   </svg>
 );
@@ -27,7 +30,8 @@ function CollapsibleSection({
 
   return (
     <div style={{ marginBottom: '16px' }}>
-      <div
+      <button
+        type="button"
         style={{
           color: titleColor,
           fontWeight: '600',
@@ -41,8 +45,18 @@ function CollapsibleSection({
           gap: '6px',
           padding: '4px 0',
           transition: 'color 0.15s ease',
+          background: 'transparent',
+          border: 'none',
+          textAlign: 'left',
+          width: '100%',
         }}
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
         onMouseEnter={(e) => {
           e.currentTarget.style.color =
             titleColor === colors.accentBlue ? colors.accentBlueHover : titleColor;
@@ -61,7 +75,7 @@ function CollapsibleSection({
           <ChevronDown size={12} color={titleColor} />
         </span>
         {title}
-      </div>
+      </button>
       {isExpanded && (
         <div
           style={{

package/ui/src/components/ConfigViewerModal.jsx

@@ -1,4 +1,4 @@
-import { colors, fonts } from '../theme';
+import { colors } from '../theme';
 
 function ConfigViewerModal({
   viewingConfig,
@@ -21,7 +21,9 @@ function ConfigViewerModal({
   const title = isViewingBackup ? 'Backup File' : 'MCP Configuration File';
 
   return (
-    <div
+    <dialog
+      open
+      aria-modal="true"
       style={{
         position: 'fixed',
         top: 0,
@@ -34,10 +36,20 @@ function ConfigViewerModal({
         justifyContent: 'center',
         zIndex: 1000,
         padding: '20px',
+        border: 'none',
+        margin: 0,
+        width: '100%',
+        height: '100%',
       }}
       onClick={onClose}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      }}
     >
       <div
+        role="document"
         style={{
           background: colors.bgPrimary,
           border: `1px solid ${colors.borderLight}`,
@@ -50,6 +62,7 @@ function ConfigViewerModal({
           overflow: 'hidden',
         }}
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
       >
         <div
           style={{
@@ -83,6 +96,7 @@ function ConfigViewerModal({
             )}
           </div>
           <button
+            type="button"
             onClick={onClose}
             style={{
               background: 'transparent',
@@ -134,7 +148,7 @@ function ConfigViewerModal({
           )}
         </div>
       </div>
-    </div>
+    </dialog>
   );
 }