@mcp-shark/mcp-shark 1.4.1 → 1.5.0

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={{

package/ui/src/components/SmartScan/ScanListView/ScanListItem.jsx

@@ -1,6 +1,6 @@
+import { IconChevronRight, IconExternalLink, IconEye } from '@tabler/icons-react';
 import { useState } from 'react';
 import { colors, fonts } from '../../../theme';
-import { IconChevronRight, IconEye, IconExternalLink } from '@tabler/icons-react';
 import { getRiskLevelColor } from '../utils';
 
 export default function ScanListItem({ scan, onSelectScan }) {
@@ -25,6 +25,13 @@ export default function ScanListItem({ scan, onSelectScan }) {
           cursor: 'pointer',
         }}
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
+        aria-label={`Toggle scan ${scan.scanId || 'details'}`}
       >
         <div
           style={{
@@ -101,8 +108,15 @@ export default function ScanListItem({ scan, onSelectScan }) {
             flexShrink: 0,
           }}
           onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }}
         >
           <button
+            type="button"
             onClick={() => {
               onSelectScan(scan.id);
             }}

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

@@ -3,7 +3,9 @@ import { getRiskLevelColor } from './utils';
 
 export default function ScanOverviewSection({ status, overallRiskLevel, createdAt, updatedAt }) {
   const formatDate = (dateString) => {
-    if (!dateString) return 'N/A';
+    if (!dateString) {
+      return 'N/A';
+    }
     return new Date(dateString).toLocaleString();
   };
 

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

@@ -1,8 +1,8 @@
 import { colors } from '../../theme';
+import BatchResultsDisplay from './BatchResultsDisplay';
 import EmptyState from './EmptyState';
 import ErrorDisplay from './ErrorDisplay';
 import ScanningProgress from './ScanningProgress';
-import BatchResultsDisplay from './BatchResultsDisplay';
 import SingleResultDisplay from './SingleResultDisplay';
 
 export default function ScanResultsDisplay({

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

@@ -1,7 +1,7 @@
 import { colors } from '../../theme';
-import ServerSelectionRow from './ServerSelectionRow';
-import ScanResultsDisplay from './ScanResultsDisplay';
 import ScanDetailView from './ScanDetailView';
+import ScanResultsDisplay from './ScanResultsDisplay';
+import ServerSelectionRow from './ServerSelectionRow';
 
 export default function ScanViewContent({
   discoveredServers,

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

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

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

@@ -1,7 +1,9 @@
 import { colors, fonts } from '../../theme';
 
 export default function ServerInfoSection({ serverData }) {
-  if (!serverData) return null;
+  if (!serverData) {
+    return null;
+  }
 
   return (
     <div style={{ marginBottom: '24px' }}>

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

@@ -1,5 +1,5 @@
-import { CheckIcon, ShieldIcon, LoadingSpinner } from '../SmartScanIcons';
 import { colors, fonts } from '../../theme';
+import { LoadingSpinner, ShieldIcon } from '../SmartScanIcons';
 
 export default function ServerSelectionRow({
   discoveredServers,
@@ -57,7 +57,7 @@ export default function ServerSelectionRow({
             const isSelected = selectedServers.has(server.name);
             return (
               <label
-                key={idx}
+                key={server.name || `server-${idx}`}
                 style={{
                   display: 'flex',
                   alignItems: 'center',
@@ -119,6 +119,7 @@ export default function ServerSelectionRow({
           })}
         </div>
         <button
+          type="button"
           onClick={toggleSelectAll}
           style={{
             padding: '6px 12px',
@@ -143,6 +144,7 @@ export default function ServerSelectionRow({
           {selectedServers.size === discoveredServers.length ? 'Deselect All' : 'Select All'}
         </button>
         <button
+          type="button"
           onClick={runScan}
           disabled={!apiToken || selectedServers.size === 0 || scanning}
           style={{

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

@@ -1,9 +1,11 @@
-import { ExternalLinkIcon } from '../SmartScanIcons';
 import { colors, fonts } from '../../theme';
+import { ExternalLinkIcon } from '../SmartScanIcons';
 import { getRiskLevelColor } from './utils';
 
 export default function SingleResultDisplay({ scanResult }) {
-  if (!scanResult) return null;
+  if (!scanResult) {
+    return null;
+  }
 
   return (
     <div
@@ -218,7 +220,7 @@ export default function SingleResultDisplay({ scanResult }) {
             }}
           >
             {scanResult.data.recommendations.map((rec, idx) => (
-              <li key={idx}>{rec}</li>
+              <li key={`recommendation-${idx}-${rec.substring(0, 30)}`}>{rec}</li>
             ))}
           </ul>
         </div>

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

@@ -1,9 +1,7 @@
-import { useState, useRef } from 'react';
+import { useRef, useState } from 'react';
 import { colors, fonts } from '../../theme';
-import { CheckIcon, LoadingSpinner, CacheIcon } from '../SmartScanIcons';
-import { ExternalLinkIcon } from '../SmartScanIcons';
-import { IconTrash } from '@tabler/icons-react';
 import ConfirmationModal from '../ConfirmationModal';
+import { CheckIcon, ExternalLinkIcon, LoadingSpinner } from '../SmartScanIcons';
 
 export default function SmartScanControls({
   apiToken,
@@ -12,13 +10,14 @@ export default function SmartScanControls({
   loadingData,
   discoverMcpData,
   discoveredServers,
-  selectedServers,
-  setSelectedServers,
-  runScan,
+  _selectedServers,
+  _setSelectedServers,
   scanning,
   clearCache,
   clearingCache,
+  ...rest
 }) {
+  const { runScan: _runScan } = rest;
   const saveTokenTimeoutRef = useRef(null);
   const [showClearCacheModal, setShowClearCacheModal] = useState(false);
 
@@ -56,6 +55,7 @@ export default function SmartScanControls({
         }}
       >
         <label
+          htmlFor="api-token-input"
           style={{
             fontSize: '12px',
             fontWeight: '600',
@@ -68,6 +68,7 @@ export default function SmartScanControls({
         </label>
         <div style={{ position: 'relative', width: '200px' }}>
           <input
+            id="api-token-input"
             type="password"
             value={apiToken}
             onChange={(e) => handleTokenChange(e.target.value)}
@@ -145,6 +146,7 @@ export default function SmartScanControls({
         }}
       >
         <label
+          htmlFor="servers-label"
           style={{
             fontSize: '12px',
             fontWeight: '600',
@@ -156,6 +158,7 @@ export default function SmartScanControls({
           Servers:
         </label>
         <button
+          type="button"
           onClick={discoverMcpData}
           disabled={loadingData}
           style={{
@@ -224,6 +227,7 @@ export default function SmartScanControls({
 
       {/* Clear Cache Button */}
       <button
+        type="button"
         onClick={() => setShowClearCacheModal(true)}
         disabled={clearingCache}
         style={{

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

@@ -1,5 +1,5 @@
-import { ShieldIcon, ExternalLinkIcon } from '../SmartScanIcons';
 import { colors, fonts } from '../../theme';
+import { ExternalLinkIcon, ShieldIcon } from '../SmartScanIcons';
 
 export default function SmartScanHeader() {
   return (

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

@@ -13,6 +13,7 @@ export default function ViewModeTabs({ viewMode, setViewMode, onSwitchToScan, on
       }}
     >
       <button
+        type="button"
         onClick={() => {
           setViewMode('scan');
           onSwitchToScan?.();
@@ -33,6 +34,7 @@ export default function ViewModeTabs({ viewMode, setViewMode, onSwitchToScan, on
         Scan Servers
       </button>
       <button
+        type="button"
         onClick={() => {
           setViewMode('list');
           onSwitchToList?.();

package/ui/src/components/SmartScan/hooks/useCacheManagement.js

@@ -16,9 +16,8 @@ export function useCacheManagement(discoveredServers, discoverMcpData, setError)
           await discoverMcpData();
         }
         return { success: true, message: data.message };
-      } else {
-        throw new Error(data.error || 'Failed to clear cache');
       }
+      throw new Error(data.error || 'Failed to clear cache');
     } catch (err) {
       setError(err.message || 'Failed to clear cache');
       return { success: false, error: err.message };