@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/TabNavigation/DesktopTabs.jsx

@@ -0,0 +1,111 @@
+import { useEffect, useRef } from 'react';
+import { colors, fonts } from '../../theme';
+import anime from 'animejs';
+
+export default function DesktopTabs({ tabs, activeTab, onTabChange, tabRefs, indicatorRef }) {
+  useEffect(() => {
+    const activeTabElement = tabRefs.current[activeTab];
+    if (activeTabElement && indicatorRef.current) {
+      const { offsetLeft, offsetWidth } = activeTabElement;
+      anime({
+        targets: indicatorRef.current,
+        left: offsetLeft,
+        width: offsetWidth,
+        duration: 400,
+        easing: 'easeOutExpo',
+      });
+    }
+  }, [activeTab, tabRefs, indicatorRef]);
+
+  return (
+    <div style={{ position: 'relative', display: 'flex', flex: 1 }}>
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          ref={(el) => (tabRefs.current[tab.id] = el)}
+          data-tour={
+            tab.id === 'traffic'
+              ? 'traffic-tab'
+              : tab.id === 'logs'
+                ? 'logs-tab'
+                : tab.id === 'setup'
+                  ? 'setup-tab'
+                  : tab.id === 'playground'
+                    ? 'playground-tab'
+                    : 'smart-scan-tab'
+          }
+          onClick={() => onTabChange(tab.id)}
+          style={{
+            padding: '14px 24px',
+            background: activeTab === tab.id ? colors.bgSecondary : 'transparent',
+            border: 'none',
+            borderBottom: '3px solid transparent',
+            color: activeTab === tab.id ? colors.textPrimary : colors.textSecondary,
+            cursor: 'pointer',
+            fontSize: '13px',
+            fontFamily: fonts.body,
+            fontWeight: activeTab === tab.id ? '600' : '400',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            gap: '4px',
+            position: 'relative',
+            borderRadius: '8px 8px 0 0',
+            zIndex: 1,
+          }}
+          onMouseEnter={(e) => {
+            if (activeTab !== tab.id) {
+              anime({
+                targets: e.currentTarget,
+                background: colors.bgHover,
+                color: colors.textPrimary,
+                duration: 200,
+                easing: 'easeOutQuad',
+              });
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (activeTab !== tab.id) {
+              anime({
+                targets: e.currentTarget,
+                background: 'transparent',
+                color: colors.textSecondary,
+                duration: 200,
+                easing: 'easeOutQuad',
+              });
+            }
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', color: 'currentColor' }}>
+              <tab.icon size={16} />
+            </div>
+            <span>{tab.label}</span>
+          </div>
+          <div
+            style={{
+              fontSize: '11px',
+              color: activeTab === tab.id ? colors.textSecondary : colors.textTertiary,
+              fontWeight: '400',
+              fontFamily: fonts.body,
+            }}
+          >
+            {tab.description}
+          </div>
+        </button>
+      ))}
+      <div
+        ref={indicatorRef}
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          height: '3px',
+          background: colors.accentBlue,
+          borderRadius: '3px 3px 0 0',
+          zIndex: 2,
+          pointerEvents: 'none',
+        }}
+      />
+    </div>
+  );
+}

package/ui/src/components/TabNavigation/MobileDropdown.jsx

@@ -0,0 +1,140 @@
+import { colors, fonts } from '../../theme';
+import { MenuIcon, ChevronDownIcon } from '../TabNavigationIcons';
+
+export default function MobileDropdown({
+  tabs,
+  activeTab,
+  onTabChange,
+  isDropdownOpen,
+  setIsDropdownOpen,
+  dropdownRef,
+}) {
+  return (
+    <div
+      style={{ position: 'relative', flex: 1, display: 'flex', justifyContent: 'flex-end' }}
+      ref={dropdownRef}
+    >
+      <button
+        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '10px 16px',
+          background: isDropdownOpen ? colors.bgSecondary : 'transparent',
+          border: 'none',
+          borderRadius: '8px',
+          color: colors.textPrimary,
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontFamily: fonts.body,
+          fontWeight: '500',
+        }}
+        onMouseEnter={(e) => {
+          if (!isDropdownOpen) {
+            e.currentTarget.style.background = colors.bgHover;
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!isDropdownOpen) {
+            e.currentTarget.style.background = 'transparent';
+          }
+        }}
+      >
+        <MenuIcon size={18} color={colors.textPrimary} />
+        <span>{tabs.find((t) => t.id === activeTab)?.label || 'Menu'}</span>
+        <div
+          style={{
+            transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.2s',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <ChevronDownIcon size={14} color={colors.textPrimary} />
+        </div>
+      </button>
+      {isDropdownOpen && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            right: 0,
+            marginTop: '8px',
+            background: colors.bgCard,
+            border: `1px solid ${colors.borderLight}`,
+            borderRadius: '8px',
+            boxShadow: `0 4px 12px ${colors.shadowSm}`,
+            minWidth: '280px',
+            zIndex: 1000,
+            overflow: 'hidden',
+          }}
+        >
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => {
+                  onTabChange(tab.id);
+                  setIsDropdownOpen(false);
+                }}
+                style={{
+                  width: '100%',
+                  padding: '14px 16px',
+                  background: activeTab === tab.id ? colors.bgSecondary : 'transparent',
+                  border: 'none',
+                  borderLeft:
+                    activeTab === tab.id
+                      ? `3px solid ${colors.accentBlue}`
+                      : '3px solid transparent',
+                  color: activeTab === tab.id ? colors.textPrimary : colors.textSecondary,
+                  cursor: 'pointer',
+                  fontSize: '13px',
+                  fontFamily: fonts.body,
+                  fontWeight: activeTab === tab.id ? '600' : '400',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  gap: '4px',
+                  textAlign: 'left',
+                  transition: 'all 0.2s',
+                }}
+                onMouseEnter={(e) => {
+                  if (activeTab !== tab.id) {
+                    e.currentTarget.style.background = colors.bgHover;
+                    e.currentTarget.style.color = colors.textPrimary;
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (activeTab !== tab.id) {
+                    e.currentTarget.style.background = 'transparent';
+                    e.currentTarget.style.color = colors.textSecondary;
+                  }
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', width: '100%' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', color: 'currentColor' }}>
+                    <Icon size={16} />
+                  </div>
+                  <span style={{ flex: 1 }}>{tab.label}</span>
+                </div>
+                <div
+                  style={{
+                    fontSize: '11px',
+                    color: activeTab === tab.id ? colors.textSecondary : colors.textTertiary,
+                    fontWeight: '400',
+                    fontFamily: fonts.body,
+                    marginLeft: '26px',
+                  }}
+                >
+                  {tab.description}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/components/TabNavigation.jsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef } from 'react';
+import { colors, fonts } from '../theme';
+import anime from 'animejs';
+
+function TabNavigation({ tabs, activeTab, onTabChange }) {
+  const tabRefs = useRef({});
+  const indicatorRef = useRef(null);
+
+  useEffect(() => {
+    const activeTabElement = tabRefs.current[activeTab];
+    if (activeTabElement && indicatorRef.current) {
+      const { offsetLeft, offsetWidth } = activeTabElement;
+      anime({
+        targets: indicatorRef.current,
+        left: offsetLeft,
+        width: offsetWidth,
+        duration: 300,
+        easing: 'easeOutExpo',
+      });
+    }
+  }, [activeTab, tabs]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        borderBottom: `1px solid ${colors.borderLight}`,
+        background: `${colors.bgCard}CC`, // 80% opacity for backdrop blur effect
+        backdropFilter: 'blur(8px)',
+        WebkitBackdropFilter: 'blur(8px)',
+        position: 'relative',
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+      }}
+    >
+      {tabs.map((tab) => (
+        <button
+          key={tab}
+          ref={(el) => (tabRefs.current[tab] = el)}
+          onClick={() => onTabChange(tab)}
+          style={{
+            padding: '10px 18px',
+            background: activeTab === tab ? colors.bgSecondary : 'transparent',
+            border: 'none',
+            borderBottom: '2px solid transparent',
+            color: activeTab === tab ? colors.textPrimary : colors.textSecondary,
+            cursor: 'pointer',
+            fontSize: '13px',
+            fontFamily: fonts.body,
+            fontWeight: activeTab === tab ? '500' : '400',
+            textTransform: 'capitalize',
+            borderRadius: '8px 8px 0 0',
+            transition: 'all 0.2s',
+            position: 'relative',
+            zIndex: 1,
+          }}
+          onMouseEnter={(e) => {
+            if (activeTab !== tab) {
+              anime({
+                targets: e.currentTarget,
+                background: colors.bgHover,
+                color: colors.textPrimary,
+                duration: 200,
+                easing: 'easeOutQuad',
+              });
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (activeTab !== tab) {
+              anime({
+                targets: e.currentTarget,
+                background: 'transparent',
+                color: colors.textSecondary,
+                duration: 200,
+                easing: 'easeOutQuad',
+              });
+            }
+          }}
+        >
+          {tab}
+        </button>
+      ))}
+      <div
+        ref={indicatorRef}
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          height: '2px',
+          background: colors.accentBlue,
+          borderRadius: '2px 2px 0 0',
+          zIndex: 2,
+        }}
+      />
+    </div>
+  );
+}
+
+export default TabNavigation;

package/ui/src/components/TabNavigationIcons.jsx

@@ -0,0 +1,40 @@
+// Tabler Icons for Tab Navigation
+// Using @tabler/icons-react - install with: npm install @tabler/icons-react
+import {
+  IconNetwork,
+  IconFileText,
+  IconSettings,
+  IconBrandStackoverflow,
+  IconShield,
+  IconMenu2,
+  IconChevronDown,
+} from '@tabler/icons-react';
+
+// Wrapper components to match existing API
+export const NetworkIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconNetwork size={size} stroke={1.5} color={color} />
+);
+
+export const LogsIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconFileText size={size} stroke={1.5} color={color} />
+);
+
+export const SettingsIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconSettings size={size} stroke={1.5} color={color} />
+);
+
+export const PlaygroundIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconBrandStackoverflow size={size} stroke={1.5} color={color} />
+);
+
+export const ShieldIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconShield size={size} stroke={1.5} color={color} />
+);
+
+export const MenuIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconMenu2 size={size} stroke={1.5} color={color} />
+);
+
+export const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
+  <IconChevronDown size={size} stroke={1.5} color={color} />
+);

package/ui/src/components/TableHeader.jsx

@@ -0,0 +1,164 @@
+import { colors, fonts } from '../theme';
+
+function TableHeader({ columnWidths }) {
+  return (
+    <thead
+      style={{
+        position: 'sticky',
+        top: 0,
+        background: colors.bgSecondary,
+        zIndex: 10,
+        boxShadow: `0 2px 4px ${colors.shadowSm}`,
+      }}
+    >
+      <tr>
+        <th
+          style={{
+            padding: '12px 16px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            borderRight: `1px solid ${colors.borderLight}`,
+            width: `${columnWidths.frame}px`,
+            minWidth: `${columnWidths.frame}px`,
+            color: colors.textSecondary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+            background: colors.bgSecondary,
+          }}
+        >
+          No.
+        </th>
+        <th
+          style={{
+            padding: '8px 12px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            borderRight: `1px solid ${colors.borderLight}`,
+            width: `${columnWidths.time}px`,
+            minWidth: `${columnWidths.time}px`,
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+          }}
+        >
+          Time
+        </th>
+        <th
+          style={{
+            padding: '8px 12px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            borderRight: `1px solid ${colors.borderLight}`,
+            width: `${columnWidths.datetime}px`,
+            minWidth: `${columnWidths.datetime}px`,
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+          }}
+        >
+          Date/Time
+        </th>
+        <th
+          style={{
+            padding: '8px 12px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            borderRight: `1px solid ${colors.borderLight}`,
+            width: `${columnWidths.source}px`,
+            minWidth: `${columnWidths.source}px`,
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+          }}
+        >
+          Source
+        </th>
+        <th
+          style={{
+            padding: '8px 12px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            borderRight: `1px solid ${colors.borderLight}`,
+            width: `${columnWidths.destination}px`,
+            minWidth: `${columnWidths.destination}px`,
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+          }}
+        >
+          Destination
+        </th>
+        <th
+          style={{
+            padding: '8px 12px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            borderRight: `1px solid ${colors.borderLight}`,
+            width: `${columnWidths.protocol}px`,
+            minWidth: `${columnWidths.protocol}px`,
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+          }}
+        >
+          Protocol
+        </th>
+        <th
+          style={{
+            padding: '8px 12px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            borderRight: `1px solid ${colors.borderLight}`,
+            width: `${columnWidths.method}px`,
+            minWidth: `${columnWidths.method}px`,
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+          }}
+        >
+          Method
+        </th>
+        <th
+          style={{
+            padding: '8px 12px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            borderRight: `1px solid ${colors.borderLight}`,
+            width: `${columnWidths.status}px`,
+            minWidth: `${columnWidths.status}px`,
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+          }}
+        >
+          Status
+        </th>
+        <th
+          style={{
+            padding: '8px 12px',
+            textAlign: 'left',
+            borderBottom: `1px solid ${colors.borderLight}`,
+            color: colors.textPrimary,
+            fontWeight: '600',
+            fontFamily: fonts.body,
+            fontSize: '11px',
+          }}
+        >
+          Endpoint
+        </th>
+      </tr>
+    </thead>
+  );
+}
+
+export default TableHeader;

package/ui/src/components/TourOverlay.jsx

@@ -0,0 +1,117 @@
+function TourOverlay({ elementRect, onClick }) {
+  if (!elementRect) {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'rgba(0, 0, 0, 0.8)',
+        }}
+      />
+    );
+  }
+
+  const highlightPadding = 8;
+  const highlightBorderWidth = 3;
+
+  return (
+    <>
+      {elementRect.top > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: `${elementRect.top - highlightPadding}px`,
+            background: 'rgba(0, 0, 0, 0.8)',
+            zIndex: 9999,
+          }}
+        />
+      )}
+      {elementRect.bottom < window.innerHeight && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: `${window.innerHeight - elementRect.bottom - highlightPadding}px`,
+            background: 'rgba(0, 0, 0, 0.8)',
+            zIndex: 9999,
+          }}
+        />
+      )}
+      {elementRect.left > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: `${Math.max(0, elementRect.top - highlightPadding)}px`,
+            left: 0,
+            width: `${elementRect.left - highlightPadding}px`,
+            height: `${elementRect.height + highlightPadding * 2}px`,
+            background: 'rgba(0, 0, 0, 0.8)',
+            zIndex: 9999,
+          }}
+        />
+      )}
+      {elementRect.right < window.innerWidth && (
+        <div
+          style={{
+            position: 'fixed',
+            top: `${Math.max(0, elementRect.top - highlightPadding)}px`,
+            right: 0,
+            width: `${window.innerWidth - elementRect.right - highlightPadding}px`,
+            height: `${elementRect.height + highlightPadding * 2}px`,
+            background: 'rgba(0, 0, 0, 0.8)',
+            zIndex: 9999,
+          }}
+        />
+      )}
+      <div
+        style={{
+          position: 'fixed',
+          left: elementRect.left - highlightPadding - highlightBorderWidth,
+          top: elementRect.top - highlightPadding - highlightBorderWidth,
+          width: elementRect.width + (highlightPadding + highlightBorderWidth) * 2,
+          height: elementRect.height + (highlightPadding + highlightBorderWidth) * 2,
+          border: `${highlightBorderWidth}px solid #4ec9b0`,
+          borderRadius: '8px',
+          boxShadow:
+            '0 0 0 2px rgba(78, 201, 176, 0.3), ' +
+            '0 0 20px rgba(78, 201, 176, 0.5), ' +
+            '0 0 40px rgba(78, 201, 176, 0.3), ' +
+            'inset 0 0 20px rgba(78, 201, 176, 0.1)',
+          zIndex: 10000,
+          pointerEvents: 'none',
+          animation: 'pulse 2s ease-in-out infinite',
+        }}
+      />
+      <style>
+        {`
+          @keyframes pulse {
+            0%, 100% {
+              box-shadow: 
+                0 0 0 2px rgba(78, 201, 176, 0.3),
+                0 0 20px rgba(78, 201, 176, 0.5),
+                0 0 40px rgba(78, 201, 176, 0.3),
+                inset 0 0 20px rgba(78, 201, 176, 0.1);
+            }
+            50% {
+              box-shadow: 
+                0 0 0 3px rgba(78, 201, 176, 0.4),
+                0 0 30px rgba(78, 201, 176, 0.7),
+                0 0 60px rgba(78, 201, 176, 0.5),
+                inset 0 0 30px rgba(78, 201, 176, 0.2);
+            }
+          }
+        `}
+      </style>
+    </>
+  );
+}
+
+export default TourOverlay;