@mcp-shark/mcp-shark 1.4.0 → 1.4.2

package/mcp-server/lib/server/internal/session.js

@@ -20,20 +20,28 @@ export async function withSession(
   res,
   auditLogger
 ) {
+  const requestedMcpServer = req.params[0];
   const sessionId = getSessionFromRequest(req);
   if (!sessionId) {
-    const newSessionId = randomUUID();
+    const initialSessionId = randomUUID();
     const transport = new StreamableHTTPServerTransport({
-      sessionIdGenerator: () => newSessionId,
+      sessionIdGenerator: () => initialSessionId,
       enableJsonResponse: true,
     });
-    const server = serverFactory();
+    const server = serverFactory(requestedMcpServer);
     await server.connect(transport);
-    storeTransportInSession(newSessionId, transport);
+    storeTransportInSession(initialSessionId, transport);
     // Session creation will be logged as part of the request packet in audit.js
-    return requestHandler(transport, req, res, auditLogger);
+    return requestHandler(
+      transport,
+      req,
+      res,
+      auditLogger,
+      requestedMcpServer,
+      initialSessionId
+    );
   }
 
   const transport = getTransportFromSession(sessionId);
-  return requestHandler(transport, req, res, auditLogger);
+  return requestHandler(transport, req, res, auditLogger, requestedMcpServer);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-shark/mcp-shark",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Aggregate multiple Model Context Protocol (MCP) servers into a single unified interface with a powerful monitoring UI. Prov deep visibility into every request and response.",
   "type": "module",
   "main": "./bin/mcp-shark.js",
@@ -85,7 +85,9 @@
     "mcp-shark-common": "github:mcp-shark/mcp-shark-common",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ws": "^8.16.0"
+    "ws": "^8.16.0",
+    "open": "^11.0.0",
+    "commander": "^14.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",

package/ui/server/routes/composite.js

@@ -240,5 +240,21 @@ export function createCompositeRoutes(
     });
   };
 
+  router.getServers = (req, res) => {
+    try {
+      const mcpsJsonPath = getMcpConfigPath();
+      if (!fs.existsSync(mcpsJsonPath)) {
+        return res.json({ servers: [] });
+      }
+
+      const configContent = fs.readFileSync(mcpsJsonPath, 'utf-8');
+      const config = JSON.parse(configContent);
+      const servers = config.servers ? Object.keys(config.servers) : [];
+      res.json({ servers });
+    } catch (error) {
+      res.status(500).json({ error: 'Failed to get servers', details: error.message });
+    }
+  };
+
   return router;
 }

package/ui/server/routes/playground.js

@@ -1,20 +1,31 @@
 import { Client } from '@modelcontextprotocol/sdk/client/index.js';
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
 
-const MCP_SERVER_URL = 'http://localhost:9851/mcp';
+const MCP_SERVER_BASE_URL = 'http://localhost:9851/mcp';
 
-// Store client connections per session
+// Store client connections per server and session
 const clientSessions = new Map();
 
+function getSessionKey(serverName, sessionId) {
+  return `${serverName}:${sessionId}`;
+}
+
 export function createPlaygroundRoutes() {
   const router = {};
 
-  // Get or create client for a session
-  async function getClient(sessionId) {
-    if (clientSessions.has(sessionId)) {
-      return clientSessions.get(sessionId);
+  // Get or create client for a session and server
+  async function getClient(serverName, sessionId) {
+    const sessionKey = getSessionKey(serverName, sessionId);
+    if (clientSessions.has(sessionKey)) {
+      return clientSessions.get(sessionKey);
+    }
+
+    if (!serverName) {
+      throw new Error('Server name is required');
     }
 
+    const mcpServerUrl = `${MCP_SERVER_BASE_URL}/${encodeURIComponent(serverName)}`;
+
     const client = new Client(
       { name: 'mcp-shark-playground', version: '1.0.0' },
       {
@@ -26,7 +37,7 @@ export function createPlaygroundRoutes() {
       }
     );
 
-    const transport = new StreamableHTTPClientTransport(new URL(MCP_SERVER_URL));
+    const transport = new StreamableHTTPClientTransport(new URL(mcpServerUrl));
     await client.connect(transport);
 
     const clientWrapper = {
@@ -38,13 +49,13 @@ export function createPlaygroundRoutes() {
       },
     };
 
-    clientSessions.set(sessionId, clientWrapper);
+    clientSessions.set(sessionKey, clientWrapper);
     return clientWrapper;
   }
 
   router.proxyRequest = async (req, res) => {
     try {
-      const { method, params } = req.body;
+      const { method, params, serverName } = req.body;
 
       if (!method) {
         return res.status(400).json({
@@ -53,13 +64,20 @@ export function createPlaygroundRoutes() {
         });
       }
 
+      if (!serverName) {
+        return res.status(400).json({
+          error: 'Invalid request',
+          message: 'serverName field is required',
+        });
+      }
+
       // Get or create session ID
       const sessionId =
         req.headers['mcp-session-id'] ||
         req.headers['x-mcp-session-id'] ||
         `playground-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
-      const { client } = await getClient(sessionId);
+      const { client } = await getClient(serverName, sessionId);
 
       let result;
       switch (method) {
@@ -140,10 +158,23 @@ export function createPlaygroundRoutes() {
   // Cleanup endpoint to close client connections
   router.cleanup = async (req, res) => {
     const sessionId = req.headers['mcp-session-id'] || req.headers['x-mcp-session-id'];
-    if (sessionId && clientSessions.has(sessionId)) {
-      const clientWrapper = clientSessions.get(sessionId);
-      await clientWrapper.close();
-      clientSessions.delete(sessionId);
+    const { serverName } = req.body || {};
+
+    if (serverName && sessionId) {
+      const sessionKey = getSessionKey(serverName, sessionId);
+      if (clientSessions.has(sessionKey)) {
+        const clientWrapper = clientSessions.get(sessionKey);
+        await clientWrapper.close();
+        clientSessions.delete(sessionKey);
+      }
+    } else if (sessionId) {
+      // Cleanup all sessions for this sessionId across all servers
+      for (const [key, clientWrapper] of clientSessions.entries()) {
+        if (key.endsWith(`:${sessionId}`)) {
+          await clientWrapper.close();
+          clientSessions.delete(key);
+        }
+      }
     }
     res.json({ success: true });
   };

package/ui/server/utils/config-update.js

@@ -56,136 +56,137 @@ function findLatestBackup(filePath) {
   }
 }
 
-export function updateConfigFile(
-  originalConfig,
-  selectedServiceNames,
+function shouldCreateBackup(
+  latestBackupPath,
   resolvedFilePath,
   content,
   mcpSharkLogs,
   broadcastLogUpdate
 ) {
-  const hasMcpServers = originalConfig.mcpServers && typeof originalConfig.mcpServers === 'object';
-  const hasServers = originalConfig.servers && typeof originalConfig.servers === 'object';
-
-  const updatedConfig = { ...originalConfig };
-
-  if (hasMcpServers) {
-    const updatedMcpServers = {};
-    if (selectedServiceNames.size > 0) {
-      updatedMcpServers['mcp-shark-server'] = {
-        type: 'http',
-        url: 'http://localhost:9851/mcp',
-      };
-    }
-    Object.entries(originalConfig.mcpServers).forEach(([name, cfg]) => {
-      if (!selectedServiceNames.has(name)) {
-        updatedMcpServers[name] = cfg;
-      }
-    });
-    updatedConfig.mcpServers = updatedMcpServers;
-  } else if (hasServers) {
-    const updatedServers = {};
-    if (selectedServiceNames.size > 0) {
-      updatedServers['mcp-shark-server'] = {
-        type: 'http',
-        url: 'http://localhost:9851/mcp',
-      };
-    }
-    Object.entries(originalConfig.servers).forEach(([name, cfg]) => {
-      if (!selectedServiceNames.has(name)) {
-        updatedServers[name] = cfg;
-      }
-    });
-    updatedConfig.servers = updatedServers;
-  } else {
-    updatedConfig.mcpServers = {
-      'mcp-shark-server': {
-        type: 'http',
-        url: 'http://localhost:9851/mcp',
-      },
-    };
+  if (!latestBackupPath || !fs.existsSync(latestBackupPath)) {
+    return true;
   }
 
-  let createdBackupPath = null;
-  if (resolvedFilePath && fs.existsSync(resolvedFilePath)) {
-    // Check if we need to create a backup by comparing with latest backup
-    const latestBackupPath = findLatestBackup(resolvedFilePath);
-    let shouldCreateBackup = true;
+  try {
+    const latestBackupContent = fs.readFileSync(latestBackupPath, 'utf-8');
+    const currentContent = content || fs.readFileSync(resolvedFilePath, 'utf-8');
 
-    if (latestBackupPath && fs.existsSync(latestBackupPath)) {
+    // Normalize both contents for comparison (remove whitespace differences)
+    const normalizeContent = (str) => {
       try {
-        const latestBackupContent = fs.readFileSync(latestBackupPath, 'utf-8');
-        const currentContent = content || fs.readFileSync(resolvedFilePath, 'utf-8');
-
-        // Normalize both contents for comparison (remove whitespace differences)
-        const normalizeContent = (str) => {
-          try {
-            // Try to parse as JSON and re-stringify to normalize
-            return JSON.stringify(JSON.parse(str), null, 2);
-          } catch {
-            // If not valid JSON, just trim
-            return str.trim();
-          }
-        };
-
-        const normalizedBackup = normalizeContent(latestBackupContent);
-        const normalizedCurrent = normalizeContent(currentContent);
-
-        if (normalizedBackup === normalizedCurrent) {
-          shouldCreateBackup = false;
-          const timestamp = new Date().toISOString();
-          const skipLog = {
-            timestamp,
-            type: 'stdout',
-            line: `[BACKUP] Skipped backup (no changes detected): ${resolvedFilePath.replace(homedir(), '~')}`,
-          };
-          mcpSharkLogs.push(skipLog);
-          if (mcpSharkLogs.length > 10000) {
-            mcpSharkLogs.shift();
-          }
-          broadcastLogUpdate(skipLog);
-        }
-      } catch (error) {
-        console.error('Error comparing with latest backup:', error);
-        // If comparison fails, create backup to be safe
-        shouldCreateBackup = true;
+        // Try to parse as JSON and re-stringify to normalize
+        return JSON.stringify(JSON.parse(str), null, 2);
+      } catch {
+        // If not valid JSON, just trim
+        return str.trim();
       }
-    }
+    };
 
-    if (shouldCreateBackup) {
-      // Create backup with new format: .mcp.json-mcpshark.<datetime>.json
-      const now = new Date();
-      // Format: YYYY-MM-DD_HH-MM-SS
-      const year = now.getFullYear();
-      const month = String(now.getMonth() + 1).padStart(2, '0');
-      const day = String(now.getDate()).padStart(2, '0');
-      const hours = String(now.getHours()).padStart(2, '0');
-      const minutes = String(now.getMinutes()).padStart(2, '0');
-      const seconds = String(now.getSeconds()).padStart(2, '0');
-      const datetimeStr = `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`;
-      const dir = path.dirname(resolvedFilePath);
-      const basename = path.basename(resolvedFilePath);
-      createdBackupPath = path.join(dir, `.${basename}-mcpshark.${datetimeStr}.json`);
-      fs.copyFileSync(resolvedFilePath, createdBackupPath);
-      storeOriginalConfig(resolvedFilePath, content, createdBackupPath);
+    const normalizedBackup = normalizeContent(latestBackupContent);
+    const normalizedCurrent = normalizeContent(currentContent);
 
+    if (normalizedBackup === normalizedCurrent) {
       const timestamp = new Date().toISOString();
-      const backupLog = {
+      const skipLog = {
         timestamp,
         type: 'stdout',
-        line: `[BACKUP] Created backup: ${createdBackupPath.replace(homedir(), '~')}`,
+        line: `[BACKUP] Skipped backup (no changes detected): ${resolvedFilePath.replace(homedir(), '~')}`,
       };
-      mcpSharkLogs.push(backupLog);
+      mcpSharkLogs.push(skipLog);
       if (mcpSharkLogs.length > 10000) {
         mcpSharkLogs.shift();
       }
-      broadcastLogUpdate(backupLog);
-    } else {
-      // Still store the original config reference even if we didn't create a new backup
-      // Use the latest backup path if available
-      storeOriginalConfig(resolvedFilePath, content, latestBackupPath);
+      broadcastLogUpdate(skipLog);
+      return false;
     }
+    return true;
+  } catch (error) {
+    console.error('Error comparing with latest backup:', error);
+    // If comparison fails, create backup to be safe
+    return true;
+  }
+}
 
+function createBackup(resolvedFilePath, content, mcpSharkLogs, broadcastLogUpdate) {
+  // Create backup with new format: .mcp.json-mcpshark.<datetime>.json
+  const datetimeStr = formatDateTimeForBackup();
+  const dir = path.dirname(resolvedFilePath);
+  const basename = path.basename(resolvedFilePath);
+  const backupPath = path.join(dir, `.${basename}-mcpshark.${datetimeStr}.json`);
+  fs.copyFileSync(resolvedFilePath, backupPath);
+  storeOriginalConfig(resolvedFilePath, content, backupPath);
+
+  const timestamp = new Date().toISOString();
+  const backupLog = {
+    timestamp,
+    type: 'stdout',
+    line: `[BACKUP] Created backup: ${backupPath.replace(homedir(), '~')}`,
+  };
+  mcpSharkLogs.push(backupLog);
+  if (mcpSharkLogs.length > 10000) {
+    mcpSharkLogs.shift();
+  }
+  broadcastLogUpdate(backupLog);
+  return backupPath;
+}
+
+function computeBackupPath(resolvedFilePath, content, mcpSharkLogs, broadcastLogUpdate) {
+  if (!resolvedFilePath || !fs.existsSync(resolvedFilePath)) {
+    return null;
+  }
+
+  // Check if we need to create a backup by comparing with latest backup
+  const latestBackupPath = findLatestBackup(resolvedFilePath);
+  const needsBackup = shouldCreateBackup(
+    latestBackupPath,
+    resolvedFilePath,
+    content,
+    mcpSharkLogs,
+    broadcastLogUpdate
+  );
+
+  if (needsBackup) {
+    return createBackup(resolvedFilePath, content, mcpSharkLogs, broadcastLogUpdate);
+  }
+
+  // Still store the original config reference even if we didn't create a new backup
+  // Use the latest backup path if available
+  storeOriginalConfig(resolvedFilePath, content, latestBackupPath);
+  return null;
+}
+
+export function updateConfigFile(
+  originalConfig,
+  selectedServiceNames,
+  resolvedFilePath,
+  content,
+  mcpSharkLogs,
+  broadcastLogUpdate
+) {
+  const [serverObject, serverType] = getServerObject(originalConfig);
+  const updatedConfig = { ...originalConfig };
+
+  if (serverObject) {
+    const updatedServers = {};
+    // Transform all original servers to HTTP URLs pointing to MCP shark server
+    // Each server gets its own endpoint to avoid tool name prefixing issues
+    Object.entries(serverObject).forEach(([name, cfg]) => {
+      updatedServers[name] = {
+        type: 'http',
+        url: `http://localhost:9851/mcp/${encodeURIComponent(name)}`,
+      };
+    });
+    updatedConfig[serverType] = updatedServers;
+  }
+
+  const createdBackupPath = computeBackupPath(
+    resolvedFilePath,
+    content,
+    mcpSharkLogs,
+    broadcastLogUpdate
+  );
+
+  if (resolvedFilePath && fs.existsSync(resolvedFilePath)) {
     fs.writeFileSync(resolvedFilePath, JSON.stringify(updatedConfig, null, 2));
     console.log(`Updated config file: ${resolvedFilePath}`);
   }
@@ -210,3 +211,29 @@ export function getSelectedServiceNames(originalConfig, selectedServices) {
 
   return selectedServiceNames;
 }
+
+function getServerObject(originalConfig) {
+  const hasMcpServers = originalConfig.mcpServers && typeof originalConfig.mcpServers === 'object';
+  const hasServers = originalConfig.servers && typeof originalConfig.servers === 'object';
+
+  if (hasMcpServers) {
+    return [originalConfig.mcpServers, 'mcpServers'];
+  }
+
+  if (hasServers) {
+    return [originalConfig.servers, 'servers'];
+  }
+
+  return [null, null];
+}
+
+export function formatDateTimeForBackup() {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`;
+}

package/ui/server.js

@@ -120,6 +120,7 @@ export function createUIServer() {
     compositeRoutes.stop(req, res, restoreConfig);
   });
   app.get('/api/composite/status', compositeRoutes.getStatus);
+  app.get('/api/composite/servers', compositeRoutes.getServers);
 
   app.get('/api/help/state', helpRoutes.getState);
   app.post('/api/help/dismiss', helpRoutes.dismiss);

package/ui/src/components/GroupedByMcpView.jsx

@@ -15,12 +15,6 @@ function GroupedByMcpView({
   onToggleSession,
   onToggleCategory,
 }) {
-  const getJsonRpcMethodFromPair = (pair) => {
-    const request = pair.request || pair.response;
-    if (!request) return null;
-    return getJsonRpcMethod(request);
-  };
-
   return (
     <tbody>
       {groupedData.map((sessionGroup) => {

package/ui/src/components/McpPlayground/PromptsSection/PromptItem.jsx

@@ -5,44 +5,69 @@ export default function PromptItem({ prompt, isSelected, onClick }) {
     <div
       onClick={onClick}
       style={{
-        padding: '12px',
-        borderBottom: `1px solid ${colors.borderLight}`,
+        padding: '16px 20px',
+        margin: '4px 8px',
+        borderRadius: '8px',
         cursor: 'pointer',
-        background: isSelected ? colors.bgSecondary : colors.bgCard,
-        transition: 'background 0.2s',
+        background: isSelected ? colors.bgSelected : colors.bgCard,
+        border: isSelected ? `2px solid ${colors.accentBlue}` : `1px solid ${colors.borderLight}`,
+        boxShadow: isSelected ? `0 2px 4px ${colors.shadowSm}` : 'none',
+        transition: 'all 0.2s ease',
+        position: 'relative',
       }}
       onMouseEnter={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.borderColor = colors.borderMedium;
+          e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
         }
       }}
       onMouseLeave={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgCard;
+          e.currentTarget.style.borderColor = colors.borderLight;
+          e.currentTarget.style.boxShadow = 'none';
         }
       }}
     >
-      <div
-        style={{
-          fontWeight: '500',
-          fontSize: '13px',
-          color: colors.textPrimary,
-          marginBottom: '4px',
-        }}
-      >
-        {prompt.name}
-      </div>
-      {prompt.description && (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
         <div
           style={{
-            fontSize: '12px',
-            color: colors.textSecondary,
-            marginTop: '4px',
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            background: isSelected ? colors.accentBlue : colors.textTertiary,
+            marginTop: '6px',
+            flexShrink: 0,
+            transition: 'background 0.2s',
           }}
-        >
-          {prompt.description}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: isSelected ? '600' : '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+              marginBottom: prompt.description ? '6px' : '0',
+              lineHeight: '1.4',
+            }}
+          >
+            {prompt.name}
+          </div>
+          {prompt.description && (
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                lineHeight: '1.5',
+                marginTop: '4px',
+              }}
+            >
+              {prompt.description}
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }

package/ui/src/components/McpPlayground/PromptsSection/PromptsList.jsx

@@ -31,14 +31,16 @@ export default function PromptsList({
       ) : prompts.length === 0 ? (
         <EmptyState message="No prompts available." />
       ) : (
-        prompts.map((prompt, idx) => (
-          <PromptItem
-            key={idx}
-            prompt={prompt}
-            isSelected={selectedPrompt?.name === prompt.name}
-            onClick={() => onSelectPrompt(prompt)}
-          />
-        ))
+        <div style={{ padding: '8px 0' }}>
+          {prompts.map((prompt, idx) => (
+            <PromptItem
+              key={idx}
+              prompt={prompt}
+              isSelected={selectedPrompt?.name === prompt.name}
+              onClick={() => onSelectPrompt(prompt)}
+            />
+          ))}
+        </div>
       )}
     </div>
   );