@mcp-shark/mcp-shark 1.4.0

package/ui/src/IntroTour.jsx

@@ -0,0 +1,140 @@
+import { useState, useEffect, useRef } from 'react';
+import TourOverlay from './components/TourOverlay';
+import TourTooltip from './components/TourTooltip';
+
+function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [highlightedElement, setHighlightedElement] = useState(null);
+  const [elementRect, setElementRect] = useState(null);
+  const overlayRef = useRef(null);
+
+  useEffect(() => {
+    if (!highlightedElement) return;
+
+    const updatePosition = () => {
+      if (highlightedElement) {
+        const rect = highlightedElement.getBoundingClientRect();
+        setElementRect(rect);
+      }
+    };
+
+    updatePosition();
+
+    const options = { passive: true, capture: true };
+    window.addEventListener('scroll', updatePosition, options);
+    window.addEventListener('resize', updatePosition, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition, options);
+      window.removeEventListener('resize', updatePosition, { passive: true });
+    };
+  }, [highlightedElement]);
+
+  useEffect(() => {
+    if (steps.length === 0) return;
+
+    const step = steps[currentStep];
+    if (!step) return;
+
+    if (onStepChange) {
+      onStepChange(currentStep);
+    }
+
+    const timer = setTimeout(() => {
+      const element = document.querySelector(step.target);
+      if (element) {
+        setHighlightedElement(element);
+        element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+        setTimeout(() => {
+          const rect = element.getBoundingClientRect();
+          setElementRect(rect);
+        }, 300);
+      } else {
+        setHighlightedElement(null);
+        setElementRect(null);
+      }
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [currentStep, steps, onStepChange]);
+
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      const nextStep = currentStep + 1;
+      setCurrentStep(nextStep);
+      if (onStepChange) {
+        onStepChange(nextStep);
+      }
+    } else {
+      handleComplete();
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentStep > 0) {
+      const prevStep = currentStep - 1;
+      setCurrentStep(prevStep);
+      if (onStepChange) {
+        onStepChange(prevStep);
+      }
+    }
+  };
+
+  const handleComplete = async () => {
+    try {
+      await fetch('/api/help/dismiss', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tourCompleted: true }),
+      });
+    } catch (error) {
+      console.error('Failed to save tour state:', error);
+    }
+    onComplete();
+  };
+
+  const handleSkip = () => {
+    handleComplete();
+    if (onSkip) onSkip();
+  };
+
+  if (steps.length === 0 || currentStep >= steps.length) {
+    return null;
+  }
+
+  const step = steps[currentStep];
+
+  return (
+    <>
+      <div
+        ref={overlayRef}
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 9998,
+          pointerEvents: 'auto',
+        }}
+        onClick={handleSkip}
+      >
+        <TourOverlay elementRect={elementRect} />
+      </div>
+
+      {elementRect && (
+        <TourTooltip
+          elementRect={elementRect}
+          step={step}
+          currentStep={currentStep}
+          totalSteps={steps.length}
+          onNext={handleNext}
+          onPrevious={handlePrevious}
+          onSkip={handleSkip}
+        />
+      )}
+    </>
+  );
+}
+
+export default IntroTour;

package/ui/src/LogDetail.jsx

@@ -0,0 +1,122 @@
+import { colors, fonts } from './theme';
+
+function LogDetail({ log, onClose }) {
+  const payload = log.payload_json ? JSON.parse(log.payload_json) : null;
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{
+          padding: '12px',
+          borderBottom: `1px solid ${colors.borderLight}`,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <h3 style={{ fontSize: '14px', fontWeight: 'normal' }}>Details</h3>
+        <button
+          onClick={onClose}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: colors.textPrimary,
+            cursor: 'pointer',
+            fontSize: '18px',
+          }}
+        >
+          ×
+        </button>
+      </div>
+      <div style={{ flex: 1, overflow: 'auto', padding: '12px', fontSize: '12px' }}>
+        <div style={{ marginBottom: '16px' }}>
+          <div style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}>
+            ID
+          </div>
+          <div style={{ fontFamily: 'monospace' }}>{log.id}</div>
+        </div>
+        <div style={{ marginBottom: '16px' }}>
+          <div style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}>
+            Timestamp
+          </div>
+          <div style={{ fontFamily: 'monospace' }}>{log.timestamp_iso}</div>
+        </div>
+        <div style={{ marginBottom: '16px' }}>
+          <div style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}>
+            Server
+          </div>
+          <div>{log.server_name}</div>
+        </div>
+        <div style={{ marginBottom: '16px' }}>
+          <div style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}>
+            Direction
+          </div>
+          <div>{log.direction}</div>
+        </div>
+        <div style={{ marginBottom: '16px' }}>
+          <div style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}>
+            Method
+          </div>
+          <div>{log.method || '-'}</div>
+        </div>
+        <div style={{ marginBottom: '16px' }}>
+          <div style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}>
+            Status
+          </div>
+          <div>{log.status || '-'}</div>
+        </div>
+        {log.request_id && (
+          <div style={{ marginBottom: '16px' }}>
+            <div
+              style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}
+            >
+              Request ID
+            </div>
+            <div style={{ fontFamily: 'monospace', fontSize: '11px' }}>{log.request_id}</div>
+          </div>
+        )}
+        {log.duration_ms && (
+          <div style={{ marginBottom: '16px' }}>
+            <div
+              style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}
+            >
+              Duration
+            </div>
+            <div>{log.duration_ms.toFixed(2)}ms</div>
+          </div>
+        )}
+        {log.error_message && (
+          <div style={{ marginBottom: '16px' }}>
+            <div
+              style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}
+            >
+              Error
+            </div>
+            <div style={{ color: colors.error, fontFamily: fonts.body }}>{log.error_message}</div>
+          </div>
+        )}
+        <div style={{ marginBottom: '16px' }}>
+          <div style={{ color: colors.textTertiary, marginBottom: '4px', fontFamily: fonts.body }}>
+            Payload
+          </div>
+          <pre
+            style={{
+              background: colors.bgTertiary,
+              padding: '8px',
+              borderRadius: '8px',
+              border: `1px solid ${colors.borderLight}`,
+              overflow: 'auto',
+              fontSize: '11px',
+              fontFamily: 'monospace',
+              maxHeight: '400px',
+            }}
+          >
+            {JSON.stringify(payload, null, 2)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LogDetail;

package/ui/src/LogTable.jsx

@@ -0,0 +1,242 @@
+import { colors, fonts, withOpacity } from './theme';
+
+function LogTable({ logs, selected, onSelect }) {
+  const getStatusColor = (status) => {
+    if (status === 'error') return colors.error;
+    if (status === 'success') return colors.success;
+    if (status === 'pending') return colors.warning;
+    return colors.textTertiary;
+  };
+
+  const formatTime = (iso) => {
+    return new Date(iso).toLocaleTimeString();
+  };
+
+  return (
+    <div style={{ flex: 1, overflow: 'auto', background: colors.bgPrimary }}>
+      <table
+        style={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          fontSize: '12px',
+          fontFamily: fonts.body,
+        }}
+      >
+        <thead
+          style={{
+            position: 'sticky',
+            top: 0,
+            background: colors.bgCard,
+            zIndex: 1,
+            boxShadow: `0 2px 4px ${colors.shadowSm}`,
+          }}
+        >
+          <tr>
+            <th
+              style={{
+                padding: '12px 16px',
+                textAlign: 'left',
+                borderBottom: `1px solid ${colors.borderLight}`,
+                color: colors.textSecondary,
+                fontWeight: '600',
+                fontSize: '11px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                background: colors.bgCard,
+              }}
+            >
+              Time
+            </th>
+            <th
+              style={{
+                padding: '12px 16px',
+                textAlign: 'left',
+                borderBottom: `1px solid ${colors.borderLight}`,
+                color: colors.textSecondary,
+                fontWeight: '600',
+                fontSize: '11px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                background: colors.bgCard,
+              }}
+            >
+              Server
+            </th>
+            <th
+              style={{
+                padding: '12px 16px',
+                textAlign: 'left',
+                borderBottom: `1px solid ${colors.borderLight}`,
+                color: colors.textSecondary,
+                fontWeight: '600',
+                fontSize: '11px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                background: colors.bgCard,
+              }}
+            >
+              Dir
+            </th>
+            <th
+              style={{
+                padding: '12px 16px',
+                textAlign: 'left',
+                borderBottom: `1px solid ${colors.borderLight}`,
+                color: colors.textSecondary,
+                fontWeight: '600',
+                fontSize: '11px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                background: colors.bgCard,
+              }}
+            >
+              Method
+            </th>
+            <th
+              style={{
+                padding: '12px 16px',
+                textAlign: 'left',
+                borderBottom: `1px solid ${colors.borderLight}`,
+                color: colors.textSecondary,
+                fontWeight: '600',
+                fontSize: '11px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                background: colors.bgCard,
+              }}
+            >
+              Status
+            </th>
+            <th
+              style={{
+                padding: '12px 16px',
+                textAlign: 'right',
+                borderBottom: `1px solid ${colors.borderLight}`,
+                color: colors.textSecondary,
+                fontWeight: '600',
+                fontSize: '11px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                background: colors.bgCard,
+              }}
+            >
+              Duration
+            </th>
+            <th
+              style={{
+                padding: '12px 16px',
+                textAlign: 'right',
+                borderBottom: `1px solid ${colors.borderLight}`,
+                color: colors.textSecondary,
+                fontWeight: '600',
+                fontSize: '11px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                background: colors.bgCard,
+              }}
+            >
+              Size
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {logs.map((log) => (
+            <tr
+              key={log.id}
+              onClick={() => onSelect(log)}
+              style={{
+                cursor: 'pointer',
+                background: selected?.id === log.id ? colors.bgSelected : colors.bgCard,
+                borderBottom: `1px solid ${colors.borderLight}`,
+                transition: 'background-color 0.15s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (selected?.id !== log.id) e.currentTarget.style.background = colors.bgHover;
+              }}
+              onMouseLeave={(e) => {
+                if (selected?.id !== log.id) e.currentTarget.style.background = colors.bgCard;
+              }}
+            >
+              <td
+                style={{
+                  padding: '16px',
+                  color: colors.textTertiary,
+                  fontFamily: fonts.mono,
+                  fontSize: '12px',
+                }}
+              >
+                {formatTime(log.timestamp_iso)}
+              </td>
+              <td
+                style={{
+                  padding: '16px',
+                  color: colors.textPrimary,
+                  fontSize: '12px',
+                  fontFamily: fonts.body,
+                }}
+              >
+                {log.server_name}
+              </td>
+              <td
+                style={{
+                  padding: '16px',
+                  color: log.direction === 'request' ? colors.accentBlue : colors.accentOrange,
+                  fontSize: '12px',
+                  fontWeight: '500',
+                  fontFamily: fonts.body,
+                }}
+              >
+                {log.direction}
+              </td>
+              <td
+                style={{
+                  padding: '16px',
+                  color: colors.textPrimary,
+                  fontSize: '12px',
+                  fontFamily: fonts.body,
+                }}
+              >
+                {log.method || '-'}
+              </td>
+              <td
+                style={{
+                  padding: '16px',
+                  color: getStatusColor(log.status),
+                  fontSize: '12px',
+                  fontWeight: '500',
+                  fontFamily: fonts.body,
+                }}
+              >
+                {log.status || '-'}
+              </td>
+              <td
+                style={{
+                  padding: '16px',
+                  textAlign: 'right',
+                  color: colors.textSecondary,
+                  fontSize: '12px',
+                  fontFamily: fonts.mono,
+                }}
+              >
+                {log.duration_ms ? `${log.duration_ms.toFixed(2)}ms` : '-'}
+              </td>
+              <td
+                style={{
+                  padding: '16px',
+                  textAlign: 'right',
+                  color: colors.textSecondary,
+                  fontSize: '12px',
+                  fontFamily: fonts.mono,
+                }}
+              >
+                {log.payload_size ? `${(log.payload_size / 1024).toFixed(1)}KB` : '-'}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default LogTable;

package/ui/src/PacketDetail.jsx

@@ -0,0 +1,190 @@
+import { useState, useEffect, useRef } from 'react';
+import { colors, fonts } from './theme';
+import PacketDetailHeader from './components/PacketDetailHeader';
+import TabNavigation from './components/TabNavigation';
+import DetailsTab from './components/DetailsTab';
+import HexTab from './components/HexTab';
+import RawTab from './components/RawTab';
+import { generateHexDump, createFullRequestText } from './utils/hexUtils.js';
+import { fadeIn } from './utils/animations';
+
+function RequestDetail({ request, onClose, requests = [] }) {
+  const [activeTab, setActiveTab] = useState('details');
+  const tabContentRef = useRef(null);
+  const prevTabRef = useRef(activeTab);
+
+  useEffect(() => {
+    if (prevTabRef.current !== activeTab && tabContentRef.current) {
+      fadeIn(tabContentRef.current, { duration: 300 });
+      prevTabRef.current = activeTab;
+    }
+  }, [activeTab]);
+
+  if (!request) return null;
+
+  // Helper function to extract JSON-RPC method
+  const getJsonRpcMethod = (req) => {
+    // First check the jsonrpc_method field (most reliable)
+    if (req.jsonrpc_method) {
+      return req.jsonrpc_method;
+    }
+
+    // For requests, try to extract from body
+    if (req.direction === 'request') {
+      if (req.body_json) {
+        try {
+          const body =
+            typeof req.body_json === 'string' ? JSON.parse(req.body_json) : req.body_json;
+          if (body && typeof body === 'object' && body.method) {
+            return body.method;
+          }
+        } catch (e) {
+          // Failed to parse
+        }
+      }
+      if (req.body_raw) {
+        try {
+          const body = typeof req.body_raw === 'string' ? JSON.parse(req.body_raw) : req.body_raw;
+          if (body && typeof body === 'object' && body.method) {
+            return body.method;
+          }
+        } catch (e) {
+          // Failed to parse
+        }
+      }
+    }
+
+    return null;
+  };
+
+  // Find matching request/response pair
+  const findMatchingPair = () => {
+    const matches = (req, resp) => {
+      // Session ID must match
+      if (req.session_id !== resp.session_id) return false;
+
+      // JSON-RPC Method must match
+      const reqMethod = getJsonRpcMethod(req);
+      const respMethod = getJsonRpcMethod(resp);
+
+      // Both must have a method, and they must match
+      if (!reqMethod || !respMethod) {
+        // If either doesn't have a method, we can't match by method
+        // Fall back to JSON-RPC ID matching only
+        if (req.jsonrpc_id && resp.jsonrpc_id) {
+          return req.jsonrpc_id === resp.jsonrpc_id;
+        }
+        // If no method and no ID, we can't match reliably
+        return false;
+      }
+
+      if (reqMethod !== respMethod) return false;
+
+      // If JSON-RPC ID exists, it must match
+      if (req.jsonrpc_id && resp.jsonrpc_id) {
+        return req.jsonrpc_id === resp.jsonrpc_id;
+      }
+
+      return true;
+    };
+
+    if (request.direction === 'request') {
+      // Find the corresponding response
+      return requests.find(
+        (r) =>
+          r.direction === 'response' && matches(request, r) && r.frame_number > request.frame_number
+      );
+    } else {
+      // Find the corresponding request
+      return requests.find(
+        (r) =>
+          r.direction === 'request' && matches(r, request) && r.frame_number < request.frame_number
+      );
+    }
+  };
+
+  const matchingPair = findMatchingPair();
+  const displayRequest = request.direction === 'request' ? request : matchingPair || request;
+  const displayResponse = request.direction === 'response' ? request : matchingPair;
+
+  const requestHeaders = displayRequest?.headers_json
+    ? JSON.parse(displayRequest.headers_json)
+    : {};
+  const requestBody = displayRequest?.body_json
+    ? JSON.parse(displayRequest.body_json)
+    : displayRequest?.body_raw;
+  const requestFullText = displayRequest
+    ? createFullRequestText(requestHeaders, displayRequest.body_raw)
+    : '';
+  const requestHexLines = displayRequest ? generateHexDump(requestFullText) : [];
+
+  const responseHeaders = displayResponse?.headers_json
+    ? JSON.parse(displayResponse.headers_json)
+    : {};
+  const responseBody = displayResponse?.body_json
+    ? JSON.parse(displayResponse.body_json)
+    : displayResponse?.body_raw;
+  const responseFullText = displayResponse
+    ? createFullRequestText(responseHeaders, displayResponse.body_raw)
+    : '';
+  const responseHexLines = displayResponse ? generateHexDump(responseFullText) : [];
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        background: colors.bgPrimary,
+      }}
+    >
+      <PacketDetailHeader request={request} onClose={onClose} matchingPair={matchingPair} />
+
+      <TabNavigation
+        tabs={['details', 'hex', 'raw']}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+
+      <div
+        ref={tabContentRef}
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          background: colors.bgPrimary,
+        }}
+      >
+        {activeTab === 'details' && (
+          <DetailsTab
+            request={displayRequest}
+            response={displayResponse}
+            requestHeaders={requestHeaders}
+            requestBody={requestBody}
+            responseHeaders={responseHeaders}
+            responseBody={responseBody}
+          />
+        )}
+
+        {activeTab === 'hex' && (
+          <HexTab
+            requestHexLines={requestHexLines}
+            responseHexLines={responseHexLines}
+            hasRequest={!!displayRequest}
+            hasResponse={!!displayResponse}
+          />
+        )}
+
+        {activeTab === 'raw' && (
+          <RawTab
+            requestFullText={requestFullText}
+            responseFullText={responseFullText}
+            hasRequest={!!displayRequest}
+            hasResponse={!!displayResponse}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RequestDetail;