@gguf/coder 0.2.9 → 0.3.1

package/source/components/usage/usage-display.tsx

@@ -0,0 +1,291 @@
+/**
+ * Usage display component for /usage command
+ */
+
+import {TitledBox} from '@/components/ui/titled-box';
+import {useTerminalWidth} from '@/hooks/useTerminalWidth';
+import {useTheme} from '@/hooks/useTheme';
+import type {Message} from '@/types/core.js';
+import type {TokenBreakdown} from '@/types/usage.js';
+import {formatTokenCount, getUsageStatusColor} from '@/usage/calculator.js';
+import {Box, Text} from 'ink';
+import {ProgressBar} from './progress-bar.js';
+
+interface UsageDisplayProps {
+	provider: string;
+	model: string;
+	contextLimit: number | null;
+	currentTokens: number;
+	breakdown: TokenBreakdown;
+	messages: Message[];
+	tokenizerName: string;
+	getMessageTokens: (message: Message) => number;
+}
+
+export function UsageDisplay({
+	provider,
+	model,
+	contextLimit,
+	currentTokens,
+	breakdown,
+	messages,
+	tokenizerName,
+	getMessageTokens,
+}: UsageDisplayProps) {
+	const boxWidth = useTerminalWidth();
+	const {colors} = useTheme();
+
+	// Calculate percentages
+	const percentUsed = contextLimit ? (currentTokens / contextLimit) * 100 : 0;
+	const statusColor = getUsageStatusColor(percentUsed);
+	const availableTokens = contextLimit ? contextLimit - currentTokens : 0;
+
+	// Get the actual color from theme
+	const progressColor =
+		statusColor === 'success'
+			? colors.success
+			: statusColor === 'warning'
+				? colors.warning
+				: colors.error;
+
+	// Calculate category percentages for breakdown bars
+	const systemPercent = currentTokens
+		? (breakdown.system / currentTokens) * 100
+		: 0;
+	const userPercent = currentTokens
+		? (breakdown.userMessages / currentTokens) * 100
+		: 0;
+	const assistantPercent = currentTokens
+		? (breakdown.assistantMessages / currentTokens) * 100
+		: 0;
+	const toolMessagesPercent = currentTokens
+		? (breakdown.toolResults / currentTokens) * 100
+		: 0;
+	const toolDefsPercent = currentTokens
+		? (breakdown.toolDefinitions / currentTokens) * 100
+		: 0;
+
+	// Calculate recent activity stats using cached token counts
+	const last5Messages = messages.slice(-5);
+	const last5TokenCount = last5Messages.reduce(
+		(sum, msg) => sum + getMessageTokens(msg),
+		0,
+	);
+
+	// Find largest message using cached token counts
+	const largestMessageTokens =
+		messages.length > 0
+			? Math.max(...messages.map(msg => getMessageTokens(msg)))
+			: 0;
+
+	// Responsive layout calculations based on terminal width
+	// For narrow terminals, reduce space for bars
+	const barMaxWidth = Math.max(10, Math.min(30, boxWidth - 20));
+	const mainProgressWidth = Math.max(20, Math.min(60, boxWidth - 12));
+
+	return (
+		<TitledBox
+			title="Context Usage"
+			width={boxWidth}
+			borderColor={colors.info}
+			paddingX={2}
+			paddingY={1}
+			flexDirection="column"
+			marginBottom={1}
+		>
+			{/* Overall Usage */}
+			<Box marginBottom={1}>
+				<Text color={colors.primary} bold>
+					Overall Usage
+				</Text>
+			</Box>
+			<Box marginBottom={0}>
+				<ProgressBar
+					percent={percentUsed}
+					width={mainProgressWidth}
+					color={progressColor}
+				/>
+				<Text color={colors.white} bold>
+					{' '}
+					{Math.round(percentUsed)}%
+				</Text>
+			</Box>
+			<Box marginBottom={1}>
+				<Text color={colors.secondary}>
+					{formatTokenCount(currentTokens)} /{' '}
+					{contextLimit ? formatTokenCount(contextLimit) : 'Unknown'} tokens
+				</Text>
+			</Box>
+
+			{/* Category Breakdown */}
+			<Box marginTop={1} marginBottom={1}>
+				<Text color={colors.primary} bold>
+					Breakdown by Category
+				</Text>
+			</Box>
+
+			{/* System Prompt */}
+			<Box flexDirection="column" marginBottom={1}>
+				<Box marginBottom={0}>
+					<Text color={colors.info}>System Prompt:</Text>
+				</Box>
+				<Box flexDirection="row">
+					<ProgressBar
+						percent={systemPercent}
+						width={barMaxWidth}
+						color={colors.info}
+					/>
+					<Box marginLeft={1}>
+						<Text color={colors.white}>
+							{Math.round(systemPercent)}% ({formatTokenCount(breakdown.system)}
+							)
+						</Text>
+					</Box>
+				</Box>
+			</Box>
+
+			{/* User Messages */}
+			<Box flexDirection="column" marginBottom={1}>
+				<Box marginBottom={0}>
+					<Text color={colors.secondary}>User Messages:</Text>
+				</Box>
+				<Box flexDirection="row">
+					<ProgressBar
+						percent={userPercent}
+						width={barMaxWidth}
+						color={colors.info}
+					/>
+					<Box marginLeft={1}>
+						<Text color={colors.white}>
+							{Math.round(userPercent)}% (
+							{formatTokenCount(breakdown.userMessages)})
+						</Text>
+					</Box>
+				</Box>
+			</Box>
+
+			{/* Assistant Messages */}
+			<Box flexDirection="column" marginBottom={1}>
+				<Box marginBottom={0}>
+					<Text color={colors.secondary}>Assistant Messages:</Text>
+				</Box>
+				<Box flexDirection="row">
+					<ProgressBar
+						percent={assistantPercent}
+						width={barMaxWidth}
+						color={colors.info}
+					/>
+					<Box marginLeft={1}>
+						<Text color={colors.white}>
+							{Math.round(assistantPercent)}% (
+							{formatTokenCount(breakdown.assistantMessages)})
+						</Text>
+					</Box>
+				</Box>
+			</Box>
+
+			{/* Tool Messages */}
+			<Box flexDirection="column" marginBottom={1}>
+				<Box marginBottom={0}>
+					<Text color={colors.secondary}>Tool Messages:</Text>
+				</Box>
+				<Box flexDirection="row">
+					<ProgressBar
+						percent={toolMessagesPercent}
+						width={barMaxWidth}
+						color={colors.info}
+					/>
+					<Box marginLeft={1}>
+						<Text color={colors.white}>
+							{Math.round(toolMessagesPercent)}% (
+							{formatTokenCount(breakdown.toolResults)})
+						</Text>
+					</Box>
+				</Box>
+			</Box>
+
+			{/* Tool Definitions */}
+			<Box flexDirection="column" marginBottom={1}>
+				<Box marginBottom={0}>
+					<Text color={colors.secondary}>Tool Definitions:</Text>
+				</Box>
+				<Box flexDirection="row">
+					<ProgressBar
+						percent={toolDefsPercent}
+						width={barMaxWidth}
+						color={colors.info}
+					/>
+					<Box marginLeft={1}>
+						<Text color={colors.white}>
+							{Math.round(toolDefsPercent)}% (
+							{formatTokenCount(breakdown.toolDefinitions)})
+						</Text>
+					</Box>
+				</Box>
+			</Box>
+
+			{/* Available Tokens */}
+			<Box marginTop={1} marginBottom={1}>
+				<Text color={colors.secondary}>
+					Available:{' '}
+					<Text color={colors.success}>
+						{formatTokenCount(availableTokens)} tokens
+					</Text>
+				</Text>
+			</Box>
+
+			{/* Model Information */}
+			<Box marginTop={1} marginBottom={1}>
+				<Text color={colors.primary} bold>
+					Model Information
+				</Text>
+			</Box>
+			<Box>
+				<Text color={colors.secondary}>
+					Provider: <Text color={colors.white}>{provider}</Text>
+				</Text>
+			</Box>
+			<Box>
+				<Text color={colors.secondary}>
+					Model: <Text color={colors.white}>{model}</Text>
+				</Text>
+			</Box>
+			<Box>
+				<Text color={colors.secondary}>
+					Context Limit:{' '}
+					<Text color={colors.white}>
+						{contextLimit ? formatTokenCount(contextLimit) : 'Unknown'}
+					</Text>
+				</Text>
+			</Box>
+			<Box marginBottom={1}>
+				<Text color={colors.secondary}>
+					Tokenizer: <Text color={colors.white}>{tokenizerName}</Text>
+				</Text>
+			</Box>
+
+			{/* Recent Activity */}
+			<Box marginTop={1} marginBottom={1}>
+				<Text color={colors.primary} bold>
+					Recent Activity
+				</Text>
+			</Box>
+			<Box>
+				<Text color={colors.secondary}>
+					Last 5 messages:{' '}
+					<Text color={colors.white}>
+						{formatTokenCount(last5TokenCount)} tokens
+					</Text>
+				</Text>
+			</Box>
+			<Box>
+				<Text color={colors.secondary}>
+					Largest message:{' '}
+					<Text color={colors.white}>
+						{formatTokenCount(largestMessageTokens)} tokens
+					</Text>
+				</Text>
+			</Box>
+		</TitledBox>
+	);
+}

package/source/components/user-input.spec.tsx

@@ -0,0 +1,327 @@
+import test from 'ava';
+import {render} from 'ink-testing-library';
+import React from 'react';
+import {themes} from '../config/themes';
+import {ThemeContext} from '../hooks/useTheme';
+import {UIStateProvider} from '../hooks/useUIState';
+import UserInput from './user-input';
+
+console.log(`\nuser-input.spec.tsx – ${React.version}`);
+
+// Mock ThemeProvider for testing
+const MockThemeProvider = ({children}: {children: React.ReactNode}) => {
+	const mockTheme = {
+		currentTheme: 'tokyo-night' as const,
+		colors: themes['tokyo-night'].colors,
+		setCurrentTheme: () => {},
+	};
+
+	return (
+		<ThemeContext.Provider value={mockTheme}>{children}</ThemeContext.Provider>
+	);
+};
+
+// Wrapper with all required providers
+const TestWrapper = ({children}: {children: React.ReactNode}) => (
+	<MockThemeProvider>
+		<UIStateProvider>{children}</UIStateProvider>
+	</MockThemeProvider>
+);
+
+// ============================================================================
+// Component Rendering Tests
+// ============================================================================
+
+test('UserInput renders without crashing', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	t.truthy(lastFrame());
+});
+
+test('UserInput renders with placeholder text', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput placeholder="Custom placeholder" />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Placeholder text should be visible
+});
+
+test('UserInput renders prompt symbol', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, />/); // Prompt symbol
+});
+
+test('UserInput renders with disabled state', t => {
+	const {lastFrame, unmount} = render(
+		<TestWrapper>
+			<UserInput disabled={true} />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Shows a spinner when disabled (dots spinner uses braille characters like ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏)
+	// t.regex(output!, /[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏]/);
+	// t.regex(output!, /[←↖↑↗→↘↓↙]/);
+	t.regex(output!, /[◢◣◤◥]/);
+	unmount();
+});
+
+test('UserInput renders development mode indicator', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput developmentMode="normal" />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Normal Mode|Shift\+Tab/); // Development mode indicator
+});
+
+test('UserInput renders auto-accept mode indicator', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput developmentMode="auto-accept" />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /auto-accept mode/); // Auto-accept mode indicator
+});
+
+test('UserInput renders plan mode indicator', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput developmentMode="plan" />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /plan mode/); // Plan mode indicator
+});
+
+test('UserInput renders with custom commands', t => {
+	const customCommands = ['custom-command', 'another-command'];
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput customCommands={customCommands} />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+});
+
+test('UserInput calls onSubmit when message is submitted', t => {
+	let submittedMessage = '';
+	const handleSubmit = (message: string) => {
+		submittedMessage = message;
+	};
+
+	const {lastFrame, stdin} = render(
+		<TestWrapper>
+			<UserInput onSubmit={handleSubmit} />
+		</TestWrapper>,
+	);
+
+	t.truthy(lastFrame());
+	// Note: Testing actual user interaction with stdin is complex
+	// This test verifies the component renders with onSubmit callback
+});
+
+test('UserInput calls onCancel when provided', t => {
+	let cancelCalled = false;
+	const handleCancel = () => {
+		cancelCalled = true;
+	};
+
+	const {lastFrame, unmount} = render(
+		<TestWrapper>
+			<UserInput onCancel={handleCancel} disabled={true} />
+		</TestWrapper>,
+	);
+
+	t.truthy(lastFrame());
+	// Note: Actual cancel invocation requires ESC key simulation
+	unmount();
+});
+
+test('UserInput calls onToggleMode when provided', t => {
+	let toggleCalled = false;
+	const handleToggle = () => {
+		toggleCalled = true;
+	};
+
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput onToggleMode={handleToggle} />
+		</TestWrapper>,
+	);
+
+	t.truthy(lastFrame());
+	// Note: Actual toggle invocation requires Shift+Tab simulation
+});
+
+test('UserInput renders bash mode indicator when input starts with !', t => {
+	// This test verifies the component can handle bash mode
+	// Actual input testing requires stdin manipulation
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	t.truthy(lastFrame());
+});
+
+test('UserInput renders help text when not disabled', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /What would you like me to help with\?/);
+});
+
+test('UserInput hides help text when disabled', t => {
+	const {lastFrame, unmount} = render(
+		<TestWrapper>
+			<UserInput disabled={true} />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.notRegex(output!, /What would you like me to help with\?/);
+	unmount();
+});
+
+test('UserInput renders with all props provided', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput
+				onSubmit={() => {}}
+				placeholder="Test"
+				customCommands={['test']}
+				disabled={false}
+				onCancel={() => {}}
+				onToggleMode={() => {}}
+				developmentMode="normal"
+			/>
+		</TestWrapper>,
+	);
+
+	t.truthy(lastFrame());
+});
+
+// ============================================================================
+// File Autocomplete UI Tests
+// ============================================================================
+
+test('UserInput renders file autocomplete suggestions header', t => {
+	// Note: Testing file autocomplete requires state manipulation
+	// This test verifies the component structure supports it
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// File suggestions would appear when @ is typed and files are found
+});
+
+test('UserInput responsive placeholder for narrow terminals', t => {
+	// Test that placeholder adapts to terminal width
+	// The actual implementation uses useResponsiveTerminal hook
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Placeholder text should be present (either long or short version)
+});
+
+// ============================================================================
+// Integration Tests
+// ============================================================================
+
+test('UserInput maintains state across renders', t => {
+	const {lastFrame, rerender} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	const firstRender = lastFrame();
+	t.truthy(firstRender);
+
+	rerender(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	const secondRender = lastFrame();
+	t.truthy(secondRender);
+});
+
+test('UserInput renders with default development mode', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Default mode is 'normal'
+	t.regex(output!, /normal mode/);
+});
+
+test('UserInput handles empty custom commands array', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput customCommands={[]} />
+		</TestWrapper>,
+	);
+
+	t.truthy(lastFrame());
+});
+
+test('UserInput component structure is valid', t => {
+	const {lastFrame} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.true(output!.length > 0);
+});