@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/TourTooltip/TourTooltipButtons.jsx

@@ -0,0 +1,117 @@
+import { colors, fonts } from '../../theme';
+import { ChevronLeft, ChevronRight } from './TourTooltipIcons';
+
+export default function TourTooltipButtons({
+  currentStep,
+  totalSteps,
+  onNext,
+  onPrevious,
+  onSkip,
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '12px',
+        pointerEvents: 'none',
+      }}
+    >
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onSkip();
+        }}
+        onMouseDown={(e) => e.stopPropagation()}
+        style={{
+          background: 'transparent',
+          border: `1px solid ${colors.borderMedium}`,
+          color: colors.textSecondary,
+          padding: '8px 16px',
+          borderRadius: '8px',
+          cursor: 'pointer',
+          fontSize: '13px',
+          fontFamily: fonts.body,
+          flex: 1,
+          pointerEvents: 'auto',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.color = colors.textPrimary;
+          e.currentTarget.style.borderColor = colors.borderMedium;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = 'transparent';
+          e.currentTarget.style.color = colors.textSecondary;
+          e.currentTarget.style.borderColor = colors.borderMedium;
+        }}
+      >
+        Skip Tour
+      </button>
+      <div style={{ display: 'flex', gap: '8px', pointerEvents: 'auto' }}>
+        {currentStep > 0 && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onPrevious();
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+            style={{
+              background: colors.buttonSecondary,
+              border: `1px solid ${colors.borderMedium}`,
+              color: colors.textPrimary,
+              padding: '8px 12px',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              fontSize: '13px',
+              fontFamily: fonts.body,
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = colors.buttonSecondaryHover;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = colors.buttonSecondary;
+            }}
+          >
+            <ChevronLeft size={14} />
+            Previous
+          </button>
+        )}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onNext();
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+          style={{
+            background: colors.buttonPrimary,
+            border: 'none',
+            color: colors.textInverse,
+            padding: '8px 16px',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            fontSize: '13px',
+            fontFamily: fonts.body,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            fontWeight: '500',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = colors.buttonPrimaryHover;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = colors.buttonPrimary;
+          }}
+        >
+          {currentStep === totalSteps - 1 ? 'Finish' : 'Next'}
+          {currentStep < totalSteps - 1 && <ChevronRight size={14} />}
+        </button>
+      </div>
+    </div>
+  );
+}

package/ui/src/components/TourTooltip/TourTooltipHeader.jsx

@@ -0,0 +1,70 @@
+import { colors, fonts } from '../../theme';
+import { CloseIcon } from './TourTooltipIcons';
+
+export default function TourTooltipHeader({ step, currentStep, totalSteps, isDragging, onSkip }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        marginBottom: '12px',
+      }}
+    >
+      <div style={{ flex: 1, pointerEvents: 'none' }}>
+        <h3
+          style={{
+            margin: 0,
+            color: colors.accentBlue,
+            fontSize: '16px',
+            fontWeight: '600',
+            fontFamily: fonts.body,
+          }}
+        >
+          {step.title}
+        </h3>
+        <p
+          style={{
+            margin: '4px 0 0 0',
+            color: colors.textTertiary,
+            fontSize: '12px',
+            fontFamily: fonts.body,
+          }}
+        >
+          Step {currentStep + 1} of {totalSteps}
+          {isDragging && <span style={{ marginLeft: '8px', fontSize: '11px' }}>• Dragging</span>}
+        </p>
+      </div>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onSkip();
+        }}
+        onMouseDown={(e) => e.stopPropagation()}
+        style={{
+          background: 'transparent',
+          border: 'none',
+          color: colors.textTertiary,
+          cursor: 'pointer',
+          padding: '4px',
+          display: 'flex',
+          alignItems: 'center',
+          borderRadius: '8px',
+          marginLeft: '12px',
+          pointerEvents: 'auto',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.color = colors.textPrimary;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = 'transparent';
+          e.currentTarget.style.color = colors.textTertiary;
+        }}
+        title="Skip tour"
+      >
+        <CloseIcon size={18} />
+      </button>
+    </div>
+  );
+}

package/ui/src/components/TourTooltip/TourTooltipIcons.jsx

@@ -0,0 +1,45 @@
+export const CloseIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+export const ChevronRight = ({ size = 16, color = 'currentColor' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+);
+
+export const ChevronLeft = ({ size = 16, color = 'currentColor' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="15 18 9 12 15 6" />
+  </svg>
+);

package/ui/src/components/TourTooltip/useTooltipPosition.js

@@ -0,0 +1,108 @@
+import { useState, useEffect } from 'react';
+
+export function useTooltipPosition(elementRect, step, currentStep) {
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    setTooltipPosition({ x: 0, y: 0 });
+  }, [currentStep]);
+
+  const handleMouseDown = (e, tooltipRef) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (tooltipRef.current) {
+      const rect = tooltipRef.current.getBoundingClientRect();
+      setDragOffset({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      });
+      setIsDragging(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e) => {
+      setTooltipPosition({
+        x: e.clientX - dragOffset.x,
+        y: e.clientY - dragOffset.y,
+      });
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, dragOffset]);
+
+  const calculatePosition = () => {
+    if (!elementRect) return { left: 0, top: 0, transform: 'none' };
+
+    const tooltipWidth = 350;
+    const tooltipHeight = 200;
+    const spacing = 20;
+
+    if (tooltipPosition.x !== 0 || tooltipPosition.y !== 0) {
+      const left = Math.max(10, Math.min(tooltipPosition.x, window.innerWidth - tooltipWidth - 10));
+      const top = Math.max(
+        10,
+        Math.min(tooltipPosition.y, window.innerHeight - tooltipHeight - 10)
+      );
+      return { left, top, transform: 'none' };
+    }
+
+    const position = step.position || 'bottom';
+    let left, top, transform;
+
+    if (position === 'left') {
+      left = elementRect.left - tooltipWidth - spacing;
+      top = elementRect.top + elementRect.height / 2;
+      transform = 'translateY(-50%)';
+      if (left < 10) {
+        left = elementRect.right + spacing;
+      }
+    } else if (position === 'right') {
+      left = elementRect.right + spacing;
+      top = elementRect.top + elementRect.height / 2;
+      transform = 'translateY(-50%)';
+      if (left + tooltipWidth > window.innerWidth - 10) {
+        left = elementRect.left - tooltipWidth - spacing;
+      }
+    } else if (position === 'top') {
+      left = elementRect.left + elementRect.width / 2;
+      top = elementRect.top - tooltipHeight - spacing;
+      transform = 'translate(-50%, 0)';
+      if (top < 10) {
+        top = elementRect.bottom + spacing;
+      }
+    } else {
+      left = elementRect.left + elementRect.width / 2;
+      top = elementRect.bottom + spacing;
+      transform = 'translate(-50%, 0)';
+      if (top + tooltipHeight > window.innerHeight - 10) {
+        top = elementRect.top - tooltipHeight - spacing;
+      }
+    }
+
+    left = Math.max(10, Math.min(left, window.innerWidth - tooltipWidth - 10));
+    top = Math.max(10, Math.min(top, window.innerHeight - tooltipHeight - 10));
+
+    return { left, top, transform };
+  };
+
+  return {
+    position: calculatePosition(),
+    isDragging,
+    handleMouseDown,
+  };
+}

package/ui/src/components/TourTooltip.jsx

@@ -0,0 +1,83 @@
+import { useRef } from 'react';
+import { colors, fonts } from '../theme';
+import TourTooltipHeader from './TourTooltip/TourTooltipHeader';
+import TourTooltipButtons from './TourTooltip/TourTooltipButtons';
+import { useTooltipPosition } from './TourTooltip/useTooltipPosition';
+
+function TourTooltip({ elementRect, step, currentStep, totalSteps, onNext, onPrevious, onSkip }) {
+  const tooltipRef = useRef(null);
+  const { position, isDragging, handleMouseDown } = useTooltipPosition(
+    elementRect,
+    step,
+    currentStep
+  );
+
+  if (!elementRect) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={tooltipRef}
+      onMouseDown={(e) => handleMouseDown(e, tooltipRef)}
+      style={{
+        position: 'fixed',
+        left: `${position.left}px`,
+        top: `${position.top}px`,
+        transform: position.transform,
+        background: colors.bgCard,
+        border: `2px solid ${colors.accentBlue}`,
+        borderRadius: '12px',
+        padding: '20px',
+        maxWidth: '350px',
+        minWidth: '300px',
+        boxShadow: `0 4px 20px ${colors.shadowLg}`,
+        zIndex: 10001,
+        pointerEvents: 'auto',
+        cursor: isDragging ? 'grabbing' : 'grab',
+        userSelect: 'none',
+      }}
+      onClick={(e) => {
+        const target = e.target;
+        if (
+          target.tagName !== 'BUTTON' &&
+          target.tagName !== 'INPUT' &&
+          !target.closest('button')
+        ) {
+          e.stopPropagation();
+        }
+      }}
+    >
+      <TourTooltipHeader
+        step={step}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        isDragging={isDragging}
+        onSkip={onSkip}
+      />
+
+      <div
+        style={{
+          color: colors.textPrimary,
+          fontSize: '14px',
+          lineHeight: '1.6',
+          marginBottom: '20px',
+          pointerEvents: 'none',
+          fontFamily: fonts.body,
+        }}
+      >
+        {step.content}
+      </div>
+
+      <TourTooltipButtons
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        onNext={onNext}
+        onPrevious={onPrevious}
+        onSkip={onSkip}
+      />
+    </div>
+  );
+}
+
+export default TourTooltip;

package/ui/src/components/ViewModeTabs.jsx

@@ -0,0 +1,91 @@
+import { colors, fonts } from '../theme';
+import { IconList, IconNetwork } from '@tabler/icons-react';
+
+function ViewModeTabs({ viewMode, onViewModeChange }) {
+  return (
+    <div
+      data-tour="view-modes"
+      style={{
+        display: 'flex',
+        borderBottom: `1px solid ${colors.borderLight}`,
+        background: colors.bgSecondary,
+        padding: '0 12px',
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+        flexShrink: 0,
+      }}
+    >
+      <button
+        onClick={() => onViewModeChange('general')}
+        style={{
+          padding: '10px 18px',
+          background: viewMode === 'general' ? colors.bgCard : 'transparent',
+          fontFamily: fonts.body,
+          border: 'none',
+          borderBottom:
+            viewMode === 'general' ? `2px solid ${colors.accentBlue}` : '2px solid transparent',
+          color: viewMode === 'general' ? colors.textPrimary : colors.textSecondary,
+          borderRadius: '8px 8px 0 0',
+          cursor: 'pointer',
+          fontSize: '12px',
+          fontWeight: viewMode === 'general' ? '500' : 'normal',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+        }}
+        onMouseEnter={(e) => {
+          if (viewMode !== 'general') {
+            e.currentTarget.style.background = colors.bgHover;
+            e.currentTarget.style.color = colors.textPrimary;
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (viewMode !== 'general') {
+            e.currentTarget.style.background = 'transparent';
+            e.currentTarget.style.color = colors.textSecondary;
+          }
+        }}
+      >
+        <IconList size={16} stroke={1.5} />
+        General List
+      </button>
+      <button
+        onClick={() => onViewModeChange('groupedByMcp')}
+        style={{
+          padding: '10px 18px',
+          background: viewMode === 'groupedByMcp' ? colors.bgCard : 'transparent',
+          fontFamily: fonts.body,
+          border: 'none',
+          borderBottom:
+            viewMode === 'groupedByMcp'
+              ? `2px solid ${colors.accentBlue}`
+              : '2px solid transparent',
+          color: viewMode === 'groupedByMcp' ? colors.textPrimary : colors.textSecondary,
+          cursor: 'pointer',
+          fontSize: '12px',
+          fontWeight: viewMode === 'groupedByMcp' ? '500' : 'normal',
+          borderRadius: '8px 8px 0 0',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+        }}
+        onMouseEnter={(e) => {
+          if (viewMode !== 'groupedByMcp') {
+            e.currentTarget.style.background = colors.bgHover;
+            e.currentTarget.style.color = colors.textPrimary;
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (viewMode !== 'groupedByMcp') {
+            e.currentTarget.style.background = 'transparent';
+            e.currentTarget.style.color = colors.textSecondary;
+          }
+        }}
+      >
+        <IconNetwork size={16} stroke={1.5} />
+        MCP Protocol View
+      </button>
+    </div>
+  );
+}
+
+export default ViewModeTabs;

package/ui/src/components/WhatThisDoesSection.jsx

@@ -0,0 +1,61 @@
+import { colors, fonts } from '../theme';
+
+export default function WhatThisDoesSection({ filePath, updatePath }) {
+  return (
+    <div
+      style={{
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '12px',
+        padding: '24px',
+        boxShadow: `0 2px 4px ${colors.shadowSm}`,
+      }}
+    >
+      <h3
+        style={{
+          fontSize: '15px',
+          fontWeight: '600',
+          marginBottom: '12px',
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+        }}
+      >
+        What This Does
+      </h3>
+      <ul
+        style={{
+          margin: 0,
+          paddingLeft: '20px',
+          fontSize: '13px',
+          color: colors.textSecondary,
+          lineHeight: '1.8',
+          fontFamily: fonts.body,
+        }}
+      >
+        <li>
+          Converts your MCP config (
+          <code style={{ color: colors.accentOrange, fontFamily: fonts.mono }}>mcpServers</code>) to
+          MCP Shark format (
+          <code style={{ color: colors.accentOrange, fontFamily: fonts.mono }}>servers</code>)
+        </li>
+        <li>
+          Starts the MCP Shark server on{' '}
+          <code style={{ color: colors.accentBlue, fontFamily: fonts.mono }}>
+            http://localhost:9851/mcp
+          </code>
+        </li>
+        <li>
+          {filePath || updatePath
+            ? 'Updates your original config file to point to the MCP Shark server (creates a backup first)'
+            : 'Note: Provide a file path to update your original config file automatically'}
+        </li>
+        {(filePath || updatePath) && (
+          <li style={{ color: colors.success, marginTop: '4px', fontWeight: '500' }}>
+            ✓ Original config will be automatically restored when you stop the server or close the
+            UI
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+}