@mcp-shark/mcp-shark 1.4.2 → 1.5.2

package/ui/server/utils/scan-cache/server-operations.js

@@ -1,5 +1,6 @@
-import { readFileSync, existsSync, readdirSync, unlinkSync } from 'node:fs';
+import { readFileSync, readdirSync, unlinkSync } from 'node:fs';
 import { join } from 'node:path';
+import logger from '../logger.js';
 import { ensureScanResultsDirectory } from './directory.js';
 
 /**
@@ -30,7 +31,7 @@ export function getCachedScanResultsForServer(serverName) {
         }
       } catch (error) {
         // Skip files that can't be parsed
-        console.warn(`Error reading scan result file ${file}:`, error);
+        logger.warn({ file, error: error.message }, 'Error reading scan result file');
       }
     }
 
@@ -39,7 +40,7 @@ export function getCachedScanResultsForServer(serverName) {
 
     return results;
   } catch (error) {
-    console.error('Error getting cached scan results for server:', error);
+    logger.error({ error: error.message }, 'Error getting cached scan results for server');
     return [];
   }
 }
@@ -54,9 +55,8 @@ export function clearOldScanResults(maxAgeMs = 30 * 24 * 60 * 60 * 1000) {
     const scanResultsDir = ensureScanResultsDirectory();
     const files = readdirSync(scanResultsDir).filter((f) => f.endsWith('.json'));
     const cutoffTime = Date.now() - maxAgeMs;
-    let deletedCount = 0;
 
-    for (const file of files) {
+    const deletedCount = files.reduce((count, file) => {
       try {
         const filePath = join(scanResultsDir, file);
         const fileContent = readFileSync(filePath, 'utf8');
@@ -64,17 +64,22 @@ export function clearOldScanResults(maxAgeMs = 30 * 24 * 60 * 60 * 1000) {
 
         if (data.updatedAt && data.updatedAt < cutoffTime) {
           unlinkSync(filePath);
-          deletedCount++;
+          return count + 1;
         }
+        return count;
       } catch (error) {
         // Skip files that can't be parsed
-        console.warn(`Error processing scan result file ${file} for cleanup:`, error);
+        logger.warn(
+          { file, error: error.message },
+          'Error processing scan result file for cleanup'
+        );
+        return count;
       }
-    }
+    }, 0);
 
     return deletedCount;
   } catch (error) {
-    console.error('Error clearing old scan results:', error);
+    logger.error({ error: error.message }, 'Error clearing old scan results');
     return 0;
   }
 }

package/ui/server/utils/serialization.js

@@ -1,7 +1,13 @@
 export function serializeBigInt(obj) {
-  if (obj === null || obj === undefined) return obj;
-  if (typeof obj === 'bigint') return obj.toString();
-  if (Array.isArray(obj)) return obj.map(serializeBigInt);
+  if (obj === null || obj === undefined) {
+    return obj;
+  }
+  if (typeof obj === 'bigint') {
+    return obj.toString();
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(serializeBigInt);
+  }
   if (typeof obj === 'object') {
     const result = {};
     for (const [key, value] of Object.entries(obj)) {

package/ui/server/utils/smartscan-token.js

@@ -1,6 +1,7 @@
 import { existsSync, readFileSync, writeFileSync } from 'node:fs';
-import { getWorkingDirectory, prepareAppDataSpaces } from 'mcp-shark-common/configs/index.js';
 import { join } from 'node:path';
+import { getWorkingDirectory, prepareAppDataSpaces } from 'mcp-shark-common/configs/index.js';
+import logger from './logger.js';
 
 const SMART_SCAN_TOKEN_NAME = 'smart-scan-token.json';
 
@@ -18,7 +19,7 @@ export function readSmartScanToken() {
     }
     return null;
   } catch (error) {
-    console.error('Error reading Smart Scan token:', error);
+    logger.error({ error: error.message }, 'Error reading Smart Scan token');
     return null;
   }
 }
@@ -36,7 +37,7 @@ export function writeSmartScanToken(token) {
     writeFileSync(tokenPath, JSON.stringify(data, null, 2), { mode: 0o600 }); // Read/write for owner only
     return true;
   } catch (error) {
-    console.error('Error writing Smart Scan token:', error);
+    logger.error({ error: error.message }, 'Error writing Smart Scan token');
     return false;
   }
 }

package/ui/server.js

@@ -1,34 +1,32 @@
+import { createServer } from 'node:http';
+import * as path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 import express from 'express';
-import { createServer } from 'http';
 import { WebSocketServer } from 'ws';
-import * as path from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'url';
 
+import { getDatabaseFile, prepareAppDataSpaces } from 'mcp-shark-common/configs/index.js';
 import { openDb } from 'mcp-shark-common/db/init.js';
-import {
-  getDatabaseFile,
-  prepareAppDataSpaces,
-  getMcpConfigPath,
-} from 'mcp-shark-common/configs/index.js';
 import { queryRequests } from 'mcp-shark-common/db/query.js';
 import { restoreOriginalConfig } from './server/utils/config.js';
 
-import { createRequestsRoutes } from './server/routes/requests.js';
-import { createConversationsRoutes } from './server/routes/conversations.js';
-import { createSessionsRoutes } from './server/routes/sessions.js';
-import { createStatisticsRoutes } from './server/routes/statistics.js';
-import { createLogsRoutes } from './server/routes/logs.js';
+import { createBackupRoutes } from './server/routes/backups/index.js';
+import { createCompositeRoutes } from './server/routes/composite/index.js';
 import { createConfigRoutes } from './server/routes/config.js';
-import { createBackupRoutes } from './server/routes/backups.js';
-import { createCompositeRoutes } from './server/routes/composite.js';
+import { createConversationsRoutes } from './server/routes/conversations.js';
 import { createHelpRoutes } from './server/routes/help.js';
+import { createLogsRoutes } from './server/routes/logs.js';
 import { createPlaygroundRoutes } from './server/routes/playground.js';
+import { createRequestsRoutes } from './server/routes/requests.js';
+import { createSessionsRoutes } from './server/routes/sessions.js';
+import { createSettingsRoutes } from './server/routes/settings.js';
 import { createSmartScanRoutes } from './server/routes/smartscan.js';
+import { createStatisticsRoutes } from './server/routes/statistics.js';
+import { serializeBigInt } from './server/utils/serialization.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const MAX_LOG_LINES = 10000;
+const _MAX_LOG_LINES = 10000;
 
 export function createUIServer() {
   prepareAppDataSpaces();
@@ -42,10 +40,10 @@ export function createUIServer() {
 
   const clients = new Set();
   const mcpSharkLogs = [];
-  const processState = { mcpSharkProcess: null };
+  const processState = { mcpSharkServer: null };
 
-  const setMcpSharkProcess = (process) => {
-    processState.mcpSharkProcess = process;
+  const setMcpSharkProcess = (server) => {
+    processState.mcpSharkServer = server;
   };
 
   wss.on('connection', (ws) => {
@@ -73,7 +71,7 @@ export function createUIServer() {
   const logsRoutes = createLogsRoutes(mcpSharkLogs, broadcastLogUpdate);
   const configRoutes = createConfigRoutes();
   const backupRoutes = createBackupRoutes();
-  const getMcpSharkProcess = () => processState.mcpSharkProcess;
+  const getMcpSharkProcess = () => processState.mcpSharkServer;
   const compositeRoutes = createCompositeRoutes(
     getMcpSharkProcess,
     setMcpSharkProcess,
@@ -83,6 +81,7 @@ export function createUIServer() {
   const helpRoutes = createHelpRoutes();
   const playgroundRoutes = createPlaygroundRoutes();
   const smartScanRoutes = createSmartScanRoutes();
+  const settingsRoutes = createSettingsRoutes();
 
   app.get('/api/requests', requestsRoutes.getRequests);
   app.get('/api/packets', requestsRoutes.getRequests);
@@ -138,30 +137,17 @@ export function createUIServer() {
   app.post('/api/smartscan/cached-results', smartScanRoutes.getCachedResults);
   app.post('/api/smartscan/cache/clear', smartScanRoutes.clearCache);
 
-  const cleanup = () => {
-    if (processState.mcpSharkProcess) {
-      processState.mcpSharkProcess.kill();
-      processState.mcpSharkProcess = null;
-    }
-    restoreConfig();
-  };
-
-  process.on('SIGTERM', cleanup);
-  process.on('SIGINT', cleanup);
-  process.on('exit', () => {
-    restoreConfig();
-  });
+  app.get('/api/settings', settingsRoutes.getSettings);
 
   const staticPath = path.join(__dirname, 'dist');
   app.use(express.static(staticPath));
 
-  app.get('*', (req, res) => {
+  app.get('*', (_req, res) => {
     res.sendFile(path.join(staticPath, 'index.html'));
   });
 
   const notifyClients = async () => {
     const requests = queryRequests(db, { limit: 100 });
-    const { serializeBigInt } = await import('./server/utils/serialization.js');
     const message = JSON.stringify({ type: 'update', data: serializeBigInt(requests) });
     clients.forEach((client) => {
       if (client.readyState === 1) {
@@ -171,7 +157,7 @@ export function createUIServer() {
   };
 
   const timestampState = { lastTs: 0 };
-  setInterval(() => {
+  const intervalId = setInterval(() => {
     const lastCheck = db.prepare('SELECT MAX(timestamp_ns) as max_ts FROM packets').get();
     if (lastCheck && lastCheck.max_ts > timestampState.lastTs) {
       timestampState.lastTs = lastCheck.max_ts;
@@ -179,19 +165,78 @@ export function createUIServer() {
     }
   }, 500);
 
+  const cleanup = async () => {
+    console.log('Shutting down UI server...');
+
+    // Clear interval
+    clearInterval(intervalId);
+
+    // Stop MCP Shark server if running
+    if (processState.mcpSharkServer) {
+      try {
+        if (processState.mcpSharkServer.stop) {
+          await processState.mcpSharkServer.stop();
+        }
+        processState.mcpSharkServer = null;
+      } catch (err) {
+        console.error('Error stopping MCP Shark server:', err);
+      }
+    }
+
+    // Close WebSocket connections
+    clients.forEach((client) => {
+      if (client.readyState === 1) {
+        client.close();
+      }
+    });
+    clients.clear();
+
+    // Close WebSocket server
+    wss.close();
+
+    // Restore config
+    restoreConfig();
+
+    // Close HTTP server
+    return new Promise((resolve) => {
+      server.close(() => {
+        console.log('UI server stopped');
+        resolve();
+      });
+    });
+  };
+
   return { server, cleanup };
 }
 
 export async function runUIServer() {
-  const port = parseInt(process.env.UI_PORT) || 9853;
+  const port = Number.parseInt(process.env.UI_PORT) || 9853;
   const { server, cleanup } = createUIServer();
 
-  server.listen(port, '0.0.0.0', () => {
-    console.log(`UI server listening on http://localhost:${port}`);
+  const shutdown = async () => {
+    try {
+      await cleanup();
+    } catch (err) {
+      console.error('Error during shutdown:', err);
+    } finally {
+      process.exit(0);
+    }
+  };
+
+  // Register signal handlers
+  process.on('SIGTERM', shutdown);
+  process.on('SIGINT', shutdown);
+  process.on('exit', async () => {
+    // Final cleanup on exit
+    try {
+      await cleanup();
+    } catch (_err) {
+      // Ignore errors during exit
+    }
   });
 
-  server.on('close', () => {
-    cleanup();
+  server.listen(port, '0.0.0.0', () => {
+    console.log(`UI server listening on http://localhost:${port}`);
   });
 }
 

package/ui/src/App.jsx

@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
-import CompositeSetup from './CompositeSetup';
 import CompositeLogs from './CompositeLogs';
-import McpPlayground from './components/McpPlayground';
+import CompositeSetup from './CompositeSetup';
+import IntroTour from './IntroTour';
 import SmartScan from './SmartScan';
 import TabNavigation from './TabNavigation';
-import IntroTour from './IntroTour';
 import HelpButton from './components/App/HelpButton';
 import TrafficTab from './components/App/TrafficTab';
-import { colors } from './theme';
+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';
-import { useAppState } from './components/App/useAppState';
 
 function App() {
   const {

package/ui/src/CompositeLogs.jsx

@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef } from 'react';
-import { colors } from './theme';
-import LogsToolbar from './components/LogsToolbar';
+import { useEffect, useRef, useState } from 'react';
 import LogsDisplay from './components/LogsDisplay';
+import LogsToolbar from './components/LogsToolbar';
+import { colors } from './theme';
 
 function CompositeLogs() {
   const [logs, setLogs] = useState([]);
@@ -11,27 +11,23 @@ function CompositeLogs() {
   const logEndRef = useRef(null);
   const wsRef = useRef(null);
 
-  const scrollToTop = () => {
+  useEffect(() => {
     if (autoScroll && logEndRef.current) {
       logEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-  };
+  }, [autoScroll]);
 
   useEffect(() => {
-    scrollToTop();
-  }, [logs, autoScroll]);
-
-  const loadLogs = async () => {
-    try {
-      const response = await fetch('/api/composite/logs?limit=5000');
-      const data = await response.json();
-      setLogs(data);
-    } catch (error) {
-      console.error('Failed to load logs:', error);
-    }
-  };
+    const loadLogs = async () => {
+      try {
+        const response = await fetch('/api/composite/logs?limit=5000');
+        const data = await response.json();
+        setLogs(data);
+      } catch (error) {
+        console.error('Failed to load logs:', error);
+      }
+    };
 
-  useEffect(() => {
     loadLogs();
 
     const wsUrl = import.meta.env.DEV
@@ -106,8 +102,12 @@ function CompositeLogs() {
   };
 
   const filteredLogs = logs.filter((log) => {
-    if (logType !== 'all' && log.type !== logType) return false;
-    if (filter && !log.line.toLowerCase().includes(filter.toLowerCase())) return false;
+    if (logType !== 'all' && log.type !== logType) {
+      return false;
+    }
+    if (filter && !log.line.toLowerCase().includes(filter.toLowerCase())) {
+      return false;
+    }
     return true;
   });
 

package/ui/src/CompositeSetup.jsx

@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react';
-import { colors } from './theme';
-import SetupHeader from './components/SetupHeader';
-import ConfigFileSection from './components/ConfigFileSection';
-import WhatThisDoesSection from './components/WhatThisDoesSection';
-import ServerControl from './components/ServerControl';
-import MessageDisplay from './components/MessageDisplay';
+import { useEffect, useState } from 'react';
 import BackupList from './components/BackupList';
+import ConfigFileSection from './components/ConfigFileSection';
 import ConfigViewerModal from './components/ConfigViewerModal';
-import { useServiceExtraction } from './hooks/useServiceExtraction';
+import MessageDisplay from './components/MessageDisplay';
+import ServerControl from './components/ServerControl';
+import SetupHeader from './components/SetupHeader';
+import WhatThisDoesSection from './components/WhatThisDoesSection';
 import { useConfigManagement } from './hooks/useConfigManagement';
+import { useServiceExtraction } from './hooks/useServiceExtraction';
+import { colors } from './theme';
 
 function CompositeSetup() {
   const [fileContent, setFileContent] = useState('');
@@ -181,7 +181,7 @@ function CompositeSetup() {
       if (res.ok) {
         const msg = data.message || 'MCP Shark server stopped';
         setMessage(
-          data.message && data.message.includes('restored')
+          data.message?.includes('restored')
             ? 'MCP Shark server stopped and original config file restored'
             : msg
         );

package/ui/src/HelpGuide/HelpGuideFooter.jsx

@@ -32,6 +32,7 @@ export default function HelpGuideFooter({ dontShowAgain, setDontShowAgain, onClo
         Don't show this again
       </label>
       <button
+        type="button"
         onClick={onClose}
         style={{
           background: colors.buttonPrimary,

package/ui/src/HelpGuide/HelpGuideHeader.jsx

@@ -1,5 +1,5 @@
-import { colors, fonts } from '../theme';
 import { IconHelp, IconX } from '@tabler/icons-react';
+import { colors, fonts } from '../theme';
 
 export default function HelpGuideHeader({ onClose }) {
   return (
@@ -29,6 +29,7 @@ export default function HelpGuideHeader({ onClose }) {
         </h2>
       </div>
       <button
+        type="button"
         onClick={onClose}
         style={{
           background: 'transparent',

package/ui/src/HelpGuide.jsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import { colors } from './theme';
-import HelpGuideHeader from './HelpGuide/HelpGuideHeader';
 import HelpGuideContent from './HelpGuide/HelpGuideContent';
 import HelpGuideFooter from './HelpGuide/HelpGuideFooter';
+import HelpGuideHeader from './HelpGuide/HelpGuideHeader';
+import { colors } from './theme';
 
 function HelpGuide({ onClose }) {
   const [dontShowAgain, setDontShowAgain] = useState(false);
@@ -19,7 +19,9 @@ function HelpGuide({ onClose }) {
   };
 
   return (
-    <div
+    <dialog
+      open
+      aria-modal="true"
       style={{
         position: 'fixed',
         top: 0,
@@ -32,10 +34,20 @@ function HelpGuide({ onClose }) {
         alignItems: 'center',
         justifyContent: 'center',
         padding: '20px',
+        border: 'none',
+        margin: 0,
+        width: '100%',
+        height: '100%',
       }}
       onClick={handleClose}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          handleClose();
+        }
+      }}
     >
       <div
+        role="document"
         style={{
           background: colors.bgCard,
           border: `1px solid ${colors.borderLight}`,
@@ -47,6 +59,7 @@ function HelpGuide({ onClose }) {
           boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
         }}
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
       >
         <HelpGuideHeader onClose={handleClose} />
         <div style={{ padding: '24px' }}>
@@ -58,7 +71,7 @@ function HelpGuide({ onClose }) {
           />
         </div>
       </div>
-    </div>
+    </dialog>
   );
 }
 

package/ui/src/IntroTour.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import TourOverlay from './components/TourOverlay';
 import TourTooltip from './components/TourTooltip';
 
@@ -9,7 +9,9 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
   const overlayRef = useRef(null);
 
   useEffect(() => {
-    if (!highlightedElement) return;
+    if (!highlightedElement) {
+      return;
+    }
 
     const updatePosition = () => {
       if (highlightedElement) {
@@ -31,10 +33,14 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
   }, [highlightedElement]);
 
   useEffect(() => {
-    if (steps.length === 0) return;
+    if (steps.length === 0) {
+      return;
+    }
 
     const step = steps[currentStep];
-    if (!step) return;
+    if (!step) {
+      return;
+    }
 
     if (onStepChange) {
       onStepChange(currentStep);
@@ -95,7 +101,9 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
 
   const handleSkip = () => {
     handleComplete();
-    if (onSkip) onSkip();
+    if (onSkip) {
+      onSkip();
+    }
   };
 
   if (steps.length === 0 || currentStep >= steps.length) {
@@ -108,6 +116,7 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
     <>
       <div
         ref={overlayRef}
+        role="presentation"
         style={{
           position: 'fixed',
           top: 0,
@@ -118,6 +127,11 @@ function IntroTour({ steps, onComplete, onSkip, onStepChange }) {
           pointerEvents: 'auto',
         }}
         onClick={handleSkip}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            handleSkip();
+          }
+        }}
       >
         <TourOverlay elementRect={elementRect} />
       </div>

package/ui/src/LogDetail.jsx

@@ -16,6 +16,7 @@ function LogDetail({ log, onClose }) {
       >
         <h3 style={{ fontSize: '14px', fontWeight: 'normal' }}>Details</h3>
         <button
+          type="button"
           onClick={onClose}
           style={{
             background: 'none',

package/ui/src/LogTable.jsx

@@ -1,10 +1,16 @@
-import { colors, fonts, withOpacity } from './theme';
+import { colors, fonts } from './theme';
 
 function LogTable({ logs, selected, onSelect }) {
   const getStatusColor = (status) => {
-    if (status === 'error') return colors.error;
-    if (status === 'success') return colors.success;
-    if (status === 'pending') return colors.warning;
+    if (status === 'error') {
+      return colors.error;
+    }
+    if (status === 'success') {
+      return colors.success;
+    }
+    if (status === 'pending') {
+      return colors.warning;
+    }
     return colors.textTertiary;
   };
 
@@ -144,6 +150,14 @@ function LogTable({ logs, selected, onSelect }) {
             <tr
               key={log.id}
               onClick={() => onSelect(log)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onSelect(log);
+                }
+              }}
+              tabIndex={0}
+              aria-label={`Select log entry ${log.id}`}
               style={{
                 cursor: 'pointer',
                 background: selected?.id === log.id ? colors.bgSelected : colors.bgCard,
@@ -151,10 +165,14 @@ function LogTable({ logs, selected, onSelect }) {
                 transition: 'background-color 0.15s ease',
               }}
               onMouseEnter={(e) => {
-                if (selected?.id !== log.id) e.currentTarget.style.background = colors.bgHover;
+                if (selected?.id !== log.id) {
+                  e.currentTarget.style.background = colors.bgHover;
+                }
               }}
               onMouseLeave={(e) => {
-                if (selected?.id !== log.id) e.currentTarget.style.background = colors.bgCard;
+                if (selected?.id !== log.id) {
+                  e.currentTarget.style.background = colors.bgCard;
+                }
               }}
             >
               <td