@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/RequestRow/ResponseRow.jsx

@@ -0,0 +1,158 @@
+import { colors, fonts } from '../../theme';
+import {
+  formatRelativeTime,
+  formatDateTime,
+  getSourceDest,
+  getEndpoint,
+} from '../../utils/requestUtils.js';
+
+export default function ResponseRow({ response, selected, firstRequestTime, onSelect, request }) {
+  const isSelected = selected?.frame_number === response.frame_number;
+  const { source, dest } = getSourceDest(response);
+  const relativeTime = formatRelativeTime(response.timestamp_iso, firstRequestTime);
+
+  return (
+    <tr
+      onClick={() => onSelect(response)}
+      style={{
+        cursor: 'pointer',
+        background:
+          isSelected && selected?.frame_number === response.frame_number
+            ? colors.bgSelected
+            : colors.bgTertiary,
+        borderBottom: `1px solid ${colors.borderLight}`,
+        fontFamily: fonts.body,
+        transition: 'background-color 0.15s ease',
+      }}
+      onMouseEnter={(e) => {
+        if (!(isSelected && selected?.frame_number === response.frame_number)) {
+          e.currentTarget.style.background = colors.bgSecondary;
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!(isSelected && selected?.frame_number === response.frame_number)) {
+          e.currentTarget.style.background = colors.bgTertiary;
+        }
+      }}
+    >
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          textAlign: 'right',
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          paddingLeft: '40px',
+        }}
+      >
+        <span style={{ color: colors.accentGreen, fontWeight: '500' }}>
+          #{response.frame_number}
+        </span>
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+        }}
+      >
+        {relativeTime}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          fontSize: '12px',
+        }}
+      >
+        {formatDateTime(response.timestamp_iso)}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.accentGreen,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        {source}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.accentGreen,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        {dest}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        {response.protocol || 'HTTP'}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textSecondary,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        -
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        <div
+          style={{
+            color:
+              response.status_code >= 400
+                ? colors.error
+                : response.status_code >= 300
+                  ? colors.warning
+                  : colors.success,
+            fontWeight: '600',
+          }}
+        >
+          {response.status_code || '-'}
+        </div>
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          color: colors.textPrimary,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+        }}
+      >
+        {getEndpoint(response)}
+      </td>
+    </tr>
+  );
+}

package/ui/src/components/RequestRow.jsx

@@ -0,0 +1,70 @@
+import OrphanedResponseRow from './RequestRow/OrphanedResponseRow';
+import RequestRowMain from './RequestRow/RequestRowMain';
+import ResponseRow from './RequestRow/ResponseRow';
+
+function RequestRow({
+  pair,
+  request: requestProp,
+  selected,
+  firstRequestTime,
+  onSelect,
+  isExpanded = false,
+  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 {
+    return null; // No valid data
+  }
+
+  // Check if this is an unpaired request or response
+  const isUnpaired = !request || !response;
+
+  // Handle orphaned response (response without request)
+  if (!request && response) {
+    return (
+      <OrphanedResponseRow
+        response={response}
+        selected={selected}
+        firstRequestTime={firstRequestTime}
+        onSelect={onSelect}
+      />
+    );
+  }
+
+  if (!request) return null; // Only show rows that have a request
+
+  const hasResponse = !!response;
+
+  return (
+    <>
+      <RequestRowMain
+        request={request}
+        response={response}
+        selected={selected}
+        firstRequestTime={firstRequestTime}
+        onSelect={onSelect}
+        isExpanded={isExpanded}
+        onToggleExpand={onToggleExpand}
+        isUnpaired={isUnpaired}
+      />
+      {hasResponse && isExpanded && (
+        <ResponseRow
+          response={response}
+          selected={selected}
+          firstRequestTime={firstRequestTime}
+          onSelect={onSelect}
+          request={request}
+        />
+      )}
+    </>
+  );
+}
+
+export default RequestRow;

package/ui/src/components/ServerControl.jsx

@@ -0,0 +1,133 @@
+import { colors, fonts } from '../theme';
+
+function ServerControl({ status, loading, onStart, onStop, canStart }) {
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '12px',
+        padding: '24px',
+        marginBottom: '20px',
+        boxShadow: `0 2px 4px ${colors.shadowSm}`,
+      }}
+    >
+      <div style={{ marginBottom: '16px' }}>
+        <h3
+          style={{
+            fontSize: '15px',
+            fontWeight: '600',
+            marginBottom: '8px',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+          }}
+        >
+          Server Control
+        </h3>
+      </div>
+
+      <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
+        {status.running ? (
+          <button
+            onClick={onStop}
+            disabled={loading}
+            style={{
+              padding: '10px 20px',
+              background: colors.buttonDanger,
+              border: `1px solid ${colors.buttonDanger}`,
+              color: colors.textInverse,
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '13px',
+              fontFamily: fonts.body,
+              fontWeight: '500',
+              borderRadius: '8px',
+              opacity: loading ? 0.5 : 1,
+              transition: 'all 0.2s',
+              boxShadow: `0 2px 4px ${colors.shadowSm}`,
+            }}
+            onMouseEnter={(e) => {
+              if (!loading) {
+                e.currentTarget.style.background = colors.buttonDangerHover;
+                e.currentTarget.style.transform = 'translateY(-1px)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = colors.buttonDanger;
+              e.currentTarget.style.transform = 'translateY(0)';
+            }}
+          >
+            {loading ? 'Stopping...' : 'Stop MCP Shark'}
+          </button>
+        ) : (
+          <button
+            data-tour="start-button"
+            onClick={onStart}
+            disabled={loading || !canStart}
+            style={{
+              padding: '10px 20px',
+              background: colors.buttonPrimary,
+              border: `1px solid ${colors.buttonPrimary}`,
+              color: colors.textInverse,
+              cursor: loading || !canStart ? 'not-allowed' : 'pointer',
+              fontSize: '13px',
+              fontFamily: fonts.body,
+              fontWeight: '500',
+              borderRadius: '8px',
+              opacity: loading || !canStart ? 0.5 : 1,
+              transition: 'all 0.2s',
+              boxShadow: `0 2px 4px ${colors.shadowSm}`,
+            }}
+            onMouseEnter={(e) => {
+              if (!loading && canStart) {
+                e.currentTarget.style.background = colors.buttonPrimaryHover;
+                e.currentTarget.style.transform = 'translateY(-1px)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = colors.buttonPrimary;
+              e.currentTarget.style.transform = 'translateY(0)';
+            }}
+          >
+            {loading ? 'Processing...' : 'Start MCP Shark'}
+          </button>
+        )}
+
+        <div
+          style={{
+            marginLeft: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            padding: '8px 16px',
+            background: colors.bgPrimary,
+            border: `1px solid ${colors.borderLight}`,
+            borderRadius: '8px',
+          }}
+        >
+          <div
+            style={{
+              width: '10px',
+              height: '10px',
+              borderRadius: '50%',
+              background: status.running ? colors.success : colors.textTertiary,
+              boxShadow: status.running ? `0 0 8px ${colors.success}80` : 'none',
+              transition: 'all 0.3s',
+            }}
+          />
+          <span
+            style={{
+              color: colors.textPrimary,
+              fontSize: '13px',
+              fontWeight: '500',
+              fontFamily: fonts.body,
+            }}
+          >
+            {status.running ? `Running (PID: ${status.pid})` : 'Stopped'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ServerControl;

package/ui/src/components/ServiceSelector.jsx

@@ -0,0 +1,209 @@
+import { colors, fonts, withOpacity } from '../theme';
+
+function ServiceSelector({ services, selectedServices, onSelectionChange }) {
+  if (services.length === 0) {
+    return null;
+  }
+
+  return (
+    <div style={{ marginTop: '16px' }}>
+      <div style={{ marginBottom: '12px' }}>
+        <h3
+          style={{
+            fontSize: '15px',
+            fontWeight: '600',
+            marginBottom: '8px',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+          }}
+        >
+          Select Services
+        </h3>
+        <p
+          style={{
+            fontSize: '13px',
+            color: colors.textSecondary,
+            lineHeight: '1.5',
+            fontFamily: fonts.body,
+          }}
+        >
+          Choose which services to include in the MCP Shark server. Only selected services will be
+          available.
+        </p>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          gap: '8px',
+          marginBottom: '12px',
+          flexWrap: 'wrap',
+        }}
+      >
+        <button
+          onClick={() => {
+            onSelectionChange(new Set(services.map((s) => s.name)));
+          }}
+          style={{
+            padding: '4px 12px',
+            background: 'transparent',
+            border: `1px solid ${colors.borderMedium}`,
+            color: colors.textSecondary,
+            cursor: 'pointer',
+            fontSize: '12px',
+            borderRadius: '8px',
+          }}
+        >
+          Select All
+        </button>
+        <button
+          onClick={() => {
+            onSelectionChange(new Set());
+          }}
+          style={{
+            padding: '4px 12px',
+            background: 'transparent',
+            border: `1px solid ${colors.borderMedium}`,
+            color: colors.textSecondary,
+            cursor: 'pointer',
+            fontSize: '12px',
+            borderRadius: '8px',
+          }}
+        >
+          Deselect All
+        </button>
+        <div
+          style={{
+            marginLeft: 'auto',
+            fontSize: '12px',
+            color: colors.textSecondary,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          {selectedServices.size} of {services.length} selected
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          maxHeight: '300px',
+          overflowY: 'auto',
+          padding: '8px',
+          background: colors.bgPrimary,
+          borderRadius: '4px',
+          border: `1px solid ${colors.borderLight}`,
+        }}
+      >
+        {services.map((service) => {
+          const isSelected = selectedServices.has(service.name);
+          return (
+            <label
+              key={service.name}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                padding: '10px',
+                background: isSelected ? colors.bgSelected : 'transparent',
+                border: `1px solid ${isSelected ? colors.accentBlue : colors.borderMedium}`,
+                borderRadius: '8px',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+              }}
+              onMouseEnter={(e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.background = colors.bgHover;
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.background = 'transparent';
+                }
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={isSelected}
+                onChange={(e) => {
+                  const newSelected = new Set(selectedServices);
+                  if (e.target.checked) {
+                    newSelected.add(service.name);
+                  } else {
+                    newSelected.delete(service.name);
+                  }
+                  onSelectionChange(newSelected);
+                }}
+                style={{
+                  width: '18px',
+                  height: '18px',
+                  cursor: 'pointer',
+                }}
+              />
+              <div style={{ flex: 1 }}>
+                <div
+                  style={{
+                    fontWeight: '500',
+                    color: colors.textPrimary,
+                    fontSize: '13px',
+                    marginBottom: '4px',
+                  }}
+                >
+                  {service.name}
+                </div>
+                <div
+                  style={{
+                    fontSize: '11px',
+                    color: colors.textSecondary,
+                    display: 'flex',
+                    gap: '12px',
+                    flexWrap: 'wrap',
+                  }}
+                >
+                  <span
+                    style={{
+                      padding: '2px 6px',
+                      background: service.type === 'http' ? '#0e639c' : '#4a9e5f',
+                      color: colors.textInverse,
+                      borderRadius: '6px',
+                      fontSize: '10px',
+                      fontWeight: '500',
+                    }}
+                  >
+                    {service.type.toUpperCase()}
+                  </span>
+                  {service.url && (
+                    <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>{service.url}</span>
+                  )}
+                  {service.command && (
+                    <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>
+                      {service.command} {service.args?.join(' ') || ''}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </label>
+          );
+        })}
+      </div>
+      {selectedServices.size === 0 && (
+        <div
+          style={{
+            marginTop: '8px',
+            padding: '8px 12px',
+            background: withOpacity(colors.error, 0.15),
+            border: `1px solid ${colors.error}`,
+            borderRadius: '8px',
+            color: colors.error,
+            fontSize: '12px',
+          }}
+        >
+          ⚠️ Please select at least one service to start the server
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ServiceSelector;

package/ui/src/components/SetupHeader.jsx

@@ -0,0 +1,30 @@
+import { colors, fonts } from '../theme';
+
+export default function SetupHeader() {
+  return (
+    <div style={{ marginBottom: '24px' }}>
+      <h2
+        style={{
+          fontSize: '24px',
+          fontWeight: '700',
+          marginBottom: '12px',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+        }}
+      >
+        MCP Shark Server Setup
+      </h2>
+      <p
+        style={{
+          fontSize: '15px',
+          color: colors.textSecondary,
+          lineHeight: '1.6',
+          fontFamily: fonts.body,
+        }}
+      >
+        Convert your MCP configuration file and start the MCP Shark server to aggregate multiple MCP
+        servers into a single endpoint.
+      </p>
+    </div>
+  );
+}

package/ui/src/components/SharkLogo.jsx

@@ -0,0 +1,21 @@
+// Shark Logo Component
+// Uses the og-image.png logo
+
+export const SharkLogo = ({ size = 32, className = '', style = {} }) => {
+  return (
+    <img
+      src="/og-image.png"
+      alt="MCP Shark Logo"
+      width={size}
+      height={size}
+      className={className}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        objectFit: 'contain',
+        ...style,
+      }}
+      aria-label="MCP Shark Logo"
+    />
+  );
+};

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

@@ -0,0 +1,64 @@
+import { colors, fonts } from '../../theme';
+import ExpandableSection from './ExpandableSection';
+import FindingsTable from './FindingsTable';
+import OverallSummarySection from './OverallSummarySection';
+import RecommendationsSection from './RecommendationsSection';
+import NotablePatternsSection from './NotablePatternsSection';
+
+export default function AnalysisResult({ analysis }) {
+  if (!analysis) {
+    return (
+      <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 data available.
+      </div>
+    );
+  }
+
+  const toolFindings = analysis.tool_findings || [];
+  const promptFindings = analysis.prompt_findings || [];
+  const resourceFindings = analysis.resource_findings || [];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <OverallSummarySection
+        overallRiskLevel={analysis.overall_risk_level}
+        overallReason={analysis.overall_reason}
+      />
+      {toolFindings.length > 0 && (
+        <ExpandableSection title="Tool Findings" count={toolFindings.length} defaultExpanded={true}>
+          <FindingsTable findings={toolFindings} type="tool" />
+        </ExpandableSection>
+      )}
+      {promptFindings.length > 0 && (
+        <ExpandableSection
+          title="Prompt Findings"
+          count={promptFindings.length}
+          defaultExpanded={true}
+        >
+          <FindingsTable findings={promptFindings} type="prompt" />
+        </ExpandableSection>
+      )}
+      {resourceFindings.length > 0 && (
+        <ExpandableSection
+          title="Resource Findings"
+          count={resourceFindings.length}
+          defaultExpanded={true}
+        >
+          <FindingsTable findings={resourceFindings} type="resource" />
+        </ExpandableSection>
+      )}
+      <RecommendationsSection recommendations={analysis.recommendations} />
+      <NotablePatternsSection patterns={analysis.notable_patterns} />
+    </div>
+  );
+}