@mcp-shark/mcp-shark 1.4.0

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

@@ -0,0 +1,92 @@
+import { colors, fonts } from '../../theme';
+import { IconX, IconExternalLink } from '@tabler/icons-react';
+
+export default function ScanDetailHeader({ scanId, serverName, onClose }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '20px',
+      }}
+    >
+      <div>
+        <h2
+          style={{
+            fontSize: '16px',
+            fontWeight: '600',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            margin: 0,
+            marginBottom: '8px',
+          }}
+        >
+          {serverName}
+        </h2>
+        {scanId && (
+          <div
+            style={{
+              fontSize: '12px',
+              color: colors.textTertiary,
+              fontFamily: fonts.body,
+            }}
+          >
+            ID: {scanId}
+          </div>
+        )}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        {scanId && (
+          <a
+            href={`https://smart.mcpshark.sh/scan-results?id=${scanId}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              padding: '6px 12px',
+              background: colors.buttonPrimary,
+              border: 'none',
+              color: colors.textInverse,
+              borderRadius: '6px',
+              fontSize: '12px',
+              fontFamily: fonts.body,
+              fontWeight: '500',
+              textDecoration: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+            }}
+          >
+            <IconExternalLink size={14} stroke={1.5} />
+            View on Smart Scan
+          </a>
+        )}
+        <button
+          onClick={onClose}
+          style={{
+            padding: '6px',
+            background: 'transparent',
+            border: 'none',
+            color: colors.textSecondary,
+            cursor: 'pointer',
+            borderRadius: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = colors.bgTertiary;
+            e.currentTarget.style.color = colors.textPrimary;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = 'transparent';
+            e.currentTarget.style.color = colors.textSecondary;
+          }}
+        >
+          <IconX size={20} stroke={1.5} />
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,141 @@
+import { colors, fonts } from '../../theme';
+import AnalysisResult from './AnalysisResult';
+import { normalizeScanData } from './scanDataUtils';
+import ScanDetailHeader from './ScanDetailHeader';
+import DebugInfoSection from './DebugInfoSection';
+import ScanOverviewSection from './ScanOverviewSection';
+import ServerInfoSection from './ServerInfoSection';
+import RawDataSection from './RawDataSection';
+
+export default function ScanDetailView({ scan, loading, onClose }) {
+  if (loading) {
+    return (
+      <div
+        style={{
+          background: colors.bgCard,
+          border: `1px solid ${colors.borderLight}`,
+          borderRadius: '8px',
+          padding: '24px',
+          textAlign: 'center',
+        }}
+      >
+        <p style={{ color: colors.textSecondary, fontFamily: fonts.body }}>
+          Loading scan details...
+        </p>
+      </div>
+    );
+  }
+
+  if (!scan) {
+    return (
+      <div
+        style={{
+          background: colors.bgCard,
+          border: `1px solid ${colors.borderLight}`,
+          borderRadius: '8px',
+          padding: '24px',
+          textAlign: 'center',
+        }}
+      >
+        <p style={{ color: colors.textSecondary, fontFamily: fonts.body }}>
+          No scan data available
+        </p>
+      </div>
+    );
+  }
+
+  const {
+    scanId,
+    serverName,
+    status,
+    overallRiskLevel,
+    createdAt,
+    updatedAt,
+    analysisResult,
+    serverData,
+  } = normalizeScanData(scan);
+
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+        padding: '24px',
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+        position: 'relative',
+      }}
+    >
+      <ScanDetailHeader scanId={scanId} serverName={serverName} onClose={onClose} />
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <DebugInfoSection
+          scan={scan}
+          scanId={scanId}
+          serverName={serverName}
+          analysisResult={analysisResult}
+        />
+
+        <ScanOverviewSection
+          status={status}
+          overallRiskLevel={overallRiskLevel}
+          createdAt={createdAt}
+          updatedAt={updatedAt}
+        />
+
+        <ServerInfoSection serverData={serverData} />
+
+        {analysisResult ? (
+          <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}`,
+              }}
+            >
+              Analysis Result
+            </h3>
+            <AnalysisResult analysis={analysisResult} />
+          </div>
+        ) : (
+          <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}`,
+              }}
+            >
+              Analysis Result
+            </h3>
+            <div
+              style={{
+                padding: '12px',
+                background: colors.bgTertiary + '80',
+                borderRadius: '6px',
+                border: `1px solid ${colors.borderLight}`,
+                fontSize: '12px',
+                color: colors.textSecondary,
+                fontFamily: fonts.body,
+              }}
+            >
+              No analysis result available for this scan. Check the Raw Data section below to see
+              the scan structure.
+            </div>
+          </div>
+        )}
+
+        <RawDataSection scan={scan} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { colors, fonts } from '../../../theme';
+import { IconRefresh } from '@tabler/icons-react';
+
+export default function ScanListHeader({ scanCount, loading, onRefresh }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '16px',
+      }}
+    >
+      <h2
+        style={{
+          fontSize: '14px',
+          fontWeight: '600',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          margin: 0,
+        }}
+      >
+        All Scans ({scanCount})
+      </h2>
+      <button
+        onClick={onRefresh}
+        disabled={loading}
+        style={{
+          padding: '6px 12px',
+          background: colors.buttonSecondary,
+          border: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          borderRadius: '6px',
+          fontSize: '12px',
+          fontFamily: fonts.body,
+          fontWeight: '500',
+          cursor: loading ? 'not-allowed' : 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          opacity: loading ? 0.5 : 1,
+        }}
+      >
+        <IconRefresh size={14} stroke={1.5} />
+        Refresh
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,201 @@
+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 }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div
+      style={{
+        background: colors.bgTertiary,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          padding: '12px 16px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: '12px',
+          cursor: 'pointer',
+        }}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            flex: 1,
+            minWidth: 0,
+          }}
+        >
+          <IconChevronRight
+            size={16}
+            stroke={1.5}
+            color={colors.textSecondary}
+            style={{
+              transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+              transition: 'transform 0.2s',
+            }}
+          />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: '13px',
+                fontWeight: '600',
+                color: colors.textPrimary,
+                fontFamily: fonts.body,
+                marginBottom: '4px',
+              }}
+            >
+              {scan.server?.name || 'Unknown Server'}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                flexWrap: 'wrap',
+              }}
+            >
+              {scan.overall_risk_level && (
+                <span
+                  style={{
+                    padding: '2px 8px',
+                    borderRadius: '4px',
+                    fontSize: '10px',
+                    fontWeight: '700',
+                    fontFamily: fonts.body,
+                    background: getRiskLevelColor(scan.overall_risk_level),
+                    color: colors.textInverse,
+                  }}
+                >
+                  {scan.overall_risk_level.toLowerCase()}
+                </span>
+              )}
+              {scan.created_at && (
+                <span
+                  style={{
+                    fontSize: '11px',
+                    color: colors.textSecondary,
+                    fontFamily: fonts.body,
+                  }}
+                >
+                  {new Date(scan.created_at).toLocaleString()}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            flexShrink: 0,
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            onClick={() => {
+              onSelectScan(scan.id);
+            }}
+            style={{
+              padding: '6px 12px',
+              background: colors.buttonPrimary,
+              border: 'none',
+              color: colors.textInverse,
+              borderRadius: '6px',
+              fontSize: '11px',
+              fontFamily: fonts.body,
+              fontWeight: '500',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+            }}
+          >
+            <IconEye size={12} stroke={1.5} />
+            View
+          </button>
+          <a
+            href={`https://smart.mcpshark.sh/scan-results?id=${scan.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              padding: '6px 12px',
+              background: colors.bgSecondary,
+              border: `1px solid ${colors.borderLight}`,
+              color: colors.accentBlue,
+              borderRadius: '6px',
+              fontSize: '11px',
+              fontFamily: fonts.body,
+              fontWeight: '500',
+              textDecoration: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+            }}
+          >
+            <IconExternalLink size={12} stroke={1.5} />
+            Open
+          </a>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div
+          style={{
+            padding: '12px 16px',
+            borderTop: `1px solid ${colors.borderLight}`,
+            background: colors.bgSecondary,
+          }}
+        >
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+              gap: '12px',
+              fontSize: '12px',
+              fontFamily: fonts.body,
+            }}
+          >
+            <div>
+              <div style={{ color: colors.textTertiary, marginBottom: '4px' }}>Scan ID</div>
+              <div style={{ color: colors.textPrimary, fontWeight: '500' }}>{scan.id}</div>
+            </div>
+            {scan.server?.name && (
+              <div>
+                <div style={{ color: colors.textTertiary, marginBottom: '4px' }}>Server</div>
+                <div style={{ color: colors.textPrimary, fontWeight: '500' }}>
+                  {scan.server.name}
+                </div>
+              </div>
+            )}
+            {scan.status && (
+              <div>
+                <div style={{ color: colors.textTertiary, marginBottom: '4px' }}>Status</div>
+                <div style={{ color: colors.textPrimary, fontWeight: '500' }}>{scan.status}</div>
+              </div>
+            )}
+            {scan.created_at && (
+              <div>
+                <div style={{ color: colors.textTertiary, marginBottom: '4px' }}>Created</div>
+                <div style={{ color: colors.textPrimary, fontWeight: '500' }}>
+                  {new Date(scan.created_at).toLocaleString()}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { colors, fonts } from '../../theme';
+import ScanListHeader from './ScanListView/ScanListHeader';
+import ScanListItem from './ScanListView/ScanListItem';
+
+export default function ScanListView({ scans, loading, onRefresh, onSelectScan }) {
+  if (loading) {
+    return (
+      <div
+        style={{
+          background: colors.bgCard,
+          border: `1px solid ${colors.borderLight}`,
+          borderRadius: '8px',
+          padding: '24px',
+          textAlign: 'center',
+        }}
+      >
+        <p style={{ color: colors.textSecondary, fontFamily: fonts.body }}>Loading scans...</p>
+      </div>
+    );
+  }
+
+  if (!scans || scans.length === 0) {
+    return (
+      <div
+        style={{
+          background: colors.bgCard,
+          border: `1px solid ${colors.borderLight}`,
+          borderRadius: '8px',
+          padding: '24px',
+          textAlign: 'center',
+        }}
+      >
+        <p style={{ color: colors.textSecondary, fontFamily: fonts.body }}>
+          No scans found. Run a scan to see results here.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+        padding: '20px',
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+      }}
+    >
+      <ScanListHeader scanCount={scans.length} loading={loading} onRefresh={onRefresh} />
+      <div
+        style={{
+          padding: '8px 12px',
+          background: colors.bgSecondary,
+          border: `1px solid ${colors.borderLight}`,
+          borderRadius: '6px',
+          marginBottom: '16px',
+          fontSize: '11px',
+          color: colors.textSecondary,
+          fontFamily: fonts.body,
+          fontStyle: 'italic',
+        }}
+      >
+        ℹ️ These results are from local cache. Run a new scan to see the latest results.
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {scans.map((scan) => (
+          <ScanListItem key={scan.id} scan={scan} onSelectScan={onSelectScan} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,123 @@
+import { colors, fonts } from '../../theme';
+import { getRiskLevelColor } from './utils';
+
+export default function ScanOverviewSection({ status, overallRiskLevel, createdAt, updatedAt }) {
+  const formatDate = (dateString) => {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleString();
+  };
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+        gap: '16px',
+        padding: '16px',
+        background: colors.bgTertiary,
+        borderRadius: '8px',
+      }}
+    >
+      {status && (
+        <div>
+          <div
+            style={{
+              fontSize: '11px',
+              color: colors.textTertiary,
+              fontFamily: fonts.body,
+              marginBottom: '4px',
+            }}
+          >
+            Status
+          </div>
+          <div
+            style={{
+              fontSize: '13px',
+              color: colors.textPrimary,
+              fontFamily: fonts.body,
+              fontWeight: '500',
+            }}
+          >
+            {status}
+          </div>
+        </div>
+      )}
+      {overallRiskLevel && (
+        <div>
+          <div
+            style={{
+              fontSize: '11px',
+              color: colors.textTertiary,
+              fontFamily: fonts.body,
+              marginBottom: '4px',
+            }}
+          >
+            Overall Risk Level
+          </div>
+          <span
+            style={{
+              padding: '4px 10px',
+              borderRadius: '6px',
+              fontSize: '11px',
+              fontWeight: '700',
+              fontFamily: fonts.body,
+              background: getRiskLevelColor(overallRiskLevel),
+              color: colors.textInverse,
+              display: 'inline-block',
+            }}
+          >
+            {overallRiskLevel.toLowerCase()}
+          </span>
+        </div>
+      )}
+      {createdAt && (
+        <div>
+          <div
+            style={{
+              fontSize: '11px',
+              color: colors.textTertiary,
+              fontFamily: fonts.body,
+              marginBottom: '4px',
+            }}
+          >
+            Created At
+          </div>
+          <div
+            style={{
+              fontSize: '13px',
+              color: colors.textPrimary,
+              fontFamily: fonts.body,
+              fontWeight: '500',
+            }}
+          >
+            {formatDate(createdAt)}
+          </div>
+        </div>
+      )}
+      {updatedAt && (
+        <div>
+          <div
+            style={{
+              fontSize: '11px',
+              color: colors.textTertiary,
+              fontFamily: fonts.body,
+              marginBottom: '4px',
+            }}
+          >
+            Updated At
+          </div>
+          <div
+            style={{
+              fontSize: '13px',
+              color: colors.textPrimary,
+              fontFamily: fonts.body,
+              fontWeight: '500',
+            }}
+          >
+            {formatDate(updatedAt)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}