@mcp-shark/mcp-shark 1.5.13 → 1.7.2

package/ui/src/components/App/ActionMenu.jsx

@@ -2,13 +2,12 @@ import { IconMenu2, IconX } from '@tabler/icons-react';
 import { useEffect, useRef, useState } from 'react';
 import { colors, fonts } from '../../theme';
 import ApiDocsButton from './ApiDocsButton';
-import HelpButton from './HelpButton';
 import ShutdownButton from './ShutdownButton';
 
 /**
- * Expandable action menu grouping API, Help, and Shutdown buttons
+ * Expandable action menu grouping API docs and shutdown
  */
-export default function ActionMenu({ onHelpClick }) {
+export default function ActionMenu() {
   const [isExpanded, setIsExpanded] = useState(false);
   const menuRef = useRef(null);
 
@@ -73,39 +72,13 @@ export default function ActionMenu({ onHelpClick }) {
     <div ref={menuRef} style={{ position: 'fixed', bottom: '20px', right: '20px', zIndex: 9999 }}>
       {/* API Docs Button - Top */}
       <ApiDocsButton
-        style={{
-          ...menuItemStyle,
-          bottom: isExpanded ? '180px' : '0',
-          position: 'absolute',
-          left: 'auto', // Ensure no left positioning conflicts
-        }}
-        onClick={() => setIsExpanded(false)}
-        onMouseEnter={(e) => {
-          if (isExpanded) {
-            e.currentTarget.style.transform = 'scale(1.1) translateY(0)';
-            e.currentTarget.style.boxShadow = `0 6px 16px ${colors.shadowLg}`;
-          }
-        }}
-        onMouseLeave={(e) => {
-          if (isExpanded) {
-            e.currentTarget.style.transform = 'scale(1) translateY(0)';
-            e.currentTarget.style.boxShadow = `0 4px 12px ${colors.shadowMd}`;
-          }
-        }}
-      />
-
-      {/* Help Button - Middle */}
-      <HelpButton
-        onClick={() => {
-          onHelpClick();
-          setIsExpanded(false);
-        }}
         style={{
           ...menuItemStyle,
           bottom: isExpanded ? '120px' : '0',
           position: 'absolute',
           left: 'auto', // Ensure no left positioning conflicts
         }}
+        onClick={() => setIsExpanded(false)}
         onMouseEnter={(e) => {
           if (isExpanded) {
             e.currentTarget.style.transform = 'scale(1.1) translateY(0)';
@@ -120,7 +93,7 @@ export default function ActionMenu({ onHelpClick }) {
         }}
       />
 
-      {/* Shutdown Button - Bottom (closest to main button) */}
+      {/* Shutdown Button — closest to main toggle */}
       <ShutdownButton
         style={{
           ...menuItemStyle,

package/ui/src/components/App/ApiDocsButton.jsx

@@ -66,7 +66,6 @@ export default function ApiDocsButton({ style, onClick, onMouseEnter, onMouseLea
     <button
       type="button"
       onClick={handleClick}
-      data-tour="api-docs-button"
       style={defaultStyle}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

package/ui/src/components/App/ShutdownButton.jsx

@@ -90,7 +90,6 @@ export default function ShutdownButton({ style, onClick, onMouseEnter, onMouseLe
       <button
         type="button"
         onClick={handleClick}
-        data-tour="shutdown-button"
         style={defaultStyle}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}

package/ui/src/components/App/useAppState.js

@@ -22,9 +22,27 @@ function appendFilterParams(queryParams, filters) {
   if (filters.jsonrpcId) {
     queryParams.append('jsonrpcId', filters.jsonrpcId);
   }
+  if (filters.aauthPosture) {
+    queryParams.append('aauthPosture', filters.aauthPosture);
+  }
+  if (filters.aauthAgent) {
+    queryParams.append('aauthAgent', filters.aauthAgent);
+  }
+  if (filters.aauthMission) {
+    queryParams.append('aauthMission', filters.aauthMission);
+  }
 }
 
-const VALID_TABS = ['traffic', 'logs', 'setup', 'playground', 'smart-scan'];
+const VALID_TABS = [
+  'traffic',
+  'logs',
+  'setup',
+  'playground',
+  'security',
+  'aauth-explorer',
+  'smart-scan',
+  'shutdown',
+];
 const DEFAULT_TAB = 'traffic';
 
 function getTabFromHash() {
@@ -47,8 +65,6 @@ export function useAppState() {
   const [filters, setFilters] = useState({});
   const [stats, setStats] = useState(null);
   const [firstRequestTime, setFirstRequestTime] = useState(null);
-  const [showTour, setShowTour] = useState(false);
-  const [tourDismissed, setTourDismissed] = useState(true);
   const wsRef = useRef(null);
   const prevTabRef = useRef(activeTab);
   const filtersRef = useRef(filters);
@@ -117,25 +133,6 @@ export function useAppState() {
   };
 
   useEffect(() => {
-    const checkTourState = async () => {
-      try {
-        const response = await fetch('/api/help/state');
-        const data = await response.json();
-        setTourDismissed(data.dismissed || data.tourCompleted);
-        if (!data.dismissed && !data.tourCompleted) {
-          setTimeout(() => {
-            setShowTour(true);
-          }, 500);
-        }
-      } catch (error) {
-        console.error('Failed to load tour state:', error);
-        setTimeout(() => {
-          setShowTour(true);
-        }, 500);
-        setTourDismissed(false);
-      }
-    };
-
     const initData = async () => {
       try {
         const queryParams = new URLSearchParams();
@@ -165,7 +162,6 @@ export function useAppState() {
       }
     };
 
-    checkTourState();
     initData();
 
     const wsUrl = import.meta.env.DEV
@@ -289,9 +285,6 @@ export function useAppState() {
     setFilters,
     stats,
     firstRequestTime,
-    showTour,
-    setShowTour,
-    tourDismissed,
     prevTabRef,
     wsRef,
     loadRequests,

package/ui/src/components/DetailsTab/AAuthIdentitySection.jsx

@@ -0,0 +1,119 @@
+import { colors, fonts } from '../../theme';
+import AAuthBadge from '../AAuthBadge';
+import CollapsibleSection from '../CollapsibleSection';
+
+function Field({ label, value, mono = false }) {
+  if (!value) {
+    return null;
+  }
+  return (
+    <div style={{ display: 'flex', gap: '12px', padding: '4px 0' }}>
+      <div
+        style={{
+          minWidth: '140px',
+          color: colors.textSecondary,
+          fontSize: '11px',
+          fontFamily: fonts.body,
+          fontWeight: 500,
+          textTransform: 'uppercase',
+          letterSpacing: '0.04em',
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          color: colors.textPrimary,
+          fontSize: '12px',
+          fontFamily: mono ? fonts.mono : fonts.body,
+          wordBreak: 'break-all',
+        }}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders an AAuth Identity panel for a single packet (request or response).
+ * Always read-only and observation-only — values describe what was on the
+ * wire, never claims of cryptographic validity.
+ */
+export default function AAuthIdentitySection({ aauth, titleColor }) {
+  if (!aauth) {
+    return null;
+  }
+
+  const hasAnySignal =
+    aauth.posture !== 'none' ||
+    aauth.agent ||
+    aauth.mission ||
+    aauth.requirement ||
+    aauth.sig_present ||
+    aauth.error;
+
+  if (!hasAnySignal) {
+    return null;
+  }
+
+  const coveredText =
+    Array.isArray(aauth.sig_covered) && aauth.sig_covered.length > 0
+      ? aauth.sig_covered.join(', ')
+      : null;
+
+  return (
+    <CollapsibleSection
+      title={
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+          Identity
+          <AAuthBadge aauth={aauth} size="sm" />
+        </span>
+      }
+      titleColor={titleColor || colors.accentBlue}
+      defaultExpanded={true}
+    >
+      <div
+        style={{
+          padding: '12px 14px',
+          background: colors.bgSecondary,
+          border: `1px solid ${colors.borderLight}`,
+          borderRadius: '8px',
+        }}
+      >
+        <Field label="Agent" value={aauth.agent} mono />
+        <Field label="Mission" value={aauth.mission} mono />
+        <Field label="Signature" value={aauth.sig_present ? 'present (not verified)' : null} />
+        <Field label="Algorithm" value={aauth.sig_alg} mono />
+        <Field label="Key ID" value={aauth.sig_keyid_short || aauth.sig_keyid} mono />
+        <Field label="Key thumbprint" value={aauth.key_thumbprint_short} mono />
+        <Field label="Covered components" value={coveredText} mono />
+        <Field label="Requirement" value={aauth.requirement} />
+        <Field label="Signature error" value={aauth.error} />
+        <div
+          style={{
+            marginTop: '10px',
+            paddingTop: '8px',
+            borderTop: `1px dashed ${colors.borderLight}`,
+            color: colors.textTertiary,
+            fontSize: '11px',
+            fontFamily: fonts.body,
+            lineHeight: 1.45,
+          }}
+        >
+          mcp-shark records AAuth signals as observed only. No signatures are cryptographically
+          verified. Learn more at{' '}
+          <a
+            href="https://www.aauth.dev"
+            target="_blank"
+            rel="noreferrer noopener"
+            style={{ color: colors.accentBlue }}
+          >
+            aauth.dev
+          </a>
+          .
+        </div>
+      </div>
+    </CollapsibleSection>
+  );
+}

package/ui/src/components/DetailsTab/RequestDetailsSection.jsx

@@ -1,5 +1,6 @@
 import { colors } from '../../theme';
 import CollapsibleSection from '../CollapsibleSection';
+import AAuthIdentitySection from './AAuthIdentitySection';
 import BodySection from './BodySection';
 import CollapsibleRequestResponse from './CollapsibleRequestResponse';
 import HeadersSection from './HeadersSection';
@@ -21,6 +22,7 @@ export default function RequestDetailsSection({ request, requestHeaders, request
       <InfoSection data={request} titleColor={colors.accentBlue} />
       <NetworkInfoSection data={request} showUserAgent={true} />
       <ProtocolInfoSection data={request} titleColor={colors.accentBlue} />
+      <AAuthIdentitySection aauth={request.aauth} titleColor={colors.accentBlue} />
       <HeadersSection headers={requestHeaders} titleColor={colors.accentBlue} />
       <BodySection body={requestBody} titleColor={colors.accentBlue} />
       {request.jsonrpc_params && (

package/ui/src/components/DetailsTab/ResponseDetailsSection.jsx

@@ -1,5 +1,6 @@
 import { colors, fonts } from '../../theme';
 import CollapsibleSection from '../CollapsibleSection';
+import AAuthIdentitySection from './AAuthIdentitySection';
 import BodySection from './BodySection';
 import CollapsibleRequestResponse from './CollapsibleRequestResponse';
 import HeadersSection from './HeadersSection';
@@ -21,6 +22,7 @@ export default function ResponseDetailsSection({ response, responseHeaders, resp
       <InfoSection data={response} titleColor={colors.accentGreen} />
       <NetworkInfoSection data={response} />
       <ProtocolInfoSection data={response} titleColor={colors.accentGreen} />
+      <AAuthIdentitySection aauth={response.aauth} titleColor={colors.accentGreen} />
       <HeadersSection headers={responseHeaders} titleColor={colors.accentGreen} />
       <BodySection body={responseBody} titleColor={colors.accentGreen} />
       {response.jsonrpc_result && (

package/ui/src/components/DetectedPathsList.jsx

@@ -62,15 +62,11 @@ function DetectedPathsList({ detectedPaths, detecting, onDetect, onSelect, onVie
           )}
         </button>
       </div>
-      <div
-        data-tour="detected-editors"
-        style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
-      >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
         {detectedPaths.map((item, idx) => (
           <button
             key={`${item.editor}-${item.path}-${idx}`}
             type="button"
-            data-tour={idx === 0 ? 'first-detected-editor' : undefined}
             onClick={() => onSelect(item.path)}
             onDoubleClick={() => {
               if (item.exists) {

package/ui/src/components/FileInput.jsx

@@ -13,7 +13,6 @@ function FileInput({
     <>
       <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
         <label
-          data-tour="select-file"
           style={{
             padding: '8px 16px',
             background: colors.buttonPrimary,

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

@@ -0,0 +1,81 @@
+import { colors, fonts } from '../../theme';
+
+const POSTURES = [
+  { id: null, label: 'All', dotColor: colors.textTertiary },
+  { 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 },
+];
+
+/**
+ * Segmented selector that filters captured traffic by AAuth posture.
+ * Visualization-only — does not change the underlying traffic in any way.
+ */
+export default function AAuthPostureFilter({ value, onChange }) {
+  return (
+    <div
+      title="Filter packets by observed AAuth posture (no verification)"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0,
+        background: colors.bgPrimary,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '999px',
+        padding: '2px',
+        height: '34px',
+      }}
+    >
+      <span
+        style={{
+          fontSize: '10px',
+          fontFamily: fonts.body,
+          color: colors.textTertiary,
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+          padding: '0 8px 0 10px',
+        }}
+      >
+        AAuth
+      </span>
+      {POSTURES.map((option) => {
+        const active = (value || null) === (option.id || null);
+        return (
+          <button
+            key={option.label}
+            type="button"
+            onClick={() => onChange(option.id)}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              padding: '4px 10px',
+              border: 'none',
+              cursor: 'pointer',
+              fontSize: '11px',
+              fontFamily: fonts.body,
+              fontWeight: active ? 600 : 500,
+              color: active ? colors.textPrimary : colors.textSecondary,
+              background: active ? colors.bgSelected : 'transparent',
+              borderRadius: '999px',
+              transition: 'background-color 0.15s ease',
+            }}
+          >
+            <span
+              aria-hidden="true"
+              style={{
+                width: '6px',
+                height: '6px',
+                borderRadius: '50%',
+                background: option.dotColor,
+                display: 'inline-block',
+              }}
+            />
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -6,6 +6,7 @@ import {
   getEndpoint,
   getSourceDest,
 } from '../../utils/requestUtils.js';
+import AAuthBadge from '../AAuthBadge';
 
 const ChevronDown = ({ size = 12, rotated = false }) => (
   <IconChevronDown
@@ -182,7 +183,12 @@ export default function RequestRowMain({
             fontWeight: '500',
           }}
         >
-          {dest}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
+            <span>{dest}</span>
+            {request.aauth && request.aauth.posture !== 'none' && (
+              <AAuthBadge aauth={request.aauth} size="sm" showLabel={false} />
+            )}
+          </div>
         </td>
         <td
           style={{