@gguf/coder 0.3.0 → 0.3.1

package/source/wizard/config-wizard.tsx

@@ -0,0 +1,382 @@
+import { spawnSync } from 'node:child_process';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname } from 'node:path';
+import { TitledBox } from '@/components/ui/titled-box';
+import { colors } from '@/config/index';
+import { useResponsiveTerminal } from '@/hooks/useTerminalWidth';
+import { logError } from '@/utils/message-queue';
+import { Box, Text, useFocus, useInput } from 'ink';
+import RandomSpinner from '@/components/random-spinner';
+import { useEffect, useState } from 'react';
+import type { ProviderConfig } from '../types/config';
+import { type ConfigLocation, LocationStep } from './steps/location-step';
+import { McpStep } from './steps/mcp-step';
+import { ProviderStep } from './steps/provider-step';
+import { SummaryStep } from './steps/summary-step';
+import type { McpServerConfig } from './templates/mcp-templates';
+import { buildConfigObject } from './validation';
+
+interface ConfigWizardProps {
+	projectDir: string;
+	onComplete: (configPath: string) => void;
+	onCancel?: () => void;
+}
+
+type WizardStep =
+	| 'location'
+	| 'providers'
+	| 'mcp'
+	| 'summary'
+	| 'editing'
+	| 'saving'
+	| 'complete';
+
+export function ConfigWizard({
+	projectDir,
+	onComplete,
+	onCancel,
+}: ConfigWizardProps) {
+	const [step, setStep] = useState<WizardStep>('location');
+	const [configPath, setConfigPath] = useState('');
+	const [providers, setProviders] = useState<ProviderConfig[]>([]);
+	const [mcpServers, setMcpServers] = useState<Record<string, McpServerConfig>>(
+		{},
+	);
+	const [error, setError] = useState<string | null>(null);
+	const { boxWidth, isNarrow } = useResponsiveTerminal();
+
+	// Capture focus to ensure keyboard handling works properly
+	useFocus({ autoFocus: true, id: 'config-wizard' });
+
+	// Load existing config if editing
+	useEffect(() => {
+		if (!configPath || !existsSync(configPath)) {
+			return;
+		}
+
+		// Use a microtask to defer state updates
+		void Promise.resolve().then(() => {
+			try {
+				const configContent = readFileSync(configPath, 'utf-8');
+				const config = JSON.parse(configContent) as {
+					coder?: {
+						providers?: ProviderConfig[];
+						mcpServers?: Record<string, McpServerConfig>;
+					};
+				};
+
+				const newProviders = config.coder?.providers || [];
+				const newMcpServers = config.coder?.mcpServers || {};
+
+				setProviders(newProviders);
+				setMcpServers(newMcpServers);
+			} catch (err) {
+				logError('Failed to load existing configuration', true, {
+					context: { configPath },
+					error: err instanceof Error ? err.message : String(err),
+				});
+			}
+		});
+	}, [configPath]);
+
+	const handleLocationComplete = (_location: ConfigLocation, path: string) => {
+		setConfigPath(path);
+		setStep('providers');
+	};
+
+	const handleProvidersComplete = (newProviders: ProviderConfig[]) => {
+		setProviders(newProviders);
+		setStep('mcp');
+	};
+
+	const handleMcpComplete = (
+		newMcpServers: Record<string, McpServerConfig>,
+	) => {
+		setMcpServers(newMcpServers);
+		setStep('summary');
+	};
+
+	const handleSave = () => {
+		setStep('saving');
+		setError(null);
+
+		try {
+			// Build config object
+			const config = buildConfigObject(providers, mcpServers);
+
+			// Ensure directory exists
+			const dir = dirname(configPath);
+			if (!existsSync(dir)) {
+				mkdirSync(dir, { recursive: true });
+			}
+
+			// Write config file
+			writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8');
+
+			setStep('complete');
+			// Don't auto-complete - wait for user to press Enter
+		} catch (err) {
+			setError(
+				err instanceof Error ? err.message : 'Failed to save configuration',
+			);
+			setStep('summary');
+		}
+	};
+
+	const handleAddProviders = () => {
+		setStep('providers');
+	};
+
+	const handleAddMcpServers = () => {
+		setStep('mcp');
+	};
+
+	const handleCancel = () => {
+		if (onCancel) {
+			onCancel();
+		}
+	};
+
+	const openInEditor = () => {
+		try {
+			// Save current progress to file
+			const config = buildConfigObject(providers, mcpServers);
+
+			// Ensure directory exists
+			const dir = dirname(configPath);
+			if (!existsSync(dir)) {
+				mkdirSync(dir, { recursive: true });
+			}
+
+			// Write config file
+			writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8');
+
+			// Detect editor (respect $EDITOR or $VISUAL environment variables)
+			// Fall back to nano on Unix/Mac (much friendlier than vi!)
+			// On Windows, use notepad
+			const editor =
+				process.env.EDITOR ||
+				process.env.VISUAL ||
+				(process.platform === 'win32' ? 'notepad' : 'nano');
+
+			// Show cursor and restore terminal for editor
+			process.stdout.write('\x1B[?25h'); // Show cursor
+			process.stdin.setRawMode?.(false); // Disable raw mode
+
+			// Open editor and wait for it to close
+			const result = spawnSync(editor, [configPath], {
+				stdio: 'inherit', // Give editor full control of terminal
+			});
+
+			// Restore terminal state after editor closes
+			process.stdin.setRawMode?.(true); // Re-enable raw mode
+			process.stdout.write('\x1B[?25l'); // Hide cursor (Ink will manage it)
+
+			if (result.status === 0) {
+				// Reload the edited config
+				try {
+					const editedContent = readFileSync(configPath, 'utf-8');
+					const editedConfig = JSON.parse(editedContent) as {
+						coder?: {
+							providers?: ProviderConfig[];
+							mcpServers?: Record<string, McpServerConfig>;
+						};
+					};
+
+					// Update state with edited values
+					if (editedConfig.coder) {
+						setProviders(editedConfig.coder.providers || []);
+						setMcpServers(editedConfig.coder.mcpServers || {});
+					}
+
+					// Return to summary to review changes
+					setStep('summary');
+					setError(null);
+				} catch (parseErr) {
+					setError(
+						parseErr instanceof Error
+							? `Invalid JSON: ${parseErr.message}`
+							: 'Failed to parse edited configuration',
+					);
+					setStep('summary');
+				}
+			} else {
+				setError('Editor exited with an error. Changes may not be saved.');
+				setStep('summary');
+			}
+		} catch (err) {
+			// Restore terminal state on error
+			process.stdin.setRawMode?.(true);
+			process.stdout.write('\x1B[?25l');
+
+			setError(
+				err instanceof Error
+					? `Failed to open editor: ${err.message}`
+					: 'Failed to open editor',
+			);
+			setStep('summary');
+		}
+	};
+
+	// Handle global keyboard shortcuts
+	useInput((input, key) => {
+		// In complete step, wait for Enter to finish
+		if (step === 'complete' && key.return) {
+			onComplete(configPath);
+			return;
+		}
+
+		// Escape - cancel/exit wizard completely
+		if (key.escape) {
+			if (onCancel) {
+				onCancel();
+			}
+			return;
+		}
+
+		// Ctrl+E to open editor (available after location is chosen)
+		if (
+			key.ctrl &&
+			input === 'e' &&
+			configPath &&
+			(step === 'providers' || step === 'mcp' || step === 'summary')
+		) {
+			openInEditor();
+		}
+	});
+
+	const renderStep = () => {
+		switch (step) {
+			case 'location': {
+				return (
+					<LocationStep
+						projectDir={projectDir}
+						onComplete={handleLocationComplete}
+						onBack={onCancel}
+					/>
+				);
+			}
+			case 'providers': {
+				return (
+					<ProviderStep
+						existingProviders={providers}
+						onComplete={handleProvidersComplete}
+						onBack={() => setStep('location')}
+					/>
+				);
+			}
+			case 'mcp': {
+				return (
+					<McpStep
+						existingServers={mcpServers}
+						onComplete={handleMcpComplete}
+						onBack={() => setStep('providers')}
+					/>
+				);
+			}
+			case 'summary': {
+				return (
+					<SummaryStep
+						configPath={configPath}
+						providers={providers}
+						mcpServers={mcpServers}
+						onSave={handleSave}
+						onAddProviders={handleAddProviders}
+						onAddMcpServers={handleAddMcpServers}
+						onCancel={handleCancel}
+						onBack={() => setStep('mcp')}
+					/>
+				);
+			}
+			case 'editing': {
+				return (
+					<Box flexDirection="column">
+						<Box marginBottom={1}>
+							<Text color={colors.primary}>Opening editor...</Text>
+						</Box>
+						<Box marginBottom={1}>
+							<Text dimColor>Configuration saved to: {configPath}</Text>
+						</Box>
+						<Box>
+							<Text color={colors.secondary}>
+								Save and close your editor to return to the wizard.
+							</Text>
+						</Box>
+					</Box>
+				);
+			}
+			case 'saving': {
+				return (
+					<Box flexDirection="column">
+						<Box>
+							<Text color={colors.success}>
+								<RandomSpinner /> Saving configuration...
+							</Text>
+						</Box>
+					</Box>
+				);
+			}
+			case 'complete': {
+				return (
+					<Box flexDirection="column">
+						<Box marginBottom={1}>
+							<Text color={colors.success} bold>
+								✓ Configuration saved!
+							</Text>
+						</Box>
+						<Box marginBottom={1}>
+							<Text dimColor>Saved to: {configPath}</Text>
+						</Box>
+						<Box>
+							<Text color={colors.secondary}>Press Enter to continue</Text>
+						</Box>
+					</Box>
+				);
+			}
+			default: {
+				return null;
+			}
+		}
+	};
+
+	return (
+		<TitledBox
+			title="Configuration Wizard"
+			width={boxWidth}
+			borderColor={colors.primary}
+			paddingX={2}
+			paddingY={1}
+			flexDirection="column"
+			marginBottom={1}
+		>
+			{error && (
+				<Box marginBottom={1}>
+					<Text color={colors.error}>Error: {error}</Text>
+				</Box>
+			)}
+
+			{renderStep()}
+
+			{(step === 'location' ||
+				step === 'providers' ||
+				step === 'mcp' ||
+				step === 'summary') &&
+				(isNarrow ? (
+					<Box marginTop={1} flexDirection="column">
+						<Text color={colors.secondary}>Esc: Exit wizard</Text>
+						<Text color={colors.secondary}>Shift+Tab: Go back</Text>
+						{configPath && (
+							<Text color={colors.secondary}>Ctrl+E: Edit manually</Text>
+						)}
+					</Box>
+				) : (
+					<Box marginTop={1}>
+						<Text color={colors.secondary}>
+							Esc: Exit wizard | Shift+Tab: Go back
+							{configPath && ' | Ctrl+E: Edit manually'}
+						</Text>
+					</Box>
+				))}
+		</TitledBox>
+	);
+}

package/source/wizard/steps/location-step.spec.tsx

@@ -0,0 +1,186 @@
+import test from 'ava';
+import {render} from 'ink-testing-library';
+import React from 'react';
+import {LocationStep} from './location-step.js';
+
+// ============================================================================
+// Tests for LocationStep Component Rendering
+// ============================================================================
+
+console.log(`\nlocation-step.spec.tsx – ${React.version}`);
+
+test('LocationStep renders with location selection options', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Where would you like to create your configuration\?/);
+});
+
+test('LocationStep shows project directory option', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /Current project directory/);
+});
+
+test('LocationStep shows global config option', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /Global user config/);
+});
+
+test('LocationStep shows tip about config types', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /Project configs are useful for team settings/);
+});
+
+// ============================================================================
+// Tests for LocationStep Component Callbacks
+// ============================================================================
+
+test('LocationStep calls onComplete when provided', t => {
+	let completeCalled = false;
+
+	const {lastFrame} = render(
+		<LocationStep
+			onComplete={() => {
+				completeCalled = true;
+			}}
+			projectDir="/test/project"
+		/>,
+	);
+
+	t.truthy(lastFrame());
+	t.false(completeCalled); // Should not be called on render
+});
+
+test('LocationStep calls onBack when provided', t => {
+	let backCalled = false;
+
+	const {lastFrame} = render(
+		<LocationStep
+			onComplete={() => {}}
+			onBack={() => {
+				backCalled = true;
+			}}
+			projectDir="/test/project"
+		/>,
+	);
+
+	t.truthy(lastFrame());
+	t.false(backCalled); // Should not be called on render
+});
+
+// ============================================================================
+// Tests for LocationStep Props Validation
+// ============================================================================
+
+test('LocationStep requires onComplete prop', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	t.truthy(lastFrame());
+});
+
+test('LocationStep requires projectDir prop', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	t.truthy(lastFrame());
+});
+
+test('LocationStep handles optional onBack prop', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	t.truthy(lastFrame());
+});
+
+// ============================================================================
+// Tests for LocationStep UI Elements
+// ============================================================================
+
+test('LocationStep renders SelectInput component', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Current project directory|Global user config/);
+});
+
+test('LocationStep renders with correct initial state', t => {
+	const {frames} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	t.true(frames.length > 0);
+
+	const firstFrame = frames[0];
+	t.regex(firstFrame, /Where would you like to create your configuration\?/);
+});
+
+test('LocationStep renders without crashing', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	t.truthy(lastFrame());
+});
+
+test('LocationStep accepts projectDir with different paths', t => {
+	const testPaths = [
+		'/home/user/project',
+		'/var/www/app',
+		'C:\\Users\\test\\project',
+	];
+
+	for (const projectDir of testPaths) {
+		const {lastFrame} = render(
+			<LocationStep onComplete={() => {}} projectDir={projectDir} />,
+		);
+
+		t.truthy(lastFrame());
+	}
+});
+
+// ============================================================================
+// Tests for LocationStep Narrow Terminal Mode
+// ============================================================================
+
+test('LocationStep renders in narrow mode', t => {
+	// Note: This test verifies the component renders, but we can't easily
+	// simulate terminal width changes in tests
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	t.truthy(lastFrame());
+});
+
+test('LocationStep shows config path information', t => {
+	const {lastFrame} = render(
+		<LocationStep onComplete={() => {}} projectDir="/test/project" />,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Should contain information about where configs will be created
+	t.regex(output!, /Current project directory|Global user config/);
+});

package/source/wizard/steps/location-step.tsx

@@ -0,0 +1,147 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { colors } from '@/config';
+import { getConfigPath } from '@/config/paths';
+import { useResponsiveTerminal } from '@/hooks/useTerminalWidth';
+import { Box, Text, useInput } from 'ink';
+import SelectInput from 'ink-select-input';
+import { useState } from 'react';
+
+export type ConfigLocation = 'project' | 'global';
+
+interface LocationStepProps {
+	onComplete: (location: ConfigLocation, path: string) => void;
+	onBack?: () => void;
+	projectDir: string;
+}
+
+interface LocationOption {
+	label: string;
+	value: ConfigLocation;
+}
+
+export function LocationStep({
+	onComplete,
+	onBack,
+	projectDir,
+}: LocationStepProps) {
+	const { isNarrow, truncatePath } = useResponsiveTerminal();
+	const projectPath = join(projectDir, 'coder.config.json');
+	const globalPath = join(getConfigPath(), 'coder.config.json');
+
+	const projectExists = existsSync(projectPath);
+	const globalExists = existsSync(globalPath);
+
+	const [mode, setMode] = useState<
+		'select-location' | 'existing-config' | null
+	>(() => {
+		// If project config exists, show existing config menu
+		if (projectExists) {
+			return 'existing-config';
+		}
+		// If global exists but project doesn't, still show location selection
+		// but we'll note the global config exists
+		return 'select-location';
+	});
+
+	const existingPath = projectExists ? projectPath : globalPath;
+
+	const locationOptions: LocationOption[] = [
+		{
+			label: `Current project directory`,
+			value: 'project',
+		},
+		{
+			label: `Global user config`,
+			value: 'global',
+		},
+	];
+
+	const existingConfigOptions = [
+		{ label: 'Edit this configuration', value: 'edit' },
+		{ label: 'Create new config in different location', value: 'new' },
+	];
+
+	const handleLocationSelect = (item: LocationOption) => {
+		const path = item.value === 'project' ? projectPath : globalPath;
+		onComplete(item.value, path);
+	};
+
+	const handleExistingConfigSelect = (item: { value: string }) => {
+		if (item.value === 'edit') {
+			const location: ConfigLocation = projectExists ? 'project' : 'global';
+			onComplete(location, existingPath);
+		} else if (item.value === 'new') {
+			setMode('select-location');
+		} else {
+			// Cancel
+			onBack?.();
+		}
+	};
+
+	// Handle Shift+Tab to go back from select-location to existing-config
+	useInput((_input, key) => {
+		if (key.shift && key.tab) {
+			// If we're in select-location mode and came from existing-config, go back
+			if (mode === 'select-location' && (projectExists || globalExists)) {
+				setMode('existing-config');
+			} else {
+				// Otherwise, let the parent wizard handle it
+				onBack?.();
+			}
+		}
+	});
+
+	if (mode === 'existing-config') {
+		return (
+			<Box flexDirection="column">
+				<Box marginBottom={1} flexDirection="column">
+					<Text bold color={colors.primary}>
+						Configuration found at:{' '}
+					</Text>
+					<Text color={colors.secondary}>
+						{isNarrow ? truncatePath(existingPath, 40) : existingPath}
+					</Text>
+				</Box>
+				<SelectInput
+					items={existingConfigOptions}
+					onSelect={(item: { value: string }) => handleExistingConfigSelect(item)}
+				/>
+			</Box>
+		);
+	}
+
+	return (
+		<Box flexDirection="column">
+			<Box marginBottom={1}>
+				<Text bold color={colors.primary}>
+					{isNarrow
+						? 'Where to create config?'
+						: 'Where would you like to create your configuration?'}
+				</Text>
+			</Box>
+			{globalExists && !projectExists && (
+				<Box marginBottom={1} flexDirection="column">
+					<Text color={colors.warning}>
+						{isNarrow
+							? 'Note: Global config exists'
+							: 'Note: Global config exists at'}
+					</Text>
+					{!isNarrow && <Text color={colors.secondary}>{globalPath}</Text>}
+				</Box>
+			)}
+			<SelectInput
+				items={locationOptions}
+				onSelect={(item: LocationOption) => handleLocationSelect(item)}
+			/>
+			{!isNarrow && (
+				<Box marginTop={1}>
+					<Text color={colors.secondary}>
+						Tip: Project configs are useful for team settings. Global configs
+						work across all projects.
+					</Text>
+				</Box>
+			)}
+		</Box>
+	);
+}