@gguf/coder 0.3.0 → 0.3.1

package/source/commands/lsp-command.spec.tsx

@@ -0,0 +1,281 @@
+import test from 'ava';
+import {render} from 'ink-testing-library';
+import React from 'react';
+import {themes} from '../config/themes';
+import {ThemeContext} from '../hooks/useTheme';
+import {type LSPInitResult, getLSPManager} from '../lsp/lsp-manager';
+import {LSP, lspCommand} from './lsp';
+
+console.log(`\nlsp-command.spec.tsx`);
+
+// Mock ThemeProvider for testing
+const MockThemeProvider = ({children}: {children: React.ReactNode}) => {
+	const mockTheme = {
+		currentTheme: 'tokyo-night' as const,
+		colors: themes['tokyo-night'].colors,
+		setCurrentTheme: () => {},
+	};
+	return (
+		<ThemeContext.Provider value={mockTheme}>{children}</ThemeContext.Provider>
+	);
+};
+
+// Mock LSP manager status
+const mockLSPStatus = {
+	initialized: true,
+	servers: [
+		{
+			name: 'typescript-language-server',
+			ready: true,
+			languages: ['ts', 'js', 'tsx', 'jsx'],
+		},
+		{
+			name: 'gopls',
+			ready: true,
+			languages: ['go'],
+		},
+		{
+			name: 'rust-analyzer',
+			ready: false,
+			languages: ['rs'],
+		},
+	],
+};
+
+// ============================================================================
+// Tests for LSP Command Display
+// ============================================================================
+
+test('LSP command: shows no servers when none connected', t => {
+	const emptyStatus = {
+		initialized: false,
+		servers: [],
+	};
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<LSP status={emptyStatus} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /No LSP servers connected/);
+	t.regex(output!, /agents\.config\.json/);
+	t.regex(
+		output!,
+		/LSP servers will auto-discover based on your project files/,
+	);
+});
+
+test('LSP command: displays server status correctly', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<LSP status={mockLSPStatus} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show connected servers count
+	t.regex(output!, /Connected LSP Servers \(3\):/);
+
+	// Should show server names
+	t.regex(output!, /typescript-language-server/);
+	t.regex(output!, /gopls/);
+	t.regex(output!, /rust-analyzer/);
+
+	// Should show status icons
+	t.regex(output!, /🟢/); // Ready servers
+	t.regex(output!, /🔴/); // Initializing server
+
+	// Should show status text
+	t.regex(output!, /\(Ready\)/);
+	t.regex(output!, /\(Initializing\)/);
+});
+
+test('LSP command: displays associated languages correctly', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<LSP status={mockLSPStatus} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show languages for each server
+	t.regex(output!, /Languages: ts, js, tsx, jsx/);
+	t.regex(output!, /Languages: go/);
+	t.regex(output!, /Languages: rs/);
+});
+
+test('LSP command: handles single language correctly', t => {
+	const singleLangStatus = {
+		initialized: true,
+		servers: [
+			{
+				name: 'single-lang-server',
+				ready: true,
+				languages: ['python'],
+			},
+		],
+	};
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<LSP status={singleLangStatus} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Languages: python/);
+});
+
+test('LSP command: handles multiple languages correctly', t => {
+	const multiLangStatus = {
+		initialized: true,
+		servers: [
+			{
+				name: 'multi-lang-server',
+				ready: true,
+				languages: ['js', 'ts', 'jsx', 'tsx', 'vue'],
+			},
+		],
+	};
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<LSP status={multiLangStatus} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Languages: js, ts, jsx, tsx, vue/);
+});
+
+test('LSP command: shows correct status icons', t => {
+	const testCases = [
+		{ready: true, expectedIcon: '🟢'},
+		{ready: false, expectedIcon: '🔴'},
+	];
+
+	for (const testCase of testCases) {
+		const status = {
+			initialized: true,
+			servers: [
+				{
+					name: 'test-server',
+					ready: testCase.ready,
+					languages: ['test'],
+				},
+			],
+		};
+
+		const {lastFrame} = render(
+			<MockThemeProvider>
+				<LSP status={status} />
+			</MockThemeProvider>,
+		);
+
+		const output = lastFrame();
+		t.truthy(output);
+		t.regex(
+			output!,
+			new RegExp(testCase.expectedIcon),
+			`Should show ${testCase.expectedIcon} for ready=${testCase.ready}`,
+		);
+	}
+});
+
+test('LSP command: shows correct status text', t => {
+	const testCases = [
+		{ready: true, expectedText: 'Ready'},
+		{ready: false, expectedText: 'Initializing'},
+	];
+
+	for (const testCase of testCases) {
+		const status = {
+			initialized: true,
+			servers: [
+				{
+					name: 'test-server',
+					ready: testCase.ready,
+					languages: ['test'],
+				},
+			],
+		};
+
+		const {lastFrame} = render(
+			<MockThemeProvider>
+				<LSP status={status} />
+			</MockThemeProvider>,
+		);
+
+		const output = lastFrame();
+		t.truthy(output);
+		t.regex(
+			output!,
+			new RegExp(`\\(${testCase.expectedText}\\)`),
+			`Should show (${testCase.expectedText}) for ready=${testCase.ready}`,
+		);
+	}
+});
+
+// ============================================================================
+// Command Handler Tests
+// ============================================================================
+
+test('lspCommand has correct name', t => {
+	t.is(lspCommand.name, 'lsp');
+});
+
+test('lspCommand has description', t => {
+	t.truthy(lspCommand.description);
+	t.is(typeof lspCommand.description, 'string');
+	t.true(lspCommand.description.length > 0);
+});
+
+test('lspCommand handler is a function', t => {
+	t.is(typeof lspCommand.handler, 'function');
+});
+
+test('lspCommand handler returns valid React element', async t => {
+	// Mock the LSP manager to return our test status
+	const originalGetLSPManager = getLSPManager;
+	const mockLSPManager = {
+		getStatus: () => mockLSPStatus,
+	};
+	// Since we can't directly mock the singleton function, we'll just call the handler
+	// which will use the actual LSP manager (but it will return an element regardless)
+	const mockMessages: any[] = [];
+	const mockMetadata: any = {
+		provider: 'test',
+		model: 'test',
+		tokens: 0,
+		getMessageTokens: () => 0,
+	};
+
+	const result = await lspCommand.handler([], mockMessages, mockMetadata);
+
+	t.truthy(result);
+	t.true(React.isValidElement(result));
+});
+
+test('lspCommand handler returns React element when no servers connected', async t => {
+	const mockMessages: any[] = [];
+	const mockMetadata: any = {
+		provider: 'test',
+		model: 'test',
+		tokens: 0,
+		getMessageTokens: () => 0,
+	};
+
+	const result = await lspCommand.handler([], mockMessages, mockMetadata);
+
+	t.truthy(result);
+	t.true(React.isValidElement(result));
+});

package/source/commands/lsp.tsx

@@ -0,0 +1,120 @@
+import { TitledBox } from '@/components/ui/titled-box';
+import { useTerminalWidth } from '@/hooks/useTerminalWidth';
+import { useTheme } from '@/hooks/useTheme';
+import { getLSPManager } from '@/lsp/lsp-manager';
+import type { Command } from '@/types/index';
+import { Box, Text } from 'ink';
+import React from 'react';
+
+interface LSPProps {
+	status: {
+		initialized: boolean;
+		servers: Array<{ name: string; ready: boolean; languages: string[] }>;
+	};
+}
+
+export function LSP({ status }: LSPProps) {
+	const boxWidth = useTerminalWidth();
+	const { colors } = useTheme();
+	const { servers } = status;
+
+	return (
+		<TitledBox
+			title="/lsp"
+			width={boxWidth}
+			borderColor={colors.primary}
+			paddingX={2}
+			paddingY={1}
+			flexDirection="column"
+			marginBottom={1}
+		>
+			{servers.length === 0 ? (
+				<>
+					<Box marginBottom={1}>
+						<Text color={colors.white} bold>
+							No LSP servers connected
+						</Text>
+					</Box>
+
+					<Text color={colors.white}>
+						To connect LSP servers, configure them in your{' '}
+						<Text color={colors.primary}>coder.config.json</Text> file:
+					</Text>
+
+					<Box marginTop={1} marginBottom={1}>
+						<Text color={colors.secondary}>
+							{`{
+  "coder": {
+    "lsp": {
+      "servers": [
+        {
+          "name": "typescript-language-server",
+          "command": "typescript-language-server",
+          "args": ["--stdio"],
+          "languages": ["ts", "js", "tsx", "jsx"]
+        }
+      ]
+    }
+  }
+}`}
+						</Text>
+					</Box>
+
+					<Text color={colors.secondary}>
+						LSP servers will auto-discover based on your project files.
+					</Text>
+				</>
+			) : (
+				<>
+					<Box marginBottom={1}>
+						<Text color={colors.primary}>
+							Connected LSP Servers ({servers.length}):
+						</Text>
+					</Box>
+
+					{servers.map((server, index) => {
+						// Determine status icon and text based on readiness
+						const statusIcon = server.ready ? '🟢' : '🔴';
+						const statusText = server.ready ? 'Ready' : 'Initializing';
+
+						return (
+							<Box key={index} marginBottom={1}>
+								<Box flexDirection="column">
+									<Text color={colors.white}>
+										• {statusIcon}{' '}
+										<Text color={colors.primary}>{server.name}</Text>:{' '}
+										<Text color={colors.secondary}>({statusText})</Text>
+									</Text>
+
+									{server.languages.length > 0 && (
+										<Text color={colors.secondary}>
+											Languages: {server.languages.join(', ')}
+										</Text>
+									)}
+								</Box>
+							</Box>
+						);
+					})}
+				</>
+			)}
+		</TitledBox>
+	);
+}
+
+export const lspCommand: Command = {
+	name: 'lsp',
+	description: 'Show connected LSP servers and their status',
+	handler: (_args: string[], _messages, _metadata) => {
+		const lspManager = getLSPManager();
+
+		// Get the current status of LSP servers
+		const status = lspManager.getStatus();
+
+		return Promise.resolve(
+			React.createElement(LSP, {
+				key: `lsp-${Date.now()}`,
+				status: status,
+			}),
+		);
+	},
+};

package/source/commands/mcp-command.spec.tsx

@@ -0,0 +1,313 @@
+import test from 'ava';
+import {render} from 'ink-testing-library';
+import React from 'react';
+import {themes} from '../config/themes';
+import {ThemeContext} from '../hooks/useTheme';
+import {ToolManager} from '../tools/tool-manager';
+import {MCP} from './mcp';
+
+console.log(`\nmcp-command.spec.tsx`);
+
+// Mock ThemeProvider for testing
+const MockThemeProvider = ({children}: {children: React.ReactNode}) => {
+	const mockTheme = {
+		currentTheme: 'tokyo-night' as const,
+		colors: themes['tokyo-night'].colors,
+		setCurrentTheme: () => {},
+	};
+	return (
+		<ThemeContext.Provider value={mockTheme}>{children}</ThemeContext.Provider>
+	);
+};
+
+// ============================================================================
+// Tests for Enhanced MCP Command Display
+// ============================================================================
+
+test('MCP command: shows no servers when none connected', t => {
+	const mockToolManager = {
+		getConnectedServers: () => [],
+		getServerTools: () => [],
+		getServerInfo: () => undefined,
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /No MCP servers connected/);
+});
+
+test('MCP command: displays transport type icons', t => {
+	const mockToolManager = {
+		getConnectedServers: () => [
+			'stdio-server',
+			'websocket-server',
+			'http-server',
+		],
+		getServerTools: (serverName: string) => [
+			{name: `tool-${serverName}`, description: 'Test tool'},
+		],
+		getServerInfo: (serverName: string) => ({
+			name: serverName,
+			transport: serverName.includes('stdio')
+				? 'stdio'
+				: serverName.includes('websocket')
+					? 'websocket'
+					: 'http',
+			toolCount: 1,
+			connected: true,
+		}),
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show transport icons
+	t.regex(output!, /💻/); // stdio icon
+	t.regex(output!, /🔄/); // websocket icon
+	t.regex(output!, /🌐/); // http icon
+
+	// Should show transport type names
+	t.regex(output!, /STDIO/);
+	t.regex(output!, /WEBSOCKET/);
+	t.regex(output!, /HTTP/);
+});
+
+test('MCP command: displays URLs for remote servers', t => {
+	const mockToolManager = {
+		getConnectedServers: () => ['remote-server'],
+		getServerTools: () => [{name: 'remote-tool', description: 'Remote tool'}],
+		getServerInfo: () => ({
+			name: 'remote-server',
+			transport: 'http',
+			url: 'https://example.com/mcp',
+			toolCount: 1,
+			connected: true,
+		}),
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show the URL for remote server
+	t.regex(output!, /URL: https:\/\/example\.com\/mcp/);
+});
+
+test('MCP command: displays server descriptions', t => {
+	const mockToolManager = {
+		getConnectedServers: () => ['server-with-description'],
+		getServerTools: () => [{name: 'test-tool', description: 'Test tool'}],
+		getServerInfo: () => ({
+			name: 'server-with-description',
+			transport: 'stdio',
+			toolCount: 1,
+			connected: true,
+			description: 'This is a test server description',
+		}),
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show the description
+	t.regex(output!, /This is a test server description/);
+});
+
+test('MCP command: displays server tags', t => {
+	const mockToolManager = {
+		getConnectedServers: () => ['server-with-tags'],
+		getServerTools: () => [{name: 'test-tool', description: 'Test tool'}],
+		getServerInfo: () => ({
+			name: 'server-with-tags',
+			transport: 'http',
+			toolCount: 1,
+			connected: true,
+			tags: ['documentation', 'remote', 'http'],
+		}),
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show the tags with # prefix
+	t.regex(output!, /Tags: #documentation #remote #http/);
+});
+
+test('MCP command: displays tool information correctly', t => {
+	const mockToolManager = {
+		getConnectedServers: () => ['multi-tool-server'],
+		getServerTools: () => [
+			{name: 'tool-1', description: 'First tool'},
+			{name: 'tool-2', description: 'Second tool'},
+			{name: 'tool-3', description: 'Third tool'},
+		],
+		getServerInfo: () => ({
+			name: 'multi-tool-server',
+			transport: 'stdio',
+			toolCount: 3,
+			connected: true,
+		}),
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show correct tool count
+	t.regex(output!, /3 tools/);
+
+	// Should list tool names
+	t.regex(output!, /Tools:/);
+	t.regex(output!, /tool-1/);
+	t.regex(output!, /tool-2/);
+	t.regex(output!, /tool-3/);
+});
+
+test('MCP command: handles singular tool count', t => {
+	const mockToolManager = {
+		getConnectedServers: () => ['single-tool-server'],
+		getServerTools: () => [{name: 'only-tool', description: 'Only tool'}],
+		getServerInfo: () => ({
+			name: 'single-tool-server',
+			transport: 'websocket',
+			toolCount: 1,
+			connected: true,
+		}),
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show singular "tool" (not "tools")
+	t.regex(output!, /1 tool/);
+	t.notRegex(output!, /1 tools/);
+});
+
+test('MCP command: shows server count header', t => {
+	const mockToolManager = {
+		getConnectedServers: () => ['server-1', 'server-2', 'server-3'],
+		getServerTools: () => [],
+		getServerInfo: () => ({
+			name: 'test-server',
+			transport: 'stdio',
+			toolCount: 0,
+			connected: true,
+		}),
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show connected servers count
+	t.regex(output!, /Connected MCP Servers \(3\):/);
+});
+
+test('MCP command: shows configuration examples', t => {
+	const mockToolManager = {
+		getConnectedServers: () => [],
+		getServerTools: () => [],
+		getServerInfo: () => undefined,
+	} as unknown as ToolManager;
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<MCP toolManager={mockToolManager} />
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Should show configuration examples with transport field
+	t.regex(output!, /"transport": "stdio"/);
+	t.regex(output!, /"transport": "http"/);
+
+	// Should include transport field in examples
+	t.regex(output!, /"command":/);
+	t.regex(output!, /"url":/);
+});
+
+test('MCP command: uses transport type getTransportIcon function correctly', t => {
+	// Test the helper function indirectly through component rendering
+	const testCases = [
+		{transport: 'stdio', expectedIcon: '💻'},
+		{transport: 'websocket', expectedIcon: '🔄'},
+		{transport: 'http', expectedIcon: '🌐'},
+		{transport: 'unknown', expectedIcon: '❓'},
+	];
+
+	for (const testCase of testCases) {
+		const mockToolManager = {
+			getConnectedServers: () => ['test-server'],
+			getServerTools: () => [],
+			getServerInfo: () => ({
+				name: 'test-server',
+				transport: testCase.transport as any,
+				toolCount: 0,
+				connected: true,
+			}),
+		} as unknown as ToolManager;
+
+		const {lastFrame} = render(
+			<MockThemeProvider>
+				<MCP toolManager={mockToolManager} />
+			</MockThemeProvider>,
+		);
+
+		const output = lastFrame();
+		t.truthy(output);
+
+		// Should show the correct icon for the transport type
+		t.regex(
+			output!,
+			new RegExp(testCase.expectedIcon),
+			`Should show ${testCase.expectedIcon} for ${testCase.transport} transport`,
+		);
+	}
+});