@mcp-shark/mcp-shark 1.5.4 → 1.5.5

package/ui/src/components/AlertModal.jsx

@@ -0,0 +1,116 @@
+import { colors, fonts } from '../theme';
+
+/**
+ * Alert modal for displaying error or info messages
+ * Replaces browser alert() function with a proper modal
+ */
+function AlertModal({ isOpen, onClose, title, message, type = 'error' }) {
+  if (!isOpen) {
+    return null;
+  }
+
+  const isError = type === 'error';
+
+  return (
+    <dialog
+      open
+      aria-modal="true"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        border: 'none',
+        margin: 0,
+        width: '100%',
+        height: '100%',
+      }}
+      onClick={onClose}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape' || e.key === 'Enter') {
+          onClose();
+        }
+      }}
+    >
+      <div
+        role="document"
+        style={{
+          background: colors.bgCard,
+          borderRadius: '12px',
+          padding: '24px',
+          maxWidth: '500px',
+          width: '90%',
+          boxShadow: `0 4px 20px ${colors.shadowLg}`,
+          fontFamily: fonts.body,
+        }}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
+      >
+        <h3
+          style={{
+            margin: '0 0 12px 0',
+            fontSize: '18px',
+            fontWeight: '600',
+            color: isError ? colors.error : colors.textPrimary,
+          }}
+        >
+          {title || (isError ? 'Error' : 'Information')}
+        </h3>
+        <p
+          style={{
+            margin: '0 0 24px 0',
+            fontSize: '14px',
+            color: colors.textSecondary,
+            lineHeight: '1.5',
+          }}
+        >
+          {message}
+        </p>
+        <div
+          style={{
+            display: 'flex',
+            gap: '12px',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <button
+            type="button"
+            onClick={onClose}
+            style={{
+              padding: '10px 20px',
+              background: isError ? colors.buttonDanger : colors.buttonPrimary,
+              border: 'none',
+              borderRadius: '8px',
+              color: colors.textInverse,
+              fontSize: '14px',
+              fontWeight: '500',
+              fontFamily: fonts.body,
+              cursor: 'pointer',
+              transition: 'all 0.2s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = isError
+                ? colors.buttonDangerHover
+                : colors.buttonPrimaryHover;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = isError
+                ? colors.buttonDanger
+                : colors.buttonPrimary;
+            }}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+export default AlertModal;

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

@@ -0,0 +1,57 @@
+import { IconApi } from '@tabler/icons-react';
+import { colors, fonts } from '../../theme';
+
+/**
+ * API Documentation button component
+ * Opens Swagger/OpenAPI documentation in a new tab
+ */
+export default function ApiDocsButton() {
+  const handleClick = () => {
+    window.open('/api-docs', '_blank');
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      data-tour="api-docs-button"
+      style={{
+        position: 'fixed',
+        bottom: '20px',
+        right: '80px',
+        background: colors.bgCard,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '50%',
+        width: '48px',
+        height: '48px',
+        padding: 0,
+        color: colors.textSecondary,
+        cursor: 'pointer',
+        fontFamily: fonts.body,
+        boxShadow: `0 4px 12px ${colors.shadowMd}`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999,
+        transition: 'all 0.2s ease',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = colors.bgHover;
+        e.currentTarget.style.color = colors.textPrimary;
+        e.currentTarget.style.borderColor = colors.borderMedium;
+        e.currentTarget.style.transform = 'scale(1.1)';
+        e.currentTarget.style.boxShadow = `0 6px 16px ${colors.shadowLg}`;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = colors.bgCard;
+        e.currentTarget.style.color = colors.textSecondary;
+        e.currentTarget.style.borderColor = colors.borderLight;
+        e.currentTarget.style.transform = 'scale(1)';
+        e.currentTarget.style.boxShadow = `0 4px 12px ${colors.shadowMd}`;
+      }}
+      title="View API Documentation"
+    >
+      <IconApi size={20} stroke={1.5} />
+    </button>
+  );
+}

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

@@ -24,8 +24,24 @@ function appendFilterParams(queryParams, filters) {
   }
 }
 
+const VALID_TABS = ['traffic', 'logs', 'setup', 'playground', 'smart-scan'];
+const DEFAULT_TAB = 'traffic';
+
+function getTabFromHash() {
+  const hash = window.location.hash.slice(1); // Remove '#'
+  const tab = hash.startsWith('/') ? hash.slice(1) : hash; // Remove leading '/'
+  return VALID_TABS.includes(tab) ? tab : DEFAULT_TAB;
+}
+
+function updateUrlHash(tab) {
+  const newHash = `#/${tab}`;
+  if (window.location.hash !== newHash) {
+    window.history.replaceState(null, '', newHash);
+  }
+}
+
 export function useAppState() {
-  const [activeTab, setActiveTab] = useState('traffic');
+  const [activeTab, setActiveTab] = useState(() => getTabFromHash());
   const [requests, setRequests] = useState([]);
   const [selected, setSelected] = useState(null);
   const [filters, setFilters] = useState({});
@@ -37,6 +53,32 @@ export function useAppState() {
   const prevTabRef = useRef(activeTab);
   const filtersRef = useRef(filters);
 
+  // Initialize URL hash on mount if missing
+  useEffect(() => {
+    if (!window.location.hash || window.location.hash === '#') {
+      const initialTab = getTabFromHash();
+      updateUrlHash(initialTab);
+    }
+  }, []);
+
+  // Sync URL hash with activeTab
+  useEffect(() => {
+    updateUrlHash(activeTab);
+  }, [activeTab]);
+
+  // Listen for hash changes (back/forward buttons)
+  useEffect(() => {
+    const handleHashChange = () => {
+      const tabFromHash = getTabFromHash();
+      if (tabFromHash !== activeTab) {
+        setActiveTab(tabFromHash);
+      }
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [activeTab]);
+
   const loadStatistics = async () => {
     try {
       const queryParams = new URLSearchParams();

package/ui/src/components/BackupList.jsx

@@ -1,7 +1,12 @@
 import { IconEye, IconRefresh, IconRestore, IconTrash } from '@tabler/icons-react';
+import { useState } from 'react';
 import { colors, fonts, withOpacity } from '../theme';
+import ConfirmationModal from './ConfirmationModal';
 
 function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onDelete }) {
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [pendingDelete, setPendingDelete] = useState(null);
+
   if (backups.length === 0) {
     return null;
   }
@@ -126,9 +131,8 @@ function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onD
               <button
                 type="button"
                 onClick={() => {
-                  if (confirm('Are you sure you want to delete this backup?')) {
-                    onDelete(backup.backupPath);
-                  }
+                  setPendingDelete(backup.backupPath);
+                  setShowDeleteModal(true);
                 }}
                 style={{
                   padding: '6px 12px',
@@ -189,6 +193,26 @@ function BackupList({ backups, loadingBackups, onRefresh, onRestore, onView, onD
           </div>
         ))}
       </div>
+
+      <ConfirmationModal
+        isOpen={showDeleteModal}
+        onClose={() => {
+          setShowDeleteModal(false);
+          setPendingDelete(null);
+        }}
+        onConfirm={() => {
+          if (pendingDelete) {
+            onDelete(pendingDelete);
+          }
+          setShowDeleteModal(false);
+          setPendingDelete(null);
+        }}
+        title="Delete Backup"
+        message="Are you sure you want to delete this backup? This action cannot be undone."
+        confirmText="Delete"
+        cancelText="Cancel"
+        danger={true}
+      />
     </div>
   );
 }

package/ui/src/utils/requestPairing.js

@@ -1,45 +1,44 @@
 import { getJsonRpcMethod } from './requestUtils.js';
 
-export function pairRequestsWithResponses(requests) {
-  const pairs = [];
-  const processed = new Set();
-
-  // Helper function to check if two requests match (same session, JSON-RPC method, and optionally jsonrpc_id)
-  const matches = (req, resp) => {
-    // Session ID must match (or both null for initiation)
-    const sessionMatch = req.session_id === resp.session_id;
-    if (!sessionMatch) {
-      return false;
-    }
+function matchesRequests(req, resp) {
+  // Session ID must match (or both null for initiation)
+  const sessionMatch = req.session_id === resp.session_id;
+  if (!sessionMatch) {
+    return false;
+  }
 
-    // JSON-RPC Method must match
-    const reqMethod = getJsonRpcMethod(req);
-    const respMethod = getJsonRpcMethod(resp);
+  // JSON-RPC Method must match
+  const reqMethod = getJsonRpcMethod(req);
+  const respMethod = getJsonRpcMethod(resp);
 
-    // Both must have a method, and they must match
-    if (!reqMethod || !respMethod) {
-      // If either doesn't have a method, we can't match by method
-      // Fall back to JSON-RPC ID matching only
-      if (req.jsonrpc_id && resp.jsonrpc_id) {
-        return req.jsonrpc_id === resp.jsonrpc_id;
-      }
-      // If no method and no ID, we can't match reliably
-      return false;
-    }
-
-    const methodMatch = reqMethod === respMethod;
-    if (!methodMatch) {
-      return false;
-    }
-
-    // If JSON-RPC ID exists, it must match (for more precise pairing)
+  // Both must have a method, and they must match
+  if (!reqMethod || !respMethod) {
+    // If either doesn't have a method, we can't match by method
+    // Fall back to JSON-RPC ID matching only
     if (req.jsonrpc_id && resp.jsonrpc_id) {
       return req.jsonrpc_id === resp.jsonrpc_id;
     }
+    // If no method and no ID, we can't match reliably
+    return false;
+  }
+
+  const methodMatch = reqMethod === respMethod;
+  if (!methodMatch) {
+    return false;
+  }
+
+  // If JSON-RPC ID exists, it must match (for more precise pairing)
+  if (req.jsonrpc_id && resp.jsonrpc_id) {
+    return req.jsonrpc_id === resp.jsonrpc_id;
+  }
+
+  // If no JSON-RPC ID, match by session and method only
+  return true;
+}
 
-    // If no JSON-RPC ID, match by session and method only
-    return true;
-  };
+export function pairRequestsWithResponses(requests) {
+  const pairs = [];
+  const processed = new Set();
 
   requests.forEach((request) => {
     if (processed.has(request.frame_number)) {
@@ -52,7 +51,7 @@ export function pairRequestsWithResponses(requests) {
         (r) =>
           r.direction === 'response' &&
           !processed.has(r.frame_number) &&
-          matches(request, r) &&
+          matchesRequests(request, r) &&
           r.frame_number > request.frame_number
       );
 
@@ -71,7 +70,7 @@ export function pairRequestsWithResponses(requests) {
         (r) =>
           r.direction === 'request' &&
           !processed.has(r.frame_number) &&
-          matches(r, request) &&
+          matchesRequests(r, request) &&
           r.frame_number < request.frame_number
       );
 

package/ui/src/utils/requestUtils.js

@@ -1,4 +1,5 @@
 const LLM_SERVER = 'LLM Server';
+
 export function extractServerName(request) {
   if (request.body_json) {
     try {

package/lib/common/db/init.js

@@ -1,132 +0,0 @@
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import Database from 'better-sqlite3';
-
-function createTables(db) {
-  db.exec(`
-    -- Packet capture table
-    -- Each HTTP request/response is stored as a packet for forensic analysis
-    CREATE TABLE IF NOT EXISTS packets (
-      frame_number INTEGER PRIMARY KEY AUTOINCREMENT,
-      
-      -- Timestamps (nanosecond precision)
-      timestamp_ns INTEGER NOT NULL,  -- Unix timestamp in nanoseconds
-      timestamp_iso TEXT NOT NULL,    -- ISO 8601 formatted timestamp for readability
-      
-      -- Packet direction and protocol
-      direction TEXT NOT NULL CHECK(direction IN ('request', 'response')),
-      protocol TEXT NOT NULL DEFAULT 'HTTP',
-      
-      -- Session identification (normalized from various header formats)
-      session_id TEXT,                -- Normalized session ID (from mcp-session-id, Mcp-Session-Id, or X-MCP-Session-Id)
-      
-      -- HTTP metadata
-      method TEXT,                    -- HTTP method (GET, POST, etc.)
-      url TEXT,                       -- Request URL/path
-      status_code INTEGER,            -- HTTP status code (for responses)
-      
-      -- Headers and body
-      headers_json TEXT NOT NULL,     -- Full HTTP headers as JSON
-      body_raw TEXT,                  -- Raw body content
-      body_json TEXT,                 -- Parsed JSON body (if applicable)
-      
-      -- JSON-RPC metadata (for correlation)
-      jsonrpc_id TEXT,                -- JSON-RPC request ID
-      jsonrpc_method TEXT,           -- JSON-RPC method (e.g., 'tools/list', 'tools/call')
-      jsonrpc_result TEXT,           -- JSON-RPC result (for responses, as JSON string)
-      jsonrpc_error TEXT,            -- JSON-RPC error (for error responses, as JSON string)
-      
-      -- Packet metadata
-      length INTEGER NOT NULL,        -- Total packet size in bytes
-      info TEXT,                      -- Summary info for quick viewing
-      
-      -- Network metadata
-      user_agent TEXT,                -- User agent string
-      remote_address TEXT,            -- Remote IP address
-      host TEXT                       -- Host header value
-    );
-
-    -- Conversations table - correlates request/response pairs
-    CREATE TABLE IF NOT EXISTS conversations (
-      conversation_id INTEGER PRIMARY KEY AUTOINCREMENT,
-      request_frame_number INTEGER NOT NULL,
-      response_frame_number INTEGER,
-      session_id TEXT,
-      jsonrpc_id TEXT,
-      method TEXT,
-      request_timestamp_ns INTEGER NOT NULL,
-      response_timestamp_ns INTEGER,
-      duration_ms REAL,               -- Round-trip time in milliseconds
-      status TEXT DEFAULT 'pending' CHECK(status IN ('pending', 'completed', 'timeout', 'error')),
-      
-      FOREIGN KEY (request_frame_number) REFERENCES packets(frame_number),
-      FOREIGN KEY (response_frame_number) REFERENCES packets(frame_number)
-    );
-
-    -- Sessions table - tracks session metadata
-    CREATE TABLE IF NOT EXISTS sessions (
-      session_id TEXT PRIMARY KEY,
-      first_seen_ns INTEGER NOT NULL,
-      last_seen_ns INTEGER NOT NULL,
-      packet_count INTEGER DEFAULT 0,
-      user_agent TEXT,
-      remote_address TEXT,
-      host TEXT
-    );
-
-    -- Create indexes for forensic analysis
-    CREATE INDEX IF NOT EXISTS idx_packets_timestamp ON packets(timestamp_ns);
-    CREATE INDEX IF NOT EXISTS idx_packets_session ON packets(session_id);
-    CREATE INDEX IF NOT EXISTS idx_packets_direction ON packets(direction);
-    CREATE INDEX IF NOT EXISTS idx_packets_jsonrpc_id ON packets(jsonrpc_id);
-    CREATE INDEX IF NOT EXISTS idx_packets_jsonrpc_method ON packets(jsonrpc_method);
-    CREATE INDEX IF NOT EXISTS idx_packets_method ON packets(method);
-    CREATE INDEX IF NOT EXISTS idx_packets_status_code ON packets(status_code);
-    CREATE INDEX IF NOT EXISTS idx_packets_session_timestamp ON packets(session_id, timestamp_ns);
-    
-    CREATE INDEX IF NOT EXISTS idx_conversations_session ON conversations(session_id);
-    CREATE INDEX IF NOT EXISTS idx_conversations_jsonrpc_id ON conversations(jsonrpc_id);
-    CREATE INDEX IF NOT EXISTS idx_conversations_request_frame ON conversations(request_frame_number);
-    CREATE INDEX IF NOT EXISTS idx_conversations_response_frame ON conversations(response_frame_number);
-    CREATE INDEX IF NOT EXISTS idx_conversations_timestamp ON conversations(request_timestamp_ns);
-    
-    CREATE INDEX IF NOT EXISTS idx_sessions_first_seen ON sessions(first_seen_ns);
-    CREATE INDEX IF NOT EXISTS idx_sessions_last_seen ON sessions(last_seen_ns);
-  `);
-
-  return db;
-}
-
-export function initDb(dbConnectionString) {
-  const db = new Database(dbConnectionString);
-  db.pragma('journal_mode = WAL');
-  db.pragma('foreign_keys = ON');
-
-  return createTables(db);
-}
-
-/**
- * Open or create a database file, ensuring the directory exists
- * Creates tables if the database is new or ensures they exist
- */
-export function openDb(dbPath) {
-  // Ensure the directory exists
-  const dbDir = path.dirname(dbPath);
-  if (!fs.existsSync(dbDir)) {
-    fs.mkdirSync(dbDir, { recursive: true });
-  }
-
-  // Check if database file exists
-  const _dbExists = fs.existsSync(dbPath);
-
-  // Open or create the database
-  const db = new Database(dbPath);
-  db.pragma('journal_mode = WAL');
-  db.pragma('foreign_keys = ON');
-
-  // Create tables if database is new or tables don't exist
-  // Even if database exists, ensure tables exist (in case schema changed)
-  createTables(db);
-
-  return db;
-}