@gguf/coder 0.3.1 → 0.3.3

package/source/components/tool-confirmation.tsx

@@ -1,190 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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>
-	);
-}