@mcp-shark/mcp-shark 1.5.13 → 1.7.2

package/ui/src/TabNavigation.jsx

@@ -3,6 +3,7 @@ import { SharkLogo } from './components/SharkLogo';
 import DesktopTabs from './components/TabNavigation/DesktopTabs';
 import MobileDropdown from './components/TabNavigation/MobileDropdown';
 import {
+  AauthIcon,
   LogsIcon,
   NetworkIcon,
   PlaygroundIcon,
@@ -44,6 +45,13 @@ function TabNavigation({ activeTab, onTabChange }) {
       icon: SecurityIcon,
       description: 'Local static analysis of captured MCP traffic',
     },
+    {
+      id: 'aauth-explorer',
+      label: 'AAuth Explorer',
+      icon: AauthIcon,
+      description:
+        'Live knowledge graph of AAuth signals (agents, missions, resources, signing, access) observed in captured traffic',
+    },
     {
       id: 'smart-scan',
       label: 'Smart Scan',

package/ui/src/components/AAuthBadge.jsx

@@ -0,0 +1,92 @@
+import { IconKey, IconKeyOff, IconLockOpen, IconShieldCheck } from '@tabler/icons-react';
+import { colors, fonts } from '../theme';
+
+const POSTURES = {
+  signed: {
+    label: 'Signed',
+    color: colors.success,
+    bg: 'rgba(56, 161, 105, 0.10)',
+    border: 'rgba(56, 161, 105, 0.35)',
+    Icon: IconShieldCheck,
+    description:
+      'AAuth identity headers and an HTTP Message Signature were observed. mcp-shark does not verify signatures.',
+  },
+  'aauth-aware': {
+    label: 'AAuth-aware',
+    color: colors.accentBlue,
+    bg: 'rgba(45, 55, 72, 0.08)',
+    border: 'rgba(45, 55, 72, 0.30)',
+    Icon: IconKey,
+    description: 'AAuth headers were observed but no full HTTP Message Signature was present.',
+  },
+  bearer: {
+    label: 'Bearer',
+    color: colors.warning,
+    bg: 'rgba(214, 158, 46, 0.12)',
+    border: 'rgba(214, 158, 46, 0.40)',
+    Icon: IconKeyOff,
+    description:
+      'A Bearer token was observed in the Authorization header. No AAuth identity present.',
+  },
+  none: {
+    label: 'No auth',
+    color: colors.textTertiary,
+    bg: 'rgba(128, 134, 139, 0.10)',
+    border: 'rgba(128, 134, 139, 0.30)',
+    Icon: IconLockOpen,
+    description: 'No AAuth identity or Bearer credential was observed.',
+  },
+};
+
+function buildTitle(aauth, descriptor) {
+  const parts = [descriptor.description];
+  if (aauth?.agent) {
+    parts.push(`Agent: ${aauth.agent}`);
+  }
+  if (aauth?.sig_alg) {
+    parts.push(`Algorithm: ${aauth.sig_alg}`);
+  }
+  if (aauth?.mission) {
+    parts.push(`Mission: ${aauth.mission}`);
+  }
+  return parts.join('\n');
+}
+
+/**
+ * Compact, posture-coloured chip used in tables and detail panels.
+ * Always describes signals as observed; never claims cryptographic verification.
+ */
+export default function AAuthBadge({ aauth, size = 'md', showLabel = true }) {
+  const posture = aauth?.posture || 'none';
+  const descriptor = POSTURES[posture] || POSTURES.none;
+  const Icon = descriptor.Icon;
+
+  const dimensions =
+    size === 'sm'
+      ? { padding: '2px 6px', fontSize: '10px', iconSize: 11 }
+      : { padding: '3px 8px', fontSize: '11px', iconSize: 13 };
+
+  return (
+    <span
+      title={buildTitle(aauth, descriptor)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+        padding: dimensions.padding,
+        background: descriptor.bg,
+        border: `1px solid ${descriptor.border}`,
+        borderRadius: '999px',
+        color: descriptor.color,
+        fontSize: dimensions.fontSize,
+        fontFamily: fonts.body,
+        fontWeight: 500,
+        lineHeight: 1.2,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <Icon size={dimensions.iconSize} stroke={1.6} />
+      {showLabel && <span>{descriptor.label}</span>}
+    </span>
+  );
+}

package/ui/src/components/AauthExplorer/AauthExplorerGraph.jsx

@@ -0,0 +1,231 @@
+import ReactECharts from 'echarts-for-react';
+import { useMemo, useRef } from 'react';
+import { colors, fonts } from '../../theme.js';
+
+const CATEGORY_PALETTE = {
+  agent: { color: '#1a73e8', symbolSize: 38, label: 'Agent' },
+  mission: { color: '#e8710a', symbolSize: 32, label: 'Mission' },
+  resource: { color: '#137333', symbolSize: 38, label: 'Resource' },
+  signing: { color: '#9334e6', symbolSize: 28, label: 'Signing' },
+  access: { color: '#b06000', symbolSize: 28, label: 'Access' },
+};
+
+const KIND_TO_LABEL = {
+  calls: 'calls',
+  pursues: 'pursues',
+  targets: 'targets',
+  'signs-with': 'signs with',
+  requires: 'requires',
+};
+
+/**
+ * Force-directed AAuth knowledge graph.
+ *
+ * Backed by GET /api/aauth/graph; nodes are colored by category and sized by
+ * observed packet count. Clicking a node bubbles up so the parent can show a
+ * detail panel with the underlying packets.
+ */
+export default function AauthExplorerGraph({ graph, onNodeSelect, selectedNodeId }) {
+  const chartRef = useRef(null);
+
+  const option = useMemo(() => {
+    const categories = (graph?.categories || []).map((c) => ({
+      name: c.label,
+      itemStyle: { color: CATEGORY_PALETTE[c.id]?.color || '#888' },
+    }));
+    const categoryIndex = Object.fromEntries((graph?.categories || []).map((c, i) => [c.id, i]));
+
+    const maxPackets = (graph?.nodes || []).reduce((m, n) => Math.max(m, n.packet_count || 0), 1);
+
+    const data = (graph?.nodes || []).map((n) => {
+      const palette = CATEGORY_PALETTE[n.category] || { symbolSize: 24, color: '#888' };
+      const sizeBoost = Math.min(20, Math.round((n.packet_count / maxPackets) * 18));
+      return {
+        id: n.id,
+        name: n.name,
+        category: categoryIndex[n.category] ?? 0,
+        symbolSize: palette.symbolSize + sizeBoost,
+        value: n.packet_count,
+        label: {
+          show: true,
+          formatter: shortenLabel(n.name, n.category),
+          fontSize: 11,
+          fontFamily: fonts.body,
+          color: colors.textPrimary,
+        },
+        itemStyle: {
+          color: palette.color,
+          borderColor: n.id === selectedNodeId ? colors.textPrimary : 'transparent',
+          borderWidth: n.id === selectedNodeId ? 3 : 0,
+          shadowBlur: n.id === selectedNodeId ? 12 : 0,
+          shadowColor: palette.color,
+        },
+        _raw: n,
+      };
+    });
+
+    const links = (graph?.edges || []).map((e) => ({
+      source: e.source,
+      target: e.target,
+      value: e.weight,
+      lineStyle: {
+        width: Math.max(1, Math.min(6, e.weight)),
+        color: 'source',
+        opacity: 0.55,
+        curveness: 0.12,
+      },
+      label: {
+        show: false,
+        formatter: KIND_TO_LABEL[e.kind] || e.kind,
+        fontSize: 10,
+        color: colors.textTertiary,
+      },
+      _kind: e.kind,
+    }));
+
+    return {
+      backgroundColor: 'transparent',
+      tooltip: {
+        trigger: 'item',
+        backgroundColor: '#fff',
+        borderColor: colors.borderLight,
+        textStyle: { color: colors.textPrimary, fontFamily: fonts.body, fontSize: 12 },
+        formatter: (params) => {
+          if (params.dataType === 'edge') {
+            return `<strong>${KIND_TO_LABEL[params.data._kind] || params.data._kind}</strong><br/>weight: ${params.data.value}`;
+          }
+          const raw = params.data._raw || {};
+          const lines = [
+            `<strong>${escapeHtml(raw.name)}</strong>`,
+            `<span style="color:${colors.textSecondary}">${CATEGORY_PALETTE[raw.category]?.label || raw.category}</span>`,
+            `${raw.packet_count} observation${raw.packet_count === 1 ? '' : 's'}`,
+          ];
+          return lines.join('<br/>');
+        },
+      },
+      legend: [
+        {
+          data: categories.map((c) => c.name),
+          orient: 'horizontal',
+          top: 0,
+          left: 'center',
+          textStyle: { color: colors.textSecondary, fontFamily: fonts.body, fontSize: 11 },
+          itemWidth: 10,
+          itemHeight: 10,
+        },
+      ],
+      animationDuration: 800,
+      animationEasingUpdate: 'quinticInOut',
+      series: [
+        {
+          name: 'AAuth observations',
+          type: 'graph',
+          layout: 'force',
+          legendHoverLink: true,
+          roam: true,
+          draggable: true,
+          focusNodeAdjacency: true,
+          categories,
+          data,
+          links,
+          force: {
+            repulsion: 220,
+            edgeLength: [80, 180],
+            gravity: 0.08,
+            friction: 0.6,
+          },
+          emphasis: {
+            focus: 'adjacency',
+            label: { show: true, fontSize: 12, fontFamily: fonts.body },
+            lineStyle: { width: 3 },
+          },
+          label: {
+            position: 'right',
+            color: colors.textPrimary,
+          },
+          lineStyle: { color: 'source', curveness: 0.1 },
+        },
+      ],
+    };
+  }, [graph, selectedNodeId]);
+
+  if (!graph || (graph.nodes?.length || 0) === 0) {
+    return (
+      <div
+        style={{
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          gap: '12px',
+          padding: '40px',
+          color: colors.textSecondary,
+          fontFamily: fonts.body,
+        }}
+      >
+        <div style={{ fontSize: '32px' }}>·· · ··</div>
+        <div style={{ fontSize: '13px', textAlign: 'center', maxWidth: 520, lineHeight: 1.5 }}>
+          No AAuth signals have been observed yet. To preview this view with fake data, click{' '}
+          <strong>Generate sample data</strong> in the header above. For real signals, capture
+          AAuth-bearing traffic through the mcp-shark proxy (e.g. by exercising any AAuth-aware MCP
+          from your IDE).
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ReactECharts
+      ref={chartRef}
+      option={option}
+      notMerge
+      lazyUpdate
+      style={{ height: '100%', width: '100%' }}
+      onEvents={{
+        click: (params) => {
+          if (params.dataType === 'node' && typeof onNodeSelect === 'function') {
+            const raw = params.data._raw || {};
+            onNodeSelect({
+              category: getCategoryIdFromIndex(graph, params.data.category),
+              id: raw.name,
+              nodeKey: params.data.id,
+              raw,
+            });
+          }
+        },
+      }}
+    />
+  );
+}
+
+function getCategoryIdFromIndex(graph, index) {
+  return graph?.categories?.[index]?.id || null;
+}
+
+function shortenLabel(name, category) {
+  if (!name) {
+    return '';
+  }
+  if (category === 'resource' && name.length > 22) {
+    return `${name.slice(0, 20)}…`;
+  }
+  if (category === 'mission' && name.length > 28) {
+    return `${name.slice(0, 26)}…`;
+  }
+  if (category === 'agent' && name.length > 28) {
+    return `${name.slice(0, 26)}…`;
+  }
+  return name;
+}
+
+function escapeHtml(s) {
+  if (typeof s !== 'string') {
+    return '';
+  }
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}