@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/PacketFilters/FilterInput.jsx

@@ -0,0 +1,59 @@
+import { colors, fonts } from '../../theme';
+import anime from 'animejs';
+
+export default function FilterInput({
+  type = 'text',
+  placeholder,
+  value,
+  onChange,
+  style = {},
+  ...props
+}) {
+  const defaultStyle = {
+    padding: '8px 12px',
+    background: colors.bgCard,
+    border: `1px solid ${colors.borderLight}`,
+    color: colors.textPrimary,
+    fontSize: '13px',
+    fontFamily:
+      type === 'number' || placeholder?.includes('JSON-RPC') || placeholder?.includes('HTTP')
+        ? fonts.mono
+        : fonts.body,
+    borderRadius: '8px',
+    transition: 'all 0.2s',
+    ...style,
+  };
+
+  const handleFocus = (e) => {
+    anime({
+      targets: e.currentTarget,
+      borderColor: colors.accentBlue,
+      boxShadow: [`0 0 0 0px ${colors.accentBlue}20`, `0 0 0 3px ${colors.accentBlue}20`],
+      duration: 200,
+      easing: 'easeOutQuad',
+    });
+  };
+
+  const handleBlur = (e) => {
+    anime({
+      targets: e.currentTarget,
+      borderColor: colors.borderLight,
+      boxShadow: 'none',
+      duration: 200,
+      easing: 'easeOutQuad',
+    });
+  };
+
+  return (
+    <input
+      type={type}
+      placeholder={placeholder}
+      value={value || ''}
+      onChange={onChange}
+      style={defaultStyle}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      {...props}
+    />
+  );
+}

package/ui/src/components/RawTab.jsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { colors, fonts } from '../theme';
+
+const ChevronDown = ({ size = 14, color = 'currentColor', rotated = false }) => (
+  <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',
+      transform: rotated ? 'rotate(-90deg)' : 'rotate(0deg)',
+      transition: 'transform 0.2s ease',
+    }}
+  >
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+);
+
+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',
+          }}
+        >
+          <ChevronDown size={14} color={titleColor} rotated={!isExpanded} />
+          {title}
+        </div>
+      </div>
+      {isExpanded && <div style={{ padding: '20px' }}>{children}</div>}
+    </div>
+  );
+}
+
+function RawTab({ requestFullText, responseFullText, hasRequest, hasResponse }) {
+  return (
+    <div style={{ padding: '20px', overflow: 'auto', flex: 1, background: colors.bgPrimary }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
+        {hasRequest && (
+          <CollapsibleRequestResponse
+            title="Raw Request Data"
+            titleColor={colors.accentBlue}
+            defaultExpanded={true}
+          >
+            <pre
+              style={{
+                background: colors.bgSecondary,
+                padding: '16px',
+                borderRadius: '8px',
+                overflow: 'auto',
+                fontSize: '12px',
+                fontFamily: fonts.mono,
+                color: colors.textPrimary,
+                border: `1px solid ${colors.borderLight}`,
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-all',
+                lineHeight: '1.5',
+                maxHeight: 'calc(100vh - 300px)',
+              }}
+            >
+              {requestFullText || '(empty)'}
+            </pre>
+          </CollapsibleRequestResponse>
+        )}
+
+        {hasResponse && (
+          <CollapsibleRequestResponse
+            title="Raw Response Data"
+            titleColor={colors.accentGreen}
+            defaultExpanded={true}
+          >
+            <pre
+              style={{
+                background: colors.bgSecondary,
+                padding: '16px',
+                borderRadius: '8px',
+                overflow: 'auto',
+                fontSize: '12px',
+                fontFamily: fonts.mono,
+                color: colors.textPrimary,
+                border: `1px solid ${colors.borderLight}`,
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-all',
+                lineHeight: '1.5',
+                maxHeight: 'calc(100vh - 300px)',
+              }}
+            >
+              {responseFullText || '(empty)'}
+            </pre>
+          </CollapsibleRequestResponse>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RawTab;

package/ui/src/components/RequestRow/OrphanedResponseRow.jsx

@@ -0,0 +1,155 @@
+import { colors, fonts, withOpacity } from '../../theme';
+import {
+  formatRelativeTime,
+  formatDateTime,
+  getSourceDest,
+  getEndpoint,
+} from '../../utils/requestUtils.js';
+
+export default function OrphanedResponseRow({ response, selected, firstRequestTime, onSelect }) {
+  const isSelected = selected?.frame_number === response.frame_number;
+  const { source, dest } = getSourceDest(response);
+  const relativeTime = formatRelativeTime(response.timestamp_iso, firstRequestTime);
+
+  return (
+    <tr
+      onClick={() => onSelect(response)}
+      style={{
+        cursor: 'pointer',
+        background: isSelected ? colors.bgSelected : colors.bgUnpaired,
+        borderBottom: `1px solid ${colors.borderLight}`,
+        fontFamily: fonts.body,
+        transition: 'background-color 0.15s ease',
+        opacity: 0.85,
+      }}
+      onMouseEnter={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.background = withOpacity(colors.accentOrange, 0.1);
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.background = colors.bgUnpaired;
+        }
+      }}
+    >
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          textAlign: 'right',
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+        }}
+      >
+        <span style={{ color: colors.accentOrange, fontWeight: '500' }}>
+          #{response.frame_number} (orphaned)
+        </span>
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+        }}
+      >
+        {relativeTime}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          fontFamily: fonts.body,
+          fontSize: '12px',
+        }}
+      >
+        {formatDateTime(response.timestamp_iso)}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.accentOrange,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        {source}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.accentOrange,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        {dest}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        {response.protocol || 'HTTP'}
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          color: colors.textSecondary,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        -
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          borderRight: `1px solid ${colors.borderLight}`,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        <div
+          style={{
+            color:
+              response.status_code >= 400
+                ? colors.error
+                : response.status_code >= 300
+                  ? colors.warning
+                  : colors.success,
+            fontWeight: '600',
+          }}
+        >
+          {response.status_code || '-'}
+        </div>
+      </td>
+      <td
+        style={{
+          padding: '16px',
+          color: colors.textPrimary,
+          fontFamily: fonts.mono,
+          fontSize: '12px',
+        }}
+      >
+        {getEndpoint(response)}
+      </td>
+    </tr>
+  );
+}

package/ui/src/components/RequestRow/RequestRowMain.jsx

@@ -0,0 +1,240 @@
+import { colors, fonts, withOpacity } from '../../theme';
+import {
+  formatRelativeTime,
+  formatDateTime,
+  getSourceDest,
+  getEndpoint,
+} from '../../utils/requestUtils.js';
+import { IconChevronDown } from '@tabler/icons-react';
+
+const ChevronDown = ({ size = 12, rotated = false }) => (
+  <IconChevronDown
+    size={size}
+    stroke={1.5}
+    style={{
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      transform: rotated ? 'rotate(-90deg)' : 'rotate(0deg)',
+      transition: 'transform 0.2s ease',
+    }}
+  />
+);
+
+export default function RequestRowMain({
+  request,
+  response,
+  selected,
+  firstRequestTime,
+  onSelect,
+  isExpanded,
+  onToggleExpand,
+  isUnpaired,
+}) {
+  const isSelected = selected?.frame_number === request.frame_number;
+  const { source, dest } = getSourceDest(request);
+  const relativeTime = formatRelativeTime(request.timestamp_iso, firstRequestTime);
+  const hasResponse = !!response;
+
+  return (
+    <>
+      <tr
+        onClick={() => onSelect(request)}
+        style={{
+          cursor: 'pointer',
+          background: isSelected
+            ? colors.bgSelected
+            : isUnpaired
+              ? colors.bgUnpaired
+              : colors.bgSecondary,
+          borderBottom: `1px solid ${colors.borderLight}`,
+          fontFamily: fonts.body,
+          transition: 'background-color 0.15s ease',
+          opacity: isUnpaired ? 0.85 : 1,
+        }}
+        onMouseEnter={(e) => {
+          if (!isSelected) {
+            e.currentTarget.style.background = isUnpaired
+              ? withOpacity(colors.accentOrange, 0.1)
+              : colors.bgCard;
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!isSelected) {
+            e.currentTarget.style.background = isUnpaired ? colors.bgUnpaired : colors.bgSecondary;
+          }
+        }}
+      >
+        <td
+          style={{
+            padding: '16px',
+            borderRight: `1px solid ${colors.borderLight}`,
+            color: colors.textPrimary,
+            textAlign: 'right',
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              justifyContent: 'flex-end',
+            }}
+          >
+            {hasResponse && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleExpand();
+                }}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: '2px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  color: colors.textSecondary,
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = colors.textPrimary;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = colors.textSecondary;
+                }}
+              >
+                <ChevronDown size={14} rotated={!isExpanded} />
+              </button>
+            )}
+            <span
+              style={{
+                color: isUnpaired ? colors.accentOrange : colors.accentBlue,
+                fontWeight: '500',
+              }}
+            >
+              #{request.frame_number}
+              {isUnpaired && (
+                <span
+                  style={{
+                    fontSize: '10px',
+                    color: colors.textSecondary,
+                    marginLeft: '4px',
+                    fontStyle: 'italic',
+                  }}
+                >
+                  (no response)
+                </span>
+              )}
+            </span>
+          </div>
+        </td>
+        <td
+          style={{
+            padding: '16px',
+            borderRight: `1px solid ${colors.borderLight}`,
+            color: colors.textPrimary,
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+          }}
+        >
+          {relativeTime}
+        </td>
+        <td
+          style={{
+            padding: '16px',
+            borderRight: `1px solid ${colors.borderLight}`,
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            fontSize: '12px',
+          }}
+        >
+          {formatDateTime(request.timestamp_iso)}
+        </td>
+        <td
+          style={{
+            padding: '16px',
+            borderRight: `1px solid ${colors.borderLight}`,
+            color: colors.accentBlue,
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+            fontWeight: '500',
+          }}
+        >
+          {source}
+        </td>
+        <td
+          style={{
+            padding: '16px',
+            borderRight: `1px solid ${colors.borderLight}`,
+            color: colors.accentBlue,
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+            fontWeight: '500',
+          }}
+        >
+          {dest}
+        </td>
+        <td
+          style={{
+            padding: '16px',
+            borderRight: `1px solid ${colors.borderLight}`,
+            color: colors.textPrimary,
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+            fontWeight: '500',
+          }}
+        >
+          {request.protocol || 'HTTP'}
+        </td>
+        <td
+          style={{
+            padding: '16px',
+            borderRight: `1px solid ${colors.borderLight}`,
+            color: colors.textPrimary,
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+            fontWeight: '500',
+          }}
+        >
+          <div style={{ color: colors.accentBlue }}>{request.method || 'REQ'}</div>
+        </td>
+        <td
+          style={{
+            padding: '16px',
+            borderRight: `1px solid ${colors.borderLight}`,
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+            fontWeight: '500',
+          }}
+        >
+          {hasResponse && (
+            <div
+              style={{
+                color:
+                  response.status_code >= 400
+                    ? colors.error
+                    : response.status_code >= 300
+                      ? colors.warning
+                      : colors.success,
+                fontWeight: '600',
+              }}
+            >
+              {response.status_code || '-'}
+            </div>
+          )}
+        </td>
+        <td
+          style={{
+            padding: '16px',
+            color: colors.textPrimary,
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+          }}
+        >
+          {getEndpoint(request)}
+        </td>
+      </tr>
+    </>
+  );
+}