From 942eaabe001d5dd98a7efb07ef128df177a2f75e Mon Sep 17 00:00:00 2001
From: jainiksha <jainiksha.patel2007@gmail.com>
Date: Sun, 21 Jun 2026 01:48:46 +0530
Subject: [PATCH 1/3] feat: add command auto-completion support to TextInput

---
 packages/widgets/src/input/TextInput.ts | 363 ++++++++++++++----------
 1 file changed, 216 insertions(+), 147 deletions(-)

diff --git a/packages/widgets/src/input/TextInput.ts b/packages/widgets/src/input/TextInput.ts
index eda1655b..95df7528 100644
--- a/packages/widgets/src/input/TextInput.ts
+++ b/packages/widgets/src/input/TextInput.ts
@@ -11,23 +11,36 @@ import {
     type KeyEvent,
     splitGraphemes
 } from '@termuijs/core';
+
 import { Widget } from '../base/Widget.js';
 import { type VimMode } from './vim.js';
 
 export type { VimMode };
 
 /**
- * TextInput — a single-line text input field.
+ * TextInput — a single-line text input field
+ * with optional command auto-completion support.
  */
 export class TextInput extends Widget {
     private _value = '';
     private _cursorPos = 0;
+
     private _placeholder: string;
     private _mask: string | null;
     private _maxLength: number;
+
     private _onChange?: (value: string) => void;
     private _onSubmit?: (value: string) => void;
-    private _vimMode: VimMode = process.env.TERMUI_KEYBINDINGS === 'vim' ? 'normal' : 'insert';
+
+    // Auto-complete
+    private _suggestions: string[] = [];
+    private _suggestionIndex = 0;
+
+    // Vim mode support
+    private _vimMode: VimMode =
+        process.env.TERMUI_KEYBINDINGS === 'vim'
+            ? 'normal'
+            : 'insert';
 
     constructor(
         style: Partial<Style> = {},
@@ -35,35 +48,56 @@ export class TextInput extends Widget {
             placeholder?: string;
             mask?: string;
             maxLength?: number;
+            suggestions?: string[];
             onChange?: (value: string) => void;
             onSubmit?: (value: string) => void;
         } = {},
     ) {
-        super({ border: 'single', height: 3, ...style });
+        super({
+            border: 'single',
+            height: 3,
+            ...style,
+        });
 
         this._placeholder = options.placeholder ?? '';
         this._mask = options.mask ?? null;
         this._maxLength = options.maxLength ?? Infinity;
+
         this._onChange = options.onChange;
         this._onSubmit = options.onSubmit;
 
+        // Auto-complete data
+        this._suggestions = options.suggestions ?? [];
+
         this.focusable = true;
 
-        this.events.on('key', (event: KeyEvent) => this.handleKey(event));
+        this.events.on('key', (event: KeyEvent) =>
+            this.handleKey(event)
+        );
     }
 
+        // ── Getters & Setters ─────────────────────────────
+
     get value(): string {
         return this._value;
     }
 
     set value(v: string) {
         const graphemes = splitGraphemes(v);
+
         if (graphemes.length > this._maxLength) {
-            this._value = graphemes.slice(0, this._maxLength).join('');
+            this._value = graphemes
+                .slice(0, this._maxLength)
+                .join('');
         } else {
             this._value = v;
         }
-        this._cursorPos = Math.min(this._cursorPos, splitGraphemes(this._value).length);
+
+        this._cursorPos = Math.min(
+            this._cursorPos,
+            splitGraphemes(this._value).length
+        );
+
         this.markDirty();
     }
 
@@ -76,37 +110,92 @@ export class TextInput extends Widget {
         this.markDirty();
     }
 
+
+    // ── Text Editing ──────────────────────────────────
+
     insertChar(char: string): void {
         const graphemes = splitGraphemes(this._value);
-        if (graphemes.length >= this._maxLength) return;
+
+        if (graphemes.length >= this._maxLength) {
+            return;
+        }
+
         graphemes.splice(this._cursorPos, 0, char);
+
         this._value = graphemes.join('');
         this._cursorPos++;
+
         this._onChange?.(this._value);
+
+        // reset autocomplete selection
+        this._suggestionIndex = 0;
+
         this.markDirty();
     }
 
+
     deleteBack(): void {
-        if (this._cursorPos > 0) {
-            const graphemes = splitGraphemes(this._value);
-            graphemes.splice(this._cursorPos - 1, 1);
-            this._value = graphemes.join('');
-            this._cursorPos--;
-            this._onChange?.(this._value);
-            this.markDirty();
+        if (this._cursorPos <= 0) {
+            return;
         }
+
+        const graphemes = splitGraphemes(this._value);
+
+        graphemes.splice(this._cursorPos - 1, 1);
+
+        this._value = graphemes.join('');
+        this._cursorPos--;
+
+        this._onChange?.(this._value);
+        this.markDirty();
     }
 
+
     deleteForward(): void {
         const graphemes = splitGraphemes(this._value);
-        if (this._cursorPos < graphemes.length) {
-            graphemes.splice(this._cursorPos, 1);
-            this._value = graphemes.join('');
-            this._onChange?.(this._value);
-            this.markDirty();
+
+        if (this._cursorPos >= graphemes.length) {
+            return;
+        }
+
+        graphemes.splice(this._cursorPos, 1);
+
+        this._value = graphemes.join('');
+
+        this._onChange?.(this._value);
+        this.markDirty();
+    }
+
+
+    // ── Auto Complete ─────────────────────────────────
+
+    getSuggestions(input: string): string[] {
+        return this._suggestions.filter(item =>
+            item
+                .toLowerCase()
+                .includes(input.toLowerCase())
+        );
+    }
+
+
+    acceptSuggestion(): void {
+        const suggestions = this.getSuggestions(this._value);
+
+        if (suggestions.length === 0) {
+            return;
         }
+
+        this.value = suggestions[this._suggestionIndex];
+
+        this._cursorPos = splitGraphemes(
+            this._value
+        ).length;
+
+        this.markDirty();
     }
 
+        // ── Cursor Movement ───────────────────────────────
+
     moveCursorLeft(): void {
         const next = Math.max(0, this._cursorPos - 1);
 
@@ -118,9 +207,14 @@ export class TextInput extends Widget {
         this.markDirty();
     }
 
+
     moveCursorRight(): void {
         const graphemes = splitGraphemes(this._value);
-        const next = Math.min(graphemes.length, this._cursorPos + 1);
+
+        const next = Math.min(
+            graphemes.length,
+            this._cursorPos + 1
+        );
 
         if (next === this._cursorPos) {
             return;
@@ -130,6 +224,7 @@ export class TextInput extends Widget {
         this.markDirty();
     }
 
+
     moveCursorHome(): void {
         if (this._cursorPos === 0) {
             return;
@@ -139,8 +234,10 @@ export class TextInput extends Widget {
         this.markDirty();
     }
 
+
     moveCursorEnd(): void {
         const graphemes = splitGraphemes(this._value);
+
         if (this._cursorPos === graphemes.length) {
             return;
         }
@@ -149,20 +246,29 @@ export class TextInput extends Widget {
         this.markDirty();
     }
 
+
+    // ── Actions ───────────────────────────────────────
+
     submit(): void {
         this._onSubmit?.(this._value);
     }
 
+
     clear(): void {
         this._value = '';
         this._cursorPos = 0;
+
+        this._suggestionIndex = 0;
+
         this._onChange?.('');
+
         this.markDirty();
     }
 
-    handleKey(event: KeyEvent): void {
+        handleKey(event: KeyEvent): void {
         const isVim = process.env.TERMUI_KEYBINDINGS === 'vim';
 
+        // Vim mode handling
         if (isVim) {
             if (this._vimMode === 'normal') {
                 switch (event.key) {
@@ -171,126 +277,116 @@ export class TextInput extends Widget {
                         this.markDirty();
                         event.preventDefault();
                         event.stopPropagation();
-                        break;
+                        return;
+
                     case 'a':
                         this._vimMode = 'insert';
                         this.moveCursorRight();
                         this.markDirty();
                         event.preventDefault();
                         event.stopPropagation();
-                        break;
-                    case 'v':
-                        this._vimMode = 'visual';
-                        this.markDirty();
-                        event.preventDefault();
-                        event.stopPropagation();
-                        break;
+                        return;
+
                     case 'h':
                         this.moveCursorLeft();
                         event.preventDefault();
                         event.stopPropagation();
-                        break;
+                        return;
+
                     case 'l':
                         this.moveCursorRight();
                         event.preventDefault();
                         event.stopPropagation();
-                        break;
-                    case 'x': {
-                        const graphemes = splitGraphemes(this._value);
-                        if (this._cursorPos < graphemes.length) {
-                            graphemes.splice(this._cursorPos, 1);
-                            this._value = graphemes.join('');
-                            this._cursorPos = Math.min(this._cursorPos, graphemes.length - 1);
-                            this._cursorPos = Math.max(0, this._cursorPos);
-                            this._onChange?.(this._value);
-                            this.markDirty();
-                        }
+                        return;
+
+                    case 'x':
+                        this.deleteForward();
                         event.preventDefault();
                         event.stopPropagation();
-                        break;
-                    }
-                    case 'j':
-                        event.key = 'tab';
-                        event.shift = false;
-                        break;
-                    case 'k':
-                        event.key = 'tab';
-                        event.shift = true;
-                        break;
+                        return;
+
                     case 'enter':
                     case 'return':
                         this.submit();
                         event.preventDefault();
                         event.stopPropagation();
-                        break;
+                        return;
+
                     default:
                         event.preventDefault();
                         event.stopPropagation();
-                        break;
-                }
-                return;
-            } else if (this._vimMode === 'visual') {
-                if (event.key === 'escape') {
-                    this._vimMode = 'normal';
-                    this.markDirty();
-                    event.preventDefault();
-                    event.stopPropagation();
-                } else {
-                    event.preventDefault();
-                    event.stopPropagation();
+                        return;
                 }
+            }
+
+            if (this._vimMode === 'insert' && event.key === 'escape') {
+                this._vimMode = 'normal';
+                this.moveCursorLeft();
+
+                event.preventDefault();
+                event.stopPropagation();
                 return;
-            } else if (this._vimMode === 'insert') {
-                if (event.key === 'escape') {
-                    this._vimMode = 'normal';
-                    this.moveCursorLeft();
-                    this.markDirty();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
             }
         }
 
+        // Normal input handling
         switch (event.key) {
+            case 'tab':
+                this.acceptSuggestion();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+
             case 'backspace':
                 this.deleteBack();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
+
             case 'delete':
                 this.deleteForward();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
+
             case 'left':
                 this.moveCursorLeft();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
+
             case 'right':
                 this.moveCursorRight();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
+
             case 'home':
                 this.moveCursorHome();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
+
             case 'end':
                 this.moveCursorEnd();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
-            case 'return':
+
             case 'enter':
+            case 'return':
                 this.submit();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
+
             default:
-                if (event.key && splitGraphemes(event.key).length === 1 && !event.ctrl && !event.alt) {
+                if (
+                    event.key &&
+                    splitGraphemes(event.key).length === 1 &&
+                    !event.ctrl &&
+                    !event.alt
+                ) {
                     this.insertChar(event.key);
                     event.preventDefault();
                     event.stopPropagation();
@@ -298,93 +394,66 @@ export class TextInput extends Widget {
         }
     }
 
-    protected _renderSelf(screen: Screen): void {
+        protected _renderSelf(screen: Screen): void {
         const rect = this._getContentRect();
         const { x, y, width, height } = rect;
+
         if (width <= 0 || height <= 0) return;
 
         const attrs = styleToCellAttrs(this._style);
 
-        if (this._value.length === 0 && !this.isFocused) {
-            screen.writeString(x, y, truncate(this._placeholder, width), { ...attrs, dim: true });
-            return;
-        }
+        let display = this._value;
 
-        const graphemes = splitGraphemes(this._value);
-        const displayGraphemes = this._mask
-            ? Array(graphemes.length).fill(this._mask)
-            : graphemes;
-
-        let rightReserved = 0;
-        let modeIndicator = '';
-        if (process.env.TERMUI_KEYBINDINGS === 'vim' && this.isFocused && width > 15) {
-            modeIndicator = ` -- ${this._vimMode.toUpperCase()} -- `;
-            rightReserved = modeIndicator.length;
-        } else if (this.isFocused) {
-            const length = this._value.length;
-            const max = this._maxLength === Infinity ? null : this._maxLength;
-            const counterText = max ? `${length}/${max}` : `${length}`;
-            const counterWidth = stringWidth(counterText);
-            if (x + width - counterWidth >= x) {
-                rightReserved = counterWidth;
-            }
+        if (this._mask) {
+            display = splitGraphemes(this._value)
+                .map(() => this._mask!)
+                .join('');
         }
 
-        const maxVisibleWidth = width - rightReserved;
-        if (maxVisibleWidth <= 0) return;
-
-        // Calculate visual width prefix sums
-        const prefixWidths: number[] = [0];
-        for (let i = 0; i < displayGraphemes.length; i++) {
-            prefixWidths.push(prefixWidths[i] + stringWidth(displayGraphemes[i]));
+        if (display.length === 0 && !this.isFocused) {
+            display = this._placeholder;
         }
 
-        let scrollGraphemeIndex = 0;
-        const targetVisualEnd = this._cursorPos < displayGraphemes.length
-            ? prefixWidths[this._cursorPos + 1]
-            : prefixWidths[this._cursorPos];
+        display = truncate(display, width);
 
-        while (scrollGraphemeIndex < this._cursorPos && targetVisualEnd - prefixWidths[scrollGraphemeIndex] > maxVisibleWidth) {
-            scrollGraphemeIndex++;
-        }
+        screen.writeString(
+            x,
+            y,
+            display,
+            {
+                ...attrs,
+                dim: this._value.length === 0,
+            }
+        );
 
-        let endGraphemeIndex = scrollGraphemeIndex;
-        while (endGraphemeIndex < displayGraphemes.length && prefixWidths[endGraphemeIndex + 1] - prefixWidths[scrollGraphemeIndex] <= maxVisibleWidth) {
-            endGraphemeIndex++;
+        // Cursor
+        if (this.isFocused) {
+            const cursorX = Math.min(
+                x + stringWidth(display),
+                x + width - 1
+            );
+
+            screen.setCell(cursorX, y, {
+                char: display[cursorX - x] ?? ' ',
+                ...attrs,
+                inverse: true,
+            });
         }
 
-        const visibleGraphemes = displayGraphemes.slice(scrollGraphemeIndex, endGraphemeIndex);
-        const visibleText = visibleGraphemes.join('');
-        screen.writeString(x, y, visibleText, attrs);
+        // Auto-complete suggestions
+        const suggestions = this.getSuggestions(this._value)
+            .slice(0, height - 1);
 
-        if (this.isFocused) {
-            const cursorOffset = prefixWidths[this._cursorPos] - prefixWidths[scrollGraphemeIndex];
-            const cursorScreenPos = x + cursorOffset;
-            if (cursorScreenPos >= x && cursorScreenPos < x + maxVisibleWidth) {
-                const cursorChar = this._cursorPos < displayGraphemes.length
-                    ? displayGraphemes[this._cursorPos]
-                    : ' ';
-                const isBlock = this._vimMode === 'normal' || this._vimMode === 'visual';
-                screen.setCell(cursorScreenPos, y, {
-                    char: cursorChar[0] || ' ',
+        suggestions.forEach((suggestion, index) => {
+            screen.writeString(
+                x,
+                y + index + 1,
+                truncate(suggestion, width),
+                {
                     ...attrs,
-                    inverse: isBlock,
-                    underline: !isBlock,
-                });
-            }
-        }
-
-        if (modeIndicator) {
-            screen.writeString(x + width - modeIndicator.length, y, modeIndicator, { ...attrs, dim: true });
-        } else if (this.isFocused) {
-            const length = this._value.length;
-            const max = this._maxLength === Infinity ? null : this._maxLength;
-            const counterText = max ? `${length}/${max}` : `${length}`;
-            const counterWidth = stringWidth(counterText);
-            const counterX = x + width - counterWidth;
-            if (counterX >= x) {
-                screen.writeString(counterX, y, counterText, { ...attrs, dim: true });
-            }
-        }
+                    dim: true,
+                }
+            );
+        });
     }
-}
+}
\ No newline at end of file

From 72f66c1b0a4e6eeadf5ca63170945a801370e553 Mon Sep 17 00:00:00 2001
From: jainiksha <jainiksha.patel2007@gmail.com>
Date: Sun, 21 Jun 2026 01:56:42 +0530
Subject: [PATCH 2/3] fix: correct TextInput cursor rendering and horizontal
 scrolling

---
 packages/widgets/src/input/TextInput.ts | 42 +++++++++++++++++++------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/widgets/src/input/TextInput.ts b/packages/widgets/src/input/TextInput.ts
index 95df7528..9d5db31f 100644
--- a/packages/widgets/src/input/TextInput.ts
+++ b/packages/widgets/src/input/TextInput.ts
@@ -6,7 +6,6 @@ import {
     type Screen,
     type Style,
     styleToCellAttrs,
-    stringWidth,
     truncate,
     type KeyEvent,
     splitGraphemes
@@ -414,7 +413,18 @@ export class TextInput extends Widget {
             display = this._placeholder;
         }
 
-        display = truncate(display, width);
+        const graphemes = splitGraphemes(display);
+
+let scrollX = 0;
+
+if (this.isFocused && graphemes.length > width) {
+    scrollX = Math.max(0, this._cursorPos - width);
+}
+
+display = graphemes
+    .slice(scrollX, scrollX + width)
+    .join('');
+
 
         screen.writeString(
             x,
@@ -428,16 +438,28 @@ export class TextInput extends Widget {
 
         // Cursor
         if (this.isFocused) {
-            const cursorX = Math.min(
-                x + stringWidth(display),
-                x + width - 1
-            );
+            if (this.isFocused) {
+    const cursorIndex = this._cursorPos - scrollX;
+
+    if (cursorIndex >= 0 && cursorIndex < width) {
+        const charIndex = Math.min(
+            this._cursorPos,
+            graphemes.length - 1
+        );
+
+        screen.setCell(x + cursorIndex, y, {
+            char: graphemes[charIndex] ?? ' ',
+            ...attrs,
+            underline: true,
+        });
+    }
+}
 
             screen.setCell(cursorX, y, {
-                char: display[cursorX - x] ?? ' ',
-                ...attrs,
-                inverse: true,
-            });
+    char: display[cursorX - x] ?? ' ',
+    ...attrs,
+    underline: true,
+});
         }
 
         // Auto-complete suggestions

From a16bfe14b922f4439b8112955945a37e7f1512c6 Mon Sep 17 00:00:00 2001
From: jainiksha <jainiksha.patel2007@gmail.com>
Date: Sun, 21 Jun 2026 01:59:35 +0530
Subject: [PATCH 3/3] fix: remove stale cursorX reference

---
 packages/widgets/src/input/TextInput.ts | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/widgets/src/input/TextInput.ts b/packages/widgets/src/input/TextInput.ts
index 9d5db31f..bd747d83 100644
--- a/packages/widgets/src/input/TextInput.ts
+++ b/packages/widgets/src/input/TextInput.ts
@@ -455,11 +455,23 @@ display = graphemes
     }
 }
 
-            screen.setCell(cursorX, y, {
-    char: display[cursorX - x] ?? ' ',
-    ...attrs,
-    underline: true,
-});
+// Cursor
+if (this.isFocused) {
+    const cursorIndex = this._cursorPos - scrollX;
+
+    if (cursorIndex >= 0 && cursorIndex < width) {
+        const charIndex = Math.min(
+            this._cursorPos,
+            graphemes.length - 1
+        );
+
+        screen.setCell(x + cursorIndex, y, {
+            char: graphemes[charIndex] ?? ' ',
+            ...attrs,
+            underline: true,
+        });
+    }
+}
         }
 
         // Auto-complete suggestions