@gguf/coder 0.3.0 → 0.3.1

package/source/components/random-spinner.tsx

@@ -0,0 +1,19 @@
+import Spinner from 'ink-spinner';
+import type { ComponentProps } from 'react';
+import { useMemo } from 'react';
+
+// The requested styles (see examples):
+// dot style: dots (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏)
+// triangle style: triangle (◢◣◤◥)
+const SPINNER_TYPES = ['dots', 'star', 'hamburger', 'triangle', 'circle', 'arc', 'bounce'] as const;
+
+export default function RandomSpinner(props: Omit<ComponentProps<typeof Spinner>, 'type'>) {
+    // Select a random spinner type once on mount
+    const type = useMemo(() => {
+        const randomIndex = Math.floor(Math.random() * SPINNER_TYPES.length);
+        return SPINNER_TYPES[randomIndex];
+    }, []);
+    // Cast type to any to avoid strict type checking issues with specific spinner names
+    // depending on the version of ink-spinner/cli-spinners types installed
+    return <Spinner type={type as any} {...props} />;
+}

package/source/components/security-disclaimer.tsx

@@ -0,0 +1,73 @@
+import {TitledBox} from '@/components/ui/titled-box';
+import {defaultTheme, getThemeColors} from '@/config/themes';
+import {useTerminalWidth} from '@/hooks/useTerminalWidth';
+import {Box, Text} from 'ink';
+import SelectInput from 'ink-select-input';
+
+interface SecurityDisclaimerProps {
+	onConfirm: () => void;
+	onExit: () => void;
+}
+
+enum SecurityDisclaimerOption {
+	Yes = 'yes',
+	No = 'no',
+}
+
+export default function SecurityDisclaimer({
+	onConfirm,
+	onExit,
+}: SecurityDisclaimerProps) {
+	const boxWidth = useTerminalWidth();
+	const colors = getThemeColors(defaultTheme);
+
+	// Inline item type kept close to usage to limit scope and improve readability
+	const items: {label: string; value: SecurityDisclaimerOption}[] = [
+		{
+			label: 'Yes, proceed',
+			value: SecurityDisclaimerOption.Yes,
+		},
+		{
+			label: 'No, exit',
+			value: SecurityDisclaimerOption.No,
+		},
+	];
+
+	const handleSelect = (item: {
+		label: string;
+		value: SecurityDisclaimerOption;
+	}) => {
+		if (item.value === SecurityDisclaimerOption.Yes) {
+			onConfirm();
+		} else {
+			onExit();
+		}
+	};
+
+	return (
+		<Box flexDirection="column" padding={1}>
+			<TitledBox
+				title="Security Warning"
+				width={boxWidth}
+				borderColor={colors.error}
+				paddingX={2}
+				paddingY={1}
+				flexDirection="column"
+				marginBottom={1}
+			>
+				<Text bold color={colors.warning}>
+					Do you trust the files in this folder?
+				</Text>
+				<Text>{process.cwd()}</Text>
+				<Box marginTop={1}>
+					<Text>
+						Coder may read, write, or execute files contained in this
+						directory. This can pose security risks, so only use files from
+						trusted sources.
+					</Text>
+				</Box>
+				<SelectInput items={items} onSelect={handleSelect} />
+			</TitledBox>
+		</Box>
+	);
+}

package/source/components/status-connection-display.spec.tsx

@@ -0,0 +1,133 @@
+import test from 'ava';
+import {render} from 'ink-testing-library';
+import React from 'react';
+import Status from '../components/status';
+import type {LSPConnectionStatus, MCPConnectionStatus} from '../types/core';
+
+test('Status component with MCP status renders', async t => {
+	const mcpStatus: MCPConnectionStatus[] = [
+		{name: 'server1', status: 'connected'},
+	];
+
+	const {lastFrame} = render(
+		<Status
+			provider="test-provider"
+			model="test-model"
+			theme="tokyo-night"
+			mcpServersStatus={mcpStatus}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.true(output!.includes('Status'));
+	t.true(output!.includes('MCP:'));
+	t.true(output!.includes('1/1 connected'));
+	// Fully connected MCP should show checkmark
+	t.true(output!.includes('✓'));
+});
+
+test('Status component with preferencesLoaded renders', async t => {
+	const {lastFrame} = render(
+		<Status
+			provider="test-provider"
+			model="test-model"
+			theme="tokyo-night"
+			preferencesLoaded={true}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.true(output!.includes('✓ Preferences loaded'));
+});
+
+test('Status component with customCommandsCount renders', async t => {
+	const {lastFrame} = render(
+		<Status
+			provider="test-provider"
+			model="test-model"
+			theme="tokyo-night"
+			customCommandsCount={6}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.true(output!.includes('Status'));
+	t.true(output!.includes('✓ 6 custom commands'));
+});
+
+test('Status component does not render custom commands when count is 0', async t => {
+	const {lastFrame} = render(
+		<Status
+			provider="test-provider"
+			model="test-model"
+			theme="tokyo-night"
+			customCommandsCount={0}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.true(output!.includes('Status'));
+	t.false(output!.includes('custom commands'));
+});
+
+test('Status component with LSP status renders', async t => {
+	const lspStatus: LSPConnectionStatus[] = [
+		{name: 'ts-language-server', status: 'connected'},
+	];
+
+	const {lastFrame} = render(
+		<Status
+			provider="test-provider"
+			model="test-model"
+			theme="tokyo-night"
+			lspServersStatus={lspStatus}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.true(output!.includes('Status'));
+	t.true(output!.includes('LSP:'));
+	t.true(output!.includes('✓'));
+});
+
+test('Status component without MCP/LSP still renders', async t => {
+	const {lastFrame} = render(
+		<Status provider="test-provider" model="test-model" theme="tokyo-night" />,
+	);
+
+	const output = lastFrame();
+	t.true(output!.includes('Status'));
+	// Should not contain MCP or LSP sections when no status provided
+	t.false(output!.includes('MCP:'));
+	t.false(output!.includes('LSP:'));
+});
+
+test('Status component renders with connection status props', async t => {
+	const mcpStatus: MCPConnectionStatus[] = [
+		{name: 'server1', status: 'connected'},
+		{name: 'server2', status: 'failed', errorMessage: 'Connection timeout'},
+	];
+
+	const lspStatus: LSPConnectionStatus[] = [
+		{name: 'ts-language-server', status: 'connected'},
+		{name: 'pyright', status: 'connected'},
+	];
+
+	const {lastFrame} = render(
+		<Status
+			provider="test-provider"
+			model="test-model"
+			theme="tokyo-night"
+			mcpServersStatus={mcpStatus}
+			lspServersStatus={lspStatus}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.true(output!.includes('Status'));
+	t.true(output!.includes('MCP:'));
+	t.true(output!.includes('1/2 connected')); // 1 of 2 MCP servers connected
+	t.true(output!.includes('LSP:'));
+	t.true(output!.includes('2/2 connected')); // 2 of 2 LSP servers connected
+	t.true(output!.includes('Connection timeout')); // Error message should be shown
+});

package/source/components/status.tsx

@@ -0,0 +1,267 @@
+import { existsSync } from 'fs';
+import { Box, Text } from 'ink';
+import { memo } from 'react';
+
+import { TitledBox } from '@/components/ui/titled-box';
+import { confDirMap } from '@/config/index';
+import { getThemeColors, themes } from '@/config/themes';
+import {
+	PATH_LENGTH_NARROW_TERMINAL,
+	PATH_LENGTH_NORMAL_TERMINAL,
+} from '@/constants';
+import { useResponsiveTerminal } from '@/hooks/useTerminalWidth';
+import type { LSPConnectionStatus, MCPConnectionStatus } from '@/types/core';
+import type { ThemePreset } from '@/types/ui';
+import type { UpdateInfo } from '@/types/utils';
+
+// Get CWD once at module load time
+const cwd = process.cwd();
+
+// Using UpdateInfo from '@/types/utils' for type consistency
+
+export default memo(function Status({
+	provider,
+	model,
+	theme,
+	updateInfo,
+	agentsMdLoaded,
+	mcpServersStatus,
+	lspServersStatus,
+	customCommandsCount,
+	preferencesLoaded,
+}: {
+	provider: string;
+	model: string;
+	theme: ThemePreset;
+	updateInfo?: UpdateInfo | null;
+	agentsMdLoaded?: boolean;
+	mcpServersStatus?: MCPConnectionStatus[];
+	lspServersStatus?: LSPConnectionStatus[];
+	customCommandsCount?: number;
+	preferencesLoaded?: boolean;
+}) {
+	const { boxWidth, isNarrow, truncatePath } = useResponsiveTerminal();
+	const colors = getThemeColors(theme);
+
+	// Check for AGENTS.md synchronously if not provided
+	const hasAgentsMd = agentsMdLoaded ?? existsSync(`${cwd}/AGENTS.md`);
+
+	// Connection status calculations
+	const mcpStatus = mcpServersStatus || [];
+	const lspStatus = lspServersStatus || [];
+	const mcpConnected = mcpStatus.filter(s => s.status === 'connected').length;
+	const lspConnected = lspStatus.filter(s => s.status === 'connected').length;
+	const mcpTotal = mcpStatus.length;
+	const lspTotal = lspStatus.length;
+
+	// Get status color
+	const getStatusColor = (connected: number, total: number) => {
+		if (total === 0) return colors.secondary;
+		if (connected === total) return colors.success;
+		if (connected > 0) return colors.warning;
+		return colors.error;
+	};
+
+	// Calculate max path length based on terminal size
+	const maxPathLength = isNarrow
+		? PATH_LENGTH_NARROW_TERMINAL
+		: PATH_LENGTH_NORMAL_TERMINAL;
+
+	return (
+		<>
+			{/* Narrow terminal: simple text without box */}
+			{isNarrow ? (
+				<Box
+					flexDirection="column"
+					marginBottom={1}
+					borderStyle="round"
+					borderColor={colors.info}
+					paddingY={1}
+					paddingX={2}
+				>
+					<Text color={colors.info}>
+						<Text bold={true}>CWD: </Text>
+						{truncatePath(cwd, maxPathLength)}
+					</Text>
+					<Text color={colors.success}>
+						<Text bold={true}>Model: </Text>
+						{model}
+					</Text>
+					<Text color={colors.primary}>
+						<Text bold={true}>Theme: </Text>
+						{themes[theme].displayName}
+					</Text>
+					{hasAgentsMd ? (
+						<Text color={colors.secondary} italic>
+							✓ AGENTS.md
+						</Text>
+					) : (
+						<Text color={colors.secondary} italic>
+							✗ No AGENTS.md
+						</Text>
+					)}
+					{preferencesLoaded && (
+						<Text color={colors.secondary}>✓ Preferences loaded</Text>
+					)}
+					{customCommandsCount !== undefined && customCommandsCount > 0 && (
+						<Text color={colors.secondary}>
+							✓ {customCommandsCount} custom commands
+						</Text>
+					)}
+					{mcpTotal > 0 && (
+						<Text
+							color={
+								mcpConnected === mcpTotal
+									? colors.secondary
+									: getStatusColor(mcpConnected, mcpTotal)
+							}
+						>
+							{mcpConnected === mcpTotal ? '✓ ' : ''}MCP: {mcpConnected}/
+							{mcpTotal} connected
+						</Text>
+					)}
+					{lspTotal > 0 && (
+						<Text
+							color={
+								lspConnected === lspTotal
+									? colors.secondary
+									: getStatusColor(lspConnected, lspTotal)
+							}
+						>
+							{lspConnected === lspTotal ? '✓ ' : ''}LSP: {lspConnected}/
+							{lspTotal} connected
+						</Text>
+					)}
+					{updateInfo?.hasUpdate && (
+						<>
+							<Text color={colors.warning}>
+								⚠ v{updateInfo.currentVersion} → v{updateInfo.latestVersion}
+							</Text>
+							{updateInfo.updateCommand ? (
+								<Text color={colors.secondary}>
+									↳ Run: /update or {updateInfo.updateCommand}
+								</Text>
+							) : updateInfo.updateMessage ? (
+								<Text color={colors.secondary}>{updateInfo.updateMessage}</Text>
+							) : null}
+						</>
+					)}
+				</Box>
+			) : (
+				/* Normal/Wide terminal: full layout with TitledBox */
+				<TitledBox
+					title="Status"
+					width={boxWidth}
+					borderColor={colors.info}
+					paddingX={2}
+					paddingY={1}
+					flexDirection="column"
+					marginBottom={1}
+				>
+					<Text color={colors.info}>
+						<Text bold={true}>CWD: </Text>
+						{truncatePath(cwd, maxPathLength)}
+					</Text>
+					<Text color={colors.info}>
+						<Text bold={true}>Config: </Text>
+						{truncatePath(confDirMap['coder.config.json'], maxPathLength)}
+					</Text>
+					<Text color={colors.success}>
+						<Text bold={true}>Provider: </Text>
+						{provider}, <Text bold={true}>Model: </Text>
+						{model}
+					</Text>
+					<Text color={colors.primary}>
+						<Text bold={true}>Theme: </Text>
+						{themes[theme].displayName}
+					</Text>
+					{hasAgentsMd ? (
+						<Text color={colors.secondary} italic>
+							<Text>↳ Using AGENTS.md. Project initialized</Text>
+						</Text>
+					) : (
+						<Text color={colors.secondary} italic>
+							↳ No AGENTS.md file found, run `/init` to initialize this
+							directory
+						</Text>
+					)}
+					{preferencesLoaded && (
+						<Text color={colors.secondary}>✓ Preferences loaded</Text>
+					)}
+					{customCommandsCount !== undefined && customCommandsCount > 0 && (
+						<Text color={colors.secondary}>
+							✓ {customCommandsCount} custom commands loaded
+						</Text>
+					)}
+					{mcpTotal > 0 && (
+						<Box flexDirection="column">
+							<Text
+								color={
+									mcpConnected === mcpTotal
+										? colors.secondary
+										: getStatusColor(mcpConnected, mcpTotal)
+								}
+							>
+								{mcpConnected === mcpTotal ? '✓ ' : ''}MCP: {mcpConnected}/
+								{mcpTotal} connected
+							</Text>
+							{mcpConnected < mcpTotal && (
+								<Box flexDirection="column" marginLeft={2}>
+									{mcpStatus
+										.filter(s => s.status === 'failed')
+										.map(server => (
+											<Text key={server.name} color={colors.error}>
+												• {server.name}:{' '}
+												{server.errorMessage || 'Connection failed'}
+											</Text>
+										))}
+								</Box>
+							)}
+						</Box>
+					)}
+					{lspTotal > 0 && (
+						<Box flexDirection="column">
+							<Text
+								color={
+									lspConnected === lspTotal
+										? colors.secondary
+										: getStatusColor(lspConnected, lspTotal)
+								}
+							>
+								{lspConnected === lspTotal ? '✓ ' : ''}LSP: {lspConnected}/
+								{lspTotal} connected
+							</Text>
+							{lspConnected < lspTotal && (
+								<Box flexDirection="column" marginLeft={2}>
+									{lspStatus
+										.filter(s => s.status === 'failed')
+										.map(server => (
+											<Text key={server.name} color={colors.error}>
+												• {server.name}:{' '}
+												{server.errorMessage || 'Connection failed'}
+											</Text>
+										))}
+								</Box>
+							)}
+						</Box>
+					)}
+					{updateInfo?.hasUpdate && (
+						<>
+							<Text color={colors.warning}>
+								<Text bold={true}>Update Available: </Text>v
+								{updateInfo.currentVersion} → v{updateInfo.latestVersion}
+							</Text>
+							{updateInfo.updateCommand ? (
+								<Text color={colors.secondary}>
+									↳ Run: /update or {updateInfo.updateCommand}
+								</Text>
+							) : updateInfo.updateMessage ? (
+								<Text color={colors.secondary}>{updateInfo.updateMessage}</Text>
+							) : null}
+						</>
+					)}
+				</TitledBox>
+			)}
+		</>
+	);
+});

package/source/components/theme-selector.tsx

@@ -0,0 +1,126 @@
+import {TitledBox} from '@/components/ui/titled-box';
+import {themes} from '@/config/themes';
+import {useTerminalWidth} from '@/hooks/useTerminalWidth';
+import {useTheme} from '@/hooks/useTheme';
+import type {ThemePreset} from '@/types/ui';
+import {Box, Text, useInput} from 'ink';
+import BigText from 'ink-big-text';
+import Gradient from 'ink-gradient';
+import SelectInput from 'ink-select-input';
+import {useMemo, useState} from 'react';
+
+interface ThemeSelectorProps {
+	onThemeSelect: (theme: ThemePreset) => void;
+	onCancel: () => void;
+}
+
+interface ThemeOption {
+	label: string;
+	value: ThemePreset;
+}
+
+export default function ThemeSelector({
+	onThemeSelect,
+	onCancel,
+}: ThemeSelectorProps) {
+	const boxWidth = useTerminalWidth();
+	const {colors, currentTheme, setCurrentTheme} = useTheme();
+	const [originalTheme] = useState(currentTheme); // Store original theme for restore on cancel
+
+	// Handle escape key to cancel
+	useInput((_, key) => {
+		if (key.escape) {
+			// Restore original theme on cancel
+			setCurrentTheme(originalTheme);
+			onCancel();
+		}
+	});
+
+	// Create theme options from available themes
+	const themeOptions: ThemeOption[] = Object.values(themes).map(theme => ({
+		label:
+			theme.displayName + (theme.name === originalTheme ? ' (current)' : ''),
+		value: theme.name as ThemePreset,
+	}));
+
+	// Find index of current theme for initial selection
+	const initialIndex = useMemo(() => {
+		const index = themeOptions.findIndex(
+			option => option.value === originalTheme,
+		);
+		return index >= 0 ? index : 0;
+	}, [originalTheme, themeOptions]);
+
+	const [_currentIndex, _setCurrentIndex] = useState(initialIndex);
+
+	const handleSelect = (item: ThemeOption) => {
+		onThemeSelect(item.value);
+	};
+
+	// Handle theme preview during navigation
+	const handleHighlight = (item: ThemeOption) => {
+		setCurrentTheme(item.value);
+	};
+
+	return (
+		<>
+			<Gradient colors={[colors.primary, colors.tool]}>
+				<BigText text="Themes" font="tiny" />
+			</Gradient>
+
+			<TitledBox
+				title="✻ Try out different themes!"
+				width={boxWidth}
+				borderColor={colors.primary}
+				paddingX={2}
+				paddingY={1}
+				flexDirection="column"
+				marginBottom={1}
+			>
+				<Box paddingBottom={1}>
+					<Text color={colors.white}>Tips for getting started:</Text>
+				</Box>
+				<Box paddingBottom={1} flexDirection="column">
+					<Text color={colors.secondary}>
+						1. Use arrow keys to navigate and Enter to select.
+					</Text>
+					<Text color={colors.secondary}>
+						2. Press Esc to cancel and revert to your original theme.
+					</Text>
+					<Text color={colors.secondary}>
+						3. The CLI will remember your choice next time.
+					</Text>
+				</Box>
+				<Text color={colors.white}>/help for help</Text>
+			</TitledBox>
+			<Box
+				borderStyle="round"
+				width={boxWidth}
+				borderColor={colors.primary}
+				paddingX={2}
+				paddingY={1}
+				marginBottom={1}
+			>
+				<Box flexDirection="column">
+					<Box marginBottom={1}>
+						<Text color={colors.secondary}>
+							Select a theme (current: {themes[currentTheme].displayName})
+						</Text>
+					</Box>
+
+					<Box marginBottom={1}>
+						<Text color={colors.secondary}>
+							↑/↓ Navigate • Enter Select • Esc Cancel
+						</Text>
+					</Box>
+
+					<SelectInput
+						items={themeOptions}
+						onSelect={handleSelect}
+						onHighlight={handleHighlight}
+					/>
+				</Box>
+			</Box>
+		</>
+	);
+}