@mcp-shark/mcp-shark 1.4.0

package/ui/server.js

@@ -0,0 +1,199 @@
+import express from 'express';
+import { createServer } from 'http';
+import { WebSocketServer } from 'ws';
+import * as path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'url';
+
+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 { createConfigRoutes } from './server/routes/config.js';
+import { createBackupRoutes } from './server/routes/backups.js';
+import { createCompositeRoutes } from './server/routes/composite.js';
+import { createHelpRoutes } from './server/routes/help.js';
+import { createPlaygroundRoutes } from './server/routes/playground.js';
+import { createSmartScanRoutes } from './server/routes/smartscan.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const MAX_LOG_LINES = 10000;
+
+export function createUIServer() {
+  prepareAppDataSpaces();
+
+  const db = openDb(getDatabaseFile());
+  const app = express();
+  const server = createServer(app);
+  const wss = new WebSocketServer({ server });
+
+  app.use(express.json());
+
+  const clients = new Set();
+  const mcpSharkLogs = [];
+  const processState = { mcpSharkProcess: null };
+
+  const setMcpSharkProcess = (process) => {
+    processState.mcpSharkProcess = process;
+  };
+
+  wss.on('connection', (ws) => {
+    clients.add(ws);
+    ws.on('close', () => clients.delete(ws));
+  });
+
+  const broadcastLogUpdate = (logEntry) => {
+    const message = JSON.stringify({ type: 'log', data: logEntry });
+    clients.forEach((client) => {
+      if (client.readyState === 1) {
+        client.send(message);
+      }
+    });
+  };
+
+  const restoreConfig = () => {
+    return restoreOriginalConfig(mcpSharkLogs, broadcastLogUpdate);
+  };
+
+  const requestsRoutes = createRequestsRoutes(db);
+  const conversationsRoutes = createConversationsRoutes(db);
+  const sessionsRoutes = createSessionsRoutes(db);
+  const statisticsRoutes = createStatisticsRoutes(db);
+  const logsRoutes = createLogsRoutes(mcpSharkLogs, broadcastLogUpdate);
+  const configRoutes = createConfigRoutes();
+  const backupRoutes = createBackupRoutes();
+  const getMcpSharkProcess = () => processState.mcpSharkProcess;
+  const compositeRoutes = createCompositeRoutes(
+    getMcpSharkProcess,
+    setMcpSharkProcess,
+    mcpSharkLogs,
+    broadcastLogUpdate
+  );
+  const helpRoutes = createHelpRoutes();
+  const playgroundRoutes = createPlaygroundRoutes();
+  const smartScanRoutes = createSmartScanRoutes();
+
+  app.get('/api/requests', requestsRoutes.getRequests);
+  app.get('/api/packets', requestsRoutes.getRequests);
+  app.get('/api/requests/:frameNumber', requestsRoutes.getRequest);
+  app.get('/api/packets/:frameNumber', requestsRoutes.getRequest);
+  app.get('/api/requests/export', requestsRoutes.exportRequests);
+  app.post('/api/requests/clear', requestsRoutes.clearRequests);
+
+  app.get('/api/conversations', conversationsRoutes.getConversations);
+
+  app.get('/api/sessions', sessionsRoutes.getSessions);
+  app.get('/api/sessions/:sessionId/requests', sessionsRoutes.getSessionRequests);
+  app.get('/api/sessions/:sessionId/packets', sessionsRoutes.getSessionRequests);
+
+  app.get('/api/statistics', statisticsRoutes.getStatistics);
+
+  app.get('/api/composite/logs', logsRoutes.getLogs);
+  app.post('/api/composite/logs/clear', logsRoutes.clearLogs);
+  app.get('/api/composite/logs/export', logsRoutes.exportLogs);
+
+  app.post('/api/config/services', configRoutes.extractServices);
+  app.get('/api/config/read', configRoutes.readConfig);
+  app.get('/api/config/detect', configRoutes.detectConfig);
+  app.get('/api/config/backups', backupRoutes.listBackups);
+  app.get('/api/config/backup/view', backupRoutes.viewBackup);
+  app.post('/api/config/restore', (req, res) => {
+    backupRoutes.restoreBackup(req, res, mcpSharkLogs, broadcastLogUpdate);
+  });
+  app.post('/api/config/backup/delete', (req, res) => {
+    backupRoutes.deleteBackup(req, res, mcpSharkLogs, broadcastLogUpdate);
+  });
+
+  app.post('/api/composite/setup', compositeRoutes.setup);
+  app.post('/api/composite/stop', (req, res) => {
+    compositeRoutes.stop(req, res, restoreConfig);
+  });
+  app.get('/api/composite/status', compositeRoutes.getStatus);
+
+  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);
+  app.get('/api/smartscan/scans', smartScanRoutes.listScans);
+  app.get('/api/smartscan/scans/:scanId', smartScanRoutes.getScan);
+  app.get('/api/smartscan/token', smartScanRoutes.getToken);
+  app.post('/api/smartscan/token', smartScanRoutes.saveToken);
+  app.get('/api/smartscan/discover', smartScanRoutes.discoverServers);
+  app.post('/api/smartscan/scans/batch', smartScanRoutes.createBatchScans);
+  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();
+  });
+
+  const staticPath = path.join(__dirname, 'dist');
+  app.use(express.static(staticPath));
+
+  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) {
+        client.send(message);
+      }
+    });
+  };
+
+  const timestampState = { lastTs: 0 };
+  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;
+      notifyClients();
+    }
+  }, 500);
+
+  return { server, cleanup };
+}
+
+export async function runUIServer() {
+  const port = 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}`);
+  });
+
+  server.on('close', () => {
+    cleanup();
+  });
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  runUIServer().catch(console.error);
+}

package/ui/src/App.jsx

@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import CompositeSetup from './CompositeSetup';
+import CompositeLogs from './CompositeLogs';
+import McpPlayground from './components/McpPlayground';
+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 { tourSteps } from './config/tourSteps.jsx';
+import { fadeIn } from './utils/animations';
+import { useAppState } from './components/App/useAppState';
+
+function App() {
+  const {
+    activeTab,
+    setActiveTab,
+    requests,
+    selected,
+    setSelected,
+    filters,
+    setFilters,
+    stats,
+    firstRequestTime,
+    showTour,
+    setShowTour,
+    prevTabRef,
+    loadRequests,
+  } = useAppState();
+  const [tourKey, setTourKey] = useState(0);
+
+  useEffect(() => {
+    if (prevTabRef.current !== activeTab) {
+      const tabContent = document.querySelector('[data-tab-content]');
+      if (tabContent) {
+        fadeIn(tabContent, { duration: 300 });
+      }
+      prevTabRef.current = activeTab;
+    }
+  }, [activeTab, prevTabRef]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '100vh',
+        flexDirection: 'column',
+        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">
+        <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />
+      </div>
+      <HelpButton
+        onClick={() => {
+          if (showTour) {
+            setShowTour(false);
+            setTourKey((prev) => prev + 1);
+            setTimeout(() => {
+              setShowTour(true);
+            }, 100);
+          } else {
+            setTourKey((prev) => prev + 1);
+            setShowTour(true);
+          }
+        }}
+      />
+
+      {activeTab === 'traffic' && (
+        <TrafficTab
+          requests={requests}
+          selected={selected}
+          onSelect={setSelected}
+          filters={filters}
+          onFilterChange={setFilters}
+          stats={stats}
+          firstRequestTime={firstRequestTime}
+          onClear={() => {
+            setSelected(null);
+            loadRequests();
+          }}
+        />
+      )}
+
+      {activeTab === 'logs' && (
+        <div
+          data-tab-content
+          style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}
+        >
+          <CompositeLogs />
+        </div>
+      )}
+
+      {activeTab === 'setup' && (
+        <div
+          data-tab-content
+          style={{ flex: 1, overflow: 'hidden', width: '100%', height: '100%' }}
+        >
+          <CompositeSetup />
+        </div>
+      )}
+
+      {activeTab === 'playground' && (
+        <div
+          data-tab-content
+          style={{ flex: 1, overflow: 'hidden', width: '100%', height: '100%' }}
+        >
+          <McpPlayground />
+        </div>
+      )}
+
+      {activeTab === 'smart-scan' && (
+        <div data-tab-content style={{ flex: 1, overflow: 'auto', width: '100%', height: '100%' }}>
+          <SmartScan />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default App;

package/ui/src/CompositeLogs.jsx

@@ -0,0 +1,164 @@
+import { useState, useEffect, useRef } from 'react';
+import { colors } from './theme';
+import LogsToolbar from './components/LogsToolbar';
+import LogsDisplay from './components/LogsDisplay';
+
+function CompositeLogs() {
+  const [logs, setLogs] = useState([]);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [filter, setFilter] = useState('');
+  const [logType, setLogType] = useState('all'); // all, stdout, stderr, error, exit
+  const logEndRef = useRef(null);
+  const wsRef = useRef(null);
+
+  const scrollToTop = () => {
+    if (autoScroll && logEndRef.current) {
+      logEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  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);
+    }
+  };
+
+  useEffect(() => {
+    loadLogs();
+
+    const wsUrl = import.meta.env.DEV
+      ? 'ws://localhost:9853'
+      : `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`;
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      console.log('WebSocket connected for logs');
+    };
+
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+
+    ws.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'log') {
+          setLogs((prev) => {
+            // Add new log at the beginning (latest first)
+            const newLogs = [msg.data, ...prev];
+            // Keep only last 5000 in memory
+            return newLogs.slice(0, 5000);
+          });
+        }
+      } catch (error) {
+        console.error('Failed to parse WebSocket message:', error);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log('WebSocket closed, attempting to reconnect...');
+      // Attempt to reconnect after a delay
+      setTimeout(() => {
+        if (wsRef.current?.readyState === WebSocket.CLOSED) {
+          // Reconnect logic would go here, but for now just log
+          console.log('WebSocket reconnection needed');
+        }
+      }, 3000);
+    };
+
+    return () => {
+      if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
+        ws.close();
+      }
+    };
+  }, []);
+
+  const clearLogs = async () => {
+    try {
+      await fetch('/api/composite/logs/clear', { method: 'POST' });
+      setLogs([]);
+    } catch (error) {
+      console.error('Failed to clear logs:', error);
+    }
+  };
+
+  const getLogColor = (type) => {
+    switch (type) {
+      case 'stderr':
+      case 'error':
+        return colors.error;
+      case 'stdout':
+        return colors.textPrimary;
+      case 'exit':
+        return colors.accentOrange;
+      default:
+        return colors.textSecondary;
+    }
+  };
+
+  const filteredLogs = logs.filter((log) => {
+    if (logType !== 'all' && log.type !== logType) return false;
+    if (filter && !log.line.toLowerCase().includes(filter.toLowerCase())) return false;
+    return true;
+  });
+
+  const handleExportLogs = async () => {
+    try {
+      const response = await fetch('/api/composite/logs/export');
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `mcp-shark-logs-${new Date().toISOString().replace(/[:.]/g, '-')}.txt`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error('Failed to export logs:', error);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        background: colors.bgPrimary,
+        overflow: 'hidden',
+      }}
+    >
+      <LogsToolbar
+        filter={filter}
+        setFilter={setFilter}
+        logType={logType}
+        setLogType={setLogType}
+        autoScroll={autoScroll}
+        setAutoScroll={setAutoScroll}
+        onClearLogs={clearLogs}
+        onExportLogs={handleExportLogs}
+        filteredCount={filteredLogs.length}
+        totalCount={logs.length}
+      />
+      <LogsDisplay
+        logs={logs}
+        filteredLogs={filteredLogs}
+        logEndRef={logEndRef}
+        getLogColor={getLogColor}
+      />
+    </div>
+  );
+}
+
+export default CompositeLogs;