@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/GroupedByMcpView.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { colors, fonts } from '../theme';
+import RequestRow from './RequestRow';
+import GroupHeader from './GroupHeader';
+import { getCategoryIconComponent, getMethodDescription } from '../utils/mcpGroupingUtils';
+import { getJsonRpcMethod } from '../utils/requestUtils';
+
+function GroupedByMcpView({
+  groupedData,
+  selected,
+  firstRequestTime,
+  onSelect,
+  expandedSessions,
+  expandedCategories,
+  onToggleSession,
+  onToggleCategory,
+}) {
+  const getJsonRpcMethodFromPair = (pair) => {
+    const request = pair.request || pair.response;
+    if (!request) return null;
+    return getJsonRpcMethod(request);
+  };
+
+  return (
+    <tbody>
+      {groupedData.map((sessionGroup) => {
+        const sessionKey = sessionGroup.sessionId || '__NO_SESSION__';
+        const isSessionExpanded = expandedSessions.has(sessionKey);
+
+        return (
+          <React.Fragment key={sessionKey}>
+            <GroupHeader
+              onClick={() => onToggleSession(sessionKey)}
+              isExpanded={isSessionExpanded}
+              indent={0}
+            >
+              <span style={{ color: colors.accentBlue, marginRight: '8px' }}>
+                Session: {sessionGroup.sessionId || 'No Session'}
+              </span>
+              <span style={{ color: colors.textTertiary, fontSize: '11px', fontWeight: '400' }}>
+                ({sessionGroup.categories.reduce((sum, cat) => sum + cat.pairs.length, 0)}{' '}
+                operations)
+              </span>
+            </GroupHeader>
+
+            {isSessionExpanded &&
+              sessionGroup.categories.map((categoryGroup) => {
+                const categoryKey = `${sessionKey}::${categoryGroup.category}`;
+                const isCategoryExpanded = expandedCategories.has(categoryKey);
+
+                return (
+                  <React.Fragment key={categoryKey}>
+                    <GroupHeader
+                      onClick={() => onToggleCategory(categoryKey)}
+                      isExpanded={isCategoryExpanded}
+                      indent={1}
+                    >
+                      <span
+                        style={{ marginRight: '8px', display: 'inline-flex', alignItems: 'center' }}
+                      >
+                        {React.createElement(getCategoryIconComponent(categoryGroup.category), {
+                          size: 16,
+                          stroke: 1.5,
+                          color: colors.accentBlue,
+                        })}
+                      </span>
+                      <span style={{ color: colors.textPrimary }}>{categoryGroup.label}</span>
+                      <span
+                        style={{
+                          color: colors.textTertiary,
+                          fontSize: '11px',
+                          fontWeight: '400',
+                          marginLeft: '8px',
+                        }}
+                      >
+                        ({categoryGroup.pairs.length}{' '}
+                        {categoryGroup.pairs.length === 1 ? 'operation' : 'operations'})
+                      </span>
+                    </GroupHeader>
+
+                    {isCategoryExpanded &&
+                      categoryGroup.pairs.map((pair) => (
+                        <RequestRow
+                          key={pair.frame_number}
+                          pair={pair}
+                          selected={selected}
+                          firstRequestTime={firstRequestTime}
+                          onSelect={onSelect}
+                          isExpanded={false}
+                          onToggleExpand={() => {}}
+                        />
+                      ))}
+                  </React.Fragment>
+                );
+              })}
+          </React.Fragment>
+        );
+      })}
+    </tbody>
+  );
+}
+
+export default GroupedByMcpView;

package/ui/src/components/GroupedByServerView.jsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { colors, fonts } from '../theme';
+import RequestRow from './RequestRow';
+import GroupHeader from './GroupHeader';
+
+export default function GroupedByServerView({
+  groupedData,
+  expandedServersFirst,
+  expandedSessionsInServer,
+  onToggleServerFirst,
+  onToggleSessionInServer,
+  selected,
+  firstRequestTime,
+  onSelect,
+}) {
+  return (
+    <tbody>
+      {groupedData.map((serverGroup) => {
+        const serverKey = serverGroup.serverName || '__UNKNOWN_SERVER__';
+        const isServerExpanded = expandedServersFirst.has(serverKey);
+        const totalRequests = serverGroup.sessions.reduce(
+          (sum, session) => sum + session.requests.length,
+          0
+        );
+        const requestCountText = totalRequests === 1 ? '1 request' : `${totalRequests} requests`;
+
+        return (
+          <React.Fragment key={serverKey}>
+            <GroupHeader
+              onClick={() => onToggleServerFirst(serverGroup.serverName)}
+              isExpanded={isServerExpanded}
+            >
+              <span style={{ color: colors.textSecondary, fontFamily: fonts.body }}>Server:</span>{' '}
+              {serverGroup.serverName ? (
+                <span
+                  style={{ color: colors.accentBlue, fontFamily: fonts.mono, fontWeight: '500' }}
+                >
+                  {serverGroup.serverName}
+                </span>
+              ) : (
+                <span
+                  style={{
+                    color: colors.textSecondary,
+                    fontStyle: 'italic',
+                    fontFamily: fonts.body,
+                  }}
+                >
+                  (Unknown Server)
+                </span>
+              )}
+              <span
+                style={{
+                  marginLeft: '12px',
+                  color: colors.textSecondary,
+                  fontWeight: '400',
+                  fontFamily: fonts.body,
+                }}
+              >
+                ({requestCountText})
+              </span>
+            </GroupHeader>
+            {isServerExpanded &&
+              serverGroup.sessions.map((session) => {
+                const sessionKey = session.sessionId || '__NO_SESSION__';
+                const sessionSet = expandedSessionsInServer.get(serverKey) || new Set();
+                const isSessionExpanded = sessionSet.has(sessionKey);
+                const sessionRequestCount = session.requests.length;
+                const sessionRequestCountText =
+                  sessionRequestCount === 1 ? '1 request' : `${sessionRequestCount} requests`;
+
+                return (
+                  <React.Fragment key={`${serverKey}-${sessionKey}`}>
+                    <GroupHeader
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onToggleSessionInServer(serverGroup.serverName, session.sessionId);
+                      }}
+                      isExpanded={isSessionExpanded}
+                      indent={1}
+                    >
+                      <span style={{ color: colors.textSecondary, fontFamily: fonts.body }}>
+                        Session:
+                      </span>{' '}
+                      {session.sessionId ? (
+                        <span
+                          style={{
+                            color: colors.accentGreen,
+                            fontFamily: fonts.mono,
+                            fontWeight: '500',
+                          }}
+                        >
+                          {session.sessionId}
+                        </span>
+                      ) : (
+                        <span
+                          style={{
+                            color: colors.textSecondary,
+                            fontStyle: 'italic',
+                            fontFamily: fonts.body,
+                          }}
+                        >
+                          (No Session ID)
+                        </span>
+                      )}
+                      <span
+                        style={{
+                          marginLeft: '12px',
+                          color: colors.textSecondary,
+                          fontWeight: '400',
+                          fontFamily: fonts.body,
+                        }}
+                      >
+                        ({sessionRequestCountText})
+                      </span>
+                    </GroupHeader>
+                    {isSessionExpanded &&
+                      session.requests.map((request) => (
+                        <RequestRow
+                          key={request.frame_number}
+                          request={request}
+                          selected={selected}
+                          firstRequestTime={firstRequestTime}
+                          onSelect={onSelect}
+                        />
+                      ))}
+                  </React.Fragment>
+                );
+              })}
+          </React.Fragment>
+        );
+      })}
+    </tbody>
+  );
+}

package/ui/src/components/GroupedBySessionView.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { colors, fonts } from '../theme';
+import RequestRow from './RequestRow';
+import GroupHeader from './GroupHeader';
+
+export default function GroupedBySessionView({
+  groupedData,
+  expandedSessions,
+  expandedServers,
+  onToggleSession,
+  onToggleServer,
+  selected,
+  firstRequestTime,
+  onSelect,
+}) {
+  return (
+    <tbody>
+      {groupedData.map((sessionGroup) => {
+        const sessionKey = sessionGroup.sessionId || '__NO_SESSION__';
+        const isSessionExpanded = expandedSessions.has(sessionKey);
+        const totalRequests = sessionGroup.servers.reduce(
+          (sum, server) => sum + server.requests.length,
+          0
+        );
+        const requestCountText = totalRequests === 1 ? '1 request' : `${totalRequests} requests`;
+
+        return (
+          <React.Fragment key={sessionKey}>
+            <GroupHeader
+              onClick={() => onToggleSession(sessionGroup.sessionId)}
+              isExpanded={isSessionExpanded}
+            >
+              <span style={{ color: colors.textSecondary, fontFamily: fonts.body }}>Session:</span>{' '}
+              {sessionGroup.sessionId ? (
+                <span
+                  style={{ color: colors.accentBlue, fontFamily: fonts.mono, fontWeight: '500' }}
+                >
+                  {sessionGroup.sessionId}
+                </span>
+              ) : (
+                <span
+                  style={{
+                    color: colors.textSecondary,
+                    fontStyle: 'italic',
+                    fontFamily: fonts.body,
+                  }}
+                >
+                  (No Session ID)
+                </span>
+              )}
+              <span
+                style={{
+                  marginLeft: '12px',
+                  color: colors.textSecondary,
+                  fontWeight: '400',
+                  fontFamily: fonts.body,
+                }}
+              >
+                ({requestCountText})
+              </span>
+            </GroupHeader>
+            {isSessionExpanded &&
+              sessionGroup.servers.map((server) => {
+                const serverKey = server.serverName || '__UNKNOWN_SERVER__';
+                const serverSet = expandedServers.get(sessionKey) || new Set();
+                const isServerExpanded = serverSet.has(serverKey);
+                const serverRequestCount = server.requests.length;
+                const serverRequestCountText =
+                  serverRequestCount === 1 ? '1 request' : `${serverRequestCount} requests`;
+
+                return (
+                  <React.Fragment key={`${sessionKey}-${serverKey}`}>
+                    <GroupHeader
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onToggleServer(sessionGroup.sessionId, server.serverName);
+                      }}
+                      isExpanded={isServerExpanded}
+                      indent={1}
+                    >
+                      <span style={{ color: colors.textSecondary, fontFamily: fonts.body }}>
+                        Server:
+                      </span>{' '}
+                      {server.serverName ? (
+                        <span
+                          style={{
+                            color: colors.accentGreen,
+                            fontFamily: fonts.mono,
+                            fontWeight: '500',
+                          }}
+                        >
+                          {server.serverName}
+                        </span>
+                      ) : (
+                        <span
+                          style={{
+                            color: colors.textSecondary,
+                            fontStyle: 'italic',
+                            fontFamily: fonts.body,
+                          }}
+                        >
+                          (Unknown Server)
+                        </span>
+                      )}
+                      <span style={{ marginLeft: '12px', color: '#858585', fontWeight: 'normal' }}>
+                        ({serverRequestCountText})
+                      </span>
+                    </GroupHeader>
+                    {isServerExpanded &&
+                      server.requests.map((request) => (
+                        <RequestRow
+                          key={request.frame_number}
+                          request={request}
+                          selected={selected}
+                          firstRequestTime={firstRequestTime}
+                          onSelect={onSelect}
+                        />
+                      ))}
+                  </React.Fragment>
+                );
+              })}
+          </React.Fragment>
+        );
+      })}
+    </tbody>
+  );
+}

package/ui/src/components/GroupedViews.jsx

@@ -0,0 +1,2 @@
+export { default as GroupedBySessionView } from './GroupedBySessionView';
+export { default as GroupedByServerView } from './GroupedByServerView';

package/ui/src/components/HexTab.jsx

@@ -0,0 +1,188 @@
+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 HexTab({ requestHexLines, responseHexLines, 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="Request Hex Dump"
+            titleColor={colors.accentBlue}
+            defaultExpanded={true}
+          >
+            <div
+              style={{
+                background: colors.bgSecondary,
+                padding: '16px',
+                borderRadius: '8px',
+                border: `1px solid ${colors.borderLight}`,
+                maxHeight: 'calc(100vh - 300px)',
+                overflow: 'auto',
+              }}
+            >
+              {requestHexLines.length > 0 ? (
+                requestHexLines.map((line, i) => (
+                  <div
+                    key={i}
+                    style={{
+                      display: 'flex',
+                      gap: '16px',
+                      padding: '4px 0',
+                      color: colors.textPrimary,
+                      fontFamily: fonts.mono,
+                      fontSize: '12px',
+                      lineHeight: '1.5',
+                    }}
+                  >
+                    <span style={{ color: colors.textTertiary, minWidth: '80px' }}>
+                      {line.offset}
+                    </span>
+                    <span style={{ minWidth: '400px', color: colors.textPrimary }}>
+                      {line.hex.padEnd(48)}
+                    </span>
+                    <span style={{ color: colors.textSecondary }}>{line.ascii}</span>
+                  </div>
+                ))
+              ) : (
+                <div
+                  style={{ color: colors.textTertiary, fontFamily: fonts.body, fontSize: '12px' }}
+                >
+                  (empty)
+                </div>
+              )}
+            </div>
+          </CollapsibleRequestResponse>
+        )}
+
+        {hasResponse && (
+          <CollapsibleRequestResponse
+            title="Response Hex Dump"
+            titleColor={colors.accentGreen}
+            defaultExpanded={true}
+          >
+            <div
+              style={{
+                background: colors.bgSecondary,
+                padding: '16px',
+                borderRadius: '8px',
+                border: `1px solid ${colors.borderLight}`,
+                maxHeight: 'calc(100vh - 300px)',
+                overflow: 'auto',
+              }}
+            >
+              {responseHexLines.length > 0 ? (
+                responseHexLines.map((line, i) => (
+                  <div
+                    key={i}
+                    style={{
+                      display: 'flex',
+                      gap: '16px',
+                      padding: '4px 0',
+                      color: colors.textPrimary,
+                      fontFamily: fonts.mono,
+                      fontSize: '12px',
+                      lineHeight: '1.5',
+                    }}
+                  >
+                    <span style={{ color: colors.textTertiary, minWidth: '80px' }}>
+                      {line.offset}
+                    </span>
+                    <span style={{ minWidth: '400px', color: colors.textPrimary }}>
+                      {line.hex.padEnd(48)}
+                    </span>
+                    <span style={{ color: colors.textSecondary }}>{line.ascii}</span>
+                  </div>
+                ))
+              ) : (
+                <div
+                  style={{ color: colors.textTertiary, fontFamily: fonts.body, fontSize: '12px' }}
+                >
+                  (empty)
+                </div>
+              )}
+            </div>
+          </CollapsibleRequestResponse>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default HexTab;

package/ui/src/components/LogsDisplay.jsx

@@ -0,0 +1,93 @@
+import { colors, fonts } from '../theme';
+
+export default function LogsDisplay({ logs, filteredLogs, logEndRef, getLogColor }) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        overflow: 'auto',
+        padding: '16px',
+        fontFamily: fonts.mono,
+        fontSize: '12px',
+        background: colors.bgCard,
+      }}
+    >
+      {filteredLogs.length === 0 ? (
+        <div
+          style={{
+            color: colors.textSecondary,
+            padding: '40px',
+            textAlign: 'center',
+            fontFamily: fonts.body,
+          }}
+        >
+          {logs.length === 0
+            ? 'No logs available. Start the MCP Shark server to see logs here.'
+            : 'No logs match the current filter.'}
+        </div>
+      ) : (
+        <>
+          <div ref={logEndRef} />
+          {filteredLogs.map((log, index) => (
+            <div
+              key={`${log.timestamp}-${index}`}
+              style={{
+                display: 'flex',
+                gap: '12px',
+                padding: '12px 16px',
+                borderBottom: `1px solid ${colors.borderLight}`,
+                background: colors.bgCard,
+                transition: 'background-color 0.15s ease',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = colors.bgHover;
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = colors.bgCard;
+              }}
+            >
+              <span
+                style={{
+                  color: colors.textTertiary,
+                  minWidth: '140px',
+                  flexShrink: 0,
+                  fontFamily: fonts.mono,
+                  fontSize: '11px',
+                }}
+              >
+                {new Date(log.timestamp).toLocaleTimeString()}
+              </span>
+              <span
+                style={{
+                  color: colors.textTertiary,
+                  minWidth: '70px',
+                  flexShrink: 0,
+                  textTransform: 'uppercase',
+                  fontFamily: fonts.body,
+                  fontSize: '10px',
+                  fontWeight: '600',
+                  letterSpacing: '0.05em',
+                }}
+              >
+                {log.type}
+              </span>
+              <span
+                style={{
+                  color: getLogColor(log.type),
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                  flex: 1,
+                  fontFamily: fonts.mono,
+                  fontSize: '12px',
+                  lineHeight: '1.5',
+                }}
+              >
+                {log.line}
+              </span>
+            </div>
+          ))}
+        </>
+      )}
+    </div>
+  );
+}