@mcp-shark/mcp-shark 1.4.0

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

@@ -0,0 +1,35 @@
+import { colors } from '../../theme';
+import EmptyState from './EmptyState';
+import ErrorDisplay from './ErrorDisplay';
+import ScanningProgress from './ScanningProgress';
+import BatchResultsDisplay from './BatchResultsDisplay';
+import SingleResultDisplay from './SingleResultDisplay';
+
+export default function ScanResultsDisplay({
+  error,
+  scanning,
+  selectedServers,
+  scanResults,
+  scanResult,
+  onViewScan,
+}) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        padding: '24px',
+        background: colors.bgPrimary,
+      }}
+    >
+      {!error && scanResults.length === 0 && !scanResult && !scanning && <EmptyState />}
+      <ErrorDisplay error={error} />
+      <ScanningProgress scanning={scanning} selectedServers={selectedServers} />
+      {scanResults.length > 0 && (
+        <BatchResultsDisplay scanResults={scanResults} onViewScan={onViewScan} />
+      )}
+      {scanResult && scanResults.length === 0 && <SingleResultDisplay scanResult={scanResult} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { colors } from '../../theme';
+import ServerSelectionRow from './ServerSelectionRow';
+import ScanResultsDisplay from './ScanResultsDisplay';
+import ScanDetailView from './ScanDetailView';
+
+export default function ScanViewContent({
+  discoveredServers,
+  selectedServers,
+  setSelectedServers,
+  runScan,
+  scanning,
+  apiToken,
+  error,
+  scanResults,
+  scanResult,
+  selectedScan,
+  loadingScanDetail,
+  setSelectedScan,
+  loadScanDetail,
+  onViewScan,
+}) {
+  if (selectedScan) {
+    return (
+      <div
+        style={{
+          flex: 1,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          padding: '24px',
+          background: colors.bgPrimary,
+        }}
+      >
+        <ScanDetailView
+          scan={selectedScan}
+          loading={loadingScanDetail}
+          onClose={() => {
+            setSelectedScan(null);
+            loadScanDetail(null);
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {discoveredServers.length > 0 && (
+        <ServerSelectionRow
+          discoveredServers={discoveredServers}
+          selectedServers={selectedServers}
+          setSelectedServers={setSelectedServers}
+          runScan={runScan}
+          scanning={scanning}
+          apiToken={apiToken}
+        />
+      )}
+
+      <ScanResultsDisplay
+        error={error}
+        scanning={scanning}
+        selectedServers={selectedServers}
+        scanResults={scanResults}
+        scanResult={scanResult}
+        onViewScan={onViewScan}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { LoadingSpinner } from '../SmartScanIcons';
+import { colors, fonts } from '../../theme';
+
+export default function ScanningProgress({ scanning, selectedServers }) {
+  if (!scanning) return null;
+
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '12px',
+        padding: '24px',
+        marginBottom: '24px',
+        boxShadow: `0 2px 8px ${colors.shadowSm}`,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <LoadingSpinner size={20} />
+        <div style={{ flex: 1 }}>
+          <p
+            style={{
+              fontSize: '14px',
+              fontWeight: '600',
+              color: colors.textPrimary,
+              fontFamily: fonts.body,
+              margin: 0,
+              marginBottom: '4px',
+            }}
+          >
+            Scanning {selectedServers.size} server{selectedServers.size !== 1 ? 's' : ''}...
+          </p>
+          <p
+            style={{
+              fontSize: '12px',
+              color: colors.textSecondary,
+              fontFamily: fonts.body,
+              margin: 0,
+            }}
+          >
+            Analyzing security vulnerabilities and risks
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { colors, fonts } from '../../theme';
+
+export default function ServerInfoSection({ serverData }) {
+  if (!serverData) return null;
+
+  return (
+    <div style={{ marginBottom: '24px' }}>
+      <h3
+        style={{
+          fontSize: '13px',
+          fontWeight: '600',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          marginBottom: '12px',
+          paddingBottom: '8px',
+          borderBottom: `1px solid ${colors.borderLight}`,
+        }}
+      >
+        Server Information
+      </h3>
+      <div
+        style={{
+          padding: '12px',
+          background: colors.bgTertiary,
+          borderRadius: '6px',
+          fontSize: '12px',
+          fontFamily: fonts.body,
+        }}
+      >
+        <div style={{ marginBottom: '8px' }}>
+          <strong style={{ color: colors.textTertiary }}>Name: </strong>
+          <span style={{ color: colors.textPrimary }}>{serverData.name || 'N/A'}</span>
+        </div>
+        {serverData.description && (
+          <div>
+            <strong style={{ color: colors.textTertiary }}>Description: </strong>
+            <span style={{ color: colors.textPrimary }}>{serverData.description}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,207 @@
+import { CheckIcon, ShieldIcon, LoadingSpinner } from '../SmartScanIcons';
+import { colors, fonts } from '../../theme';
+
+export default function ServerSelectionRow({
+  discoveredServers,
+  selectedServers,
+  setSelectedServers,
+  runScan,
+  scanning,
+  apiToken,
+}) {
+  const toggleSelectAll = () => {
+    if (selectedServers.size === discoveredServers.length) {
+      setSelectedServers(new Set());
+    } else {
+      setSelectedServers(new Set(discoveredServers.map((s) => s.name)));
+    }
+  };
+
+  return (
+    <div
+      style={{
+        background: colors.bgSecondary,
+        borderBottom: `1px solid ${colors.borderLight}`,
+        padding: '12px 24px',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px',
+          flexWrap: 'wrap',
+        }}
+      >
+        <div
+          style={{
+            fontSize: '12px',
+            fontWeight: '600',
+            color: colors.textSecondary,
+            fontFamily: fonts.body,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          Select servers to scan:
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            flexWrap: 'wrap',
+            flex: 1,
+          }}
+        >
+          {discoveredServers.map((server, idx) => {
+            const isSelected = selectedServers.has(server.name);
+            return (
+              <label
+                key={idx}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  padding: '8px 12px',
+                  background: isSelected ? colors.bgCard : colors.bgTertiary,
+                  border: `1px solid ${isSelected ? colors.accentBlue : colors.borderLight}`,
+                  borderRadius: '8px',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                  fontSize: '12px',
+                  fontFamily: fonts.body,
+                  fontWeight: isSelected ? '600' : '500',
+                  color: isSelected ? colors.textPrimary : colors.textSecondary,
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.borderColor = colors.accentBlue;
+                  e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected) {
+                    e.currentTarget.style.borderColor = colors.borderLight;
+                    e.currentTarget.style.boxShadow = 'none';
+                  }
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={isSelected}
+                  onChange={(e) => {
+                    const newSelected = new Set(selectedServers);
+                    if (e.target.checked) {
+                      newSelected.add(server.name);
+                    } else {
+                      newSelected.delete(server.name);
+                    }
+                    setSelectedServers(newSelected);
+                  }}
+                  style={{
+                    width: '16px',
+                    height: '16px',
+                    cursor: 'pointer',
+                    accentColor: colors.accentBlue,
+                  }}
+                />
+                <span>{server.name}</span>
+                <span
+                  style={{
+                    fontSize: '10px',
+                    color: colors.textTertiary,
+                    fontWeight: '400',
+                  }}
+                >
+                  ({server.tools?.length || 0} tools, {server.resources?.length || 0} resources,{' '}
+                  {server.prompts?.length || 0} prompts)
+                </span>
+              </label>
+            );
+          })}
+        </div>
+        <button
+          onClick={toggleSelectAll}
+          style={{
+            padding: '6px 12px',
+            background: colors.buttonSecondary,
+            color: colors.textPrimary,
+            border: `1px solid ${colors.borderMedium}`,
+            borderRadius: '6px',
+            fontSize: '11px',
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
+            whiteSpace: 'nowrap',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = colors.buttonSecondaryHover;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = colors.buttonSecondary;
+          }}
+        >
+          {selectedServers.size === discoveredServers.length ? 'Deselect All' : 'Select All'}
+        </button>
+        <button
+          onClick={runScan}
+          disabled={!apiToken || selectedServers.size === 0 || scanning}
+          style={{
+            padding: '8px 16px',
+            background:
+              apiToken && selectedServers.size > 0 && !scanning
+                ? colors.buttonPrimary
+                : colors.buttonSecondary,
+            color:
+              apiToken && selectedServers.size > 0 && !scanning
+                ? colors.textInverse
+                : colors.textTertiary,
+            border: 'none',
+            borderRadius: '6px',
+            fontSize: '13px',
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            cursor: apiToken && selectedServers.size > 0 && !scanning ? 'pointer' : 'not-allowed',
+            transition: 'all 0.2s ease',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            whiteSpace: 'nowrap',
+          }}
+          onMouseEnter={(e) => {
+            if (apiToken && selectedServers.size > 0 && !scanning) {
+              e.currentTarget.style.background = colors.buttonPrimaryHover;
+              e.currentTarget.style.transform = 'translateY(-1px)';
+              e.currentTarget.style.boxShadow = `0 4px 12px ${colors.shadowMd}`;
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (apiToken && selectedServers.size > 0 && !scanning) {
+              e.currentTarget.style.background = colors.buttonPrimary;
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = 'none';
+            }
+          }}
+        >
+          {scanning ? (
+            <>
+              <LoadingSpinner size={14} color={colors.textInverse} />
+              <span>
+                Scanning {selectedServers.size} server{selectedServers.size !== 1 ? 's' : ''}...
+              </span>
+            </>
+          ) : (
+            <>
+              <ShieldIcon
+                size={14}
+                color={
+                  apiToken && selectedServers.size > 0 ? colors.textInverse : colors.textTertiary
+                }
+              />
+              <span>Run Scan ({selectedServers.size})</span>
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,269 @@
+import { ExternalLinkIcon } from '../SmartScanIcons';
+import { colors, fonts } from '../../theme';
+import { getRiskLevelColor } from './utils';
+
+export default function SingleResultDisplay({ scanResult }) {
+  if (!scanResult) return null;
+
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+        padding: '20px',
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+      }}
+    >
+      <h2
+        style={{
+          fontSize: '16px',
+          fontWeight: '600',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          marginBottom: '16px',
+        }}
+      >
+        Scan Results
+      </h2>
+
+      {/* Overall Risk */}
+      {scanResult.data?.overall_risk_level && (
+        <div
+          style={{
+            background: colors.bgTertiary,
+            border: `1px solid ${colors.borderLight}`,
+            borderRadius: '8px',
+            padding: '16px',
+            marginBottom: '20px',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '12px',
+              marginBottom: '8px',
+            }}
+          >
+            <span
+              style={{
+                padding: '4px 12px',
+                borderRadius: '6px',
+                fontSize: '12px',
+                fontWeight: '700',
+                fontFamily: fonts.body,
+                background: getRiskLevelColor(scanResult.data.overall_risk_level),
+                color: colors.textInverse,
+              }}
+            >
+              {scanResult.data.overall_risk_level.toUpperCase()}
+            </span>
+            <span
+              style={{
+                fontSize: '14px',
+                color: colors.textSecondary,
+                fontFamily: fonts.body,
+              }}
+            >
+              Overall Risk Level
+            </span>
+          </div>
+          {scanResult.data.overall_reason && (
+            <p
+              style={{
+                fontSize: '13px',
+                color: colors.textSecondary,
+                fontFamily: fonts.body,
+                margin: 0,
+              }}
+            >
+              {scanResult.data.overall_reason}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Findings Summary */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: '12px',
+          marginBottom: '20px',
+        }}
+      >
+        {scanResult.data?.tool_findings?.length > 0 && (
+          <div
+            style={{
+              background: colors.bgTertiary,
+              border: `1px solid ${colors.borderLight}`,
+              borderRadius: '8px',
+              padding: '12px',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: '700',
+                color: colors.textPrimary,
+                fontFamily: fonts.body,
+              }}
+            >
+              {scanResult.data.tool_findings.length}
+            </div>
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                fontFamily: fonts.body,
+              }}
+            >
+              Tool Findings
+            </div>
+          </div>
+        )}
+        {scanResult.data?.resource_findings?.length > 0 && (
+          <div
+            style={{
+              background: colors.bgTertiary,
+              border: `1px solid ${colors.borderLight}`,
+              borderRadius: '8px',
+              padding: '12px',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: '700',
+                color: colors.textPrimary,
+                fontFamily: fonts.body,
+              }}
+            >
+              {scanResult.data.resource_findings.length}
+            </div>
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                fontFamily: fonts.body,
+              }}
+            >
+              Resource Findings
+            </div>
+          </div>
+        )}
+        {scanResult.data?.prompt_findings?.length > 0 && (
+          <div
+            style={{
+              background: colors.bgTertiary,
+              border: `1px solid ${colors.borderLight}`,
+              borderRadius: '8px',
+              padding: '12px',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: '700',
+                color: colors.textPrimary,
+                fontFamily: fonts.body,
+              }}
+            >
+              {scanResult.data.prompt_findings.length}
+            </div>
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                fontFamily: fonts.body,
+              }}
+            >
+              Prompt Findings
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Recommendations */}
+      {scanResult.data?.recommendations?.length > 0 && (
+        <div
+          style={{
+            background: colors.bgTertiary,
+            border: `1px solid ${colors.borderLight}`,
+            borderRadius: '8px',
+            padding: '16px',
+            marginBottom: '20px',
+          }}
+        >
+          <h3
+            style={{
+              fontSize: '14px',
+              fontWeight: '600',
+              color: colors.textPrimary,
+              fontFamily: fonts.body,
+              marginBottom: '12px',
+            }}
+          >
+            Recommendations
+          </h3>
+          <ul
+            style={{
+              margin: 0,
+              paddingLeft: '20px',
+              fontSize: '13px',
+              color: colors.textSecondary,
+              fontFamily: fonts.body,
+              lineHeight: '1.8',
+            }}
+          >
+            {scanResult.data.recommendations.map((rec, idx) => (
+              <li key={idx}>{rec}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* View Full Results Link */}
+      {scanResult.scan_id && (
+        <div
+          style={{
+            marginTop: '20px',
+            paddingTop: '20px',
+            borderTop: `1px solid ${colors.borderLight}`,
+          }}
+        >
+          <a
+            href={`https://smart.mcpshark.sh/scan-results?id=${scanResult.scan_id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '10px 20px',
+              background: colors.buttonSecondary,
+              color: colors.textPrimary,
+              border: `1px solid ${colors.borderMedium}`,
+              borderRadius: '8px',
+              textDecoration: 'none',
+              fontSize: '13px',
+              fontWeight: '600',
+              fontFamily: fonts.body,
+              transition: 'all 0.2s ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = colors.buttonSecondaryHover;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = colors.buttonSecondary;
+            }}
+          >
+            <span>View Full Results</span>
+            <ExternalLinkIcon size={14} color={colors.textPrimary} />
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}