@indiccoder/mentis-cli 1.1.2 → 1.1.4

package/src/ui/InputBox.ts

@@ -0,0 +1,145 @@
+/**
+ * InputBox - Simple clean input with top line only
+ * Bottom line appears after submission (cross-platform compatible)
+ */
+
+import readline from 'readline';
+import chalk from 'chalk';
+
+export interface InputBoxOptions {
+    placeholder?: string;
+    showHint?: boolean;
+    hint?: string;
+}
+
+export class InputBox {
+    private history: string[] = [];
+    private historySize: number = 1000;
+
+    constructor(history: string[] = []) {
+        this.history = history;
+    }
+
+    /**
+     * Get terminal width
+     */
+    private getTerminalWidth(): number {
+        return process.stdout.columns || 80;
+    }
+
+    /**
+     * Create horizontal line
+     */
+    private createLine(): string {
+        const width = this.getTerminalWidth();
+        return chalk.gray('─'.repeat(width));
+    }
+
+    /**
+     * Get user input with horizontal lines around it
+     */
+    async prompt(options: InputBoxOptions = {}): Promise<string> {
+        const { showHint = false, hint } = options;
+
+        // Display top horizontal line
+        console.log(this.createLine());
+
+        // Display hint if provided
+        if (showHint && hint) {
+            console.log(chalk.dim(`  ${hint}`));
+        }
+
+        return new Promise<string>((resolve) => {
+            // Create readline with simple prompt
+            const rl = readline.createInterface({
+                input: process.stdin,
+                output: process.stdout,
+                prompt: chalk.cyan('> '),
+                history: this.history,
+                historySize: this.historySize,
+                completer: this.completer.bind(this)
+            });
+
+            rl.prompt();
+
+            rl.on('line', (line) => {
+                // Display bottom horizontal line after input
+                console.log(this.createLine());
+                rl.close();
+                resolve(line);
+            });
+
+            // Handle Ctrl+C
+            rl.on('SIGINT', () => {
+                console.log(this.createLine());
+                rl.close();
+                resolve('/exit');
+            });
+        });
+    }
+
+    /**
+     * Simple tab completer for commands
+     */
+    private completer(line: string) {
+        const commands = [
+            '/help', '/clear', '/exit', '/update', '/config',
+            '/init', '/resume', '/skills', '/commands', '/checkpoint',
+            '/model', '/use', '/mcp', '/search', '/run', '/commit'
+        ];
+
+        const hits = commands.filter(c => c.startsWith(line));
+        return [hits.length ? hits : commands, line];
+    }
+
+    /**
+     * Add input to history
+     */
+    addToHistory(input: string): void {
+        if (!input || input === this.history[0]) return;
+        this.history.unshift(input);
+        if (this.history.length > this.historySize) {
+            this.history = this.history.slice(0, this.historySize);
+        }
+    }
+
+    /**
+     * Get current history
+     */
+    getHistory(): string[] {
+        return this.history;
+    }
+
+    /**
+     * Display separator and context info before input
+     */
+    public displayFrame(contextInfo?: { messageCount: number; contextPercent: number }): void {
+        console.log('');
+
+        // Context bar with message count and percentage
+        if (contextInfo) {
+            const { messageCount, contextPercent } = contextInfo;
+            const color = contextPercent < 60 ? chalk.green : contextPercent < 80 ? chalk.yellow : chalk.red;
+            const bar = this.createProgressBar(contextPercent);
+            console.log(chalk.dim(`  ${bar} ${messageCount} msgs ${color(contextPercent + '%')}`));
+        }
+    }
+
+    /**
+     * Display separator (alias for displayFrame)
+     */
+    public displaySeparator(contextInfo?: { messageCount: number; contextPercent: number }): void {
+        this.displayFrame(contextInfo);
+    }
+
+    /**
+     * Create a visual progress bar
+     */
+    private createProgressBar(percentage: number): string {
+        const width = 15;
+        const filled = Math.round(percentage / 100 * width);
+        const empty = width - filled;
+        const color = percentage < 60 ? chalk.green : percentage < 80 ? chalk.yellow : chalk.red;
+        return color('█'.repeat(filled)) + chalk.dim('░'.repeat(empty));
+    }
+}

package/src/ui/UIManager.ts

@@ -14,13 +14,13 @@ export class UIManager {
             whitespaceBreak: true,
         });
         console.log(gradient.pastel.multiline(logoText));
-        console.log(chalk.gray('  v1.1.2 - AI Coding Agent'));
+        console.log(chalk.gray('  v1.1.3 - AI Coding Agent'));
         console.log('');
     }
 
     public static renderDashboard(config: { model: string, mode: string, cwd: string }) {
         const { model, cwd } = config;
-        const version = 'v1.1.2';
+        const version = 'v1.1.3';
 
         // Layout: Left (Status/Welcome) | Right (Tips/Activity)
         // Total width ~80 chars. 

package/src/utils/__mocks__/chalk.ts

@@ -0,0 +1,19 @@
+// Manual mock for chalk to avoid ESM issues in Jest
+module.exports = {
+    dim: (str: string) => str,
+    green: (str: string) => str,
+    yellow: (str: string) => str,
+    red: (str: string) => str,
+    gray: (str: string) => str,
+    bold: (str: string) => str,
+    cyan: (str: string) => str,
+    default: {
+        dim: (str: string) => str,
+        green: (str: string) => str,
+        yellow: (str: string) => str,
+        red: (str: string) => str,
+        gray: (str: string) => str,
+        bold: (str: string) => str,
+        cyan: (str: string) => str
+    }
+};

package/src/utils/__tests__/ContextVisualizer.test.ts

@@ -0,0 +1,118 @@
+/**
+ * Tests for ContextVisualizer
+ */
+
+import { ContextVisualizer } from '../ContextVisualizer';
+import { ChatMessage } from '../../llm/ModelInterface';
+
+describe('ContextVisualizer', () => {
+    let visualizer: ContextVisualizer;
+
+    beforeEach(() => {
+        visualizer = new ContextVisualizer();
+    });
+
+    describe('calculateUsage', () => {
+        it('should handle empty history', () => {
+            const history: ChatMessage[] = [];
+            const usage = visualizer.calculateUsage(history);
+
+            // Includes 2000 char overhead = 500 tokens
+            expect(usage.tokens).toBe(500);
+            expect(usage.maxTokens).toBe(128000);
+            expect(usage).toHaveProperty('percentage');
+            expect(usage).toHaveProperty('tokens');
+            expect(usage).toHaveProperty('maxTokens');
+        });
+
+        it('should calculate tokens for messages', () => {
+            const history: ChatMessage[] = [
+                { role: 'system', content: 'You are a helpful assistant.' },
+                { role: 'user', content: 'Hello' },
+                { role: 'assistant', content: 'Hi there!' }
+            ];
+
+            const usage = visualizer.calculateUsage(history);
+
+            expect(usage.tokens).toBeGreaterThan(500);
+            expect(usage.tokens).toBeLessThan(1000);
+            expect(usage.maxTokens).toBe(128000);
+        });
+
+        it('should handle large messages', () => {
+            const largeContent = 'x'.repeat(10000);
+            const history: ChatMessage[] = [
+                { role: 'user', content: largeContent }
+            ];
+
+            const usage = visualizer.calculateUsage(history);
+
+            expect(usage.tokens).toBeGreaterThan(1500);
+        });
+    });
+
+    describe('formatBar', () => {
+        it('should format bar at low usage', () => {
+            const usage = { tokens: 1000, percentage: 5, maxTokens: 128000 };
+            const bar = visualizer.formatBar(usage);
+
+            // Check that bar contains expected data (without chalk dependency)
+            expect(bar).toContain('5');
+            expect(bar).toContain('1k');
+            expect(bar).toContain('128');
+        });
+
+        it('should format bar at medium usage', () => {
+            const usage = { tokens: 50000, percentage: 40, maxTokens: 128000 };
+            const bar = visualizer.formatBar(usage);
+
+            expect(bar).toContain('40');
+            expect(bar).toContain('50k');
+        });
+
+        it('should format bar at high usage', () => {
+            const usage = { tokens: 100000, percentage: 80, maxTokens: 128000 };
+            const bar = visualizer.formatBar(usage);
+
+            expect(bar).toContain('80');
+            expect(bar).toContain('100k');
+        });
+    });
+
+    describe('shouldCompact', () => {
+        it('should return false for low percentage', () => {
+            const history: ChatMessage[] = [
+                { role: 'user', content: 'small message' }
+            ];
+
+            const shouldCompact = visualizer.shouldCompact(history);
+            expect(shouldCompact).toBe(false);
+        });
+
+        it('should return true at 80% threshold', () => {
+            // Create enough content to exceed 80%
+            // 80% of 128000 tokens = 102400 tokens = ~409600 chars
+            // Subtract 2000 overhead = ~407400 chars needed
+            const largeContent = 'x'.repeat(410000);
+            const history: ChatMessage[] = [
+                { role: 'system', content: largeContent },
+                { role: 'user', content: largeContent }
+            ];
+
+            const shouldCompact = visualizer.shouldCompact(history);
+            expect(shouldCompact).toBe(true);
+        });
+    });
+
+    describe('setMaxTokens', () => {
+        it('should update max tokens', () => {
+            visualizer.setMaxTokens(32000);
+
+            const history: ChatMessage[] = [];
+            const usage = visualizer.calculateUsage(history);
+
+            expect(usage.maxTokens).toBe(32000);
+            expect(usage.percentage).toBeGreaterThan(1); // Should be higher percentage with smaller max
+        });
+    });
+});