@draht/tui 2026.5.12 → 2026.6.11

package/dist/components/editor.js

@@ -1,11 +1,13 @@
 import { getKeybindings } from "../keybindings.js";
-import { decodeKittyPrintable, matchesKey } from "../keys.js";
+import { decodePrintableKey, matchesKey } from "../keys.js";
 import { KillRing } from "../kill-ring.js";
 import { CURSOR_MARKER } from "../tui.js";
 import { UndoStack } from "../undo-stack.js";
-import { getSegmenter, isPunctuationChar, isWhitespaceChar, truncateToWidth, visibleWidth } from "../utils.js";
+import { cjkBreakRegex, getGraphemeSegmenter, getWordSegmenter, isWhitespaceChar, truncateToWidth, visibleWidth, } from "../utils.js";
+import { findWordBackward, findWordForward } from "../word-navigation.js";
 import { SelectList } from "./select-list.js";
-const baseSegmenter = getSegmenter();
+const graphemeSegmenter = getGraphemeSegmenter();
+const wordSegmenter = getWordSegmenter();
 /** Regex matching paste markers like `[paste #1 +123 lines]` or `[paste #2 1234 chars]`. */
 const PASTE_MARKER_REGEX = /\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]/g;
 /** Non-global version for single-segment testing. */
@@ -21,7 +23,7 @@ function isPasteMarker(segment) {
  *
  * Only markers whose numeric ID exists in `validIds` are merged.
  */
-function segmentWithMarkers(text, validIds) {
+function segmentWithMarkers(text, baseSegmenter, validIds) {
     // Fast path: no paste markers in the text or no valid IDs.
     if (validIds.size === 0 || !text.includes("[paste #")) {
         return baseSegmenter.segment(text);
@@ -86,7 +88,7 @@ export function wordWrapLine(line, maxWidth, preSegmented) {
         return [{ text: line, startIndex: 0, endIndex: line.length }];
     }
     const chunks = [];
-    const segments = preSegmented ?? [...baseSegmenter.segment(line)];
+    const segments = preSegmented ?? [...graphemeSegmenter.segment(line)];
     let currentWidth = 0;
     let chunkStart = 0;
     // Wrap opportunity: the position after the last whitespace before a non-whitespace
@@ -138,14 +140,23 @@ export function wordWrapLine(line, maxWidth, preSegmented) {
         }
         // Advance.
         currentWidth += gWidth;
-        // Record wrap opportunity: whitespace followed by non-whitespace.
-        // Multiple spaces join (no break between them); the break point is
-        // after the last space before the next word.
+        // Record wrap opportunity: whitespace followed by non-whitespace
+        // (multiple spaces join; the break point is after the last space),
+        // or at a boundary where either side is CJK (CJK allows breaking
+        // between any adjacent characters).
         const next = segments[i + 1];
         if (isWs && next && (isPasteMarker(next.segment) || !isWhitespaceChar(next.segment))) {
             wrapOppIndex = next.index;
             wrapOppWidth = currentWidth;
         }
+        else if (!isWs && next && !isWhitespaceChar(next.segment)) {
+            const isCjk = !isPasteMarker(grapheme) && cjkBreakRegex.test(grapheme);
+            const nextIsCjk = !isPasteMarker(next.segment) && cjkBreakRegex.test(next.segment);
+            if (isCjk || nextIsCjk) {
+                wrapOppIndex = next.index;
+                wrapOppWidth = currentWidth;
+            }
+        }
     }
     // Push final chunk.
     chunks.push({ text: line.slice(chunkStart), startIndex: chunkStart, endIndex: line.length });
@@ -156,6 +167,17 @@ const SLASH_COMMAND_SELECT_LIST_LAYOUT = {
     maxPrimaryColumnWidth: 32,
 };
 const ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS = 20;
+const DEFAULT_AUTOCOMPLETE_TRIGGER_CHARACTERS = ["@", "#"];
+function escapeCharacterClass(value) {
+    return value.replace(/[\\^$.*+?()[\]{}|-]/g, "\\$&");
+}
+function buildTriggerPattern(triggerCharacters) {
+    return new RegExp(`(?:^|[\\s])[${triggerCharacters.map(escapeCharacterClass).join("")}][^\\s]*$`);
+}
+function buildDebouncePattern(triggerCharacters) {
+    const escapedWithoutAt = triggerCharacters.filter((character) => character !== "@").map(escapeCharacterClass);
+    return new RegExp(`(?:^|[ \\t])(?:@(?:"[^"]*|[^\\s]*)|[${escapedWithoutAt.join("")}][^\\s]*)$`);
+}
 export class Editor {
     state = {
         lines: [""],
@@ -175,6 +197,9 @@ export class Editor {
     borderColor;
     // Autocomplete support
     autocompleteProvider;
+    autocompleteTriggerCharacters = [...DEFAULT_AUTOCOMPLETE_TRIGGER_CHARACTERS];
+    autocompleteTriggerPattern = buildTriggerPattern(this.autocompleteTriggerCharacters);
+    autocompleteDebouncePattern = buildDebouncePattern(this.autocompleteTriggerCharacters);
     autocompleteList;
     autocompleteState = null;
     autocompletePrefix = "";
@@ -193,6 +218,7 @@ export class Editor {
     // Prompt history for up/down navigation
     history = [];
     historyIndex = -1; // -1 = not browsing, 0 = most recent, 1 = older, etc.
+    historyDraft = null;
     // Kill ring for Emacs-style kill/yank operations
     killRing = new KillRing();
     lastAction = null;
@@ -200,6 +226,12 @@ export class Editor {
     jumpMode = null;
     // Preferred visual column for vertical cursor movement (sticky column)
     preferredVisualCol = null;
+    // When the cursor is snapped to the start of an atomic segment, e.g. a
+    // paste marker, cursorCol no longer reflects where the cursor would have
+    // landed. This field stores the pre-snap cursorCol so that the next
+    // vertical move can resolve it to a visual column on whatever VL it belongs
+    // to.
+    snappedFromCursorCol = null;
     // Undo support
     undoStack = new UndoStack();
     onSubmit;
@@ -219,8 +251,8 @@ export class Editor {
         return new Set(this.pastes.keys());
     }
     /** Segment text with paste-marker awareness, only merging markers with valid IDs. */
-    segment(text) {
-        return segmentWithMarkers(text, this.validPasteIds());
+    segment(text, mode) {
+        return segmentWithMarkers(text, mode === "word" ? wordSegmenter : graphemeSegmenter, this.validPasteIds());
     }
     getPaddingX() {
         return this.paddingX;
@@ -245,6 +277,7 @@ export class Editor {
     setAutocompleteProvider(provider) {
         this.cancelAutocomplete();
         this.autocompleteProvider = provider;
+        this.setAutocompleteTriggerCharacters(provider.triggerCharacters ?? []);
     }
     /**
      * Add a prompt to history for up/down arrow navigation.
@@ -263,9 +296,6 @@ export class Editor {
             this.history.pop();
         }
     }
-    isEditorEmpty() {
-        return this.state.lines.length === 1 && this.state.lines[0] === "";
-    }
     isOnFirstVisualLine() {
         const visualLines = this.buildVisualLineMap(this.lastWidth);
         const currentVisualLine = this.findCurrentVisualLine(visualLines);
@@ -286,22 +316,38 @@ export class Editor {
         // Capture state when first entering history browsing mode
         if (this.historyIndex === -1 && newIndex >= 0) {
             this.pushUndoSnapshot();
+            this.historyDraft = structuredClone(this.state);
         }
         this.historyIndex = newIndex;
         if (this.historyIndex === -1) {
-            // Returned to "current" state - clear editor
-            this.setTextInternal("");
+            const draft = this.historyDraft;
+            this.historyDraft = null;
+            if (draft) {
+                this.state = draft;
+                this.preferredVisualCol = null;
+                this.snappedFromCursorCol = null;
+                this.scrollOffset = 0;
+                if (this.onChange)
+                    this.onChange(this.getText());
+            }
+            else {
+                this.setTextInternal("");
+            }
         }
         else {
-            this.setTextInternal(this.history[this.historyIndex] || "");
+            this.setTextInternal(this.history[this.historyIndex] || "", direction === -1 ? "start" : "end");
         }
     }
+    exitHistoryBrowsing() {
+        this.historyIndex = -1;
+        this.historyDraft = null;
+    }
     /** Internal setText that doesn't reset history state - used by navigateHistory */
-    setTextInternal(text) {
+    setTextInternal(text, cursorPlacement = "end") {
         const lines = text.split("\n");
         this.state.lines = lines.length === 0 ? [""] : lines;
-        this.state.cursorLine = this.state.lines.length - 1;
-        this.setCursorCol(this.state.lines[this.state.cursorLine]?.length || 0);
+        this.state.cursorLine = cursorPlacement === "start" ? 0 : this.state.lines.length - 1;
+        this.setCursorCol(cursorPlacement === "start" ? 0 : this.state.lines[this.state.cursorLine]?.length || 0);
         // Reset scroll - render() will adjust to show cursor
         this.scrollOffset = 0;
         if (this.onChange) {
@@ -360,8 +406,10 @@ export class Editor {
             result.push(horizontal.repeat(width));
         }
         // Render each visible layout line
-        // Emit hardware cursor marker only when focused and not showing autocomplete
-        const emitCursorMarker = this.focused && !this.autocompleteState;
+        // Emit hardware cursor marker when focused so TUI can position the
+        // hardware cursor for IME candidate-window placement even while
+        // autocomplete (e.g. slash-command menu) is visible.
+        const emitCursorMarker = this.focused;
         for (const layoutLine of visibleLines) {
             let displayText = layoutLine.text;
             let lineVisibleWidth = visibleWidth(layoutLine.text);
@@ -375,7 +423,7 @@ export class Editor {
                 if (after.length > 0) {
                     // Cursor is on a character (grapheme) - replace it with highlighted version
                     // Get the first grapheme from 'after'
-                    const afterGraphemes = [...this.segment(after)];
+                    const afterGraphemes = [...this.segment(after, "grapheme")];
                     const firstGrapheme = afterGraphemes[0]?.segment || "";
                     const restAfter = after.slice(firstGrapheme.length);
                     const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`;
@@ -429,11 +477,12 @@ export class Editor {
                 this.jumpMode = null;
                 return;
             }
-            if (data.charCodeAt(0) >= 32) {
+            const printable = decodePrintableKey(data) ?? (data.charCodeAt(0) >= 32 ? data : undefined);
+            if (printable !== undefined) {
                 // Printable character - perform the jump
                 const direction = this.jumpMode;
                 this.jumpMode = null;
-                this.jumpToChar(data, direction);
+                this.jumpToChar(printable, direction);
                 return;
             }
             // Control character - cancel and fall through to normal handling
@@ -607,10 +656,7 @@ export class Editor {
         }
         // Arrow key navigation (with history support)
         if (kb.matches(data, "tui.editor.cursorUp")) {
-            if (this.isEditorEmpty()) {
-                this.navigateHistory(-1);
-            }
-            else if (this.historyIndex > -1 && this.isOnFirstVisualLine()) {
+            if (this.isOnFirstVisualLine() && this.history.length > 0) {
                 this.navigateHistory(-1);
             }
             else if (this.isOnFirstVisualLine()) {
@@ -666,9 +712,9 @@ export class Editor {
             this.insertCharacter(" ");
             return;
         }
-        const kittyPrintable = decodeKittyPrintable(data);
-        if (kittyPrintable !== undefined) {
-            this.insertCharacter(kittyPrintable);
+        const printable = decodePrintableKey(data);
+        if (printable !== undefined) {
+            this.insertCharacter(printable);
             return;
         }
         // Regular characters
@@ -710,7 +756,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, contentWidth, [...this.segment(line)]);
+                const chunks = wordWrapLine(line, contentWidth, [...this.segment(line, "grapheme")]);
                 for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
                     const chunk = chunks[chunkIndex];
                     if (!chunk)
@@ -786,7 +832,7 @@ export class Editor {
     setText(text) {
         this.cancelAutocomplete();
         this.lastAction = null;
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         const normalized = this.normalizeText(text);
         // Push undo snapshot if content differs (makes programmatic changes undoable)
         if (this.getText() !== normalized) {
@@ -805,7 +851,7 @@ export class Editor {
         this.cancelAutocomplete();
         this.pushUndoSnapshot();
         this.lastAction = null;
-        this.historyIndex = -1;
+        this.exitHistoryBrowsing();
         this.insertTextAtCursorInternal(text);
     }
     /**
@@ -858,7 +904,7 @@ export class Editor {
     }
     // All the editor methods from before...
     insertCharacter(char, skipUndoCoalescing) {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         // Undo coalescing (fish-style):
         // - Consecutive word chars coalesce into one undo unit
         // - Space captures state before itself (so undo removes space+following word together)
@@ -884,17 +930,16 @@ export class Editor {
             if (char === "/" && this.isAtStartOfMessage()) {
                 this.tryTriggerAutocomplete();
             }
-            // Auto-trigger for "@" file reference (fuzzy search)
-            else if (char === "@") {
+            // Auto-trigger for symbol-based completion like @, #, or provider triggers at token boundaries
+            else if (this.autocompleteTriggerCharacters.includes(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") {
+                const charBeforeSymbol = textBeforeCursor[textBeforeCursor.length - 2];
+                if (textBeforeCursor.length === 1 || charBeforeSymbol === " " || charBeforeSymbol === "\t") {
                     this.tryTriggerAutocomplete();
                 }
             }
-            // Also auto-trigger when typing letters in a slash command context
+            // Also auto-trigger when typing letters in a slash command or symbol completion 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);
@@ -902,8 +947,8 @@ export class Editor {
                 if (this.isInSlashCommandContext(textBeforeCursor)) {
                     this.tryTriggerAutocomplete();
                 }
-                // Check if we're in an @ file reference context
-                else if (textBeforeCursor.match(/(?:^|[\s])@[^\s]*$/)) {
+                // Check if we're in a symbol-based completion context like @, #, or provider triggers
+                else if (this.autocompleteTriggerPattern.test(textBeforeCursor)) {
                     this.tryTriggerAutocomplete();
                 }
             }
@@ -914,11 +959,24 @@ export class Editor {
     }
     handlePaste(pastedText) {
         this.cancelAutocomplete();
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         this.lastAction = null;
         this.pushUndoSnapshot();
+        // Some terminals (e.g. tmux popups with extended-keys-format=csi-u) re-encode
+        // control bytes inside bracketed paste as CSI-u Ctrl+<letter> sequences
+        // (ESC [ <codepoint> ; 5 u). Decode those back to their literal byte so the
+        // per-char filter below preserves newlines instead of stripping ESC and
+        // leaking the printable tail (e.g. "[106;5u") into the editor.
+        const decodedText = pastedText.replace(/\x1b\[(\d+);5u/g, (match, code) => {
+            const cp = Number(code);
+            if (cp >= 97 && cp <= 122)
+                return String.fromCharCode(cp - 96);
+            if (cp >= 65 && cp <= 90)
+                return String.fromCharCode(cp - 64);
+            return match;
+        });
         // Clean the pasted text: normalize line endings, expand tabs
-        const cleanText = this.normalizeText(pastedText);
+        const cleanText = this.normalizeText(decodedText);
         // Filter out non-printable characters except newlines
         let filteredText = cleanText
             .split("")
@@ -959,7 +1017,7 @@ export class Editor {
     }
     addNewLine() {
         this.cancelAutocomplete();
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         this.lastAction = null;
         this.pushUndoSnapshot();
         const currentLine = this.state.lines[this.state.cursorLine] || "";
@@ -993,7 +1051,7 @@ export class Editor {
         this.state = { lines: [""], cursorLine: 0, cursorCol: 0 };
         this.pastes.clear();
         this.pasteCounter = 0;
-        this.historyIndex = -1;
+        this.exitHistoryBrowsing();
         this.scrollOffset = 0;
         this.undoStack.clear();
         this.lastAction = null;
@@ -1003,7 +1061,7 @@ export class Editor {
             this.onSubmit(result);
     }
     handleBackspace() {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         this.lastAction = null;
         if (this.state.cursorCol > 0) {
             this.pushUndoSnapshot();
@@ -1011,7 +1069,7 @@ export class Editor {
             const line = this.state.lines[this.state.cursorLine] || "";
             const beforeCursor = line.slice(0, this.state.cursorCol);
             // Find the last grapheme in the text before cursor
-            const graphemes = [...this.segment(beforeCursor)];
+            const graphemes = [...this.segment(beforeCursor, "grapheme")];
             const lastGrapheme = graphemes[graphemes.length - 1];
             const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1;
             const before = line.slice(0, this.state.cursorCol - graphemeLength);
@@ -1044,8 +1102,8 @@ export class Editor {
             if (this.isInSlashCommandContext(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
-            // @ file reference context
-            else if (textBeforeCursor.match(/(?:^|[\s])@[^\s]*$/)) {
+            // Symbol-based completion context like @, #, or provider triggers
+            else if (this.autocompleteTriggerPattern.test(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
         }
@@ -1057,6 +1115,7 @@ export class Editor {
     setCursorCol(col) {
         this.state.cursorCol = col;
         this.preferredVisualCol = null;
+        this.snappedFromCursorCol = null;
     }
     /**
      * Move cursor to a target visual line, applying sticky column logic.
@@ -1065,37 +1124,70 @@ export class Editor {
     moveToVisualLine(visualLines, currentVisualLine, targetVisualLine) {
         const currentVL = visualLines[currentVisualLine];
         const targetVL = visualLines[targetVisualLine];
-        if (currentVL && targetVL) {
-            const currentVisualCol = this.state.cursorCol - currentVL.startCol;
-            // For non-last segments, clamp to length-1 to stay within the segment
-            const isLastSourceSegment = currentVisualLine === visualLines.length - 1 ||
-                visualLines[currentVisualLine + 1]?.logicalLine !== currentVL.logicalLine;
-            const sourceMaxVisualCol = isLastSourceSegment ? currentVL.length : Math.max(0, currentVL.length - 1);
-            const isLastTargetSegment = targetVisualLine === visualLines.length - 1 ||
-                visualLines[targetVisualLine + 1]?.logicalLine !== targetVL.logicalLine;
-            const targetMaxVisualCol = isLastTargetSegment ? targetVL.length : Math.max(0, targetVL.length - 1);
-            const moveToVisualCol = this.computeVerticalMoveColumn(currentVisualCol, sourceMaxVisualCol, targetMaxVisualCol);
-            // Set cursor position
-            this.state.cursorLine = targetVL.logicalLine;
-            const targetCol = targetVL.startCol + moveToVisualCol;
-            const logicalLine = this.state.lines[targetVL.logicalLine] || "";
-            this.state.cursorCol = Math.min(targetCol, logicalLine.length);
-            // Snap cursor to atomic segment boundary (e.g. paste markers)
-            // so the cursor never lands in the middle of a multi-grapheme unit.
-            // Single-grapheme segments don't need snapping.
-            const segments = [...this.segment(logicalLine)];
-            for (const seg of segments) {
-                if (seg.index > this.state.cursorCol)
-                    break;
-                if (seg.segment.length <= 1)
-                    continue;
-                if (this.state.cursorCol < seg.index + seg.segment.length) {
-                    // jump to the start of the segment when moving up, to the end when moving down.
-                    this.state.cursorCol = currentVisualLine > targetVisualLine ? seg.index : seg.index + seg.segment.length;
-                    break;
+        if (!(currentVL && targetVL))
+            return;
+        // When the cursor was snapped to a segment start, resolve the pre-snap
+        // position against the VL it belongs to. This gives the correct visual
+        // column even after a resize reshuffles VLs.
+        let currentVisualCol;
+        if (this.snappedFromCursorCol !== null) {
+            const vlIndex = this.findVisualLineAt(visualLines, currentVL.logicalLine, this.snappedFromCursorCol);
+            currentVisualCol = this.snappedFromCursorCol - visualLines[vlIndex].startCol;
+        }
+        else {
+            currentVisualCol = this.state.cursorCol - currentVL.startCol;
+        }
+        // For non-last segments, clamp to length-1 to stay within the segment
+        const isLastSourceSegment = currentVisualLine === visualLines.length - 1 ||
+            visualLines[currentVisualLine + 1]?.logicalLine !== currentVL.logicalLine;
+        const sourceMaxVisualCol = isLastSourceSegment ? currentVL.length : Math.max(0, currentVL.length - 1);
+        const isLastTargetSegment = targetVisualLine === visualLines.length - 1 ||
+            visualLines[targetVisualLine + 1]?.logicalLine !== targetVL.logicalLine;
+        const targetMaxVisualCol = isLastTargetSegment ? targetVL.length : Math.max(0, targetVL.length - 1);
+        const moveToVisualCol = this.computeVerticalMoveColumn(currentVisualCol, sourceMaxVisualCol, targetMaxVisualCol);
+        // Set cursor position
+        this.state.cursorLine = targetVL.logicalLine;
+        const targetCol = targetVL.startCol + moveToVisualCol;
+        const logicalLine = this.state.lines[targetVL.logicalLine] || "";
+        this.state.cursorCol = Math.min(targetCol, logicalLine.length);
+        // Snap cursor to atomic segment boundary (e.g. paste markers)
+        // so the cursor never lands in the middle of a multi-grapheme unit.
+        // Single-grapheme segments don't need snapping.
+        const segments = [...this.segment(logicalLine, "grapheme")];
+        for (const seg of segments) {
+            if (seg.index > this.state.cursorCol)
+                break;
+            if (seg.segment.length <= 1)
+                continue;
+            if (this.state.cursorCol < seg.index + seg.segment.length) {
+                const isContinuation = seg.index < targetVL.startCol;
+                const isMovingDown = targetVisualLine > currentVisualLine;
+                if (isContinuation && isMovingDown) {
+                    // The segment started on a previous visual line, and we
+                    // already visited it on the way down. Skip all remaining
+                    // continuation VLs and land on the first VL past it.
+                    const segEnd = seg.index + seg.segment.length;
+                    let next = targetVisualLine + 1;
+                    while (next < visualLines.length &&
+                        visualLines[next].logicalLine === targetVL.logicalLine &&
+                        visualLines[next].startCol < segEnd) {
+                        next++;
+                    }
+                    if (next < visualLines.length) {
+                        this.moveToVisualLine(visualLines, currentVisualLine, next);
+                        return;
+                    }
                 }
+                // Snap to the start of the segment so it gets highlighted.
+                // Store the pre-snap position so the next vertical move can
+                // resolve it to the correct visual column.
+                this.snappedFromCursorCol = this.state.cursorCol;
+                this.state.cursorCol = seg.index;
+                return;
             }
         }
+        // No snap occurred – we moved out of the atomic segment.
+        this.snappedFromCursorCol = null;
     }
     /**
      * Compute the target visual column for vertical cursor movement.
@@ -1151,7 +1243,7 @@ export class Editor {
         this.setCursorCol(currentLine.length);
     }
     deleteToStartOfLine() {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         if (this.state.cursorCol > 0) {
             this.pushUndoSnapshot();
@@ -1179,7 +1271,7 @@ export class Editor {
         }
     }
     deleteToEndOfLine() {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         if (this.state.cursorCol < currentLine.length) {
             this.pushUndoSnapshot();
@@ -1204,7 +1296,7 @@ export class Editor {
         }
     }
     deleteWordBackwards() {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         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) {
@@ -1240,7 +1332,7 @@ export class Editor {
         }
     }
     deleteWordForward() {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         // If at end of line, merge with next line (delete the newline)
         if (this.state.cursorCol >= currentLine.length) {
@@ -1273,7 +1365,7 @@ export class Editor {
         }
     }
     handleForwardDelete() {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         this.lastAction = null;
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         if (this.state.cursorCol < currentLine.length) {
@@ -1281,7 +1373,7 @@ export class Editor {
             // Delete grapheme at cursor position (handles emojis, combining characters, etc.)
             const afterCursor = currentLine.slice(this.state.cursorCol);
             // Find the first grapheme at cursor
-            const graphemes = [...this.segment(afterCursor)];
+            const graphemes = [...this.segment(afterCursor, "grapheme")];
             const firstGrapheme = graphemes[0];
             const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
             const before = currentLine.slice(0, this.state.cursorCol);
@@ -1309,8 +1401,8 @@ export class Editor {
             if (this.isInSlashCommandContext(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
-            // @ file reference context
-            else if (textBeforeCursor.match(/(?:^|[\s])@[^\s]*$/)) {
+            // Symbol-based completion context like @, #, or provider triggers
+            else if (this.autocompleteTriggerPattern.test(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
         }
@@ -1336,7 +1428,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, width, [...this.segment(line)]);
+                const chunks = wordWrapLine(line, width, [...this.segment(line, "grapheme")]);
                 for (const chunk of chunks) {
                     visualLines.push({
                         logicalLine: i,
@@ -1349,26 +1441,29 @@ export class Editor {
         return visualLines;
     }
     /**
-     * Find the visual line index for the current cursor position.
+     * Find the visual line index that contains the given logical position.
      */
-    findCurrentVisualLine(visualLines) {
+    findVisualLineAt(visualLines, line, col) {
         for (let i = 0; i < visualLines.length; i++) {
             const vl = visualLines[i];
-            if (!vl)
+            if (!vl || vl.logicalLine !== line)
                 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;
-                }
+            const offset = col - 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 (offset >= 0 && (offset < vl.length || (isLastSegmentOfLine && offset === vl.length))) {
+                return i;
             }
         }
-        // Fallback: return last visual line
         return visualLines.length - 1;
     }
+    /**
+     * Find the visual line index for the current cursor position.
+     */
+    findCurrentVisualLine(visualLines) {
+        return this.findVisualLineAt(visualLines, this.state.cursorLine, this.state.cursorCol);
+    }
     moveCursor(deltaLine, deltaCol) {
         this.lastAction = null;
         const visualLines = this.buildVisualLineMap(this.lastWidth);
@@ -1385,7 +1480,7 @@ export class Editor {
                 // Moving right - move by one grapheme (handles emojis, combining characters, etc.)
                 if (this.state.cursorCol < currentLine.length) {
                     const afterCursor = currentLine.slice(this.state.cursorCol);
-                    const graphemes = [...this.segment(afterCursor)];
+                    const graphemes = [...this.segment(afterCursor, "grapheme")];
                     const firstGrapheme = graphemes[0];
                     this.setCursorCol(this.state.cursorCol + (firstGrapheme ? firstGrapheme.segment.length : 1));
                 }
@@ -1406,7 +1501,7 @@ export class Editor {
                 // Moving left - move by one grapheme (handles emojis, combining characters, etc.)
                 if (this.state.cursorCol > 0) {
                     const beforeCursor = currentLine.slice(0, this.state.cursorCol);
-                    const graphemes = [...this.segment(beforeCursor)];
+                    const graphemes = [...this.segment(beforeCursor, "grapheme")];
                     const lastGrapheme = graphemes[graphemes.length - 1];
                     this.setCursorCol(this.state.cursorCol - (lastGrapheme ? lastGrapheme.segment.length : 1));
                 }
@@ -1418,6 +1513,17 @@ export class Editor {
                 }
             }
         }
+        // Keep an open autocomplete picker in sync with the new cursor
+        // position: cursor movement changes the text before the cursor, so a
+        // picker computed for the old position is stale. Re-query so it
+        // refreshes — or closes when the new position yields no suggestions —
+        // mirroring insertCharacter()/handleBackspace(). Without this, arrowing
+        // left from `/cmd ` back into the command name leaves the argument
+        // picker showing against a `/cmd` prefix (and a Tab there would
+        // concatenate the stale suggestion onto the partial command name).
+        if (this.autocompleteState) {
+            this.updateAutocomplete();
+        }
     }
     /**
      * Scroll by a page (direction: -1 for up, 1 for down).
@@ -1444,40 +1550,10 @@ export class Editor {
             }
             return;
         }
-        const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-        const graphemes = [...this.segment(textBeforeCursor)];
-        let newCol = this.state.cursorCol;
-        // Skip trailing whitespace
-        while (graphemes.length > 0 &&
-            !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "") &&
-            isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "")) {
-            newCol -= graphemes.pop()?.segment.length || 0;
-        }
-        if (graphemes.length > 0) {
-            const lastGrapheme = graphemes[graphemes.length - 1]?.segment || "";
-            if (isPasteMarker(lastGrapheme)) {
-                // Paste marker is a single atomic word
-                newCol -= graphemes.pop()?.segment.length || 0;
-            }
-            else if (isPunctuationChar(lastGrapheme)) {
-                // Skip punctuation run
-                while (graphemes.length > 0 &&
-                    isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
-                    newCol -= graphemes.pop()?.segment.length || 0;
-                }
-            }
-            else {
-                // Skip word run
-                while (graphemes.length > 0 &&
-                    !isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
-                    newCol -= graphemes.pop()?.segment.length || 0;
-                }
-            }
-        }
-        this.setCursorCol(newCol);
+        this.setCursorCol(findWordBackward(currentLine, this.state.cursorCol, {
+            segment: (text) => this.segment(text, "word"),
+            isAtomicSegment: isPasteMarker,
+        }));
     }
     /**
      * Yank (paste) the most recent kill ring entry at cursor position.
@@ -1512,7 +1588,7 @@ export class Editor {
      * Insert text at cursor position (used by yank operations).
      */
     insertYankedText(text) {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         const lines = text.split("\n");
         if (lines.length === 1) {
             // Single line - insert at cursor
@@ -1584,7 +1660,7 @@ export class Editor {
         this.undoStack.push(this.state);
     }
     undo() {
-        this.historyIndex = -1; // Exit history browsing mode
+        this.exitHistoryBrowsing();
         const snapshot = this.undoStack.pop();
         if (!snapshot)
             return;
@@ -1634,41 +1710,10 @@ export class Editor {
             }
             return;
         }
-        const textAfterCursor = currentLine.slice(this.state.cursorCol);
-        const segments = this.segment(textAfterCursor);
-        const iterator = segments[Symbol.iterator]();
-        let next = iterator.next();
-        let newCol = this.state.cursorCol;
-        // Skip leading whitespace
-        while (!next.done && !isPasteMarker(next.value.segment) && isWhitespaceChar(next.value.segment)) {
-            newCol += next.value.segment.length;
-            next = iterator.next();
-        }
-        if (!next.done) {
-            const firstGrapheme = next.value.segment;
-            if (isPasteMarker(firstGrapheme)) {
-                // Paste marker is a single atomic word
-                newCol += firstGrapheme.length;
-            }
-            else if (isPunctuationChar(firstGrapheme)) {
-                // Skip punctuation run
-                while (!next.done && isPunctuationChar(next.value.segment) && !isPasteMarker(next.value.segment)) {
-                    newCol += next.value.segment.length;
-                    next = iterator.next();
-                }
-            }
-            else {
-                // Skip word run
-                while (!next.done &&
-                    !isWhitespaceChar(next.value.segment) &&
-                    !isPunctuationChar(next.value.segment) &&
-                    !isPasteMarker(next.value.segment)) {
-                    newCol += next.value.segment.length;
-                    next = iterator.next();
-                }
-            }
-        }
-        this.setCursorCol(newCol);
+        this.setCursorCol(findWordForward(currentLine, this.state.cursorCol, {
+            segment: (text) => this.segment(text, "word"),
+            isAtomicSegment: isPasteMarker,
+        }));
     }
     // Slash menu only allowed on the first line of the editor
     isSlashMenuAllowed() {
@@ -1741,9 +1786,8 @@ export class Editor {
         if (!this.autocompleteProvider)
             return;
         if (options.force) {
-            const provider = this.autocompleteProvider;
-            const shouldTrigger = !provider.shouldTriggerFileCompletion ||
-                provider.shouldTriggerFileCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol);
+            const shouldTrigger = !this.autocompleteProvider.shouldTriggerFileCompletion ||
+                this.autocompleteProvider.shouldTriggerFileCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol);
             if (!shouldTrigger) {
                 return;
             }
@@ -1777,14 +1821,25 @@ export class Editor {
         })();
         await this.autocompleteRequestTask;
     }
+    setAutocompleteTriggerCharacters(triggerCharacters) {
+        const next = [...DEFAULT_AUTOCOMPLETE_TRIGGER_CHARACTERS];
+        for (const character of triggerCharacters) {
+            if (character.length !== 1 || character === "/" || isWhitespaceChar(character) || next.includes(character)) {
+                continue;
+            }
+            next.push(character);
+        }
+        this.autocompleteTriggerCharacters = next;
+        this.autocompleteTriggerPattern = buildTriggerPattern(next);
+        this.autocompleteDebouncePattern = buildDebouncePattern(next);
+    }
     getAutocompleteDebounceMs(options) {
         if (options.explicitTab || options.force) {
             return 0;
         }
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-        const isAttachmentContext = /(?:^|[ \t])@(?:"[^"]*|[^\s]*)$/.test(textBeforeCursor);
-        return isAttachmentContext ? ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS : 0;
+        return this.autocompleteDebouncePattern.test(textBeforeCursor) ? ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS : 0;
     }
     async runAutocompleteRequest(requestId, controller, snapshotText, snapshotLine, snapshotCol, options) {
         if (!this.autocompleteProvider)