@gguf/coder 0.3.1 → 0.3.2

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

@@ -1,291 +0,0 @@
-/**
- * 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

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