@travisennis/acai 0.0.6 → 0.0.7

package/dist/tui/components/editor.js

@@ -1,12 +1,76 @@
 import style from "../../terminal/style.js";
-import { SelectList } from "./select-list.js";
+import { visibleWidth } from "../utils.js";
+import { isNavigationKey, isTab, SelectList } from "./select-list.js";
+// Grapheme segmenter for proper Unicode iteration (handles emojis, etc.)
+const segmenter = new Intl.Segmenter();
+// Cache for line metrics to avoid repeated segmentation
+const lineMetricsCache = {
+    maxSize: 1000,
+    cache: new Map(),
+    get(line) {
+        let cached = this.cache.get(line);
+        if (!cached) {
+            // Fast path for ASCII-only lines (common case)
+            if (/^[\x20-\x7E\t]*$/.test(line)) {
+                // ASCII characters (including tabs)
+                const graphemes = line.split(""); // Simple split for ASCII
+                const widths = graphemes.map((char) => (char === "\t" ? 3 : 1));
+                const totalWidth = widths.reduce((sum, w) => sum + w, 0);
+                cached = { graphemes, widths, totalWidth };
+            }
+            else {
+                // Complex Unicode line, use full segmentation
+                const graphemes = [...segmenter.segment(line)].map((seg) => seg.segment);
+                const widths = graphemes.map((g) => visibleWidth(g));
+                const totalWidth = widths.reduce((sum, w) => sum + w, 0);
+                cached = { graphemes, widths, totalWidth };
+            }
+            this.cache.set(line, cached);
+            // Enforce size limit
+            if (this.cache.size > this.maxSize) {
+                // Delete first (oldest) entry - simple but not LRU; okay for our use case
+                const firstKey = this.cache.keys().next().value;
+                if (firstKey !== undefined) {
+                    this.cache.delete(firstKey);
+                }
+            }
+        }
+        return cached;
+    },
+    clear() {
+        this.cache.clear();
+    },
+};
+/**
+ * Text editor component with support for multi-line input and autocomplete.
+ *
+ * Key bindings:
+ * - Enter: Create new line
+ * - Shift+Enter / Ctrl+Enter / Option+Enter: Submit prompt
+ * - Tab: Trigger autocomplete
+ * - Escape: Cancel autocomplete or custom handler
+ * - Ctrl+C: Custom handler
+ * - Arrow keys: Navigate text
+ * - Backspace/Delete: Delete characters
+ * - Ctrl+A: Move to start of line
+ * - Ctrl+E: Move to end of line
+ * - Ctrl+K: Delete to end of line
+ * - Ctrl+U: Delete to start of line
+ * - Ctrl+W / Option+Backspace: Delete word backwards
+ * - Ctrl+Left/Right / Option+Left/Right: Word navigation
+ * - Up/Down: History navigation when editor is empty
+ */
 export class Editor {
     state = {
         lines: [""],
         cursorLine: 0,
         cursorCol: 0,
     };
-    config = {};
+    theme;
+    // Store last render width for cursor navigation
+    lastWidth = 80;
+    // Border color (can be changed dynamically)
+    borderColor;
     // Autocomplete support
     autocompleteProvider;
     autocompleteList;
@@ -19,6 +83,9 @@ export class Editor {
     // Bracketed paste mode buffering
     pasteBuffer = "";
     isInPaste = false;
+    // Prompt history for up/down navigation
+    history = [];
+    historyIndex = -1; // -1 = not browsing, 0 = most recent, 1 = older, etc.
     onSubmit;
     onChange;
     disableSubmit = false;
@@ -26,19 +93,78 @@ export class Editor {
     onEscape;
     onCtrlC;
     onRenderRequested;
-    constructor(config) {
-        if (config) {
-            this.config = { ...this.config, ...config };
-        }
+    constructor(theme) {
+        // Default theme if none provided (backward compatibility)
+        this.theme = theme || {
+            borderColor: style.gray,
+        };
+        this.borderColor = this.theme.borderColor;
     }
-    configure(config) {
-        this.config = { ...this.config, ...config };
+    /**
+     * Add a prompt to history for up/down arrow navigation.
+     * Called after successful submission.
+     */
+    addToHistory(text) {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return;
+        // Don't add consecutive duplicates
+        if (this.history.length > 0 && this.history[0] === trimmed)
+            return;
+        this.history.unshift(trimmed);
+        // Limit history size
+        if (this.history.length > 100) {
+            this.history.pop();
+        }
     }
     setAutocompleteProvider(provider) {
         this.autocompleteProvider = provider;
     }
+    isEditorEmpty() {
+        return this.state.lines.length === 1 && this.state.lines[0] === "";
+    }
+    isOnFirstVisualLine() {
+        const visualLines = this.buildVisualLineMap(this.lastWidth);
+        const currentVisualLine = this.findCurrentVisualLine(visualLines);
+        return currentVisualLine === 0;
+    }
+    isOnLastVisualLine() {
+        const visualLines = this.buildVisualLineMap(this.lastWidth);
+        const currentVisualLine = this.findCurrentVisualLine(visualLines);
+        return currentVisualLine === visualLines.length - 1;
+    }
+    navigateHistory(direction) {
+        if (this.history.length === 0)
+            return;
+        const newIndex = this.historyIndex - direction; // Up(-1) increases index, Down(1) decreases
+        if (newIndex < -1 || newIndex >= this.history.length)
+            return;
+        this.historyIndex = newIndex;
+        if (this.historyIndex === -1) {
+            // Returned to "current" state - clear editor
+            this.setTextInternal("");
+        }
+        else {
+            this.setTextInternal(this.history[this.historyIndex] || "");
+        }
+    }
+    /** Internal setText that doesn't reset history state - used by navigateHistory */
+    setTextInternal(text) {
+        const lines = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
+        this.state.lines = lines.length === 0 ? [""] : lines;
+        this.state.cursorLine = this.state.lines.length - 1;
+        this.state.cursorCol = this.state.lines[this.state.cursorLine]?.length || 0;
+        if (this.onChange) {
+            this.onChange(this.getText());
+        }
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
     render(width) {
-        const horizontal = style.gray("─");
+        // Store width for cursor navigation
+        this.lastWidth = width;
+        const horizontal = this.borderColor("─");
         // Layout the text - use full width
         const layoutLines = this.layoutText(width);
         const result = [];
@@ -47,41 +173,50 @@ export class Editor {
         // Render each layout line
         for (const layoutLine of layoutLines) {
             let displayText = layoutLine.text;
-            let visibleLength = layoutLine.text.length;
+            let lineVisibleWidth = layoutLine.width;
             // Add cursor if this line has it
             if (layoutLine.hasCursor && layoutLine.cursorPos !== undefined) {
                 const before = displayText.slice(0, layoutLine.cursorPos);
                 const after = displayText.slice(layoutLine.cursorPos);
                 if (after.length > 0) {
-                    // Cursor is on a character - replace it with highlighted version
-                    const cursor = `\x1b[7m${after[0]}\x1b[0m`;
-                    const restAfter = after.slice(1);
+                    // Cursor is on a character (grapheme) - replace it with highlighted version
+                    // Get the first grapheme from 'after'
+                    const afterGraphemes = [...segmenter.segment(after)];
+                    const firstGrapheme = afterGraphemes[0]?.segment || "";
+                    const restAfter = after.slice(firstGrapheme.length);
+                    const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`;
                     displayText = before + cursor + restAfter;
-                    // visibleLength stays the same - we're replacing, not adding
+                    // lineVisibleWidth stays the same - we're replacing, not adding
                 }
                 else {
                     // Cursor is at the end - check if we have room for the space
-                    if (layoutLine.text.length < width) {
+                    if (lineVisibleWidth < width) {
                         // We have room - add highlighted space
                         const cursor = "\x1b[7m \x1b[0m";
                         displayText = before + cursor;
-                        // visibleLength increases by 1 - we're adding a space
-                        visibleLength = layoutLine.text.length + 1;
+                        // lineVisibleWidth increases by 1 - we're adding a space
+                        lineVisibleWidth = lineVisibleWidth + 1;
                     }
                     else {
-                        // Line is at full width - use reverse video on last character if possible
+                        // Line is at full width - use reverse video on last grapheme if possible
                         // or just show cursor at the end without adding space
-                        if (before.length > 0) {
-                            const lastChar = before[before.length - 1];
-                            const cursor = `\x1b[7m${lastChar}\x1b[0m`;
-                            displayText = before.slice(0, -1) + cursor;
+                        const beforeGraphemes = [...segmenter.segment(before)];
+                        if (beforeGraphemes.length > 0) {
+                            const lastGrapheme = beforeGraphemes[beforeGraphemes.length - 1]?.segment || "";
+                            const cursor = `\x1b[7m${lastGrapheme}\x1b[0m`;
+                            // Rebuild 'before' without the last grapheme
+                            const beforeWithoutLast = beforeGraphemes
+                                .slice(0, -1)
+                                .map((g) => g.segment)
+                                .join("");
+                            displayText = beforeWithoutLast + cursor;
                         }
-                        // visibleLength stays the same
+                        // lineVisibleWidth stays the same
                     }
                 }
             }
-            // Calculate padding based on actual visible length
-            const padding = " ".repeat(Math.max(0, width - visibleLength));
+            // Calculate padding based on actual visible width
+            const padding = " ".repeat(Math.max(0, width - lineVisibleWidth));
             // Render the line (no side borders, just horizontal lines above and below)
             result.push(displayText + padding);
         }
@@ -159,45 +294,50 @@ export class Editor {
                 this.cancelAutocomplete();
                 return;
             }
-            // Let the autocomplete list handle navigation and selection
-            if (data === "\x1b[A" ||
-                data === "\x1b[B" ||
-                data === "\r" ||
-                data === "\t") {
-                // Pass arrow keys and Tab to the list for navigation
-                if (data === "\x1b[A" || data === "\x1b[B" || data === "\t") {
-                    this.autocompleteList.handleInput(data);
-                }
-                // Only Enter applies the selection
-                if (data === "\r") {
-                    const selected = this.autocompleteList.getSelectedItem();
-                    if (selected && this.autocompleteProvider) {
-                        const result = this.autocompleteProvider.applyCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol, selected, this.autocompletePrefix);
-                        this.state.lines = result.lines;
-                        this.state.cursorLine = result.cursorLine;
-                        this.state.cursorCol = result.cursorCol;
-                        this.cancelAutocomplete();
-                        if (this.onChange) {
-                            this.onChange(this.getText());
-                        }
+            // Enter - apply selection
+            if (data === "\r") {
+                const selected = this.autocompleteList.getSelectedItem();
+                if (selected && this.autocompleteProvider) {
+                    const result = this.autocompleteProvider.applyCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol, selected, this.autocompletePrefix);
+                    this.state.lines = result.lines;
+                    this.state.cursorLine = result.cursorLine;
+                    this.state.cursorCol = result.cursorCol;
+                    this.cancelAutocomplete();
+                    if (this.onChange) {
+                        this.onChange(this.getText());
                     }
-                    return;
                 }
-                // For other keys, handle normally within autocomplete
+                return;
+            }
+            // Navigation keys (arrows, Tab, Shift+Tab) - pass to autocomplete list
+            if (isNavigationKey(data)) {
+                this.autocompleteList.handleInput(data);
                 return;
             }
             // For other keys (like regular typing), DON'T return here
             // Let them fall through to normal character handling
         }
         // Tab key - context-aware completion (but not when already autocompleting)
-        if (data === "\t" && !this.isAutocompleting) {
+        if (isTab(data) && !this.isAutocompleting) {
             void this.handleTabCompletion();
             return;
         }
         // Continue with rest of input handling
-        // Ctrl+K - Delete current line
+        // Ctrl+K - Delete to end of line
         if (data.charCodeAt(0) === 11) {
-            this.deleteCurrentLine();
+            this.deleteToEndOfLine();
+        }
+        // Ctrl+U - Delete to start of line
+        else if (data.charCodeAt(0) === 21) {
+            this.deleteToStartOfLine();
+        }
+        // Ctrl+W - Delete word backwards
+        else if (data.charCodeAt(0) === 23) {
+            this.deleteWordBackwards();
+        }
+        // Option/Alt+Backspace (e.g. Ghostty sends ESC + DEL)
+        else if (data === "\x1b\x7f") {
+            this.deleteWordBackwards();
         }
         // Ctrl+A - Move to start of line
         else if (data.charCodeAt(0) === 1) {
@@ -207,13 +347,12 @@ export class Editor {
         else if (data.charCodeAt(0) === 5) {
             this.moveToLineEnd();
         }
-        // Modified Enter keys (Shift+Enter, Ctrl+Enter, etc.) - create new line
-        else if (this.isModifiedEnter(data)) {
-            // Modifier + Enter = new line
+        // Plain Enter (char code 13 for CR) - create new line
+        else if (data.charCodeAt(0) === 13 && data.length === 1) {
             this.addNewLine();
         }
-        // Plain Enter (char code 13 for CR) - only CR submits, LF adds new line
-        else if (data.charCodeAt(0) === 13 && data.length === 1) {
+        // Modified Enter keys (Shift+Enter, Ctrl+Enter, etc.) - submit
+        else if (this.isModifiedEnter(data)) {
             // If submit is disabled, do nothing
             if (this.disableSubmit) {
                 return;
@@ -234,6 +373,7 @@ export class Editor {
             };
             this.pastes.clear();
             this.pasteCounter = 0;
+            this.historyIndex = -1; // Exit history browsing mode
             // Notify that editor is now empty
             if (this.onChange) {
                 this.onChange("");
@@ -260,14 +400,42 @@ export class Editor {
             // Delete key
             this.handleForwardDelete();
         }
+        // Word navigation (Option/Alt + Arrow or Ctrl + Arrow)
+        // Option+Left: \x1b[1;3D or \x1bb
+        // Option+Right: \x1b[1;3C or \x1bf
+        // Ctrl+Left: \x1b[1;5D
+        // Ctrl+Right: \x1b[1;5C
+        else if (data === "\x1b[1;3D" || data === "\x1bb" || data === "\x1b[1;5D") {
+            // Word left
+            this.moveWordBackwards();
+        }
+        else if (data === "\x1b[1;3C" ||
+            data === "\x1bf" ||
+            data === "\x1b[1;5C") {
+            // Word right
+            this.moveWordForwards();
+        }
         // Arrow keys
         else if (data === "\x1b[A") {
-            // Up
-            this.moveCursor(-1, 0);
+            // Up - history navigation or cursor movement
+            if (this.isEditorEmpty()) {
+                this.navigateHistory(-1); // Start browsing history
+            }
+            else if (this.historyIndex > -1 && this.isOnFirstVisualLine()) {
+                this.navigateHistory(-1); // Navigate to older history entry
+            }
+            else {
+                this.moveCursor(-1, 0); // Cursor movement (within text or history entry)
+            }
         }
         else if (data === "\x1b[B") {
-            // Down
-            this.moveCursor(1, 0);
+            // Down - history navigation or cursor movement
+            if (this.historyIndex > -1 && this.isOnLastVisualLine()) {
+                this.navigateHistory(1); // Navigate to newer history entry or clear
+            }
+            else {
+                this.moveCursor(1, 0); // Cursor movement (within text or history entry)
+            }
         }
         else if (data === "\x1b[C") {
             // Right
@@ -277,8 +445,8 @@ export class Editor {
             // Left
             this.moveCursor(0, -1);
         }
-        // Regular characters (printable ASCII)
-        else if (data.charCodeAt(0) >= 32 && data.charCodeAt(0) <= 126) {
+        // Regular characters (printable characters and unicode, but not control characters)
+        else if (data.charCodeAt(0) >= 32) {
             this.insertCharacter(data);
         }
     }
@@ -291,6 +459,7 @@ export class Editor {
                 text: "",
                 hasCursor: true,
                 cursorPos: 0,
+                width: 0,
             });
             return layoutLines;
         }
@@ -298,48 +467,89 @@ export class Editor {
         for (let i = 0; i < this.state.lines.length; i++) {
             const line = this.state.lines[i] || "";
             const isCurrentLine = i === this.state.cursorLine;
-            const maxLineLength = contentWidth;
-            if (line.length <= maxLineLength) {
+            const metrics = lineMetricsCache.get(line);
+            const lineVisibleWidth = metrics.totalWidth;
+            if (lineVisibleWidth <= contentWidth) {
                 // Line fits in one layout line
                 if (isCurrentLine) {
                     layoutLines.push({
                         text: line,
                         hasCursor: true,
                         cursorPos: this.state.cursorCol,
+                        width: lineVisibleWidth,
                     });
                 }
                 else {
                     layoutLines.push({
                         text: line,
                         hasCursor: false,
+                        width: lineVisibleWidth,
                     });
                 }
             }
             else {
-                // Line needs wrapping
+                // Line needs wrapping - use cached graphemes and widths
                 const chunks = [];
-                for (let pos = 0; pos < line.length; pos += maxLineLength) {
-                    chunks.push(line.slice(pos, pos + maxLineLength));
+                let currentChunk = "";
+                let currentWidth = 0;
+                let chunkStartIndex = 0;
+                let currentIndex = 0;
+                for (let g = 0; g < metrics.graphemes.length; g++) {
+                    const grapheme = metrics.graphemes[g];
+                    const graphemeWidth = metrics.widths[g];
+                    if (currentWidth + graphemeWidth > contentWidth &&
+                        currentChunk !== "") {
+                        // Start a new chunk
+                        chunks.push({
+                            text: currentChunk,
+                            startIndex: chunkStartIndex,
+                            endIndex: currentIndex,
+                            width: currentWidth,
+                        });
+                        currentChunk = grapheme;
+                        currentWidth = graphemeWidth;
+                        chunkStartIndex = currentIndex;
+                    }
+                    else {
+                        currentChunk += grapheme;
+                        currentWidth += graphemeWidth;
+                    }
+                    currentIndex += grapheme.length;
+                }
+                // Push the last chunk
+                if (currentChunk !== "") {
+                    chunks.push({
+                        text: currentChunk,
+                        startIndex: chunkStartIndex,
+                        endIndex: currentIndex,
+                        width: currentWidth,
+                    });
                 }
                 for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
                     const chunk = chunks[chunkIndex];
                     if (!chunk)
                         continue;
-                    const chunkStart = chunkIndex * maxLineLength;
-                    const chunkEnd = chunkStart + chunk.length;
                     const cursorPos = this.state.cursorCol;
-                    const hasCursorInChunk = isCurrentLine && cursorPos >= chunkStart && cursorPos <= chunkEnd;
+                    const isLastChunk = chunkIndex === chunks.length - 1;
+                    // For non-last chunks, cursor at endIndex belongs to the next chunk
+                    const hasCursorInChunk = isCurrentLine &&
+                        cursorPos >= chunk.startIndex &&
+                        (isLastChunk
+                            ? cursorPos <= chunk.endIndex
+                            : cursorPos < chunk.endIndex);
                     if (hasCursorInChunk) {
                         layoutLines.push({
-                            text: chunk,
+                            text: chunk.text,
                             hasCursor: true,
-                            cursorPos: cursorPos - chunkStart,
+                            cursorPos: cursorPos - chunk.startIndex,
+                            width: chunk.width,
                         });
                     }
                     else {
                         layoutLines.push({
-                            text: chunk,
+                            text: chunk.text,
                             hasCursor: false,
+                            width: chunk.width,
                         });
                     }
                 }
@@ -351,20 +561,12 @@ export class Editor {
         return this.state.lines.join("\n");
     }
     setText(text) {
-        // Split text into lines, handling different line endings
-        const lines = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
-        // Ensure at least one empty line
-        this.state.lines = lines.length === 0 ? [""] : lines;
-        // Reset cursor to end of text
-        this.state.cursorLine = this.state.lines.length - 1;
-        this.state.cursorCol = this.state.lines[this.state.cursorLine]?.length || 0;
-        // Notify of change
-        if (this.onChange) {
-            this.onChange(this.getText());
-        }
+        this.historyIndex = -1; // Exit history browsing mode
+        this.setTextInternal(text);
     }
     // All the editor methods from before...
     insertCharacter(char) {
+        this.historyIndex = -1; // Exit history browsing mode
         const line = this.state.lines[this.state.cursorLine] || "";
         const before = line.slice(0, this.state.cursorCol);
         const after = line.slice(this.state.cursorCol);
@@ -379,13 +581,28 @@ export class Editor {
             if (char === "/" && this.isAtStartOfMessage()) {
                 void this.tryTriggerAutocomplete();
             }
+            // Auto-trigger for "@" file reference (fuzzy search)
+            else if (char === "@") {
+                const currentLine = this.state.lines[this.state.cursorLine] || "";
+                const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
+                // Only trigger if @ is after whitespace or at start of line
+                const charBeforeAt = textBeforeCursor[textBeforeCursor.length - 2];
+                if (textBeforeCursor.length === 1 ||
+                    charBeforeAt === " " ||
+                    charBeforeAt === "\t") {
+                    void this.tryTriggerAutocomplete();
+                }
+            }
             // Also auto-trigger when typing letters in a slash command context
             else if (/[a-zA-Z0-9]/.test(char)) {
                 const currentLine = this.state.lines[this.state.cursorLine] || "";
                 const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-                // Check if we're in a slash command with a space (i.e., typing arguments)
-                if (textBeforeCursor.startsWith("/") &&
-                    textBeforeCursor.includes(" ")) {
+                // Check if we're in a slash command (with or without space for arguments)
+                if (textBeforeCursor.trimStart().startsWith("/")) {
+                    void this.tryTriggerAutocomplete();
+                }
+                // Check if we're in an @ file reference context
+                else if (textBeforeCursor.match(/(?:^|[\s])@[^\s]*$/)) {
                     void this.tryTriggerAutocomplete();
                 }
             }
@@ -501,6 +718,15 @@ export class Editor {
         if (this.isAutocompleting) {
             void this.updateAutocomplete();
         }
+        else {
+            // Check if we should trigger autocomplete after backspace in slash command context
+            const currentLine = this.state.lines[this.state.cursorLine] || "";
+            const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
+            // Trigger autocomplete if we're in a slash command context (typing command name)
+            if (textBeforeCursor.startsWith("/") && !textBeforeCursor.includes(" ")) {
+                void this.tryTriggerAutocomplete();
+            }
+        }
     }
     moveToLineStart() {
         this.state.cursorCol = 0;
@@ -527,45 +753,276 @@ export class Editor {
             this.onChange(this.getText());
         }
     }
-    deleteCurrentLine() {
-        if (this.state.lines.length === 1) {
-            // Only one line - just clear it
-            this.state.lines[0] = "";
+    deleteToStartOfLine() {
+        this.historyIndex = -1; // Exit history browsing mode
+        const currentLine = this.state.lines[this.state.cursorLine] || "";
+        if (this.state.cursorCol > 0) {
+            // Delete from start of line up to cursor
+            this.state.lines[this.state.cursorLine] = currentLine.slice(this.state.cursorCol);
             this.state.cursorCol = 0;
         }
-        else {
-            // Multiple lines - remove current line
+        else if (this.state.cursorLine > 0) {
+            // At start of line - merge with previous line
+            const previousLine = this.state.lines[this.state.cursorLine - 1] || "";
+            this.state.lines[this.state.cursorLine - 1] = previousLine + currentLine;
             this.state.lines.splice(this.state.cursorLine, 1);
-            // Adjust cursor position
-            if (this.state.cursorLine >= this.state.lines.length) {
-                // Was on last line, move to new last line
-                this.state.cursorLine = this.state.lines.length - 1;
+            this.state.cursorLine--;
+            this.state.cursorCol = previousLine.length;
+        }
+        if (this.onChange) {
+            this.onChange(this.getText());
+        }
+    }
+    deleteToEndOfLine() {
+        this.historyIndex = -1; // Exit history browsing mode
+        const currentLine = this.state.lines[this.state.cursorLine] || "";
+        if (this.state.cursorCol < currentLine.length) {
+            // Delete from cursor to end of line
+            this.state.lines[this.state.cursorLine] = currentLine.slice(0, this.state.cursorCol);
+        }
+        else if (this.state.cursorLine < this.state.lines.length - 1) {
+            // At end of line - merge with next line
+            const nextLine = this.state.lines[this.state.cursorLine + 1] || "";
+            this.state.lines[this.state.cursorLine] = currentLine + nextLine;
+            this.state.lines.splice(this.state.cursorLine + 1, 1);
+        }
+        if (this.onChange) {
+            this.onChange(this.getText());
+        }
+    }
+    deleteWordBackwards() {
+        this.historyIndex = -1; // Exit history browsing mode
+        const currentLine = this.state.lines[this.state.cursorLine] || "";
+        // If at start of line, behave like backspace at column 0 (merge with previous line)
+        if (this.state.cursorCol === 0) {
+            if (this.state.cursorLine > 0) {
+                const previousLine = this.state.lines[this.state.cursorLine - 1] || "";
+                this.state.lines[this.state.cursorLine - 1] =
+                    previousLine + currentLine;
+                this.state.lines.splice(this.state.cursorLine, 1);
+                this.state.cursorLine--;
+                this.state.cursorCol = previousLine.length;
             }
-            // Clamp cursor column to new line length
-            const newLine = this.state.lines[this.state.cursorLine] || "";
-            this.state.cursorCol = Math.min(this.state.cursorCol, newLine.length);
+        }
+        else {
+            const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
+            const isWhitespace = (char) => /\s/.test(char);
+            const isPunctuation = (char) => {
+                // Treat obvious code punctuation as boundaries
+                return /[(){}[\]<>.,;:'"!?+\-=*/\\|&%^$#@~`]/.test(char);
+            };
+            let deleteFrom = this.state.cursorCol;
+            const lastChar = textBeforeCursor[deleteFrom - 1] ?? "";
+            // If immediately on whitespace or punctuation, delete that single boundary char
+            if (isWhitespace(lastChar) || isPunctuation(lastChar)) {
+                deleteFrom -= 1;
+            }
+            else {
+                // Otherwise, delete a run of non-boundary characters (the "word")
+                while (deleteFrom > 0) {
+                    const ch = textBeforeCursor[deleteFrom - 1] ?? "";
+                    if (isWhitespace(ch) || isPunctuation(ch)) {
+                        break;
+                    }
+                    deleteFrom -= 1;
+                }
+            }
+            this.state.lines[this.state.cursorLine] =
+                currentLine.slice(0, deleteFrom) +
+                    currentLine.slice(this.state.cursorCol);
+            this.state.cursorCol = deleteFrom;
         }
         if (this.onChange) {
             this.onChange(this.getText());
         }
     }
+    /**
+     * Build a mapping from visual lines to logical positions.
+     * Returns an array where each element represents a visual line with:
+     * - logicalLine: index into this.state.lines
+     * - startCol: starting column in the logical line
+     * - length: length of this visual line segment
+     */
+    buildVisualLineMap(width) {
+        const visualLines = [];
+        for (let i = 0; i < this.state.lines.length; i++) {
+            const line = this.state.lines[i] || "";
+            const metrics = lineMetricsCache.get(line);
+            const lineVisWidth = metrics.totalWidth;
+            if (line.length === 0) {
+                // Empty line still takes one visual line
+                visualLines.push({ logicalLine: i, startCol: 0, length: 0 });
+            }
+            else if (lineVisWidth <= width) {
+                visualLines.push({ logicalLine: i, startCol: 0, length: line.length });
+            }
+            else {
+                // Line needs wrapping - use cached graphemes and widths
+                let currentWidth = 0;
+                let chunkStartIndex = 0;
+                let currentIndex = 0;
+                for (let g = 0; g < metrics.graphemes.length; g++) {
+                    const grapheme = metrics.graphemes[g];
+                    const graphemeWidth = metrics.widths[g];
+                    if (currentWidth + graphemeWidth > width &&
+                        currentIndex > chunkStartIndex) {
+                        // Start a new chunk
+                        visualLines.push({
+                            logicalLine: i,
+                            startCol: chunkStartIndex,
+                            length: currentIndex - chunkStartIndex,
+                        });
+                        chunkStartIndex = currentIndex;
+                        currentWidth = graphemeWidth;
+                    }
+                    else {
+                        currentWidth += graphemeWidth;
+                    }
+                    currentIndex += grapheme.length;
+                }
+                // Push the last chunk
+                if (currentIndex > chunkStartIndex) {
+                    visualLines.push({
+                        logicalLine: i,
+                        startCol: chunkStartIndex,
+                        length: currentIndex - chunkStartIndex,
+                    });
+                }
+            }
+        }
+        return visualLines;
+    }
+    /**
+     * Find the visual line index for the current cursor position.
+     */
+    findCurrentVisualLine(visualLines) {
+        for (let i = 0; i < visualLines.length; i++) {
+            const vl = visualLines[i];
+            if (!vl)
+                continue;
+            if (vl.logicalLine === this.state.cursorLine) {
+                const colInSegment = this.state.cursorCol - vl.startCol;
+                // Cursor is in this segment if it's within range
+                // For the last segment of a logical line, cursor can be at length (end position)
+                const isLastSegmentOfLine = i === visualLines.length - 1 ||
+                    visualLines[i + 1]?.logicalLine !== vl.logicalLine;
+                if (colInSegment >= 0 &&
+                    (colInSegment < vl.length ||
+                        (isLastSegmentOfLine && colInSegment <= vl.length))) {
+                    return i;
+                }
+            }
+        }
+        // Fallback: return last visual line
+        return visualLines.length - 1;
+    }
     moveCursor(deltaLine, deltaCol) {
+        const width = this.lastWidth;
         if (deltaLine !== 0) {
-            const newLine = this.state.cursorLine + deltaLine;
-            if (newLine >= 0 && newLine < this.state.lines.length) {
-                this.state.cursorLine = newLine;
-                // Clamp cursor column to new line length
-                const line = this.state.lines[this.state.cursorLine] || "";
-                this.state.cursorCol = Math.min(this.state.cursorCol, line.length);
+            // Build visual line map for navigation
+            const visualLines = this.buildVisualLineMap(width);
+            const currentVisualLine = this.findCurrentVisualLine(visualLines);
+            // Calculate column position within current visual line
+            const currentVl = visualLines[currentVisualLine];
+            const visualCol = currentVl
+                ? this.state.cursorCol - currentVl.startCol
+                : 0;
+            // Move to target visual line
+            const targetVisualLine = currentVisualLine + deltaLine;
+            if (targetVisualLine >= 0 && targetVisualLine < visualLines.length) {
+                const targetVl = visualLines[targetVisualLine];
+                if (targetVl) {
+                    this.state.cursorLine = targetVl.logicalLine;
+                    // Try to maintain visual column position, clamped to line length
+                    const targetCol = targetVl.startCol + Math.min(visualCol, targetVl.length);
+                    const logicalLine = this.state.lines[targetVl.logicalLine] || "";
+                    this.state.cursorCol = Math.min(targetCol, logicalLine.length);
+                }
             }
         }
         if (deltaCol !== 0) {
-            // Move column
-            const newCol = this.state.cursorCol + deltaCol;
             const currentLine = this.state.lines[this.state.cursorLine] || "";
-            const maxCol = currentLine.length;
-            this.state.cursorCol = Math.max(0, Math.min(maxCol, newCol));
+            if (deltaCol > 0) {
+                // Moving right
+                if (this.state.cursorCol < currentLine.length) {
+                    this.state.cursorCol++;
+                }
+                else if (this.state.cursorLine < this.state.lines.length - 1) {
+                    // Wrap to start of next logical line
+                    this.state.cursorLine++;
+                    this.state.cursorCol = 0;
+                }
+            }
+            else {
+                // Moving left
+                if (this.state.cursorCol > 0) {
+                    this.state.cursorCol--;
+                }
+                else if (this.state.cursorLine > 0) {
+                    // Wrap to end of previous logical line
+                    this.state.cursorLine--;
+                    const prevLine = this.state.lines[this.state.cursorLine] || "";
+                    this.state.cursorCol = prevLine.length;
+                }
+            }
+        }
+    }
+    isWordBoundary(char) {
+        return /\s/.test(char) || /[(){}[\]<>.,;:'"!?+\-=*/\\|&%^$#@~`]/.test(char);
+    }
+    moveWordBackwards() {
+        const currentLine = this.state.lines[this.state.cursorLine] || "";
+        // If at start of line, move to end of previous line
+        if (this.state.cursorCol === 0) {
+            if (this.state.cursorLine > 0) {
+                this.state.cursorLine--;
+                const prevLine = this.state.lines[this.state.cursorLine] || "";
+                this.state.cursorCol = prevLine.length;
+            }
+            return;
+        }
+        const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
+        let newCol = this.state.cursorCol;
+        const lastChar = textBeforeCursor[newCol - 1] ?? "";
+        // If immediately on whitespace or punctuation, skip that single boundary char
+        if (this.isWordBoundary(lastChar)) {
+            newCol -= 1;
+        }
+        // Now skip the "word" (non-boundary characters)
+        while (newCol > 0) {
+            const ch = textBeforeCursor[newCol - 1] ?? "";
+            if (this.isWordBoundary(ch)) {
+                break;
+            }
+            newCol -= 1;
+        }
+        this.state.cursorCol = newCol;
+    }
+    moveWordForwards() {
+        const currentLine = this.state.lines[this.state.cursorLine] || "";
+        // If at end of line, move to start of next line
+        if (this.state.cursorCol >= currentLine.length) {
+            if (this.state.cursorLine < this.state.lines.length - 1) {
+                this.state.cursorLine++;
+                this.state.cursorCol = 0;
+            }
+            return;
+        }
+        let newCol = this.state.cursorCol;
+        const charAtCursor = currentLine[newCol] ?? "";
+        // If on whitespace or punctuation, skip it
+        if (this.isWordBoundary(charAtCursor)) {
+            newCol += 1;
+        }
+        // Skip the "word" (non-boundary characters)
+        while (newCol < currentLine.length) {
+            const ch = currentLine[newCol] ?? "";
+            if (this.isWordBoundary(ch)) {
+                break;
+            }
+            newCol += 1;
         }
+        this.state.cursorCol = newCol;
     }
     // Helper method to check if cursor is at start of message (for slash command detection)
     isAtStartOfMessage() {
@@ -597,7 +1054,7 @@ export class Editor {
                 this.autocompleteList.updateItems(suggestions.items);
             }
             else {
-                this.autocompleteList = new SelectList(suggestions.items, 5);
+                this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
             }
             // Request re-render to show autocomplete list
             this.onRenderRequested?.();
@@ -640,7 +1097,7 @@ export class Editor {
                 this.autocompleteList.updateItems(suggestions.items);
             }
             else {
-                this.autocompleteList = new SelectList(suggestions.items, 5);
+                this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
             }
             this.isAutocompleting = true;
             // Request re-render to show autocomplete list
@@ -697,7 +1154,7 @@ export class Editor {
                     this.autocompleteList.updateItems(suggestions.items);
                 }
                 else {
-                    this.autocompleteList = new SelectList(suggestions.items, 5);
+                    this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
                 }
                 this.isAutocompleting = true;
                 // Request re-render to show updated autocomplete list
@@ -719,8 +1176,12 @@ export class Editor {
             "\x1bOM", // Some terminals
             "\\\r", // VS Code terminal
             "\x1b\r", // Option+Enter (macOS)
+            "\x1b[27;2;13~", // xterm shift+enter
+            "\x1b[13;2u", // libtermkey shift+enter
             // Ctrl+Enter sequences
             "\x1b[13;5~", // Some terminals
+            "\x1b[27;5;13~", // xterm ctrl+enter
+            "\x1b[13;5u", // libtermkey ctrl+enter
         ];
         // Check for known sequences
         if (sequences.includes(data)) {
@@ -732,8 +1193,9 @@ export class Editor {
             (data.includes("\r") || data.includes("\n"))) {
             return true;
         }
-        // Check for Ctrl+Enter (Ctrl + CR)
-        if (data.charCodeAt(0) === 13 && data.length > 1) {
+        // Check for Ctrl+Enter (Ctrl + CR) or Ctrl+Enter with LF
+        if ((data.charCodeAt(0) === 13 || data.charCodeAt(0) === 10) &&
+            data.length > 1) {
             return true;
         }
         return false;