@mcp-shark/mcp-shark 1.4.1 → 1.5.0

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

package/ui/src/components/ConfirmationModal.jsx

@@ -10,10 +10,14 @@ function ConfirmationModal({
   cancelText = 'Cancel',
   danger = false,
 }) {
-  if (!isOpen) return null;
+  if (!isOpen) {
+    return null;
+  }
 
   return (
-    <div
+    <dialog
+      open
+      aria-modal="true"
       style={{
         position: 'fixed',
         top: 0,
@@ -25,10 +29,20 @@ function ConfirmationModal({
         alignItems: 'center',
         justifyContent: 'center',
         zIndex: 1000,
+        border: 'none',
+        margin: 0,
+        width: '100%',
+        height: '100%',
       }}
       onClick={onClose}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      }}
     >
       <div
+        role="document"
         style={{
           background: colors.bgCard,
           borderRadius: '12px',
@@ -39,6 +53,7 @@ function ConfirmationModal({
           fontFamily: fonts.body,
         }}
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
       >
         <h3
           style={{
@@ -68,6 +83,7 @@ function ConfirmationModal({
           }}
         >
           <button
+            type="button"
             onClick={onClose}
             style={{
               padding: '10px 20px',
@@ -91,6 +107,7 @@ function ConfirmationModal({
             {cancelText}
           </button>
           <button
+            type="button"
             onClick={() => {
               onConfirm();
               onClose();
@@ -122,7 +139,7 @@ function ConfirmationModal({
           </button>
         </div>
       </div>
-    </div>
+    </dialog>
   );
 }
 

package/ui/src/components/DetailsTab/BodySection.jsx

@@ -2,7 +2,9 @@ import { colors, fonts } from '../../theme';
 import CollapsibleSection from '../CollapsibleSection';
 
 export default function BodySection({ body, title, titleColor }) {
-  if (!body) return null;
+  if (!body) {
+    return null;
+  }
 
   return (
     <CollapsibleSection title={title || 'Body'} titleColor={titleColor}>

package/ui/src/components/DetailsTab/CollapsibleRequestResponse.jsx

@@ -1,6 +1,6 @@
+import { IconChevronDown } from '@tabler/icons-react';
 import { useState } from 'react';
 import { colors, fonts } from '../../theme';
-import { IconChevronDown } from '@tabler/icons-react';
 
 export default function CollapsibleRequestResponse({
   title,
@@ -20,8 +20,16 @@ export default function CollapsibleRequestResponse({
         marginBottom: '20px',
       }}
     >
-      <div
+      <button
+        type="button"
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
+        aria-label={`Toggle ${title} section`}
         style={{
           padding: '16px 20px',
           background: isExpanded ? colors.bgCard : colors.bgSecondary,
@@ -32,6 +40,9 @@ export default function CollapsibleRequestResponse({
           alignItems: 'center',
           justifyContent: 'space-between',
           transition: 'background-color 0.15s ease',
+          width: '100%',
+          border: 'none',
+          textAlign: 'left',
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.background = colors.bgHover;
@@ -63,7 +74,7 @@ export default function CollapsibleRequestResponse({
           />
           {title}
         </div>
-      </div>
+      </button>
       {isExpanded && <div style={{ padding: '20px' }}>{children}</div>}
     </div>
   );

package/ui/src/components/DetailsTab/InfoSection.jsx

@@ -1,9 +1,11 @@
 import { colors, fonts } from '../../theme';
-import CollapsibleSection from '../CollapsibleSection';
 import { getInfo } from '../../utils/requestUtils';
+import CollapsibleSection from '../CollapsibleSection';
 
 export default function InfoSection({ data, titleColor }) {
-  if (!data) return null;
+  if (!data) {
+    return null;
+  }
 
   const info = getInfo(data);
 

package/ui/src/components/DetailsTab/RequestDetailsSection.jsx

@@ -1,14 +1,16 @@
 import { colors } from '../../theme';
+import CollapsibleSection from '../CollapsibleSection';
+import BodySection from './BodySection';
 import CollapsibleRequestResponse from './CollapsibleRequestResponse';
-import NetworkInfoSection from './NetworkInfoSection';
-import ProtocolInfoSection from './ProtocolInfoSection';
 import HeadersSection from './HeadersSection';
-import BodySection from './BodySection';
 import InfoSection from './InfoSection';
-import CollapsibleSection from '../CollapsibleSection';
+import NetworkInfoSection from './NetworkInfoSection';
+import ProtocolInfoSection from './ProtocolInfoSection';
 
 export default function RequestDetailsSection({ request, requestHeaders, requestBody }) {
-  if (!request) return null;
+  if (!request) {
+    return null;
+  }
 
   return (
     <CollapsibleRequestResponse

package/ui/src/components/DetailsTab/ResponseDetailsSection.jsx

@@ -1,14 +1,16 @@
 import { colors, fonts } from '../../theme';
+import CollapsibleSection from '../CollapsibleSection';
+import BodySection from './BodySection';
 import CollapsibleRequestResponse from './CollapsibleRequestResponse';
-import NetworkInfoSection from './NetworkInfoSection';
-import ProtocolInfoSection from './ProtocolInfoSection';
 import HeadersSection from './HeadersSection';
-import BodySection from './BodySection';
 import InfoSection from './InfoSection';
-import CollapsibleSection from '../CollapsibleSection';
+import NetworkInfoSection from './NetworkInfoSection';
+import ProtocolInfoSection from './ProtocolInfoSection';
 
 export default function ResponseDetailsSection({ response, responseHeaders, responseBody }) {
-  if (!response) return null;
+  if (!response) {
+    return null;
+  }
 
   return (
     <CollapsibleRequestResponse

package/ui/src/components/DetectedPathsList.jsx

@@ -1,5 +1,5 @@
+import { IconClock, IconCode, IconEye, IconRefresh } from '@tabler/icons-react';
 import { colors, fonts } from '../theme';
-import { IconRefresh, IconEye, IconCode, IconClock } from '@tabler/icons-react';
 
 function DetectedPathsList({ detectedPaths, detecting, onDetect, onSelect, onView }) {
   if (detectedPaths.length === 0) {
@@ -27,6 +27,7 @@ function DetectedPathsList({ detectedPaths, detecting, onDetect, onSelect, onVie
           Detected Configuration Files:
         </div>
         <button
+          type="button"
           onClick={onDetect}
           disabled={detecting}
           title="Refresh detection"
@@ -67,7 +68,8 @@ function DetectedPathsList({ detectedPaths, detecting, onDetect, onSelect, onVie
       >
         {detectedPaths.map((item, idx) => (
           <button
-            key={idx}
+            key={`${item.editor}-${item.path}-${idx}`}
+            type="button"
             data-tour={idx === 0 ? 'first-detected-editor' : undefined}
             onClick={() => onSelect(item.path)}
             onDoubleClick={() => {
@@ -137,6 +139,7 @@ function DetectedPathsList({ detectedPaths, detecting, onDetect, onSelect, onVie
                     Found
                   </span>
                   <button
+                    type="button"
                     onClick={(e) => {
                       e.stopPropagation();
                       onView(item.path);

package/ui/src/components/FileInput.jsx

@@ -1,5 +1,5 @@
-import { colors, fonts } from '../theme';
 import { IconFileUpload } from '@tabler/icons-react';
+import { colors, fonts } from '../theme';
 
 function FileInput({
   filePath,
@@ -70,6 +70,7 @@ function FileInput({
       {fileContent && !filePath && (
         <div>
           <label
+            htmlFor="update-path-input"
             style={{
               display: 'block',
               fontSize: '12px',
@@ -80,6 +81,7 @@ function FileInput({
             Optional: File Path to Update
           </label>
           <input
+            id="update-path-input"
             type="text"
             placeholder="Enter file path to update (e.g., ~/.cursor/mcp.json)"
             value={updatePath}

package/ui/src/components/GroupHeader.jsx

@@ -11,7 +11,10 @@ const ChevronDown = ({ size = 12, color = 'currentColor' }) => (
     strokeLinecap="round"
     strokeLinejoin="round"
     style={{ display: 'inline-block', verticalAlign: 'middle' }}
+    role="img"
+    aria-label="Chevron down icon"
   >
+    <title>Chevron down icon</title>
     <polyline points="6 9 12 15 18 9" />
   </svg>
 );
@@ -27,7 +30,10 @@ const ChevronRight = ({ size = 12, color = 'currentColor' }) => (
     strokeLinecap="round"
     strokeLinejoin="round"
     style={{ display: 'inline-block', verticalAlign: 'middle' }}
+    role="img"
+    aria-label="Chevron right icon"
   >
+    <title>Chevron right icon</title>
     <polyline points="9 18 15 12 9 6" />
   </svg>
 );
@@ -36,6 +42,14 @@ export default function GroupHeader({ children, onClick, isExpanded, indent = 0
   return (
     <tr
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+      tabIndex={0}
+      aria-label={`Toggle group ${children}`}
       style={{
         cursor: 'pointer',
         background: colors.bgSecondary,

package/ui/src/components/GroupedByMcpView.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { colors, fonts } from '../theme';
-import RequestRow from './RequestRow';
+import { colors } from '../theme';
+import { getCategoryIconComponent } from '../utils/mcpGroupingUtils';
 import GroupHeader from './GroupHeader';
-import { getCategoryIconComponent, getMethodDescription } from '../utils/mcpGroupingUtils';
-import { getJsonRpcMethod } from '../utils/requestUtils';
+import RequestRow from './RequestRow';
 
 function GroupedByMcpView({
   groupedData,
@@ -15,12 +14,6 @@ function GroupedByMcpView({
   onToggleSession,
   onToggleCategory,
 }) {
-  const getJsonRpcMethodFromPair = (pair) => {
-    const request = pair.request || pair.response;
-    if (!request) return null;
-    return getJsonRpcMethod(request);
-  };
-
   return (
     <tbody>
       {groupedData.map((sessionGroup) => {

package/ui/src/components/GroupedByServerView.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { colors, fonts } from '../theme';
-import RequestRow from './RequestRow';
 import GroupHeader from './GroupHeader';
+import RequestRow from './RequestRow';
 
 export default function GroupedByServerView({
   groupedData,