@mcp-shark/mcp-shark 1.4.0

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

@@ -0,0 +1,215 @@
+import { CheckIcon, CacheIcon, ExternalLinkIcon } from '../../SmartScanIcons';
+import { IconEye } from '@tabler/icons-react';
+import { colors, fonts } from '../../../theme';
+import { getRiskLevelColor } from '../utils';
+
+export default function BatchResultItem({ result, onViewScan }) {
+  // Ensure we have a valid server name
+  const serverName =
+    result.serverName || result.server_name || result.server?.name || 'Unknown Server';
+
+  console.log('[BatchResultItem] Rendering with result:', {
+    serverName: result.serverName,
+    extractedServerName: serverName,
+    hasServerName: !!result.serverName,
+    resultKeys: Object.keys(result),
+  });
+
+  return (
+    <div
+      style={{
+        background: colors.bgTertiary,
+        border: `1px solid ${result.success ? colors.borderLight : colors.error}`,
+        borderRadius: '8px',
+        padding: '10px 16px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '12px',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1, minWidth: 0 }}>
+        <h3
+          style={{
+            fontSize: '13px',
+            fontWeight: '600',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            margin: 0,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {serverName}
+        </h3>
+
+        {result.success && (
+          <>
+            {result.data?.data?.overall_risk_level && (
+              <span
+                style={{
+                  padding: '4px 10px',
+                  borderRadius: '6px',
+                  fontSize: '10px',
+                  fontWeight: '700',
+                  fontFamily: fonts.body,
+                  background: getRiskLevelColor(result.data.data.overall_risk_level),
+                  color: colors.textInverse,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {result.data.data.overall_risk_level.toLowerCase()} risk
+              </span>
+            )}
+            {onViewScan && result.data && (
+              <button
+                onClick={() => onViewScan(result.data)}
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  padding: '4px 10px',
+                  borderRadius: '6px',
+                  background: colors.buttonPrimary,
+                  border: 'none',
+                  color: colors.textInverse,
+                  cursor: 'pointer',
+                  transition: 'all 0.2s',
+                  fontSize: '11px',
+                  fontWeight: '500',
+                  fontFamily: fonts.body,
+                  whiteSpace: 'nowrap',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = colors.buttonPrimaryHover;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = colors.buttonPrimary;
+                }}
+              >
+                <IconEye size={12} stroke={1.5} />
+                <span>View</span>
+              </button>
+            )}
+            {result.data?.scan_id && (
+              <a
+                href={`https://smart.mcpshark.sh/scan-results?id=${result.data.scan_id}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  padding: '4px 10px',
+                  borderRadius: '6px',
+                  background: colors.bgSecondary,
+                  border: `1px solid ${colors.borderLight}`,
+                  color: colors.accentBlue,
+                  textDecoration: 'none',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s',
+                  fontSize: '11px',
+                  fontWeight: '500',
+                  fontFamily: fonts.body,
+                  whiteSpace: 'nowrap',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = colors.bgTertiary;
+                  e.currentTarget.style.borderColor = colors.accentBlue;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = colors.bgSecondary;
+                  e.currentTarget.style.borderColor = colors.borderLight;
+                }}
+              >
+                <span>open</span>
+                <ExternalLinkIcon size={12} color={colors.accentBlue} />
+              </a>
+            )}
+          </>
+        )}
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
+        {result.success ? (
+          <>
+            {result.cached && (
+              <span
+                style={{
+                  padding: '4px 8px',
+                  borderRadius: '6px',
+                  fontSize: '10px',
+                  fontWeight: '600',
+                  fontFamily: fonts.body,
+                  background: colors.bgSecondary,
+                  color: colors.textSecondary,
+                  border: `1px solid ${colors.borderLight}`,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  whiteSpace: 'nowrap',
+                }}
+                title="This result was retrieved from cache"
+              >
+                <CacheIcon size={10} color={colors.textSecondary} />
+                <span>Cached</span>
+              </span>
+            )}
+            <span
+              style={{
+                padding: '4px 8px',
+                borderRadius: '6px',
+                fontSize: '10px',
+                fontWeight: '700',
+                fontFamily: fonts.body,
+                background: colors.accentGreen,
+                color: colors.textInverse,
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              <CheckIcon size={10} color={colors.textInverse} />
+              <span>Success</span>
+            </span>
+          </>
+        ) : (
+          <>
+            <span
+              style={{
+                padding: '4px 8px',
+                borderRadius: '6px',
+                fontSize: '10px',
+                fontWeight: '700',
+                fontFamily: fonts.body,
+                background: colors.error,
+                color: colors.textInverse,
+                whiteSpace: 'nowrap',
+              }}
+            >
+              ✗ Failed
+            </span>
+            {result.error && (
+              <span
+                style={{
+                  fontSize: '11px',
+                  color: colors.error,
+                  fontFamily: fonts.body,
+                  whiteSpace: 'nowrap',
+                  maxWidth: '200px',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+                title={result.error}
+              >
+                {result.error}
+              </span>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { CheckIcon, CacheIcon } from '../../SmartScanIcons';
+import { colors, fonts } from '../../../theme';
+
+export default function BatchResultsHeader({ scanResults }) {
+  const cachedCount = scanResults.filter((r) => r.cached).length;
+  const scannedCount = scanResults.filter((r) => r.success && !r.cached).length;
+  const allCached = scanResults.every((r) => r.cached);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '16px',
+      }}
+    >
+      <div>
+        <h2
+          style={{
+            fontSize: '14px',
+            fontWeight: '600',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            margin: 0,
+            marginBottom: '4px',
+          }}
+        >
+          Scan Results ({scanResults.length} server{scanResults.length !== 1 ? 's' : ''})
+        </h2>
+        {allCached && (
+          <p
+            style={{
+              fontSize: '12px',
+              color: colors.textTertiary,
+              fontFamily: fonts.body,
+              margin: 0,
+            }}
+          >
+            Showing cached results. Run a new scan to get the latest analysis.
+          </p>
+        )}
+      </div>
+      {scanResults.length > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            gap: '12px',
+            alignItems: 'center',
+            fontSize: '13px',
+            color: colors.textSecondary,
+            fontFamily: fonts.body,
+          }}
+        >
+          {cachedCount > 0 && (
+            <span
+              style={{
+                padding: '6px 10px',
+                background: colors.bgTertiary,
+                borderRadius: '6px',
+                fontSize: '11px',
+                fontWeight: '600',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+                fontFamily: fonts.body,
+              }}
+            >
+              <CacheIcon size={12} color={colors.textSecondary} />
+              <span>{cachedCount} cached</span>
+            </span>
+          )}
+          {scannedCount > 0 && (
+            <span
+              style={{
+                padding: '6px 10px',
+                background: colors.bgTertiary,
+                borderRadius: '6px',
+                fontSize: '11px',
+                fontWeight: '600',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+              }}
+            >
+              <CheckIcon size={12} color={colors.accentGreen} />
+              <span>{scannedCount} scanned</span>
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { colors } from '../../theme';
+import BatchResultsHeader from './BatchResultsDisplay/BatchResultsHeader';
+import BatchResultItem from './BatchResultsDisplay/BatchResultItem';
+
+export default function BatchResultsDisplay({ scanResults, onViewScan }) {
+  if (scanResults.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+        padding: '20px',
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+      }}
+    >
+      <BatchResultsHeader scanResults={scanResults} />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {scanResults.map((result, idx) => (
+          <BatchResultItem key={idx} result={result} onViewScan={onViewScan} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { colors, fonts } from '../../theme';
+
+export default function DebugInfoSection({ scan, scanId, serverName, analysisResult }) {
+  return (
+    <details style={{ marginBottom: '16px' }}>
+      <summary
+        style={{
+          cursor: 'pointer',
+          padding: '8px 12px',
+          background: colors.bgTertiary,
+          borderRadius: '6px',
+          fontSize: '11px',
+          fontFamily: fonts.body,
+          color: colors.textSecondary,
+          border: `1px solid ${colors.borderLight}`,
+          userSelect: 'none',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.bgSecondary;
+          e.currentTarget.style.color = colors.textPrimary;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = colors.bgTertiary;
+          e.currentTarget.style.color = colors.textSecondary;
+        }}
+      >
+        Debug Info (click to expand)
+      </summary>
+      <div
+        style={{
+          marginTop: '8px',
+          padding: '12px',
+          background: colors.bgTertiary,
+          borderRadius: '6px',
+          fontSize: '11px',
+          fontFamily: 'monospace',
+          border: `1px solid ${colors.borderLight}`,
+        }}
+      >
+        <div style={{ fontSize: '10px', color: colors.textSecondary, lineHeight: '1.6' }}>
+          <div>scanId: {scanId ? `"${scanId}"` : 'missing'}</div>
+          <div>serverName: "{serverName}"</div>
+          <div>analysisResult: {analysisResult ? 'found' : 'missing'}</div>
+          <div>has scan.result: {scan.result ? 'yes' : 'no'}</div>
+          <div>has scan.data: {scan.data ? 'yes' : 'no'}</div>
+          <div>scan keys: {Object.keys(scan || {}).join(', ')}</div>
+          {scan.result && <div>scan.result keys: {Object.keys(scan.result || {}).join(', ')}</div>}
+          {scan.data && <div>scan.data keys: {Object.keys(scan.data || {}).join(', ')}</div>}
+        </div>
+      </div>
+    </details>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { colors, fonts } from '../../theme';
+
+export default function EmptyState() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '400px',
+        textAlign: 'center',
+        padding: '40px',
+      }}
+    >
+      <div style={{ marginBottom: '24px', opacity: 0.6 }}>
+        <svg
+          width={64}
+          height={64}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={colors.textTertiary}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ opacity: 0.5 }}
+        >
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          <path d="M9 12l2 2 4-4" />
+        </svg>
+      </div>
+      <h3
+        style={{
+          fontSize: '20px',
+          fontWeight: '600',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          marginBottom: '8px',
+        }}
+      >
+        Ready to Scan
+      </h3>
+      <p
+        style={{
+          fontSize: '14px',
+          color: colors.textSecondary,
+          fontFamily: fonts.body,
+          maxWidth: '400px',
+          lineHeight: '1.6',
+        }}
+      >
+        Configure your API token and discover MCP servers to start security scanning. Results will
+        appear here.
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { AlertIcon } from '../SmartScanIcons';
+import { colors, fonts } from '../../theme';
+
+export default function ErrorDisplay({ error }) {
+  if (!error) return null;
+
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.error}`,
+        borderRadius: '12px',
+        padding: '16px 20px',
+        marginBottom: '24px',
+        display: 'flex',
+        gap: '12px',
+        alignItems: 'flex-start',
+      }}
+    >
+      <AlertIcon size={20} color={colors.error} style={{ flexShrink: 0, marginTop: '2px' }} />
+      <div style={{ flex: 1 }}>
+        <p
+          style={{
+            fontSize: '14px',
+            color: colors.error,
+            fontFamily: fonts.body,
+            margin: 0,
+            fontWeight: '600',
+            marginBottom: '4px',
+          }}
+        >
+          Error
+        </p>
+        <p
+          style={{
+            fontSize: '13px',
+            color: colors.textSecondary,
+            fontFamily: fonts.body,
+            margin: 0,
+            lineHeight: '1.5',
+          }}
+        >
+          {error}
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { colors, fonts } from '../../theme';
+
+export default function ExpandableSection({ title, count, children, defaultExpanded = false }) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div
+      style={{
+        background: colors.bgTertiary,
+        borderRadius: '8px',
+        border: `1px solid ${colors.borderLight}`,
+        overflow: 'hidden',
+      }}
+    >
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          width: '100%',
+          padding: '8px 12px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          background: 'transparent',
+          border: 'none',
+          cursor: 'pointer',
+          fontFamily: fonts.body,
+          transition: 'background 0.15s',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.bgCard;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = 'transparent';
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <span
+            style={{
+              fontSize: '12px',
+              fontWeight: '600',
+              color: colors.textPrimary,
+              fontFamily: fonts.body,
+            }}
+          >
+            {title}
+          </span>
+          {count !== undefined && (
+            <span
+              style={{
+                padding: '2px 6px',
+                background: colors.bgCard,
+                borderRadius: '4px',
+                fontSize: '10px',
+                fontWeight: '500',
+                color: colors.textSecondary,
+                border: `1px solid ${colors.borderLight}`,
+                fontFamily: fonts.body,
+              }}
+            >
+              {count}
+            </span>
+          )}
+        </div>
+        <svg
+          style={{
+            width: '14px',
+            height: '14px',
+            color: colors.textSecondary,
+            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.15s',
+          }}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {isExpanded && (
+        <div
+          style={{
+            padding: '12px',
+            borderTop: `1px solid ${colors.borderLight}`,
+            background: colors.bgCard,
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}