@mcp-shark/mcp-shark 1.4.1 → 1.5.0

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 {
@@ -41,6 +41,9 @@ function McpPlayground() {
     handleCallTool,
     handleGetPrompt,
     handleReadResource,
+    availableServers,
+    selectedServer,
+    setSelectedServer,
   } = useMcpPlayground();
 
   return (
@@ -84,32 +87,111 @@ function McpPlayground() {
         <div
           style={{
             display: 'flex',
-            gap: '8px',
-            borderBottom: `1px solid ${colors.borderLight}`,
+            flexDirection: 'column',
+            gap: '12px',
           }}
         >
-          {['tools', 'prompts', 'resources'].map((section) => (
-            <button
-              key={section}
-              onClick={() => setActiveSection(section)}
+          {availableServers.length > 0 && (
+            <div
               style={{
-                padding: '10px 18px',
-                background: activeSection === section ? colors.bgSecondary : 'transparent',
-                border: 'none',
-                borderBottom: `2px solid ${activeSection === section ? colors.accentBlue : 'transparent'}`,
-                color: activeSection === section ? colors.textPrimary : colors.textSecondary,
-                cursor: 'pointer',
-                fontSize: '13px',
-                fontFamily: fonts.body,
-                fontWeight: activeSection === section ? '500' : '400',
-                textTransform: 'capitalize',
-                borderRadius: '6px 6px 0 0',
-                transition: 'all 0.2s',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
               }}
             >
-              {section}
-            </button>
-          ))}
+              <label
+                htmlFor="mcp-server-select"
+                style={{
+                  fontSize: '13px',
+                  fontFamily: fonts.body,
+                  color: colors.textSecondary,
+                  fontWeight: '500',
+                }}
+              >
+                Server:
+              </label>
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '8px',
+                }}
+              >
+                {availableServers.map((server) => (
+                  <button
+                    key={server}
+                    type="button"
+                    onClick={() => setSelectedServer(server)}
+                    style={{
+                      padding: '10px 18px',
+                      background:
+                        selectedServer === server ? colors.accentBlue : colors.bgSecondary,
+                      border:
+                        selectedServer === server
+                          ? `2px solid ${colors.accentBlue}`
+                          : `1px solid ${colors.borderLight}`,
+                      borderRadius: '8px',
+                      color: selectedServer === server ? colors.textInverse : colors.textPrimary,
+                      fontSize: '13px',
+                      fontFamily: fonts.body,
+                      fontWeight: selectedServer === server ? '600' : '500',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s ease',
+                      boxShadow:
+                        selectedServer === server ? `0 2px 4px ${colors.shadowSm}` : 'none',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (selectedServer !== server) {
+                        e.currentTarget.style.background = colors.bgHover;
+                        e.currentTarget.style.borderColor = colors.borderMedium;
+                        e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      if (selectedServer !== server) {
+                        e.currentTarget.style.background = colors.bgSecondary;
+                        e.currentTarget.style.borderColor = colors.borderLight;
+                        e.currentTarget.style.boxShadow = 'none';
+                      }
+                    }}
+                  >
+                    {server}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+          <div
+            style={{
+              display: 'flex',
+              gap: '8px',
+              borderBottom: `1px solid ${colors.borderLight}`,
+            }}
+          >
+            {['tools', 'prompts', 'resources'].map((section) => (
+              <button
+                key={section}
+                type="button"
+                onClick={() => setActiveSection(section)}
+                style={{
+                  padding: '10px 18px',
+                  background: activeSection === section ? colors.bgSecondary : 'transparent',
+                  border: 'none',
+                  borderBottom: `2px solid ${activeSection === section ? colors.accentBlue : 'transparent'}`,
+                  color: activeSection === section ? colors.textPrimary : colors.textSecondary,
+                  cursor: 'pointer',
+                  fontSize: '13px',
+                  fontFamily: fonts.body,
+                  fontWeight: activeSection === section ? '500' : '400',
+                  textTransform: 'capitalize',
+                  borderRadius: '6px 6px 0 0',
+                  transition: 'all 0.2s',
+                }}
+              >
+                {section}
+              </button>
+            ))}
+          </div>
         </div>
 
         <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>

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,

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

@@ -1,11 +1,11 @@
+import { IconChevronDown } from '@tabler/icons-react';
 import { colors, fonts, withOpacity } from '../../theme';
 import {
-  formatRelativeTime,
   formatDateTime,
-  getSourceDest,
+  formatRelativeTime,
   getEndpoint,
+  getSourceDest,
 } from '../../utils/requestUtils.js';
-import { IconChevronDown } from '@tabler/icons-react';
 
 const ChevronDown = ({ size = 12, rotated = false }) => (
   <IconChevronDown
@@ -39,6 +39,14 @@ export default function RequestRowMain({
     <>
       <tr
         onClick={() => onSelect(request)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onSelect(request);
+          }
+        }}
+        tabIndex={0}
+        aria-label={`Select request ${request.frame_number}`}
         style={{
           cursor: 'pointer',
           background: isSelected
@@ -84,6 +92,7 @@ export default function RequestRowMain({
           >
             {hasResponse && (
               <button
+                type="button"
                 onClick={(e) => {
                   e.stopPropagation();
                   onToggleExpand();

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

@@ -1,12 +1,12 @@
 import { colors, fonts } from '../../theme';
 import {
-  formatRelativeTime,
   formatDateTime,
-  getSourceDest,
+  formatRelativeTime,
   getEndpoint,
+  getSourceDest,
 } from '../../utils/requestUtils.js';
 
-export default function ResponseRow({ response, selected, firstRequestTime, onSelect, request }) {
+export default function ResponseRow({ response, selected, firstRequestTime, onSelect }) {
   const isSelected = selected?.frame_number === response.frame_number;
   const { source, dest } = getSourceDest(response);
   const relativeTime = formatRelativeTime(response.timestamp_iso, firstRequestTime);
@@ -14,6 +14,14 @@ export default function ResponseRow({ response, selected, firstRequestTime, onSe
   return (
     <tr
       onClick={() => onSelect(response)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onSelect(response);
+        }
+      }}
+      tabIndex={0}
+      aria-label={`Select response ${response.frame_number}`}
       style={{
         cursor: 'pointer',
         background:

package/ui/src/components/RequestRow.jsx

@@ -12,17 +12,23 @@ function RequestRow({
   onToggleExpand = () => {},
 }) {
   // Support both pair prop (new) and request prop (legacy for grouped views)
-  let request, response;
-  if (pair) {
-    request = pair.request;
-    response = pair.response;
-  } else if (requestProp) {
-    request = requestProp;
-    response = null;
-  } else {
+  const extractRequestResponse = (pair, requestProp) => {
+    if (pair) {
+      return { request: pair.request, response: pair.response };
+    }
+    if (requestProp) {
+      return { request: requestProp, response: null };
+    }
+    return null;
+  };
+
+  const data = extractRequestResponse(pair, requestProp);
+  if (!data) {
     return null; // No valid data
   }
 
+  const { request, response } = data;
+
   // Check if this is an unpaired request or response
   const isUnpaired = !request || !response;
 
@@ -38,7 +44,9 @@ function RequestRow({
     );
   }
 
-  if (!request) return null; // Only show rows that have a request
+  if (!request) {
+    return null; // Only show rows that have a request
+  }
 
   const hasResponse = !!response;
 

package/ui/src/components/ServerControl.jsx

@@ -29,6 +29,7 @@ function ServerControl({ status, loading, onStart, onStop, canStart }) {
       <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
         {status.running ? (
           <button
+            type="button"
             onClick={onStop}
             disabled={loading}
             style={{
@@ -60,6 +61,7 @@ function ServerControl({ status, loading, onStart, onStop, canStart }) {
           </button>
         ) : (
           <button
+            type="button"
             data-tour="start-button"
             onClick={onStart}
             disabled={loading || !canStart}
@@ -122,7 +124,7 @@ function ServerControl({ status, loading, onStart, onStop, canStart }) {
               fontFamily: fonts.body,
             }}
           >
-            {status.running ? `Running (PID: ${status.pid})` : 'Stopped'}
+            {status.running ? (status.pid ? `Running (PID: ${status.pid})` : 'Running') : 'Stopped'}
           </span>
         </div>
       </div>

package/ui/src/components/ServiceSelector.jsx

@@ -40,6 +40,7 @@ function ServiceSelector({ services, selectedServices, onSelectionChange }) {
         }}
       >
         <button
+          type="button"
           onClick={() => {
             onSelectionChange(new Set(services.map((s) => s.name)));
           }}
@@ -56,6 +57,7 @@ function ServiceSelector({ services, selectedServices, onSelectionChange }) {
           Select All
         </button>
         <button
+          type="button"
           onClick={() => {
             onSelectionChange(new Set());
           }}

package/ui/src/components/SmartScan/AnalysisResult.jsx

@@ -1,9 +1,9 @@
 import { colors, fonts } from '../../theme';
 import ExpandableSection from './ExpandableSection';
 import FindingsTable from './FindingsTable';
+import NotablePatternsSection from './NotablePatternsSection';
 import OverallSummarySection from './OverallSummarySection';
 import RecommendationsSection from './RecommendationsSection';
-import NotablePatternsSection from './NotablePatternsSection';
 
 export default function AnalysisResult({ analysis }) {
   if (!analysis) {
@@ -11,7 +11,7 @@ export default function AnalysisResult({ analysis }) {
       <div
         style={{
           padding: '12px',
-          background: colors.bgTertiary + '80',
+          background: `${colors.bgTertiary}80`,
           borderRadius: '6px',
           border: `1px solid ${colors.borderLight}`,
           fontSize: '12px',

package/ui/src/components/SmartScan/BatchResultsDisplay/BatchResultItem.jsx

@@ -1,6 +1,6 @@
-import { CheckIcon, CacheIcon, ExternalLinkIcon } from '../../SmartScanIcons';
 import { IconEye } from '@tabler/icons-react';
 import { colors, fonts } from '../../../theme';
+import { CacheIcon, CheckIcon, ExternalLinkIcon } from '../../SmartScanIcons';
 import { getRiskLevelColor } from '../utils';
 
 export default function BatchResultItem({ result, onViewScan }) {
@@ -64,6 +64,7 @@ export default function BatchResultItem({ result, onViewScan }) {
             )}
             {onViewScan && result.data && (
               <button
+                type="button"
                 onClick={() => onViewScan(result.data)}
                 style={{
                   display: 'inline-flex',

package/ui/src/components/SmartScan/BatchResultsDisplay/BatchResultsHeader.jsx

@@ -1,5 +1,5 @@
-import { CheckIcon, CacheIcon } from '../../SmartScanIcons';
 import { colors, fonts } from '../../../theme';
+import { CacheIcon, CheckIcon } from '../../SmartScanIcons';
 
 export default function BatchResultsHeader({ scanResults }) {
   const cachedCount = scanResults.filter((r) => r.cached).length;

package/ui/src/components/SmartScan/BatchResultsDisplay.jsx

@@ -1,9 +1,11 @@
 import { colors } from '../../theme';
-import BatchResultsHeader from './BatchResultsDisplay/BatchResultsHeader';
 import BatchResultItem from './BatchResultsDisplay/BatchResultItem';
+import BatchResultsHeader from './BatchResultsDisplay/BatchResultsHeader';
 
 export default function BatchResultsDisplay({ scanResults, onViewScan }) {
-  if (scanResults.length === 0) return null;
+  if (scanResults.length === 0) {
+    return null;
+  }
 
   return (
     <div
@@ -18,7 +20,11 @@ export default function BatchResultsDisplay({ scanResults, onViewScan }) {
       <BatchResultsHeader scanResults={scanResults} />
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
         {scanResults.map((result, idx) => (
-          <BatchResultItem key={idx} result={result} onViewScan={onViewScan} />
+          <BatchResultItem
+            key={result.scanId || `batch-result-${idx}`}
+            result={result}
+            onViewScan={onViewScan}
+          />
         ))}
       </div>
     </div>

package/ui/src/components/SmartScan/EmptyState.jsx

@@ -24,7 +24,10 @@ export default function EmptyState() {
           strokeLinecap="round"
           strokeLinejoin="round"
           style={{ opacity: 0.5 }}
+          role="img"
+          aria-label="Empty state icon"
         >
+          <title>Empty state icon</title>
           <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
           <path d="M9 12l2 2 4-4" />
         </svg>

package/ui/src/components/SmartScan/ErrorDisplay.jsx

@@ -1,8 +1,10 @@
-import { AlertIcon } from '../SmartScanIcons';
 import { colors, fonts } from '../../theme';
+import { AlertIcon } from '../SmartScanIcons';
 
 export default function ErrorDisplay({ error }) {
-  if (!error) return null;
+  if (!error) {
+    return null;
+  }
 
   return (
     <div

package/ui/src/components/SmartScan/ExpandableSection.jsx

@@ -14,6 +14,7 @@ export default function ExpandableSection({ title, count, children, defaultExpan
       }}
     >
       <button
+        type="button"
         onClick={() => setIsExpanded(!isExpanded)}
         style={{
           width: '100%',
@@ -73,7 +74,10 @@ export default function ExpandableSection({ title, count, children, defaultExpan
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
+          role="img"
+          aria-label="Chevron icon"
         >
+          <title>Chevron icon</title>
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
         </svg>
       </button>