@gguf/coder 0.2.9 → 0.3.1

package/source/app/App.tsx

@@ -0,0 +1,480 @@
+import { createStaticComponents } from '@/app/components/AppContainer';
+import { ChatInterface } from '@/app/components/ChatInterface';
+import { ModalSelectors } from '@/app/components/ModalSelectors';
+import { shouldRenderWelcome } from '@/app/helpers';
+import type { AppProps } from '@/app/types';
+import SecurityDisclaimer from '@/components/security-disclaimer';
+
+import WelcomeMessage from '@/components/welcome-message';
+import { getThemeColors } from '@/config/themes';
+import { setCurrentMode as setCurrentModeContext } from '@/context/mode-context';
+import { useChatHandler } from '@/hooks/chat-handler';
+import { useAppHandlers } from '@/hooks/useAppHandlers';
+import { useAppInitialization } from '@/hooks/useAppInitialization';
+import { useAppState } from '@/hooks/useAppState';
+import { useDirectoryTrust } from '@/hooks/useDirectoryTrust';
+import { useModeHandlers } from '@/hooks/useModeHandlers';
+import { useNonInteractiveMode } from '@/hooks/useNonInteractiveMode';
+import { ThemeContext } from '@/hooks/useTheme';
+import { useToolHandler } from '@/hooks/useToolHandler';
+import { UIStateProvider } from '@/hooks/useUIState';
+
+import {
+	generateCorrelationId,
+	withNewCorrelationContext,
+} from '@/utils/logging';
+import { createPinoLogger } from '@/utils/logging/pino-logger';
+import { setGlobalMessageQueue } from '@/utils/message-queue';
+import { Box, Text, useApp } from 'ink';
+import RandomSpinner from '@/components/random-spinner';
+import React, { useEffect, useMemo } from 'react';
+
+export default function App({
+
+	nonInteractivePrompt,
+	nonInteractiveMode = false,
+	loggingConfig = {},
+}: AppProps) {
+	// Memoize the logger to prevent recreation on every render
+	const logger = useMemo(
+		() => createPinoLogger(undefined, loggingConfig),
+		[loggingConfig],
+	);
+
+	// Log application startup with key configuration
+	React.useEffect(() => {
+		logger.info('Coder application starting', {
+
+			nodeEnv: process.env.NODE_ENV || 'development',
+			platform: process.platform,
+			pid: process.pid,
+		});
+	}, [logger]);
+
+	// Use extracted hooks
+	const appState = useAppState();
+	const { exit } = useApp();
+	const { isTrusted, handleConfirmTrust, isTrustLoading, isTrustedError } =
+		useDirectoryTrust();
+
+	// Sync global mode context whenever development mode changes
+	React.useEffect(() => {
+		setCurrentModeContext(appState.developmentMode);
+
+		logger.info('Development mode changed', {
+			newMode: appState.developmentMode,
+			previousMode: undefined,
+		});
+	}, [appState.developmentMode, logger]);
+
+
+
+	const handleExit = () => {
+		exit();
+	};
+
+
+
+	// Create theme context value
+	const themeContextValue = {
+		currentTheme: appState.currentTheme,
+		colors: getThemeColors(appState.currentTheme),
+		setCurrentTheme: appState.setCurrentTheme,
+	};
+
+	// Initialize global message queue on component mount
+	React.useEffect(() => {
+		setGlobalMessageQueue(appState.addToChatQueue);
+
+		logger.debug('Global message queue initialized', {
+			chatQueueFunction: 'addToChatQueue',
+		});
+	}, [appState.addToChatQueue, logger]);
+
+	// Log important application state changes
+	React.useEffect(() => {
+		if (appState.client) {
+			logger.info('AI client initialized', {
+				provider: appState.currentProvider,
+				model: appState.currentModel,
+				hasToolManager: !!appState.toolManager,
+			});
+		}
+	}, [
+		appState.client,
+		appState.currentProvider,
+		appState.currentModel,
+		appState.toolManager,
+		logger,
+	]);
+
+	React.useEffect(() => {
+		if (appState.mcpInitialized) {
+			logger.info('MCP servers initialized', {
+				serverCount: appState.mcpServersStatus?.length || 0,
+				status: 'connected',
+			});
+		}
+	}, [appState.mcpInitialized, appState.mcpServersStatus, logger]);
+
+	React.useEffect(() => {
+		if (appState.updateInfo) {
+			logger.info('Update information available', {
+				hasUpdate: appState.updateInfo.hasUpdate,
+				currentVersion: appState.updateInfo.currentVersion,
+				latestVersion: appState.updateInfo.latestVersion,
+			});
+		}
+	}, [appState.updateInfo, logger]);
+
+	// Setup chat handler
+	const chatHandler = useChatHandler({
+		client: appState.client,
+		toolManager: appState.toolManager,
+		messages: appState.messages,
+		setMessages: appState.updateMessages,
+		currentProvider: appState.currentProvider,
+		currentModel: appState.currentModel,
+		setIsCancelling: appState.setIsCancelling,
+		addToChatQueue: appState.addToChatQueue,
+		componentKeyCounter: appState.componentKeyCounter,
+		abortController: appState.abortController,
+		setAbortController: appState.setAbortController,
+		developmentMode: appState.developmentMode,
+		nonInteractiveMode,
+		onStartToolConfirmationFlow: (
+			toolCalls,
+			messagesBeforeToolExecution,
+			assistantMsg,
+			systemMessage,
+		) => {
+			appState.setPendingToolCalls(toolCalls);
+			appState.setCurrentToolIndex(0);
+			appState.setCompletedToolResults([]);
+			appState.setCurrentConversationContext({
+				messagesBeforeToolExecution,
+				assistantMsg,
+				systemMessage,
+			});
+			appState.setIsToolConfirmationMode(true);
+		},
+		onConversationComplete: () => {
+			appState.setIsConversationComplete(true);
+		},
+	});
+
+	// Setup tool handler
+	const toolHandler = useToolHandler({
+		pendingToolCalls: appState.pendingToolCalls,
+		currentToolIndex: appState.currentToolIndex,
+		completedToolResults: appState.completedToolResults,
+		currentConversationContext: appState.currentConversationContext,
+		setPendingToolCalls: appState.setPendingToolCalls,
+		setCurrentToolIndex: appState.setCurrentToolIndex,
+		setCompletedToolResults: appState.setCompletedToolResults,
+		setCurrentConversationContext: appState.setCurrentConversationContext,
+		setIsToolConfirmationMode: appState.setIsToolConfirmationMode,
+		setIsToolExecuting: appState.setIsToolExecuting,
+		setMessages: appState.updateMessages,
+		addToChatQueue: appState.addToChatQueue,
+		componentKeyCounter: appState.componentKeyCounter,
+		resetToolConfirmationState: appState.resetToolConfirmationState,
+		onProcessAssistantResponse: chatHandler.processAssistantResponse,
+		client: appState.client,
+		currentProvider: appState.currentProvider,
+		setDevelopmentMode: appState.setDevelopmentMode,
+	});
+
+	// Log when application is fully ready
+	useEffect(() => {
+		if (
+			appState.mcpInitialized &&
+			appState.client &&
+			!appState.isToolExecuting &&
+			!appState.isToolConfirmationMode &&
+			!appState.isConfigWizardMode &&
+			appState.pendingToolCalls.length === 0
+		) {
+			const correlationId = generateCorrelationId();
+
+			withNewCorrelationContext(() => {
+				logger.info('Application interface ready for user interaction', {
+					correlationId,
+					interfaceState: {
+						developmentMode: appState.developmentMode,
+						hasPendingToolCalls: appState.pendingToolCalls.length > 0,
+						clientInitialized: !!appState.client,
+						mcpServersConnected: appState.mcpInitialized,
+						inputDisabled:
+							chatHandler.isGenerating ||
+							appState.isToolExecuting ||
+							appState.isBashExecuting,
+					},
+				});
+			}, correlationId);
+		}
+	}, [
+		appState.mcpInitialized,
+		appState.client,
+		appState.isToolExecuting,
+		appState.isToolConfirmationMode,
+		appState.isConfigWizardMode,
+		appState.pendingToolCalls.length,
+		logger,
+		appState.developmentMode,
+		chatHandler.isGenerating,
+		appState.isBashExecuting,
+	]);
+
+	// Setup initialization
+	const appInitialization = useAppInitialization({
+		setClient: appState.setClient,
+		setCurrentModel: appState.setCurrentModel,
+		setCurrentProvider: appState.setCurrentProvider,
+		setToolManager: appState.setToolManager,
+		setCustomCommandLoader: appState.setCustomCommandLoader,
+		setCustomCommandExecutor: appState.setCustomCommandExecutor,
+		setCustomCommandCache: appState.setCustomCommandCache,
+		setStartChat: appState.setStartChat,
+		setMcpInitialized: appState.setMcpInitialized,
+		setUpdateInfo: appState.setUpdateInfo,
+		setMcpServersStatus: appState.setMcpServersStatus,
+		setLspServersStatus: appState.setLspServersStatus,
+		setPreferencesLoaded: appState.setPreferencesLoaded,
+		setCustomCommandsCount: appState.setCustomCommandsCount,
+		addToChatQueue: appState.addToChatQueue,
+		componentKeyCounter: appState.componentKeyCounter,
+		customCommandCache: appState.customCommandCache,
+		setIsConfigWizardMode: appState.setIsConfigWizardMode,
+	});
+
+	// Setup mode handlers
+	const modeHandlers = useModeHandlers({
+		client: appState.client,
+		currentModel: appState.currentModel,
+		currentProvider: appState.currentProvider,
+		currentTheme: appState.currentTheme,
+		setClient: appState.setClient,
+		setCurrentModel: appState.setCurrentModel,
+		setCurrentProvider: appState.setCurrentProvider,
+		setCurrentTheme: appState.setCurrentTheme,
+		setMessages: appState.updateMessages,
+		setIsModelSelectionMode: appState.setIsModelSelectionMode,
+		setIsProviderSelectionMode: appState.setIsProviderSelectionMode,
+		setIsThemeSelectionMode: appState.setIsThemeSelectionMode,
+		setIsModelDatabaseMode: appState.setIsModelDatabaseMode,
+		setIsConfigWizardMode: appState.setIsConfigWizardMode,
+		addToChatQueue: appState.addToChatQueue,
+		componentKeyCounter: appState.componentKeyCounter,
+		reinitializeMCPServers: appInitialization.reinitializeMCPServers,
+	});
+
+	// Setup app handlers
+	const appHandlers = useAppHandlers({
+		messages: appState.messages,
+		currentProvider: appState.currentProvider,
+		currentModel: appState.currentModel,
+		currentTheme: appState.currentTheme,
+		abortController: appState.abortController,
+		updateInfo: appState.updateInfo,
+		mcpServersStatus: appState.mcpServersStatus,
+		lspServersStatus: appState.lspServersStatus,
+		preferencesLoaded: appState.preferencesLoaded,
+		customCommandsCount: appState.customCommandsCount,
+		componentKeyCounter: appState.componentKeyCounter,
+		customCommandCache: appState.customCommandCache,
+		customCommandLoader: appState.customCommandLoader,
+		customCommandExecutor: appState.customCommandExecutor,
+		updateMessages: appState.updateMessages,
+		setIsCancelling: appState.setIsCancelling,
+		setDevelopmentMode: appState.setDevelopmentMode,
+		setIsConversationComplete: appState.setIsConversationComplete,
+		setIsBashExecuting: appState.setIsBashExecuting,
+		setCurrentBashCommand: appState.setCurrentBashCommand,
+		setIsCheckpointLoadMode: appState.setIsCheckpointLoadMode,
+		setCheckpointLoadData: appState.setCheckpointLoadData,
+		addToChatQueue: appState.addToChatQueue,
+		client: appState.client,
+		getMessageTokens: appState.getMessageTokens,
+		enterModelSelectionMode: modeHandlers.enterModelSelectionMode,
+		enterProviderSelectionMode: modeHandlers.enterProviderSelectionMode,
+		enterThemeSelectionMode: modeHandlers.enterThemeSelectionMode,
+		enterModelDatabaseMode: modeHandlers.enterModelDatabaseMode,
+		enterConfigWizardMode: modeHandlers.enterConfigWizardMode,
+		handleChatMessage: chatHandler.handleChatMessage,
+	});
+
+	// Setup non-interactive mode
+	const { nonInteractiveLoadingMessage } = useNonInteractiveMode({
+		nonInteractivePrompt,
+		nonInteractiveMode,
+		mcpInitialized: appState.mcpInitialized,
+		client: appState.client,
+		appState: {
+			isToolExecuting: appState.isToolExecuting,
+			isBashExecuting: appState.isBashExecuting,
+			isToolConfirmationMode: appState.isToolConfirmationMode,
+			isConversationComplete: appState.isConversationComplete,
+			messages: appState.messages,
+		},
+		setDevelopmentMode: appState.setDevelopmentMode,
+		handleMessageSubmit: appHandlers.handleMessageSubmit,
+	});
+
+	const shouldShowWelcome = shouldRenderWelcome(nonInteractiveMode);
+
+	// Memoize static components
+	const staticComponents = React.useMemo(
+		() =>
+			createStaticComponents({
+				shouldShowWelcome,
+				currentProvider: appState.currentProvider,
+				currentModel: appState.currentModel,
+				currentTheme: appState.currentTheme,
+				updateInfo: appState.updateInfo,
+				mcpServersStatus: appState.mcpServersStatus,
+				lspServersStatus: appState.lspServersStatus,
+				preferencesLoaded: appState.preferencesLoaded,
+				customCommandsCount: appState.customCommandsCount,
+			}),
+		[
+			shouldShowWelcome,
+			appState.currentProvider,
+			appState.currentModel,
+			appState.currentTheme,
+			appState.updateInfo,
+			appState.mcpServersStatus,
+			appState.lspServersStatus,
+			appState.preferencesLoaded,
+			appState.customCommandsCount,
+		],
+	);
+
+	// Handle loading state for directory trust check
+	if (isTrustLoading) {
+		logger.debug('Directory trust check in progress');
+
+		return (
+			<Box flexDirection="column" padding={1}>
+				<Text color={themeContextValue.colors.secondary}>
+					<RandomSpinner /> Checking directory trust...
+				</Text>
+			</Box>
+		);
+	}
+
+	// Handle error state for directory trust
+	if (isTrustedError) {
+		logger.error('Directory trust check failed', {
+			error: isTrustedError,
+			suggestion: 'restart_application_or_check_permissions',
+		});
+
+		return (
+			<Box flexDirection="column" padding={1}>
+				<Text color={themeContextValue.colors.error}>
+					⚠️ Error checking directory trust: {isTrustedError}
+				</Text>
+				<Text color={themeContextValue.colors.secondary}>
+					Please restart the application or check your permissions.
+				</Text>
+			</Box>
+		);
+	}
+
+	// Show security disclaimer if directory is not trusted
+	if (!isTrusted) {
+		logger.info('Directory not trusted, showing security disclaimer');
+
+		return (
+			<SecurityDisclaimer onConfirm={handleConfirmTrust} onExit={handleExit} />
+		);
+	}
+
+	// Directory is trusted - application can proceed
+	logger.debug('Directory trusted, proceeding with application initialization');
+
+
+
+	// Main application render
+	return (
+		<ThemeContext.Provider value={themeContextValue}>
+			<UIStateProvider>
+				<Box flexDirection="column" padding={1} width="100%">
+					{/* Modal Selectors */}
+					{(appState.isModelSelectionMode ||
+						appState.isProviderSelectionMode ||
+						appState.isThemeSelectionMode ||
+						appState.isModelDatabaseMode ||
+						appState.isConfigWizardMode ||
+						appState.isCheckpointLoadMode) && (
+							<ModalSelectors
+								isModelSelectionMode={appState.isModelSelectionMode}
+								isProviderSelectionMode={appState.isProviderSelectionMode}
+								isThemeSelectionMode={appState.isThemeSelectionMode}
+								isModelDatabaseMode={appState.isModelDatabaseMode}
+								isConfigWizardMode={appState.isConfigWizardMode}
+								isCheckpointLoadMode={appState.isCheckpointLoadMode}
+								client={appState.client}
+								currentModel={appState.currentModel}
+								currentProvider={appState.currentProvider}
+								checkpointLoadData={appState.checkpointLoadData}
+								onModelSelect={modeHandlers.handleModelSelect}
+								onModelSelectionCancel={modeHandlers.handleModelSelectionCancel}
+								onProviderSelect={modeHandlers.handleProviderSelect}
+								onProviderSelectionCancel={
+									modeHandlers.handleProviderSelectionCancel
+								}
+								onThemeSelect={modeHandlers.handleThemeSelect}
+								onThemeSelectionCancel={modeHandlers.handleThemeSelectionCancel}
+								onModelDatabaseCancel={modeHandlers.handleModelDatabaseCancel}
+								onConfigWizardComplete={modeHandlers.handleConfigWizardComplete}
+								onConfigWizardCancel={modeHandlers.handleConfigWizardCancel}
+								onCheckpointSelect={appHandlers.handleCheckpointSelect}
+								onCheckpointCancel={appHandlers.handleCheckpointCancel}
+							/>
+						)}
+
+					{/* Chat Interface */}
+					{!(
+						appState.isModelSelectionMode ||
+						appState.isProviderSelectionMode ||
+						appState.isThemeSelectionMode ||
+						appState.isModelDatabaseMode ||
+						appState.isConfigWizardMode ||
+						appState.isCheckpointLoadMode
+					) && (
+							<ChatInterface
+								startChat={appState.startChat}
+								staticComponents={staticComponents}
+								queuedComponents={appState.chatComponents}
+								isCancelling={appState.isCancelling}
+								isToolExecuting={appState.isToolExecuting}
+								isToolConfirmationMode={appState.isToolConfirmationMode}
+								isBashExecuting={appState.isBashExecuting}
+								currentBashCommand={appState.currentBashCommand}
+								pendingToolCalls={appState.pendingToolCalls}
+								currentToolIndex={appState.currentToolIndex}
+								mcpInitialized={appState.mcpInitialized}
+								client={appState.client}
+								nonInteractivePrompt={nonInteractivePrompt}
+								nonInteractiveLoadingMessage={nonInteractiveLoadingMessage}
+								customCommands={Array.from(appState.customCommandCache.keys())}
+								inputDisabled={
+									chatHandler.isGenerating ||
+									appState.isToolExecuting ||
+									appState.isBashExecuting
+								}
+								developmentMode={appState.developmentMode}
+								onToolConfirm={toolHandler.handleToolConfirmation}
+								onToolCancel={toolHandler.handleToolConfirmationCancel}
+								onSubmit={appHandlers.handleMessageSubmit}
+								onCancel={appHandlers.handleCancel}
+								onToggleMode={appHandlers.handleToggleDevelopmentMode}
+							/>
+						)}
+				</Box>
+			</UIStateProvider>
+		</ThemeContext.Provider>
+	);
+}

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

@@ -0,0 +1,96 @@
+import test from 'ava';
+import React from 'react';
+import {renderWithTheme} from '../../test-utils/render-with-theme';
+import {createStaticComponents} from './AppContainer';
+import type {AppContainerProps} from './AppContainer';
+
+test('createStaticComponents includes welcome message when shouldShowWelcome is true', t => {
+	const props: AppContainerProps = {
+		shouldShowWelcome: true,
+		currentProvider: 'test-provider',
+		currentModel: 'test-model',
+		currentTheme: 'tokyo-night',
+		updateInfo: null,
+		mcpServersStatus: undefined,
+		lspServersStatus: [],
+		preferencesLoaded: true,
+		customCommandsCount: 0,
+	};
+
+	const components = createStaticComponents(props);
+	t.is(components.length, 2); // Welcome + Status
+	t.is((components[0] as React.ReactElement).key, 'welcome');
+	t.is((components[1] as React.ReactElement).key, 'status');
+
+	// Render and verify the components display correctly
+	const {lastFrame, unmount} = renderWithTheme(<>{components}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Coder/); // Welcome message should contain "Coder"
+	unmount();
+});
+
+test('createStaticComponents excludes welcome message when shouldShowWelcome is false', t => {
+	const props: AppContainerProps = {
+		shouldShowWelcome: false,
+		currentProvider: 'test-provider',
+		currentModel: 'test-model',
+		currentTheme: 'tokyo-night',
+		updateInfo: null,
+		mcpServersStatus: undefined,
+		lspServersStatus: [],
+		preferencesLoaded: true,
+		customCommandsCount: 0,
+	};
+
+	const components = createStaticComponents(props);
+	t.is(components.length, 1); // Only Status
+	t.is((components[0] as React.ReactElement).key, 'status');
+
+	// Render and verify the components display correctly
+	const {lastFrame, unmount} = renderWithTheme(<>{components}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /test-provider/); // Should show provider name
+	t.regex(output!, /test-model/); // Should show model name
+	unmount();
+});
+
+test('createStaticComponents always includes status component', t => {
+	const props: AppContainerProps = {
+		shouldShowWelcome: false,
+		currentProvider: 'local',
+		currentModel: 'gpt-4',
+		currentTheme: 'dracula',
+		updateInfo: {hasUpdate: true, currentVersion: '1.0.0', latestVersion: '1.1.0'},
+		mcpServersStatus: [],
+		lspServersStatus: [],
+		preferencesLoaded: true,
+		customCommandsCount: 5,
+	};
+
+	const components = createStaticComponents(props);
+	const statusComponent = components.find(
+		c => (c as React.ReactElement).key === 'status',
+	) as React.ReactElement<{
+		provider: string;
+		model: string;
+		theme: string;
+		customCommandsCount: number;
+	}>;
+
+	t.truthy(statusComponent);
+	t.is(statusComponent.props.provider, 'local');
+	t.is(statusComponent.props.model, 'gpt-4');
+	t.is(statusComponent.props.theme, 'dracula');
+	t.is(statusComponent.props.customCommandsCount, 5);
+
+	// Render and verify the components display correctly
+	const {lastFrame, unmount} = renderWithTheme(<>{components}</>);
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /local/); // Provider name
+	t.regex(output!, /gpt-4/); // Model name
+	t.regex(output!, /5.*commands?/i); // Custom commands count
+	unmount();
+});

package/source/app/components/AppContainer.tsx

@@ -0,0 +1,56 @@
+import Status from '@/components/status';
+import WelcomeMessage from '@/components/welcome-message';
+import type {LSPConnectionStatus, MCPConnectionStatus} from '@/types/core';
+import type {ThemePreset} from '@/types/ui';
+import type {UpdateInfo} from '@/types/utils';
+import React from 'react';
+
+export interface AppContainerProps {
+	shouldShowWelcome: boolean;
+	currentProvider: string;
+	currentModel: string;
+	currentTheme: ThemePreset;
+	updateInfo: UpdateInfo | null;
+	mcpServersStatus: MCPConnectionStatus[] | undefined;
+	lspServersStatus: LSPConnectionStatus[];
+	preferencesLoaded: boolean;
+	customCommandsCount: number;
+}
+
+/**
+ * Creates static components for the app container (welcome message + status)
+ * These are memoized to prevent unnecessary re-renders
+ */
+export function createStaticComponents({
+	shouldShowWelcome,
+	currentProvider,
+	currentModel,
+	currentTheme,
+	updateInfo,
+	mcpServersStatus,
+	lspServersStatus,
+	preferencesLoaded,
+	customCommandsCount,
+}: AppContainerProps): React.ReactNode[] {
+	const components: React.ReactNode[] = [];
+
+	if (shouldShowWelcome) {
+		components.push(<WelcomeMessage key="welcome" />);
+	}
+
+	components.push(
+		<Status
+			key="status"
+			provider={currentProvider}
+			model={currentModel}
+			theme={currentTheme}
+			updateInfo={updateInfo}
+			mcpServersStatus={mcpServersStatus}
+			lspServersStatus={lspServersStatus}
+			preferencesLoaded={preferencesLoaded}
+			customCommandsCount={customCommandsCount}
+		/>,
+	);
+
+	return components;
+}