@gguf/coder 0.2.9 → 0.3.1

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

@@ -0,0 +1,173 @@
+import {renderWithTheme} from '@/test-utils/render-with-theme';
+import type {CheckpointListItem} from '@/types/checkpoint';
+import test from 'ava';
+import React from 'react';
+import CheckpointSelector from './checkpoint-selector';
+
+const createMockCheckpoint = (
+	name: string,
+	overrides: Partial<CheckpointListItem['metadata']> = {},
+): 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',
+		...overrides,
+	},
+	sizeBytes: 1024,
+});
+
+test('CheckpointSelector renders empty state when no checkpoints', t => {
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={[]}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('No Checkpoints'));
+});
+
+test('CheckpointSelector renders checkpoint list', t => {
+	const checkpoints = [
+		createMockCheckpoint('checkpoint-1'),
+		createMockCheckpoint('checkpoint-2'),
+	];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={checkpoints}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('checkpoint-1'));
+	t.true(output.includes('checkpoint-2'));
+});
+
+test('CheckpointSelector renders title', t => {
+	const checkpoints = [createMockCheckpoint('test')];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={checkpoints}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('Select Checkpoint'));
+});
+
+test('CheckpointSelector renders navigation help', t => {
+	const checkpoints = [createMockCheckpoint('test')];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={checkpoints}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	// The component should show some navigation instructions
+	t.truthy(output.length > 0);
+});
+
+test('CheckpointSelector shows message count in checkpoint label', t => {
+	const checkpoints = [createMockCheckpoint('test', {messageCount: 42})];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={checkpoints}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	// The label format includes "42 msgs"
+	t.true(output.includes('42'));
+});
+
+test('CheckpointSelector shows files count in checkpoint label', t => {
+	const checkpoints = [
+		createMockCheckpoint('test', {
+			filesChanged: ['a.ts', 'b.ts', 'c.ts'],
+		}),
+	];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={checkpoints}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	// The label format includes "3 files"
+	t.true(output.includes('3'));
+});
+
+test('CheckpointSelector renders without crashing with onError prop', t => {
+	const checkpoints = [createMockCheckpoint('test')];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={checkpoints}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			onError={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('test'));
+});
+
+test('CheckpointSelector renders multiple checkpoints in list', t => {
+	const checkpoints = [
+		createMockCheckpoint('first-checkpoint'),
+		createMockCheckpoint('second-checkpoint'),
+		createMockCheckpoint('third-checkpoint'),
+	];
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={checkpoints}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('first-checkpoint'));
+	t.true(output.includes('second-checkpoint'));
+	t.true(output.includes('third-checkpoint'));
+});
+
+test('CheckpointSelector empty state message mentions create command', t => {
+	const {lastFrame} = renderWithTheme(
+		<CheckpointSelector
+			checkpoints={[]}
+			onSelect={() => {}}
+			onCancel={() => {}}
+			currentMessageCount={0}
+		/>,
+	);
+
+	const output = lastFrame() || '';
+	t.true(output.includes('checkpoint create'));
+});

package/source/components/checkpoint-selector.tsx

@@ -0,0 +1,173 @@
+import {TitledBox} from '@/components/ui/titled-box';
+import {useTerminalWidth} from '@/hooks/useTerminalWidth';
+import {useTheme} from '@/hooks/useTheme';
+import type {CheckpointListItem} from '@/types/checkpoint';
+import {formatRelativeTime} from '@/utils/checkpoint-utils';
+import {Box, Text, useInput} from 'ink';
+import SelectInput from 'ink-select-input';
+import {useState} from 'react';
+
+interface CheckpointSelectorProps {
+	checkpoints: CheckpointListItem[];
+	onSelect: (checkpointName: string, createBackup: boolean) => void;
+	onCancel: () => void;
+	onError?: (error: Error) => void;
+	currentMessageCount: number;
+}
+
+interface CheckpointOption {
+	label: string;
+	value: string;
+}
+
+export default function CheckpointSelector({
+	checkpoints,
+	onSelect,
+	onCancel,
+	currentMessageCount,
+}: CheckpointSelectorProps) {
+	const boxWidth = useTerminalWidth();
+	const {colors} = useTheme();
+	const [selectedCheckpoint, setSelectedCheckpoint] = useState<string | null>(
+		null,
+	);
+	const [awaitingBackupConfirmation, setAwaitingBackupConfirmation] =
+		useState(false);
+
+	useInput((inputChar, key) => {
+		if (key.escape) {
+			onCancel();
+			return;
+		}
+
+		if (awaitingBackupConfirmation) {
+			const char = inputChar.toLowerCase();
+			if (char === 'y' || char === '\r' || char === '\n') {
+				if (selectedCheckpoint) {
+					onSelect(selectedCheckpoint, true);
+				}
+			} else if (char === 'n') {
+				if (selectedCheckpoint) {
+					onSelect(selectedCheckpoint, false);
+				}
+			}
+		}
+	});
+
+	const handleCheckpointSelect = (item: CheckpointOption) => {
+		setSelectedCheckpoint(item.value);
+		if (currentMessageCount > 0) {
+			setAwaitingBackupConfirmation(true);
+		} else {
+			onSelect(item.value, false);
+		}
+	};
+
+	if (awaitingBackupConfirmation && selectedCheckpoint) {
+		const checkpoint = checkpoints.find(c => c.name === selectedCheckpoint);
+
+		return (
+			<TitledBox
+				title="Checkpoint Load - Backup Confirmation"
+				width={boxWidth}
+				borderColor={colors.warning}
+				paddingX={2}
+				paddingY={1}
+				marginBottom={1}
+			>
+				<Box flexDirection="column">
+					<Box marginBottom={1}>
+						<Text color={colors.white}>
+							You have {currentMessageCount} message(s) in the current session.
+						</Text>
+					</Box>
+
+					{checkpoint && (
+						<Box flexDirection="column" marginBottom={1}>
+							<Text color={colors.secondary}>
+								Loading checkpoint:{' '}
+								<Text color={colors.primary}>{checkpoint.name}</Text>
+							</Text>
+							<Text color={colors.secondary}>
+								• {checkpoint.metadata.messageCount} messages
+							</Text>
+							<Text color={colors.secondary}>
+								• {checkpoint.metadata.filesChanged.length} files
+							</Text>
+							<Text color={colors.secondary}>
+								• Created {formatRelativeTime(checkpoint.metadata.timestamp)}
+							</Text>
+						</Box>
+					)}
+
+					<Box marginBottom={1}>
+						<Text color={colors.warning} bold>
+							Create a backup of current session before loading?
+						</Text>
+					</Box>
+
+					<Box marginBottom={1}>
+						<Text color={colors.white}>
+							[Y] Yes, create backup [N] No, skip backup [Esc] Cancel
+						</Text>
+					</Box>
+
+					<Box>
+						<Text color={colors.secondary} dimColor>
+							Press Y/Enter to backup, N to skip, or Esc to cancel
+						</Text>
+					</Box>
+				</Box>
+			</TitledBox>
+		);
+	}
+
+	const options: CheckpointOption[] = checkpoints.map(checkpoint => ({
+		label: `${checkpoint.name} - ${checkpoint.metadata.messageCount} msgs, ${
+			checkpoint.metadata.filesChanged.length
+		} files - ${formatRelativeTime(checkpoint.metadata.timestamp)}`,
+		value: checkpoint.name,
+	}));
+
+	if (options.length === 0) {
+		return (
+			<TitledBox
+				title="No Checkpoints Available"
+				width={boxWidth}
+				borderColor={colors.secondary}
+				paddingX={2}
+				paddingY={1}
+				marginBottom={1}
+			>
+				<Box flexDirection="column">
+					<Text color={colors.white}>
+						No checkpoints found. Create one with /checkpoint create [name]
+					</Text>
+					<Box marginTop={1}>
+						<Text color={colors.secondary}>Press Escape to cancel</Text>
+					</Box>
+				</Box>
+			</TitledBox>
+		);
+	}
+
+	return (
+		<TitledBox
+			title="Select Checkpoint to Load"
+			width={boxWidth}
+			borderColor={colors.primary}
+			paddingX={2}
+			paddingY={1}
+			marginBottom={1}
+		>
+			<Box flexDirection="column">
+				<SelectInput items={options} onSelect={handleCheckpointSelect} />
+				<Box marginTop={1}>
+					<Text color={colors.secondary}>
+						Use ↑↓ arrows to select, Enter to confirm, Escape to cancel
+					</Text>
+				</Box>
+			</Box>
+		</TitledBox>
+	);
+}

package/source/components/development-mode-indicator.spec.tsx

@@ -0,0 +1,268 @@
+import {render} from 'ink-testing-library';
+import test from 'ava';
+import React from 'react';
+import {DevelopmentModeIndicator} from './development-mode-indicator';
+
+// Mock colors object matching the theme structure
+const mockColors = {
+	primary: '#FFFFFF',
+	secondary: '#808080',
+	info: '#00FFFF',
+	warning: '#FFA500',
+	error: '#FF0000',
+	success: '#00FF00',
+	tool: '#FF00FF',
+	white: '#FFFFFF',
+	black: '#000000',
+};
+
+// ============================================================================
+// Component Rendering Tests
+// ============================================================================
+
+test('DevelopmentModeIndicator renders with normal mode', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /normal mode on/);
+	t.regex(output!, /Shift\+Tab to cycle/);
+});
+
+test('DevelopmentModeIndicator renders with auto-accept mode', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator
+			developmentMode="auto-accept"
+			colors={mockColors}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /auto-accept mode on/);
+	t.regex(output!, /Shift\+Tab to cycle/);
+});
+
+test('DevelopmentModeIndicator renders with plan mode', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator developmentMode="plan" colors={mockColors} />,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /plan mode on/);
+	t.regex(output!, /Shift\+Tab to cycle/);
+});
+
+test('DevelopmentModeIndicator renders without crashing', t => {
+	const {unmount} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	t.notThrows(() => unmount());
+});
+
+// ============================================================================
+// Props Tests
+// ============================================================================
+
+test('DevelopmentModeIndicator accepts all valid development modes', t => {
+	const modes = ['normal', 'auto-accept', 'plan'] as const;
+
+	for (const mode of modes) {
+		t.notThrows(() => {
+			render(
+				<DevelopmentModeIndicator developmentMode={mode} colors={mockColors} />,
+			);
+		});
+	}
+});
+
+test('DevelopmentModeIndicator accepts colors object', t => {
+	t.notThrows(() => {
+		render(
+			<DevelopmentModeIndicator
+				developmentMode="normal"
+				colors={mockColors}
+			/>,
+		);
+	});
+});
+
+// ============================================================================
+// Display Name Tests
+// ============================================================================
+
+test('DevelopmentModeIndicator has correct display name', t => {
+	t.is(DevelopmentModeIndicator.displayName, 'DevelopmentModeIndicator');
+});
+
+// ============================================================================
+// Content Tests
+// ============================================================================
+
+test('DevelopmentModeIndicator shows mode label in bold', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	const output = lastFrame();
+	// Bold is represented by ANSI escape codes, check for the label
+	t.regex(output!, /normal mode on/);
+});
+
+test('DevelopmentModeIndicator shows instructions', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /\(Shift\+Tab to cycle\)/);
+});
+
+test('DevelopmentModeIndicator normal mode uses correct label', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /normal mode on/);
+	t.notRegex(output!, /auto-accept mode on/);
+	t.notRegex(output!, /plan mode on/);
+});
+
+test('DevelopmentModeIndicator auto-accept mode uses correct label', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator
+			developmentMode="auto-accept"
+			colors={mockColors}
+		/>,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /auto-accept mode on/);
+	t.notRegex(output!, /normal mode on/);
+	t.notRegex(output!, /plan mode on/);
+});
+
+test('DevelopmentModeIndicator plan mode uses correct label', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator developmentMode="plan" colors={mockColors} />,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /plan mode on/);
+	t.notRegex(output!, /normal mode on/);
+	t.notRegex(output!, /auto-accept mode on/);
+});
+
+// ============================================================================
+// Memoization Tests
+// ============================================================================
+
+test('DevelopmentModeIndicator is memoized', t => {
+	// React.memo components should have the same reference when props don't change
+	const firstRender = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+	const firstOutput = firstRender.lastFrame();
+
+	const secondRender = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+	const secondOutput = secondRender.lastFrame();
+
+	// Should produce the same output with same props
+	t.is(firstOutput, secondOutput);
+});
+
+test('DevelopmentModeIndicator updates when developmentMode changes', t => {
+	const {lastFrame, rerender} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	const normalOutput = lastFrame();
+	t.regex(normalOutput!, /normal mode on/);
+
+	rerender(
+		<DevelopmentModeIndicator
+			developmentMode="auto-accept"
+			colors={mockColors}
+		/>,
+	);
+
+	const autoAcceptOutput = lastFrame();
+	t.regex(autoAcceptOutput!, /auto-accept mode on/);
+});
+
+// ============================================================================
+// Structure Tests
+// ============================================================================
+
+test('DevelopmentModeIndicator has correct structure', t => {
+	const {lastFrame} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	const output = lastFrame();
+	// Should have both the mode label and the instructions
+	t.regex(output!, /normal mode on/);
+	t.regex(output!, /\(Shift\+Tab to cycle\)/);
+});
+
+test('DevelopmentModeIndicator component can be unmounted', t => {
+	const {unmount} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	t.notThrows(() => {
+		unmount();
+	});
+});
+
+// ============================================================================
+// Edge Cases
+// ============================================================================
+
+test('DevelopmentModeIndicator handles rapid mode changes', t => {
+	const {lastFrame, rerender} = render(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	// Cycle through modes rapidly
+	rerender(
+		<DevelopmentModeIndicator
+			developmentMode="auto-accept"
+			colors={mockColors}
+		/>,
+	);
+	rerender(
+		<DevelopmentModeIndicator developmentMode="plan" colors={mockColors} />,
+	);
+	rerender(
+		<DevelopmentModeIndicator developmentMode="normal" colors={mockColors} />,
+	);
+
+	const output = lastFrame();
+	t.regex(output!, /normal mode on/);
+});
+
+test('DevelopmentModeIndicator handles custom colors', t => {
+	const customColors = {
+		...mockColors,
+		secondary: '#123456',
+		info: '#789ABC',
+		warning: '#DEF012',
+	};
+
+	t.notThrows(() => {
+		render(
+			<DevelopmentModeIndicator
+				developmentMode="normal"
+				colors={customColors}
+			/>,
+		);
+	});
+});

package/source/components/development-mode-indicator.tsx

@@ -0,0 +1,38 @@
+import type {useTheme} from '@/hooks/useTheme';
+import {DEVELOPMENT_MODE_LABELS} from '@/types/core';
+import type {DevelopmentMode} from '@/types/core';
+import {Box, Text} from 'ink';
+import React from 'react';
+
+interface DevelopmentModeIndicatorProps {
+	developmentMode: DevelopmentMode;
+	colors: ReturnType<typeof useTheme>['colors'];
+}
+
+/**
+ * Development mode indicator component
+ * Shows the current development mode (normal/auto-accept/plan) and instructions
+ * Always visible to help users understand the current mode
+ */
+export const DevelopmentModeIndicator = React.memo(
+	({developmentMode, colors}: DevelopmentModeIndicatorProps) => {
+		return (
+			<Box marginTop={1}>
+				<Text
+					color={
+						developmentMode === 'normal'
+							? colors.secondary
+							: developmentMode === 'auto-accept'
+								? colors.info
+								: colors.warning
+					}
+				>
+					<Text bold>{DEVELOPMENT_MODE_LABELS[developmentMode]}</Text>{' '}
+					<Text dimColor>(Shift+Tab to cycle)</Text>
+				</Text>
+			</Box>
+		);
+	},
+);
+
+DevelopmentModeIndicator.displayName = 'DevelopmentModeIndicator';