@mcp-shark/mcp-shark 1.4.2 → 1.5.2

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,

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,

package/ui/src/components/GroupedBySessionView.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 GroupedBySessionView({
   groupedData,

package/ui/src/components/HexTab.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>
   );
@@ -100,7 +113,7 @@ function HexTab({ requestHexLines, responseHexLines, hasRequest, hasResponse })
               {requestHexLines.length > 0 ? (
                 requestHexLines.map((line, i) => (
                   <div
-                    key={i}
+                    key={`request-${line.offset}-${i}`}
                     style={{
                       display: 'flex',
                       gap: '16px',
@@ -150,7 +163,7 @@ function HexTab({ requestHexLines, responseHexLines, hasRequest, hasResponse })
               {responseHexLines.length > 0 ? (
                 responseHexLines.map((line, i) => (
                   <div
-                    key={i}
+                    key={`response-${line.offset}-${i}`}
                     style={{
                       display: 'flex',
                       gap: '16px',

package/ui/src/components/LogsToolbar.jsx

@@ -1,5 +1,5 @@
+import { IconDownload, IconSearch, IconTrash } from '@tabler/icons-react';
 import { colors, fonts } from '../theme';
-import { IconTrash, IconDownload, IconSearch } from '@tabler/icons-react';
 
 export default function LogsToolbar({
   filter,
@@ -117,6 +117,7 @@ export default function LogsToolbar({
       </label>
 
       <button
+        type="button"
         onClick={onClearLogs}
         style={{
           padding: '8px 14px',
@@ -148,6 +149,7 @@ export default function LogsToolbar({
       </button>
 
       <button
+        type="button"
         onClick={onExportLogs}
         style={{
           padding: '8px 14px',

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

@@ -1,6 +1,6 @@
+import anime from 'animejs';
 import { useEffect, useRef } from 'react';
 import { colors, fonts } from '../../theme';
-import anime from 'animejs';
 
 export default function LoadingModal({ show }) {
   const loadingModalRef = useRef(null);
@@ -42,7 +42,9 @@ export default function LoadingModal({ show }) {
     }
   }, [show]);
 
-  if (!show) return null;
+  if (!show) {
+    return null;
+  }
 
   return (
     <div
@@ -96,7 +98,9 @@ export default function LoadingModal({ show }) {
             <div
               key={i}
               ref={(el) => {
-                if (el) dotsRef.current[i] = el;
+                if (el) {
+                  dotsRef.current[i] = el;
+                }
               }}
               style={{
                 width: '12px',

package/ui/src/components/McpPlayground/PromptsSection/PromptCallPanel.jsx

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

package/ui/src/components/McpPlayground/PromptsSection/PromptItem.jsx

@@ -2,8 +2,10 @@ import { colors } from '../../../theme';
 
 export default function PromptItem({ prompt, isSelected, onClick }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={onClick}
+      aria-label={`Select prompt ${prompt.name}`}
       style={{
         padding: '16px 20px',
         margin: '4px 8px',
@@ -14,6 +16,8 @@ export default function PromptItem({ prompt, 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 PromptItem({ prompt, isSelected, onClick }) {
           )}
         </div>
       </div>
-    </div>
+    </button>
   );
 }

package/ui/src/components/McpPlayground/PromptsSection/PromptsList.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 PromptItem from './PromptItem';
 
 export default function PromptsList({
@@ -26,7 +26,7 @@ export default function PromptsList({
         <LoadingState message="Waiting for MCP server to start..." />
       ) : promptsLoading || !promptsLoaded ? (
         <LoadingState message="Loading prompts..." />
-      ) : error && error.includes('prompts:') ? (
+      ) : error?.includes('prompts:') ? (
         <ErrorState message={`Error loading prompts: ${error.replace('prompts: ', '')}`} />
       ) : prompts.length === 0 ? (
         <EmptyState message="No prompts available." />
@@ -34,7 +34,7 @@ export default function PromptsList({
         <div style={{ padding: '8px 0' }}>
           {prompts.map((prompt, idx) => (
             <PromptItem
-              key={idx}
+              key={prompt.name || `prompt-${idx}`}
               prompt={prompt}
               isSelected={selectedPrompt?.name === prompt.name}
               onClick={() => onSelectPrompt(prompt)}

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

@@ -1,6 +1,6 @@
 import { colors, fonts } from '../../theme';
-import PromptsList from './PromptsSection/PromptsList';
 import PromptCallPanel from './PromptsSection/PromptCallPanel';
+import PromptsList from './PromptsSection/PromptsList';
 
 export default function PromptsSection({
   prompts,
@@ -32,6 +32,7 @@ export default function PromptsSection({
     <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 || promptsLoading}
           style={{

package/ui/src/components/McpPlayground/ResourcesSection/ResourceCallPanel.jsx

@@ -35,6 +35,7 @@ export default function ResourceCallPanel({ resource, resourceResult, onReadReso
         }}
       >
         <button
+          type="button"
           onClick={onReadResource}
           disabled={loading}
           style={{
@@ -55,6 +56,7 @@ export default function ResourceCallPanel({ resource, resourceResult, onReadReso
         {resourceResult && (
           <div>
             <label
+              htmlFor="resource-result-pre"
               style={{
                 display: 'block',
                 fontSize: '12px',
@@ -66,6 +68,7 @@ export default function ResourceCallPanel({ resource, resourceResult, onReadReso
               Result
             </label>
             <pre
+              id="resource-result-pre"
               style={{
                 padding: '12px',
                 background: colors.bgSecondary,

package/ui/src/components/McpPlayground/ResourcesSection/ResourceItem.jsx

@@ -2,8 +2,10 @@ import { colors } from '../../../theme';
 
 export default function ResourceItem({ resource, isSelected, onClick }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={onClick}
+      aria-label={`Select resource ${resource.uri}`}
       style={{
         padding: '16px 20px',
         margin: '4px 8px',
@@ -14,6 +16,8 @@ export default function ResourceItem({ resource, 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) {
@@ -82,6 +86,6 @@ export default function ResourceItem({ resource, isSelected, onClick }) {
           )}
         </div>
       </div>
-    </div>
+    </button>
   );
 }

package/ui/src/components/McpPlayground/ResourcesSection/ResourcesList.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 ResourceItem from './ResourceItem';
 
 export default function ResourcesList({
@@ -26,7 +26,7 @@ export default function ResourcesList({
         <LoadingState message="Waiting for MCP server to start..." />
       ) : resourcesLoading || !resourcesLoaded ? (
         <LoadingState message="Loading resources..." />
-      ) : error && error.includes('resources:') ? (
+      ) : error?.includes('resources:') ? (
         <ErrorState message={`Error loading resources: ${error.replace('resources: ', '')}`} />
       ) : resources.length === 0 ? (
         <EmptyState message="No resources available." />
@@ -34,7 +34,7 @@ export default function ResourcesList({
         <div style={{ padding: '8px 0' }}>
           {resources.map((resource, idx) => (
             <ResourceItem
-              key={idx}
+              key={resource.uri || `resource-${idx}`}
               resource={resource}
               isSelected={selectedResource?.uri === resource.uri}
               onClick={() => onSelectResource(resource)}

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

@@ -1,6 +1,6 @@
 import { colors, fonts } from '../../theme';
-import ResourcesList from './ResourcesSection/ResourcesList';
 import ResourceCallPanel from './ResourcesSection/ResourceCallPanel';
+import ResourcesList from './ResourcesSection/ResourcesList';
 
 export default function ResourcesSection({
   resources,
@@ -19,6 +19,7 @@ export default function ResourcesSection({
     <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 || resourcesLoading}
           style={{