@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/CollapsibleSection.jsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { colors, fonts } from '../theme';
+
+const ChevronDown = ({ size = 12, color = 'currentColor' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: '4px' }}
+  >
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+);
+
+function CollapsibleSection({
+  title,
+  children,
+  titleColor = colors.accentBlue,
+  defaultExpanded = true,
+}) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div style={{ marginBottom: '16px' }}>
+      <div
+        style={{
+          color: titleColor,
+          fontWeight: '600',
+          fontFamily: fonts.body,
+          fontSize: '12px',
+          marginBottom: '8px',
+          cursor: 'pointer',
+          userSelect: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          padding: '4px 0',
+          transition: 'color 0.15s ease',
+        }}
+        onClick={() => setIsExpanded(!isExpanded)}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.color =
+            titleColor === colors.accentBlue ? colors.accentBlueHover : titleColor;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.color = titleColor;
+        }}
+      >
+        <span
+          style={{
+            transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
+            transition: 'transform 0.2s ease',
+            display: 'inline-block',
+          }}
+        >
+          <ChevronDown size={12} color={titleColor} />
+        </span>
+        {title}
+      </div>
+      {isExpanded && (
+        <div
+          style={{
+            paddingLeft: '20px',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            fontSize: '12px',
+            lineHeight: '1.6',
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CollapsibleSection;

package/ui/src/components/ConfigFileSection.jsx

@@ -0,0 +1,84 @@
+import { colors, fonts } from '../theme';
+import DetectedPathsList from './DetectedPathsList';
+import FileInput from './FileInput';
+import ServiceSelector from './ServiceSelector';
+
+export default function ConfigFileSection({
+  detectedPaths,
+  detecting,
+  onDetect,
+  onPathSelect,
+  onViewConfig,
+  filePath,
+  fileContent,
+  updatePath,
+  onFileSelect,
+  onPathChange,
+  onUpdatePathChange,
+  services,
+  selectedServices,
+  onSelectionChange,
+}) {
+  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,
+          }}
+        >
+          Configuration File
+        </h3>
+        <p
+          style={{
+            fontSize: '13px',
+            color: colors.textSecondary,
+            lineHeight: '1.5',
+            fontFamily: fonts.body,
+          }}
+        >
+          Select your MCP configuration file or provide a file path. The file will be converted to
+          MCP Shark format and used to start the server.
+        </p>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <DetectedPathsList
+          detectedPaths={detectedPaths}
+          detecting={detecting}
+          onDetect={onDetect}
+          onSelect={onPathSelect}
+          onView={onViewConfig}
+        />
+
+        <FileInput
+          filePath={filePath}
+          fileContent={fileContent}
+          updatePath={updatePath}
+          onFileSelect={onFileSelect}
+          onPathChange={onPathChange}
+          onUpdatePathChange={onUpdatePathChange}
+        />
+
+        <ServiceSelector
+          services={services}
+          selectedServices={selectedServices}
+          onSelectionChange={onSelectionChange}
+        />
+      </div>
+    </div>
+  );
+}

package/ui/src/components/ConfigViewerModal.jsx

@@ -0,0 +1,141 @@
+import { colors, fonts } from '../theme';
+
+function ConfigViewerModal({
+  viewingConfig,
+  configContent,
+  loadingConfig,
+  onClose,
+  viewingBackup,
+  backupContent,
+  loadingBackup,
+}) {
+  const isViewingBackup = viewingBackup !== null;
+  const isViewingConfig = viewingConfig !== null;
+
+  if (!isViewingConfig && !isViewingBackup) {
+    return null;
+  }
+
+  const content = isViewingBackup ? backupContent : configContent;
+  const loading = isViewingBackup ? loadingBackup : loadingConfig;
+  const title = isViewingBackup ? 'Backup File' : 'MCP Configuration File';
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0, 0, 0, 0.8)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        padding: '20px',
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          background: colors.bgPrimary,
+          border: `1px solid ${colors.borderLight}`,
+          borderRadius: '8px',
+          width: '100%',
+          maxWidth: '800px',
+          maxHeight: '90vh',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          style={{
+            padding: '16px',
+            borderBottom: '1px solid #333',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <div>
+            <h3
+              style={{
+                fontSize: '16px',
+                fontWeight: '500',
+                marginBottom: '4px',
+                color: colors.textPrimary,
+              }}
+            >
+              {title}
+            </h3>
+            {content && (
+              <div style={{ fontSize: '12px', color: '#858585' }}>
+                {content.displayPath}
+                {isViewingBackup && content.createdAt && (
+                  <span style={{ marginLeft: '12px', color: '#666' }}>
+                    Created: {new Date(content.createdAt).toLocaleString()}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              color: colors.textPrimary,
+              cursor: 'pointer',
+              fontSize: '24px',
+              padding: '0',
+              width: '32px',
+              height: '32px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            ×
+          </button>
+        </div>
+        <div
+          style={{
+            flex: 1,
+            overflow: 'auto',
+            padding: '20px',
+          }}
+        >
+          {loading ? (
+            <div style={{ color: '#858585', textAlign: 'center', padding: '40px' }}>Loading...</div>
+          ) : content ? (
+            <pre
+              style={{
+                background: colors.bgPrimary,
+                padding: '16px',
+                borderRadius: '4px',
+                fontSize: '13px',
+                fontFamily: 'monospace',
+                color: colors.textPrimary,
+                overflow: 'auto',
+                border: `1px solid ${colors.borderLight}`,
+                lineHeight: '1.6',
+                margin: 0,
+              }}
+            >
+              {content.content}
+            </pre>
+          ) : (
+            <div style={{ color: '#f48771', textAlign: 'center', padding: '40px' }}>
+              Failed to load file content
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ConfigViewerModal;

package/ui/src/components/ConfirmationModal.jsx

@@ -0,0 +1,129 @@
+import { colors, fonts } from '../theme';
+
+function ConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  danger = false,
+}) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          background: colors.bgCard,
+          borderRadius: '12px',
+          padding: '24px',
+          maxWidth: '500px',
+          width: '90%',
+          boxShadow: `0 4px 20px ${colors.shadowLg}`,
+          fontFamily: fonts.body,
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3
+          style={{
+            margin: '0 0 12px 0',
+            fontSize: '18px',
+            fontWeight: '600',
+            color: colors.textPrimary,
+          }}
+        >
+          {title}
+        </h3>
+        <p
+          style={{
+            margin: '0 0 24px 0',
+            fontSize: '14px',
+            color: colors.textSecondary,
+            lineHeight: '1.5',
+          }}
+        >
+          {message}
+        </p>
+        <div
+          style={{
+            display: 'flex',
+            gap: '12px',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <button
+            onClick={onClose}
+            style={{
+              padding: '10px 20px',
+              background: colors.buttonSecondary,
+              border: `1px solid ${colors.borderLight}`,
+              borderRadius: '8px',
+              color: colors.textPrimary,
+              fontSize: '14px',
+              fontWeight: '500',
+              fontFamily: fonts.body,
+              cursor: 'pointer',
+              transition: 'all 0.2s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = colors.buttonSecondaryHover;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = colors.buttonSecondary;
+            }}
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={() => {
+              onConfirm();
+              onClose();
+            }}
+            style={{
+              padding: '10px 20px',
+              background: danger ? colors.buttonDanger : colors.buttonPrimary,
+              border: 'none',
+              borderRadius: '8px',
+              color: colors.textInverse,
+              fontSize: '14px',
+              fontWeight: '500',
+              fontFamily: fonts.body,
+              cursor: 'pointer',
+              transition: 'all 0.2s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = danger
+                ? colors.buttonDangerHover
+                : colors.buttonPrimaryHover;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = danger
+                ? colors.buttonDanger
+                : colors.buttonPrimary;
+            }}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ConfirmationModal;

package/ui/src/components/DetailsTab/BodySection.jsx

@@ -0,0 +1,27 @@
+import { colors, fonts } from '../../theme';
+import CollapsibleSection from '../CollapsibleSection';
+
+export default function BodySection({ body, title, titleColor }) {
+  if (!body) return null;
+
+  return (
+    <CollapsibleSection title={title || 'Body'} titleColor={titleColor}>
+      <pre
+        style={{
+          background: colors.bgSecondary,
+          padding: '16px',
+          borderRadius: '8px',
+          overflow: 'auto',
+          fontSize: '12px',
+          fontFamily: fonts.mono,
+          maxHeight: '400px',
+          border: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          lineHeight: '1.5',
+        }}
+      >
+        {typeof body === 'object' ? JSON.stringify(body, null, 2) : body}
+      </pre>
+    </CollapsibleSection>
+  );
+}

package/ui/src/components/DetailsTab/CollapsibleRequestResponse.jsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { colors, fonts } from '../../theme';
+import { IconChevronDown } from '@tabler/icons-react';
+
+export default function CollapsibleRequestResponse({
+  title,
+  titleColor,
+  children,
+  defaultExpanded = true,
+}) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        borderRadius: '8px',
+        border: `1px solid ${colors.borderLight}`,
+        overflow: 'hidden',
+        marginBottom: '20px',
+      }}
+    >
+      <div
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          padding: '16px 20px',
+          background: isExpanded ? colors.bgCard : colors.bgSecondary,
+          borderBottom: isExpanded ? `1px solid ${colors.borderLight}` : 'none',
+          cursor: 'pointer',
+          userSelect: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          transition: 'background-color 0.15s ease',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.bgHover;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = isExpanded ? colors.bgCard : colors.bgSecondary;
+        }}
+      >
+        <div
+          style={{
+            fontSize: '13px',
+            fontWeight: '600',
+            color: titleColor,
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+            fontFamily: fonts.body,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+          }}
+        >
+          <IconChevronDown
+            size={14}
+            stroke={1.5}
+            style={{
+              transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
+              transition: 'transform 0.2s ease',
+            }}
+          />
+          {title}
+        </div>
+      </div>
+      {isExpanded && <div style={{ padding: '20px' }}>{children}</div>}
+    </div>
+  );
+}

package/ui/src/components/DetailsTab/HeadersSection.jsx

@@ -0,0 +1,25 @@
+import { colors, fonts } from '../../theme';
+import CollapsibleSection from '../CollapsibleSection';
+
+export default function HeadersSection({ headers, titleColor }) {
+  if (!headers || Object.keys(headers).length === 0) return null;
+
+  return (
+    <CollapsibleSection title="Headers">
+      {Object.entries(headers).map(([key, value]) => (
+        <div key={key} style={{ marginBottom: '6px', fontSize: '12px', fontFamily: fonts.body }}>
+          <span
+            style={{
+              color: titleColor,
+              fontWeight: '500',
+              fontFamily: fonts.mono,
+            }}
+          >
+            {key}:
+          </span>{' '}
+          <span style={{ color: colors.textPrimary }}>{String(value)}</span>
+        </div>
+      ))}
+    </CollapsibleSection>
+  );
+}

package/ui/src/components/DetailsTab/InfoSection.jsx

@@ -0,0 +1,28 @@
+import { colors, fonts } from '../../theme';
+import CollapsibleSection from '../CollapsibleSection';
+import { getInfo } from '../../utils/requestUtils';
+
+export default function InfoSection({ data, titleColor }) {
+  if (!data) return null;
+
+  const info = getInfo(data);
+
+  return (
+    <CollapsibleSection title="Info" titleColor={titleColor} defaultExpanded={false}>
+      <div
+        style={{
+          background: colors.bgSecondary,
+          padding: '12px 16px',
+          borderRadius: '6px',
+          border: `1px solid ${colors.borderLight}`,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          color: titleColor,
+          wordBreak: 'break-word',
+        }}
+      >
+        {info}
+      </div>
+    </CollapsibleSection>
+  );
+}

package/ui/src/components/DetailsTab/NetworkInfoSection.jsx

@@ -0,0 +1,63 @@
+import { colors, fonts } from '../../theme';
+import CollapsibleSection from '../CollapsibleSection';
+
+export default function NetworkInfoSection({ data, showUserAgent = false }) {
+  return (
+    <CollapsibleSection title="Network Information">
+      <div
+        style={{
+          fontSize: '12px',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          marginBottom: '4px',
+        }}
+      >
+        Remote Address:{' '}
+        <span style={{ color: colors.textSecondary, fontFamily: fonts.mono }}>
+          {data.remote_address || 'N/A'}
+        </span>
+      </div>
+      <div
+        style={{
+          fontSize: '12px',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          marginBottom: '4px',
+        }}
+      >
+        Host:{' '}
+        <span style={{ color: colors.textSecondary, fontFamily: fonts.mono }}>
+          {data.host || 'N/A'}
+        </span>
+      </div>
+      {showUserAgent && data.user_agent && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            marginBottom: '4px',
+          }}
+        >
+          User Agent:{' '}
+          <span style={{ color: colors.textSecondary, fontSize: '11px' }}>{data.user_agent}</span>
+        </div>
+      )}
+      {data.session_id && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            marginBottom: '4px',
+          }}
+        >
+          Session ID:{' '}
+          <span style={{ color: colors.textSecondary, fontFamily: fonts.mono }}>
+            {data.session_id}
+          </span>
+        </div>
+      )}
+    </CollapsibleSection>
+  );
+}