@gguf/coder 0.2.9 → 0.3.1

package/source/components/tool-confirmation.tsx

@@ -0,0 +1,190 @@
+import {useTerminalWidth} from '@/hooks/useTerminalWidth';
+import {useTheme} from '@/hooks/useTheme';
+import {getToolManager} from '@/message-handler';
+import {toolFormatters} from '@/tools/index';
+import type {ToolCall} from '@/types/core';
+import {formatError} from '@/utils/error-formatter';
+import {getLogger} from '@/utils/logging';
+import {parseToolArguments} from '@/utils/tool-args-parser';
+import {Box, Text, useInput} from 'ink';
+import SelectInput from 'ink-select-input';
+import React from 'react';
+
+interface ToolConfirmationProps {
+	toolCall: ToolCall;
+	onConfirm: (confirmed: boolean) => void;
+	onCancel: () => void;
+}
+
+interface ConfirmationOption {
+	label: string;
+	value: boolean;
+}
+
+export default function ToolConfirmation({
+	toolCall,
+	onConfirm,
+	onCancel,
+}: ToolConfirmationProps) {
+	const boxWidth = useTerminalWidth();
+	const {colors} = useTheme();
+	const [formatterPreview, setFormatterPreview] = React.useState<
+		React.ReactElement | string | null
+	>(null);
+	const [isLoadingPreview, setIsLoadingPreview] = React.useState(false);
+	const [hasFormatterError, setHasFormatterError] = React.useState(false);
+	const [hasValidationError, setHasValidationError] = React.useState(false);
+	const [_validationError, setValidationError] = React.useState<string | null>(
+		null,
+	);
+
+	// Get MCP tool info for display
+	const toolManager = getToolManager();
+	const mcpInfo = toolManager?.getMCPToolInfo(toolCall.function.name) || {
+		isMCPTool: false,
+	};
+
+	// Load formatter preview
+	React.useEffect(() => {
+		const loadPreview = async () => {
+			// Run validator first if available
+			if (toolManager) {
+				const validator = toolManager.getToolValidator(toolCall.function.name);
+				if (validator) {
+					try {
+						// Parse arguments if they're a JSON string
+						const parsedArgs = parseToolArguments(toolCall.function.arguments);
+
+						const validationResult = await validator(parsedArgs);
+						if (!validationResult.valid) {
+							setValidationError(validationResult.error);
+							setHasValidationError(true);
+							setFormatterPreview(
+								<Text color={colors.error}>{validationResult.error}</Text>,
+							);
+							return;
+						}
+					} catch (error) {
+						const logger = getLogger();
+						logger.error(
+							{error: formatError(error)},
+							'Error running validator',
+						);
+						const errorMsg = `Validation error: ${formatError(error)}`;
+						setValidationError(errorMsg);
+						setHasValidationError(true);
+						setFormatterPreview(<Text color={colors.error}>{errorMsg}</Text>);
+						return;
+					}
+				}
+			}
+
+			const formatter = toolFormatters[toolCall.function.name];
+			if (formatter) {
+				setIsLoadingPreview(true);
+				try {
+					// Parse arguments if they're a JSON string
+					const parsedArgs = parseToolArguments(toolCall.function.arguments);
+					const preview = await formatter(parsedArgs);
+					setFormatterPreview(preview);
+				} catch (error) {
+					const logger = getLogger();
+					logger.error(
+						{error: formatError(error)},
+						'Error loading formatter preview',
+					);
+					setHasFormatterError(true);
+					setFormatterPreview(
+						<Text color={colors.error}>Error: {String(error)}</Text>,
+					);
+				} finally {
+					setIsLoadingPreview(false);
+				}
+			}
+		};
+
+		void loadPreview();
+	}, [toolCall, toolManager, colors.error]);
+
+	// Handle escape key to cancel
+	useInput((_inputChar, key) => {
+		if (key.escape) {
+			onCancel();
+		}
+	});
+
+	// Auto-cancel if there's a formatter error (not validation error)
+	React.useEffect(() => {
+		if (hasFormatterError && !hasValidationError) {
+			// Automatically cancel the tool execution only for formatter crashes
+			onConfirm(false);
+		}
+	}, [hasFormatterError, hasValidationError, onConfirm]);
+
+	const options: ConfirmationOption[] = [
+		{label: '✓ Yes, execute this tool', value: true},
+		{label: '✗ No, cancel execution', value: false},
+	];
+
+	const handleSelect = (item: ConfirmationOption) => {
+		onConfirm(item.value);
+	};
+
+	return (
+		<Box width={boxWidth} marginBottom={1}>
+			<Box flexDirection="column">
+				{/* Formatter preview */}
+				{isLoadingPreview && (
+					<Box marginBottom={1}>
+						<Text color={colors.secondary}>Loading preview...</Text>
+					</Box>
+				)}
+
+				{formatterPreview && !isLoadingPreview && (
+					<Box marginBottom={1} flexDirection="column">
+						<Box>
+							{React.isValidElement(formatterPreview) ? (
+								formatterPreview
+							) : (
+								<Text color={colors.white}>{String(formatterPreview)}</Text>
+							)}
+						</Box>
+					</Box>
+				)}
+
+				{/* Only show approval prompt if there's no formatter crash */}
+				{!(hasFormatterError && !hasValidationError) && (
+					<>
+						<Box marginBottom={1}>
+							<Text color={colors.tool}>
+								{hasValidationError
+									? 'Validation failed. Do you still want to execute this tool?'
+									: `Do you want to execute ${
+											mcpInfo.isMCPTool
+												? `MCP tool "${toolCall.function.name}" from server "${mcpInfo.serverName}"`
+												: `tool "${toolCall.function.name}"`
+										}?`}
+							</Text>
+						</Box>
+
+						<SelectInput items={options} onSelect={handleSelect} />
+
+						<Box marginTop={1}>
+							<Text color={colors.secondary}>Press Escape to cancel</Text>
+						</Box>
+					</>
+				)}
+
+				{/* Show automatic cancellation message for formatter crashes only */}
+				{hasFormatterError && !hasValidationError && (
+					<Box marginTop={1}>
+						<Text color={colors.error}>
+							Tool execution cancelled due to formatter error.
+						</Text>
+						<Text color={colors.secondary}>Press Escape to continue</Text>
+					</Box>
+				)}
+			</Box>
+		</Box>
+	);
+}

package/source/components/tool-execution-indicator.tsx

@@ -0,0 +1,33 @@
+import { useTheme } from '@/hooks/useTheme';
+import type { ToolExecutionIndicatorProps } from '@/types/index';
+import { Box, Text } from 'ink';
+import RandomSpinner from '@/components/random-spinner';
+
+export default function ToolExecutionIndicator({
+	toolName,
+	currentIndex,
+	totalTools,
+}: ToolExecutionIndicatorProps) {
+	const { colors } = useTheme();
+	return (
+		<Box flexDirection="column" marginBottom={1}>
+			<Box>
+				<RandomSpinner />
+				<Text color={colors.tool}> Executing tool: </Text>
+				<Text color={colors.primary}>{toolName}</Text>
+			</Box>
+
+			{totalTools > 1 && (
+				<Box marginTop={1}>
+					<Text color={colors.secondary}>
+						Tool {currentIndex + 1} of {totalTools}
+					</Text>
+				</Box>
+			)}
+
+			<Box marginTop={1}>
+				<Text color={colors.secondary}>Press Escape to cancel</Text>
+			</Box>
+		</Box>
+	);
+}

package/source/components/tool-message.tsx

@@ -0,0 +1,85 @@
+import {Box, Text} from 'ink';
+import React, {memo} from 'react';
+
+import {TitledBox} from '@/components/ui/titled-box';
+import {useTerminalWidth} from '@/hooks/useTerminalWidth';
+import {useTheme} from '@/hooks/useTheme';
+
+export default memo(function ToolMessage({
+	title,
+	message,
+	hideTitle = false,
+	hideBox = false,
+	isBashMode = false,
+}: {
+	title?: string;
+	message: string | React.ReactNode;
+	hideTitle?: boolean;
+	hideBox?: boolean;
+	isBashMode?: boolean;
+}) {
+	const boxWidth = useTerminalWidth();
+	const {colors} = useTheme();
+	// Handle both string and ReactNode messages
+	const messageContent =
+		typeof message === 'string' ? (
+			<Text color={colors.white}>{message}</Text>
+		) : (
+			message
+		);
+
+	const borderColor = colors.tool;
+
+	return (
+		<>
+			{hideBox ? (
+				<Box width={boxWidth} flexDirection="column" marginBottom={1}>
+					{isBashMode && (
+						<Text color={colors.tool} bold>
+							Bash Command Output
+						</Text>
+					)}
+					{messageContent}
+					{isBashMode && (
+						<Text color={colors.secondary} dimColor>
+							Output truncated to 4k characters to save context
+						</Text>
+					)}
+				</Box>
+			) : hideTitle ? (
+				<Box
+					borderStyle="round"
+					width={boxWidth}
+					borderColor={borderColor}
+					paddingX={2}
+					paddingY={0}
+					flexDirection="column"
+				>
+					{messageContent}
+					{isBashMode && (
+						<Text color={colors.white} dimColor>
+							Output truncated to 4k characters to save context
+						</Text>
+					)}
+				</Box>
+			) : (
+				<TitledBox
+					title={title || 'Tool Message'}
+					width={boxWidth}
+					borderColor={borderColor}
+					paddingX={2}
+					paddingY={1}
+					flexDirection="column"
+					marginBottom={1}
+				>
+					{messageContent}
+					{isBashMode && (
+						<Text color={colors.tool} dimColor>
+							Output truncated to 4k characters to save context
+						</Text>
+					)}
+				</TitledBox>
+			)}
+		</>
+	);
+});

package/source/components/ui/titled-box.spec.tsx

@@ -0,0 +1,207 @@
+import test from 'ava';
+import {Text} from 'ink';
+import {render} from 'ink-testing-library';
+import React from 'react';
+import {TitledBox} from './titled-box.js';
+
+// ============================================================================
+// Tests for TitledBox Component
+// ============================================================================
+
+console.log(`\ntitled-box.spec.tsx – ${React.version}`);
+
+test('TitledBox renders with title', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Test Title" borderColor="blue">
+			<Text>Content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Test Title/);
+});
+
+test('TitledBox renders children content', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Title" borderColor="green">
+			<Text>Hello World</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /Hello World/);
+});
+
+test('TitledBox renders with rounded border', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Bordered" borderColor="cyan">
+			<Text>Content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	// Check for rounded border characters
+	t.regex(output!, /╭/); // Top-left corner
+	t.regex(output!, /╮/); // Top-right corner
+	t.regex(output!, /╰/); // Bottom-left corner
+	t.regex(output!, /╯/); // Bottom-right corner
+});
+
+test('TitledBox renders without crashing with minimal props', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Minimal">
+			<Text>Content</Text>
+		</TitledBox>,
+	);
+
+	t.truthy(lastFrame());
+});
+
+test('TitledBox renders with custom width', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Wide Box" borderColor="yellow" width={50}>
+			<Text>Content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Wide Box/);
+});
+
+test('TitledBox renders with padding', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Padded" borderColor="magenta" paddingX={2} paddingY={1}>
+			<Text>Padded Content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /Padded Content/);
+});
+
+test('TitledBox renders with flexDirection column', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Column" borderColor="white" flexDirection="column">
+			<Text>Line 1</Text>
+			<Text>Line 2</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /Line 1/);
+	t.regex(output!, /Line 2/);
+});
+
+test('TitledBox renders with marginBottom', t => {
+	const {lastFrame} = render(
+		<TitledBox title="With Margin" borderColor="red" marginBottom={1}>
+			<Text>Content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /With Margin/);
+});
+
+test('TitledBox renders multiple children', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Multiple" borderColor="blue">
+			<Text>First</Text>
+			<Text>Second</Text>
+			<Text>Third</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /First/);
+	t.regex(output!, /Second/);
+	t.regex(output!, /Third/);
+});
+
+test('TitledBox renders with empty title', t => {
+	const {lastFrame} = render(
+		<TitledBox title="" borderColor="green">
+			<Text>Content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Content/);
+});
+
+test('TitledBox renders with special characters in title', t => {
+	const {lastFrame} = render(
+		<TitledBox title="✻ Special & <Title>" borderColor="cyan">
+			<Text>Content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /✻/);
+	t.regex(output!, /Special/);
+});
+
+test('TitledBox renders with long title', t => {
+	const longTitle = 'This is a very long title that might overflow';
+	const {lastFrame} = render(
+		<TitledBox title={longTitle} borderColor="yellow">
+			<Text>Content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /This is a very long title/);
+});
+
+test('TitledBox renders nested components', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Nested" borderColor="magenta">
+			<Text color="red">Red text</Text>
+			<Text bold>Bold text</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /Red text/);
+	t.regex(output!, /Bold text/);
+});
+
+test('TitledBox renders with all props combined', t => {
+	const {lastFrame} = render(
+		<TitledBox
+			title="Full Props"
+			borderColor="blue"
+			width={60}
+			paddingX={2}
+			paddingY={1}
+			flexDirection="column"
+			marginBottom={1}
+		>
+			<Text>Fully configured content</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Full Props/);
+	t.regex(output!, /Fully configured content/);
+});
+
+test('TitledBox title appears before content box', t => {
+	const {lastFrame} = render(
+		<TitledBox title="Header" borderColor="green">
+			<Text>Body</Text>
+		</TitledBox>,
+	);
+
+	const output = lastFrame();
+	const titleIndex = output!.indexOf('Header');
+	const bodyIndex = output!.indexOf('Body');
+
+	// Title should appear before body in the output
+	t.true(titleIndex < bodyIndex);
+});

package/source/components/ui/titled-box.tsx

@@ -0,0 +1,57 @@
+import {Box, Text} from 'ink';
+import type {BoxProps} from 'ink';
+import React from 'react';
+
+export interface TitledBoxProps extends Omit<BoxProps, 'borderStyle'> {
+	/** Title to display in the top border */
+	title: string;
+	/** Border color */
+	borderColor?: string;
+	/** Children to render inside the box */
+	children: React.ReactNode;
+}
+
+/**
+ * A simple titled box component that displays a title in pill style
+ * above a bordered box. Replacement for @mishieck/ink-titled-box.
+ */
+export function TitledBox({
+	title,
+	borderColor,
+	children,
+	width,
+	paddingX,
+	paddingY,
+	flexDirection,
+	marginBottom,
+	...boxProps
+}: TitledBoxProps) {
+	return (
+		<Box
+			flexDirection="column"
+			width={width}
+			marginBottom={marginBottom}
+			{...boxProps}
+		>
+			{/* Title row with pill styling */}
+			<Box>
+				<Text backgroundColor={borderColor} color="black" bold>
+					{' '}
+					{title}{' '}
+				</Text>
+			</Box>
+
+			{/* Content box with border */}
+			<Box
+				borderStyle="round"
+				borderColor={borderColor}
+				paddingX={paddingX}
+				paddingY={paddingY}
+				flexDirection={flexDirection}
+				width={width}
+			>
+				{children}
+			</Box>
+		</Box>
+	);
+}