@indiccoder/mentis-cli 1.1.2 → 1.1.3

package/dist/repl/ReplManager.js

@@ -44,6 +44,7 @@ const ConfigManager_1 = require("../config/ConfigManager");
 const OpenAIClient_1 = require("../llm/OpenAIClient");
 const ContextManager_1 = require("../context/ContextManager");
 const UIManager_1 = require("../ui/UIManager");
+const InputBox_1 = require("../ui/InputBox");
 const FileTools_1 = require("../tools/FileTools");
 const SearchTools_1 = require("../tools/SearchTools");
 const PersistentShellTool_1 = require("../tools/PersistentShellTool");
@@ -224,46 +225,33 @@ class ReplManager {
             }
             catch (e) { }
         }
+        // Initialize InputBox with history
+        const inputBox = new InputBox_1.InputBox(commandHistory);
         while (true) {
-            // Minimalist Separator
-            console.log(chalk_1.default.gray('────────────────────────────────────────────────────────────────────────────────'));
-            // Hint (Claude style puts it below, we put it above for standard terminal compatibility)
-            console.log(chalk_1.default.dim('  ? for shortcuts'));
-            const promptText = `> `; // Clean prompt
-            // Use readline for basic input to support history
-            const answer = await new Promise((resolve) => {
-                const rl = readline.createInterface({
-                    input: process.stdin,
-                    output: process.stdout,
-                    history: commandHistory,
-                    historySize: 1000,
-                    prompt: promptText
-                });
-                rl.prompt();
-                rl.on('line', (line) => {
-                    rl.close();
-                    resolve(line);
-                });
+            // Calculate context usage for display
+            const usage = this.contextVisualizer.calculateUsage(this.history);
+            // Display enhanced input frame
+            inputBox.displayFrame({
+                messageCount: this.history.length,
+                contextPercent: usage.percentage
+            });
+            // Get styled input
+            const answer = await inputBox.prompt({
+                showHint: this.history.length === 0,
+                hint: 'Type your message or /help for commands'
             });
-            // Update history manually or grab from rl? 
-            // rl.history gets updated when user hits enter.
-            // But we closed rl. We should manually save the input to our tracking array and file.
             const input = answer.trim();
             if (input) {
-                // Update in-memory history (for next readline instance)
-                // Readline history has newest at 0.
-                // Avoid duplicates if needed, but standard shell keeps them.
-                if (commandHistory[0] !== input) {
-                    commandHistory.unshift(input);
-                }
-                // Append to file (as standard log, so append at end)
+                // Update history via InputBox
+                inputBox.addToHistory(input);
+                // Append to file
                 try {
                     fs.appendFileSync(HISTORY_FILE, input + '\n');
                 }
                 catch (e) { }
             }
-            if (!answer.trim())
-                continue; // Skip empty but allow it to close readline loop
+            if (!input)
+                continue;
             if (input.startsWith('/')) {
                 await this.handleCommand(input);
                 continue;

package/dist/ui/InputBox.js

@@ -0,0 +1,127 @@
+"use strict";
+/**
+ * InputBox - Simple clean input with top line only
+ * Bottom line appears after submission (cross-platform compatible)
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputBox = void 0;
+const readline_1 = __importDefault(require("readline"));
+const chalk_1 = __importDefault(require("chalk"));
+class InputBox {
+    constructor(history = []) {
+        this.history = [];
+        this.historySize = 1000;
+        this.history = history;
+    }
+    /**
+     * Get terminal width
+     */
+    getTerminalWidth() {
+        return process.stdout.columns || 80;
+    }
+    /**
+     * Create horizontal line
+     */
+    createLine() {
+        const width = this.getTerminalWidth();
+        return chalk_1.default.gray('─'.repeat(width));
+    }
+    /**
+     * Get user input with horizontal lines around it
+     */
+    async prompt(options = {}) {
+        const { showHint = false, hint } = options;
+        // Display top horizontal line
+        console.log(this.createLine());
+        // Display hint if provided
+        if (showHint && hint) {
+            console.log(chalk_1.default.dim(`  ${hint}`));
+        }
+        return new Promise((resolve) => {
+            // Create readline with simple prompt
+            const rl = readline_1.default.createInterface({
+                input: process.stdin,
+                output: process.stdout,
+                prompt: chalk_1.default.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
+     */
+    completer(line) {
+        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) {
+        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() {
+        return this.history;
+    }
+    /**
+     * Display separator and context info before input
+     */
+    displayFrame(contextInfo) {
+        console.log('');
+        // Context bar with message count and percentage
+        if (contextInfo) {
+            const { messageCount, contextPercent } = contextInfo;
+            const color = contextPercent < 60 ? chalk_1.default.green : contextPercent < 80 ? chalk_1.default.yellow : chalk_1.default.red;
+            const bar = this.createProgressBar(contextPercent);
+            console.log(chalk_1.default.dim(`  ${bar} ${messageCount} msgs ${color(contextPercent + '%')}`));
+        }
+    }
+    /**
+     * Display separator (alias for displayFrame)
+     */
+    displaySeparator(contextInfo) {
+        this.displayFrame(contextInfo);
+    }
+    /**
+     * Create a visual progress bar
+     */
+    createProgressBar(percentage) {
+        const width = 15;
+        const filled = Math.round(percentage / 100 * width);
+        const empty = width - filled;
+        const color = percentage < 60 ? chalk_1.default.green : percentage < 80 ? chalk_1.default.yellow : chalk_1.default.red;
+        return color('█'.repeat(filled)) + chalk_1.default.dim('░'.repeat(empty));
+    }
+}
+exports.InputBox = InputBox;

package/dist/ui/UIManager.js

@@ -19,12 +19,12 @@ class UIManager {
             whitespaceBreak: true,
         });
         console.log(gradient_string_1.default.pastel.multiline(logoText));
-        console.log(chalk_1.default.gray('  v1.1.2 - AI Coding Agent'));
+        console.log(chalk_1.default.gray('  v1.1.3 - AI Coding Agent'));
         console.log('');
     }
     static renderDashboard(config) {
         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. 
         // Left ~45, Right ~30.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indiccoder/mentis-cli",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,6 +33,7 @@
     "axios": "^1.13.2",
     "boxen": "^8.0.1",
     "chalk": "^5.6.2",
+    "cli-cursor": "^5.0.0",
     "cli-highlight": "^2.1.11",
     "commander": "^14.0.2",
     "dotenv": "^17.2.3",
@@ -54,6 +55,7 @@
     "yaml": "^2.7.0"
   },
   "devDependencies": {
+    "@types/cli-cursor": "^2.1.0",
     "@types/figlet": "^1.7.0",
     "@types/fs-extra": "^11.0.4",
     "@types/gradient-string": "^1.1.6",

package/src/repl/ReplManager.ts

@@ -7,6 +7,7 @@ import { OpenAIClient } from '../llm/OpenAIClient';
 
 import { ContextManager } from '../context/ContextManager';
 import { UIManager } from '../ui/UIManager';
+import { InputBox } from '../ui/InputBox';
 import { WriteFileTool, ReadFileTool, ListDirTool } from '../tools/FileTools';
 import { SearchFileTool } from '../tools/SearchTools';
 import { PersistentShellTool } from '../tools/PersistentShellTool';
@@ -229,53 +230,38 @@ export class ReplManager {
             } catch (e) { }
         }
 
+        // Initialize InputBox with history
+        const inputBox = new InputBox(commandHistory);
+
         while (true) {
-            // Minimalist Separator
-            console.log(chalk.gray('────────────────────────────────────────────────────────────────────────────────'));
-
-            // Hint (Claude style puts it below, we put it above for standard terminal compatibility)
-            console.log(chalk.dim('  ? for shortcuts'));
-
-            const promptText = `> `;  // Clean prompt
-
-            // Use readline for basic input to support history
-            const answer = await new Promise<string>((resolve) => {
-                const rl = readline.createInterface({
-                    input: process.stdin,
-                    output: process.stdout,
-                    history: commandHistory,
-                    historySize: 1000,
-                    prompt: promptText
-                });
+            // Calculate context usage for display
+            const usage = this.contextVisualizer.calculateUsage(this.history);
 
-                rl.prompt();
+            // Display enhanced input frame
+            inputBox.displayFrame({
+                messageCount: this.history.length,
+                contextPercent: usage.percentage
+            });
 
-                rl.on('line', (line) => {
-                    rl.close();
-                    resolve(line);
-                });
+            // Get styled input
+            const answer = await inputBox.prompt({
+                showHint: this.history.length === 0,
+                hint: 'Type your message or /help for commands'
             });
 
-            // Update history manually or grab from rl? 
-            // rl.history gets updated when user hits enter.
-            // But we closed rl. We should manually save the input to our tracking array and file.
             const input = answer.trim();
 
             if (input) {
-                // Update in-memory history (for next readline instance)
-                // Readline history has newest at 0.
-                // Avoid duplicates if needed, but standard shell keeps them.
-                if (commandHistory[0] !== input) {
-                    commandHistory.unshift(input);
-                }
+                // Update history via InputBox
+                inputBox.addToHistory(input);
 
-                // Append to file (as standard log, so append at end)
+                // Append to file
                 try {
                     fs.appendFileSync(HISTORY_FILE, input + '\n');
                 } catch (e) { }
             }
 
-            if (!answer.trim()) continue; // Skip empty but allow it to close readline loop
+            if (!input) continue;
 
             if (input.startsWith('/')) {
                 await this.handleCommand(input);

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.