@mcp-shark/mcp-shark 1.4.1 → 1.4.2

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>
   );

package/ui/src/components/McpPlayground/ResourcesSection/ResourceItem.jsx

@@ -5,55 +5,83 @@ export default function ResourceItem({ resource, 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',
-        }}
-      >
-        {resource.uri}
-      </div>
-      {resource.name && (
-        <div
-          style={{
-            fontSize: '12px',
-            color: colors.textSecondary,
-            marginTop: '4px',
-          }}
-        >
-          {resource.name}
-        </div>
-      )}
-      {resource.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',
           }}
-        >
-          {resource.description}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: isSelected ? '600' : '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+              marginBottom: resource.name || resource.description ? '6px' : '0',
+              lineHeight: '1.4',
+              wordBreak: 'break-word',
+            }}
+          >
+            {resource.uri}
+          </div>
+          {resource.name && (
+            <div
+              style={{
+                fontSize: '13px',
+                color: colors.textPrimary,
+                fontWeight: '500',
+                lineHeight: '1.5',
+                marginTop: '4px',
+              }}
+            >
+              {resource.name}
+            </div>
+          )}
+          {resource.description && (
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                lineHeight: '1.5',
+                marginTop: resource.name ? '2px' : '4px',
+              }}
+            >
+              {resource.description}
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }

package/ui/src/components/McpPlayground/ResourcesSection/ResourcesList.jsx

@@ -31,14 +31,16 @@ export default function ResourcesList({
       ) : resources.length === 0 ? (
         <EmptyState message="No resources available." />
       ) : (
-        resources.map((resource, idx) => (
-          <ResourceItem
-            key={idx}
-            resource={resource}
-            isSelected={selectedResource?.uri === resource.uri}
-            onClick={() => onSelectResource(resource)}
-          />
-        ))
+        <div style={{ padding: '8px 0' }}>
+          {resources.map((resource, idx) => (
+            <ResourceItem
+              key={idx}
+              resource={resource}
+              isSelected={selectedResource?.uri === resource.uri}
+              onClick={() => onSelectResource(resource)}
+            />
+          ))}
+        </div>
       )}
     </div>
   );

package/ui/src/components/McpPlayground/ToolsSection/ToolItem.jsx

@@ -5,44 +5,69 @@ export default function ToolItem({ tool, 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',
-        }}
-      >
-        {tool.name}
-      </div>
-      {tool.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',
           }}
-        >
-          {tool.description}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: isSelected ? '600' : '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+              marginBottom: tool.description ? '6px' : '0',
+              lineHeight: '1.4',
+            }}
+          >
+            {tool.name}
+          </div>
+          {tool.description && (
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                lineHeight: '1.5',
+                marginTop: '4px',
+              }}
+            >
+              {tool.description}
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }

package/ui/src/components/McpPlayground/ToolsSection/ToolsList.jsx

@@ -31,14 +31,16 @@ export default function ToolsList({
       ) : tools.length === 0 ? (
         <EmptyState message="No tools available." />
       ) : (
-        tools.map((tool, idx) => (
-          <ToolItem
-            key={idx}
-            tool={tool}
-            isSelected={selectedTool?.name === tool.name}
-            onClick={() => onSelectTool(tool)}
-          />
-        ))
+        <div style={{ padding: '8px 0' }}>
+          {tools.map((tool, idx) => (
+            <ToolItem
+              key={idx}
+              tool={tool}
+              isSelected={selectedTool?.name === tool.name}
+              onClick={() => onSelectTool(tool)}
+            />
+          ))}
+        </div>
       )}
     </div>
   );