@mcp-shark/mcp-shark 1.5.13 → 1.7.2

package/ui/src/components/Security/AAuthPosturePanel.jsx

@@ -0,0 +1,360 @@
+import { IconFlask, IconKey, IconRefresh } from '@tabler/icons-react';
+import { useCallback, useEffect, useState } from 'react';
+import { colors, fonts } from '../../theme';
+
+const POSTURE_META = [
+  { id: 'signed', label: 'Signed', dotColor: colors.success },
+  { id: 'aauth-aware', label: 'AAuth-aware', dotColor: colors.accentBlue },
+  { id: 'bearer', label: 'Bearer', dotColor: colors.warning },
+  { id: 'none', label: 'No auth', dotColor: colors.textTertiary },
+];
+
+function formatPercent(part, total) {
+  if (!total) {
+    return '0%';
+  }
+  return `${Math.round((part / total) * 100)}%`;
+}
+
+/**
+ * Captured-traffic AAuth posture panel.
+ *
+ * Read-only summary backed by GET /api/aauth/posture, plus a one-click
+ * "Generate sample data" button (POST /api/aauth/self-test) that inserts
+ * FAKE AAuth packets so a developer can preview the views before any
+ * AAuth-aware MCP exists in their stack. Synthetic packets are tagged
+ * `user-agent: mcp-shark-self-test/1.0` and treated everywhere else as
+ * regular captured traffic.
+ *
+ * Always describes signals as observed; never implies cryptographic
+ * verification.
+ */
+export default function AAuthPosturePanel({ onTrafficGenerated } = {}) {
+  const [data, setData] = useState(null);
+  const [_upstreams, setUpstreams] = useState([]);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [running, setRunning] = useState(false);
+  const [lastRun, setLastRun] = useState(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [postureRes, upstreamsRes] = await Promise.all([
+        fetch('/api/aauth/posture'),
+        fetch('/api/aauth/upstreams'),
+      ]);
+      if (!postureRes.ok) {
+        throw new Error(`HTTP ${postureRes.status}`);
+      }
+      const json = await postureRes.json();
+      setData(json);
+      if (upstreamsRes.ok) {
+        const u = await upstreamsRes.json();
+        setUpstreams(u.upstreams || []);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to load AAuth posture');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const generateSampleTraffic = useCallback(async () => {
+    setRunning(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/aauth/self-test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ rounds: 2 }),
+      });
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const result = await res.json();
+      setLastRun(result);
+      await load();
+      if (typeof onTrafficGenerated === 'function') {
+        onTrafficGenerated(result);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to generate sample traffic');
+    } finally {
+      setRunning(false);
+    }
+  }, [load, onTrafficGenerated]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (error && !data) {
+    return null;
+  }
+  // Render even with zero traffic so the self-test button is discoverable.
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        marginBottom: '16px',
+        padding: '14px 16px',
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+        boxShadow: `0 1px 2px ${colors.shadowSm}`,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: '12px',
+          marginBottom: '10px',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <IconKey size={16} stroke={1.5} style={{ color: colors.accentBlue }} />
+          <span
+            style={{
+              fontSize: '13px',
+              fontFamily: fonts.body,
+              fontWeight: 600,
+              color: colors.textPrimary,
+            }}
+          >
+            AAuth Posture
+          </span>
+          <span
+            style={{
+              fontSize: '11px',
+              fontFamily: fonts.body,
+              color: colors.textTertiary,
+            }}
+          >
+            {data.total_packets > 0
+              ? `observed in ${data.total_packets} packet${data.total_packets === 1 ? '' : 's'} · not verified`
+              : 'no AAuth signals observed yet'}
+          </span>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <button
+            type="button"
+            onClick={generateSampleTraffic}
+            disabled={running}
+            title="Inserts fake AAuth packets so you can see how mcp-shark visualizes them. Not real traffic — synthetic packets are tagged with user-agent mcp-shark-self-test/1.0."
+            aria-label="Generate fake sample AAuth traffic for demo purposes"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              padding: '4px 10px',
+              background: colors.warning,
+              border: `1px solid ${colors.warning}`,
+              borderRadius: '6px',
+              color: '#fff',
+              fontSize: '11px',
+              fontFamily: fonts.body,
+              fontWeight: 500,
+              cursor: running ? 'wait' : 'pointer',
+              opacity: running ? 0.7 : 1,
+            }}
+          >
+            <IconFlask size={12} stroke={1.5} />
+            {running ? 'Generating…' : 'Generate sample data'}
+          </button>
+          <button
+            type="button"
+            onClick={load}
+            disabled={loading}
+            aria-label="Refresh AAuth posture"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              padding: '4px 10px',
+              background: 'transparent',
+              border: `1px solid ${colors.borderLight}`,
+              borderRadius: '6px',
+              color: colors.textSecondary,
+              fontSize: '11px',
+              fontFamily: fonts.body,
+              cursor: loading ? 'wait' : 'pointer',
+            }}
+          >
+            <IconRefresh size={12} stroke={1.5} />
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      {data.total_packets === 0 && (
+        <div
+          style={{
+            padding: '12px',
+            marginBottom: '8px',
+            background: colors.bgSecondary,
+            border: `1px dashed ${colors.borderLight}`,
+            borderRadius: '6px',
+            fontSize: '12px',
+            fontFamily: fonts.body,
+            color: colors.textSecondary,
+            lineHeight: 1.5,
+          }}
+        >
+          mcp-shark hasn&rsquo;t observed any AAuth-bearing traffic yet. To see what this view looks
+          like with data, click <strong>Generate sample data</strong> &mdash; it inserts fake AAuth
+          packets (tagged{' '}
+          <code style={{ fontFamily: fonts.mono }}>user-agent: mcp-shark-self-test/1.0</code>) for
+          demo purposes only.
+        </div>
+      )}
+
+      {lastRun && (
+        <div
+          style={{
+            padding: '8px 10px',
+            marginBottom: '8px',
+            background: `${colors.warning}1A`,
+            border: `1px solid ${colors.warning}55`,
+            borderRadius: '6px',
+            fontSize: '11px',
+            fontFamily: fonts.body,
+            color: colors.textSecondary,
+          }}
+        >
+          <strong>Sample data inserted:</strong> {lastRun.inserted} fake packets across{' '}
+          {lastRun.targets?.length || 0} upstream
+          {(lastRun.targets?.length || 0) === 1 ? '' : 's'} · postures:{' '}
+          {Object.entries(lastRun.by_posture || {})
+            .map(([k, v]) => `${k}=${v}`)
+            .join(', ')}
+        </div>
+      )}
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4, 1fr)',
+          gap: '10px',
+          marginBottom: '10px',
+        }}
+      >
+        {POSTURE_META.map((p) => {
+          const count = data.counts?.[p.id] || 0;
+          const pct = formatPercent(count, data.total_packets);
+          return (
+            <div
+              key={p.id}
+              style={{
+                padding: '10px 12px',
+                background: colors.bgSecondary,
+                borderRadius: '6px',
+                border: `1px solid ${colors.borderLight}`,
+              }}
+            >
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}
+              >
+                <span
+                  aria-hidden="true"
+                  style={{
+                    width: '8px',
+                    height: '8px',
+                    borderRadius: '50%',
+                    background: p.dotColor,
+                    display: 'inline-block',
+                  }}
+                />
+                <span
+                  style={{
+                    fontSize: '11px',
+                    color: colors.textSecondary,
+                    fontFamily: fonts.body,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.04em',
+                  }}
+                >
+                  {p.label}
+                </span>
+              </div>
+              <div
+                style={{
+                  fontSize: '20px',
+                  fontFamily: fonts.body,
+                  fontWeight: 600,
+                  color: colors.textPrimary,
+                  lineHeight: 1.1,
+                }}
+              >
+                {count}
+              </div>
+              <div
+                style={{
+                  fontSize: '11px',
+                  fontFamily: fonts.mono,
+                  color: colors.textTertiary,
+                }}
+              >
+                {pct}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {(data.unique_agents?.length > 0 || data.unique_missions?.length > 0) && (
+        <div
+          style={{
+            paddingTop: '8px',
+            borderTop: `1px dashed ${colors.borderLight}`,
+            display: 'flex',
+            gap: '24px',
+            flexWrap: 'wrap',
+            fontSize: '11px',
+            fontFamily: fonts.body,
+            color: colors.textSecondary,
+          }}
+        >
+          {data.unique_agents?.length > 0 && (
+            <span>
+              <strong style={{ color: colors.textPrimary }}>{data.unique_agents.length}</strong>{' '}
+              unique agent{data.unique_agents.length === 1 ? '' : 's'}
+            </span>
+          )}
+          {data.unique_missions?.length > 0 && (
+            <span>
+              <strong style={{ color: colors.textPrimary }}>{data.unique_missions.length}</strong>{' '}
+              mission{data.unique_missions.length === 1 ? '' : 's'} observed
+            </span>
+          )}
+        </div>
+      )}
+
+      <div
+        style={{
+          marginTop: '8px',
+          fontSize: '11px',
+          fontFamily: fonts.body,
+          color: colors.textTertiary,
+        }}
+      >
+        AAuth signals are recorded as observed only. Learn more at{' '}
+        <a
+          href="https://www.aauth.dev"
+          target="_blank"
+          rel="noreferrer noopener"
+          style={{ color: colors.accentBlue }}
+        >
+          aauth.dev
+        </a>
+        .
+      </div>
+    </div>
+  );
+}

package/ui/src/components/Security/ScannerContent.jsx

@@ -7,8 +7,9 @@ import {
   IconSparkles,
   IconTool,
 } from '@tabler/icons-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { colors, fonts } from '../../theme';
+import AAuthPosturePanel from './AAuthPosturePanel.jsx';
 import CategoryView from './CategoryView/index.js';
 import ErrorDisplay from './ErrorDisplay.jsx';
 import FindingsTable from './FindingsTable.jsx';
@@ -18,6 +19,10 @@ import ScanningProgress from './ScanningProgress.jsx';
 import SecurityCharts from './SecurityCharts/index.js';
 import SecuritySummary from './SecuritySummary.jsx';
 import TargetView from './TargetView/index.js';
+import TrafficToxicFlowsPanel from './TrafficToxicFlowsPanel.jsx';
+
+/** Keep proxy toxic-flow snapshot aligned when traffic/findings are cleared on other tabs. */
+const TRAFFIC_TOXIC_POLL_MS = 20_000;
 
 const VIEW_MODES = [
   { id: 'dashboard', label: 'Dashboard', icon: IconChartBar },
@@ -162,11 +167,26 @@ export default function ScannerContent({
   showHistory,
   serversAvailable,
   scanComplete,
+  trafficToxicSnapshot,
+  trafficToxicLoading,
+  trafficToxicError,
+  loadTrafficToxicFlows,
+  replayTrafficToxicFlows,
 }) {
   const [viewMode, setViewMode] = useState('dashboard');
   const hasFindings = findings && findings.length > 0;
   const showEmpty = !error && !scanning && !hasFindings && !showHistory;
 
+  useEffect(() => {
+    if (error || scanning) {
+      return undefined;
+    }
+    const id = setInterval(() => {
+      loadTrafficToxicFlows();
+    }, TRAFFIC_TOXIC_POLL_MS);
+    return () => clearInterval(id);
+  }, [error, scanning, loadTrafficToxicFlows]);
+
   return (
     <div
       style={{
@@ -184,6 +204,18 @@ export default function ScannerContent({
         <StaticAnalysisBanner onNavigateToSmartScan={onNavigateToSmartScan} />
       )}
 
+      {!error && !scanning && <AAuthPosturePanel />}
+
+      {!error && !scanning && (
+        <TrafficToxicFlowsPanel
+          snapshot={trafficToxicSnapshot}
+          loading={trafficToxicLoading}
+          error={trafficToxicError}
+          onRefresh={loadTrafficToxicFlows}
+          onReplay={replayTrafficToxicFlows}
+        />
+      )}
+
       {/* History View */}
       {showHistory && !scanning && (
         <ScanHistory

package/ui/src/components/Security/TrafficToxicFlowsPanel.jsx

@@ -0,0 +1,253 @@
+import { IconDatabase, IconGitBranch, IconRefresh } from '@tabler/icons-react';
+import { colors, fonts } from '../../theme';
+
+function riskColor(risk) {
+  const r = (risk || '').toUpperCase();
+  if (r === 'HIGH') {
+    return colors.error;
+  }
+  if (r === 'MEDIUM') {
+    return colors.warning;
+  }
+  return colors.textSecondary;
+}
+
+export default function TrafficToxicFlowsPanel({ snapshot, loading, error, onRefresh, onReplay }) {
+  const flows = snapshot?.toxicFlows ?? [];
+  const servers = snapshot?.servers ?? [];
+  const replay = snapshot?.replay;
+
+  return (
+    <div
+      style={{
+        marginBottom: '20px',
+        padding: '14px 16px',
+        background: colors.bgSecondary,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          gap: '12px',
+          flexWrap: 'wrap',
+          marginBottom: '10px',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', minWidth: 0 }}>
+          <IconGitBranch
+            size={18}
+            stroke={1.5}
+            style={{ color: colors.textMuted, flexShrink: 0 }}
+          />
+          <div>
+            <div
+              style={{
+                fontSize: '13px',
+                fontWeight: 600,
+                color: colors.textPrimary,
+                fontFamily: fonts.body,
+              }}
+            >
+              Toxic flows (proxy traffic)
+            </div>
+            <div
+              style={{
+                fontSize: '11px',
+                color: colors.textSecondary,
+                fontFamily: fonts.body,
+                marginTop: '2px',
+                maxWidth: '720px',
+                lineHeight: 1.45,
+              }}
+            >
+              Heuristic cross-server pairs from <strong>tools/list</strong> responses seen through
+              the HTTP proxy. Run MCP clients through mcp-shark, trigger tool discovery, then
+              refresh or replay from the packet database. Clearing findings or all captured traffic
+              resets this in-memory model.
+            </div>
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
+          <button
+            type="button"
+            disabled={loading}
+            onClick={() => onRefresh()}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+              padding: '6px 12px',
+              fontSize: '11px',
+              fontWeight: 500,
+              fontFamily: fonts.body,
+              background: colors.buttonSecondary,
+              border: `1px solid ${colors.borderLight}`,
+              borderRadius: '4px',
+              cursor: loading ? 'wait' : 'pointer',
+              color: colors.textPrimary,
+            }}
+          >
+            <IconRefresh size={14} stroke={1.5} />
+            Refresh
+          </button>
+          <button
+            type="button"
+            disabled={loading}
+            onClick={() => onReplay()}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+              padding: '6px 12px',
+              fontSize: '11px',
+              fontWeight: 500,
+              fontFamily: fonts.body,
+              background: colors.buttonPrimary,
+              border: 'none',
+              borderRadius: '4px',
+              cursor: loading ? 'wait' : 'pointer',
+              color: colors.textInverse,
+            }}
+          >
+            <IconDatabase size={14} stroke={1.5} />
+            Replay from DB
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.error,
+            background: colors.errorBg,
+            padding: '8px 10px',
+            borderRadius: '4px',
+            marginBottom: '10px',
+            fontFamily: fonts.body,
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {loading && !snapshot && !error && (
+        <div style={{ fontSize: '12px', color: colors.textSecondary, fontFamily: fonts.body }}>
+          Loading…
+        </div>
+      )}
+
+      {snapshot && !error && (
+        <div style={{ fontSize: '11px', color: colors.textSecondary, fontFamily: fonts.body }}>
+          {servers.length > 0 ? (
+            <span>
+              <strong style={{ color: colors.textPrimary }}>{servers.length}</strong> server
+              {servers.length !== 1 ? 's' : ''} with tool metadata
+              {snapshot.computedAt
+                ? ` · updated ${new Date(snapshot.computedAt).toLocaleString()}`
+                : ''}
+              {replay != null
+                ? ` · replay scanned ${replay.packetRows} packet row${replay.packetRows !== 1 ? 's' : ''}`
+                : ''}
+            </span>
+          ) : (
+            <span>
+              No <code style={{ fontFamily: fonts.mono }}>tools/list</code> traffic captured yet.
+              Use the proxy, open a client that lists tools, then Refresh or Replay from DB.
+            </span>
+          )}
+        </div>
+      )}
+
+      {flows.length > 0 && (
+        <ul
+          style={{
+            listStyle: 'none',
+            margin: '12px 0 0',
+            padding: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
+          }}
+        >
+          {flows.map((flow, idx) => (
+            <li
+              key={`${flow.source}-${flow.target}-${flow.title}-${idx}`}
+              style={{
+                padding: '10px 12px',
+                background: colors.bgCard,
+                border: `1px solid ${colors.borderLight}`,
+                borderRadius: '6px',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
+                <span
+                  style={{
+                    fontSize: '10px',
+                    fontWeight: 700,
+                    letterSpacing: '0.04em',
+                    color: riskColor(flow.risk),
+                    fontFamily: fonts.body,
+                  }}
+                >
+                  {(flow.risk || '').toUpperCase()}
+                </span>
+                <span
+                  style={{
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    color: colors.textPrimary,
+                    fontFamily: fonts.body,
+                  }}
+                >
+                  {flow.title}
+                </span>
+              </div>
+              <div
+                style={{
+                  fontSize: '11px',
+                  color: colors.accentBlue,
+                  fontFamily: fonts.mono,
+                  marginTop: '4px',
+                }}
+              >
+                {flow.source} → {flow.target}
+              </div>
+              {flow.scenario && (
+                <div
+                  style={{
+                    fontSize: '11px',
+                    color: colors.textSecondary,
+                    fontFamily: fonts.body,
+                    marginTop: '6px',
+                    lineHeight: 1.45,
+                  }}
+                >
+                  {flow.scenario}
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {snapshot && servers.length > 0 && (
+        <div
+          style={{
+            marginTop: '12px',
+            fontSize: '10px',
+            color: colors.textTertiary,
+            fontFamily: fonts.body,
+            lineHeight: 1.4,
+          }}
+        >
+          {snapshot.note}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/components/Security/securityApi.js

@@ -66,6 +66,21 @@ export async function postClearFindings() {
   return response.json();
 }
 
+/** Cross-server toxic flows from observed tools/list proxy traffic */
+export async function fetchTrafficToxicFlows() {
+  const response = await fetch('/api/security/traffic-toxic-flows');
+  return response.json();
+}
+
+/** Rebuild toxic-flow model from stored response packets */
+export async function postReplayTrafficToxicFlows() {
+  const response = await fetch('/api/security/traffic-toxic-flows/replay', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+  });
+  return response.json();
+}
+
 export async function fetchCommunityRules() {
   const response = await fetch('/api/security/community-rules');
   return response.json();