@indiccoder/mentis-cli 1.1.3 → 1.1.5

package/src/ui/PlanModeUI.ts

@@ -0,0 +1,121 @@
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+
+export interface QAEntry {
+    question: string;
+    answer: string;
+    timestamp: Date;
+}
+
+/**
+ * Plan Mode UI - Shows Q&A history and handles plan → build transition
+ */
+export class PlanModeUI {
+    private static qaHistory: QAEntry[] = [];
+
+    /**
+     * Record a Q&A entry
+     */
+    static recordQA(question: string, answer: string): void {
+        this.qaHistory.push({
+            question,
+            answer,
+            timestamp: new Date()
+        });
+    }
+
+    /**
+     * Show the current Q&A history
+     */
+    static showQAHistory(): void {
+        if (this.qaHistory.length === 0) {
+            console.log(chalk.dim('  No questions asked yet.'));
+            return;
+        }
+
+        console.log('');
+        console.log(chalk.cyan('📋 Requirements gathered:'));
+        console.log(chalk.gray('─'.repeat(60)));
+
+        for (let i = 0; i < this.qaHistory.length; i++) {
+            const entry = this.qaHistory[i];
+            console.log(chalk.bold(`${i + 1}. ${entry.question}`));
+            console.log(chalk.dim(`   Answer: ${entry.answer}`));
+            console.log('');
+        }
+
+        console.log(chalk.gray('─'.repeat(60)));
+    }
+
+    /**
+     * Ask if ready to switch to build mode
+     */
+    static async askReadyToBuild(): Promise<boolean> {
+        console.log('');
+
+        const { ready } = await inquirer.prompt([
+            {
+                type: 'confirm',
+                name: 'ready',
+                message: chalk.cyan('🚀 Ready to switch to BUILD mode and implement?'),
+                default: true
+            }
+        ]);
+
+        return ready;
+    }
+
+    /**
+     * Show plan mode header/summary
+     */
+    static showPlanHeader(): void {
+        console.log('');
+        console.log(chalk.cyan.bold('🎯 PLAN MODE'));
+        console.log(chalk.dim('   Gathering requirements and planning the solution...'));
+        console.log(chalk.dim('   Type your requirements, answer questions, then switch to /build to implement.'));
+        console.log('');
+    }
+
+    /**
+     * Show suggestion to switch to build mode
+     */
+    static suggestBuildMode(): void {
+        console.log('');
+        console.log(chalk.yellow('💡 Tip: Type ') + chalk.bold('/build') + chalk.yellow(' to start implementing when ready.'));
+    }
+
+    /**
+     * Clear Q&A history (e.g., when starting a new session)
+     */
+    static clearHistory(): void {
+        this.qaHistory = [];
+    }
+
+    /**
+     * Get Q&A history
+     */
+    static getHistory(): QAEntry[] {
+        return [...this.qaHistory];
+    }
+
+    /**
+     * Show a summary of the plan
+     */
+    static showPlanSummary(): void {
+        if (this.qaHistory.length === 0) {
+            return;
+        }
+
+        console.log('');
+        console.log(chalk.cyan('📝 Plan Summary:'));
+        console.log(chalk.gray('─'.repeat(60)));
+        console.log(chalk.dim(`Questions answered: ${this.qaHistory.length}`));
+
+        // Show key answers as bullet points
+        for (const entry of this.qaHistory) {
+            console.log(chalk.dim(`  • ${entry.question}: ${entry.answer}`));
+        }
+
+        console.log(chalk.gray('─'.repeat(60)));
+    }
+}

package/src/ui/ToolExecutor.ts

@@ -0,0 +1,182 @@
+import chalk from 'chalk';
+import ora, { Ora } from 'ora';
+
+export interface ToolExecution {
+    toolName: string;
+    args: Record<string, any>;
+    status: 'running' | 'completed' | 'failed';
+    result?: string;
+    error?: string;
+}
+
+/**
+ * Visual feedback for tool execution
+ * Shows colored icons, spinners, and grouped display
+ */
+export class ToolExecutor {
+    private static executions: ToolExecution[] = [];
+    private static spinners: Map<string, Ora> = new Map();
+
+    /**
+     * Get colored text for a tool name
+     */
+    private static colorToolName(toolName: string, color: string): string {
+        switch (color) {
+            case 'blue': return chalk.blue(toolName);
+            case 'yellow': return chalk.yellow(toolName);
+            case 'cyan': return chalk.cyan(toolName);
+            case 'magenta': return chalk.magenta(toolName);
+            case 'green': return chalk.green(toolName);
+            case 'red': return chalk.red(toolName);
+            case 'gray': return chalk.gray(toolName);
+            default: return toolName;
+        }
+    }
+
+    /**
+     * Start a tool execution with visual feedback
+     */
+    static startExecution(toolName: string, args: Record<string, any>): void {
+        const execution: ToolExecution = {
+            toolName,
+            args,
+            status: 'running'
+        };
+
+        this.executions.push(execution);
+
+        // Get icon and color for tool type
+        const { icon, color } = this.getToolStyle(toolName);
+
+        // Format args for display (truncate long values)
+        const argsDisplay = this.formatArgs(args);
+
+        // Start spinner
+        const spinner = ora({
+            text: `${icon} ${this.colorToolName(toolName, color)} ${argsDisplay}`,
+            color: color as 'cyan' | 'yellow' | 'red' | 'green' | 'blue' | 'magenta' | 'white' | 'gray'
+        });
+        spinner.start();
+
+        this.spinners.set(toolName, spinner);
+    }
+
+    /**
+     * Complete a tool execution successfully
+     */
+    static completeExecution(toolName: string, result: string): void {
+        const execution = this.executions.find(e => e.toolName === toolName);
+        if (execution) {
+            execution.status = 'completed';
+            execution.result = result;
+        }
+
+        const spinner = this.spinners.get(toolName);
+        if (spinner) {
+            const { icon } = this.getToolStyle(toolName);
+            spinner.succeed(`${icon} ${chalk.green(toolName)} completed`);
+            this.spinners.delete(toolName);
+        }
+    }
+
+    /**
+     * Mark a tool execution as failed
+     */
+    static failExecution(toolName: string, error: string): void {
+        const execution = this.executions.find(e => e.toolName === toolName);
+        if (execution) {
+            execution.status = 'failed';
+            execution.error = error;
+        }
+
+        const spinner = this.spinners.get(toolName);
+        if (spinner) {
+            const { icon } = this.getToolStyle(toolName);
+            spinner.fail(`${icon} ${chalk.red(toolName)} failed: ${error}`);
+            this.spinners.delete(toolName);
+        }
+    }
+
+    /**
+     * Show grouped summary of all tool executions
+     */
+    static showSummary(): void {
+        if (this.executions.length === 0) {
+            return;
+        }
+
+        console.log('');
+        console.log(chalk.gray('─'.repeat(60)));
+        console.log(chalk.cyan('🔧 Tool Executions'));
+        console.log(chalk.gray('─'.repeat(60)));
+
+        for (const execution of this.executions) {
+            const { icon, color } = this.getToolStyle(execution.toolName);
+            const statusIcon = execution.status === 'completed' ? '✓' : execution.status === 'failed' ? '✗' : '…';
+
+            console.log(
+                `${icon} ${this.colorToolName(execution.toolName, color)} ${chalk.dim(statusIcon)}`
+            );
+        }
+
+        console.log(chalk.gray('─'.repeat(60)));
+        console.log('');
+
+        // Reset for next batch
+        this.executions = [];
+    }
+
+    /**
+     * Get visual style for a tool type
+     */
+    private static getToolStyle(toolName: string): { icon: string; color: string } {
+        const styles: Record<string, { icon: string; color: string }> = {
+            'read_file': { icon: '📖', color: 'blue' },
+            'write_file': { icon: '📄', color: 'yellow' },
+            'edit_file': { icon: '✏️', color: 'yellow' },
+            'list_dir': { icon: '📁', color: 'cyan' },
+            'search_files': { icon: '🔍', color: 'magenta' },
+            'search_web': { icon: '🌐', color: 'blue' },
+            'run_command': { icon: '💻', color: 'green' },
+            'git_commit': { icon: '📝', color: 'green' }
+        };
+
+        return styles[toolName] || { icon: '🔧', color: 'gray' };
+    }
+
+    /**
+     * Format arguments for display
+     */
+    private static formatArgs(args: Record<string, any>): string {
+        const parts: string[] = [];
+
+        for (const [key, value] of Object.entries(args)) {
+            const strValue = String(value);
+            // Truncate long values
+            const display = strValue.length > 30 ? strValue.slice(0, 30) + '...' : strValue;
+            parts.push(`${key}=${chalk.dim(display)}`);
+        }
+
+        return parts.length > 0 ? chalk.dim(`(${parts.join(', ')})`) : '';
+    }
+
+    /**
+     * Show a simple inline tool usage message
+     */
+    static showInline(toolName: string, args: Record<string, any>): void {
+        const { icon, color } = this.getToolStyle(toolName);
+        const argsDisplay = this.formatArgs(args);
+        console.log(chalk.dim(`  ${icon} ${this.colorToolName(toolName, color)} ${argsDisplay}`));
+    }
+
+    /**
+     * Clear all pending executions
+     */
+    static clear(): void {
+        for (const spinner of this.spinners.values()) {
+            spinner.stop();
+        }
+        this.spinners.clear();
+        this.executions = [];
+    }
+}

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.3 - AI Coding Agent'));
+        console.log(chalk.gray('  v1.1.6 - AI Coding Agent'));
         console.log('');
     }
 
     public static renderDashboard(config: { model: string, mode: string, cwd: string }) {
         const { model, cwd } = config;
-        const version = 'v1.1.3';
+        const version = 'v1.1.6';
 
         // Layout: Left (Status/Welcome) | Right (Tips/Activity)
         // Total width ~80 chars. 
@@ -84,4 +84,17 @@ export class UIManager {
     public static printSeparator() {
         console.log(chalk.gray('──────────────────────────────────────────────────'));
     }
+
+    public static logBullet(text: string, color: 'cyan' | 'green' | 'yellow' | 'red' | 'blue' | 'magenta' | 'white' = 'white') {
+        const bullet = color === 'white' ? '●' : chalk[color]('●');
+        console.log(`  ${bullet} ${text}`);
+    }
+
+    public static logSystem(text: string) {
+        console.log(chalk.dim(`    ${text}`));
+    }
+
+    public static logTransition(text: string) {
+        console.log(`  ${chalk.red('+')} ${chalk.red(text)}`);
+    }
 }

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
+        });
+    });
+});