@gguf/coder 0.3.0 → 0.3.1

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

@@ -0,0 +1,780 @@
+import test from 'ava';
+import {render} from 'ink-testing-library';
+import React from 'react';
+import {themes} from '../../config/themes.js';
+import {ThemeContext} from '../../hooks/useTheme.js';
+import type {Message} from '../../types/core.js';
+import type {TokenBreakdown} from '../../types/usage.js';
+import {UsageDisplay} from './usage-display.js';
+
+console.log(`\nusage-display.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>
+	);
+};
+
+// Helper to create mock breakdown
+function createMockBreakdown(): TokenBreakdown {
+	return {
+		system: 1000,
+		userMessages: 500,
+		assistantMessages: 800,
+		toolResults: 300,
+		toolDefinitions: 200,
+		total: 2800, // Sum of all categories
+	};
+}
+
+// Helper to create mock messages
+function createMockMessages(): Message[] {
+	return [
+		{role: 'system', content: 'You are a helpful assistant.'},
+		{role: 'user', content: 'Hello, how are you?'},
+		{role: 'assistant', content: 'I am doing well, thank you!'},
+		{role: 'user', content: 'Can you help me with a task?'},
+		{role: 'assistant', content: 'Of course! What do you need?'},
+	];
+}
+
+// Mock getMessageTokens function
+function mockGetMessageTokens(message: Message): number {
+	// Simple mock: estimate based on content length
+	return Math.ceil(message.content.length / 4);
+}
+
+// ============================================================================
+// Component Rendering Tests
+// ============================================================================
+
+test('UsageDisplay renders without crashing', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+});
+
+test('UsageDisplay displays context usage header', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Context Usage/);
+});
+
+test('UsageDisplay displays overall usage section', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Overall Usage/);
+});
+
+test('UsageDisplay displays usage percentage', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// 2800 / 8000 = 35%
+	t.regex(output!, /35%/);
+});
+
+test('UsageDisplay displays token counts', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /2,800/); // Current tokens (formatted)
+	t.regex(output!, /8,000/); // Context limit (formatted)
+});
+
+// ============================================================================
+// Breakdown Category Tests
+// ============================================================================
+
+test('UsageDisplay displays breakdown by category section', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Breakdown by Category/);
+});
+
+test('UsageDisplay displays system prompt category', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /System Prompt/);
+	t.regex(output!, /1,000/); // System tokens from breakdown
+});
+
+test('UsageDisplay displays user messages category', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /User Messages/);
+	t.regex(output!, /500/); // User message tokens from breakdown
+});
+
+test('UsageDisplay displays assistant messages category', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Assistant Messages/);
+	t.regex(output!, /800/); // Assistant message tokens from breakdown
+});
+
+test('UsageDisplay displays tool messages category', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Tool Messages/);
+	t.regex(output!, /300/); // Tool result tokens from breakdown
+});
+
+test('UsageDisplay displays tool definitions category', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Tool Definitions/);
+	t.regex(output!, /200/); // Tool definition tokens from breakdown
+});
+
+// ============================================================================
+// Model Information Tests
+// ============================================================================
+
+test('UsageDisplay displays model information section', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Model Information/);
+});
+
+test('UsageDisplay displays provider name', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="anthropic"
+				model="claude-3-opus"
+				contextLimit={200000}
+				currentTokens={50000}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="claude_tokenizer"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Provider:/);
+	t.regex(output!, /anthropic/);
+});
+
+test('UsageDisplay displays model name', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4-turbo"
+				contextLimit={128000}
+				currentTokens={10000}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Model:/);
+	t.regex(output!, /gpt-4-turbo/);
+});
+
+test('UsageDisplay displays context limit', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Context Limit:/);
+	t.regex(output!, /8,000/);
+});
+
+test('UsageDisplay displays tokenizer name', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Tokenizer:/);
+	t.regex(output!, /cl100k_base/);
+});
+
+// ============================================================================
+// Recent Activity Tests
+// ============================================================================
+
+test('UsageDisplay displays recent activity section', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Recent Activity/);
+});
+
+test('UsageDisplay displays last 5 messages count', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Last 5 messages:/);
+	t.regex(output!, /tokens/); // Should show token count
+});
+
+test('UsageDisplay displays largest message size', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Largest message:/);
+	t.regex(output!, /tokens/);
+});
+
+// ============================================================================
+// Available Tokens Tests
+// ============================================================================
+
+test('UsageDisplay displays available tokens', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Available:/);
+	t.regex(output!, /5,200/); // 8000 - 2800 = 5200
+});
+
+// ============================================================================
+// Edge Cases
+// ============================================================================
+
+test('UsageDisplay handles null context limit', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={null}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /Unknown/); // Should display "Unknown" for context limit
+});
+
+test('UsageDisplay handles zero current tokens', t => {
+	const emptyBreakdown: TokenBreakdown = {
+		system: 0,
+		userMessages: 0,
+		assistantMessages: 0,
+		toolResults: 0,
+		toolDefinitions: 0,
+		total: 0,
+	};
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={0}
+				breakdown={emptyBreakdown}
+				messages={[]}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /0%/); // Should display 0%
+});
+
+test('UsageDisplay handles empty messages array', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={createMockBreakdown()}
+				messages={[]}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Should still render without crashing
+});
+
+test('UsageDisplay handles 100% usage', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={8000}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /100%/);
+	t.regex(output!, /Available:.*0 tokens/); // 0 tokens available
+});
+
+test('UsageDisplay handles over 100% usage', t => {
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={9000}
+				breakdown={createMockBreakdown()}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Should handle gracefully, though this is an edge case
+	t.regex(output!, /\d+%/); // Should display some percentage
+});
+
+test('UsageDisplay handles very large token counts', t => {
+	const largeBreakdown: TokenBreakdown = {
+		system: 100000,
+		userMessages: 50000,
+		assistantMessages: 80000,
+		toolResults: 30000,
+		toolDefinitions: 20000,
+		total: 280000,
+	};
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="anthropic"
+				model="claude-3-opus"
+				contextLimit={200000}
+				currentTokens={280000}
+				breakdown={largeBreakdown}
+				messages={createMockMessages()}
+				tokenizerName="claude_tokenizer"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Should format large numbers with commas
+	t.regex(output!, /100,000/);
+	t.regex(output!, /200,000/);
+});
+
+test('UsageDisplay handles single message', t => {
+	const messages: Message[] = [{role: 'user', content: 'Only message'}];
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={100}
+				breakdown={createMockBreakdown()}
+				messages={messages}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Should handle single message in recent activity
+	t.regex(output!, /Last 5 messages:/);
+});
+
+test('UsageDisplay handles fewer than 5 messages', t => {
+	const messages: Message[] = [
+		{role: 'user', content: 'Message 1'},
+		{role: 'assistant', content: 'Message 2'},
+		{role: 'user', content: 'Message 3'},
+	];
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={100}
+				breakdown={createMockBreakdown()}
+				messages={messages}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	// Should handle fewer than 5 messages gracefully
+	t.regex(output!, /Last 5 messages:/);
+});
+
+// ============================================================================
+// Progress Bar Tests (Indirectly via percentages)
+// ============================================================================
+
+test('UsageDisplay calculates correct percentages for categories', t => {
+	// Current tokens = 2800 from breakdown (1000+500+800+300+200)
+	const breakdown: TokenBreakdown = {
+		system: 1000, // 1000/2800 = ~36%
+		userMessages: 500, // 500/2800 = ~18%
+		assistantMessages: 800, // 800/2800 = ~29%
+		toolResults: 300, // 300/2800 = ~11%
+		toolDefinitions: 200, // 200/2800 = ~7%
+		total: 2800,
+	};
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={2800}
+				breakdown={breakdown}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+
+	// Check that percentages are displayed (rounded)
+	t.regex(output!, /36%.*1,000/); // System: ~36%
+	t.regex(output!, /18%.*500/); // User: ~18%
+	t.regex(output!, /29%.*800/); // Assistant: ~29%
+	t.regex(output!, /11%.*300/); // Tool results: ~11%
+	t.regex(output!, /7%.*200/); // Tool definitions: ~7%
+});
+
+test('UsageDisplay handles zero tokens in a category', t => {
+	const breakdown: TokenBreakdown = {
+		system: 1000,
+		userMessages: 0,
+		assistantMessages: 800,
+		toolResults: 0,
+		toolDefinitions: 0,
+		total: 1800,
+	};
+
+	const {lastFrame} = render(
+		<MockThemeProvider>
+			<UsageDisplay
+				provider="openai"
+				model="gpt-4"
+				contextLimit={8000}
+				currentTokens={1800}
+				breakdown={breakdown}
+				messages={createMockMessages()}
+				tokenizerName="cl100k_base"
+				getMessageTokens={mockGetMessageTokens}
+			/>
+		</MockThemeProvider>,
+	);
+
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /0%.*0\)/); // Categories with 0 tokens should show 0%
+});