@gguf/coder 0.2.9 → 0.3.1

package/source/app/components/ChatInterface.spec.tsx

@@ -0,0 +1,163 @@
+import test from 'ava';
+import React from 'react';
+import {renderWithTheme} from '../../test-utils/render-with-theme';
+import {ChatInterface} from './ChatInterface';
+import type {ChatInterfaceProps} from './ChatInterface';
+
+// Helper to create default props
+function createDefaultProps(
+	overrides: Partial<ChatInterfaceProps> = {},
+): ChatInterfaceProps {
+	return {
+		startChat: true,
+		staticComponents: [],
+		queuedComponents: [],
+		isCancelling: false,
+		isToolExecuting: false,
+		isToolConfirmationMode: false,
+		isBashExecuting: false,
+		currentBashCommand: '',
+		pendingToolCalls: [],
+		currentToolIndex: 0,
+		mcpInitialized: true,
+		client: {},
+		nonInteractivePrompt: undefined,
+		nonInteractiveLoadingMessage: null,
+		customCommands: [],
+		inputDisabled: false,
+		developmentMode: 'normal',
+		onToolConfirm: async () => {},
+		onToolCancel: () => {},
+		onSubmit: async () => {},
+		onCancel: () => {},
+		onToggleMode: () => {},
+		...overrides,
+	};
+}
+
+test('ChatInterface renders without error', t => {
+	const props = createDefaultProps();
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ChatInterface renders chat structure', t => {
+	const props = createDefaultProps();
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ChatInterface shows UserInput when ready for input', t => {
+	const props = createDefaultProps({
+		startChat: true,
+		mcpInitialized: true,
+		client: {},
+		nonInteractivePrompt: undefined,
+		isToolExecuting: false,
+		isToolConfirmationMode: false,
+		isBashExecuting: false,
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ChatInterface shows loading spinner when not initialized', t => {
+	const props = createDefaultProps({
+		startChat: true,
+		mcpInitialized: false,
+		client: null,
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Loading/);
+	unmount();
+});
+
+test('ChatInterface shows completion message in non-interactive mode when done', t => {
+	const props = createDefaultProps({
+		startChat: true,
+		nonInteractivePrompt: 'test prompt',
+		nonInteractiveLoadingMessage: null, // Signals completion
+		mcpInitialized: true,
+		client: {},
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	// Note: marginLeft={-1} in the component cuts off the first character in tests
+	t.regex(output!, /ompleted.*Exiting/);
+	unmount();
+});
+
+test('ChatInterface shows tool confirmation when in tool confirmation mode', t => {
+	const mockToolCall = {
+		id: 'test-1',
+		function: {name: 'test_tool', arguments: {}},
+	};
+
+	const props = createDefaultProps({
+		startChat: true,
+		isToolConfirmationMode: true,
+		pendingToolCalls: [mockToolCall],
+		currentToolIndex: 0,
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ChatInterface shows tool execution indicator when executing', t => {
+	const mockToolCall = {
+		id: 'test-1',
+		function: {name: 'test_tool', arguments: {}},
+	};
+
+	const props = createDefaultProps({
+		startChat: true,
+		isToolExecuting: true,
+		pendingToolCalls: [mockToolCall],
+		currentToolIndex: 0,
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ChatInterface shows bash execution indicator when executing bash', t => {
+	const props = createDefaultProps({
+		startChat: true,
+		isBashExecuting: true,
+		currentBashCommand: 'ls -la',
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ChatInterface shows cancelling indicator when cancelling', t => {
+	const props = createDefaultProps({
+		startChat: true,
+		isCancelling: true,
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInterface {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});

package/source/app/components/ChatInterface.tsx

@@ -0,0 +1,144 @@
+import BashExecutionIndicator from '@/components/bash-execution-indicator';
+import CancellingIndicator from '@/components/cancelling-indicator';
+import ChatQueue from '@/components/chat-queue';
+import ToolConfirmation from '@/components/tool-confirmation';
+import ToolExecutionIndicator from '@/components/tool-execution-indicator';
+import UserInput from '@/components/user-input';
+import { useTheme } from '@/hooks/useTheme';
+import type { DevelopmentMode, ToolCall } from '@/types';
+import { Box, Text } from 'ink';
+import RandomSpinner from '@/components/random-spinner';
+import React from 'react';
+
+export interface ChatInterfaceProps {
+	// Chat state
+	startChat: boolean;
+	staticComponents: React.ReactNode[];
+	queuedComponents: React.ReactNode[];
+
+	// Execution state
+	isCancelling: boolean;
+	isToolExecuting: boolean;
+	isToolConfirmationMode: boolean;
+	isBashExecuting: boolean;
+	currentBashCommand: string;
+
+	// Tool state
+	pendingToolCalls: ToolCall[];
+	currentToolIndex: number;
+
+	// Client state
+	mcpInitialized: boolean;
+	client: unknown | null; // LLMClient type, but kept as unknown to avoid import
+
+	// Non-interactive mode
+	nonInteractivePrompt?: string;
+	nonInteractiveLoadingMessage: string | null;
+
+	// Input state
+	customCommands: string[];
+	inputDisabled: boolean;
+	developmentMode: DevelopmentMode;
+
+	// Handlers
+	onToolConfirm: (confirmed: boolean) => void;
+	onToolCancel: () => void;
+	onSubmit: (message: string) => Promise<void>;
+	onCancel: () => void;
+	onToggleMode: () => void;
+}
+
+/**
+ * Main chat interface component that renders the chat queue and input area
+ */
+export function ChatInterface({
+	startChat,
+	staticComponents,
+	queuedComponents,
+	isCancelling,
+	isToolExecuting,
+	isToolConfirmationMode,
+	isBashExecuting,
+	currentBashCommand,
+	pendingToolCalls,
+	currentToolIndex,
+	mcpInitialized,
+	client,
+	nonInteractivePrompt,
+	nonInteractiveLoadingMessage,
+	customCommands,
+	inputDisabled,
+	developmentMode,
+	onToolConfirm,
+	onToolCancel,
+	onSubmit,
+	onCancel,
+	onToggleMode,
+}: ChatInterfaceProps): React.ReactElement {
+	const { colors } = useTheme();
+
+	const loadingLabel = nonInteractivePrompt
+		? (nonInteractiveLoadingMessage ?? 'Loading...')
+		: 'Loading...';
+
+	return (
+		<>
+			{/* Chat Queue */}
+			<Box flexGrow={1} flexDirection="column" minHeight={0}>
+				{startChat && (
+					<ChatQueue
+						staticComponents={staticComponents}
+						queuedComponents={queuedComponents}
+					/>
+				)}
+			</Box>
+
+			{/* Input Area */}
+			{startChat && (
+				<Box flexDirection="column" marginLeft={-1}>
+					{isCancelling && <CancellingIndicator />}
+
+					{/* Tool Confirmation */}
+					{isToolConfirmationMode && pendingToolCalls[currentToolIndex] ? (
+						<ToolConfirmation
+							toolCall={pendingToolCalls[currentToolIndex]}
+							onConfirm={onToolConfirm}
+							onCancel={onToolCancel}
+						/>
+					) : /* Tool Execution */
+						isToolExecuting && pendingToolCalls[currentToolIndex] ? (
+							<ToolExecutionIndicator
+								toolName={pendingToolCalls[currentToolIndex].function.name}
+								currentIndex={currentToolIndex}
+								totalTools={pendingToolCalls.length}
+							/>
+						) : /* Bash Execution */
+							isBashExecuting ? (
+								<BashExecutionIndicator command={currentBashCommand} />
+							) : /* User Input */
+								mcpInitialized && client && !nonInteractivePrompt ? (
+									<UserInput
+										customCommands={customCommands}
+										onSubmit={msg => void onSubmit(msg)}
+										disabled={inputDisabled}
+										onCancel={onCancel}
+										onToggleMode={onToggleMode}
+										developmentMode={developmentMode}
+									/>
+								) : /* Client Missing */
+									mcpInitialized && !client ? (
+										<></>
+									) : /* Non-Interactive Complete */
+										nonInteractivePrompt && !nonInteractiveLoadingMessage ? (
+											<Text color={colors.secondary}>Completed. Exiting.</Text>
+										) : (
+											/* Loading */
+											<Text color={colors.secondary}>
+												<RandomSpinner /> {loadingLabel}
+											</Text>
+										)}
+				</Box>
+			)}
+		</>
+	);
+}

package/source/app/components/ModalSelectors.spec.tsx

@@ -0,0 +1,141 @@
+import test from 'ava';
+import React from 'react';
+import {renderWithTheme} from '../../test-utils/render-with-theme';
+import {ModalSelectors} from './ModalSelectors';
+import type {ModalSelectorsProps} from './ModalSelectors';
+
+// Helper to create default props
+function createDefaultProps(
+	overrides: Partial<ModalSelectorsProps> = {},
+): ModalSelectorsProps {
+	return {
+		isModelSelectionMode: false,
+		isProviderSelectionMode: false,
+		isThemeSelectionMode: false,
+		isModelDatabaseMode: false,
+		isConfigWizardMode: false,
+		isCheckpointLoadMode: false,
+		client: null,
+		currentModel: 'test-model',
+		currentProvider: 'test-provider',
+		checkpointLoadData: null,
+		onModelSelect: async () => {},
+		onModelSelectionCancel: () => {},
+		onProviderSelect: async () => {},
+		onProviderSelectionCancel: () => {},
+		onThemeSelect: () => {},
+		onThemeSelectionCancel: () => {},
+		onModelDatabaseCancel: () => {},
+		onConfigWizardComplete: async () => {},
+		onConfigWizardCancel: () => {},
+		onCheckpointSelect: async () => {},
+		onCheckpointCancel: () => {},
+		...overrides,
+	};
+}
+
+test('ModalSelectors returns null when no mode is active', t => {
+	const props = createDefaultProps();
+	const result = ModalSelectors(props);
+	t.is(result, null);
+});
+
+test('ModalSelectors renders ModelSelector when isModelSelectionMode is true', t => {
+	const props = createDefaultProps({
+		isModelSelectionMode: true,
+		client: {}, // Mock client
+	});
+	const component = ModalSelectors(props);
+	t.truthy(component);
+
+	const {lastFrame, unmount} = renderWithTheme(<>{component}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ModalSelectors renders ProviderSelector when isProviderSelectionMode is true', t => {
+	const props = createDefaultProps({isProviderSelectionMode: true});
+	const component = ModalSelectors(props);
+	t.truthy(component);
+
+	const {lastFrame, unmount} = renderWithTheme(<>{component}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ModalSelectors renders ThemeSelector when isThemeSelectionMode is true', t => {
+	const props = createDefaultProps({isThemeSelectionMode: true});
+	const component = ModalSelectors(props);
+	t.truthy(component);
+
+	const {lastFrame, unmount} = renderWithTheme(<>{component}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ModalSelectors renders ModelDatabaseDisplay when isModelDatabaseMode is true', t => {
+	const props = createDefaultProps({isModelDatabaseMode: true});
+	const component = ModalSelectors(props);
+	t.truthy(component);
+
+	const {lastFrame, unmount} = renderWithTheme(<>{component}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ModalSelectors renders ConfigWizard when isConfigWizardMode is true', t => {
+	const props = createDefaultProps({isConfigWizardMode: true});
+	const component = ModalSelectors(props);
+	t.truthy(component);
+
+	const {lastFrame, unmount} = renderWithTheme(<>{component}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ModalSelectors renders CheckpointSelector when isCheckpointLoadMode is true and data exists', t => {
+	const props = createDefaultProps({
+		isCheckpointLoadMode: true,
+		checkpointLoadData: {
+			checkpoints: [],
+			currentMessageCount: 0,
+		},
+	});
+	const component = ModalSelectors(props);
+	t.truthy(component);
+
+	const {lastFrame, unmount} = renderWithTheme(<>{component}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});
+
+test('ModalSelectors returns null when isCheckpointLoadMode is true but data is null', t => {
+	const props = createDefaultProps({
+		isCheckpointLoadMode: true,
+		checkpointLoadData: null,
+	});
+	const result = ModalSelectors(props);
+	t.is(result, null);
+});
+
+test('ModalSelectors prioritizes first active mode when multiple are true', t => {
+	const props = createDefaultProps({
+		isModelSelectionMode: true,
+		isProviderSelectionMode: true,
+		isThemeSelectionMode: true,
+		client: {}, // Mock client for ModelSelector
+	});
+	const component = ModalSelectors(props);
+	t.truthy(component);
+
+	const {lastFrame, unmount} = renderWithTheme(<>{component}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	unmount();
+});

package/source/app/components/ModalSelectors.tsx

@@ -0,0 +1,135 @@
+import {ModelDatabaseDisplay} from '@/commands/model-database';
+import CheckpointSelector from '@/components/checkpoint-selector';
+import ModelSelector from '@/components/model-selector';
+import ProviderSelector from '@/components/provider-selector';
+import ThemeSelector from '@/components/theme-selector';
+import type {CheckpointListItem, LLMClient} from '@/types';
+import {ConfigWizard} from '@/wizard/config-wizard';
+import React from 'react';
+
+export interface ModalSelectorsProps {
+	// State flags
+	isModelSelectionMode: boolean;
+	isProviderSelectionMode: boolean;
+	isThemeSelectionMode: boolean;
+	isModelDatabaseMode: boolean;
+	isConfigWizardMode: boolean;
+	isCheckpointLoadMode: boolean;
+
+	// Current values
+	client: LLMClient | null;
+	currentModel: string;
+	currentProvider: string;
+	checkpointLoadData: {
+		checkpoints: CheckpointListItem[];
+		currentMessageCount: number;
+	} | null;
+
+	// Handlers - Model Selection
+	onModelSelect: (model: string) => Promise<void>;
+	onModelSelectionCancel: () => void;
+
+	// Handlers - Provider Selection
+	onProviderSelect: (provider: string) => Promise<void>;
+	onProviderSelectionCancel: () => void;
+
+	// Handlers - Theme Selection
+	onThemeSelect: (theme: import('@/types/ui').ThemePreset) => void;
+	onThemeSelectionCancel: () => void;
+
+	// Handlers - Model Database
+	onModelDatabaseCancel: () => void;
+
+	// Handlers - Config Wizard
+	onConfigWizardComplete: (configPath: string) => Promise<void>;
+	onConfigWizardCancel: () => void;
+
+	// Handlers - Checkpoint
+	onCheckpointSelect: (name: string, backup: boolean) => Promise<void>;
+	onCheckpointCancel: () => void;
+}
+
+/**
+ * Renders the appropriate modal selector based on current application mode
+ * Returns null if no modal is active
+ */
+export function ModalSelectors({
+	isModelSelectionMode,
+	isProviderSelectionMode,
+	isThemeSelectionMode,
+	isModelDatabaseMode,
+	isConfigWizardMode,
+	isCheckpointLoadMode,
+	client,
+	currentModel,
+	currentProvider,
+	checkpointLoadData,
+	onModelSelect,
+	onModelSelectionCancel,
+	onProviderSelect,
+	onProviderSelectionCancel,
+	onThemeSelect,
+	onThemeSelectionCancel,
+	onModelDatabaseCancel,
+	onConfigWizardComplete,
+	onConfigWizardCancel,
+	onCheckpointSelect,
+	onCheckpointCancel,
+}: ModalSelectorsProps): React.ReactElement | null {
+	if (isModelSelectionMode) {
+		return (
+			<ModelSelector
+				client={client}
+				currentModel={currentModel}
+				onModelSelect={model => void onModelSelect(model)}
+				onCancel={onModelSelectionCancel}
+			/>
+		);
+	}
+
+	if (isProviderSelectionMode) {
+		return (
+			<ProviderSelector
+				currentProvider={currentProvider}
+				onProviderSelect={provider => void onProviderSelect(provider)}
+				onCancel={onProviderSelectionCancel}
+			/>
+		);
+	}
+
+	if (isThemeSelectionMode) {
+		return (
+			<ThemeSelector
+				onThemeSelect={onThemeSelect}
+				onCancel={onThemeSelectionCancel}
+			/>
+		);
+	}
+
+	if (isModelDatabaseMode) {
+		return <ModelDatabaseDisplay onCancel={onModelDatabaseCancel} />;
+	}
+
+	if (isConfigWizardMode) {
+		return (
+			<ConfigWizard
+				projectDir={process.cwd()}
+				onComplete={configPath => void onConfigWizardComplete(configPath)}
+				onCancel={onConfigWizardCancel}
+			/>
+		);
+	}
+
+	if (isCheckpointLoadMode && checkpointLoadData) {
+		return (
+			<CheckpointSelector
+				checkpoints={checkpointLoadData.checkpoints}
+				currentMessageCount={checkpointLoadData.currentMessageCount}
+				onSelect={(name, backup) => void onCheckpointSelect(name, backup)}
+				onCancel={onCheckpointCancel}
+			/>
+		);
+	}
+
+	return null;
+}

package/source/app/helpers.spec.ts

@@ -0,0 +1,97 @@
+import test from 'ava';
+import {isNonInteractiveModeComplete, shouldRenderWelcome} from './helpers';
+import type {NonInteractiveModeState} from './types';
+
+test('shouldRenderWelcome returns true when not in non-interactive mode', t => {
+	t.true(shouldRenderWelcome(false));
+	t.true(shouldRenderWelcome(undefined));
+});
+
+test('shouldRenderWelcome returns false when in non-interactive mode', t => {
+	t.false(shouldRenderWelcome(true));
+});
+
+test('isNonInteractiveModeComplete returns timeout when time exceeded', t => {
+	const state: NonInteractiveModeState = {
+		isToolExecuting: false,
+		isBashExecuting: false,
+		isToolConfirmationMode: false,
+		isConversationComplete: false,
+		messages: [],
+	};
+
+	const startTime = Date.now() - 11000; // 11 seconds ago
+	const maxTime = 10000; // 10 second timeout
+
+	const result = isNonInteractiveModeComplete(state, startTime, maxTime);
+	t.true(result.shouldExit);
+	t.is(result.reason, 'timeout');
+});
+
+test('isNonInteractiveModeComplete returns tool-approval when tool approval required', t => {
+	const state: NonInteractiveModeState = {
+		isToolExecuting: false,
+		isBashExecuting: false,
+		isToolConfirmationMode: false,
+		isConversationComplete: false,
+		messages: [{role: 'assistant', content: 'Tool approval required'}],
+	};
+
+	const startTime = Date.now();
+	const maxTime = 10000;
+
+	const result = isNonInteractiveModeComplete(state, startTime, maxTime);
+	t.true(result.shouldExit);
+	t.is(result.reason, 'tool-approval');
+});
+
+test('isNonInteractiveModeComplete returns error when error messages present', t => {
+	const state: NonInteractiveModeState = {
+		isToolExecuting: false,
+		isBashExecuting: false,
+		isToolConfirmationMode: false,
+		isConversationComplete: false,
+		messages: [{role: 'error', content: 'Something went wrong'}],
+	};
+
+	const startTime = Date.now();
+	const maxTime = 10000;
+
+	const result = isNonInteractiveModeComplete(state, startTime, maxTime);
+	t.true(result.shouldExit);
+	t.is(result.reason, 'error');
+});
+
+test('isNonInteractiveModeComplete returns complete when conversation finished', t => {
+	const state: NonInteractiveModeState = {
+		isToolExecuting: false,
+		isBashExecuting: false,
+		isToolConfirmationMode: false,
+		isConversationComplete: true,
+		messages: [{role: 'assistant', content: 'Done'}],
+	};
+
+	const startTime = Date.now();
+	const maxTime = 10000;
+
+	const result = isNonInteractiveModeComplete(state, startTime, maxTime);
+	t.true(result.shouldExit);
+	t.is(result.reason, 'complete');
+});
+
+test('isNonInteractiveModeComplete returns false when still processing', t => {
+	const state: NonInteractiveModeState = {
+		isToolExecuting: true,
+		isBashExecuting: false,
+		isToolConfirmationMode: false,
+		isConversationComplete: false,
+		messages: [],
+	};
+
+	const startTime = Date.now();
+	const maxTime = 10000;
+
+	const result = isNonInteractiveModeComplete(state, startTime, maxTime);
+	t.false(result.shouldExit);
+	t.is(result.reason, null);
+});