phi-code-tui 0.56.3 → 0.74.1

package/dist/components/editor.js

@@ -1,11 +1,71 @@
-import { getEditorKeybindings } from "../keybindings.js";
-import { decodeKittyPrintable, matchesKey } from "../keys.js";
+import { getKeybindings } from "../keybindings.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, visibleWidth } from "../utils.js";
+import { getSegmenter, isPunctuationChar, isWhitespaceChar, truncateToWidth, visibleWidth } from "../utils.js";
 import { SelectList } from "./select-list.js";
-const segmenter = getSegmenter();
+const baseSegmenter = getSegmenter();
+/** 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. */
+const PASTE_MARKER_SINGLE = /^\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]$/;
+/** Check if a segment is a paste marker (i.e. was merged by segmentWithMarkers). */
+function isPasteMarker(segment) {
+    return segment.length >= 10 && PASTE_MARKER_SINGLE.test(segment);
+}
+/**
+ * A segmenter that wraps Intl.Segmenter and merges graphemes that fall
+ * within paste markers into single atomic segments.  This makes cursor
+ * movement, deletion, word-wrap, etc. treat paste markers as single units.
+ *
+ * Only markers whose numeric ID exists in `validIds` are merged.
+ */
+function segmentWithMarkers(text, validIds) {
+    // Fast path: no paste markers in the text or no valid IDs.
+    if (validIds.size === 0 || !text.includes("[paste #")) {
+        return baseSegmenter.segment(text);
+    }
+    // Find all marker spans with valid IDs.
+    const markers = [];
+    for (const m of text.matchAll(PASTE_MARKER_REGEX)) {
+        const id = Number.parseInt(m[1], 10);
+        if (!validIds.has(id))
+            continue;
+        markers.push({ start: m.index, end: m.index + m[0].length });
+    }
+    if (markers.length === 0) {
+        return baseSegmenter.segment(text);
+    }
+    // Build merged segment list.
+    const baseSegments = baseSegmenter.segment(text);
+    const result = [];
+    let markerIdx = 0;
+    for (const seg of baseSegments) {
+        // Skip past markers that are entirely before this segment.
+        while (markerIdx < markers.length && markers[markerIdx].end <= seg.index) {
+            markerIdx++;
+        }
+        const marker = markerIdx < markers.length ? markers[markerIdx] : null;
+        if (marker && seg.index >= marker.start && seg.index < marker.end) {
+            // This segment falls inside a marker.
+            // If this is the first segment of the marker, emit a merged segment.
+            if (seg.index === marker.start) {
+                const markerText = text.slice(marker.start, marker.end);
+                result.push({
+                    segment: markerText,
+                    index: marker.start,
+                    input: text,
+                });
+            }
+            // Otherwise skip (already merged into the first segment).
+        }
+        else {
+            result.push(seg);
+        }
+    }
+    return result;
+}
 /**
  * Split a line into word-wrapped chunks.
  * Wraps at word boundaries when possible, falling back to character-level
@@ -13,9 +73,11 @@ const segmenter = getSegmenter();
  *
  * @param line - The text line to wrap
  * @param maxWidth - Maximum visible width per chunk
+ * @param preSegmented - Optional pre-segmented graphemes (e.g. with paste-marker awareness).
+ *                       When omitted the default Intl.Segmenter is used.
  * @returns Array of chunks with text and position information
  */
-export function wordWrapLine(line, maxWidth) {
+export function wordWrapLine(line, maxWidth, preSegmented) {
     if (!line || maxWidth <= 0) {
         return [{ text: "", startIndex: 0, endIndex: 0 }];
     }
@@ -24,7 +86,7 @@ export function wordWrapLine(line, maxWidth) {
         return [{ text: line, startIndex: 0, endIndex: line.length }];
     }
     const chunks = [];
-    const segments = [...segmenter.segment(line)];
+    const segments = preSegmented ?? [...baseSegmenter.segment(line)];
     let currentWidth = 0;
     let chunkStart = 0;
     // Wrap opportunity: the position after the last whitespace before a non-whitespace
@@ -36,30 +98,51 @@ export function wordWrapLine(line, maxWidth) {
         const grapheme = seg.segment;
         const gWidth = visibleWidth(grapheme);
         const charIndex = seg.index;
-        const isWs = isWhitespaceChar(grapheme);
+        const isWs = !isPasteMarker(grapheme) && isWhitespaceChar(grapheme);
         // Overflow check before advancing.
         if (currentWidth + gWidth > maxWidth) {
-            if (wrapOppIndex >= 0) {
-                // Backtrack to last wrap opportunity.
+            if (wrapOppIndex >= 0 && currentWidth - wrapOppWidth + gWidth <= maxWidth) {
+                // Backtrack to last wrap opportunity (the remaining content
+                // plus the current grapheme still fits within maxWidth).
                 chunks.push({ text: line.slice(chunkStart, wrapOppIndex), startIndex: chunkStart, endIndex: wrapOppIndex });
                 chunkStart = wrapOppIndex;
                 currentWidth -= wrapOppWidth;
             }
             else if (chunkStart < charIndex) {
-                // No wrap opportunity: force-break at current position.
+                // No viable wrap opportunity: force-break at current position.
+                // This also handles the case where backtracking to a word
+                // boundary wouldn't help because the remaining content plus
+                // the current grapheme (e.g. a wide character) still exceeds
+                // maxWidth.
                 chunks.push({ text: line.slice(chunkStart, charIndex), startIndex: chunkStart, endIndex: charIndex });
                 chunkStart = charIndex;
                 currentWidth = 0;
             }
             wrapOppIndex = -1;
         }
+        if (gWidth > maxWidth) {
+            // Single atomic segment wider than maxWidth (e.g. paste marker
+            // in a narrow terminal). Re-wrap it at grapheme granularity.
+            // The segment remains logically atomic for cursor
+            // movement / editing — the split is purely visual for word-wrap layout.
+            const subChunks = wordWrapLine(grapheme, maxWidth);
+            for (let j = 0; j < subChunks.length - 1; j++) {
+                const sc = subChunks[j];
+                chunks.push({ text: sc.text, startIndex: charIndex + sc.startIndex, endIndex: charIndex + sc.endIndex });
+            }
+            const last = subChunks[subChunks.length - 1];
+            chunkStart = charIndex + last.startIndex;
+            currentWidth = visibleWidth(last.text);
+            wrapOppIndex = -1;
+            continue;
+        }
         // 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.
         const next = segments[i + 1];
-        if (isWs && next && !isWhitespaceChar(next.segment)) {
+        if (isWs && next && (isPasteMarker(next.segment) || !isWhitespaceChar(next.segment))) {
             wrapOppIndex = next.index;
             wrapOppWidth = currentWidth;
         }
@@ -68,42 +151,67 @@ export function wordWrapLine(line, maxWidth) {
     chunks.push({ text: line.slice(chunkStart), startIndex: chunkStart, endIndex: line.length });
     return chunks;
 }
+const SLASH_COMMAND_SELECT_LIST_LAYOUT = {
+    minPrimaryColumnWidth: 12,
+    maxPrimaryColumnWidth: 32,
+};
+const ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS = 20;
 export class Editor {
+    state = {
+        lines: [""],
+        cursorLine: 0,
+        cursorCol: 0,
+    };
+    /** Focusable interface - set by TUI when focus changes */
+    focused = false;
+    tui;
+    theme;
+    paddingX = 0;
+    // Store last render width for cursor navigation
+    lastWidth = 80;
+    // Vertical scrolling support
+    scrollOffset = 0;
+    // Border color (can be changed dynamically)
+    borderColor;
+    // Autocomplete support
+    autocompleteProvider;
+    autocompleteList;
+    autocompleteState = null;
+    autocompletePrefix = "";
+    autocompleteMaxVisible = 5;
+    autocompleteAbort;
+    autocompleteDebounceTimer;
+    autocompleteRequestTask = Promise.resolve();
+    autocompleteStartToken = 0;
+    autocompleteRequestId = 0;
+    // Paste tracking for large pastes
+    pastes = new Map();
+    pasteCounter = 0;
+    // 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.
+    // Kill ring for Emacs-style kill/yank operations
+    killRing = new KillRing();
+    lastAction = null;
+    // Character jump mode
+    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;
+    onChange;
+    disableSubmit = false;
     constructor(tui, theme, options = {}) {
-        this.state = {
-            lines: [""],
-            cursorLine: 0,
-            cursorCol: 0,
-        };
-        /** Focusable interface - set by TUI when focus changes */
-        this.focused = false;
-        this.paddingX = 0;
-        // Store last render width for cursor navigation
-        this.lastWidth = 80;
-        // Vertical scrolling support
-        this.scrollOffset = 0;
-        this.autocompleteState = null;
-        this.autocompletePrefix = "";
-        this.autocompleteMaxVisible = 5;
-        // Paste tracking for large pastes
-        this.pastes = new Map();
-        this.pasteCounter = 0;
-        // Bracketed paste mode buffering
-        this.pasteBuffer = "";
-        this.isInPaste = false;
-        // Prompt history for up/down navigation
-        this.history = [];
-        this.historyIndex = -1; // -1 = not browsing, 0 = most recent, 1 = older, etc.
-        // Kill ring for Emacs-style kill/yank operations
-        this.killRing = new KillRing();
-        this.lastAction = null;
-        // Character jump mode
-        this.jumpMode = null;
-        // Preferred visual column for vertical cursor movement (sticky column)
-        this.preferredVisualCol = null;
-        // Undo support
-        this.undoStack = new UndoStack();
-        this.disableSubmit = false;
         this.tui = tui;
         this.theme = theme;
         this.borderColor = theme.borderColor;
@@ -112,6 +220,14 @@ export class Editor {
         const maxVisible = options.autocompleteMaxVisible ?? 5;
         this.autocompleteMaxVisible = Number.isFinite(maxVisible) ? Math.max(3, Math.min(20, Math.floor(maxVisible))) : 5;
     }
+    /** Set of currently valid paste IDs, for marker-aware segmentation. */
+    validPasteIds() {
+        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());
+    }
     getPaddingX() {
         return this.paddingX;
     }
@@ -133,6 +249,7 @@ export class Editor {
         }
     }
     setAutocompleteProvider(provider) {
+        this.cancelAutocomplete();
         this.autocompleteProvider = provider;
     }
     /**
@@ -187,7 +304,7 @@ export class Editor {
     }
     /** 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");
+        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);
@@ -238,7 +355,12 @@ export class Editor {
         if (this.scrollOffset > 0) {
             const indicator = `─── ↑ ${this.scrollOffset} more `;
             const remaining = width - visibleWidth(indicator);
-            result.push(this.borderColor(indicator + "─".repeat(Math.max(0, remaining))));
+            if (remaining >= 0) {
+                result.push(this.borderColor(indicator + "─".repeat(remaining)));
+            }
+            else {
+                result.push(this.borderColor(truncateToWidth(indicator, width)));
+            }
         }
         else {
             result.push(horizontal.repeat(width));
@@ -259,7 +381,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 = [...segmenter.segment(after)];
+                    const afterGraphemes = [...this.segment(after)];
                     const firstGrapheme = afterGraphemes[0]?.segment || "";
                     const restAfter = after.slice(firstGrapheme.length);
                     const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`;
@@ -305,19 +427,20 @@ export class Editor {
         return result;
     }
     handleInput(data) {
-        const kb = getEditorKeybindings();
+        const kb = getKeybindings();
         // Handle character jump mode (awaiting next character to jump to)
         if (this.jumpMode !== null) {
             // Cancel if the hotkey is pressed again
-            if (kb.matches(data, "jumpForward") || kb.matches(data, "jumpBackward")) {
+            if (kb.matches(data, "tui.editor.jumpForward") || kb.matches(data, "tui.editor.jumpBackward")) {
                 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
@@ -348,25 +471,25 @@ export class Editor {
             return;
         }
         // Ctrl+C - let parent handle (exit/clear)
-        if (kb.matches(data, "copy")) {
+        if (kb.matches(data, "tui.input.copy")) {
             return;
         }
         // Undo
-        if (kb.matches(data, "undo")) {
+        if (kb.matches(data, "tui.editor.undo")) {
             this.undo();
             return;
         }
         // Handle autocomplete mode
         if (this.autocompleteState && this.autocompleteList) {
-            if (kb.matches(data, "selectCancel")) {
+            if (kb.matches(data, "tui.select.cancel")) {
                 this.cancelAutocomplete();
                 return;
             }
-            if (kb.matches(data, "selectUp") || kb.matches(data, "selectDown")) {
+            if (kb.matches(data, "tui.select.up") || kb.matches(data, "tui.select.down")) {
                 this.autocompleteList.handleInput(data);
                 return;
             }
-            if (kb.matches(data, "tab")) {
+            if (kb.matches(data, "tui.input.tab")) {
                 const selected = this.autocompleteList.getSelectedItem();
                 if (selected && this.autocompleteProvider) {
                     this.pushUndoSnapshot();
@@ -381,7 +504,7 @@ export class Editor {
                 }
                 return;
             }
-            if (kb.matches(data, "selectConfirm")) {
+            if (kb.matches(data, "tui.select.confirm")) {
                 const selected = this.autocompleteList.getSelectedItem();
                 if (selected && this.autocompleteProvider) {
                     this.pushUndoSnapshot();
@@ -404,63 +527,63 @@ export class Editor {
             }
         }
         // Tab - trigger completion
-        if (kb.matches(data, "tab") && !this.autocompleteState) {
+        if (kb.matches(data, "tui.input.tab") && !this.autocompleteState) {
             this.handleTabCompletion();
             return;
         }
         // Deletion actions
-        if (kb.matches(data, "deleteToLineEnd")) {
+        if (kb.matches(data, "tui.editor.deleteToLineEnd")) {
             this.deleteToEndOfLine();
             return;
         }
-        if (kb.matches(data, "deleteToLineStart")) {
+        if (kb.matches(data, "tui.editor.deleteToLineStart")) {
             this.deleteToStartOfLine();
             return;
         }
-        if (kb.matches(data, "deleteWordBackward")) {
+        if (kb.matches(data, "tui.editor.deleteWordBackward")) {
             this.deleteWordBackwards();
             return;
         }
-        if (kb.matches(data, "deleteWordForward")) {
+        if (kb.matches(data, "tui.editor.deleteWordForward")) {
             this.deleteWordForward();
             return;
         }
-        if (kb.matches(data, "deleteCharBackward") || matchesKey(data, "shift+backspace")) {
+        if (kb.matches(data, "tui.editor.deleteCharBackward") || matchesKey(data, "shift+backspace")) {
             this.handleBackspace();
             return;
         }
-        if (kb.matches(data, "deleteCharForward") || matchesKey(data, "shift+delete")) {
+        if (kb.matches(data, "tui.editor.deleteCharForward") || matchesKey(data, "shift+delete")) {
             this.handleForwardDelete();
             return;
         }
         // Kill ring actions
-        if (kb.matches(data, "yank")) {
+        if (kb.matches(data, "tui.editor.yank")) {
             this.yank();
             return;
         }
-        if (kb.matches(data, "yankPop")) {
+        if (kb.matches(data, "tui.editor.yankPop")) {
             this.yankPop();
             return;
         }
         // Cursor movement actions
-        if (kb.matches(data, "cursorLineStart")) {
+        if (kb.matches(data, "tui.editor.cursorLineStart")) {
             this.moveToLineStart();
             return;
         }
-        if (kb.matches(data, "cursorLineEnd")) {
+        if (kb.matches(data, "tui.editor.cursorLineEnd")) {
             this.moveToLineEnd();
             return;
         }
-        if (kb.matches(data, "cursorWordLeft")) {
+        if (kb.matches(data, "tui.editor.cursorWordLeft")) {
             this.moveWordBackwards();
             return;
         }
-        if (kb.matches(data, "cursorWordRight")) {
+        if (kb.matches(data, "tui.editor.cursorWordRight")) {
             this.moveWordForwards();
             return;
         }
         // New line
-        if (kb.matches(data, "newLine") ||
+        if (kb.matches(data, "tui.input.newLine") ||
             (data.charCodeAt(0) === 10 && data.length > 1) ||
             data === "\x1b\r" ||
             data === "\x1b[13;2~" ||
@@ -475,7 +598,7 @@ export class Editor {
             return;
         }
         // Submit (Enter)
-        if (kb.matches(data, "submit")) {
+        if (kb.matches(data, "tui.input.submit")) {
             if (this.disableSubmit)
                 return;
             // Workaround for terminals without Shift+Enter support:
@@ -490,7 +613,7 @@ export class Editor {
             return;
         }
         // Arrow key navigation (with history support)
-        if (kb.matches(data, "cursorUp")) {
+        if (kb.matches(data, "tui.editor.cursorUp")) {
             if (this.isEditorEmpty()) {
                 this.navigateHistory(-1);
             }
@@ -506,7 +629,7 @@ export class Editor {
             }
             return;
         }
-        if (kb.matches(data, "cursorDown")) {
+        if (kb.matches(data, "tui.editor.cursorDown")) {
             if (this.historyIndex > -1 && this.isOnLastVisualLine()) {
                 this.navigateHistory(1);
             }
@@ -519,29 +642,29 @@ export class Editor {
             }
             return;
         }
-        if (kb.matches(data, "cursorRight")) {
+        if (kb.matches(data, "tui.editor.cursorRight")) {
             this.moveCursor(0, 1);
             return;
         }
-        if (kb.matches(data, "cursorLeft")) {
+        if (kb.matches(data, "tui.editor.cursorLeft")) {
             this.moveCursor(0, -1);
             return;
         }
         // Page up/down - scroll by page and move cursor
-        if (kb.matches(data, "pageUp")) {
+        if (kb.matches(data, "tui.editor.pageUp")) {
             this.pageScroll(-1);
             return;
         }
-        if (kb.matches(data, "pageDown")) {
+        if (kb.matches(data, "tui.editor.pageDown")) {
             this.pageScroll(1);
             return;
         }
         // Character jump mode triggers
-        if (kb.matches(data, "jumpForward")) {
+        if (kb.matches(data, "tui.editor.jumpForward")) {
             this.jumpMode = "forward";
             return;
         }
-        if (kb.matches(data, "jumpBackward")) {
+        if (kb.matches(data, "tui.editor.jumpBackward")) {
             this.jumpMode = "backward";
             return;
         }
@@ -550,9 +673,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
@@ -594,7 +717,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, contentWidth);
+                const chunks = wordWrapLine(line, contentWidth, [...this.segment(line)]);
                 for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
                     const chunk = chunks[chunkIndex];
                     if (!chunk)
@@ -646,17 +769,20 @@ export class Editor {
     getText() {
         return this.state.lines.join("\n");
     }
+    expandPasteMarkers(text) {
+        let result = text;
+        for (const [pasteId, pasteContent] of this.pastes) {
+            const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
+            result = result.replace(markerRegex, () => pasteContent);
+        }
+        return result;
+    }
     /**
      * Get text with paste markers expanded to their actual content.
      * Use this when you need the full content (e.g., for external editor).
      */
     getExpandedText() {
-        let result = this.state.lines.join("\n");
-        for (const [pasteId, pasteContent] of this.pastes) {
-            const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
-            result = result.replace(markerRegex, pasteContent);
-        }
-        return result;
+        return this.expandPasteMarkers(this.state.lines.join("\n"));
     }
     getLines() {
         return [...this.state.lines];
@@ -665,13 +791,15 @@ export class Editor {
         return { line: this.state.cursorLine, col: this.state.cursorCol };
     }
     setText(text) {
+        this.cancelAutocomplete();
         this.lastAction = null;
         this.historyIndex = -1; // Exit history browsing mode
+        const normalized = this.normalizeText(text);
         // Push undo snapshot if content differs (makes programmatic changes undoable)
-        if (this.getText() !== text) {
+        if (this.getText() !== normalized) {
             this.pushUndoSnapshot();
         }
-        this.setTextInternal(text);
+        this.setTextInternal(normalized);
     }
     /**
      * Insert text at the current cursor position.
@@ -681,11 +809,20 @@ export class Editor {
     insertTextAtCursor(text) {
         if (!text)
             return;
+        this.cancelAutocomplete();
         this.pushUndoSnapshot();
         this.lastAction = null;
         this.historyIndex = -1;
         this.insertTextAtCursorInternal(text);
     }
+    /**
+     * Normalize text for editor storage:
+     * - Normalize line endings (\r\n and \r -> \n)
+     * - Expand tabs to 4 spaces
+     */
+    normalizeText(text) {
+        return text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\t/g, "    ");
+    }
     /**
      * Internal text insertion at cursor. Handles single and multi-line text.
      * Does not push undo snapshots or trigger autocomplete - caller is responsible.
@@ -694,8 +831,8 @@ export class Editor {
     insertTextAtCursorInternal(text) {
         if (!text)
             return;
-        // Normalize line endings
-        const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+        // Normalize line endings and tabs
+        const normalized = this.normalizeText(text);
         const insertedLines = normalized.split("\n");
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         const beforeCursor = currentLine.slice(0, this.state.cursorCol);
@@ -754,17 +891,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 # at token boundaries
+            else if (char === "@" || 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);
@@ -772,8 +908,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 #
+                else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
                     this.tryTriggerAutocomplete();
                 }
             }
@@ -783,15 +919,27 @@ export class Editor {
         }
     }
     handlePaste(pastedText) {
+        this.cancelAutocomplete();
         this.historyIndex = -1; // Exit history browsing mode
         this.lastAction = null;
         this.pushUndoSnapshot();
-        // Clean the pasted text
-        const cleanText = pastedText.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-        // Convert tabs to spaces (4 spaces per tab)
-        const tabExpandedText = cleanText.replace(/\t/g, "    ");
+        // 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(decodedText);
         // Filter out non-printable characters except newlines
-        let filteredText = tabExpandedText
+        let filteredText = cleanText
             .split("")
             .filter((char) => char === "\n" || char.charCodeAt(0) >= 32)
             .join("");
@@ -829,6 +977,7 @@ export class Editor {
         this.insertTextAtCursorInternal(filteredText);
     }
     addNewLine() {
+        this.cancelAutocomplete();
         this.historyIndex = -1; // Exit history browsing mode
         this.lastAction = null;
         this.pushUndoSnapshot();
@@ -850,7 +999,7 @@ export class Editor {
             return false;
         if (!matchesKey(data, "enter"))
             return false;
-        const submitKeys = kb.getKeys("submit");
+        const submitKeys = kb.getKeys("tui.input.submit");
         const hasShiftEnter = submitKeys.includes("shift+enter") || submitKeys.includes("shift+return");
         if (!hasShiftEnter)
             return false;
@@ -858,11 +1007,8 @@ export class Editor {
         return this.state.cursorCol > 0 && currentLine[this.state.cursorCol - 1] === "\\";
     }
     submitValue() {
-        let result = this.state.lines.join("\n").trim();
-        for (const [pasteId, pasteContent] of this.pastes) {
-            const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
-            result = result.replace(markerRegex, pasteContent);
-        }
+        this.cancelAutocomplete();
+        const result = this.expandPasteMarkers(this.state.lines.join("\n")).trim();
         this.state = { lines: [""], cursorLine: 0, cursorCol: 0 };
         this.pastes.clear();
         this.pasteCounter = 0;
@@ -884,7 +1030,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 = [...segmenter.segment(beforeCursor)];
+            const graphemes = [...this.segment(beforeCursor)];
             const lastGrapheme = graphemes[graphemes.length - 1];
             const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1;
             const before = line.slice(0, this.state.cursorCol - graphemeLength);
@@ -917,8 +1063,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 #
+            else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
                 this.tryTriggerAutocomplete();
             }
         }
@@ -930,6 +1076,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.
@@ -938,22 +1085,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);
+        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)];
+        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.
@@ -1139,7 +1334,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 = [...segmenter.segment(afterCursor)];
+            const graphemes = [...this.segment(afterCursor)];
             const firstGrapheme = graphemes[0];
             const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
             const before = currentLine.slice(0, this.state.cursorCol);
@@ -1167,8 +1362,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 #
+            else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
                 this.tryTriggerAutocomplete();
             }
         }
@@ -1194,7 +1389,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, width);
+                const chunks = wordWrapLine(line, width, [...this.segment(line)]);
                 for (const chunk of chunks) {
                     visualLines.push({
                         logicalLine: i,
@@ -1207,26 +1402,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);
@@ -1243,7 +1441,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 = [...segmenter.segment(afterCursor)];
+                    const graphemes = [...this.segment(afterCursor)];
                     const firstGrapheme = graphemes[0];
                     this.setCursorCol(this.state.cursorCol + (firstGrapheme ? firstGrapheme.segment.length : 1));
                 }
@@ -1264,7 +1462,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 = [...segmenter.segment(beforeCursor)];
+                    const graphemes = [...this.segment(beforeCursor)];
                     const lastGrapheme = graphemes[graphemes.length - 1];
                     this.setCursorCol(this.state.cursorCol - (lastGrapheme ? lastGrapheme.segment.length : 1));
                 }
@@ -1303,17 +1501,25 @@ export class Editor {
             return;
         }
         const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-        const graphemes = [...segmenter.segment(textBeforeCursor)];
+        const graphemes = [...this.segment(textBeforeCursor)];
         let newCol = this.state.cursorCol;
         // Skip trailing whitespace
-        while (graphemes.length > 0 && isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "")) {
+        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 (isPunctuationChar(lastGrapheme)) {
+            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 || "")) {
+                while (graphemes.length > 0 &&
+                    isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
+                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
                     newCol -= graphemes.pop()?.segment.length || 0;
                 }
             }
@@ -1321,7 +1527,8 @@ export class Editor {
                 // Skip word run
                 while (graphemes.length > 0 &&
                     !isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "")) {
+                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
+                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
                     newCol -= graphemes.pop()?.segment.length || 0;
                 }
             }
@@ -1484,27 +1691,34 @@ export class Editor {
             return;
         }
         const textAfterCursor = currentLine.slice(this.state.cursorCol);
-        const segments = segmenter.segment(textAfterCursor);
+        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 && isWhitespaceChar(next.value.segment)) {
+        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 (isPunctuationChar(firstGrapheme)) {
+            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)) {
+                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)) {
+                while (!next.done &&
+                    !isWhitespaceChar(next.value.segment) &&
+                    !isPunctuationChar(next.value.segment) &&
+                    !isPasteMarker(next.value.segment)) {
                     newCol += next.value.segment.length;
                     next = iterator.next();
                 }
@@ -1528,34 +1742,44 @@ export class Editor {
         return this.isSlashMenuAllowed() && textBeforeCursor.trimStart().startsWith("/");
     }
     // Autocomplete methods
-    tryTriggerAutocomplete(explicitTab = false) {
-        if (!this.autocompleteProvider)
-            return;
-        // Check if we should trigger file completion on Tab
-        if (explicitTab) {
-            const provider = this.autocompleteProvider;
-            const shouldTrigger = !provider.shouldTriggerFileCompletion ||
-                provider.shouldTriggerFileCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol);
-            if (!shouldTrigger) {
-                return;
+    /**
+     * Find the best autocomplete item index for the given prefix.
+     * Returns -1 if no match is found.
+     *
+     * Match priority:
+     * 1. Exact match (prefix === item.value) -> always selected
+     * 2. Prefix match -> first item whose value starts with prefix
+     * 3. No match -> -1 (keep default highlight)
+     *
+     * Matching is case-sensitive and checks item.value only.
+     */
+    getBestAutocompleteMatchIndex(items, prefix) {
+        if (!prefix)
+            return -1;
+        let firstPrefixIndex = -1;
+        for (let i = 0; i < items.length; i++) {
+            const value = items[i].value;
+            if (value === prefix) {
+                return i; // Exact match always wins
+            }
+            if (firstPrefixIndex === -1 && value.startsWith(prefix)) {
+                firstPrefixIndex = i;
             }
         }
-        const suggestions = this.autocompleteProvider.getSuggestions(this.state.lines, this.state.cursorLine, this.state.cursorCol);
-        if (suggestions && suggestions.items.length > 0) {
-            this.autocompletePrefix = suggestions.prefix;
-            this.autocompleteList = new SelectList(suggestions.items, this.autocompleteMaxVisible, this.theme.selectList);
-            this.autocompleteState = "regular";
-        }
-        else {
-            this.cancelAutocomplete();
-        }
+        return firstPrefixIndex;
+    }
+    createAutocompleteList(prefix, items) {
+        const layout = prefix.startsWith("/") ? SLASH_COMMAND_SELECT_LIST_LAYOUT : undefined;
+        return new SelectList(items, this.autocompleteMaxVisible, this.theme.selectList, layout);
+    }
+    tryTriggerAutocomplete(explicitTab = false) {
+        this.requestAutocomplete({ force: false, explicitTab });
     }
     handleTabCompletion() {
         if (!this.autocompleteProvider)
             return;
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         const beforeCursor = currentLine.slice(0, this.state.cursorCol);
-        // Check if we're in a slash command context
         if (this.isInSlashCommandContext(beforeCursor) && !beforeCursor.trimStart().includes(" ")) {
             this.handleSlashCommandCompletion();
         }
@@ -1564,69 +1788,129 @@ export class Editor {
         }
     }
     handleSlashCommandCompletion() {
-        this.tryTriggerAutocomplete(true);
+        this.requestAutocomplete({ force: false, explicitTab: true });
     }
-    /*
-https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19536643416/job/559322883
-17 this job fails with https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19
-536643416/job/55932288317 havea  look at .gi
-     */
     forceFileAutocomplete(explicitTab = false) {
+        this.requestAutocomplete({ force: true, explicitTab });
+    }
+    requestAutocomplete(options) {
         if (!this.autocompleteProvider)
             return;
-        // Check if provider supports force file suggestions via runtime check
-        const provider = this.autocompleteProvider;
-        if (typeof provider.getForceFileSuggestions !== "function") {
-            this.tryTriggerAutocomplete(true);
+        if (options.force) {
+            const shouldTrigger = !this.autocompleteProvider.shouldTriggerFileCompletion ||
+                this.autocompleteProvider.shouldTriggerFileCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol);
+            if (!shouldTrigger) {
+                return;
+            }
+        }
+        this.cancelAutocompleteRequest();
+        const startToken = ++this.autocompleteStartToken;
+        const debounceMs = this.getAutocompleteDebounceMs(options);
+        if (debounceMs > 0) {
+            this.autocompleteDebounceTimer = setTimeout(() => {
+                this.autocompleteDebounceTimer = undefined;
+                void this.startAutocompleteRequest(startToken, options);
+            }, debounceMs);
             return;
         }
-        const suggestions = provider.getForceFileSuggestions(this.state.lines, this.state.cursorLine, this.state.cursorCol);
-        if (suggestions && suggestions.items.length > 0) {
-            // If there's exactly one suggestion, apply it immediately
-            if (explicitTab && suggestions.items.length === 1) {
-                const item = suggestions.items[0];
-                this.pushUndoSnapshot();
-                this.lastAction = null;
-                const result = this.autocompleteProvider.applyCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol, item, suggestions.prefix);
-                this.state.lines = result.lines;
-                this.state.cursorLine = result.cursorLine;
-                this.setCursorCol(result.cursorCol);
-                if (this.onChange)
-                    this.onChange(this.getText());
+        void this.startAutocompleteRequest(startToken, options);
+    }
+    async startAutocompleteRequest(startToken, options) {
+        const previousTask = this.autocompleteRequestTask;
+        this.autocompleteRequestTask = (async () => {
+            await previousTask;
+            if (startToken !== this.autocompleteStartToken || !this.autocompleteProvider) {
                 return;
             }
-            this.autocompletePrefix = suggestions.prefix;
-            this.autocompleteList = new SelectList(suggestions.items, this.autocompleteMaxVisible, this.theme.selectList);
-            this.autocompleteState = "force";
+            const controller = new AbortController();
+            this.autocompleteAbort = controller;
+            const requestId = ++this.autocompleteRequestId;
+            const snapshotText = this.getText();
+            const snapshotLine = this.state.cursorLine;
+            const snapshotCol = this.state.cursorCol;
+            await this.runAutocompleteRequest(requestId, controller, snapshotText, snapshotLine, snapshotCol, options);
+        })();
+        await this.autocompleteRequestTask;
+    }
+    getAutocompleteDebounceMs(options) {
+        if (options.explicitTab || options.force) {
+            return 0;
         }
-        else {
+        const currentLine = this.state.lines[this.state.cursorLine] || "";
+        const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
+        const isSymbolAutocompleteContext = /(?:^|[ \t])(?:@(?:"[^"]*|[^\s]*)|#[^\s]*)$/.test(textBeforeCursor);
+        return isSymbolAutocompleteContext ? ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS : 0;
+    }
+    async runAutocompleteRequest(requestId, controller, snapshotText, snapshotLine, snapshotCol, options) {
+        if (!this.autocompleteProvider)
+            return;
+        const suggestions = await this.autocompleteProvider.getSuggestions(this.state.lines, this.state.cursorLine, this.state.cursorCol, { signal: controller.signal, force: options.force });
+        if (!this.isAutocompleteRequestCurrent(requestId, controller, snapshotText, snapshotLine, snapshotCol)) {
+            return;
+        }
+        this.autocompleteAbort = undefined;
+        if (!suggestions || !Array.isArray(suggestions.items) || suggestions.items.length === 0) {
             this.cancelAutocomplete();
+            this.tui.requestRender();
+            return;
+        }
+        if (options.force && options.explicitTab && suggestions.items.length === 1) {
+            const item = suggestions.items[0];
+            this.pushUndoSnapshot();
+            this.lastAction = null;
+            const result = this.autocompleteProvider.applyCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol, item, suggestions.prefix);
+            this.state.lines = result.lines;
+            this.state.cursorLine = result.cursorLine;
+            this.setCursorCol(result.cursorCol);
+            if (this.onChange)
+                this.onChange(this.getText());
+            this.tui.requestRender();
+            return;
         }
+        this.applyAutocompleteSuggestions(suggestions, options.force ? "force" : "regular");
+        this.tui.requestRender();
     }
-    cancelAutocomplete() {
+    isAutocompleteRequestCurrent(requestId, controller, snapshotText, snapshotLine, snapshotCol) {
+        return (!controller.signal.aborted &&
+            requestId === this.autocompleteRequestId &&
+            this.getText() === snapshotText &&
+            this.state.cursorLine === snapshotLine &&
+            this.state.cursorCol === snapshotCol);
+    }
+    applyAutocompleteSuggestions(suggestions, state) {
+        this.autocompletePrefix = suggestions.prefix;
+        this.autocompleteList = this.createAutocompleteList(suggestions.prefix, suggestions.items);
+        const bestMatchIndex = this.getBestAutocompleteMatchIndex(suggestions.items, suggestions.prefix);
+        if (bestMatchIndex >= 0) {
+            this.autocompleteList.setSelectedIndex(bestMatchIndex);
+        }
+        this.autocompleteState = state;
+    }
+    cancelAutocompleteRequest() {
+        this.autocompleteStartToken += 1;
+        if (this.autocompleteDebounceTimer) {
+            clearTimeout(this.autocompleteDebounceTimer);
+            this.autocompleteDebounceTimer = undefined;
+        }
+        this.autocompleteAbort?.abort();
+        this.autocompleteAbort = undefined;
+    }
+    clearAutocompleteUi() {
         this.autocompleteState = null;
         this.autocompleteList = undefined;
         this.autocompletePrefix = "";
     }
+    cancelAutocomplete() {
+        this.cancelAutocompleteRequest();
+        this.clearAutocompleteUi();
+    }
     isShowingAutocomplete() {
         return this.autocompleteState !== null;
     }
     updateAutocomplete() {
         if (!this.autocompleteState || !this.autocompleteProvider)
             return;
-        if (this.autocompleteState === "force") {
-            this.forceFileAutocomplete();
-            return;
-        }
-        const suggestions = this.autocompleteProvider.getSuggestions(this.state.lines, this.state.cursorLine, this.state.cursorCol);
-        if (suggestions && suggestions.items.length > 0) {
-            this.autocompletePrefix = suggestions.prefix;
-            // Always create new SelectList to ensure update
-            this.autocompleteList = new SelectList(suggestions.items, this.autocompleteMaxVisible, this.theme.selectList);
-        }
-        else {
-            this.cancelAutocomplete();
-        }
+        this.requestAutocomplete({ force: this.autocompleteState === "force", explicitTab: false });
     }
 }
 //# sourceMappingURL=editor.js.map