@mcp-shark/mcp-shark 1.4.2 → 1.5.2

package/ui/src/components/McpPlayground/ToolsSection/ToolCallPanel.jsx

@@ -43,6 +43,7 @@ export default function ToolCallPanel({
       >
         <div>
           <label
+            htmlFor="tool-args-textarea"
             style={{
               display: 'block',
               fontSize: '12px',
@@ -54,6 +55,7 @@ export default function ToolCallPanel({
             Arguments (JSON)
           </label>
           <textarea
+            id="tool-args-textarea"
             value={toolArgs}
             onChange={(e) => onToolArgsChange(e.target.value)}
             style={{
@@ -71,6 +73,7 @@ export default function ToolCallPanel({
           />
         </div>
         <button
+          type="button"
           onClick={onCallTool}
           disabled={loading}
           style={{
@@ -91,6 +94,7 @@ export default function ToolCallPanel({
         {toolResult && (
           <div>
             <label
+              htmlFor="tool-result-pre"
               style={{
                 display: 'block',
                 fontSize: '12px',
@@ -102,6 +106,7 @@ export default function ToolCallPanel({
               Result
             </label>
             <pre
+              id="tool-result-pre"
               style={{
                 padding: '12px',
                 background: colors.bgSecondary,

package/ui/src/components/McpPlayground/ToolsSection/ToolItem.jsx

@@ -2,8 +2,10 @@ import { colors } from '../../../theme';
 
 export default function ToolItem({ tool, isSelected, onClick }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={onClick}
+      aria-label={`Select tool ${tool.name}`}
       style={{
         padding: '16px 20px',
         margin: '4px 8px',
@@ -14,6 +16,8 @@ export default function ToolItem({ tool, isSelected, onClick }) {
         boxShadow: isSelected ? `0 2px 4px ${colors.shadowSm}` : 'none',
         transition: 'all 0.2s ease',
         position: 'relative',
+        width: '100%',
+        textAlign: 'left',
       }}
       onMouseEnter={(e) => {
         if (!isSelected) {
@@ -68,6 +72,6 @@ export default function ToolItem({ tool, isSelected, onClick }) {
           )}
         </div>
       </div>
-    </div>
+    </button>
   );
 }

package/ui/src/components/McpPlayground/ToolsSection/ToolsList.jsx

@@ -1,7 +1,7 @@
 import { colors } from '../../../theme';
-import LoadingState from '../common/LoadingState';
-import ErrorState from '../common/ErrorState';
 import EmptyState from '../common/EmptyState';
+import ErrorState from '../common/ErrorState';
+import LoadingState from '../common/LoadingState';
 import ToolItem from './ToolItem';
 
 export default function ToolsList({
@@ -26,7 +26,7 @@ export default function ToolsList({
         <LoadingState message="Waiting for MCP server to start..." />
       ) : toolsLoading || !toolsLoaded ? (
         <LoadingState message="Loading tools..." />
-      ) : error && error.includes('tools:') ? (
+      ) : error?.includes('tools:') ? (
         <ErrorState message={`Error loading tools: ${error.replace('tools: ', '')}`} />
       ) : tools.length === 0 ? (
         <EmptyState message="No tools available." />
@@ -34,7 +34,7 @@ export default function ToolsList({
         <div style={{ padding: '8px 0' }}>
           {tools.map((tool, idx) => (
             <ToolItem
-              key={idx}
+              key={tool.name || `tool-${idx}`}
               tool={tool}
               isSelected={selectedTool?.name === tool.name}
               onClick={() => onSelectTool(tool)}

package/ui/src/components/McpPlayground/ToolsSection.jsx

@@ -1,6 +1,6 @@
 import { colors, fonts } from '../../theme';
-import ToolsList from './ToolsSection/ToolsList';
 import ToolCallPanel from './ToolsSection/ToolCallPanel';
+import ToolsList from './ToolsSection/ToolsList';
 
 export default function ToolsSection({
   tools,
@@ -33,6 +33,7 @@ export default function ToolsSection({
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
       <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
         <button
+          type="button"
           onClick={onRefresh}
           disabled={loading || toolsLoading}
           style={{

package/ui/src/components/McpPlayground/hooks/useMcpDataLoader.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export function useMcpDataLoader(makeMcpRequest, selectedServer, setError) {
   const [tools, setTools] = useState([]);
@@ -11,7 +11,7 @@ export function useMcpDataLoader(makeMcpRequest, selectedServer, setError) {
   const [promptsLoaded, setPromptsLoaded] = useState(false);
   const [resourcesLoaded, setResourcesLoaded] = useState(false);
 
-  const loadTools = async () => {
+  const loadTools = useCallback(async () => {
     if (!selectedServer) {
       setError('tools: No server selected');
       setToolsLoaded(true);
@@ -32,9 +32,9 @@ export function useMcpDataLoader(makeMcpRequest, selectedServer, setError) {
     } finally {
       setToolsLoading(false);
     }
-  };
+  }, [selectedServer, makeMcpRequest, setError]);
 
-  const loadPrompts = async () => {
+  const loadPrompts = useCallback(async () => {
     if (!selectedServer) {
       setError('prompts: No server selected');
       setPromptsLoaded(true);
@@ -55,9 +55,9 @@ export function useMcpDataLoader(makeMcpRequest, selectedServer, setError) {
     } finally {
       setPromptsLoading(false);
     }
-  };
+  }, [selectedServer, makeMcpRequest, setError]);
 
-  const loadResources = async () => {
+  const loadResources = useCallback(async () => {
     if (!selectedServer) {
       setError('resources: No server selected');
       setResourcesLoaded(true);
@@ -78,16 +78,16 @@ export function useMcpDataLoader(makeMcpRequest, selectedServer, setError) {
     } finally {
       setResourcesLoading(false);
     }
-  };
+  }, [selectedServer, makeMcpRequest, setError]);
 
-  const resetData = () => {
+  const resetData = useCallback(() => {
     setToolsLoaded(false);
     setPromptsLoaded(false);
     setResourcesLoaded(false);
     setTools([]);
     setPrompts([]);
     setResources([]);
-  };
+  }, []);
 
   return {
     tools,

package/ui/src/components/McpPlayground/hooks/useMcpRequest.js

@@ -1,9 +1,13 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 export function useMcpRequest(selectedServer) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [sessionId, setSessionId] = useState(null);
+  const sessionIdRef = useRef(sessionId);
+
+  // Keep ref in sync with state
+  sessionIdRef.current = sessionId;
 
   const makeMcpRequest = useCallback(
     async (method, params = {}) => {
@@ -16,8 +20,9 @@ export function useMcpRequest(selectedServer) {
 
       try {
         const headers = { 'Content-Type': 'application/json' };
-        if (sessionId) {
-          headers['Mcp-Session-Id'] = sessionId;
+        const currentSessionId = sessionIdRef.current;
+        if (currentSessionId) {
+          headers['Mcp-Session-Id'] = currentSessionId;
         }
 
         const response = await fetch('/api/playground/proxy', {
@@ -32,7 +37,7 @@ export function useMcpRequest(selectedServer) {
           response.headers.get('Mcp-Session-Id') ||
           response.headers.get('mcp-session-id') ||
           data._sessionId;
-        if (responseSessionId && responseSessionId !== sessionId) {
+        if (responseSessionId && responseSessionId !== currentSessionId) {
           setSessionId(responseSessionId);
         }
 
@@ -48,7 +53,7 @@ export function useMcpRequest(selectedServer) {
         setLoading(false);
       }
     },
-    [selectedServer, sessionId]
+    [selectedServer]
   );
 
   const resetSession = useCallback(() => {

package/ui/src/components/McpPlayground/hooks/useMcpServerStatus.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export function useMcpServerStatus() {
   const [serverStatus, setServerStatus] = useState(null);
@@ -6,52 +6,72 @@ export function useMcpServerStatus() {
   const [availableServers, setAvailableServers] = useState([]);
   const [selectedServer, setSelectedServer] = useState(null);
 
-  const checkServerStatus = async () => {
+  const checkServerStatus = useCallback(async () => {
     try {
       const res = await fetch('/api/composite/status');
       if (!res.ok) {
         throw new Error('Server not available');
       }
       const data = await res.json();
-      const wasRunning = serverStatus?.running;
-      setServerStatus(data);
-
-      if (!data.running) {
-        if (!showLoadingModal || wasRunning) {
-          setShowLoadingModal(true);
+      setServerStatus((prevStatus) => {
+        const wasRunning = prevStatus?.running;
+        if (!data.running) {
+          setShowLoadingModal((prevModal) => {
+            if (!prevModal || wasRunning) {
+              return true;
+            }
+            return prevModal;
+          });
+        } else {
+          setShowLoadingModal((prevModal) => {
+            if (prevModal) {
+              return false;
+            }
+            return prevModal;
+          });
         }
-      } else if (data.running && showLoadingModal) {
-        setShowLoadingModal(false);
-      }
-    } catch (err) {
+        return data;
+      });
+    } catch (_err) {
       setServerStatus({ running: false });
-      if (!showLoadingModal) {
-        setShowLoadingModal(true);
-      }
+      setShowLoadingModal((prevModal) => {
+        if (!prevModal) {
+          return true;
+        }
+        return prevModal;
+      });
     }
-  };
+  }, []);
 
-  const loadAvailableServers = async () => {
+  const loadAvailableServers = useCallback(async () => {
     try {
       const res = await fetch('/api/composite/servers');
       if (res.ok) {
         const data = await res.json();
         setAvailableServers(data.servers || []);
-        if (data.servers && data.servers.length > 0 && !selectedServer) {
-          setSelectedServer(data.servers[0]);
-        }
+        setSelectedServer((current) => {
+          if (!current && data.servers && data.servers.length > 0) {
+            return data.servers[0];
+          }
+          return current;
+        });
       }
     } catch (err) {
       console.error('Failed to load servers:', err);
     }
-  };
+  }, []);
 
+  // Load servers once on mount
   useEffect(() => {
-    checkServerStatus();
     loadAvailableServers();
+  }, [loadAvailableServers]);
+
+  // Poll server status every 2 seconds
+  useEffect(() => {
+    checkServerStatus();
     const interval = setInterval(checkServerStatus, 2000);
     return () => clearInterval(interval);
-  }, []);
+  }, [checkServerStatus]);
 
   useEffect(() => {
     if (availableServers.length > 0 && !selectedServer) {

package/ui/src/components/McpPlayground/useMcpPlayground.js

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useMcpDataLoader } from './hooks/useMcpDataLoader';
 import { useMcpRequest } from './hooks/useMcpRequest';
 import { useMcpServerStatus } from './hooks/useMcpServerStatus';
-import { useMcpDataLoader } from './hooks/useMcpDataLoader';
 
 export function useMcpPlayground() {
   const [activeSection, setActiveSection] = useState('tools');
@@ -35,7 +35,10 @@ export function useMcpPlayground() {
     resetData,
   } = useMcpDataLoader(makeMcpRequest, selectedServer, setError);
 
-  // Reset and reload data when server changes
+  const activeSectionRef = useRef(activeSection);
+  activeSectionRef.current = activeSection;
+
+  // Reset and reload data when server changes (not when section changes)
   useEffect(() => {
     if (!selectedServer || !serverStatus?.running) {
       return;
@@ -54,69 +57,84 @@ export function useMcpPlayground() {
     setError(null);
 
     const timer = setTimeout(() => {
-      if (activeSection === 'tools') {
+      const currentSection = activeSectionRef.current;
+      if (currentSection === 'tools') {
         loadTools();
-      } else if (activeSection === 'prompts') {
+      } else if (currentSection === 'prompts') {
         loadPrompts();
-      } else if (activeSection === 'resources') {
+      } else if (currentSection === 'resources') {
         loadResources();
       }
     }, 100);
 
     return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedServer, serverStatus?.running, activeSection]);
+  }, [
+    selectedServer,
+    serverStatus?.running,
+    resetData,
+    loadTools,
+    loadPrompts,
+    loadResources,
+    resetSession,
+    setError,
+  ]);
 
+  // Load data when section changes (only if not already loaded)
   useEffect(() => {
-    if (
-      serverStatus?.running &&
-      activeSection === 'tools' &&
-      tools.length === 0 &&
-      selectedServer
-    ) {
+    if (!serverStatus?.running || !selectedServer) {
+      return;
+    }
+
+    // Only load if we haven't loaded this section yet and we're not currently loading
+    if (activeSection === 'tools' && !toolsLoaded && !toolsLoading) {
       const timer = setTimeout(() => {
         loadTools();
-      }, 2000);
+      }, 100);
       return () => clearTimeout(timer);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [serverStatus?.running, selectedServer, activeSection, tools.length]);
-
-  useEffect(() => {
-    if (!serverStatus?.running || !selectedServer) return;
-
-    const timer = setTimeout(() => {
-      if (activeSection === 'tools' && !toolsLoaded && !toolsLoading) {
-        loadTools();
-      } else if (activeSection === 'prompts' && !promptsLoaded && !promptsLoading) {
+    if (activeSection === 'prompts' && !promptsLoaded && !promptsLoading) {
+      const timer = setTimeout(() => {
         loadPrompts();
-      } else if (activeSection === 'resources' && !resourcesLoaded && !resourcesLoading) {
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    if (activeSection === 'resources' && !resourcesLoaded && !resourcesLoading) {
+      const timer = setTimeout(() => {
         loadResources();
-      }
-    }, 100);
-
-    return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, 100);
+      return () => clearTimeout(timer);
+    }
   }, [
     activeSection,
     serverStatus?.running,
     selectedServer,
     toolsLoaded,
-    promptsLoaded,
-    resourcesLoaded,
     toolsLoading,
+    promptsLoaded,
     promptsLoading,
+    resourcesLoaded,
     resourcesLoading,
+    loadTools,
+    loadPrompts,
+    loadResources,
   ]);
 
   const handleCallTool = async () => {
-    if (!selectedTool) return;
+    if (!selectedTool) {
+      return;
+    }
 
     try {
-      let args = {};
-      try {
-        args = JSON.parse(toolArgs);
-      } catch (e) {
+      const parseArgs = (argsString) => {
+        try {
+          return JSON.parse(argsString);
+        } catch (_e) {
+          return null;
+        }
+      };
+
+      const args = parseArgs(toolArgs);
+      if (args === null) {
         setError('Invalid JSON in arguments');
         return;
       }
@@ -133,13 +151,21 @@ export function useMcpPlayground() {
   };
 
   const handleGetPrompt = async () => {
-    if (!selectedPrompt) return;
+    if (!selectedPrompt) {
+      return;
+    }
 
     try {
-      let args = {};
-      try {
-        args = JSON.parse(promptArgs);
-      } catch (e) {
+      const parseArgs = (argsString) => {
+        try {
+          return JSON.parse(argsString);
+        } catch (_e) {
+          return null;
+        }
+      };
+
+      const args = parseArgs(promptArgs);
+      if (args === null) {
         setError('Invalid JSON in arguments');
         return;
       }
@@ -156,7 +182,9 @@ export function useMcpPlayground() {
   };
 
   const handleReadResource = async () => {
-    if (!selectedResource) return;
+    if (!selectedResource) {
+      return;
+    }
 
     try {
       const result = await makeMcpRequest('resources/read', {

package/ui/src/components/McpPlayground.jsx

@@ -1,9 +1,9 @@
 import { colors, fonts } from '../theme';
-import { useMcpPlayground } from './McpPlayground/useMcpPlayground';
 import LoadingModal from './McpPlayground/LoadingModal';
-import ToolsSection from './McpPlayground/ToolsSection';
 import PromptsSection from './McpPlayground/PromptsSection';
 import ResourcesSection from './McpPlayground/ResourcesSection';
+import ToolsSection from './McpPlayground/ToolsSection';
+import { useMcpPlayground } from './McpPlayground/useMcpPlayground';
 
 function McpPlayground() {
   const {
@@ -100,6 +100,7 @@ function McpPlayground() {
               }}
             >
               <label
+                htmlFor="mcp-server-select"
                 style={{
                   fontSize: '13px',
                   fontFamily: fonts.body,
@@ -119,6 +120,7 @@ function McpPlayground() {
                 {availableServers.map((server) => (
                   <button
                     key={server}
+                    type="button"
                     onClick={() => setSelectedServer(server)}
                     style={{
                       padding: '10px 18px',
@@ -169,6 +171,7 @@ function McpPlayground() {
             {['tools', 'prompts', 'resources'].map((section) => (
               <button
                 key={section}
+                type="button"
                 onClick={() => setActiveSection(section)}
                 style={{
                   padding: '10px 18px',

package/ui/src/components/PacketDetailHeader.jsx

@@ -1,10 +1,14 @@
-import { colors, fonts } from '../theme';
 import { IconX } from '@tabler/icons-react';
+import { colors, fonts } from '../theme';
 
 function PacketDetailHeader({ request, onClose, matchingPair }) {
   const formatBytes = (bytes) => {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+    if (bytes < 1024) {
+      return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+      return `${(bytes / 1024).toFixed(2)} KB`;
+    }
     return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
   };
 
@@ -59,6 +63,7 @@ function PacketDetailHeader({ request, onClose, matchingPair }) {
         </span>
       </div>
       <button
+        type="button"
         onClick={onClose}
         style={{
           background: 'none',

package/ui/src/components/PacketFilters/ExportControls.jsx

@@ -1,6 +1,6 @@
-import { colors, fonts } from '../../theme';
 import { IconDownload } from '@tabler/icons-react';
 import anime from 'animejs';
+import { colors, fonts } from '../../theme';
 
 export default function ExportControls({ stats, onExport }) {
   return (
@@ -50,6 +50,7 @@ export default function ExportControls({ stats, onExport }) {
         }}
       >
         <button
+          type="button"
           onClick={() => onExport('json')}
           style={{
             padding: '8px 14px',

package/ui/src/components/PacketFilters/FilterInput.jsx

@@ -1,5 +1,5 @@
-import { colors, fonts } from '../../theme';
 import anime from 'animejs';
+import { colors, fonts } from '../../theme';
 
 export default function FilterInput({
   type = 'text',

package/ui/src/components/RawTab.jsx

@@ -17,7 +17,10 @@ const ChevronDown = ({ size = 14, color = 'currentColor', rotated = false }) =>
       transform: rotated ? 'rotate(-90deg)' : 'rotate(0deg)',
       transition: 'transform 0.2s ease',
     }}
+    role="img"
+    aria-label="Chevron down icon"
   >
+    <title>Chevron down icon</title>
     <polyline points="6 9 12 15 18 9" />
   </svg>
 );
@@ -35,8 +38,15 @@ function CollapsibleRequestResponse({ title, titleColor, children, defaultExpand
         marginBottom: '20px',
       }}
     >
-      <div
+      <button
+        type="button"
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
         style={{
           padding: '16px 20px',
           background: isExpanded ? colors.bgCard : colors.bgSecondary,
@@ -47,6 +57,9 @@ function CollapsibleRequestResponse({ title, titleColor, children, defaultExpand
           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;
@@ -71,7 +84,7 @@ function CollapsibleRequestResponse({ title, titleColor, children, defaultExpand
           <ChevronDown size={14} color={titleColor} rotated={!isExpanded} />
           {title}
         </div>
-      </div>
+      </button>
       {isExpanded && <div style={{ padding: '20px' }}>{children}</div>}
     </div>
   );

package/ui/src/components/RequestRow/OrphanedResponseRow.jsx

@@ -1,9 +1,9 @@
 import { colors, fonts, withOpacity } from '../../theme';
 import {
-  formatRelativeTime,
   formatDateTime,
-  getSourceDest,
+  formatRelativeTime,
   getEndpoint,
+  getSourceDest,
 } from '../../utils/requestUtils.js';
 
 export default function OrphanedResponseRow({ response, selected, firstRequestTime, onSelect }) {
@@ -14,6 +14,14 @@ export default function OrphanedResponseRow({ response, selected, firstRequestTi
   return (
     <tr
       onClick={() => onSelect(response)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onSelect(response);
+        }
+      }}
+      tabIndex={0}
+      aria-label={`Select orphaned response ${response.frame_number}`}
       style={{
         cursor: 'pointer',
         background: isSelected ? colors.bgSelected : colors.bgUnpaired,