@mcp-shark/mcp-shark 1.5.13 → 1.7.2

package/ui/server/setup.js

@@ -7,14 +7,15 @@ import { WebSocketServer } from 'ws';
 
 import { DependencyContainer } from '#core';
 import { getDatabaseFile, prepareAppDataSpaces } from '#core/configs/index.js';
+import { Defaults } from '#core/constants/Defaults.js';
 import { Server as ServerConstants } from '#core/constants/Server.js';
 import { openDb } from '#core/db/init.js';
 
+import { createAauthRoutes } from './routes/aauth.js';
 import { createBackupRoutes } from './routes/backups/index.js';
 import { createCompositeRoutes } from './routes/composite/index.js';
 import { createConfigRoutes } from './routes/config.js';
 import { createConversationsRoutes } from './routes/conversations.js';
-import { createHelpRoutes } from './routes/help.js';
 import { createLogsRoutes } from './routes/logs.js';
 import { createPlaygroundRoutes } from './routes/playground.js';
 import { createRequestsRoutes } from './routes/requests.js';
@@ -77,7 +78,6 @@ export function createUIServer() {
     (logEntry) => broadcastLogUpdate(clients, logEntry),
     cleanup
   );
-  const helpRoutes = createHelpRoutes();
   const playgroundRoutes = createPlaygroundRoutes(container);
   const smartScanRoutes = createSmartScanRoutes(container);
   const settingsRoutes = createSettingsRoutes(container);
@@ -98,6 +98,15 @@ export function createUIServer() {
 
   app.get('/api/statistics', statisticsRoutes.getStatistics);
 
+  // AAuth visibility (observation only — no verification, no enforcement)
+  const aauthRoutes = createAauthRoutes(container);
+  app.get('/api/aauth/posture', aauthRoutes.getPosture);
+  app.get('/api/aauth/missions', aauthRoutes.getMissions);
+  app.get('/api/aauth/graph', aauthRoutes.getGraph);
+  app.get('/api/aauth/upstreams', aauthRoutes.getUpstreams);
+  app.get('/api/aauth/node/:category/:id', aauthRoutes.getNodePackets);
+  app.post('/api/aauth/self-test', aauthRoutes.runSelfTest);
+
   app.get('/api/composite/logs', logsRoutes.getLogs);
   app.post('/api/composite/logs/clear', logsRoutes.clearLogs);
   app.get('/api/composite/logs/export', logsRoutes.exportLogs);
@@ -118,10 +127,6 @@ export function createUIServer() {
   app.post('/api/composite/shutdown', compositeRoutes.shutdown);
   app.get('/api/composite/servers', compositeRoutes.getServers);
 
-  app.get('/api/help/state', helpRoutes.getState);
-  app.post('/api/help/dismiss', helpRoutes.dismiss);
-  app.post('/api/help/reset', helpRoutes.reset);
-
   app.post('/api/playground/proxy', playgroundRoutes.proxyRequest);
 
   app.post('/api/smartscan/scans', smartScanRoutes.createScan);
@@ -147,6 +152,8 @@ export function createUIServer() {
   app.get('/api/security/history', securityRoutes.getScanHistory);
   app.post('/api/security/findings/clear', securityRoutes.clearFindings);
   app.delete('/api/security/scan/:scanId', securityRoutes.deleteScanFindings);
+  app.get('/api/security/traffic-toxic-flows', securityRoutes.getTrafficToxicFlows);
+  app.post('/api/security/traffic-toxic-flows/replay', securityRoutes.replayTrafficToxicFlows);
 
   // Security routes - YARA engine
   app.get('/api/security/engine/status', securityRoutes.getEngineStatus);
@@ -203,5 +210,216 @@ export function createUIServer() {
 
   const intervalId = setInterval(checkTimestampAndNotify, ServerConstants.PACKET_CHECK_INTERVAL_MS);
 
+  // Bring the proxy up automatically so a fresh `npm start` (including on
+  // a brand-new machine) gives the user a working setup without any clicks.
+  //
+  //   1. If ~/.mcp-shark/mcps.json already declares upstreams, start the
+  //      proxy with it directly. This handles restarts, `testbed:up`, and
+  //      any hand-edited config.
+  //   2. Otherwise, look for a real editor MCP config (Cursor, Windsurf,
+  //      Codex). If one exists with actual upstreams (i.e. not just our
+  //      own self-route from a previous run), run the full Setup flow
+  //      against it: convert -> write mcps.json -> start proxy -> patch
+  //      the editor config so the editor routes through us.
+  //   3. If neither path applies, the UI stays in monitoring-only mode and
+  //      the Setup panel is still available for manual configuration.
+  autoBootstrapProxy({
+    container,
+    processState,
+    setMcpSharkProcess,
+    mcpSharkLogs,
+    clients,
+    logger,
+  }).catch((err) => {
+    logger?.warn(
+      { error: err?.message },
+      'Auto-bootstrap of MCP proxy failed; user can run Setup manually'
+    );
+  });
+
   return { server, cleanup, logger, wss };
 }
+
+async function autoBootstrapProxy(deps) {
+  const { container, logger } = deps;
+  const configService = container.getService('config');
+  const mcpsJsonPath = configService.getMcpConfigPath();
+
+  // Phase 1: existing healthy mcps.json wins.
+  if (await tryStartFromExistingMcpsJson({ ...deps, mcpsJsonPath })) {
+    return;
+  }
+
+  // Phase 2: only auto-import on a *brand-new* install — i.e. no
+  // mcps.json on disk at all. If the user has an existing (but empty)
+  // mcps.json, that's an explicit "monitoring-only" choice and we
+  // respect it.
+  const mcpsJsonExists = configService.fileExists(mcpsJsonPath);
+  if (!mcpsJsonExists) {
+    if (await tryImportFromDetectedEditorConfig({ ...deps, mcpsJsonPath })) {
+      return;
+    }
+  }
+
+  logger?.info(
+    { mcpsJsonExists },
+    'No upstreams to auto-start; running in monitoring-only mode (Setup panel still available)'
+  );
+}
+
+async function tryStartFromExistingMcpsJson({
+  container,
+  processState,
+  setMcpSharkProcess,
+  mcpSharkLogs,
+  clients,
+  logger,
+  mcpsJsonPath,
+}) {
+  const configService = container.getService('config');
+  const serverManagementService = container.getService('serverManagement');
+
+  if (!configService.fileExists(mcpsJsonPath)) {
+    return false;
+  }
+
+  const content = configService.readConfigFile(mcpsJsonPath);
+  const parsed = configService.tryParseJson(content, mcpsJsonPath);
+  if (!parsed) {
+    logger?.warn(
+      { path: mcpsJsonPath },
+      'Existing mcps.json is not valid JSON; skipping auto-start'
+    );
+    return false;
+  }
+
+  const upstreamCount =
+    Object.keys(parsed.servers || {}).length + Object.keys(parsed.mcpServers || {}).length;
+  if (upstreamCount === 0) {
+    return false;
+  }
+
+  logger?.info(
+    { path: mcpsJsonPath, upstreams: upstreamCount },
+    'Auto-starting MCP proxy from existing mcps.json'
+  );
+
+  await serverManagementService.startServer({
+    configPath: mcpsJsonPath,
+    port: Defaults.DEFAULT_MCP_SERVER_PORT,
+    onLog: forwardLogEntry(mcpSharkLogs, clients),
+    onError: (err) => {
+      logger?.error({ error: err?.message, stack: err?.stack }, 'Auto-started MCP proxy crashed');
+    },
+    onReady: () => {
+      logger?.info('MCP proxy ready (auto-started from existing mcps.json)');
+    },
+  });
+
+  setMcpSharkProcess(processState, serverManagementService.getServerInstance());
+  return true;
+}
+
+async function tryImportFromDetectedEditorConfig({
+  container,
+  processState,
+  setMcpSharkProcess,
+  mcpSharkLogs,
+  clients,
+  logger,
+  mcpsJsonPath,
+}) {
+  const configService = container.getService('config');
+  const serverManagementService = container.getService('serverManagement');
+
+  const detected = configService.detectConfigFiles();
+  const candidate = pickImportableEditorConfig(detected, configService, mcpsJsonPath, logger);
+  if (!candidate) {
+    return false;
+  }
+
+  logger?.info(
+    { editor: candidate.editor, path: candidate.path, upstreams: candidate.upstreamCount },
+    'Auto-importing MCP servers from detected editor config'
+  );
+
+  const result = await serverManagementService.setup({
+    filePath: candidate.path,
+    port: Defaults.DEFAULT_MCP_SERVER_PORT,
+    onLog: forwardLogEntry(mcpSharkLogs, clients),
+    onError: (err) => {
+      logger?.error({ error: err?.message, stack: err?.stack }, 'Auto-imported MCP proxy crashed');
+    },
+    onReady: () => {
+      logger?.info(
+        { editor: candidate.editor },
+        'MCP proxy ready (auto-imported from editor config)'
+      );
+    },
+  });
+
+  if (!result?.success) {
+    logger?.warn(
+      { editor: candidate.editor, error: result?.error },
+      'Auto-import setup did not complete successfully'
+    );
+    return false;
+  }
+
+  setMcpSharkProcess(processState, serverManagementService.getServerInstance());
+  return true;
+}
+
+function pickImportableEditorConfig(detected, configService, mcpsJsonPath, logger) {
+  if (!Array.isArray(detected)) return null;
+
+  for (const entry of detected) {
+    if (!entry?.exists || !entry.path) continue;
+
+    // Skip our own proxy config — that's covered by phase 1.
+    try {
+      const a = configService.fileService.resolveFilePath(entry.path);
+      const b = configService.fileService.resolveFilePath(mcpsJsonPath);
+      if (a && b && a === b) continue;
+    } catch {
+      // best-effort comparison
+    }
+
+    const content = configService.readConfigFile(entry.path);
+    if (!content) continue;
+    const parsed = configService.tryParseJson(content, entry.path);
+    if (!parsed) continue;
+
+    // If the editor config is already patched (only the mcp-shark
+    // self-route), we can't import anything useful from it. The user
+    // either configured this themselves (great — phase 1 handled it via
+    // mcps.json) or there is nothing to import yet.
+    if (configService.isConfigPatched(parsed)) {
+      logger?.debug?.(
+        { editor: entry.editor, path: entry.path },
+        'Skipping already-patched editor config during auto-import'
+      );
+      continue;
+    }
+
+    const services = configService.extractServices(parsed) || [];
+    if (services.length === 0) continue;
+
+    return { ...entry, upstreamCount: services.length };
+  }
+
+  return null;
+}
+
+function forwardLogEntry(mcpSharkLogs, clients) {
+  return (logEntry) => {
+    mcpSharkLogs.push(logEntry);
+    for (const ws of clients) {
+      try {
+        ws.send(JSON.stringify({ type: 'log', payload: logEntry }));
+      } catch {
+        // best-effort; UI tolerates dropped log messages
+      }
+    }
+  };
+}

package/ui/server/swagger/paths/components.js

@@ -72,5 +72,60 @@ export const components = {
         results: { type: 'object' },
       },
     },
+    TrafficToxicFlowItem: {
+      type: 'object',
+      properties: {
+        risk: { type: 'string', example: 'HIGH' },
+        title: { type: 'string' },
+        source: { type: 'string' },
+        target: { type: 'string' },
+        scenario: { type: 'string' },
+        sourceIde: { type: 'string' },
+        targetIde: { type: 'string' },
+      },
+    },
+    TrafficToxicFlowServerMeta: {
+      type: 'object',
+      properties: {
+        name: { type: 'string' },
+        toolCount: { type: 'integer' },
+        updatedAt: { type: 'integer' },
+      },
+    },
+    TrafficToxicFlowSnapshot: {
+      type: 'object',
+      properties: {
+        success: { type: 'boolean', example: true },
+        toxicFlows: {
+          type: 'array',
+          items: { $ref: '#/components/schemas/TrafficToxicFlowItem' },
+        },
+        servers: {
+          type: 'array',
+          items: { $ref: '#/components/schemas/TrafficToxicFlowServerMeta' },
+        },
+        computedAt: { type: 'integer', nullable: true },
+        lastReplayPacketCount: { type: 'integer' },
+        note: { type: 'string' },
+      },
+    },
+    TrafficToxicFlowReplayResponse: {
+      allOf: [
+        { $ref: '#/components/schemas/TrafficToxicFlowSnapshot' },
+        {
+          type: 'object',
+          properties: {
+            replay: {
+              type: 'object',
+              properties: {
+                packetRows: { type: 'integer' },
+                serverCount: { type: 'integer' },
+                flowCount: { type: 'integer' },
+              },
+            },
+          },
+        },
+      ],
+    },
   },
 };

package/ui/server/swagger/paths/securityTrafficFlows.js

@@ -0,0 +1,59 @@
+/**
+ * Local Analysis — traffic-derived toxic flow endpoints
+ */
+
+export const securityTrafficFlowsPaths = {
+  '/api/security/traffic-toxic-flows': {
+    get: {
+      tags: ['Security'],
+      summary: 'Get toxic flows from proxy traffic',
+      description:
+        'Returns the latest cross-server toxic-flow heuristics built from tools/list responses observed on the HTTP proxy. In-memory model; use replay to rebuild from the packet database.',
+      responses: {
+        200: {
+          description: 'Snapshot with toxicFlows, servers, computedAt, note',
+          content: {
+            'application/json': {
+              schema: { $ref: '#/components/schemas/TrafficToxicFlowSnapshot' },
+            },
+          },
+        },
+        503: {
+          description: 'Traffic toxic flow service unavailable',
+          content: {
+            'application/json': {
+              schema: {
+                type: 'object',
+                properties: {
+                  success: { type: 'boolean', example: false },
+                  error: { type: 'string' },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  '/api/security/traffic-toxic-flows/replay': {
+    post: {
+      tags: ['Security'],
+      summary: 'Replay toxic flows from stored packets',
+      description:
+        'Scans stored HTTP response packets for tools/list-style JSON-RPC results and rebuilds the toxic-flow registry.',
+      responses: {
+        200: {
+          description: 'Snapshot plus replay stats (packetRows, serverCount, flowCount)',
+          content: {
+            'application/json': {
+              schema: { $ref: '#/components/schemas/TrafficToxicFlowReplayResponse' },
+            },
+          },
+        },
+        503: {
+          description: 'Traffic toxic flow service unavailable',
+        },
+      },
+    },
+  },
+};

package/ui/server/swagger/paths.js

@@ -7,10 +7,10 @@ import { backupsPaths } from './paths/backups.js';
 import { components } from './paths/components.js';
 import { configPaths } from './paths/config.js';
 import { conversationsPaths } from './paths/conversations.js';
-import { helpPaths } from './paths/help.js';
 import { logsPaths } from './paths/logs.js';
 import { playgroundPaths } from './paths/playground.js';
 import { requestsPaths } from './paths/requests.js';
+import { securityTrafficFlowsPaths } from './paths/securityTrafficFlows.js';
 import { serverManagementPaths } from './paths/serverManagement.js';
 import { sessionsPaths } from './paths/sessions.js';
 import { settingsPaths } from './paths/settings.js';
@@ -22,6 +22,7 @@ import { statisticsPaths } from './paths/statistics.js';
  */
 export const paths = {
   ...requestsPaths,
+  ...securityTrafficFlowsPaths,
   ...sessionsPaths,
   ...conversationsPaths,
   ...statisticsPaths,
@@ -29,7 +30,6 @@ export const paths = {
   ...configPaths,
   ...backupsPaths,
   ...serverManagementPaths,
-  ...helpPaths,
   ...playgroundPaths,
   ...smartScanPaths,
   ...settingsPaths,

package/ui/server/swagger/swagger.js

@@ -4,7 +4,7 @@ export const swaggerSpec = {
   openapi: '3.0.0',
   info: {
     title: 'MCP Shark API',
-    version: '1.5.4',
+    version: '1.6.0',
     description:
       'API documentation for MCP Shark - A powerful monitoring and debugging tool for Model Context Protocol (MCP) servers. Provides deep visibility into every request and response.',
     contact: {
@@ -27,10 +27,13 @@ export const swaggerSpec = {
     { name: 'Config', description: 'Configuration file management' },
     { name: 'Backups', description: 'Configuration backup management' },
     { name: 'Server Management', description: 'MCP Shark server lifecycle management' },
-    { name: 'Help', description: 'Help and tour management' },
     { name: 'Playground', description: 'MCP playground for testing tools and resources' },
     { name: 'Smart Scan', description: 'AI-powered security analysis for MCP servers' },
     { name: 'Settings', description: 'Application settings' },
+    {
+      name: 'Security',
+      description: 'Local static analysis findings and traffic-derived toxic flows (HTTP proxy)',
+    },
   ],
   paths,
   components,

package/ui/server.js

@@ -29,7 +29,7 @@ export async function runUIServer() {
         `Port ${port} is already in use. Please stop the existing server or use a different port.`
       );
       bootstrapLogger.error(
-        `\n❌ Port ${port} is already in use.\n   Please stop the existing server or set MCP_SHARK_PORT environment variable to use a different port.\n`
+        `\n❌ Port ${port} is already in use.\n   Please stop the existing server or set the UI_PORT (or MCP_SHARK_PORT) environment variable to use a different port.\n`
       );
     } else {
       logger?.error({ error: error.message, stack: error.stack }, 'Server error');

package/ui/src/App.jsx

@@ -1,16 +1,15 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import CompositeLogs from './CompositeLogs';
 import CompositeSetup from './CompositeSetup';
-import IntroTour from './IntroTour';
 import Security from './Security';
 import ShutdownPage from './ShutdownPage';
 import SmartScan from './SmartScan';
 import TabNavigation from './TabNavigation';
+import AauthExplorerView from './components/AauthExplorer/AauthExplorerView';
 import ActionMenu from './components/App/ActionMenu';
 import TrafficTab from './components/App/TrafficTab';
 import { useAppState } from './components/App/useAppState';
 import McpPlayground from './components/McpPlayground';
-import { tourSteps } from './config/tourSteps.jsx';
 import { colors } from './theme';
 import { fadeIn } from './utils/animations';
 
@@ -25,12 +24,9 @@ function App() {
     setFilters,
     stats,
     firstRequestTime,
-    showTour,
-    setShowTour,
     prevTabRef,
     loadRequests,
   } = useAppState();
-  const [tourKey, setTourKey] = useState(0);
 
   useEffect(() => {
     if (prevTabRef.current !== activeTab) {
@@ -51,54 +47,10 @@ function App() {
         background: colors.bgPrimary,
       }}
     >
-      {showTour && (
-        <IntroTour
-          key={tourKey}
-          steps={tourSteps}
-          onComplete={() => setShowTour(false)}
-          onSkip={() => setShowTour(false)}
-          onStepChange={(stepIndex) => {
-            const step = tourSteps[stepIndex];
-            if (step) {
-              if (
-                step.target === '[data-tour="setup-tab"]' ||
-                step.target === '[data-tour="detected-editors"]' ||
-                step.target === '[data-tour="select-file"]' ||
-                step.target === '[data-tour="start-button"]'
-              ) {
-                if (activeTab !== 'setup') {
-                  setActiveTab('setup');
-                }
-              } else if (step.target === '[data-tour="traffic-tab"]') {
-                if (activeTab !== 'traffic') {
-                  setActiveTab('traffic');
-                }
-              } else if (step.target === '[data-tour="smart-scan-tab"]') {
-                if (activeTab !== 'smart-scan') {
-                  setActiveTab('smart-scan');
-                }
-              }
-            }
-          }}
-        />
-      )}
-      <div style={{ position: 'relative' }} data-tour="tabs">
+      <div style={{ position: 'relative' }}>
         <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />
       </div>
-      <ActionMenu
-        onHelpClick={() => {
-          if (showTour) {
-            setShowTour(false);
-            setTourKey((prev) => prev + 1);
-            setTimeout(() => {
-              setShowTour(true);
-            }, 100);
-          } else {
-            setTourKey((prev) => prev + 1);
-            setShowTour(true);
-          }
-        }}
-      />
+      <ActionMenu />
 
       {activeTab === 'traffic' && (
         <TrafficTab
@@ -166,6 +118,28 @@ function App() {
           />
         </div>
       )}
+
+      {activeTab === 'aauth-explorer' && (
+        <div
+          data-tab-content
+          style={{ flex: 1, overflow: 'hidden', width: '100%', height: '100%' }}
+        >
+          <AauthExplorerView
+            onOpenPacket={(frameNumber) => {
+              if (frameNumber == null) {
+                return;
+              }
+              const target = requests?.find?.((r) => r.frame_number === frameNumber);
+              if (target) {
+                setSelected(target);
+              } else {
+                setSelected({ frame_number: frameNumber });
+              }
+              setActiveTab('traffic');
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 }

package/ui/src/PacketFilters.jsx

@@ -3,6 +3,7 @@ import anime from 'animejs';
 import { useEffect, useRef, useState } from 'react';
 import AlertModal from './components/AlertModal';
 import ConfirmationModal from './components/ConfirmationModal';
+import AAuthPostureFilter from './components/PacketFilters/AAuthPostureFilter';
 import ExportControls from './components/PacketFilters/ExportControls';
 import FilterInput from './components/PacketFilters/FilterInput';
 import { colors, fonts } from './theme';
@@ -44,6 +45,15 @@ function RequestFilters({ filters, onFilterChange, stats, onClear }) {
       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);
+      }
       queryParams.append('format', format);
 
       const response = await fetch(`/api/requests/export?${queryParams}`);
@@ -67,7 +77,6 @@ function RequestFilters({ filters, onFilterChange, stats, onClear }) {
   return (
     <div
       ref={filtersRef}
-      data-tour="filters"
       style={{
         padding: '12px 16px',
         borderBottom: `1px solid ${colors.borderLight}`,
@@ -159,6 +168,27 @@ function RequestFilters({ filters, onFilterChange, stats, onClear }) {
         style={{ width: '150px' }}
       />
 
+      <AAuthPostureFilter
+        value={filters.aauthPosture || null}
+        onChange={(posture) => onFilterChange({ ...filters, aauthPosture: posture })}
+      />
+
+      <FilterInput
+        type="text"
+        placeholder="AAuth Agent (aauth:..)"
+        value={filters.aauthAgent || ''}
+        onChange={(e) => onFilterChange({ ...filters, aauthAgent: e.target.value || null })}
+        style={{ width: '200px' }}
+      />
+
+      <FilterInput
+        type="text"
+        placeholder="AAuth Mission..."
+        value={filters.aauthMission || ''}
+        onChange={(e) => onFilterChange({ ...filters, aauthMission: e.target.value || null })}
+        style={{ width: '180px' }}
+      />
+
       <ExportControls stats={stats} onExport={handleExport} />
 
       <button

package/ui/src/PacketList.jsx

@@ -38,11 +38,11 @@ function RequestList({ requests, selected, onSelect, firstRequestTime }) {
         if (requests.length > prevRequestsLengthRef.current) {
           const newRows = Array.from(rows).slice(prevRequestsLengthRef.current);
           if (newRows.length > 0) {
-            staggerIn(newRows, { delay: 30, duration: 300 });
+            staggerIn(newRows, { delay: 30, duration: 300, fade: false });
           }
         } else {
           // Animate all rows if the list was reset
-          staggerIn(rows, { delay: 20, duration: 300 });
+          staggerIn(rows, { delay: 20, duration: 300, fade: false });
         }
         prevRequestsLengthRef.current = requests.length;
       }

package/ui/src/Security.jsx

@@ -30,6 +30,11 @@ function Security({ onNavigateToSmartScan, onNavigateToSetup }) {
     runningServersCount,
     // Scan complete state
     scanComplete,
+    trafficToxicSnapshot,
+    trafficToxicLoading,
+    trafficToxicError,
+    loadTrafficToxicFlows,
+    replayTrafficToxicFlows,
     // YARA rules
     communityRules,
     engineStatus,
@@ -103,6 +108,11 @@ function Security({ onNavigateToSmartScan, onNavigateToSetup }) {
           showHistory={showHistory}
           serversAvailable={runningServersCount > 0}
           scanComplete={scanComplete}
+          trafficToxicSnapshot={trafficToxicSnapshot}
+          trafficToxicLoading={trafficToxicLoading}
+          trafficToxicError={trafficToxicError}
+          loadTrafficToxicFlows={loadTrafficToxicFlows}
+          replayTrafficToxicFlows={replayTrafficToxicFlows}
         />
       )}