@mcp-shark/mcp-shark 1.4.0

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

@@ -0,0 +1,75 @@
+import { colors, fonts } from '../../theme';
+import CollapsibleSection from '../CollapsibleSection';
+
+export default function ProtocolInfoSection({ data, titleColor }) {
+  return (
+    <CollapsibleSection title={`${data.protocol || 'HTTP'} Protocol`}>
+      <div
+        style={{
+          fontSize: '12px',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          marginBottom: '4px',
+        }}
+      >
+        Direction: <span style={{ color: titleColor, fontWeight: '500' }}>{data.direction}</span>
+      </div>
+      {data.status_code && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            marginBottom: '4px',
+          }}
+        >
+          Status Code:{' '}
+          <span
+            style={{
+              color:
+                data.status_code >= 400
+                  ? colors.error
+                  : data.status_code >= 300
+                    ? colors.warning
+                    : colors.success,
+              fontFamily: fonts.mono,
+              fontWeight: '600',
+            }}
+          >
+            {data.status_code}
+          </span>
+        </div>
+      )}
+      {data.jsonrpc_method && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            marginBottom: '4px',
+          }}
+        >
+          JSON-RPC Method:{' '}
+          <span style={{ color: colors.textSecondary, fontFamily: fonts.mono }}>
+            {data.jsonrpc_method}
+          </span>
+        </div>
+      )}
+      {data.jsonrpc_id && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            marginBottom: '4px',
+          }}
+        >
+          JSON-RPC ID:{' '}
+          <span style={{ color: colors.textSecondary, fontFamily: fonts.mono }}>
+            {data.jsonrpc_id}
+          </span>
+        </div>
+      )}
+    </CollapsibleSection>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { colors } from '../../theme';
+import CollapsibleRequestResponse from './CollapsibleRequestResponse';
+import NetworkInfoSection from './NetworkInfoSection';
+import ProtocolInfoSection from './ProtocolInfoSection';
+import HeadersSection from './HeadersSection';
+import BodySection from './BodySection';
+import InfoSection from './InfoSection';
+import CollapsibleSection from '../CollapsibleSection';
+
+export default function RequestDetailsSection({ request, requestHeaders, requestBody }) {
+  if (!request) return null;
+
+  return (
+    <CollapsibleRequestResponse
+      title="Request"
+      titleColor={colors.accentBlue}
+      defaultExpanded={true}
+    >
+      <InfoSection data={request} titleColor={colors.accentBlue} />
+      <NetworkInfoSection data={request} showUserAgent={true} />
+      <ProtocolInfoSection data={request} titleColor={colors.accentBlue} />
+      <HeadersSection headers={requestHeaders} titleColor={colors.accentBlue} />
+      <BodySection body={requestBody} titleColor={colors.accentBlue} />
+      {request.jsonrpc_params && (
+        <CollapsibleSection title="JSON-RPC Params" titleColor={colors.accentBlue}>
+          <pre
+            style={{
+              background: colors.bgSecondary,
+              padding: '16px',
+              borderRadius: '8px',
+              overflow: 'auto',
+              fontSize: '12px',
+              fontFamily: 'monospace',
+              maxHeight: '400px',
+              border: `1px solid ${colors.borderLight}`,
+              color: colors.textPrimary,
+              lineHeight: '1.5',
+            }}
+          >
+            {JSON.stringify(JSON.parse(request.jsonrpc_params), null, 2)}
+          </pre>
+        </CollapsibleSection>
+      )}
+    </CollapsibleRequestResponse>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { colors, fonts } from '../../theme';
+import CollapsibleRequestResponse from './CollapsibleRequestResponse';
+import NetworkInfoSection from './NetworkInfoSection';
+import ProtocolInfoSection from './ProtocolInfoSection';
+import HeadersSection from './HeadersSection';
+import BodySection from './BodySection';
+import InfoSection from './InfoSection';
+import CollapsibleSection from '../CollapsibleSection';
+
+export default function ResponseDetailsSection({ response, responseHeaders, responseBody }) {
+  if (!response) return null;
+
+  return (
+    <CollapsibleRequestResponse
+      title="Response"
+      titleColor={colors.accentGreen}
+      defaultExpanded={true}
+    >
+      <InfoSection data={response} titleColor={colors.accentGreen} />
+      <NetworkInfoSection data={response} />
+      <ProtocolInfoSection data={response} titleColor={colors.accentGreen} />
+      <HeadersSection headers={responseHeaders} titleColor={colors.accentGreen} />
+      <BodySection body={responseBody} titleColor={colors.accentGreen} />
+      {response.jsonrpc_result && (
+        <CollapsibleSection title="JSON-RPC Result" titleColor={colors.accentGreen}>
+          <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',
+            }}
+          >
+            {JSON.stringify(JSON.parse(response.jsonrpc_result), null, 2)}
+          </pre>
+        </CollapsibleSection>
+      )}
+      {response.jsonrpc_error && (
+        <CollapsibleSection title="JSON-RPC Error" titleColor={colors.error}>
+          <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.error,
+              lineHeight: '1.5',
+            }}
+          >
+            {JSON.stringify(JSON.parse(response.jsonrpc_error), null, 2)}
+          </pre>
+        </CollapsibleSection>
+      )}
+    </CollapsibleRequestResponse>
+  );
+}

package/ui/src/components/DetailsTab.jsx

@@ -0,0 +1,31 @@
+import { colors } from '../theme';
+import RequestDetailsSection from './DetailsTab/RequestDetailsSection';
+import ResponseDetailsSection from './DetailsTab/ResponseDetailsSection';
+
+function DetailsTab({
+  request,
+  response,
+  requestHeaders,
+  requestBody,
+  responseHeaders,
+  responseBody,
+}) {
+  return (
+    <div style={{ padding: '20px', overflow: 'auto', flex: 1, background: colors.bgPrimary }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
+        <RequestDetailsSection
+          request={request}
+          requestHeaders={requestHeaders}
+          requestBody={requestBody}
+        />
+        <ResponseDetailsSection
+          response={response}
+          responseHeaders={responseHeaders}
+          responseBody={responseBody}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default DetailsTab;

package/ui/src/components/DetectedPathsList.jsx

@@ -0,0 +1,171 @@
+import { colors, fonts } from '../theme';
+import { IconRefresh, IconEye, IconCode, IconClock } from '@tabler/icons-react';
+
+function DetectedPathsList({ detectedPaths, detecting, onDetect, onSelect, onView }) {
+  if (detectedPaths.length === 0) {
+    return null;
+  }
+
+  return (
+    <div style={{ marginBottom: '8px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '8px',
+        }}
+      >
+        <div
+          style={{
+            fontSize: '13px',
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+          }}
+        >
+          Detected Configuration Files:
+        </div>
+        <button
+          onClick={onDetect}
+          disabled={detecting}
+          title="Refresh detection"
+          style={{
+            padding: '4px 8px',
+            background: 'transparent',
+            border: `1px solid ${colors.borderMedium}`,
+            color: colors.textSecondary,
+            cursor: detecting ? 'not-allowed' : 'pointer',
+            fontSize: '11px',
+            borderRadius: '8px',
+            opacity: detecting ? 0.5 : 1,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+          }}
+        >
+          {detecting ? (
+            <>
+              <IconRefresh
+                size={12}
+                stroke={1.5}
+                style={{ animation: 'spin 1s linear infinite' }}
+              />
+              <span>Detecting...</span>
+            </>
+          ) : (
+            <>
+              <IconRefresh size={12} stroke={1.5} />
+              <span>Refresh</span>
+            </>
+          )}
+        </button>
+      </div>
+      <div
+        data-tour="detected-editors"
+        style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
+      >
+        {detectedPaths.map((item, idx) => (
+          <button
+            key={idx}
+            data-tour={idx === 0 ? 'first-detected-editor' : undefined}
+            onClick={() => onSelect(item.path)}
+            onDoubleClick={() => {
+              if (item.exists) {
+                onView(item.path);
+              }
+            }}
+            style={{
+              padding: '8px 12px',
+              background: item.exists ? `${colors.accentBlue}20` : colors.bgSecondary,
+              border: `1px solid ${item.exists ? colors.accentBlue : colors.borderMedium}`,
+              color: colors.textPrimary,
+              cursor: 'pointer',
+              fontSize: '12px',
+              borderRadius: '8px',
+              textAlign: 'left',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              transition: 'all 0.2s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = item.exists
+                ? `${colors.accentBlue}30`
+                : colors.bgHover;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = item.exists
+                ? `${colors.accentBlue}20`
+                : colors.bgSecondary;
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+                {item.editor === 'Cursor' ? (
+                  <IconCode size={14} stroke={1.5} />
+                ) : (
+                  <IconClock size={14} stroke={1.5} />
+                )}
+              </span>
+              <div>
+                <div style={{ fontWeight: '500' }}>{item.editor}</div>
+                <div
+                  style={{
+                    fontSize: '12px',
+                    color: colors.textSecondary,
+                    fontFamily: fonts.body,
+                  }}
+                >
+                  {item.displayPath}
+                </div>
+              </div>
+            </div>
+            <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+              {item.exists && (
+                <>
+                  <span
+                    style={{
+                      fontSize: '10px',
+                      padding: '2px 6px',
+                      background: colors.success,
+                      color: colors.textInverse,
+                      borderRadius: '6px',
+                      fontWeight: '500',
+                    }}
+                  >
+                    Found
+                  </span>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onView(item.path);
+                    }}
+                    title="View file content"
+                    style={{
+                      fontSize: '10px',
+                      padding: '2px 6px',
+                      background: 'transparent',
+                      border: `1px solid ${colors.borderMedium}`,
+                      color: colors.textSecondary,
+                      borderRadius: '6px',
+                      cursor: 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '4px',
+                    }}
+                  >
+                    <IconEye size={10} stroke={1.5} />
+                    <span>View</span>
+                  </button>
+                </>
+              )}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DetectedPathsList;

package/ui/src/components/FileInput.jsx

@@ -0,0 +1,144 @@
+import { colors, fonts } from '../theme';
+import { IconFileUpload } from '@tabler/icons-react';
+
+function FileInput({
+  filePath,
+  fileContent,
+  updatePath,
+  onFileSelect,
+  onPathChange,
+  onUpdatePathChange,
+}) {
+  return (
+    <>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <label
+          data-tour="select-file"
+          style={{
+            padding: '8px 16px',
+            background: colors.buttonPrimary,
+            border: `1px solid ${colors.buttonPrimary}`,
+            color: colors.textInverse,
+            cursor: 'pointer',
+            fontSize: '13px',
+            borderRadius: '8px',
+            fontWeight: '500',
+            whiteSpace: 'nowrap',
+            transition: 'background 0.2s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = colors.buttonPrimaryHover;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = colors.buttonPrimary;
+          }}
+        >
+          <IconFileUpload
+            size={14}
+            stroke={1.5}
+            style={{ marginRight: '6px', display: 'inline-block' }}
+          />
+          Select File
+          <input type="file" accept=".json" onChange={onFileSelect} style={{ display: 'none' }} />
+        </label>
+        <span
+          style={{
+            color: colors.textTertiary,
+            fontSize: '13px',
+            fontWeight: '500',
+            fontFamily: fonts.body,
+          }}
+        >
+          OR
+        </span>
+        <input
+          type="text"
+          placeholder="Enter file path (e.g., ~/.cursor/mcp.json)"
+          value={filePath}
+          onChange={onPathChange}
+          style={{
+            flex: 1,
+            padding: '8px 12px',
+            background: colors.bgCard,
+            border: `1px solid ${colors.borderMedium}`,
+            color: colors.textPrimary,
+            fontSize: '13px',
+            borderRadius: '8px',
+          }}
+        />
+      </div>
+      {fileContent && !filePath && (
+        <div>
+          <label
+            style={{
+              display: 'block',
+              fontSize: '12px',
+              color: colors.textSecondary,
+              marginBottom: '6px',
+            }}
+          >
+            Optional: File Path to Update
+          </label>
+          <input
+            type="text"
+            placeholder="Enter file path to update (e.g., ~/.cursor/mcp.json)"
+            value={updatePath}
+            onChange={onUpdatePathChange}
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              background: colors.bgCard,
+              border: `1px solid ${colors.borderMedium}`,
+              color: colors.textPrimary,
+              fontSize: '13px',
+              borderRadius: '8px',
+            }}
+          />
+          <div
+            style={{
+              fontSize: '12px',
+              color: colors.textSecondary,
+              marginTop: '6px',
+              fontFamily: fonts.body,
+            }}
+          >
+            Provide the file path if you want to update the original config file (backup will be
+            created)
+          </div>
+        </div>
+      )}
+      {fileContent && (
+        <div style={{ marginTop: '8px' }}>
+          <div
+            style={{
+              color: colors.textSecondary,
+              fontSize: '12px',
+              marginBottom: '6px',
+              fontWeight: '500',
+            }}
+          >
+            File Content Preview
+          </div>
+          <pre
+            style={{
+              background: colors.bgCard,
+              padding: '12px',
+              borderRadius: '8px',
+              fontSize: '12px',
+              fontFamily: 'monospace',
+              color: colors.textPrimary,
+              maxHeight: '200px',
+              overflow: 'auto',
+              border: `1px solid ${colors.borderLight}`,
+              lineHeight: '1.5',
+            }}
+          >
+            {fileContent}
+          </pre>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default FileInput;

package/ui/src/components/GroupHeader.jsx

@@ -0,0 +1,76 @@
+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' }}
+  >
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+);
+
+const ChevronRight = ({ 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' }}
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+);
+
+export default function GroupHeader({ children, onClick, isExpanded, indent = 0 }) {
+  return (
+    <tr
+      onClick={onClick}
+      style={{
+        cursor: 'pointer',
+        background: colors.bgSecondary,
+        borderBottom: `1px solid ${colors.borderLight}`,
+        borderTop: `1px solid ${colors.borderLight}`,
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = colors.bgCard;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = colors.bgSecondary;
+      }}
+    >
+      <td
+        colSpan={11}
+        style={{
+          padding: indent > 0 ? '12px 16px 12px 40px' : '12px 16px',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          fontWeight: '600',
+          fontSize: indent > 0 ? '11px' : '12px',
+        }}
+      >
+        <span
+          style={{
+            marginRight: '8px',
+            userSelect: 'none',
+            display: 'inline-flex',
+            alignItems: 'center',
+          }}
+        >
+          {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+        </span>
+        {children}
+      </td>
+    </tr>
+  );
+}