@gguf/coder 0.3.0 → 0.3.1

package/source/components/assistant-message.tsx

@@ -0,0 +1,34 @@
+import {useTheme} from '@/hooks/useTheme';
+import {parseMarkdown} from '@/markdown-parser/index';
+import type {AssistantMessageProps} from '@/types/index';
+import {Box, Text} from 'ink';
+import {memo, useMemo} from 'react';
+
+export default memo(function AssistantMessage({
+	message,
+	model,
+}: AssistantMessageProps) {
+	const {colors} = useTheme();
+
+	// Render markdown to terminal-formatted text with theme colors
+	// Add trailing newline to ensure consistent spacing after message
+	const renderedMessage = useMemo(() => {
+		try {
+			return parseMarkdown(message, colors).trimEnd() + '\n';
+		} catch {
+			// Fallback to plain text if markdown parsing fails
+			return message.trimEnd() + '\n';
+		}
+	}, [message, colors]);
+
+	return (
+		<Box flexDirection="column" marginBottom={1}>
+			<Box marginBottom={1}>
+				<Text color={colors.primary} bold>
+					{model}:
+				</Text>
+			</Box>
+			<Text>{renderedMessage}</Text>
+		</Box>
+	);
+});

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

@@ -0,0 +1,21 @@
+import {useTheme} from '@/hooks/useTheme';
+import type {BashExecutionIndicatorProps} from '@/types/index';
+import {Box, Text} from 'ink';
+import {memo} from 'react';
+
+export default memo(function BashExecutionIndicator({
+	command,
+}: BashExecutionIndicatorProps) {
+	const {colors} = useTheme();
+	return (
+		<Box flexDirection="column" marginBottom={1}>
+			<Box flexDirection="row">
+				<Text color={colors.tool}>● Executing: </Text>
+				<Text color={colors.secondary}>{command}</Text>
+			</Box>
+			<Box marginTop={1}>
+				<Text color={colors.secondary}>Press Escape to cancel</Text>
+			</Box>
+		</Box>
+	);
+});

package/source/components/cancelling-indicator.tsx

@@ -0,0 +1,16 @@
+import { useTheme } from '@/hooks/useTheme';
+import { Box, Text } from 'ink';
+import RandomSpinner from '@/components/random-spinner';
+import { memo } from 'react';
+
+export default memo(function CancellingIndicator() {
+	const { colors } = useTheme();
+	return (
+		<Box flexDirection="column" marginBottom={1}>
+			<Box>
+				<RandomSpinner />
+				<Text color={colors.secondary}> Cancelling...</Text>
+			</Box>
+		</Box>
+	);
+});

package/source/components/chat-queue.spec.tsx

@@ -0,0 +1,83 @@
+import test from 'ava';
+import {Box} from 'ink';
+import {render} from 'ink-testing-library';
+import React from 'react';
+import ChatQueue from './chat-queue';
+
+test('ChatQueue renders without components', t => {
+	t.notThrows(() => {
+		render(<ChatQueue staticComponents={[]} queuedComponents={[]} />);
+	});
+});
+
+test('ChatQueue renders with static components', t => {
+	const components = [
+		<Box key="1">First message</Box>,
+		<Box key="2">Second message</Box>,
+	];
+
+	t.notThrows(() => {
+		render(<ChatQueue staticComponents={components} queuedComponents={[]} />);
+	});
+});
+
+test('ChatQueue renders with queued components', t => {
+	const components = [
+		<Box key="1">Queued message</Box>,
+	];
+
+	t.notThrows(() => {
+		render(<ChatQueue staticComponents={[]} queuedComponents={components} />);
+	});
+});
+
+test('ChatQueue renders with both static and queued components', t => {
+	const staticComponents = [
+		<Box key="1">Static message</Box>,
+	];
+	const queuedComponents = [
+		<Box key="2">Queued message</Box>,
+	];
+
+	t.notThrows(() => {
+		render(
+			<ChatQueue staticComponents={staticComponents} queuedComponents={queuedComponents} />,
+		);
+	});
+});
+
+test('ChatQueue merges static and queued components', t => {
+	const {lastFrame} = render(
+		<ChatQueue
+			staticComponents={[<Box key="1">Static</Box>]}
+			queuedComponents={[<Box key="2">Queued</Box>]}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+});
+
+test('ChatQueue component can be unmounted', t => {
+	const {unmount} = render(<ChatQueue staticComponents={[]} queuedComponents={[]} />);
+
+	t.notThrows(() => {
+		unmount();
+	});
+});
+
+test('ChatQueue re-renders without crashing', t => {
+	const {rerender} = render(<ChatQueue staticComponents={[]} queuedComponents={[]} />);
+
+	t.notThrows(() => {
+		rerender(<ChatQueue staticComponents={[]} queuedComponents={[]} />);
+	});
+});
+
+test('ChatQueue handles components without keys', t => {
+	const components = [<Box key="1">No key component</Box>];
+
+	t.notThrows(() => {
+		render(<ChatQueue staticComponents={components} queuedComponents={[]} />);
+	});
+});

package/source/components/chat-queue.tsx

@@ -0,0 +1,36 @@
+import type {ChatQueueProps} from '@/types/index';
+import {Box, Static} from 'ink';
+import {Fragment, memo, useMemo} from 'react';
+
+export default memo(function ChatQueue({
+	staticComponents = [],
+	queuedComponents = [],
+}: ChatQueueProps) {
+	// Move ALL messages to static - prevents any re-renders
+	// All messages are now immutable once rendered
+	const allStaticComponents = useMemo(
+		() => [...staticComponents, ...queuedComponents],
+		[staticComponents, queuedComponents],
+	);
+
+	return (
+		<Box flexDirection="column">
+			{/* All content is static to prevent re-renders */}
+			{allStaticComponents.length > 0 && (
+				<Static items={allStaticComponents}>
+					{(component, index) => {
+						const key =
+							component &&
+							typeof component === 'object' &&
+							'key' in component &&
+							component.key
+								? component.key
+								: `static-${index}`;
+
+						return <Fragment key={key}>{component}</Fragment>;
+					}}
+				</Static>
+			)}
+		</Box>
+	);
+});

package/source/components/checkpoint-display.spec.tsx

@@ -0,0 +1,219 @@
+import {renderWithTheme} from '@/test-utils/render-with-theme';
+import type {CheckpointListItem} from '@/types/checkpoint';
+import test from 'ava';
+import React from 'react';
+import {CheckpointListDisplay} from './checkpoint-display';
+
+const createMockCheckpoint = (
+	name: string,
+	overrides: Partial<CheckpointListItem> = {},
+): CheckpointListItem => ({
+	name,
+	metadata: {
+		name,
+		timestamp: new Date().toISOString(),
+		messageCount: 10,
+		filesChanged: ['file1.ts', 'file2.ts'],
+		provider: {name: 'Test Provider', model: 'test-model'},
+		description: 'Test checkpoint',
+	},
+	sizeBytes: 1024,
+	...overrides,
+});
+
+test('CheckpointListDisplay renders empty state when no checkpoints', t => {
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={[]} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('No checkpoints found'));
+	t.true(output.includes('/checkpoint create'));
+});
+
+test('CheckpointListDisplay renders with default title', t => {
+	const checkpoints = [createMockCheckpoint('test-checkpoint')];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('Available Checkpoints'));
+});
+
+test('CheckpointListDisplay renders with custom title', t => {
+	const checkpoints = [createMockCheckpoint('test-checkpoint')];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} title="My Checkpoints" />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('My Checkpoints'));
+});
+
+test('CheckpointListDisplay renders checkpoint name', t => {
+	const checkpoints = [createMockCheckpoint('my-test-checkpoint')];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('my-test-checkpoint'));
+});
+
+test('CheckpointListDisplay truncates long checkpoint names', t => {
+	const longName = 'this-is-a-very-long-checkpoint-name-that-exceeds-limit';
+	const checkpoints = [createMockCheckpoint(longName)];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	// Should be truncated with ...
+	t.true(output.includes('...'));
+	t.false(output.includes(longName)); // Full name should not appear
+});
+
+test('CheckpointListDisplay renders message count', t => {
+	const checkpoints = [
+		createMockCheckpoint('test', {
+			metadata: {
+				name: 'test',
+				timestamp: new Date().toISOString(),
+				messageCount: 42,
+				filesChanged: [],
+				provider: {name: 'Test', model: 'model'},
+			},
+		}),
+	];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('42'));
+});
+
+test('CheckpointListDisplay renders files count', t => {
+	const checkpoints = [
+		createMockCheckpoint('test', {
+			metadata: {
+				name: 'test',
+				timestamp: new Date().toISOString(),
+				messageCount: 10,
+				filesChanged: ['a.ts', 'b.ts', 'c.ts'],
+				provider: {name: 'Test', model: 'model'},
+			},
+		}),
+	];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('3'));
+});
+
+test('CheckpointListDisplay renders size in KB', t => {
+	const checkpoints = [createMockCheckpoint('test', {sizeBytes: 2048})];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('2KB'));
+});
+
+test('CheckpointListDisplay renders size in MB', t => {
+	const checkpoints = [
+		createMockCheckpoint('test', {sizeBytes: 2 * 1024 * 1024}),
+	];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('2.0MB'));
+});
+
+test('CheckpointListDisplay renders size in bytes for small files', t => {
+	const checkpoints = [createMockCheckpoint('test', {sizeBytes: 500})];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('500B'));
+});
+
+test('CheckpointListDisplay renders multiple checkpoints', t => {
+	const checkpoints = [
+		createMockCheckpoint('checkpoint-1'),
+		createMockCheckpoint('checkpoint-2'),
+		createMockCheckpoint('checkpoint-3'),
+	];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('checkpoint-1'));
+	t.true(output.includes('checkpoint-2'));
+	t.true(output.includes('checkpoint-3'));
+});
+
+test('CheckpointListDisplay renders table headers', t => {
+	const checkpoints = [createMockCheckpoint('test')];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('Name'));
+	t.true(output.includes('Created'));
+	t.true(output.includes('Messages'));
+	t.true(output.includes('Files'));
+	t.true(output.includes('Size'));
+});
+
+test('CheckpointListDisplay renders relative time', t => {
+	const checkpoints = [
+		createMockCheckpoint('test', {
+			metadata: {
+				name: 'test',
+				timestamp: new Date().toISOString(), // Just now
+				messageCount: 10,
+				filesChanged: [],
+				provider: {name: 'Test', model: 'model'},
+			},
+		}),
+	];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('Just now'));
+});
+
+test('CheckpointListDisplay handles empty size', t => {
+	const checkpoints = [createMockCheckpoint('test', {sizeBytes: undefined})];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	// Should render without crashing
+	const output = lastFrame() || '';
+	t.true(output.includes('test'));
+});
+
+test('CheckpointListDisplay handles zero size', t => {
+	const checkpoints = [createMockCheckpoint('test', {sizeBytes: 0})];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointListDisplay checkpoints={checkpoints} />,
+	);
+
+	// Should render without crashing (empty string for 0 bytes)
+	const output = lastFrame() || '';
+	t.true(output.includes('test'));
+});

package/source/components/checkpoint-display.tsx

@@ -0,0 +1,126 @@
+import {useTheme} from '@/hooks/useTheme';
+import type {CheckpointListItem} from '@/types/checkpoint';
+import {formatRelativeTime} from '@/utils/checkpoint-utils';
+import {Box, Text} from 'ink';
+
+interface CheckpointListDisplayProps {
+	checkpoints: CheckpointListItem[];
+	title?: string;
+}
+
+export function CheckpointListDisplay({
+	checkpoints,
+	title = 'Available Checkpoints',
+}: CheckpointListDisplayProps) {
+	const {colors} = useTheme();
+
+	const formatSize = (bytes?: number): string => {
+		if (!bytes) return '';
+
+		const kb = bytes / 1024;
+		const mb = kb / 1024;
+
+		if (mb >= 1) {
+			return `${mb.toFixed(1)}MB`;
+		} else if (kb >= 1) {
+			return `${kb.toFixed(0)}KB`;
+		} else {
+			return `${bytes}B`;
+		}
+	};
+
+	if (checkpoints.length === 0) {
+		return (
+			<Box flexDirection="column" marginY={1}>
+				<Text color={colors.secondary}>
+					No checkpoints found. Create one with /checkpoint create [name]
+				</Text>
+			</Box>
+		);
+	}
+
+	return (
+		<Box flexDirection="column" marginY={1}>
+			<Box
+				borderStyle="round"
+				borderColor={colors.primary}
+				paddingX={2}
+				paddingY={1}
+			>
+				<Box flexDirection="column">
+					<Text bold color={colors.primary}>
+						{title}
+					</Text>
+					<Box marginTop={1} flexDirection="column">
+						{/* Header */}
+						<Box flexDirection="row">
+							<Box width={20}>
+								<Text bold color={colors.info}>
+									Name
+								</Text>
+							</Box>
+							<Box width={15}>
+								<Text bold color={colors.info}>
+									Created
+								</Text>
+							</Box>
+							<Box width={10}>
+								<Text bold color={colors.info}>
+									Messages
+								</Text>
+							</Box>
+							<Box width={8}>
+								<Text bold color={colors.info}>
+									Files
+								</Text>
+							</Box>
+							<Box width={8}>
+								<Text bold color={colors.info}>
+									Size
+								</Text>
+							</Box>
+						</Box>
+
+						{/* Separator */}
+						<Box>
+							<Text color={colors.secondary}>{'─'.repeat(50)}</Text>
+						</Box>
+
+						{/* Rows */}
+						{checkpoints.map(checkpoint => (
+							<Box key={checkpoint.name} flexDirection="row">
+								<Box width={20}>
+									<Text color={colors.white}>
+										{checkpoint.name.length > 18
+											? checkpoint.name.substring(0, 15) + '...'
+											: checkpoint.name}
+									</Text>
+								</Box>
+								<Box width={15}>
+									<Text color={colors.secondary}>
+										{formatRelativeTime(checkpoint.metadata.timestamp)}
+									</Text>
+								</Box>
+								<Box width={10}>
+									<Text color={colors.white}>
+										{checkpoint.metadata.messageCount}
+									</Text>
+								</Box>
+								<Box width={8}>
+									<Text color={colors.white}>
+										{checkpoint.metadata.filesChanged.length}
+									</Text>
+								</Box>
+								<Box width={8}>
+									<Text color={colors.secondary}>
+										{formatSize(checkpoint.sizeBytes)}
+									</Text>
+								</Box>
+							</Box>
+						))}
+					</Box>
+				</Box>
+			</Box>
+		</Box>
+	);
+}