@namzu/cli 14.3.0 → 15.1.0

package/dist/tui/Composer.js

@@ -1,42 +1,147 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text, useInput } from 'ink';
+import { Box, Text, useInput, useWindowSize } from 'ink';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { readClipboardImage } from '../integrations/clipboard/image.js';
+import { activeFileMention, matchMentionableFiles } from './mentions.js';
 import { matchSlashCommands } from './slashCommands.js';
 import { terminalDisplayText } from './terminal-display.js';
 import { theme } from './theme.js';
-const MAX_SUGGESTIONS = 6;
+const MIN_SUGGESTIONS = 6;
+const MAX_SUGGESTIONS = 12;
+const SUGGESTION_FURNITURE_ROWS = 12;
 // A single keypress longer than this (with no newline) is treated as a paste.
 const PASTE_THRESHOLD = 80;
 // A recalled or branch-restored prompt can be much larger than anything the
 // operator typed one key at a time. Keep the exact source in state, but never
-// hand an unbounded string to Ink's wrapping engine. Eight logical tail lines
-// preserve the only edit position this composer exposes: the cursor at the end.
+// hand an unbounded string to Ink's wrapping engine. The bounded view follows
+// the real cursor rather than assuming every edit happens at the end.
 const COMPOSER_DISPLAY_CODE_UNITS = 2048;
 const COMPOSER_DISPLAY_LINES = 8;
-function composerDisplayValue(source) {
-    let start = Math.max(0, source.length - COMPOSER_DISPLAY_CODE_UNITS);
-    // Do not begin the view with the low half of a split surrogate pair. Dropping
-    // that one half is display-only; the complete pair stays in `source`.
-    if (start > 0 &&
-        source.charCodeAt(start) >= 0xdc00 &&
-        source.charCodeAt(start) <= 0xdfff &&
-        source.charCodeAt(start - 1) >= 0xd800 &&
-        source.charCodeAt(start - 1) <= 0xdbff) {
-        start += 1;
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+/**
+ * Visible rows in a completion menu for this terminal height.
+ *
+ * Each option is budgeted as two rows because a description may wrap. The
+ * composer, borders, footer and status area retain twelve rows before the
+ * menu grows. A short/unknown terminal keeps the established six-row window;
+ * a tall terminal uses the space it actually has, capped so the menu never
+ * takes over the whole conversation view.
+ */
+export function suggestionWindowSize(rows) {
+    if (rows === undefined || !Number.isFinite(rows))
+        return MIN_SUGGESTIONS;
+    return Math.min(MAX_SUGGESTIONS, Math.max(MIN_SUGGESTIONS, Math.floor((rows - SUGGESTION_FURNITURE_ROWS) / 2)));
+}
+function graphemeBoundaries(source) {
+    const boundaries = [0];
+    for (const segment of graphemeSegmenter.segment(source)) {
+        const end = segment.index + segment.segment.length;
+        if (end > (boundaries[boundaries.length - 1] ?? -1))
+            boundaries.push(end);
+    }
+    return boundaries;
+}
+function previousGraphemeBoundary(source, cursor) {
+    let previous = 0;
+    for (const boundary of graphemeBoundaries(source)) {
+        if (boundary >= cursor)
+            break;
+        previous = boundary;
+    }
+    return previous;
+}
+function nextGraphemeBoundary(source, cursor) {
+    for (const boundary of graphemeBoundaries(source)) {
+        if (boundary > cursor)
+            return boundary;
+    }
+    return source.length;
+}
+function lineStart(source, cursor) {
+    return cursor <= 0 ? 0 : source.lastIndexOf('\n', cursor - 1) + 1;
+}
+function lineEnd(source, cursor) {
+    const newline = source.indexOf('\n', cursor);
+    return newline < 0 ? source.length : newline;
+}
+function graphemeColumn(source, start, cursor) {
+    let column = 0;
+    for (const _segment of graphemeSegmenter.segment(source.slice(start, cursor)))
+        column += 1;
+    return column;
+}
+function cursorAtGraphemeColumn(source, start, end, column) {
+    let current = 0;
+    for (const segment of graphemeSegmenter.segment(source.slice(start, end))) {
+        if (current === column)
+            return start + segment.index;
+        current += 1;
+    }
+    return end;
+}
+function verticalCursor(source, cursor, direction, preferredColumn) {
+    const currentStart = lineStart(source, cursor);
+    const currentEnd = lineEnd(source, cursor);
+    const column = preferredColumn ?? graphemeColumn(source, currentStart, cursor);
+    if (direction === -1) {
+        if (currentStart === 0)
+            return null;
+        const previousEnd = currentStart - 1;
+        const previousStart = lineStart(source, previousEnd);
+        return {
+            cursor: cursorAtGraphemeColumn(source, previousStart, previousEnd, column),
+            column,
+        };
+    }
+    if (currentEnd === source.length)
+        return null;
+    const nextStart = currentEnd + 1;
+    return {
+        cursor: cursorAtGraphemeColumn(source, nextStart, lineEnd(source, nextStart), column),
+        column,
+    };
+}
+function composerDisplayValue(source, cursor) {
+    let start = Math.max(0, cursor - Math.floor(COMPOSER_DISPLAY_CODE_UNITS / 2));
+    let end = Math.min(source.length, start + COMPOSER_DISPLAY_CODE_UNITS);
+    if (end === source.length)
+        start = Math.max(0, end - COMPOSER_DISPLAY_CODE_UNITS);
+    if (cursor > end) {
+        end = cursor;
+        start = Math.max(0, end - COMPOSER_DISPLAY_CODE_UNITS);
     }
-    let newlineCount = 0;
-    for (let index = source.length - 1; index >= start; index -= 1) {
+    let afterBreaks = 0;
+    for (let index = cursor; index < end; index += 1) {
         if (source.charCodeAt(index) !== 0x0a)
             continue;
-        newlineCount += 1;
-        if (newlineCount === COMPOSER_DISPLAY_LINES) {
+        afterBreaks += 1;
+        if (afterBreaks === Math.min(3, COMPOSER_DISPLAY_LINES - 1)) {
+            end = index;
+            break;
+        }
+    }
+    let beforeBreaks = 0;
+    const beforeBudget = COMPOSER_DISPLAY_LINES - afterBreaks;
+    for (let index = cursor - 1; index >= start; index -= 1) {
+        if (source.charCodeAt(index) !== 0x0a)
+            continue;
+        beforeBreaks += 1;
+        if (beforeBreaks === beforeBudget) {
             start = index + 1;
             break;
         }
     }
-    const visible = terminalDisplayText(source.slice(start));
-    return start > 0 ? `… ${visible}` : visible;
+    // Only the view is rounded to complete grapheme boundaries. The exact source
+    // remains untouched even when the cap lands inside a combining sequence.
+    const boundaries = graphemeBoundaries(source);
+    start = boundaries.find((boundary) => boundary >= start) ?? source.length;
+    end = [...boundaries].reverse().find((boundary) => boundary <= end) ?? 0;
+    return {
+        before: terminalDisplayText(source.slice(start, cursor)),
+        after: terminalDisplayText(source.slice(cursor, end)),
+        leadingEllipsis: start > 0,
+        trailingEllipsis: end < source.length,
+    };
 }
 /**
  * Terminal Ctrl+W / Unix word-rubout semantics.
@@ -46,17 +151,63 @@ function composerDisplayValue(source) {
  * operators already bring to this key.
  */
 export function deletePreviousWord(source) {
-    let index = source.length;
-    while (index > 0 && /\s/u.test(source[index - 1] ?? ''))
-        index -= 1;
-    while (index > 0 && !/\s/u.test(source[index - 1] ?? ''))
-        index -= 1;
-    return source.slice(0, index);
+    return deletePreviousWordAt(source, source.length).value;
 }
-export function Composer({ disabled = false, onSubmit, history, userCommands = [], hidden = false, escapeInterrupts = false, onNotice, onEditPrevious, draftToRestore = null, onDraftRestored, }) {
-    const [value, setValue] = useState('');
-    const [historyIndex, setHistoryIndex] = useState(-1);
+function previousWordBoundary(source, cursor) {
+    let start = cursor;
+    while (start > 0) {
+        const previous = previousGraphemeBoundary(source, start);
+        if (!/\s/u.test(source.slice(previous, start)))
+            break;
+        start = previous;
+    }
+    while (start > 0) {
+        const previous = previousGraphemeBoundary(source, start);
+        if (/\s/u.test(source.slice(previous, start)))
+            break;
+        start = previous;
+    }
+    return start;
+}
+function nextWordBoundary(source, cursor) {
+    let end = cursor;
+    while (end < source.length) {
+        const next = nextGraphemeBoundary(source, end);
+        if (!/\s/u.test(source.slice(end, next)))
+            break;
+        end = next;
+    }
+    while (end < source.length) {
+        const next = nextGraphemeBoundary(source, end);
+        if (/\s/u.test(source.slice(end, next)))
+            break;
+        end = next;
+    }
+    return end;
+}
+function deletePreviousWordAt(source, cursor) {
+    const start = previousWordBoundary(source, cursor);
+    return { value: source.slice(0, start) + source.slice(cursor), cursor: start };
+}
+function deleteNextWordAt(source, cursor) {
+    const end = nextWordBoundary(source, cursor);
+    return { value: source.slice(0, cursor) + source.slice(end), cursor };
+}
+export function Composer({ disabled = false, onSubmit, history, userCommands = [], mentionCandidates = [], hidden = false, escapeInterrupts = false, onNotice, onStepReasoningEffort, onExternalEdit, onEditPrevious, draftToRestore = null, onDraftRestored, }) {
+    const terminal = useWindowSize();
+    const [value, setValueState] = useState('');
+    const valueRef = useRef('');
+    const [cursor, setCursorState] = useState(0);
+    const cursorRef = useRef(0);
+    const [, setHistoryIndexState] = useState(-1);
+    const historyIndexRef = useRef(-1);
+    const historyDraftRef = useRef(null);
+    const [historySearch, setHistorySearchState] = useState(null);
+    const historySearchRef = useRef(null);
+    const verticalColumnRef = useRef(null);
+    const killBufferRef = useRef('');
     const [selected, setSelected] = useState(0);
+    const selectedRef = useRef(0);
     // Large pastes are held as attachments (shown as chips) instead of being
     // dumped into the input, then folded into the message on submit.
     const [pastes, setPastes] = useState([]);
@@ -65,31 +216,82 @@ export function Composer({ disabled = false, onSubmit, history, userCommands = [
     const [attachments, setAttachments] = useState([]);
     const [editPreviousArmed, setEditPreviousArmed] = useState(false);
     const restoredTokenRef = useRef(null);
-    const suggestions = matchSlashCommands(value, userCommands).slice(0, MAX_SUGGESTIONS);
-    const showSuggestions = suggestions.length > 0;
-    const selIdx = Math.min(selected, Math.max(0, suggestions.length - 1));
-    const displayValue = composerDisplayValue(value);
-    const commandColumnWidth = Math.min(24, Math.max(10, ...suggestions.map((command) => command.name.length + 4)));
+    // Keep the complete match set. The six-row limit belongs to the rendered
+    // window, not to navigation: slicing here made every later command
+    // unreachable no matter how many times the operator pressed Down.
+    const commandSuggestions = matchSlashCommands(value, userCommands);
+    const activeMention = activeFileMention(value, cursor);
+    const fileSuggestions = activeMention
+        ? matchMentionableFiles(activeMention.query, mentionCandidates)
+        : [];
+    const suggestionKind = commandSuggestions.length > 0 ? 'command' : fileSuggestions.length > 0 ? 'file' : null;
+    const suggestionCount = suggestionKind === 'command' ? commandSuggestions.length : fileSuggestions.length;
+    const suggestionWindow = suggestionWindowSize(terminal.rows);
+    const selIdx = Math.min(selected, Math.max(0, suggestionCount - 1));
+    const suggestionStart = Math.min(Math.max(0, selIdx - suggestionWindow + 1), Math.max(0, suggestionCount - suggestionWindow));
+    const visibleCommandSuggestions = commandSuggestions.slice(suggestionStart, suggestionStart + suggestionWindow);
+    const visibleFileSuggestions = fileSuggestions.slice(suggestionStart, suggestionStart + suggestionWindow);
+    const displayValue = composerDisplayValue(value, cursor);
+    const commandColumnWidth = Math.min(24, Math.max(10, ...visibleCommandSuggestions.map((command) => command.name.length + 4)));
+    const setBuffer = useCallback((nextValue, nextCursor = nextValue.length) => {
+        valueRef.current = nextValue;
+        cursorRef.current = nextCursor;
+        setValueState(nextValue);
+        setCursorState(nextCursor);
+    }, []);
+    const setHistoryIndex = useCallback((next) => {
+        historyIndexRef.current = next;
+        setHistoryIndexState(next);
+    }, []);
+    const setHistorySearch = useCallback((next) => {
+        historySearchRef.current = next;
+        setHistorySearchState(next);
+    }, []);
+    const setSelectedIndex = useCallback((next) => {
+        const resolved = typeof next === 'function' ? next(selectedRef.current) : next;
+        selectedRef.current = resolved;
+        setSelected(resolved);
+    }, []);
+    const editBuffer = useCallback((nextValue, nextCursor = nextValue.length) => {
+        verticalColumnRef.current = null;
+        historyDraftRef.current = null;
+        setHistorySearch(null);
+        setHistoryIndex(-1);
+        setBuffer(nextValue, nextCursor);
+    }, [setBuffer, setHistoryIndex, setHistorySearch]);
     const reset = useCallback(() => {
-        setValue('');
+        verticalColumnRef.current = null;
+        historyDraftRef.current = null;
+        setHistorySearch(null);
+        setBuffer('', 0);
         setHistoryIndex(-1);
-        setSelected(0);
+        setSelectedIndex(0);
         setPastes([]);
         setAttachments([]);
         setEditPreviousArmed(false);
-    }, []);
+    }, [setBuffer, setHistoryIndex, setHistorySearch, setSelectedIndex]);
     useEffect(() => {
         if (!draftToRestore || restoredTokenRef.current === draftToRestore.token)
             return;
         restoredTokenRef.current = draftToRestore.token;
-        setValue(draftToRestore.text);
+        setBuffer(draftToRestore.text);
         setHistoryIndex(-1);
-        setSelected(0);
+        setSelectedIndex(0);
+        verticalColumnRef.current = null;
+        historyDraftRef.current = null;
+        setHistorySearch(null);
         setPastes([]);
         setAttachments(draftToRestore.attachments ? [...draftToRestore.attachments] : []);
         setEditPreviousArmed(false);
         onDraftRestored?.(draftToRestore.token);
-    }, [draftToRestore, onDraftRestored]);
+    }, [
+        draftToRestore,
+        onDraftRestored,
+        setBuffer,
+        setHistoryIndex,
+        setHistorySearch,
+        setSelectedIndex,
+    ]);
     useInput((input, key) => {
         // Hidden means the screen belongs to something else, so a keypress
         // aimed at that must not also land here.
@@ -105,10 +307,56 @@ export function Composer({ disabled = false, onSubmit, history, userCommands = [
         // strength of a second flag happening to agree with it.
         if (disabled || hidden)
             return;
+        const liveCommandSuggestions = matchSlashCommands(valueRef.current, userCommands);
+        const liveMention = activeFileMention(valueRef.current, cursorRef.current);
+        const liveFileSuggestions = liveMention
+            ? matchMentionableFiles(liveMention.query, mentionCandidates)
+            : [];
+        const liveSuggestionKind = liveCommandSuggestions.length > 0
+            ? 'command'
+            : liveFileSuggestions.length > 0
+                ? 'file'
+                : null;
+        const liveSuggestionCount = liveSuggestionKind === 'command'
+            ? liveCommandSuggestions.length
+            : liveFileSuggestions.length;
+        const hasLiveSuggestions = liveSuggestionKind !== null;
+        const liveSelection = Math.min(selectedRef.current, Math.max(0, liveSuggestionCount - 1));
+        const acceptSuggestion = () => {
+            if (liveSuggestionKind === 'command') {
+                editBuffer(`/${liveCommandSuggestions[liveSelection]?.name ?? ''} `);
+                setSelectedIndex(0);
+                return true;
+            }
+            if (liveSuggestionKind === 'file' && liveMention) {
+                const path = liveFileSuggestions[liveSelection];
+                if (!path)
+                    return false;
+                const replacement = `@${path} `;
+                editBuffer(valueRef.current.slice(0, liveMention.start) +
+                    replacement +
+                    valueRef.current.slice(liveMention.end), liveMention.start + replacement.length);
+                setSelectedIndex(0);
+                return true;
+            }
+            return false;
+        };
+        if (!hasLiveSuggestions &&
+            onStepReasoningEffort &&
+            ((key.shift && key.downArrow) || (key.meta && input === ','))) {
+            onStepReasoningEffort('lower');
+            return;
+        }
+        if (!hasLiveSuggestions &&
+            onStepReasoningEffort &&
+            ((key.shift && key.upArrow) || (key.meta && input === '.'))) {
+            onStepReasoningEffort('raise');
+            return;
+        }
         if (!key.escape && editPreviousArmed)
             setEditPreviousArmed(false);
         const submit = (mode) => {
-            const message = [value, ...pastes]
+            const message = [valueRef.current, ...pastes]
                 .map((s) => s.trim())
                 .filter(Boolean)
                 .join('\n\n');
@@ -122,23 +370,55 @@ export function Composer({ disabled = false, onSubmit, history, userCommands = [
             reset();
             return true;
         };
+        if ((key.return && (key.shift || key.meta)) || input === '\n') {
+            const position = cursorRef.current;
+            editBuffer(valueRef.current.slice(0, position) + '\n' + valueRef.current.slice(position), position + 1);
+            return;
+        }
+        if (key.ctrl && (input === 'r' || input === 's')) {
+            verticalColumnRef.current = null;
+            const browsedHistoryDraft = historyDraftRef.current;
+            historyDraftRef.current = null;
+            setHistoryIndex(-1);
+            let search = historySearchRef.current;
+            if (!search) {
+                const query = valueRef.current;
+                const normalizedQuery = query.toLowerCase();
+                search = {
+                    draft: browsedHistoryDraft ?? { value: query, cursor: cursorRef.current },
+                    query,
+                    matches: [...history]
+                        .reverse()
+                        .filter((entry) => entry.toLowerCase().includes(normalizedQuery)),
+                    position: -1,
+                };
+            }
+            const position = input === 'r'
+                ? Math.min(search.position + 1, search.matches.length - 1)
+                : Math.max(search.position - 1, -1);
+            const next = { ...search, position };
+            setHistorySearch(next);
+            if (position < 0)
+                setBuffer(next.draft.value, next.draft.cursor);
+            else
+                setBuffer(next.matches[position] ?? next.draft.value);
+            return;
+        }
         if (key.return) {
-            if (showSuggestions) {
+            if (liveSuggestionKind === 'command') {
                 // Run the highlighted command.
-                onSubmit(`/${suggestions[selIdx]?.name ?? ''}`);
+                onSubmit(`/${liveCommandSuggestions[liveSelection]?.name ?? ''}`);
                 reset();
                 return;
             }
+            if (acceptSuggestion())
+                return;
             submit('submit');
             return;
         }
         if (key.tab) {
-            if (showSuggestions) {
-                // Complete to the highlighted command, ready for arguments.
-                setValue(`/${suggestions[selIdx]?.name ?? ''} `);
-                setSelected(0);
+            if (acceptSuggestion())
                 return;
-            }
             submit('queue');
             return;
         }
@@ -148,7 +428,13 @@ export function Composer({ disabled = false, onSubmit, history, userCommands = [
             // following the hint the status bar is showing them.
             if (escapeInterrupts)
                 return;
-            const empty = value.length === 0 && pastes.length === 0 && attachments.length === 0;
+            const activeSearch = historySearchRef.current;
+            if (activeSearch) {
+                setBuffer(activeSearch.draft.value, activeSearch.draft.cursor);
+                setHistorySearch(null);
+                return;
+            }
+            const empty = valueRef.current.length === 0 && pastes.length === 0 && attachments.length === 0;
             if (empty && onEditPrevious) {
                 if (editPreviousArmed) {
                     setEditPreviousArmed(false);
@@ -161,44 +447,162 @@ export function Composer({ disabled = false, onSubmit, history, userCommands = [
             reset();
             return;
         }
-        if (key.backspace || key.delete) {
+        if (key.backspace && (key.meta || key.ctrl)) {
+            const source = valueRef.current;
+            const position = cursorRef.current;
+            const start = previousWordBoundary(source, position);
+            if (start < position)
+                killBufferRef.current = source.slice(start, position);
+            const result = deletePreviousWordAt(valueRef.current, cursorRef.current);
+            editBuffer(result.value, result.cursor);
+            return;
+        }
+        if (key.backspace) {
             // Backspace on an empty line removes the last durable attachment first,
             // then pasted text.
-            if (value.length === 0 && attachments.length > 0) {
+            if (valueRef.current.length === 0 && attachments.length > 0) {
                 setAttachments((p) => p.slice(0, -1));
                 return;
             }
-            if (value.length === 0 && pastes.length > 0) {
+            if (valueRef.current.length === 0 && pastes.length > 0) {
                 setPastes((p) => p.slice(0, -1));
                 return;
             }
-            setValue((v) => v.slice(0, -1));
+            const position = cursorRef.current;
+            const previous = previousGraphemeBoundary(valueRef.current, position);
+            editBuffer(valueRef.current.slice(0, previous) + valueRef.current.slice(position), previous);
+            return;
+        }
+        if (key.delete || (key.ctrl && input === 'd')) {
+            const position = cursorRef.current;
+            const next = nextGraphemeBoundary(valueRef.current, position);
+            editBuffer(valueRef.current.slice(0, position) + valueRef.current.slice(next), position);
+            return;
+        }
+        if ((key.leftArrow && (key.meta || key.ctrl)) || (key.meta && input === 'b')) {
+            verticalColumnRef.current = null;
+            const previous = previousWordBoundary(valueRef.current, cursorRef.current);
+            cursorRef.current = previous;
+            setCursorState(previous);
+            return;
+        }
+        if ((key.rightArrow && (key.meta || key.ctrl)) || (key.meta && input === 'f')) {
+            verticalColumnRef.current = null;
+            const next = nextWordBoundary(valueRef.current, cursorRef.current);
+            cursorRef.current = next;
+            setCursorState(next);
+            return;
+        }
+        if (key.leftArrow || (key.ctrl && input === 'b')) {
+            verticalColumnRef.current = null;
+            const previous = previousGraphemeBoundary(valueRef.current, cursorRef.current);
+            cursorRef.current = previous;
+            setCursorState(previous);
+            return;
+        }
+        if (key.rightArrow || (key.ctrl && input === 'f')) {
+            verticalColumnRef.current = null;
+            const next = nextGraphemeBoundary(valueRef.current, cursorRef.current);
+            cursorRef.current = next;
+            setCursorState(next);
+            return;
+        }
+        if (hasLiveSuggestions && (key.home || key.end || key.pageUp || key.pageDown)) {
+            if (key.home)
+                setSelectedIndex(0);
+            else if (key.end)
+                setSelectedIndex(liveSuggestionCount - 1);
+            else if (key.pageUp)
+                setSelectedIndex((index) => Math.max(0, index - suggestionWindow));
+            else
+                setSelectedIndex((index) => Math.min(liveSuggestionCount - 1, index + suggestionWindow));
+            return;
+        }
+        if (key.home || (key.ctrl && input === 'a')) {
+            verticalColumnRef.current = null;
+            const start = lineStart(valueRef.current, cursorRef.current);
+            cursorRef.current = start;
+            setCursorState(start);
+            return;
+        }
+        if (key.end || (key.ctrl && input === 'e')) {
+            verticalColumnRef.current = null;
+            const end = lineEnd(valueRef.current, cursorRef.current);
+            cursorRef.current = end;
+            setCursorState(end);
             return;
         }
-        if (key.upArrow) {
-            if (showSuggestions) {
-                setSelected((i) => Math.max(0, i - 1));
+        if (key.upArrow || (key.ctrl && input === 'p')) {
+            if (hasLiveSuggestions) {
+                setSelectedIndex((i) => Math.max(0, i - 1));
                 return;
             }
+            const vertical = verticalCursor(valueRef.current, cursorRef.current, -1, verticalColumnRef.current ?? undefined);
+            if (vertical) {
+                verticalColumnRef.current = vertical.column;
+                cursorRef.current = vertical.cursor;
+                setCursorState(vertical.cursor);
+                return;
+            }
+            verticalColumnRef.current = null;
             if (history.length === 0)
                 return;
-            const next = Math.min(historyIndex + 1, history.length - 1);
+            if (historyIndexRef.current < 0) {
+                historyDraftRef.current = { value: valueRef.current, cursor: cursorRef.current };
+            }
+            const next = Math.min(historyIndexRef.current + 1, history.length - 1);
             setHistoryIndex(next);
-            setValue(history[history.length - 1 - next] ?? '');
+            setBuffer(history[history.length - 1 - next] ?? '');
             return;
         }
-        if (key.downArrow) {
-            if (showSuggestions) {
-                setSelected((i) => Math.min(suggestions.length - 1, i + 1));
+        if (key.downArrow || (key.ctrl && input === 'n')) {
+            if (hasLiveSuggestions) {
+                setSelectedIndex((i) => Math.min(liveSuggestionCount - 1, i + 1));
                 return;
             }
-            if (historyIndex <= 0) {
-                reset();
+            const vertical = verticalCursor(valueRef.current, cursorRef.current, 1, verticalColumnRef.current ?? undefined);
+            if (vertical) {
+                verticalColumnRef.current = vertical.column;
+                cursorRef.current = vertical.cursor;
+                setCursorState(vertical.cursor);
                 return;
             }
-            const next = historyIndex - 1;
+            verticalColumnRef.current = null;
+            if (historyIndexRef.current < 0)
+                return;
+            if (historyIndexRef.current === 0) {
+                const draft = historyDraftRef.current;
+                historyDraftRef.current = null;
+                setHistoryIndex(-1);
+                setBuffer(draft?.value ?? '', draft?.cursor ?? 0);
+                return;
+            }
+            const next = historyIndexRef.current - 1;
             setHistoryIndex(next);
-            setValue(history[history.length - 1 - next] ?? '');
+            setBuffer(history[history.length - 1 - next] ?? '');
+            return;
+        }
+        if (key.ctrl && input === 'g') {
+            if (!onExternalEdit) {
+                onNotice?.('External editor support is unavailable in this terminal.');
+                return;
+            }
+            const seed = [valueRef.current, ...pastes]
+                .map((part) => part.trim())
+                .filter(Boolean)
+                .join('\n\n');
+            void onExternalEdit(seed)
+                .then((edited) => {
+                const cleaned = edited.trimEnd();
+                setPastes([]);
+                setHistoryIndex(-1);
+                setHistorySearch(null);
+                setSelectedIndex(0);
+                editBuffer(cleaned, cleaned.length);
+            })
+                .catch((error) => {
+                onNotice?.(`Cannot open external editor: ${error instanceof Error ? error.message : String(error)}`);
+            });
             return;
         }
         // Ctrl+V / Alt+V: pull an image off the clipboard and hold it as an attachment.
@@ -221,7 +625,47 @@ export function Composer({ disabled = false, onSubmit, history, userCommands = [
             return;
         }
         if (key.ctrl && input === 'w') {
-            setValue(deletePreviousWord);
+            const source = valueRef.current;
+            const position = cursorRef.current;
+            const start = previousWordBoundary(source, position);
+            if (start < position)
+                killBufferRef.current = source.slice(start, position);
+            const result = deletePreviousWordAt(valueRef.current, cursorRef.current);
+            editBuffer(result.value, result.cursor);
+            return;
+        }
+        if (key.ctrl && input === 'u') {
+            const position = cursorRef.current;
+            const start = lineStart(valueRef.current, position);
+            if (start < position)
+                killBufferRef.current = valueRef.current.slice(start, position);
+            editBuffer(valueRef.current.slice(0, start) + valueRef.current.slice(position), start);
+            return;
+        }
+        if (key.ctrl && input === 'k') {
+            const position = cursorRef.current;
+            const end = lineEnd(valueRef.current, position);
+            if (position < end)
+                killBufferRef.current = valueRef.current.slice(position, end);
+            editBuffer(valueRef.current.slice(0, position) + valueRef.current.slice(end), position);
+            return;
+        }
+        if (key.meta && input === 'd') {
+            const source = valueRef.current;
+            const position = cursorRef.current;
+            const end = nextWordBoundary(source, position);
+            if (position < end)
+                killBufferRef.current = source.slice(position, end);
+            const result = deleteNextWordAt(valueRef.current, cursorRef.current);
+            editBuffer(result.value, result.cursor);
+            return;
+        }
+        if (key.ctrl && input === 'y') {
+            const killed = killBufferRef.current;
+            if (killed.length === 0)
+                return;
+            const position = cursorRef.current;
+            editBuffer(valueRef.current.slice(0, position) + killed + valueRef.current.slice(position), position + killed.length);
             return;
         }
         if (key.ctrl || key.meta)
@@ -234,9 +678,10 @@ export function Composer({ disabled = false, onSubmit, history, userCommands = [
             setPastes((p) => [...p, input]);
             return;
         }
-        setSelected(0);
-        setValue((v) => v + input);
-    }, { isActive: true });
+        setSelectedIndex(0);
+        const position = cursorRef.current;
+        editBuffer(valueRef.current.slice(0, position) + input + valueRef.current.slice(position), position + input.length);
+    }, { isActive: !disabled && !hidden });
     // After every hook, so the component keeps its state while it is off screen.
     // This is the whole fix: React preserves a mounted component's state, and
     // preserving it is what an unmounting ternary could not do.
@@ -244,7 +689,18 @@ export function Composer({ disabled = false, onSubmit, history, userCommands = [
         return null;
     const promptGlyph = disabled ? '…' : '>';
     const showPlaceholder = !disabled && value.length === 0 && !editPreviousArmed;
-    return (_jsxs(Box, { flexDirection: "column", children: [pastes.length > 0 || attachments.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingBottom: 1, children: [attachments.map((attachment, i) => (_jsxs(Text, { color: theme.accent.tool, children: ["\u2398 ", attachmentLabel(attachment, i)] }, `attachment-${i}`))), pastes.map((p, i) => (_jsxs(Text, { color: theme.text.secondary, children: ["\u2398 Pasted text #", i + 1, " (+", p.split('\n').length, " lines)"] }, `paste-${i}`)))] })) : null, _jsxs(Box, { paddingX: 1, children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: disabled ? theme.text.muted : theme.accent.user, bold: true, children: promptGlyph }) }), _jsx(Box, { flexGrow: 1, children: showPlaceholder ? (_jsx(Text, { color: theme.text.muted, children: "Type a message\u2026 (/help for commands)" })) : editPreviousArmed ? (_jsx(Text, { color: theme.text.muted, children: "Press Esc again to edit a previous prompt" })) : (_jsxs(Text, { color: disabled ? theme.text.muted : theme.text.primary, wrap: "wrap", children: [displayValue, disabled ? null : _jsx(Text, { color: theme.border.focus, children: "\u258F" })] })) })] }), showSuggestions ? (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingTop: 1, width: "100%", children: suggestions.map((cmd, i) => (_jsxs(Box, { width: "100%", flexDirection: "row", children: [_jsx(Box, { width: commandColumnWidth, flexShrink: 0, children: _jsxs(Text, { color: i === selIdx ? theme.accent.user : theme.text.secondary, bold: i === selIdx, children: [i === selIdx ? '› ' : '  ', "/", cmd.name] }) }), _jsx(Box, { flexGrow: 1, minWidth: 0, children: _jsx(Text, { color: theme.text.muted, wrap: "wrap", children: cmd.description }) })] }, cmd.name))) })) : null] }));
+    const historySearchQuery = historySearch
+        ? composerDisplayValue(historySearch.query, historySearch.query.length)
+        : null;
+    return (_jsxs(Box, { flexDirection: "column", children: [pastes.length > 0 || attachments.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingBottom: 1, children: [attachments.map((attachment, i) => (_jsxs(Text, { color: theme.accent.tool, children: ["\u2398 ", attachmentLabel(attachment, i)] }, `attachment-${i}`))), pastes.map((p, i) => (_jsxs(Text, { color: theme.text.secondary, children: ["\u2398 Pasted text #", i + 1, " (+", p.split('\n').length, " lines)"] }, `paste-${i}`)))] })) : null, _jsxs(Box, { paddingX: 1, children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: disabled ? theme.text.muted : theme.accent.user, bold: true, children: promptGlyph }) }), _jsx(Box, { flexGrow: 1, children: showPlaceholder ? (_jsx(Text, { color: theme.text.muted, children: "Type a message\u2026 (/help for commands)" })) : editPreviousArmed ? (_jsx(Text, { color: theme.text.muted, children: "Press Esc again to edit a previous prompt" })) : (_jsxs(Text, { color: disabled ? theme.text.muted : theme.text.primary, wrap: "wrap", children: [displayValue.leadingEllipsis ? '… ' : '', displayValue.before, disabled ? null : _jsx(Text, { color: theme.border.focus, children: "\u258F" }), displayValue.after, displayValue.trailingEllipsis ? ' …' : ''] })) })] }), historySearch && historySearchQuery ? (_jsx(Box, { paddingX: 1, paddingTop: 1, children: _jsxs(Text, { color: theme.text.muted, children: ["history \u201C", historySearchQuery.leadingEllipsis ? '… ' : '', historySearchQuery.before, "\u201D \u00B7", ' ', historySearch.position < 0
+                            ? `draft · ${historySearch.matches.length} match${historySearch.matches.length === 1 ? '' : 'es'}`
+                            : `${historySearch.position + 1}/${historySearch.matches.length}`, ' ', "\u00B7 Ctrl+R older \u00B7 Ctrl+S newer \u00B7 Esc restore"] }) })) : null, suggestionKind === 'command' ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingTop: 1, width: "100%", children: [visibleCommandSuggestions.map((cmd, i) => {
+                        const absoluteIndex = suggestionStart + i;
+                        return (_jsxs(Box, { width: "100%", flexDirection: "row", children: [_jsx(Box, { width: commandColumnWidth, flexShrink: 0, children: _jsxs(Text, { color: absoluteIndex === selIdx ? theme.accent.user : theme.text.secondary, bold: absoluteIndex === selIdx, children: [absoluteIndex === selIdx ? '› ' : '  ', "/", cmd.name] }) }), _jsx(Box, { flexGrow: 1, minWidth: 0, children: _jsx(Text, { color: theme.text.muted, wrap: "wrap", children: cmd.description }) })] }, cmd.name));
+                    }), _jsxs(Text, { color: theme.text.muted, children: [selIdx + 1, "/", commandSuggestions.length, " \u00B7 \u2191\u2193 navigate \u00B7 PgUp/PgDn jump \u00B7 Enter run \u00B7 Tab complete"] })] })) : suggestionKind === 'file' ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingTop: 1, width: "100%", children: [visibleFileSuggestions.map((path, i) => {
+                        const absoluteIndex = suggestionStart + i;
+                        return (_jsxs(Text, { color: absoluteIndex === selIdx ? theme.accent.user : theme.text.secondary, bold: absoluteIndex === selIdx, children: [absoluteIndex === selIdx ? '› ' : '  ', "@", path] }, path));
+                    }), _jsxs(Text, { color: theme.text.muted, children: [selIdx + 1, "/", fileSuggestions.length, " \u00B7 \u2191\u2193 navigate \u00B7 PgUp/PgDn jump \u00B7 Enter/Tab insert"] })] })) : null] }));
 }
 function attachmentLabel(attachment, index) {
     if (attachment.type === 'stored') {