Bryanmorgan/add mcp description support (#825)

packages/cli/src/ui/hooks/slashCommandProcessor.test.ts

@@ -49,7 +49,7 @@ vi.mock('node:fs/promises', () => ({
 }));
 
 import { act, renderHook } from '@testing-library/react';
-import { vi, describe, it, expect, beforeEach, Mock } from 'vitest';
+import { vi, describe, it, expect, beforeEach, afterEach, Mock } from 'vitest';
 import open from 'open';
 import {
   useSlashCommandProcessor,
@@ -107,7 +107,7 @@ describe('useSlashCommandProcessor', () => {
     process.env = { ...globalThis.process.env };
   });
 
-  const getProcessor = () => {
+  const getProcessor = (showToolDescriptions: boolean = false) => {
     const { result } = renderHook(() =>
       useSlashCommandProcessor(
         mockConfig,
@@ -119,6 +119,7 @@ describe('useSlashCommandProcessor', () => {
         mockOpenThemeDialog,
         mockPerformMemoryRefresh,
         mockCorgiMode,
+        showToolDescriptions,
       ),
     );
     return result.current;
@@ -571,17 +572,82 @@ Add any other context about the problem here.
       // Check that the message contains details about both servers and their tools
       const message = mockAddItem.mock.calls[1][0].text;
       // Server 1 - Connected (green dot)
-      expect(message).toContain('🟢 server1 (2 tools):');
-      expect(message).toContain('server1_tool1');
-      expect(message).toContain('server1_tool2');
+      expect(message).toContain('🟢 \u001b[1mserver1\u001b[0m (2 tools)');
+      expect(message).toContain('\u001b[36mserver1_tool1\u001b[0m');
+      expect(message).toContain('\u001b[36mserver1_tool2\u001b[0m');
 
       // Server 2 - Connecting (yellow dot)
-      expect(message).toContain('🟡 server2 (1 tools):');
-      expect(message).toContain('server2_tool1');
+      expect(message).toContain('🟡 \u001b[1mserver2\u001b[0m (1 tools)');
+      expect(message).toContain('\u001b[36mserver2_tool1\u001b[0m');
 
       // Server 3 - No status, should default to Disconnected (red dot)
-      expect(message).toContain('🔴 server3 (1 tools):');
-      expect(message).toContain('server3_tool1');
+      expect(message).toContain('🔴 \u001b[1mserver3\u001b[0m (1 tools)');
+      expect(message).toContain('\u001b[36mserver3_tool1\u001b[0m');
+
+      expect(commandResult).toBe(true);
+    });
+
+    it('should display tool descriptions when showToolDescriptions is true', async () => {
+      // Mock MCP servers configuration with server description
+      const mockMcpServers = {
+        server1: {
+          command: 'cmd1',
+          description: 'This is a server description',
+        },
+      };
+
+      // Setup getMCPServerStatus mock implementation
+      vi.mocked(getMCPServerStatus).mockImplementation((serverName) => {
+        if (serverName === 'server1') return MCPServerStatus.CONNECTED;
+        return MCPServerStatus.DISCONNECTED;
+      });
+
+      // Mock tools from server with descriptions
+      const mockServerTools = [
+        { name: 'tool1', description: 'This is tool 1 description' },
+        { name: 'tool2', description: 'This is tool 2 description' },
+      ];
+
+      mockConfig = {
+        ...mockConfig,
+        getToolRegistry: vi.fn().mockResolvedValue({
+          getToolsByServer: vi.fn().mockReturnValue(mockServerTools),
+        }),
+        getMcpServers: vi.fn().mockReturnValue(mockMcpServers),
+      } as unknown as Config;
+
+      const { handleSlashCommand } = getProcessor(true);
+      let commandResult: SlashCommandActionReturn | boolean = false;
+      await act(async () => {
+        commandResult = handleSlashCommand('/mcp');
+      });
+
+      expect(mockAddItem).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          type: MessageType.INFO,
+          text: expect.stringContaining('Configured MCP servers and tools:'),
+        }),
+        expect.any(Number),
+      );
+
+      const message = mockAddItem.mock.calls[1][0].text;
+
+      // Check that server description is included (with ANSI color codes)
+      expect(message).toContain('\u001b[1mserver1\u001b[0m (2 tools)');
+      expect(message).toContain(
+        '\u001b[32mThis is a server description\u001b[0m',
+      );
+
+      // Check that tool descriptions are included (with ANSI color codes)
+      expect(message).toContain('\u001b[36mtool1\u001b[0m');
+      expect(message).toContain(
+        '\u001b[32mThis is tool 1 description\u001b[0m',
+      );
+      expect(message).toContain('\u001b[36mtool2\u001b[0m');
+      expect(message).toContain(
+        '\u001b[32mThis is tool 2 description\u001b[0m',
+      );
 
       expect(commandResult).toBe(true);
     });
@@ -636,9 +702,9 @@ Add any other context about the problem here.
 
       // Check that the message contains details about both servers and their tools
       const message = mockAddItem.mock.calls[1][0].text;
-      expect(message).toContain('🟢 server1 (1 tools):');
-      expect(message).toContain('server1_tool1');
-      expect(message).toContain('🔴 server2 (0 tools):');
+      expect(message).toContain('🟢 \u001b[1mserver1\u001b[0m (1 tools)');
+      expect(message).toContain('\u001b[36mserver1_tool1\u001b[0m');
+      expect(message).toContain('🔴 \u001b[1mserver2\u001b[0m (0 tools)');
       expect(message).toContain('No tools available');
 
       expect(commandResult).toBe(true);

packages/cli/src/ui/hooks/slashCommandProcessor.ts

@@ -47,6 +47,7 @@ export const useSlashCommandProcessor = (
   openThemeDialog: () => void,
   performMemoryRefresh: () => Promise<void>,
   toggleCorgiMode: () => void,
+  showToolDescriptions: boolean = false,
 ) => {
   const addMessage = useCallback(
     (message: Message) => {
@@ -141,6 +142,21 @@ export const useSlashCommandProcessor = (
         name: 'mcp',
         description: 'list configured MCP servers and tools',
         action: async (_mainCommand, _subCommand, _args) => {
+          // Check if the _subCommand includes a specific flag to control description visibility
+          let useShowDescriptions = showToolDescriptions;
+          if (_subCommand === 'desc' || _subCommand === 'descriptions') {
+            useShowDescriptions = true;
+          } else if (
+            _subCommand === 'nodesc' ||
+            _subCommand === 'nodescriptions'
+          ) {
+            useShowDescriptions = false;
+          } else if (_args === 'desc' || _args === 'descriptions') {
+            useShowDescriptions = true;
+          } else if (_args === 'nodesc' || _args === 'nodescriptions') {
+            useShowDescriptions = false;
+          }
+
           const toolRegistry = await config?.getToolRegistry();
           if (!toolRegistry) {
             addMessage({
@@ -184,10 +200,68 @@ export const useSlashCommandProcessor = (
                 break;
             }
 
-            message += `${statusDot} ${serverName} (${serverTools.length} tools):\n`;
+            // Get server description if available
+            const server = mcpServers[serverName];
+
+            // Format server header with bold formatting
+            message += `${statusDot} \u001b[1m${serverName}\u001b[0m (${serverTools.length} tools)`;
+
+            // Add server description with proper handling of multi-line descriptions
+            if (useShowDescriptions && server?.description) {
+              const greenColor = '\u001b[32m';
+              const resetColor = '\u001b[0m';
+
+              const descLines = server.description.split('\n');
+              message += `: ${greenColor}${descLines[0]}${resetColor}`;
+              message += '\n';
+
+              // If there are multiple lines, add proper indentation for each line
+              if (descLines.length > 1) {
+                for (let i = 1; i < descLines.length; i++) {
+                  // Skip empty lines at the end
+                  if (i === descLines.length - 1 && descLines[i].trim() === '')
+                    continue;
+                  message += `    ${greenColor}${descLines[i]}${resetColor}\n`;
+                }
+              }
+            } else {
+              message += '\n';
+            }
+
+            // Reset formatting after server entry
+            message += '\u001b[0m';
+
             if (serverTools.length > 0) {
               serverTools.forEach((tool) => {
-                message += `  - ${tool.name}\n`;
+                if (useShowDescriptions && tool.description) {
+                  // Format tool name in cyan using simple ANSI cyan color
+                  message += `  - \u001b[36m${tool.name}\u001b[0m: `;
+
+                  // Apply green color to the description text
+                  const greenColor = '\u001b[32m';
+                  const resetColor = '\u001b[0m';
+
+                  // Handle multi-line descriptions by properly indenting and preserving formatting
+                  const descLines = tool.description.split('\n');
+                  message += `${greenColor}${descLines[0]}${resetColor}\n`;
+
+                  // If there are multiple lines, add proper indentation for each line
+                  if (descLines.length > 1) {
+                    for (let i = 1; i < descLines.length; i++) {
+                      // Skip empty lines at the end
+                      if (
+                        i === descLines.length - 1 &&
+                        descLines[i].trim() === ''
+                      )
+                        continue;
+                      message += `      ${greenColor}${descLines[i]}${resetColor}\n`;
+                    }
+                  }
+                  // Reset is handled inline with each line now
+                } else {
+                  // Use cyan color for the tool name even when not showing descriptions
+                  message += `  - \u001b[36m${tool.name}\u001b[0m\n`;
+                }
               });
             } else {
               message += '  No tools available\n';
@@ -195,6 +269,9 @@ export const useSlashCommandProcessor = (
             message += '\n';
           }
 
+          // Make sure to reset any ANSI formatting at the end to prevent it from affecting the terminal
+          message += '\u001b[0m';
+
           addMessage({
             type: MessageType.INFO,
             content: message,
@@ -369,6 +446,7 @@ Add any other context about the problem here.
       addMessage,
       toggleCorgiMode,
       config,
+      showToolDescriptions,
     ],
   );