@mcp-shark/mcp-shark 1.4.2 → 1.5.0

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>

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

@@ -110,7 +110,7 @@ export default function FindingsTable({ findings, type }) {
         <tbody>
           {findings.map((finding, index) => (
             <tr
-              key={index}
+              key={`finding-${finding.id || finding.name || index}-${index}`}
               style={{
                 borderBottom: `1px solid ${colors.borderLight}`,
                 transition: 'background 0.15s',
@@ -164,7 +164,7 @@ export default function FindingsTable({ findings, type }) {
                 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
                   {finding.risk_tags?.map((tag, tagIndex) => (
                     <span
-                      key={tagIndex}
+                      key={`tag-${String(tag)}-${tagIndex}`}
                       style={{
                         padding: '2px 6px',
                         background: colors.bgCard,
@@ -192,7 +192,10 @@ export default function FindingsTable({ findings, type }) {
                   style={{ listStyle: 'disc', listStylePosition: 'inside', margin: 0, padding: 0 }}
                 >
                   {finding.reasons?.map((reason, reasonIndex) => (
-                    <li key={reasonIndex} style={{ fontSize: '10px', marginBottom: '2px' }}>
+                    <li
+                      key={`reason-${reasonIndex}-${reason.substring(0, 20)}`}
+                      style={{ fontSize: '10px', marginBottom: '2px' }}
+                    >
                       {reason}
                     </li>
                   ))}
@@ -209,45 +212,46 @@ export default function FindingsTable({ findings, type }) {
               >
                 {finding.safe_use_notes}
               </td>
-              {type === 'tool' && finding.hasOwnProperty('is_potentially_poisoned') && (
-                <td style={{ padding: '8px' }}>
-                  {finding.is_potentially_poisoned ? (
-                    <span
-                      style={{
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        padding: '2px 6px',
-                        fontSize: '10px',
-                        fontWeight: '500',
-                        borderRadius: '4px',
-                        background: colors.error + '20',
-                        color: colors.error,
-                        border: `1px solid ${colors.error}40`,
-                        fontFamily: fonts.body,
-                      }}
-                    >
-                      Yes
-                    </span>
-                  ) : (
-                    <span
-                      style={{
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        padding: '2px 6px',
-                        fontSize: '10px',
-                        fontWeight: '500',
-                        borderRadius: '4px',
-                        background: colors.accentGreen + '20',
-                        color: colors.accentGreen,
-                        border: `1px solid ${colors.accentGreen}40`,
-                        fontFamily: fonts.body,
-                      }}
-                    >
-                      No
-                    </span>
-                  )}
-                </td>
-              )}
+              {type === 'tool' &&
+                Object.prototype.hasOwnProperty.call(finding, 'is_potentially_poisoned') && (
+                  <td style={{ padding: '8px' }}>
+                    {finding.is_potentially_poisoned ? (
+                      <span
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          padding: '2px 6px',
+                          fontSize: '10px',
+                          fontWeight: '500',
+                          borderRadius: '4px',
+                          background: `${colors.error}20`,
+                          color: colors.error,
+                          border: `1px solid ${colors.error}40`,
+                          fontFamily: fonts.body,
+                        }}
+                      >
+                        Yes
+                      </span>
+                    ) : (
+                      <span
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          padding: '2px 6px',
+                          fontSize: '10px',
+                          fontWeight: '500',
+                          borderRadius: '4px',
+                          background: `${colors.accentGreen}20`,
+                          color: colors.accentGreen,
+                          border: `1px solid ${colors.accentGreen}40`,
+                          fontFamily: fonts.body,
+                        }}
+                      >
+                        No
+                      </span>
+                    )}
+                  </td>
+                )}
             </tr>
           ))}
         </tbody>

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

@@ -1,6 +1,6 @@
 import { colors, fonts } from '../../theme';
-import ScanResultsDisplay from './ScanResultsDisplay';
 import ScanDetailView from './ScanDetailView';
+import ScanResultsDisplay from './ScanResultsDisplay';
 
 export default function ListViewContent({
   error,
@@ -50,7 +50,7 @@ export default function ListViewContent({
         <div
           style={{
             padding: '12px 16px',
-            background: colors.error + '20',
+            background: `${colors.error}20`,
             border: `1px solid ${colors.error}`,
             borderRadius: '8px',
             marginBottom: '16px',

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

@@ -2,31 +2,33 @@ import { colors, fonts } from '../../theme';
 import ExpandableSection from './ExpandableSection';
 
 export default function NotablePatternsSection({ patterns }) {
-  if (!patterns || patterns.length === 0) return null;
+  if (!patterns || patterns.length === 0) {
+    return null;
+  }
 
   return (
     <ExpandableSection title="Notable Patterns" count={patterns.length} defaultExpanded={false}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
         {patterns.map((pattern, index) => (
           <div
-            key={index}
+            key={`pattern-${pattern.type || index}-${index}`}
             style={{
               display: 'flex',
               alignItems: 'flex-start',
               gap: '8px',
               padding: '8px',
-              background: colors.accentOrange + '10',
+              background: `${colors.accentOrange}10`,
               borderRadius: '6px',
               border: `1px solid ${colors.accentOrange}20`,
               transition: 'all 0.15s',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = colors.accentOrange + '15';
-              e.currentTarget.style.borderColor = colors.accentOrange + '40';
+              e.currentTarget.style.background = `${colors.accentOrange}15`;
+              e.currentTarget.style.borderColor = `${colors.accentOrange}40`;
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.background = colors.accentOrange + '10';
-              e.currentTarget.style.borderColor = colors.accentOrange + '20';
+              e.currentTarget.style.background = `${colors.accentOrange}10`;
+              e.currentTarget.style.borderColor = `${colors.accentOrange}20`;
             }}
           >
             <div
@@ -36,7 +38,7 @@ export default function NotablePatternsSection({ patterns }) {
                 width: '16px',
                 height: '16px',
                 borderRadius: '50%',
-                background: colors.accentOrange + '30',
+                background: `${colors.accentOrange}30`,
                 border: `1px solid ${colors.accentOrange}60`,
                 display: 'flex',
                 alignItems: 'center',
@@ -47,7 +49,10 @@ export default function NotablePatternsSection({ patterns }) {
                 style={{ width: '10px', height: '10px', color: colors.accentOrange }}
                 fill="currentColor"
                 viewBox="0 0 20 20"
+                role="img"
+                aria-label="Pattern icon"
               >
+                <title>Pattern icon</title>
                 <path
                   fillRule="evenodd"
                   d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"

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

@@ -1,9 +1,42 @@
 import { colors, fonts } from '../../theme';
-import { getRiskLevelColor } from './utils';
 import ExpandableSection from './ExpandableSection';
+import { getRiskLevelColor } from './utils';
+
+function renderReasonContent(overallReason) {
+  const separator = overallReason.includes('\n')
+    ? '\n'
+    : overallReason.includes(' | ')
+      ? ' | '
+      : null;
+
+  if (separator) {
+    return (
+      <ul
+        style={{
+          listStyle: 'disc',
+          listStylePosition: 'inside',
+          margin: 0,
+          paddingLeft: '8px',
+        }}
+      >
+        {overallReason.split(separator).map((item, index) => (
+          <li
+            key={`reason-${index}-${item.trim().substring(0, 20)}`}
+            style={{ fontSize: '12px', marginBottom: '2px' }}
+          >
+            {item.trim()}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+  return <p style={{ fontSize: '12px' }}>{overallReason}</p>;
+}
 
 export default function OverallSummarySection({ overallRiskLevel, overallReason }) {
-  if (!overallRiskLevel) return null;
+  if (!overallRiskLevel) {
+    return null;
+  }
 
   return (
     <ExpandableSection title="Overall Summary" count={overallReason ? 1 : 0} defaultExpanded={true}>
@@ -37,33 +70,7 @@ export default function OverallSummarySection({ overallRiskLevel, overallReason
         </div>
         {overallReason && (
           <div style={{ fontSize: '12px', color: colors.textSecondary, fontFamily: fonts.body }}>
-            {(() => {
-              const separator = overallReason.includes('\n')
-                ? '\n'
-                : overallReason.includes(' | ')
-                  ? ' | '
-                  : null;
-
-              if (separator) {
-                return (
-                  <ul
-                    style={{
-                      listStyle: 'disc',
-                      listStylePosition: 'inside',
-                      margin: 0,
-                      paddingLeft: '8px',
-                    }}
-                  >
-                    {overallReason.split(separator).map((item, index) => (
-                      <li key={index} style={{ fontSize: '12px', marginBottom: '2px' }}>
-                        {item.trim()}
-                      </li>
-                    ))}
-                  </ul>
-                );
-              }
-              return <p style={{ fontSize: '12px' }}>{overallReason}</p>;
-            })()}
+            {renderReasonContent(overallReason)}
           </div>
         )}
       </div>

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

@@ -2,7 +2,9 @@ import { colors, fonts } from '../../theme';
 import ExpandableSection from './ExpandableSection';
 
 export default function RecommendationsSection({ recommendations }) {
-  if (!recommendations || recommendations.length === 0) return null;
+  if (!recommendations || recommendations.length === 0) {
+    return null;
+  }
 
   return (
     <ExpandableSection
@@ -13,24 +15,24 @@ export default function RecommendationsSection({ recommendations }) {
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
         {recommendations.map((recommendation, index) => (
           <div
-            key={index}
+            key={`recommendation-${recommendation.type || index}-${index}`}
             style={{
               display: 'flex',
               alignItems: 'flex-start',
               gap: '8px',
               padding: '8px',
-              background: colors.accentBlue + '10',
+              background: `${colors.accentBlue}10`,
               borderRadius: '6px',
               border: `1px solid ${colors.accentBlue}20`,
               transition: 'all 0.15s',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = colors.accentBlue + '15';
-              e.currentTarget.style.borderColor = colors.accentBlue + '40';
+              e.currentTarget.style.background = `${colors.accentBlue}15`;
+              e.currentTarget.style.borderColor = `${colors.accentBlue}40`;
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.background = colors.accentBlue + '10';
-              e.currentTarget.style.borderColor = colors.accentBlue + '20';
+              e.currentTarget.style.background = `${colors.accentBlue}10`;
+              e.currentTarget.style.borderColor = `${colors.accentBlue}20`;
             }}
           >
             <div
@@ -40,7 +42,7 @@ export default function RecommendationsSection({ recommendations }) {
                 width: '16px',
                 height: '16px',
                 borderRadius: '50%',
-                background: colors.accentBlue + '30',
+                background: `${colors.accentBlue}30`,
                 border: `1px solid ${colors.accentBlue}60`,
                 display: 'flex',
                 alignItems: 'center',

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

@@ -1,5 +1,5 @@
+import { IconExternalLink, IconX } from '@tabler/icons-react';
 import { colors, fonts } from '../../theme';
-import { IconX, IconExternalLink } from '@tabler/icons-react';
 
 export default function ScanDetailHeader({ scanId, serverName, onClose }) {
   return (
@@ -63,6 +63,7 @@ export default function ScanDetailHeader({ scanId, serverName, onClose }) {
           </a>
         )}
         <button
+          type="button"
           onClick={onClose}
           style={{
             padding: '6px',

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

@@ -1,11 +1,11 @@
 import { colors, fonts } from '../../theme';
 import AnalysisResult from './AnalysisResult';
-import { normalizeScanData } from './scanDataUtils';
-import ScanDetailHeader from './ScanDetailHeader';
 import DebugInfoSection from './DebugInfoSection';
+import RawDataSection from './RawDataSection';
+import ScanDetailHeader from './ScanDetailHeader';
 import ScanOverviewSection from './ScanOverviewSection';
 import ServerInfoSection from './ServerInfoSection';
-import RawDataSection from './RawDataSection';
+import { normalizeScanData } from './scanDataUtils';
 
 export default function ScanDetailView({ scan, loading, onClose }) {
   if (loading) {
@@ -120,7 +120,7 @@ export default function ScanDetailView({ scan, loading, onClose }) {
             <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/ScanListView/ScanListHeader.jsx

@@ -1,5 +1,5 @@
-import { colors, fonts } from '../../../theme';
 import { IconRefresh } from '@tabler/icons-react';
+import { colors, fonts } from '../../../theme';
 
 export default function ScanListHeader({ scanCount, loading, onRefresh }) {
   return (
@@ -23,6 +23,7 @@ export default function ScanListHeader({ scanCount, loading, onRefresh }) {
         All Scans ({scanCount})
       </h2>
       <button
+        type="button"
         onClick={onRefresh}
         disabled={loading}
         style={{